import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { notification, Modal, Button, Spin } from 'antd'
|
import moment from 'moment'
|
import TransferForm from '@/components/transferform'
|
import DragElement from '../dragelement'
|
import MenuForm from '../menuform'
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/header.js'
|
import enUS from '@/locales/en-US/header.js'
|
import Api from '@/api'
|
import './index.scss'
|
|
const { confirm } = Modal
|
let previewList = null
|
|
class EditMenu extends Component {
|
static propTpyes = {
|
menulist: PropTypes.any,
|
reload: PropTypes.func,
|
exitEdit: PropTypes.func
|
}
|
|
state = {
|
thawmenulist: null, // 已冻结的一级菜单
|
addMvisible: null,
|
editMenu: null, // 编辑菜单
|
editMvisible: false, // 编辑菜单模态框
|
thawMvisible: false, // 解除冻结模态框
|
confirmLoading: false, // 提交中。。。
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
}
|
|
handlePreviewList = (List) => {
|
// 菜单顺序改变时，保存中间状态
|
previewList = List
|
}
|
|
editMenuModal = (Menu) => {
|
// 菜单编辑：修改
|
const menu = fromJS(Menu).toJS()
|
if (previewList && !is(fromJS(previewList), fromJS(this.props.menulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 5
|
})
|
} else {
|
this.setState({
|
editMvisible: true,
|
editMenu: menu.card
|
})
|
}
|
}
|
|
editMemuSubmit = () => {
|
// 编辑菜单：提交
|
this.editMenuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_MainMenu_Upt'
|
this.setState({
|
confirmLoading: true
|
})
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
editMvisible: false,
|
editMenu: null
|
})
|
this.props.reload()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
editMemuCancel = () => {
|
// 编辑菜单：取消
|
this.setState({
|
confirmLoading: false,
|
editMvisible: false,
|
editMenu: null
|
})
|
}
|
|
addMemuSubmit = () => {
|
// 新建菜单：提交
|
this.addMenuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_MainMenu_Add'
|
param.Sort = (this.props.menulist.length + 1) * 10
|
this.setState({
|
confirmLoading: true
|
})
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
addMvisible: false,
|
})
|
this.props.reload()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
addMemuCancel = () => {
|
// 新建菜单：取消
|
this.setState({
|
confirmLoading: false,
|
addMvisible: false
|
})
|
}
|
|
deleteMemu = () => {
|
let _this = this
|
confirm({
|
title: this.state.dict['header.menu.close'].replace('@M', this.state.editMenu.MenuName),
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: _this.state.editMenu.MenuID
|
}
|
return Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
_this.setState({
|
editMvisible: false,
|
editMenu: null,
|
})
|
_this.props.reload()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
thawMemuSubmit = () => {
|
if (this.refs.trawmenu.state.targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.thawmenu.select'],
|
duration: 5
|
})
|
} else {
|
this.setState({
|
confirmLoading: true
|
})
|
let defers = this.refs.trawmenu.state.targetKeys.map(item => {
|
return new Promise((resolve) => {
|
Api.getSystemConfig({
|
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: 10
|
})
|
} else {
|
this.setState({
|
confirmLoading: false,
|
thawMvisible: false,
|
thawmenulist: null
|
})
|
this.props.reload()
|
}
|
})
|
}
|
}
|
|
thawMemuCancel = () => {
|
this.setState({
|
thawMvisible: false,
|
thawmenulist: null
|
})
|
}
|
|
|
handleButton = (type) => {
|
// 菜单编辑：添加，确定，取消
|
let _menuchange = previewList && !is(fromJS(previewList), fromJS(this.props.menulist))
|
if ((type === 'add' || type === 'thawmenu') && _menuchange) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 5
|
})
|
} else if (type === 'add') {
|
this.setState({
|
addMvisible: true
|
})
|
} else if (type === 'confirm' && _menuchange) {
|
let _this = this
|
let param = {
|
func: 'sPC_Menu_SortUpt',
|
LText: previewList.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') + '.000' // 时间戳
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp) // md5密钥
|
|
confirm({
|
title: this.state.dict['header.menu.resetorder'],
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
return Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
_this.props.reload()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (type === 'thawmenu') {
|
this.setState({
|
thawMvisible: true
|
})
|
Api.getSystemConfig({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: '0',
|
TYPE: 10
|
}).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: 5
|
})
|
}
|
})
|
} else {
|
this.props.exitEdit()
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
previewList = null
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
|
previewList = null
|
}
|
}
|
|
render () {
|
return (
|
<div className="header-edit-box">
|
<div className="mask">
|
<div className="tipcard card1">
|
拖动一级菜单可调整顺序，顺序调整后，请点击确定按钮保存。
|
</div>
|
<div className="tipcard card2">
|
鼠标经过菜单时会显示编辑图标，点击编辑可修改和删除菜单。
|
</div>
|
<div className="tipcard card3">
|
点击解除冻结按钮，可还原已删除的一级菜单。
|
</div>
|
<div className="tipcard card4">
|
点击添加图标，可新增一级菜单。
|
</div>
|
<div className="tipcard card5">
|
<p>编辑状态中，菜单之外区域会锁定，查看系统数据请点击。</p>
|
<div>
|
<a target="blank" href="#/main" >新页面</a>
|
</div>
|
</div>
|
</div>
|
{this.props.menulist && <DndProvider backend={HTML5Backend}>
|
<DragElement
|
dict={this.state.dict}
|
list={this.props.menulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.editMenuModal}
|
handleButton={this.handleButton}
|
/>
|
</DndProvider>}
|
{/* 新建菜单模态框 */}
|
<Modal
|
title={this.state.dict['header.menu.addtitle']}
|
okText={this.state.dict['header.confirm']}
|
cancelText={this.state.dict['header.cancel']}
|
visible={this.state.addMvisible}
|
onOk={this.addMemuSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.addMemuCancel}
|
destroyOnClose
|
>
|
<MenuForm
|
dict={this.state.dict}
|
type="add"
|
menu={null}
|
wrappedComponentRef={(inst) => this.addMenuFormRef = 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}
|
destroyOnClose
|
>
|
{!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
|
{this.state.thawmenulist && <TransferForm ref="trawmenu" menulist={this.state.thawmenulist}/>}
|
</Modal>
|
{/* 编辑菜单模态框 */}
|
<Modal
|
title={this.state.dict['header.menu.editTitle']}
|
visible={this.state.editMvisible}
|
footer={[
|
<Button key="cancel" onClick={this.editMemuCancel}>{this.state.dict['header.cancel']}</Button>,
|
<Button key="confirm" type="primary" onClick={this.editMemuSubmit} loading={this.state.confirmLoading}>{this.state.dict['header.confirm']}</Button>,
|
<Button key="delete" type="danger" onClick={this.deleteMemu}>{this.state.dict['header.delete']}</Button>
|
]}
|
onCancel={this.editMemuCancel}
|
destroyOnClose
|
>
|
<MenuForm
|
dict={this.state.dict}
|
type="edit"
|
menu={this.state.editMenu}
|
wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default EditMenu
|
