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 } from 'antd'
|
import md5 from 'md5'
|
import {toggleCollapse, modifyMainMenu, resetState, resetDebug} 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 { 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 = () => {
|
// 展开、收起左侧菜单栏
|
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 {
|
message.warning(result.message)
|
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() {
|
return Api.logoutsystem().then(res => {
|
if (res.status) {
|
sessionStorage.removeItem('UserID')
|
_this.props.resetState()
|
_this.props.history.replace('/login')
|
} else {
|
message.warning(res.message)
|
}
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
changeMenu (value) {
|
// 主菜单切换
|
this.props.modifyMainMenu(value)
|
}
|
|
async loadmenu () {
|
// 获取主菜单
|
let result = await Api.getMainMenuData()
|
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
|
})
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
// 组件加载时，获取菜单数据
|
this.loadmenu()
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
render () {
|
const menu = (
|
<Menu className="header-dropdown">
|
<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.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>}
|
<Dropdown className="header-setting" overlay={menu}>
|
<div>
|
<img src={avatar} alt=""/>
|
<span>
|
{this.state.userName} <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
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
|
modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
|
resetState: () => dispatch(resetState()),
|
resetDebug: () => dispatch(resetDebug())
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))
|
