From b24e4e09b1a1291c677c4b99c088ad292691df1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Fri, 24 Mar 2023 15:27:59 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E5=88=9D=E6=AD=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/compenents/change-password/index.tsx | 2 +- src/compenents/header/index.module.scss | 1 + src/compenents/header/index.tsx | 11 ++- src/compenents/index.ts | 1 + src/compenents/user-info/index.module.scss | 0 src/compenents/user-info/index.tsx | 93 ++++++++++++++++++++++ 6 files changed, 105 insertions(+), 3 deletions(-) create mode 100644 src/compenents/user-info/index.module.scss create mode 100644 src/compenents/user-info/index.tsx diff --git a/src/compenents/change-password/index.tsx b/src/compenents/change-password/index.tsx index 7a35721..10764eb 100644 --- a/src/compenents/change-password/index.tsx +++ b/src/compenents/change-password/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Modal, Select, Form, Input, message } from "antd"; +import { Modal, Form, Input, message } from "antd"; import styles from "./index.module.less"; import { user } from "../../api/index"; diff --git a/src/compenents/header/index.module.scss b/src/compenents/header/index.module.scss index 11240ea..1bfa1de 100644 --- a/src/compenents/header/index.module.scss +++ b/src/compenents/header/index.module.scss @@ -7,6 +7,7 @@ height: 60px; background: #ffffff; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.04); + z-index: 100; .main-header { width: 1200px; height: 60px; diff --git a/src/compenents/header/index.tsx b/src/compenents/header/index.tsx index 5dac552..c638761 100644 --- a/src/compenents/header/index.tsx +++ b/src/compenents/header/index.tsx @@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux"; import { Link, useNavigate } from "react-router-dom"; import { logoutAction } from "../../store/user/loginUserSlice"; import { ChangePasswordModel } from "../change-password"; +import { UserInfoModel } from "../user-info"; import { ExclamationCircleFilled } from "@ant-design/icons"; const { confirm } = Modal; @@ -16,9 +17,9 @@ export const Header: React.FC = () => { (state: any) => state.loginUser.value.departments ); const config = useSelector((state: any) => state.systemConfig.value); - const [changePasswordVisiale, setChangePasswordVisiale] = useState(false); + const [userInfoVisiale, setUserInfoVisiale] = useState(false); const onClick: MenuProps["onClick"] = ({ key }) => { if (key === "login_out") { @@ -40,7 +41,7 @@ export const Header: React.FC = () => { } else if (key === "change_password") { setChangePasswordVisiale(true); } else if (key === "user_info") { - navigate("/user_info"); + setUserInfoVisiale(true); } }; @@ -107,6 +108,12 @@ export const Header: React.FC = () => { setChangePasswordVisiale(false); }} > + { + setUserInfoVisiale(false); + }} + > diff --git a/src/compenents/index.ts b/src/compenents/index.ts index 4c8b5b8..f890b50 100644 --- a/src/compenents/index.ts +++ b/src/compenents/index.ts @@ -3,3 +3,4 @@ export * from "./no-footer"; export * from "./no-header"; export * from "./header"; export * from "./change-password"; +export * from "./user-info" diff --git a/src/compenents/user-info/index.module.scss b/src/compenents/user-info/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/compenents/user-info/index.tsx b/src/compenents/user-info/index.tsx new file mode 100644 index 0000000..efd8373 --- /dev/null +++ b/src/compenents/user-info/index.tsx @@ -0,0 +1,93 @@ +import React, { useState, useEffect } from "react"; +import { Modal, Image, Form, Input, message } from "antd"; +import styles from "./index.module.less"; +import { user } from "../../api/index"; + +interface PropInterface { + open: boolean; + onCancel: () => void; +} + +export const UserInfoModel: React.FC = ({ open, onCancel }) => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(true); + const [avatar, setAvatar] = useState(""); + + useEffect(() => { + getUser(); + }, [form, open]); + + const getUser = () => { + user.detail().then((res: any) => { + setAvatar(res.data.user.avatar); + form.setFieldsValue({ + name: res.data.user.name, + }); + }); + }; + + const onFinish = (values: any) => { + user.password(avatar, values.name).then((res: any) => { + message.success("保存成功!"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + return ( + <> + form.submit()} + onCancel={() => onCancel()} + maskClosable={false} + > +
+
+ +
+ {avatar && ( + + )} +
更换头像
+
+
+ + + +
+
+
+ + ); +};