import React, {Component} from 'react'
|
import { is, fromJS } from 'immutable'
|
import { Menu } from 'antd'
|
|
import MKEmitter from '@/utils/events.js'
|
import MkIcon from '@/components/mk-icon'
|
import './index.scss'
|
|
const { SubMenu } = Menu
|
|
class Sidemenu extends Component {
|
state = {
|
subMenulist: [], // 二级菜单
|
rootSubmenuKeys: null,
|
collapse: sessionStorage.getItem('collapse') === 'true',
|
openKeys: null
|
}
|
|
componentDidMount() {
|
MKEmitter.addListener('mainMenuChange', this.loadsubmenu)
|
MKEmitter.addListener('toggleCollapse', this.toggleCollapse)
|
|
if (window.GLOB.mainMenu) {
|
this.loadsubmenu()
|
}
|
}
|
|
shouldComponentUpdate(nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('mainMenuChange', this.loadsubmenu)
|
MKEmitter.removeListener('toggleCollapse', this.toggleCollapse)
|
}
|
|
toggleCollapse = (collapse) => {
|
this.setState({
|
collapse: collapse,
|
openKeys: []
|
})
|
}
|
|
loadsubmenu = () => {
|
let menu = window.GLOB.mainMenu
|
|
if (!menu || !menu.MenuID) { // 没有主菜单时，清空下级菜单
|
this.setState({
|
subMenulist: [],
|
rootSubmenuKeys: [],
|
openKeys: [],
|
})
|
return
|
}
|
|
menu = fromJS(menu).toJS()
|
let openKey = ''
|
|
if (menu.children[0]) {
|
openKey = menu.children[0].MenuID
|
}
|
|
this.setState({
|
subMenulist: menu.children,
|
rootSubmenuKeys: menu.children.map(item => item.MenuID),
|
openKeys: this.state.collapse ? [] : [openKey],
|
})
|
}
|
|
changemenu(e, menu) {
|
e.preventDefault()
|
|
if (menu.OpenType === 'newpage') {
|
window.open(menu.src)
|
} else {
|
MKEmitter.emit('modifyTabs', menu)
|
}
|
|
if (window.GLOB.systemType === 'production') {
|
MKEmitter.emit('queryTrigger', {menuId: menu.MenuID, name: '菜单'})
|
}
|
}
|
|
onOpenChange = openKeys => {
|
const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1)
|
if (this.state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
this.setState({ openKeys })
|
} else {
|
this.setState({
|
openKeys: latestOpenKey ? [latestOpenKey] : []
|
})
|
}
|
}
|
|
render () {
|
const { collapse } = this.state
|
|
if (window.GLOB.mainMenu === '') return (<span className="mk-side-menu-hidden"></span>)
|
|
return (
|
<aside id="mk-sidemenu-wrap" className={'mk-side-menu ant-menu-dark' + (collapse ? ' collapsed' : '')}>
|
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={collapse}>
|
{this.state.subMenulist && this.state.subMenulist.map((item) => {
|
return (
|
<SubMenu
|
key={item.MenuID}
|
title={
|
<span>
|
<MkIcon type={item.Icon} />
|
<span>{item.MenuName}</span>
|
</span>
|
}
|
>
|
{item.children.map(cell => {
|
return (
|
<Menu.Item key={cell.MenuID}>
|
<a href={cell.src} onClick={(e) => this.changemenu(e, cell)}>{cell.MenuName}</a>
|
</Menu.Item>
|
)
|
})}
|
</SubMenu>
|
)
|
})}
|
</Menu>
|
</aside>
|
)
|
}
|
}
|
|
export default Sidemenu
|
