import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { connect } from 'react-redux'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { notification, Modal, Button } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import MKEmitter from '@/utils/events.js'
|
import MkIcon from '@/components/mk-icon'
|
import Utils from '@/utils/utils.js'
|
import DragElement from '../menuelement'
|
import asyncLoadComponent from '@/utils/asyncLoadComponent'
|
import './index.scss'
|
|
const MenuForm = asyncLoadComponent(() => import('../thdmenuform'))
|
|
const { confirm } = Modal
|
|
class EditMenu extends Component {
|
static propTpyes = {
|
menulist: PropTypes.any, // 三级菜单列表
|
exitEdit: PropTypes.func, // 退出编辑状态
|
supMenu: PropTypes.object, // 对应的上级菜单
|
supMenuList: PropTypes.array // 上级菜单列表，用于三级菜单切换上级菜单
|
}
|
|
state = {
|
confirmLoading: false, // 提交中。。。
|
loading: false, // 编辑菜单或使用已使用模板时，获取配置信息
|
menulist: null, // 编辑中的菜单
|
handleMVisible: false, // 添加或修改菜单模态框（角色权限分配等）
|
sysMenu: null, // 添加或编辑菜单（角色权限分配等）
|
change: false
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
/**
|
* @description 菜单顺序改变时，保存中间状态
|
*/
|
handlePreviewList = (List) => {
|
this.setState({
|
menulist: List,
|
change: !is(fromJS(List), fromJS(this.props.menulist))
|
})
|
}
|
|
/**
|
* @description 菜单编辑：修改、删除
|
* 1、菜单修改或删除时，先查看菜单顺序是否改变
|
* 2、菜单删除
|
* 3、菜单编辑，查询菜单配置信息，信息正确，进入对应编辑页面
|
*/
|
handleMenu = (menu) => {
|
if (this.state.change) {
|
notification.warning({
|
top: 92,
|
message: '菜单顺序已调整，请保存！',
|
duration: 5
|
})
|
return
|
}
|
|
if (menu.type === 'close') {
|
confirm({
|
title: `确定删除菜单《${menu.card.MenuName}》吗？`,
|
content: '',
|
onOk() {
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: menu.card.MenuID
|
}
|
return Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
MKEmitter.emit('mkUpdateMenuList')
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (menu.type === 'edit') {
|
let _menu = fromJS(menu.card).toJS()
|
|
if (['RolePermission', 'NewPage'].includes(_menu.PageParam.Template)) { // 单页面修改
|
_menu.Template = _menu.PageParam.Template
|
_menu.url = _menu.PageParam.url || ''
|
|
_menu.fstMenuId = _menu.FstId
|
_menu.supMenuList = this.props.supMenuList
|
_menu.fstMenuList = this.props.menuTree
|
|
this.setState({
|
handleMVisible: true,
|
sysMenu: _menu
|
})
|
} else if (['CommonTable', 'TreePage', 'CalendarPage'].includes(_menu.PageParam.Template)) {
|
sessionStorage.setItem('menuTree', JSON.stringify(this.props.menuTree))
|
let _param = window.btoa(window.encodeURIComponent(JSON.stringify(_menu)))
|
|
window.open(`#/basedesign/${_param}`)
|
} else if (_menu.PageParam.Template === 'BaseTable') {
|
sessionStorage.setItem('menuTree', JSON.stringify(this.props.menuTree))
|
let _param = window.btoa(window.encodeURIComponent(JSON.stringify(_menu)))
|
|
window.open(`#/tabledesign/${_param}`)
|
} else if (_menu.PageParam.Template === 'CustomPage') {
|
let _param = {
|
MenuType: 'custom',
|
MenuId: _menu.MenuID,
|
ParentId: _menu.ParentId,
|
MenuName: _menu.MenuName,
|
MenuNo: _menu.MenuNo
|
}
|
|
_param = window.btoa(window.encodeURIComponent(JSON.stringify(_param)))
|
|
window.open(`#/menudesign/${_param}`)
|
}
|
}
|
}
|
|
handleSubBtn = (type) => {
|
// 操作按钮：添加、解除冻结、确认及关闭
|
if (type === 'confirm') {
|
let param = {
|
func: 'sPC_Menu_SortUpt',
|
LText: this.state.menulist.map((item, index) => {
|
return 'select \'' + item.MenuID + '\' as Menuid,' + (index + 1) * 10 + ' as sort'
|
})
|
}
|
|
param.LText = param.LText.join(' union ') // sql拼接
|
param.LText = Utils.formatOptions(param.LText) // 关键字符替换，base64加密
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') // 时间戳
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp) // md5密钥
|
|
confirm({
|
title: '确认调整菜单顺序吗？',
|
content: '',
|
onOk() {
|
return Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
MKEmitter.emit('mkUpdateMenuList')
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (type === 'close') {
|
if (this.state.change) {
|
let _this = this
|
|
confirm({
|
title: '菜单顺序已调整，放弃保存吗？',
|
content: '',
|
onOk() {
|
_this.props.exitEdit()
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.exitEdit()
|
}
|
}
|
}
|
|
/**
|
* @description 三级菜单添加或修改
|
*/
|
memuSubmit = () => {
|
const { sysMenu } = this.state
|
|
this.menuFormRef.handleConfirm().then(res => {
|
let PageParam = {
|
Template: sysMenu.Template,
|
OpenType: 'newtab'
|
}
|
|
if (sysMenu.Template === 'NewPage') {
|
PageParam.OpenType = 'NewPage'
|
PageParam.url = res.url
|
}
|
|
let param = {
|
func: 'sPC_TrdMenu_AddUpt',
|
FstID: res.fstMenuId,
|
SndID: res.ParentID,
|
ParentID: res.ParentID,
|
MenuID: sysMenu.MenuID,
|
MenuNo: res.MenuNo,
|
Template: sysMenu.Template,
|
MenuName: res.MenuName,
|
PageParam: JSON.stringify(PageParam),
|
LongParam: '',
|
LText: '',
|
LTexttb: ''
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
this.setState({
|
confirmLoading: true
|
})
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
confirmLoading: false,
|
handleMVisible: false,
|
sysMenu: null
|
})
|
|
MKEmitter.emit('mkUpdateMenuList')
|
document.getElementById('root').style.overflowY = 'unset'
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
}
|
})
|
})
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({
|
menulist: this.props.menulist
|
})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
|
this.setState({
|
menulist: nextProps.menulist,
|
change: false
|
})
|
}
|
}
|
|
render () {
|
const { change } = this.state
|
|
return (
|
<div className="third-edit-box">
|
<div className="cus-submenu-title">
|
<MkIcon type={this.props.supMenu.PageParam.Icon} />
|
<span>{this.props.supMenu.MenuName}</span>
|
</div>
|
<DndProvider backend={HTML5Backend}>
|
<DragElement
|
list={this.state.menulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.handleMenu}
|
/>
|
</DndProvider>
|
<div className="menu-btn">
|
<Button type="primary" className="mk-save-menu" disabled={!change} onClick={() => {this.handleSubBtn('confirm')}}>保存</Button>
|
<Button onClick={() => {this.handleSubBtn('close')}}>关闭</Button>
|
</div>
|
{/* 添加系统菜单 */}
|
<Modal
|
title="修改菜单"
|
visible={this.state.handleMVisible}
|
width={600}
|
onOk={this.memuSubmit}
|
confirmLoading={this.state.loading}
|
onCancel={() => {this.setState({handleMVisible: false})}}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={this.state.sysMenu}
|
inputSubmit={this.memuSubmit}
|
wrappedComponentRef={(inst) => this.menuFormRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
mainMenu: state.mainMenu,
|
menuTree: state.menuTree
|
}
|
}
|
|
const mapDispatchToProps = () => {
|
return {}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(EditMenu)
|
