import React, {Component} from 'react'
|
import { connect } from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import { Menu, Icon, notification } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import { modifyTabview, resetEditLevel, modifyMenuTree, modifyMainMenu } from '@/store/action'
|
import { SySMenuList } from './config'
|
import options from '@/store/options.js'
|
import zhCN from '@/locales/zh-CN/main.js'
|
import enUS from '@/locales/en-US/main.js'
|
import Api from '@/api'
|
import './index.scss'
|
|
const EditSecMenu = asyncComponent(() => import('@/templates/menuconfig/editsecmenu'))
|
const EditThdMenu = asyncComponent(() => import('@/templates/menuconfig/editthdmenu'))
|
const { SubMenu } = Menu
|
|
class Sidemenu extends Component {
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
subMenulist: [], // 二级菜单
|
editMenu: null, // 编辑三级菜单时设置
|
rootSubmenuKeys: null,
|
openKeys: null,
|
preview: null
|
}
|
|
async loadsubmenu (menu) {
|
if (!menu || !menu.MenuID) { // 没有主菜单时，清空下级菜单
|
this.setState({
|
subMenulist: [],
|
rootSubmenuKeys: [],
|
openKeys: [],
|
editMenu: null
|
})
|
return
|
}
|
|
menu = fromJS(menu).toJS()
|
let openKey = ''
|
|
if (menu.children[0]) {
|
openKey = menu.openId || menu.children[0].MenuID
|
}
|
|
this.setState({
|
subMenulist: menu.children,
|
rootSubmenuKeys: menu.children.map(item => item.MenuID),
|
openKeys: openKey ? [openKey] : [],
|
editMenu: this.props.editLevel === 'level3' ? menu.children.filter(_menu => _menu.MenuID === this.state.editMenu.MenuID)[0] : null
|
})
|
}
|
|
enterManageView = () => {
|
let menulist = SySMenuList
|
|
if (window.GLOB.systemType === 'production') {
|
menulist.forEach(menu => {
|
menu.children = menu.children.filter(item => item.systems && item.systems.includes(window.GLOB.systemType))
|
})
|
|
menulist = menulist.filter(menu => menu.children.length > 0)
|
} else {
|
menulist.forEach(menu => {
|
menu.children = menu.children.filter(item => !item.systems || item.systems.includes(options.sysType))
|
})
|
|
menulist = menulist.filter(menu => menu.children.length > 0)
|
}
|
|
this.setState({
|
subMenulist: menulist,
|
rootSubmenuKeys: menulist.map(item => item.MenuID),
|
openKeys: [menulist[0].MenuID]
|
})
|
}
|
|
changemenu(e, menu) {
|
e.preventDefault()
|
if (this.props.editLevel !== 'HS') {
|
return
|
}
|
|
let tabs = fromJS(this.props.tabviews).toJS()
|
tabs = tabs.filter(tab => {
|
tab.selected = false
|
return tab.MenuID !== menu.MenuID
|
})
|
|
if (this.props.tabviews.length !== tabs.length) {
|
this.props.modifyTabview(fromJS(tabs).toJS())
|
}
|
|
this.setState({}, () => {
|
menu.selected = true
|
tabs.push(menu)
|
this.props.modifyTabview(tabs)
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu)) && nextProps.mainMenu && nextProps.mainMenu.MenuID === 'systemManageView') {
|
this.enterManageView()
|
} else if (!is(fromJS(this.props.mainMenu), fromJS(nextProps.mainMenu))) {
|
// 主菜单切换，请求2、3级菜单数据
|
this.loadsubmenu(nextProps.mainMenu)
|
}
|
}
|
|
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] : []
|
})
|
}
|
}
|
|
enterSubEdit = (e) => {
|
// 编辑二级菜单
|
e.stopPropagation()
|
this.props.resetEditLevel('level2')
|
}
|
|
enterThrEdit = (e, menu) => {
|
// 编辑三级菜单
|
e.stopPropagation()
|
this.props.resetEditLevel('level3')
|
this.setState({editMenu: menu})
|
}
|
|
reload = () => {
|
const { mainMenu } = this.props
|
let _param = {func: 's_get_pc_menus', systemType: options.sysType, debug: 'Y'}
|
if (options.sysType !== 'cloud' && window.GLOB.systemType !== 'production') {
|
_param.linkurl = window.GLOB.linkurl
|
}
|
_param.pro_sys = window.GLOB.systemType === 'production' ? 'Y' : ''
|
|
Api.getSystemConfig(_param).then(result => {
|
// 登录超时
|
if (!result) return
|
|
if (result.status) {
|
let res = this.getMenulist(result)
|
let _mainMenu = res.menulist.filter(item => item.MenuID === mainMenu.MenuID)[0]
|
|
this.props.modifyMenuTree(res.menulist)
|
this.props.modifyMainMenu(_mainMenu || null)
|
} else {
|
notification.error({
|
top: 92,
|
message: result.message,
|
duration: 10
|
})
|
}
|
this.loadsubmenu(this.props.mainMenu)
|
})
|
}
|
|
getMenulist = (result) => {
|
let iframes = ['Main/Index', 'bda/rdt', 'Home/rdt']
|
let menulist = result.fst_menu.map(fst => {
|
let fstItem = {
|
MenuID: fst.MenuID,
|
MenuName: fst.MenuName,
|
PageParam: {OpenType: 'menu', linkUrl: ''},
|
children: []
|
}
|
if (fst.PageParam) {
|
try {
|
fstItem.PageParam = JSON.parse(fst.PageParam)
|
} catch (e) {
|
fstItem.PageParam = {OpenType: 'menu', linkUrl: ''}
|
}
|
}
|
|
if (fst.snd_menu) {
|
fstItem.children = fst.snd_menu.map(snd => {
|
let sndItem = {
|
ParentId: fst.MenuID,
|
MenuID: snd.MenuID,
|
MenuName: snd.MenuName,
|
PageParam: {Icon: 'folder'},
|
children: []
|
}
|
|
if (snd.PageParam) {
|
try {
|
sndItem.PageParam = JSON.parse(snd.PageParam)
|
} catch (e) {
|
sndItem.PageParam = {Icon: 'folder'}
|
}
|
}
|
|
if (snd.trd_menu) {
|
sndItem.children = snd.trd_menu.map(trd => {
|
let trdItem = {
|
FstId: fst.MenuID,
|
ParentId: snd.MenuID,
|
MenuID: trd.MenuID,
|
MenuName: trd.MenuName,
|
MenuNo: trd.MenuNo,
|
EasyCode: trd.EasyCode,
|
type: 'CommonTable', // 默认值为常用表
|
OpenType: 'newtab' // 打开方式
|
}
|
|
if (trd.LinkUrl && iframes.includes(trd.LinkUrl.split('?')[0])) {
|
trdItem.type = 'iframe'
|
trdItem.LinkUrl = trd.LinkUrl
|
trdItem.forbidden = true
|
} else {
|
try {
|
trdItem.PageParam = trd.PageParam ? JSON.parse(trd.PageParam) : {OpenType: 'newtab'}
|
} catch (e) {
|
trdItem.PageParam = {OpenType: 'newtab'}
|
}
|
|
trdItem.type = trdItem.PageParam.Template || trdItem.type
|
trdItem.OpenType = trdItem.PageParam.OpenType || trdItem.OpenType
|
|
if (trdItem.type === 'CustomPage' && this.props.memberLevel < 20) { // 会员等级大于等于20时，有编辑权限
|
trdItem.forbidden = true
|
}
|
}
|
return trdItem
|
})
|
}
|
return sndItem
|
})
|
}
|
return fstItem
|
})
|
|
return { menulist }
|
}
|
|
exitEdit = () => {
|
if (this.props.editLevel === 'level3') {
|
this.setState({editMenu: null})
|
}
|
this.props.resetEditLevel(false)
|
}
|
|
render () {
|
return (
|
<aside id="mk-sidemenu-wrap" className="mk-sys-side-menu ant-menu-dark mk-edit">
|
{!(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') &&
|
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark">
|
{!this.props.editLevel && <li className="sup-menu"><Icon onClick={this.enterSubEdit} className="edit-check" type="edit" /></li>}
|
{this.state.subMenulist && this.state.subMenulist.map((item, index) => {
|
return (
|
<SubMenu
|
key={item.MenuID}
|
title={
|
<span className={!this.props.editLevel && index === 0 ? 'edit-control' : ''}>
|
<Icon type={item.PageParam.Icon} />
|
<span>{item.MenuName}</span>
|
</span>
|
}
|
>
|
{!this.props.editLevel ? <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}>
|
<Icon onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check" type="edit" />
|
</li> : null}
|
{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>}
|
{this.props.editLevel === 'level2' ?
|
<EditSecMenu
|
menulist={this.state.subMenulist}
|
menuTree={this.props.menuTree}
|
supMenu={this.props.mainMenu}
|
reload={this.reload}
|
exitEdit={this.exitEdit}
|
/> : null
|
}
|
{this.props.editLevel === 'level3' && this.state.editMenu ?
|
<EditThdMenu
|
menulist={this.state.editMenu.children}
|
supMenuList={this.state.subMenulist}
|
supMenu={this.state.editMenu}
|
reload={this.reload}
|
exitEdit={this.exitEdit}
|
/> : null
|
}
|
</aside>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
tabviews: state.tabviews,
|
mainMenu: state.mainMenu,
|
menuTree: state.menuTree,
|
memberLevel: state.memberLevel,
|
editLevel: state.editLevel
|
}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
modifyMenuTree: (menuTree) => dispatch(modifyMenuTree(menuTree)),
|
modifyMainMenu: (mainMenu) => dispatch(modifyMainMenu(mainMenu)),
|
modifyTabview: (tabviews) => dispatch(modifyTabview(tabviews)),
|
resetEditLevel: (level) => dispatch(resetEditLevel(level))
|
}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Sidemenu)
|
