104 lines
3.6 KiB
React
104 lines
3.6 KiB
React
|
import React from 'react';
|
||
|
|
import {Badge, Button, Dropdown, Flex, Layout, Modal, Space, theme} from "antd";
|
||
|
|
import {DownOutlined, KeyOutlined, LogoutOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
|
||
|
|
import {useNavigate} from "react-router-dom";
|
||
|
|
import ChangePasswordModal from "./ChangePasswordModal";
|
||
|
|
|
||
|
|
function LayoutHeader(props) {
|
||
|
|
const {
|
||
|
|
token: {colorBgContainer, borderRadiusLG, colorBgBase},
|
||
|
|
} = theme.useToken();
|
||
|
|
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
const {profile, commonAxios, messageApi} = props;
|
||
|
|
const [changePasswordModalOpen, setChangePasswordModalOpen] = React.useState(false);
|
||
|
|
|
||
|
|
const logout = () => {
|
||
|
|
Modal.confirm({
|
||
|
|
title: '确认退出登录吗？',
|
||
|
|
onOk: () => {
|
||
|
|
commonAxios.post('/api/auth/logout').then(res => {
|
||
|
|
localStorage.removeItem('token');
|
||
|
|
navigate('/auth/login');
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onCancel: () => {
|
||
|
|
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
const accountItems = [
|
||
|
|
{
|
||
|
|
label: (
|
||
|
|
<div onClick={() => setChangePasswordModalOpen(true)}>修改密码</div>
|
||
|
|
),
|
||
|
|
icon: <KeyOutlined/>,
|
||
|
|
key: 'changePassword',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'divider',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: <div onClick={logout}>退出登录</div>,
|
||
|
|
key: 'logout',
|
||
|
|
icon: <LogoutOutlined/>,
|
||
|
|
danger: true,
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<ChangePasswordModal commonAxios={commonAxios} messageApi={messageApi} open={changePasswordModalOpen}
|
||
|
|
setOpen={setChangePasswordModalOpen} closable={true}/>
|
||
|
|
<Layout.Header
|
||
|
|
style={{
|
||
|
|
height: '64px',
|
||
|
|
background: colorBgBase
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
height: '100%'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<a href={'/overview'} style={{height: '100%', color: 'black'}}>
|
||
|
|
<Flex justify={'flex-start'} style={{height: '100%'}} align={"center"}>
|
||
|
|
|
||
|
|
<img style={{width: 'auto', height: '80%'}} src={'/hrbnu_logo.png'}
|
||
|
|
alt={'哈师大logo'}/>
|
||
|
|
<h2 style={{marginLeft: '20px'}}>工作量精算管家</h2>
|
||
|
|
|
||
|
|
</Flex>
|
||
|
|
</a>
|
||
|
|
<Flex justify={"flex-start"} align={"center"} gap={"large"}>
|
||
|
|
<a hidden>
|
||
|
|
<Badge count={0}>
|
||
|
|
<MailOutlined style={{fontSize: '15px'}}/>
|
||
|
|
</Badge>
|
||
|
|
</a>
|
||
|
|
<Dropdown
|
||
|
|
menu={{
|
||
|
|
items: accountItems,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Button type={'text'}>
|
||
|
|
<Space>
|
||
|
|
<UserOutlined/>
|
||
|
|
{profile.staffNumber}{profile.name}
|
||
|
|
<DownOutlined/>
|
||
|
|
</Space>
|
||
|
|
</Button>
|
||
|
|
</Dropdown>
|
||
|
|
</Flex>
|
||
|
|
</div>
|
||
|
|
</Layout.Header>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LayoutHeader;
|