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, Button, Switch, Spin } from 'antd'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import md5 from 'md5'
|
import {toggleCollapse, modifyMainMenu, resetState, resetDebug, resetEditState, resetEditLevel} from '@/store/action'
|
import Resetpwd from '@/components/resetpwd'
|
import TransferForm from '@/components/transferform'
|
import MenuForm from './menuform'
|
import DragElement from './dragelement'
|
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
|
let previewList = null
|
|
class Header extends Component {
|
static propTpyes = {
|
collapse: PropTypes.bool,
|
mainMenu: PropTypes.oneOfType([
|
PropTypes.string,
|
PropTypes.object
|
])
|
}
|
state = {
|
menulist: null, // 一级菜单
|
thawmenulist: null, // 已冻结的一级菜单
|
visible: false, // 修改密码模态框
|
addMvisible: false, // 添加菜单模态框
|
editMenu: null, // 编辑菜单
|
editMvisible: false, // 编辑菜单模态框
|
thawMvisible: 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() {
|
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) {
|
// 主菜单切换
|
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.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])
|
}
|
|
previewList = 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
|
})
|
|
this.setState({
|
menulist: previewList
|
})
|
}
|
}
|
|
handlePreviewList = (List) => {
|
// 菜单顺序改变时，保存中间状态
|
previewList = List
|
}
|
|
handleButton = (type) => {
|
// 菜单编辑：添加，确定，取消
|
if ((type === 'add' || type === 'thawmenu') && !is(fromJS(previewList), fromJS(this.state.menulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 10
|
})
|
} else if (type === 'add') {
|
this.setState({
|
addMvisible: true
|
})
|
} else if (type === 'confirm' && !is(fromJS(previewList), fromJS(this.state.menulist))) {
|
let _this = this
|
let param = {}
|
param.func = 'sPC_Menu_SortUpt'
|
param.LText = []
|
previewList.forEach((item, index) => {
|
param.LText.push('selectmspace\'' + item.MenuID + '\'mspaceasmspaceMenuid,' + (index + 1) * 10 + 'mspaceasmspacesort')
|
})
|
param.LText = param.LText.join('mspaceunionmspace')
|
confirm({
|
title: this.state.dict['header.menu.resetorder'],
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
return Api.submitInterface(param).then(res => {
|
if (res.status) {
|
_this.setState({
|
menulist: null
|
})
|
_this.loadmenu()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (type === 'thawmenu') {
|
this.setState({
|
thawMvisible: true
|
})
|
Api.submitInterface({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: '0',
|
TYPE: 10
|
}).then(res => {
|
if (res.status) {
|
this.setState({
|
thawmenulist: res.data.map(menu => {
|
return {
|
key: menu.MenuID,
|
title: menu.MenuName
|
}
|
})
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
} else {
|
previewList = this.state.menulist
|
this.props.resetEditLevel(false)
|
}
|
}
|
|
handleMenu = (Menu) => {
|
// 菜单编辑：修改
|
const menu = fromJS(Menu).toJS()
|
if (!is(fromJS(previewList), fromJS(this.state.menulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 10
|
})
|
} else {
|
this.setState({
|
editMvisible: true,
|
editMenu: menu.card
|
})
|
}
|
}
|
|
changeEditState = (state) => {
|
// 修改编辑状态
|
this.props.resetEditState(state)
|
}
|
|
addMemuSubmit = () => {
|
// 新建菜单：提交
|
this.addMenuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_MainMenu_Add'
|
param.Sort = (this.state.menulist.length + 1) * 10
|
this.setState({
|
confirmLoading: true
|
})
|
Api.submitInterface(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
addMvisible: false,
|
menulist: null
|
})
|
this.addMenuFormRef.handleReset('add')
|
this.loadmenu()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
addMemuCancel = () => {
|
// 新建菜单：取消
|
this.setState({
|
confirmLoading: false,
|
addMvisible: false
|
})
|
this.addMenuFormRef.handleReset('add')
|
}
|
|
editMemuSubmit = () => {
|
// 编辑菜单：提交
|
this.editMenuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_MainMenu_Upt'
|
this.setState({
|
confirmLoading: true
|
})
|
Api.submitInterface(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
editMvisible: false,
|
editMenu: null,
|
menulist: null
|
})
|
this.loadmenu()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
editMemuCancel = () => {
|
// 编辑菜单：取消
|
this.setState({
|
confirmLoading: false,
|
editMvisible: false,
|
editMenu: null
|
})
|
}
|
|
deleteMemu = () => {
|
let _this = this
|
confirm({
|
title: this.state.dict['header.menu.close'].replace('@M', this.state.editMenu.MenuName),
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: _this.state.editMenu.MenuID
|
}
|
return Api.submitInterface(param).then(res => {
|
if (res.status) {
|
_this.setState({
|
editMvisible: false,
|
editMenu: null,
|
menulist: null
|
})
|
_this.loadmenu()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
thawMemuSubmit = () => {
|
if (this.refs.trawmenu.state.targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.thawmenu.select'],
|
duration: 10
|
})
|
} else {
|
this.setState({
|
confirmLoading: true
|
})
|
let defers = this.refs.trawmenu.state.targetKeys.map(item => {
|
return new Promise((resolve) => {
|
Api.submitInterface({
|
func: 'sPC_MainMenu_ReDel',
|
MenuID: item
|
}).then(res => {
|
if (res.status) {
|
resolve('')
|
} else {
|
resolve(res.message)
|
}
|
})
|
})
|
})
|
Promise.all(defers).then(res => {
|
let msg = res.filter(Boolean)[0]
|
if (msg) {
|
notification.error({
|
top: 92,
|
message: msg,
|
duration: 15
|
})
|
} else {
|
this.setState({
|
confirmLoading: false,
|
thawMvisible: false,
|
thawmenulist: null,
|
menulist: null
|
})
|
this.loadmenu()
|
}
|
})
|
}
|
}
|
|
thawMemuCancel = () => {
|
this.setState({
|
thawMvisible: false,
|
thawmenulist: null
|
})
|
}
|
|
enterEdit = () => {
|
this.props.resetEditLevel('level1')
|
}
|
|
UNSAFE_componentWillMount () {
|
// 组件加载时，获取菜单数据
|
this.loadmenu()
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
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' && this.state.menulist && <DndProvider className="header-drag-menu" backend={HTML5Backend}>
|
<DragElement
|
dict={this.state.dict}
|
list={this.state.menulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.handleMenu}
|
handleButton={this.handleButton}
|
/>
|
</DndProvider>}
|
{/* 编辑mask */}
|
<div className={'mask ' + (this.props.editLevel === 'level1' ? 'active' : '')}></div>
|
<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>
|
{/* 新建菜单模态框 */}
|
<Modal
|
title={this.state.dict['header.menu.addtitle']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.addMvisible}
|
onOk={this.addMemuSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.addMemuCancel}
|
>
|
<MenuForm
|
dict={this.state.dict}
|
type="add"
|
menu={null}
|
wrappedComponentRef={(inst) => this.addMenuFormRef = inst}
|
/>
|
</Modal>
|
{/* 编辑菜单模态框 */}
|
<Modal
|
title={this.state.dict['header.menu.editTitle']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.editMvisible}
|
footer={null}
|
onCancel={this.editMemuCancel}
|
>
|
<MenuForm
|
dict={this.state.dict}
|
type="edit"
|
menu={this.state.editMenu}
|
wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
|
/>
|
<div className="edit-modal-footer">
|
<Button onClick={this.editMemuCancel}>{this.state.dict['header.cancel']}</Button>
|
<Button type="primary" onClick={this.editMemuSubmit} loading={this.state.confirmLoading}>{this.state.dict['header.confirm']}</Button>
|
<Button type="danger" onClick={this.deleteMemu}>{this.state.dict['header.delete']}</Button>
|
</div>
|
</Modal>
|
{/* 解除冻结菜单模态框 */}
|
<Modal
|
title={this.state.dict['header.thawmenu']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.thawMvisible}
|
onOk={this.thawMemuSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.thawMemuCancel}
|
>
|
{!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
|
{this.state.thawmenulist && <TransferForm ref="trawmenu" dict={this.state.dict} menulist={this.state.thawmenulist}/>}
|
</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)),
|
resetState: () => dispatch(resetState()),
|
resetDebug: () => dispatch(resetDebug()),
|
resetEditState: (state) => dispatch(resetEditState(state)),
|
resetEditLevel: (level) => dispatch(resetEditLevel(level))
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))
|
