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 moment from 'moment'
|
import {Dropdown, Menu, Icon, Modal, Form, notification, Switch } from 'antd'
|
import asyncComponent from '@/utils/asyncComponent'
|
import {
|
toggleCollapse,
|
modifyMainMenu,
|
resetState,
|
resetDebug,
|
resetEditState,
|
resetEditLevel,
|
initPermission,
|
logout
|
} from '@/store/action'
|
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/main-logo.png'
|
import avatar from '@/assets/img/avatar.jpg'
|
import Resetpwd from './resetpwd'
|
import LoginForm from './loginform'
|
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: sessionStorage.getItem('User_Name'),
|
logourl: window.GLOB.mainlogo || logourl,
|
loginVisible: false,
|
loginLoading: false,
|
avatar: avatar,
|
systems: []
|
}
|
|
handleCollapse = () => {
|
// 展开、收起左侧菜单栏
|
if (!this.props.editState) {
|
this.props.toggleCollapse(!this.props.collapse)
|
}
|
}
|
|
changePassword = () => {
|
// 点击修改密码，显示弹窗
|
this.setState({
|
visible: true
|
})
|
}
|
|
resetPwdSubmit = () => {
|
this.formRef.handleConfirm().then(res => {
|
this.setState({
|
confirmLoading: true
|
})
|
this.resetPwdSubmitexec(res)
|
}, () => {})
|
}
|
|
async resetPwdSubmitexec (param) {
|
let _param = {
|
func: 's_PwdUpt',
|
LText: `select '${param.originpwd}','${param.password}'`
|
}
|
|
_param.LText = Utils.formatOptions(_param.LText) // 关键字符替换，base64加密
|
_param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000' // 时间戳
|
_param.secretkey = Utils.encrypt(_param.LText, _param.timestamp) // md5密钥
|
|
let localResult = await Api.getLocalConfig(_param)
|
let result = {status: true}
|
|
if (window.GLOB.mainSystemApi && window.GLOB.subSystemApi !== window.GLOB.mainSystemApi) {
|
result = await Api.getSystemConfig(_param)
|
}
|
|
if (result.status && localResult.status) {
|
this.setState({
|
visible: false,
|
confirmLoading: false
|
})
|
notification.success({
|
top: 92,
|
message: this.state.dict['header.password.resetsuccess'],
|
duration: 2
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message || localResult.message,
|
duration: 10
|
})
|
this.setState({
|
confirmLoading: false
|
})
|
}
|
}
|
|
handleCancel = () => {
|
// 取消时关闭修改密码模态框，清空表单数据
|
this.setState({
|
visible: false
|
})
|
}
|
|
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) {
|
if (result.debug === 'true') { // 是否为debug模式，即可复制菜单参数
|
this.props.resetDebug()
|
}
|
|
let MainMenuId = sessionStorage.getItem('MainMenu') // 是否为打开新页面
|
if (MainMenuId) {
|
// 通过url中menuid筛选出选中的主菜单
|
let _menu = result.data.filter(item => item.MenuID === MainMenuId)[0]
|
sessionStorage.removeItem('MainMenu')
|
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
|
}),
|
systems: result.Systems.filter(sys => sys.LinkUrl1 && sys.AppKey !== window.GLOB.appkey)
|
})
|
} else {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 15
|
})
|
}
|
}
|
|
async getRolesMenu () {
|
// 获取主菜单
|
let result = await Api.getSystemConfig({func: 'sPC_Get_RolesMenu'})
|
if (result.status) {
|
let _permAction = {}
|
let _permFuncField = []
|
if (result.UserRoles && result.UserRoles[0] && result.UserRoles[0].RoleMenu) {
|
result.UserRoles[0].RoleMenu.forEach(menu => {
|
_permAction[menu.MenuID] = true
|
})
|
}
|
|
if (result.sModular && result.sModular.length > 0) {
|
result.sModular.forEach(field => {
|
if (field.ModularNo) {
|
_permFuncField.push(field.ModularNo)
|
}
|
})
|
_permFuncField = _permFuncField.sort()
|
}
|
|
this.props.initPermission(_permAction, _permFuncField)
|
}
|
}
|
|
reload = () => {
|
this.setState({
|
menulist: null
|
})
|
this.loadmenu()
|
}
|
|
changeEditState = (state) => {
|
// 修改编辑状态
|
let UserID = sessionStorage.getItem('CloudUserID')
|
let LoginUID = sessionStorage.getItem('CloudLoginUID')
|
|
sessionStorage.setItem('isEditState', state)
|
if (state && (!UserID || !LoginUID)) {
|
this.setState({
|
loginVisible: true
|
})
|
} else {
|
this.setState({
|
menulist: null
|
})
|
this.loadmenu()
|
this.props.resetEditState(state)
|
}
|
}
|
|
loginSubmit = () => {
|
this.setState({
|
loginLoading: true
|
})
|
this.loginRef.handleConfirm().then(param => {
|
Api.getusermsg(param.username, param.password, true).then(res => {
|
if (res.status) {
|
sessionStorage.setItem('CloudUserID', res.UserID)
|
sessionStorage.setItem('CloudSessionUid', Utils.getuuid())
|
sessionStorage.setItem('CloudLoginUID', res.LoginUID)
|
|
this.setState({
|
menulist: null,
|
loginVisible: false,
|
loginLoading: false
|
})
|
this.loadmenu()
|
this.props.resetEditState(true)
|
} else {
|
notification.error({
|
top: 92,
|
message: res.message,
|
duration: 15
|
})
|
}
|
})
|
})
|
}
|
|
enterEdit = () => {
|
// 进入编辑状态
|
this.props.resetEditLevel('level1')
|
}
|
|
exitEdit = () => {
|
// 退出编辑状态
|
this.props.resetEditLevel(false)
|
}
|
|
changeSystem = (system) => {
|
let _param = window.btoa('ud=' + sessionStorage.getItem('UserID') + '&sd=' + sessionStorage.getItem('SessionUid') + '&ld=' + sessionStorage.getItem('LoginUID') + '&un=' + sessionStorage.getItem('User_Name'))
|
window.location.href = system.LinkUrl1 + '#/ssologin/' + _param
|
}
|
|
UNSAFE_componentWillMount () {
|
// 组件加载时，获取菜单数据
|
let _avatar = sessionStorage.getItem('avatar')
|
if (_avatar) {
|
_avatar = Utils.getrealurl(_avatar) // 头像
|
this.setState({avatar: _avatar})
|
}
|
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} checked={this.props.editState} onChange={this.changeEditState} />
|
</Menu.Item>}
|
{!this.props.editState ? <Menu.Item key="1" onClick={this.changePassword}>{this.state.dict['header.password']}</Menu.Item> : null}
|
{this.state.systems.length > 0 ? <Menu.SubMenu title="切换系统">
|
{this.state.systems.map((system, index) => (
|
<Menu.Item className="header-subSystem" key={'sub' + index} onClick={() => {this.changeSystem(system)}}> {system.AppName} </Menu.Item>
|
))}
|
</Menu.SubMenu> : null}
|
<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={this.state.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' : ''}>
|
<span>{item.MenuName}</span>
|
</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={this.state.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}
|
destroyOnClose
|
>
|
<Resetpwd dict={this.state.dict} wrappedComponentRef={(inst) => this.formRef = inst} resetPwdSubmit={this.resetPwdSubmit}/>
|
</Modal>
|
{/* 编辑状态登录 */}
|
<Modal
|
title={this.state.dict['header.login.develop']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.loginVisible}
|
onOk={this.loginSubmit}
|
width={'430px'}
|
confirmLoading={this.state.loginLoading}
|
onCancel={() => {this.setState({ loginVisible: false, loginLoading: false })}}
|
destroyOnClose
|
>
|
<LoginForm handleSubmit={() => this.loginSubmit()} wrappedComponentRef={(inst) => this.loginRef = inst}/>
|
</Modal>
|
</header>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
collapse: state.collapse,
|
selectmenu: state.selectedMainMenu,
|
debug: state.debug,
|
editState: state.editState,
|
editLevel: state.editLevel,
|
permAction: state.permAction,
|
permFuncField: state.permFuncField
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
toggleCollapse: (collapse) => dispatch(toggleCollapse(collapse)),
|
modifyMainMenu: (selectmenu) => dispatch(modifyMainMenu(selectmenu)),
|
resetEditState: (state) => dispatch(resetEditState(state)),
|
resetEditLevel: (level) => dispatch(resetEditLevel(level)),
|
initPermission: (permAction, permFuncField) => dispatch(initPermission(permAction, permFuncField)),
|
resetState: () => dispatch(resetState()),
|
resetDebug: () => dispatch(resetDebug()),
|
logout: () => dispatch(logout())
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Form.create()(Header)))
|
