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, Button, notification, Modal, Spin} from 'antd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { DndProvider } from 'react-dnd'
|
import {modifyTabview, resetEditLevel} from '@/store/action'
|
import TransferForm from '@/components/transferform'
|
import DragElement from './dragelement'
|
import MenuForm from './menuform'
|
import zhCN from '@/locales/zh-CN/header.js'
|
import enUS from '@/locales/en-US/header.js'
|
import Api from '@/api'
|
import './index.scss'
|
|
const { SubMenu } = Menu
|
const { confirm } = Modal
|
let previewList = null
|
|
class Sidemenu extends Component {
|
static propTypes = {
|
collapse: PropTypes.bool,
|
mainMenu: PropTypes.oneOfType([
|
PropTypes.string,
|
PropTypes.object
|
])
|
}
|
|
state = {
|
mainMenuList: null,
|
subMenulist: null,
|
rootSubmenuKeys: null,
|
modalOptions: {
|
visible: false,
|
title: '',
|
level: 'slevel',
|
type: 'add',
|
menu: null
|
},
|
confirmLoading: false,
|
menuLoading: false,
|
thawMvisible: false,
|
thawmenulist: null,
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
openKeys: null
|
}
|
|
async loadsubmenu (menu) {
|
this.setState({menuLoading: true})
|
let result = await Api.getSubMenuData(menu.MenuID)
|
if (result.status) {
|
let param = sessionStorage.getItem('view_param') // 是否为打开新页面
|
let msg = sessionStorage.getItem('UserID') + '&' + sessionStorage.getItem('SessionUid') + '&' + sessionStorage.getItem('LoginUID')
|
let submenuindex = 0 // 展开二级菜单索引
|
let tabindex = null // 打开的tab页
|
if (param) {
|
param = param.split('&')
|
submenuindex = parseInt(param[1])
|
tabindex = parseInt(param[2])
|
sessionStorage.removeItem('view_param')
|
}
|
let parentID = result.data[submenuindex] ? result.data[submenuindex].ParentID : '' // 展开二级菜单ID
|
|
this.setState({
|
menuLoading: false,
|
subMenulist: result.data.map((item, i) => {
|
item.id = i
|
item.text = item.MenuNameP
|
try {
|
item.PageParam = JSON.parse(item.PageParamP)
|
} catch (e) {
|
item.PageParam = {Icon: 'folder'}
|
}
|
if (item.FunMenu) {
|
item.children = item.FunMenu.map((child, n) => {
|
let _msg = window.btoa(menu.MenuID + '&' + i + '&' + n + '&' + msg) // 待完善
|
child.src = '#/main/' + _msg
|
if (child.LinkUrl === 'CommonTable') {
|
child.type = 'CommonTable'
|
} else if (child.LinkUrl === 'DataManage') {
|
child.type = 'DataManage'
|
} else if (child.LinkUrl === 'bda/rdt?pageno=rolemenus&MenuNo=RoleMenuM') {
|
child.type = 'RoleManage'
|
} else if (child.LinkUrl.split('?')[0] === 'Main/Index' || child.LinkUrl.split('?')[0] === 'bda/rdt') {
|
child.type = 'iframe'
|
}
|
child.id = n
|
child.text = item.MenuName
|
return child
|
})
|
}
|
return item
|
}),
|
rootSubmenuKeys: result.data.map(item => item.ParentID),
|
openKeys: (this.props.collapse || !parentID) ? [] : [parentID]
|
})
|
|
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)
|
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)))) {
|
// 主菜单切换，或菜单展开下的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()
|
previewList = null
|
this.props.resetEditLevel('level2')
|
Api.getMainMenuData().then(res => {
|
this.setState({
|
mainMenuList: res.data.map(item => {
|
return {
|
id: item.MenuID,
|
text: item.MenuName
|
}
|
})
|
})
|
})
|
}
|
|
handlePreviewList = (List) => {
|
// 菜单顺序改变时，保存中间状态
|
previewList = List
|
}
|
|
handleMenu = (menu) => {
|
// 菜单编辑：修改、删除
|
const _this = this
|
if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 10
|
})
|
} else if (menu.type === 'close') {
|
confirm({
|
title: this.state.dict['header.menu.close'].replace('@M', menu.card.text),
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: menu.card.ParentID
|
}
|
return Api.submitInterface(param).then(res => {
|
if (res.status) {
|
_this.loadsubmenu(_this.props.mainMenu)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (menu.type === 'edit') {
|
this.setState({
|
modalOptions: {
|
visible: true,
|
title: this.state.dict['header.menu.editTitle'],
|
level: 'slevel',
|
type: 'edit',
|
parentMenu: this.props.mainMenu,
|
supMenuList: this.state.mainMenuList,
|
menu: menu.card
|
}
|
})
|
}
|
}
|
|
handleSubBtn = (type) => {
|
// 操作按钮
|
if (type === 'add') {
|
this.setState({
|
modalOptions: {
|
visible: true,
|
title: this.state.dict['header.menu.addtitle'],
|
level: 'slevel',
|
type: 'add',
|
parentMenu: this.props.mainMenu,
|
supMenuList: this.state.mainMenuList,
|
menu: null
|
}
|
})
|
} else if (type === 'thaw') {
|
this.setState({
|
thawMvisible: true
|
})
|
Api.submitInterface({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: this.props.mainMenu.MenuID,
|
TYPE: 20
|
}).then(res => {
|
if (res.status) {
|
this.setState({
|
thawmenulist: res.data.map(menu => {
|
return {
|
key: menu.MenuID,
|
title: menu.MenuName
|
}
|
})
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
} else if (type === 'confirm') {
|
if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
|
let _this = this
|
let param = {}
|
param.func = 'sPC_Menu_SortUpt'
|
param.LText = []
|
previewList.forEach((item, index) => {
|
param.LText.push('selectmspace\'' + item.MenuID + '\'mspaceasmspaceMenuid,' + (index + 1) * 10 + 'mspaceasmspacesort')
|
})
|
param.LText = param.LText.join('mspaceunionmspace')
|
confirm({
|
title: this.state.dict['header.menu.resetorder'],
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
return Api.submitInterface(param).then(res => {
|
if (res.status) {
|
_this.loadsubmenu(_this.props.mainMenu)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.resetEditLevel(false)
|
}
|
} else if (type === 'close') {
|
this.props.resetEditLevel(false)
|
}
|
}
|
|
memuHandleSubmit = () => {
|
let options = this.state.modalOptions
|
if (options.type === 'add' && options.level === 'slevel') {
|
// 新建菜单：提交
|
this.menuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_SndMenu_Add'
|
param.Sort = (this.state.subMenulist.length + 1) * 10
|
this.setState({
|
confirmLoading: true
|
})
|
Api.submitInterface(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
modalOptions: {
|
...options,
|
visible: false,
|
parentMenu: null,
|
supMenuList: null,
|
menu: null
|
}
|
})
|
this.loadsubmenu(this.props.mainMenu)
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}, () => {})
|
} else if (options.type === 'edit' && options.level === 'slevel') {
|
// 编辑菜单：提交
|
this.menuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_SndMenu_Upt'
|
this.setState({
|
confirmLoading: true
|
})
|
Api.submitInterface(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
modalOptions: {
|
...options,
|
visible: false,
|
parentMenu: null,
|
supMenuList: null,
|
menu: null
|
}
|
})
|
this.loadsubmenu(this.props.mainMenu)
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}, () => {})
|
}
|
}
|
|
memuHandleCancel = () => {
|
let options = this.state.modalOptions
|
this.setState({
|
modalOptions: {
|
...options,
|
visible: false,
|
menu: null
|
}
|
})
|
}
|
|
callback = () => {
|
|
}
|
|
thawMemuSubmit = () => {
|
if (this.refs.trawmenu.state.targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.thawmenu.select'],
|
duration: 10
|
})
|
} else {
|
this.setState({
|
confirmLoading: true
|
})
|
let defers = this.refs.trawmenu.state.targetKeys.map(item => {
|
return new Promise((resolve) => {
|
Api.submitInterface({
|
func: 'sPC_MainMenu_ReDel',
|
MenuID: item
|
}).then(res => {
|
if (res.status) {
|
resolve('')
|
} else {
|
resolve(res.message)
|
}
|
})
|
})
|
})
|
Promise.all(defers).then(res => {
|
let msg = res.filter(Boolean)[0]
|
if (msg) {
|
notification.error({
|
top: 92,
|
message: msg,
|
duration: 15
|
})
|
} else {
|
this.setState({
|
confirmLoading: false,
|
thawMvisible: false,
|
thawmenulist: null,
|
menulist: null
|
})
|
this.loadsubmenu(this.props.mainMenu)
|
}
|
})
|
}
|
}
|
|
thawMemuCancel = () => {
|
this.setState({
|
thawMvisible: false,
|
thawmenulist: null
|
})
|
}
|
|
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 || this.props.editLevel === 'level1') &&
|
<Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark" inlineCollapsed={this.props.collapse}>
|
{this.state.subMenulist.map((item, index) => {
|
return (
|
<SubMenu
|
key={item.ParentID}
|
title={
|
<span className={editShow && index === 0 ? 'edit-control' : ''}>
|
<Icon type={item.PageParam.Icon} />
|
{editShow && index === 0 && <Icon onClick={this.enterSubEdit} className="edit-check" type="edit" />}
|
<span>{item.MenuNameP}</span>
|
</span>
|
}
|
>
|
{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.MenuName}</a>
|
</Menu.Item>
|
)
|
})}
|
</SubMenu>
|
)
|
})}
|
</Menu>}
|
{this.props.editLevel === 'level2' && !this.state.menuLoading &&
|
<div>
|
<DndProvider className="header-drag-menu" backend={HTML5Backend}>
|
<DragElement
|
list={this.state.subMenulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.handleMenu}
|
/>
|
</DndProvider>
|
<div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
|
<Icon type="plus" />
|
</div>
|
<div className="menu-btn">
|
<Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{this.state.dict['header.thawmenu']}</Button>
|
<Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{this.state.dict['header.confirm']}</Button>
|
<Button onClick={() => {this.handleSubBtn('close')}}>{this.state.dict['header.close']}</Button>
|
</div>
|
</div>
|
}
|
<Modal
|
title={this.state.modalOptions.title}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.modalOptions.visible}
|
onOk={this.memuHandleSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.memuHandleCancel}
|
>
|
<MenuForm
|
dict={this.state.dict}
|
options={this.state.modalOptions}
|
wrappedComponentRef={(inst) => this.menuFormRef = inst}
|
/>
|
</Modal>
|
<Modal
|
title={this.state.dict['header.thawmenu']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.thawMvisible}
|
onOk={this.thawMemuSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.thawMemuCancel}
|
>
|
{!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
|
{this.state.thawmenulist && <TransferForm ref="trawmenu" dict={this.state.dict} menulist={this.state.thawmenulist}/>}
|
</Modal>
|
{/* {this.props.editLevel === 'level2' && <div className="editboard">
|
<div className="workplace">
|
<Tabs defaultActiveKey="1" onChange={this.callback}>
|
<TabPane tab="二级菜单" key="1">
|
<div className="ant-card ant-card-bordered level2-left">
|
<div className="ant-card-head">
|
<div className="ant-card-head-wrapper">
|
<div className="ant-card-head-title">
|
<Radio.Group name="radiogroup" defaultValue={1}>
|
<Radio value={1}>排序</Radio>
|
<Radio value={2}>编辑</Radio>
|
</Radio.Group>
|
<Icon onClick={this.enterEdit} className="edit-check" type="plus" />
|
</div>
|
</div>
|
</div>
|
<div className="ant-card-body">
|
<p>Card content</p>
|
<p>Card content</p>
|
<p>Card content</p>
|
</div>
|
</div>
|
</TabPane>
|
<TabPane tab="三级菜单" key="2">
|
<Card title="df" style={{ width: 300 }}>
|
<p>Card content</p>
|
<p>Card content</p>
|
<p>Card content</p>
|
</Card>
|
</TabPane>
|
</Tabs>
|
</div>
|
</div>} */}
|
</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))
|
