/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-11 11:33:21
|
* @LastEditTime: 2022-04-08 11:50:21
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 头部组件
|
*/
|
import React, { useEffect, useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { useNavigate } from 'react-router-dom';
|
import { Menu, Badge, Avatar, Dropdown, Space } from 'antd';
|
import { QuestionCircleOutlined, BellOutlined, LogoutOutlined, UserOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
|
const Header = ({ headerMenu }) => {
|
let navigate = useNavigate();
|
|
const [data, setData] = useState({});
|
|
// 退出登录
|
function handleLoginOut() {
|
// $$.modalInfo({
|
// content: '是否退出登录？',
|
// onOk: () => {
|
// $$.clearLocal('customerSystemToken');
|
// $$.clearLocal('customerSystemUser');
|
// navigate('/customerSystem/login');
|
// },
|
// });
|
}
|
|
const userMenu = (
|
<Menu>
|
<Menu.Item key="role" disabled>
|
xxxxx角色
|
</Menu.Item>
|
<Menu.Divider />
|
<Menu.Item key="loginOut" onClick={handleLoginOut}>
|
<LogoutOutlined style={{ marginRight: '8px' }} />
|
退出登录
|
</Menu.Item>
|
</Menu>
|
);
|
|
useEffect(() => {
|
setData($$.getLocal('customerSystemUser'));
|
}, []);
|
|
return (
|
<header className="header">
|
<div className="header-logo">
|
<span className="header-logo-title">IDR</span>
|
<span className="header-logo-text">运营中心</span>
|
</div>
|
<div className="header-menu">
|
{headerMenu.map((x, t) => {
|
return (
|
<div
|
// onClick={() => handleClickMenu(x)}
|
className="header-menu-item"
|
key={x.key}
|
>
|
<div>
|
<img src={x.icon} alt="" />
|
</div>
|
<div>{x.title}</div>
|
</div>
|
);
|
})}
|
</div>
|
<div className="header-user">
|
{/* <Space size="small"> */}
|
{/* <div className="header-user-item">
|
<QuestionCircleOutlined />
|
</div>
|
<div className="header-user-item">
|
<Badge count={2}>
|
<BellOutlined />
|
</Badge>
|
</div> */}
|
<Dropdown overlay={userMenu}>
|
<div className="header-user-avatar">
|
<Avatar icon={<UserOutlined />} />
|
<div>
|
<div className="header-user-name">{data?.trueName || 'xxx'}</div>
|
<div className="header-user-unit">{data?.unit || 'xxx'}</div>
|
</div>
|
</div>
|
</Dropdown>
|
{/* </Space> */}
|
</div>
|
</header>
|
);
|
};
|
|
Header.propTypes = {
|
headerMenu: PropTypes.any,
|
// headerMenuActive: PropTypes.any,
|
// handleClickMenu: PropTypes.func,
|
};
|
|
export default Header;
|
