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, notification } from 'antd'
|
import asyncComponent from '@/utils/asyncComponent'
|
import {modifyTabview, resetEditLevel} from '@/store/action'
|
import zhCN from '@/locales/zh-CN/header.js'
|
import enUS from '@/locales/en-US/header.js'
|
import Api from '@/api'
|
import './index.scss'
|
|
const EditSecMenu = asyncComponent(() => import('./editsecmenu'))
|
const EditThdMenu = asyncComponent(() => import('./editthdmenu'))
|
const { SubMenu } = Menu
|
|
class Sidemenu extends Component {
|
static propTypes = {
|
collapse: PropTypes.bool,
|
mainMenu: PropTypes.oneOfType([
|
PropTypes.string,
|
PropTypes.object
|
])
|
}
|
|
state = {
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
mainMenuList: null, // 一级菜单，编辑调整上级菜单时获取
|
subMenulist: null, // 二级菜单
|
editMenu: null, // 编辑三级菜单时设置
|
rootSubmenuKeys: null,
|
createThirdMenu: false,
|
openKeys: null,
|
preview: null
|
}
|
|
async loadsubmenu (menu) {
|
let result = await Api.getSystemConfig({func: 'sPC_Get_FunMenu', ParentID: menu.MenuID})
|
if (result.status) {
|
if (result.data.length === 0) { // 查询菜单为空
|
this.setState({
|
subMenulist: [],
|
rootSubmenuKeys: [],
|
openKeys: [],
|
editMenu: null
|
})
|
return
|
}
|
|
let param = sessionStorage.getItem('view_param') // 是否为打开新页面
|
let msg = sessionStorage.getItem('UserID') + '&' + sessionStorage.getItem('SessionUid') + '&' + sessionStorage.getItem('LoginUID')
|
let submenuId = '' // 展开二级菜单ID
|
let tabId = '' // 打开的tab页id
|
|
if (param) {
|
param = param.split('&')
|
submenuId = param[1]
|
let submenu = result.data.filter(item => item.ParentID === submenuId)[0]
|
|
if (!submenu) {
|
submenuId = ''
|
} else {
|
tabId = param[2]
|
let tabmenu = submenu.FunMenu.filter(item => item.MenuID === tabId)[0]
|
if (!tabmenu) {
|
submenuId = ''
|
tabId = ''
|
}
|
}
|
sessionStorage.removeItem('view_param')
|
}
|
let parentID = submenuId ? submenuId : result.data[0].ParentID // 展开二级菜单ID
|
|
let menulist = result.data.map((item, i) => {
|
let _smenu = {}
|
_smenu.id = i
|
_smenu.MenuID = item.ParentID
|
_smenu.text = item.MenuNameP
|
try {
|
_smenu.PageParam = JSON.parse(item.PageParamP)
|
} catch (e) {
|
_smenu.PageParam = {Icon: 'folder'}
|
}
|
if (item.FunMenu) {
|
_smenu.children = item.FunMenu.map((child, n) => {
|
let _tmenu = {}
|
let _msg = window.btoa(menu.MenuID + '&' + _smenu.MenuID + '&' + child.MenuID + '&' + msg) // 待完善
|
_tmenu.src = '#/main/' + _msg
|
if (child.LinkUrl === 'CommonTable') {
|
_tmenu.type = 'CommonTable'
|
} else if (child.LinkUrl === 'DataManage') {
|
_tmenu.type = 'DataManage'
|
} else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
|
_tmenu.type = 'RoleManage'
|
} else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
|
_tmenu.type = 'iframe'
|
}
|
|
if (_tmenu.type !== 'iframe') {
|
try {
|
_tmenu.PageParam = JSON.parse(child.PageParam)
|
} catch (e) {
|
_tmenu.PageParam = {}
|
}
|
_tmenu.type = _tmenu.PageParam.Template || _tmenu.type
|
} else {
|
_tmenu.LinkUrl = child.LinkUrl
|
}
|
|
_tmenu.id = n
|
_tmenu.MenuID = child.MenuID
|
_tmenu.MenuNo = child.MenuNo
|
_tmenu.MenuName = child.MenuName
|
_tmenu.text = child.MenuName
|
return _tmenu
|
})
|
}
|
return _smenu
|
})
|
|
this.setState({
|
subMenulist: menulist,
|
rootSubmenuKeys: result.data.map(item => item.ParentID),
|
openKeys: this.props.collapse ? [] : [parentID],
|
editMenu: this.props.editLevel === 'level3' && menulist.filter(menu => menu.MenuID === this.state.editMenu.MenuID)[0]
|
})
|
if (tabId) {
|
let _menu = menulist.filter(menu => menu.MenuID === submenuId)[0]
|
let opentab = _menu && _menu.children.filter(tab => tab.MenuID === tabId)[0]
|
|
if (opentab) {
|
opentab.selected = true
|
this.props.modifyTabview([opentab])
|
}
|
}
|
} else {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
}
|
}
|
|
changemenu(e) {
|
let menu = JSON.parse(e.target.dataset.item)
|
if (menu.Ot === 'NewPage') {
|
window.open(menu.src)
|
} else if (menu.Ot === 'blank') {
|
menu.selected = true
|
this.props.modifyTabview([menu])
|
e.preventDefault()
|
} else {
|
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)))) {
|
if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
|
// 主菜单切换，或菜单展开下的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] : []
|
})
|
}
|
}
|
|
enterSubEdit = (e) => {
|
// 编辑二级菜单
|
e.stopPropagation()
|
this.props.resetEditLevel('level2')
|
// 获取一级菜单列表
|
Api.getSystemConfig({func: 'sPC_Get_MainMenu'}).then(res => {
|
this.setState({
|
mainMenuList: res.data.map(item => {
|
return {
|
MenuID: item.MenuID,
|
text: item.MenuName
|
}
|
})
|
})
|
})
|
}
|
|
enterThrEdit = (e, menu) => {
|
// 编辑三级菜单
|
e.stopPropagation()
|
this.props.resetEditLevel('level3')
|
this.setState({editMenu: menu})
|
}
|
|
reload = () => {
|
this.loadsubmenu(this.props.mainMenu)
|
}
|
|
exitEdit = () => {
|
if (this.props.editLevel === 'level3') {
|
this.setState({editMenu: null})
|
}
|
this.props.resetEditLevel(false)
|
}
|
|
render () {
|
const editShow = (this.props.editState && !this.props.editLevel) || false
|
return (
|
<aside className={"side-menu ant-menu-dark" + (this.props.collapse ? ' side-menu-collapsed' : '') + (this.props.isiframe ? ' iframe' : '')}>
|
{this.state.subMenulist && !(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') &&
|
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
|
{editShow && <li className="sup-menu"><Icon onClick={this.enterSubEdit} className="edit-check" type="edit" /></li>}
|
{this.state.subMenulist.map((item, index) => {
|
return (
|
<SubMenu
|
key={item.MenuID}
|
title={
|
<span className={editShow && index === 0 ? 'edit-control' : ''}>
|
<Icon type={item.PageParam.Icon} />
|
<span>{item.text}</span>
|
</span>
|
}
|
>
|
{editShow && <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}>
|
<Icon onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check" type="edit" />
|
</li>}
|
{item.children.map(cell => {
|
return (
|
<Menu.Item key={cell.MenuID}>
|
<a href={cell.src} id={cell.MenuID} data-item={JSON.stringify(cell)} onClick={this.changemenu.bind(this)}>{cell.text}</a>
|
</Menu.Item>
|
)
|
})}
|
</SubMenu>
|
)
|
})}
|
</Menu>}
|
{this.props.editLevel === 'level2' &&
|
<EditSecMenu
|
menulist={this.state.subMenulist}
|
supMenuList={this.state.mainMenuList}
|
supMenu={this.props.mainMenu}
|
reload={this.reload}
|
exitEdit={this.exitEdit}
|
/>
|
}
|
{this.props.editLevel === 'level3' && this.state.subMenulist &&
|
<EditThdMenu
|
menulist={this.state.editMenu.children}
|
supMenuList={this.state.subMenulist}
|
supMenu={this.state.editMenu}
|
reload={this.reload}
|
exitEdit={this.exitEdit}
|
/>
|
}
|
</aside>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
tabviews: state.tabviews,
|
collapse: state.collapse,
|
isiframe: state.isiframe,
|
mainMenu: state.selectedMainMenu,
|
editState: state.editState,
|
editLevel: state.editLevel
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
|
resetEditLevel: (level) => dispatch(resetEditLevel(level))
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Sidemenu))
|
