import React, {Component} from 'react'
|
// import { Lifecycle } from 'react-router'
|
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 './sidemenu.scss'
|
|
const { SubMenu } = Menu
|
|
class Smenu 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) {
|
this.setState({
|
subMenulist: result.data,
|
rootSubmenuKeys: result.data.map(item => item.id),
|
openKeys: this.props.collapse ? [] : [result.data[0].id]
|
})
|
}
|
}
|
|
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)
|
// this.props.history.push('/main')
|
// this.props.history.replace('/main')
|
e.preventDefault()
|
}
|
|
// mixins = [ Lifecycle ]
|
|
routerWillLeave(nextLocation) {
|
if (!this.state.isSaved)
|
return 'Your work is not saved! Are you sure you want to leave?'
|
}
|
|
componentDidMount () {
|
|
}
|
|
UNSAFE_componentWillMount () {
|
|
}
|
|
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))
|
}
|
}
|
|
componentDidUpdate () {
|
// console.log('componentDidUpdate')
|
}
|
|
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.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="#/main/0345" 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,
|
mainMenu: state.selectedMainMenu
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews))
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Smenu))
|
