import React, {Component} from 'react'
|
import { withRouter } from 'react-router-dom'
|
import {connect} from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import { Dropdown, Menu, Icon, Modal, notification, Switch, Button } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import {
|
modifyMenuTree,
|
modifyMainMenu,
|
modifyTabview,
|
resetEditLevel,
|
logout
|
} from '@/store/action'
|
import Api from '@/api'
|
import options from '@/store/options.js'
|
import zhCN from '@/locales/zh-CN/main.js'
|
import enUS from '@/locales/en-US/main.js'
|
import Utils from '@/utils/utils.js'
|
import avatar from '@/assets/img/avatar.jpg'
|
import MainLogo from '@/assets/img/main-logo.png'
|
import './index.scss'
|
|
const EditMenu = asyncComponent(() => import('@/templates/menuconfig/editfirstmenu'))
|
const { confirm } = Modal
|
|
class Header extends Component {
|
state = {
|
menulist: null, // 一级菜单
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
userName: sessionStorage.getItem('CloudUserName'),
|
avatar: Utils.getrealurl(sessionStorage.getItem('CloudAvatar')),
|
}
|
|
logout = () => {
|
// 退出登录
|
let _this = this
|
confirm({
|
title: this.state.dict['main.logout.hint'],
|
content: '',
|
onOk() {
|
sessionStorage.clear()
|
_this.props.logout()
|
_this.props.history.replace('/login')
|
},
|
onCancel() {}
|
})
|
}
|
|
changeMenu (value) {
|
// 主菜单切换
|
if (this.props.editLevel) {
|
// 编辑状态下，不可切换菜单
|
return
|
}
|
if (value.PageParam.OpenType === 'menu') {
|
this.props.modifyMainMenu(value)
|
} else if (value.PageParam.OpenType === 'outpage') {
|
window.open(value.PageParam.linkUrl)
|
}
|
}
|
|
async loadmenu () {
|
// 获取主菜单
|
let _param = {func: 's_get_pc_menus', systemType: options.sysType, debug: 'Y'}
|
_param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : ''
|
|
let result = await Api.getSystemConfig(_param)
|
|
// 登录超时
|
if (!result) return
|
|
if (result.status) {
|
const { menulist } = this.getMenulist(result)
|
|
this.setState({ menulist })
|
|
this.props.modifyMenuTree(menulist)
|
if (window.GLOB.systemType !== 'production') { // 非正式系统选择第一项
|
this.props.modifyMainMenu(menulist[0] || null)
|
}
|
} else {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
}
|
}
|
|
getMenulist = (result) => {
|
let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']
|
let menulist = []
|
result.fst_menu && result.fst_menu.forEach(fst => {
|
let fstItem = {
|
MenuID: fst.MenuID,
|
MenuName: fst.MenuName,
|
PageParam: {OpenType: 'menu', linkUrl: ''},
|
children: []
|
}
|
if (fst.PageParam) {
|
try {
|
fstItem.PageParam = JSON.parse(fst.PageParam)
|
} catch (e) {
|
fstItem.PageParam = {OpenType: 'menu', linkUrl: ''}
|
}
|
}
|
|
if (fst.snd_menu) {
|
fstItem.children = fst.snd_menu.map(snd => {
|
let sndItem = {
|
ParentId: fst.MenuID,
|
MenuID: snd.MenuID,
|
MenuName: snd.MenuName,
|
PageParam: {Icon: 'folder'},
|
children: []
|
}
|
|
if (snd.PageParam) {
|
try {
|
sndItem.PageParam = JSON.parse(snd.PageParam)
|
} catch (e) {
|
sndItem.PageParam = {Icon: 'folder'}
|
}
|
}
|
|
if (snd.trd_menu) {
|
sndItem.children = snd.trd_menu.map(trd => {
|
let trdItem = {
|
FstId: fst.MenuID,
|
ParentId: snd.MenuID,
|
MenuID: trd.MenuID,
|
MenuName: trd.MenuName,
|
MenuNo: trd.MenuNo,
|
EasyCode: trd.EasyCode,
|
type: 'CommonTable', // 默认值为常用表
|
OpenType: 'newtab' // 打开方式
|
}
|
|
if (trd.LinkUrl && iframes.includes(trd.LinkUrl.split('?')[0])) {
|
trdItem.type = 'iframe'
|
trdItem.LinkUrl = trd.LinkUrl.replace('&', '&')
|
trdItem.forbidden = true
|
} else {
|
try {
|
trdItem.PageParam = trd.PageParam ? JSON.parse(trd.PageParam) : {OpenType: 'newtab'}
|
} catch (e) {
|
trdItem.PageParam = {OpenType: 'newtab'}
|
}
|
|
trdItem.type = trdItem.PageParam.Template || trdItem.type
|
trdItem.OpenType = trdItem.PageParam.OpenType || trdItem.OpenType
|
|
if (trdItem.type === 'CustomPage' && this.props.memberLevel < 20) { // 会员等级大于等于20时，有编辑权限
|
trdItem.forbidden = true
|
}
|
}
|
|
return trdItem
|
})
|
}
|
|
return sndItem
|
})
|
}
|
|
menulist.push(fstItem)
|
})
|
|
return { menulist }
|
}
|
|
reload = () => {
|
this.loadmenu()
|
}
|
|
changeEditState = () => {
|
this.props.history.replace('/main')
|
window.location.reload()
|
}
|
|
enterEdit = () => {
|
// 进入编辑状态
|
this.props.resetEditLevel('level1')
|
}
|
|
enterEditManage = () => {
|
const { editLevel } = this.props
|
|
if (editLevel === 'HS') return
|
|
this.props.resetEditLevel('HS')
|
this.props.modifyMainMenu({
|
MenuID: 'systemManageView'
|
})
|
}
|
|
/**
|
* @description 退出管理界面菜单
|
*/
|
exitManage = () => {
|
const { menulist } = this.state
|
|
if (window.GLOB.systemType === 'production') { // 正式系统版本升级后，页面刷新
|
this.props.history.replace('/main')
|
window.location.reload()
|
return
|
}
|
|
this.props.modifyMainMenu(menulist[0] || null)
|
this.props.resetEditLevel(false)
|
this.props.modifyTabview([])
|
}
|
|
exitEdit = () => {
|
// 退出编辑状态
|
this.props.resetEditLevel(false)
|
}
|
|
UNSAFE_componentWillMount () {
|
sessionStorage.setItem('isEditState', 'true')
|
document.body.className = ''
|
|
// 组件加载时，获取菜单数据
|
this.loadmenu()
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.menuTree), fromJS(nextProps.menuTree)) && !is(fromJS(this.state.menulist), fromJS(nextProps.menuTree))) {
|
this.setState({
|
menulist: nextProps.menuTree
|
})
|
}
|
}
|
|
componentDidMount () {
|
if (window.GLOB.systemType !== 'production') {
|
Api.getSystemConfig({func: 'sPC_Get_Roles_sModular'}).then(res => {
|
if (res.status) {
|
let _permFuncField = []
|
let _sysRoles = []
|
|
if (res.Roles && res.Roles.length > 0) {
|
_sysRoles = res.Roles.map(role => {
|
return {
|
uuid: Utils.getuuid(),
|
value: role.RoleID,
|
text: role.RoleName
|
}
|
})
|
}
|
|
if (res.sModular && res.sModular.length > 0) {
|
res.sModular.forEach(field => {
|
if (field.ModularNo) {
|
_permFuncField.push(field.ModularNo)
|
}
|
})
|
_permFuncField = _permFuncField.sort()
|
}
|
|
sessionStorage.setItem('sysRoles', JSON.stringify(_sysRoles))
|
sessionStorage.setItem('permFuncField', JSON.stringify(_permFuncField))
|
}
|
})
|
} else if (window.GLOB.systemType === 'production') {
|
this.props.resetEditLevel('HS')
|
this.props.modifyMainMenu({
|
MenuID: 'systemManageView'
|
})
|
}
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
gotoDoc = () => {
|
if (options.sysType === 'local' && window.GLOB.mainSystemApi) {
|
let ssodomain = window.GLOB.mainSystemApi.replace('/webapi/dostars', '')
|
let url = `${ssodomain}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`
|
window.open(url)
|
} else if (options.sysType === 'SSO' || options.sysType === 'cloud') {
|
window.open(`${window.location.href.replace(/\/index.html(.*)|\/#(.*)/ig, '')}/doc/index.html#?appkey=${window.GLOB.appkey}&LoginUID=${sessionStorage.getItem('LoginUID')}`)
|
}
|
}
|
|
render () {
|
const { mainMenu, editLevel } = this.props
|
const { menulist } = this.state
|
|
return (
|
<header className={'sys-header-container ant-menu-dark ' + (['level2', 'level3', 'HS'].includes(editLevel) ? 'mask' : '')} id="main-header-container">
|
<div className="header-logo"><img src={MainLogo} alt=""/></div>
|
<div className="header-collapse">
|
<Icon type="menu-fold"/>
|
</div>
|
{/* 正常菜单 */}
|
{editLevel !== 'level1' && menulist ?
|
<ul className={'header-menu ' + editLevel}>{
|
menulist.map(item => {
|
return (
|
<li key={item.MenuID} onClick={() => {this.changeMenu(item)}} className={mainMenu && mainMenu.MenuID === item.MenuID ? 'active' : ''}>
|
<span>{item.MenuName}</span>
|
</li>
|
)
|
})}
|
{!editLevel || editLevel === 'HS' ?
|
<li key="HS" onClick={this.enterEditManage} className={editLevel === 'HS' ? 'active' : ''}>
|
<span>HS</span>
|
</li> : null
|
}
|
</ul> : null
|
}
|
{editLevel === 'HS' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>退出</Button> : null}
|
{/* 进入编辑按钮 */}
|
{!editLevel ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null}
|
{!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
|
<span onClick={() => {window.open('#/appmanage')}} className="mobile" type="edit"> 应用管理 <Icon type="arrow-right" /></span> : null
|
}
|
{!editLevel && options.sysType === 'local' && this.props.memberLevel >= 20 ?
|
<span onClick={() => {window.open('#/interface')}} className="interface" type="edit"> 接口调试 <Icon type="arrow-right" /></span> : null
|
}
|
{/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '首页' }))) */}
|
{!editLevel && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ?
|
<span className="home-edit" onClick={() => {window.open('#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=')}}>
|
首页 <Icon type="arrow-right" />
|
</span> : null
|
}
|
{/* 编辑菜单 */}
|
{editLevel === 'level1' ? <EditMenu menulist={this.state.menulist} reload={this.reload} exitEdit={this.exitEdit}/> : null}
|
{/* 头像、用户名 */}
|
<Dropdown className="header-setting" overlay={
|
<Menu className="header-dropdown">
|
<Menu.Item key="switch">
|
{this.state.dict['main.edit']}
|
<Switch size="small" style={{marginLeft: '7px'}} disabled={!!editLevel} checked={true} onChange={this.changeEditState} />
|
</Menu.Item>
|
<Menu.Item key="doc" onClick={this.gotoDoc}>{this.state.dict['main.doc']}</Menu.Item>
|
<Menu.Item key="logout" onClick={this.logout}>{this.state.dict['main.logout']}</Menu.Item>
|
</Menu>
|
}>
|
<div>
|
<img src={this.state.avatar || avatar} alt=""/>
|
<span>
|
<span className="username">{this.state.userName}</span> <Icon type="down" />
|
</span>
|
</div>
|
</Dropdown>
|
</header>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
tabviews: state.tabviews,
|
menuTree: state.menuTree,
|
mainMenu: state.mainMenu,
|
editLevel: state.editLevel,
|
permAction: state.permAction,
|
memberLevel: state.memberLevel
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
|
modifyMenuTree: (menuTree) => dispatch(modifyMenuTree(menuTree)),
|
modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)),
|
resetEditLevel: (level) => dispatch(resetEditLevel(level)),
|
logout: () => dispatch(logout())
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header))
|
