import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal } from 'antd'
|
|
import MKEmitter from '@/utils/events.js'
|
import Utils from '@/utils/utils.js'
|
import ElementForm from './menuform'
|
import DragElement from './drags'
|
// import './index.scss'
|
|
const { confirm } = Modal
|
|
class MenusComponent extends Component {
|
static propTpyes = {
|
menus: PropTypes.array, // 菜单列表
|
columns: PropTypes.array, // 字段集
|
updateConfig: PropTypes.func // 菜单配置更新
|
}
|
|
state = {
|
menus: [],
|
columns: [],
|
visible: false
|
}
|
|
/**
|
* @description 初始化
|
*/
|
UNSAFE_componentWillMount () {
|
const { menus } = this.props
|
|
this.setState({
|
menus: fromJS(menus).toJS()
|
})
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('addmobmenu', this.addmobmenu)
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新，清除快捷键设置
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('addmobmenu', this.addmobmenu)
|
}
|
|
addmobmenu = () => {
|
let _menu = {
|
name: '菜单',
|
property: 'menu'
|
}
|
|
this.setState({editMenu: _menu, visible: true})
|
}
|
|
/**
|
* @description 顺序调整
|
*/
|
handleList = (list) => {
|
this.setState({menus: list}, () => {
|
this.props.updateConfig(list)
|
})
|
}
|
|
/**
|
* @description 元素编辑
|
*/
|
handleElement = (menu) => {
|
this.setState({
|
visible: true,
|
editMenu: menu
|
})
|
}
|
|
/**
|
* @description 取消保存，如果元素为新添元素，则从序列中删除
|
*/
|
editModalCancel = () => {
|
this.setState({
|
editMenu: null,
|
visible: false
|
})
|
}
|
|
/**
|
* @description 元素修改后提交保存
|
*/
|
handleSubmit = () => {
|
const { menus, editMenu } = this.state
|
|
this.menuFormRef.handleConfirm().then(res => {
|
let _menus = fromJS(menus).toJS()
|
|
if (editMenu.MenuID) {
|
res.MenuID = editMenu.MenuID
|
|
_menus = _menus.map(item => {
|
if (item.MenuID === res.MenuID) return res
|
return item
|
})
|
} else {
|
res.MenuID = Utils.getuuid()
|
|
_menus.push(res)
|
}
|
|
if (editMenu.MenuID && editMenu.property === 'menu' && res.property !== 'menu') {
|
const that = this
|
confirm({
|
content: '菜单将被重置，确定修改吗？',
|
onOk() {
|
_menus = _menus.map(item => {
|
if (item.MenuID === res.MenuID) {
|
item.MenuID = Utils.getuuid()
|
}
|
return item
|
})
|
that.setState({menus: _menus, editMenu: null, visible: false}, () => {
|
that.props.updateConfig(_menus)
|
})
|
},
|
onCancel() {}
|
})
|
} else {
|
this.setState({menus: _menus, editMenu: null, visible: false}, () => {
|
this.props.updateConfig(_menus)
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 按钮删除
|
*/
|
deleteElement = (card) => {
|
const { menus } = this.state
|
let that = this
|
|
confirm({
|
content: `确定删除《${card.name}》吗？`,
|
onOk() {
|
let _menus = menus.filter(item => item.MenuID !== card.MenuID)
|
|
that.setState({
|
menus: _menus
|
}, () => {
|
that.props.updateConfig(_menus)
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
render() {
|
const { columns } = this.props
|
const { menus, visible, editMenu } = this.state
|
|
return (
|
<>
|
<DragElement
|
list={menus}
|
handleList={this.handleList}
|
handleMenu={this.handleElement}
|
deleteMenu={this.deleteElement}
|
/>
|
<Modal
|
title={editMenu && !editMenu.MenuID ? '添加菜单' : '编辑菜单'}
|
visible={visible}
|
width={800}
|
maskClosable={false}
|
onCancel={this.editModalCancel}
|
onOk={this.handleSubmit}
|
destroyOnClose
|
>
|
<ElementForm
|
menu={editMenu}
|
cols={columns}
|
inputSubmit={this.handleSubmit}
|
wrappedComponentRef={(inst) => this.menuFormRef = inst}
|
/>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default MenusComponent
|
