import React, {Component} from 'react'
|
import { withRouter } from 'react-router-dom'
|
import PropTypes from 'prop-types'
|
import {connect} from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import {Dropdown, Menu, Icon, Modal, message, Form, notification, Switch } from 'antd'
|
import md5 from 'md5'
|
import asyncComponent from '@/utils/asyncComponent'
|
import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState, resetEditLevel, logout} from '@/store/action'
|
import Resetpwd from '@/components/resetpwd'
|
import Api from '@/api'
|
import zhCN from '@/locales/zh-CN/header.js'
|
import enUS from '@/locales/en-US/header.js'
|
import Utils from '@/utils/utils.js'
|
import logourl from '@/assets/img/mlogo.png'
|
import avatar from '@/assets/img/avatar.jpg'
|
import './index.scss'
|
|
const EditMenu = asyncComponent(() => import('./editmenu'))
|
const { confirm } = Modal
|
|
class Header extends Component {
|
static propTpyes = {
|
collapse: PropTypes.bool,
|
mainMenu: PropTypes.oneOfType([
|
PropTypes.string,
|
PropTypes.object
|
])
|
}
|
state = {
|
menulist: null, // 一级菜单
|
visible: false, // 修改密码模态框
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
confirmLoading: false,
|
userName: localStorage.getItem('username')
|
}
|
|
handleCollapse = () => {
|
// 展开、收起左侧菜单栏
|
if (!this.props.editState) {
|
this.props.toggleCollapse(!this.props.collapse)
|
}
|
}
|
|
changePassword = () => {
|
// 点击修改密码，显示弹窗
|
this.setState({
|
visible: true
|
})
|
}
|
|
md5Password (pwd) {
|
// md5密码加密
|
const salt = 'minkesoft'
|
return md5(md5(pwd + salt))
|
}
|
|
resetPwdSubmit = () => {
|
this.formRef.handleConfirm().then(res => {
|
this.setState({
|
confirmLoading: true
|
})
|
this.resetPwdSubmitexec(res)
|
}, () => {})
|
}
|
|
async resetPwdSubmitexec (param) {
|
// 重置密码提交，关闭模态框，清空表单数据
|
let password = this.md5Password(param.originpwd)
|
let newpassword = this.md5Password(param.password)
|
let result = await Api.resetpassword(password, newpassword)
|
if (result.status) {
|
this.setState({
|
visible: false,
|
confirmLoading: false
|
})
|
this.formRef.resetfrom()
|
message.success(this.state.dict['header.password.resetsuccess'])
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
this.setState({
|
confirmLoading: false
|
})
|
}
|
}
|
|
handleCancel = () => {
|
// 取消时关闭修改密码模态框，清空表单数据
|
this.setState({
|
visible: false
|
})
|
this.formRef.resetfrom()
|
}
|
|
logout = () => {
|
// 退出登录
|
let _this = this
|
confirm({
|
title: this.state.dict['header.logout.hint'],
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
sessionStorage.clear()
|
_this.props.logout()
|
_this.props.history.replace('/login')
|
},
|
onCancel() {}
|
})
|
}
|
|
changeMenu (value) {
|
// 主菜单切换
|
if (this.props.editState && this.props.editLevel) {
|
// 编辑状态下，不可切换菜单
|
return
|
}
|
if (value.PageParam.OpenType === 'menu') {
|
this.props.modifyMainMenu(value)
|
} else {
|
window.open('#/' + value.PageParam.linkUrl + '/')
|
}
|
}
|
|
async loadmenu () {
|
// 获取主菜单
|
let result = await Api.getSystemConfig({func: 'sPC_Get_MainMenu'})
|
if (result.status) {
|
let _avatar = Utils.getrealurl(result.HeadIcon) // 头像
|
if (_avatar) {
|
avatar = _avatar
|
}
|
|
if (result.debug === 'true') { // 是否为debug模式，即可复制菜单参数
|
this.props.resetDebug()
|
}
|
|
let param = sessionStorage.getItem('view_param') // 是否为打开新页面
|
if (param) {
|
// 通过url中menuid筛选出选中的主菜单
|
let menuId = param.split('&')[0]
|
let _menu = result.data.filter(item => item.MenuID === menuId)[0]
|
if (!_menu) {
|
sessionStorage.removeItem('view_param')
|
}
|
this.props.modifyMainMenu(_menu || result.data[0])
|
} else {
|
this.props.modifyMainMenu(result.data[0])
|
}
|
|
this.setState({
|
menulist: result.data.map((item, index) => {
|
item.id = index
|
item.text = item.MenuName
|
if (item.PageParam) {
|
try {
|
item.PageParam = JSON.parse(item.PageParam)
|
} catch (e) {
|
item.PageParam = {OpenType: 'menu', linkUrl: ''}
|
}
|
} else {
|
item.PageParam = {OpenType: 'menu', linkUrl: ''}
|
}
|
return item
|
})
|
})
|
} else {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 15
|
})
|
}
|
}
|
|
async getRolesMenu () {
|
// 获取主菜单
|
let result = await Api.getSystemConfig({func: 'sPC_Get_RolesMenu'})
|
if (result.status) {
|
// console.log(result.Roles)
|
}
|
}
|
|
reload = () => {
|
this.setState({
|
menulist: null
|
})
|
this.loadmenu()
|
}
|
|
changeEditState = (state) => {
|
// 修改编辑状态
|
this.props.resetEditState(state)
|
}
|
|
enterEdit = () => {
|
// 进入编辑状态
|
this.props.resetEditLevel('level1')
|
}
|
|
exitEdit = () => {
|
// 退出编辑状态
|
this.props.resetEditLevel(false)
|
}
|
|
UNSAFE_componentWillMount () {
|
// 组件加载时，获取菜单数据
|
this.loadmenu()
|
}
|
|
UNSAFE_componentWillReceiveProps () {
|
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentDidMount () {
|
this.getRolesMenu()
|
}
|
|
render () {
|
const menu = (
|
<Menu overlayclassname="header-dropdown">
|
{this.props.debug && <Menu.Item key="0">
|
{this.state.dict['header.edit']}
|
<Switch size="small" className="edit-switch" disabled={!!this.props.editLevel} onChange={this.changeEditState} />
|
</Menu.Item>}
|
{/* <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item> */}
|
<Menu.Item key="2" onClick={this.logout}>{this.state.dict['header.logout']}</Menu.Item>
|
</Menu>
|
)
|
|
return (
|
<header className="header-container ant-menu-dark">
|
<div className={this.props.collapse ? "collapse header-logo" : "header-logo"}><img src={logourl} alt=""/></div>
|
<div className={this.props.collapse ? "collapse header-collapse" : "header-collapse"} onClick={this.handleCollapse}>
|
<Icon type={this.props.collapse ? 'menu-unfold' : 'menu-fold'} />
|
</div>
|
{/* 正常菜单 */}
|
{this.props.editLevel !== 'level1' && this.state.menulist &&
|
<ul className="header-menu">{
|
this.state.menulist.map(item => {
|
return (
|
<li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={this.props.selectmenu.MenuID === item.MenuID ? 'active' : ''}>
|
{item.MenuName}
|
</li>
|
)
|
})}
|
</ul>}
|
{/* 进入编辑按钮 */}
|
{this.props.editState && !this.props.editLevel && <Icon onClick={this.enterEdit} className="edit-check" type="edit" />}
|
{/* 编辑菜单 */}
|
{this.props.editLevel === 'level1' && <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/>}
|
{/* 头像、用户名 */}
|
<Dropdown className="header-setting" overlay={menu}>
|
<div>
|
<img src={avatar} alt=""/>
|
<span>
|
<span className="username">{this.state.userName}</span> <Icon type="down" />
|
</span>
|
</div>
|
</Dropdown>
|
{/* 修改密码 */}
|
<Modal
|
title={this.state.dict['header.password']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.visible}
|
onOk={this.resetPwdSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.handleCancel}
|
>
|
<Resetpwd dict={this.state.dict} wrappedComponentRef={(inst) => this.formRef = inst} resetPwdSubmit={this.resetPwdSubmit}/>
|
</Modal>
|
</header>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
collapse: state.collapse,
|
selectmenu: state.selectedMainMenu,
|
debug: state.debug,
|
editState: state.editState,
|
editLevel: state.editLevel
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
|
modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
|
resetEditState: (state) => dispatch(resetEditState(state)),
|
resetEditLevel: (level) => dispatch(resetEditLevel(level)),
|
resetState: () => dispatch(resetState()),
|
resetDebug: () => dispatch(resetDebug()),
|
logout: () => dispatch(logout())
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))
|
