import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { connect } from 'react-redux'
|
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 {
|
static propTypes = {
|
collapse: PropTypes.bool
|
}
|
|
state = {
|
subMenulist: [], // 二级菜单
|
rootSubmenuKeys: null,
|
openKeys: null,
|
preview: null
|
}
|
|
async loadsubmenu (menu) {
|
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.props.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: '菜单'})
|
}
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
|
// 主菜单切换，请求2、3级菜单数据
|
this.loadsubmenu(nextProps.mainMenu)
|
} else if (nextProps.collapse && this.props.collapse !== nextProps.collapse) {
|
// 展开合并时，关闭展开菜单
|
this.setState({
|
openKeys: []
|
})
|
}
|
}
|
|
shouldComponentUpdate(nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
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 { mainMenu } = this.props
|
|
if (mainMenu === '') return (<span className="mk-side-menu-hidden"></span>)
|
|
return (
|
<aside id="mk-sidemenu-wrap" className={'mk-side-menu ant-menu-dark' + (this.props.collapse ? ' collapsed' : '')}>
|
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.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} id={cell.MenuID} onClick={(e) => this.changemenu(e, cell)}>{cell.MenuName}</a>
|
</Menu.Item>
|
)
|
})}
|
</SubMenu>
|
)
|
})}
|
</Menu>
|
</aside>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
collapse: state.collapse,
|
mainMenu: state.mainMenu,
|
}
|
}
|
|
const mapDispatchToProps = () => {
|
return {}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Sidemenu)
|
