/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-11 11:33:21
|
* @LastEditTime: 2024-12-06 10:17:06
|
* @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, Form, Input, Button, Radio } from 'antd';
|
import { BellOutlined, LogoutOutlined, UserOutlined, FormOutlined, UserSwitchOutlined, DownCircleFilled } from '@ant-design/icons';
|
import { mediationCenter, book, operateCenter, operateCenter_active } from '../../assets/images/icon';
|
import { yewu } from '../../assets/images';
|
import * as $$ from '../../utils/utility';
|
import MyMessage from '../../views/myMessage';
|
import MyModal from '../MyModal';
|
import { logo1 } from '../../assets/images';
|
import manual from '../../assets/file/广州市社会治安综合治理应用平台（矛盾纠纷应用）培训手册（广州市版本）.pdf'
|
|
//修改密码api
|
function submitModifyInfoApi(data) {
|
return $$.ax.request({ url: 'ctAccount/changeCipher', type: 'post', data, service: 'cust' });
|
}
|
|
// 角色选择
|
function changeRoleApi(data) {
|
return $$.ax.request({ url: 'ctAccount/switchRole', type: 'get', data, service: 'cust' });
|
}
|
|
/**
|
* roleActive: obj 当前选中的角色
|
* headerMenu: array 头部导航菜单
|
* headerMenuActive: string 头部导航选择项
|
* headerUserChange: bool 判断用户修改自身信息时更新头部的用户名称
|
* handleClickMenu: function 头部导航点击
|
* handleChangeRole: function 切换角色
|
*/
|
const Header = ({ roleActive, headerMenu, headerMenuActive, headerUserChange, handleClickMenu, handleChangeRole, userData }) => {
|
|
let navigate = useNavigate();
|
|
// 修改密码窗口显示隐藏
|
const [visible, setVisible] = useState(false);
|
|
// 切换角色的modal
|
const [roleModal, setRoleModal] = useState({ visible: false, value: '' });
|
|
// 我的消息窗口显示隐藏
|
const [myMessageVisible, setMyMessageVisible] = useState(false);
|
|
const headerMenuIcon = {
|
'mediate': { icon: yewu, iconActive: yewu },
|
'operation': { icon: operateCenter, iconActive: operateCenter_active },
|
};
|
|
// 消息提醒数量
|
const [newsNum, setNewsNum] = useState();
|
|
// 退出登录
|
function handleLoginOut() {
|
$$.modalInfo({
|
content: '是否退出登录？',
|
onOk: () => {
|
$$.clearLocal('customerSystemUser');
|
$$.clearLocal('customerSystemToken');
|
$$.clearSessionStorage();
|
navigate('/customerSystem/login');
|
},
|
});
|
}
|
|
const userMenu = (
|
<Menu>
|
{userData?.ctUseroleList?.length > 1 && (
|
<>
|
<Menu.Item key="changeRole" onClick={() => setRoleModal({ visible: true, value: roleActive.id })}>
|
<UserSwitchOutlined style={{ marginRight: '8px' }} />
|
切换角色
|
</Menu.Item>
|
<Menu.Divider />
|
</>
|
)}
|
<Menu.Item key="modifyPassword" onClick={() => setVisible(true)}>
|
<FormOutlined style={{ marginRight: '8px' }} />
|
修改密码
|
</Menu.Item>
|
<Menu.Divider />
|
<Menu.Item key="loginOut" onClick={handleLoginOut}>
|
<LogoutOutlined style={{ marginRight: '8px' }} />
|
退出登录
|
</Menu.Item>
|
</Menu>
|
);
|
|
// 切换角色
|
async function changeRole() {
|
if (roleActive.id === roleModal.value) {
|
$$.info({ type: 'warning', content: '已是当前角色' });
|
return;
|
}
|
global.setSpinning(true);
|
const res = await changeRoleApi({ roleCode: roleModal.roleCode });
|
global.setSpinning(false);
|
if (res.type) {
|
$$.setSessionStorage('customerSystemToken', res.data);
|
handleChangeRole(roleModal.name, roleModal.value);
|
setRoleModal({ visible: false });
|
}
|
}
|
|
|
return (
|
<header className="header">
|
<div className="header-logo">
|
{/* <img src={logo1} alt="" /> */}
|
<div className="header-logo-text" style={{ color: '#fff' }}>
|
<div className="header-logo-title">广州市社会治安综合治理应用平台{$$.title}</div>
|
{/* <div>Guangzhou Baiyun Diversified Dispute Resolution Platform</div> */}
|
</div>
|
</div>
|
{/* <div className="header-menu">
|
{headerMenu.map((x) => {
|
return (
|
headerMenuActive.powerTag && (
|
<div
|
onClick={() => handleClickMenu(x)}
|
className={`header-menu-item ${x.powerTag === headerMenuActive.powerTag ? 'header-menu-active' : ''}`}
|
key={x.powerTag || x.value}
|
>
|
<div>
|
<img
|
src={x.powerTag === headerMenuActive.powerTag ? headerMenuIcon[x.powerTag]?.iconActive : headerMenuIcon[x.powerTag]?.icon}
|
alt=""
|
/>
|
</div>
|
<div>{x.label}</div>
|
</div>
|
)
|
);
|
})}
|
</div> */}
|
<div className="header-user">
|
<Space size="small">
|
<div style={{ paddingRight: '24px' }} className="header-user-item" >
|
<img style={{ width: '16px', height: '16px' }} src={book} alt="" srcset="" /><div className="header-user-name"><a href={manual} target="_blank" style={{ color: '#fff' }}>用户手册</a></div>
|
</div>
|
<Dropdown overlay={userMenu} overlayStyle={{ zIndex: 1007 }}>
|
<div className="header-user-avatar">
|
<Avatar icon={<UserOutlined />} />
|
<div>
|
<div className="header-user-name">{userData?.trueName || '-'}</div>
|
<div className="header-user-unit">
|
<span>{userData?.unit || '-'}</span>
|
<span className="public-rightBorder">{roleActive.roleName || '-'}</span>
|
<DownCircleFilled style={{ fontSize: '10px', marginLeft: '8px', color: '#ffffff' }} />
|
</div>
|
</div>
|
</div>
|
</Dropdown>
|
</Space>
|
</div>
|
{/* 切换角色 */}
|
<MyModal title="切换角色" visible={roleModal.visible} width={500} onCancel={() => setRoleModal({ visible: false })} footer={false}>
|
<div style={{ paddingTop: '16px', textAlign: 'center' }}>
|
<Radio.Group
|
value={roleModal.value}
|
onChange={(e) => setRoleModal({ visible: true, value: e.target.value, name: e.target.label, roleCode: e.target.roleCode })}
|
>
|
{userData?.ctUseroleList?.map((x) => (
|
<Radio key={x.roleId} value={x.roleId} label={x.roleName} roleCode={x.roleCode}>
|
{x.roleName}
|
</Radio>
|
))}
|
</Radio.Group>
|
</div>
|
<div onClick={changeRole} style={{ marginTop: '16px', textAlign: 'center' }}>
|
<Button type="primary">提交</Button>
|
</div>
|
</MyModal>
|
{/* 修改密码 */}
|
{visible && <ModifyPassword handleCancel={() => setVisible(false)} />}
|
{/* 消息 */}
|
{myMessageVisible && <MyMessage visible={myMessageVisible} onClose={() => setMyMessageVisible(false)} />}
|
</header>
|
);
|
};
|
|
// 修改密码
|
const ModifyPassword = ({ handleCancel }) => {
|
// 表单
|
const [form] = Form.useForm();
|
|
const navigate = useNavigate();
|
|
// 提交修改密码
|
function submitModifyInfo(values) {
|
$$.modalInfo({
|
content: '更改密码需重新登录，是否确认修改？',
|
onOk: async () => {
|
global.setSpinning(true);
|
const res = await submitModifyInfoApi(values);
|
global.setSpinning(false);
|
if (res.type) {
|
$$.infoSuccess({ content: '密码修改成功' });
|
handleCancel();
|
await $$.sleep();
|
$$.clearLocal('customerSystemUser');
|
$$.clearSessionStorage();
|
navigate('/customerSystem/login');
|
}
|
},
|
});
|
}
|
|
return (
|
<MyModal title="修改密码" visible={true} width={500} onCancel={handleCancel} footer={false}>
|
<div style={{ paddingTop: '16px' }}>
|
<Form
|
form={form}
|
layout="vertical"
|
requiredMark={false}
|
onFinish={submitModifyInfo}
|
onFinishFailed={({ values, errorFields, outOfDate }) => $$.info({ type: 'error', content: errorFields[0].errors })}
|
>
|
<Form.Item
|
name="oldCipher"
|
label={
|
<span>
|
旧密码<span className="leftRequired">*</span>
|
</span>
|
}
|
rules={[{ required: true, message: '请输入旧密码!' }]}
|
>
|
<Input.Password placeholder="请输入" />
|
</Form.Item>
|
<Form.Item
|
name="newCipher"
|
label={
|
<span>
|
新密码<span className="leftRequired">*</span>
|
</span>
|
}
|
rules={[{ required: true, pattern: new RegExp('^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{6,12}$', 'g'), message: '密码至少含有小写字母、大写字母、数字….,且密码长度为6-12位' }]}
|
>
|
<Input.Password placeholder="密码至少含有小写字母、大写字母、数字….,且密码长度为6-12位" />
|
</Form.Item>
|
<Form.Item
|
name="confirmNewCipher"
|
label={
|
<span>
|
确认新密码<span className="leftRequired">*</span>
|
</span>
|
}
|
dependencies={['newCipher']}
|
rules={[
|
{ required: true, message: '请输入确认新密码!' },
|
({ getFieldValue }) => ({
|
validator(_, value) {
|
if (!value || getFieldValue('newCipher') === value) {
|
return Promise.resolve();
|
}
|
return Promise.reject(new Error('确认新密码与新密码不一致!'));
|
},
|
}),
|
]}
|
>
|
<Input.Password placeholder="请输入" />
|
</Form.Item>
|
<Form.Item style={{ textAlign: 'center', marginBottom: 0 }}>
|
<Button type="primary" htmlType="submit">
|
提交
|
</Button>
|
</Form.Item>
|
</Form>
|
</div>
|
</MyModal>
|
);
|
};
|
|
Header.propTypes = {
|
roleActive: PropTypes.object,
|
headerMenu: PropTypes.any,
|
headerMenuActive: PropTypes.any,
|
headerUserChange: PropTypes.bool,
|
handleClickMenu: PropTypes.func,
|
handleChangeRole: PropTypes.func,
|
};
|
|
export default Header;
|
