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 { Menu, Icon } from 'antd'
|
import {modifyTabview} from '@/store/action'
|
import Api from '@/api'
|
import './index.scss'
|
|
const { SubMenu } = Menu
|
|
class Sidemenu extends Component {
|
static propTypes = {
|
collapse: PropTypes.bool,
|
mainMenu: PropTypes.oneOfType([
|
PropTypes.string,
|
PropTypes.object
|
])
|
}
|
|
state = {
|
subMenulist: null,
|
rootSubmenuKeys: null,
|
openKeys: null
|
}
|
|
async loadsubmenu (menu) {
|
let result = await Api.getSubMenuData(menu.MenuID)
|
if (result.status) {
|
let param = sessionStorage.getItem('view_param') // 是否为打开新页面
|
let msg = sessionStorage.getItem('UserID') + '&' + sessionStorage.getItem('lang')
|
let submenuindex = 0 // 展开二级菜单索引
|
let tabindex = null // 打开的tab页
|
if (param) {
|
param = param.split('&')
|
submenuindex = parseInt(param[1])
|
tabindex = parseInt(param[2])
|
sessionStorage.removeItem('view_param')
|
}
|
|
this.setState({
|
subMenulist: result.data.map((item, i) => {
|
if (item.children) {
|
item.children = item.children.map((child, n) => {
|
let _msg = window.btoa(menu.index + '&' + i + '&' + n + '&' + msg)
|
child.src = '#/main/' + _msg
|
return child
|
})
|
}
|
return item
|
}),
|
rootSubmenuKeys: result.data.map(item => item.id),
|
openKeys: this.props.collapse ? [] : [result.data[submenuindex].id]
|
})
|
|
if (tabindex !== null) {
|
let opentab = result.data[submenuindex].children[tabindex]
|
opentab.selected = true
|
this.props.modifyTabview([opentab])
|
}
|
}
|
}
|
|
changemenu(e) {
|
let menu = JSON.parse(e.target.dataset.item)
|
let tabs = JSON.parse(JSON.stringify(this.props.tabviews))
|
tabs = tabs.filter(tab => {
|
tab.selected = false
|
return tab.MenuID !== menu.MenuID
|
})
|
menu.selected = true
|
tabs.push(menu)
|
this.props.modifyTabview(tabs)
|
e.preventDefault()
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (nextProps.mainMenu && !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) {
|
if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu)) || (!this.props.collapse && !is(fromJS(this.props.tabviews), fromJS(nextProps.tabviews)))) {
|
// 主菜单切换，或菜单展开下的tab页变化，不会刷新
|
return false
|
} else {
|
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 () {
|
return (
|
<aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '')}>
|
{this.state.subMenulist &&
|
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
|
{this.state.subMenulist.map(item => {
|
return (
|
<SubMenu
|
key={item.id}
|
title={
|
<span>
|
{item.icon ? <Icon type={item.icon} /> : <Icon type="folder" />}
|
<span>{item.MenuName}</span>
|
</span>
|
}
|
>
|
{item.children.map(cell => {
|
return (
|
<Menu.Item key={cell.id}>
|
<a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.MenuName}</a>
|
</Menu.Item>
|
)
|
})}
|
</SubMenu>
|
)
|
})}
|
</Menu>}
|
</aside>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
tabviews: state.tabviews,
|
collapse: state.collapse,
|
isiframe: state.isiframe,
|
mainMenu: state.selectedMainMenu
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sidemenu))
|
