修改密码组件

src/compenents/change-password/index.tsx

@@ -0,0 +1,102 @@
+import React, { useState, useEffect } from "react";
+import { Modal, Select, Form, Input, message } from "antd";
+import styles from "./index.module.less";
+import { user } from "../../api/index";
+
+interface PropInterface {
+  open: boolean;
+  onCancel: () => void;
+}
+
+export const ChangePasswordModel: React.FC<PropInterface> = ({
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      old_password: "",
+      new_password: "",
+      again_new_password: "",
+    });
+  }, [form, open]);
+
+  const onFinish = (values: any) => {
+    if (values.again_new_password !== values.new_password) {
+      message.error("再次输入的新密码错误");
+      return;
+    }
+    user.password(values.old_password, values.new_password).then((res: any) => {
+      message.success("保存成功！");
+      onCancel();
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Modal
+        title="修改密码"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+        maskClosable={false}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="change-password"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="请输入原密码"
+              name="old_password"
+              rules={[{ required: true, message: "请输入原密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="请输入原密码"
+              />
+            </Form.Item>
+            <Form.Item
+              label="输入新密码"
+              name="new_password"
+              rules={[{ required: true, message: "请输入新密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="请输入新密码"
+              />
+            </Form.Item>
+            <Form.Item
+              label="再次输入新密码"
+              name="again_new_password"
+              rules={[{ required: true, message: "再次输入新密码!" }]}
+            >
+              <Input.Password
+                style={{ width: 200 }}
+                autoComplete="off"
+                placeholder="再次输入新密码"
+              />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/compenents/header/index.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./index.module.scss";
 import { Button, Dropdown, MenuProps } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { Link, useNavigate } from "react-router-dom";
 import { logoutAction } from "../../store/user/loginUserSlice";
+import { ChangePasswordModel } from "../change-password";
 
 export const Header: React.FC = () => {
   const dispatch = useDispatch();
@@ -14,12 +15,15 @@ export const Header: React.FC = () => {
   );
   const config = useSelector((state: any) => state.systemConfig.value);
 
+  const [changePasswordVisiale, setChangePasswordVisiale] =
+    useState<boolean>(false);
+
   const onClick: MenuProps["onClick"] = ({ key }) => {
     if (key === "login_out") {
       dispatch(logoutAction());
       navigate("/login");
     } else if (key === "change_password") {
-      navigate("/change-password");
+      setChangePasswordVisiale(true);
     } else if (key === "user_info") {
       navigate("/user_info");
     }
@@ -82,6 +86,12 @@ export const Header: React.FC = () => {
               </div>
             </Dropdown>
           </Button.Group>
+          <ChangePasswordModel
+            open={changePasswordVisiale}
+            onCancel={() => {
+              setChangePasswordVisiale(false);
+            }}
+          ></ChangePasswordModel>
         </div>
       </div>
     </div>

src/compenents/index.ts

@@ -2,3 +2,4 @@ export * from "./footer";
 export * from "./no-footer";
 export * from "./no-header";
 export * from "./header";
+export * from "./change-password";