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 { PlusOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
import TransferForm from '@/templates/zshare/basetransferform'
|
import Utils from '@/utils/utils.js'
|
import DragElement from '../menuelement'
|
import MenuForm from '../menuform'
|
import Api from '@/api'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import './index.scss'
|
|
import card1 from '@/assets/img/card-bg2.jpg'
|
import card2 from '@/assets/img/card-bg5.jpg'
|
import card3 from '@/assets/img/card-bg8.jpg'
|
import card4 from '@/assets/img/card-bg7.jpg'
|
import card5 from '@/assets/img/card-bg6.jpg'
|
|
const { confirm } = Modal
|
|
class EditMenu extends Component {
|
static propTpyes = {
|
menulist: PropTypes.any, // 二级菜单列表
|
menuTree: PropTypes.array, // 一级菜单列表
|
supMenu: PropTypes.object, // 二级菜单所对应的一级菜单
|
reload: PropTypes.func, // 刷新二级菜单数据
|
exitEdit: PropTypes.func // 退出编辑
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
menulist: null, // 菜单列表
|
type: '', // 编辑类型，add or edit
|
title: '', // 模态框标题
|
visible: null, // 模态框是否可见
|
formlist: null, // 表单信息
|
editMenu: null, // 编辑菜单
|
thawmenulist: null, // 已冻结的二级菜单
|
thawMvisible: false, // 解除冻结模态框
|
confirmLoading: false, // 提交中。。。
|
targetKeys: [] // 解冻菜单列表
|
}
|
|
handlePreviewList = (List) => {
|
this.setState({
|
menulist: List
|
})
|
}
|
|
handleMenu = (menu) => {
|
const { dict } = this.state
|
|
// 菜单编辑：修改、删除，如菜单顺序已改变，提示保存菜单顺序
|
const _this = this
|
if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
|
notification.warning({
|
top: 92,
|
message: dict['model.menu.presave'],
|
duration: 5
|
})
|
} else 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) {
|
_this.props.reload()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (menu.type === 'edit') {
|
this.setState({
|
visible: true,
|
title: dict['model.edit'] + dict['model.menu'],
|
type: 'edit',
|
editMenu: menu.card,
|
formlist: [
|
{ // 父级菜单
|
type: 'select',
|
key: 'parentId',
|
label: dict['model.super'] + dict['model.menu'],
|
initVal: this.props.supMenu.MenuID,
|
required: true,
|
options: this.props.menuTree
|
},
|
{ // 菜单名称
|
type: 'text',
|
key: 'menuName',
|
label: dict['model.menu'] + dict['model.name'],
|
initVal: menu.card.MenuName,
|
required: true,
|
readonly: false
|
},
|
{ // 菜单图标
|
type: 'icon',
|
key: 'icon',
|
label: dict['model.icon'],
|
initVal: menu.card.PageParam.Icon || 'folder',
|
required: true
|
}
|
]
|
})
|
}
|
}
|
|
handleSubBtn = (type) => {
|
const { dict } = this.state
|
|
// 操作按钮
|
if (type === 'add') { // 添加新菜单
|
this.setState({
|
visible: true,
|
title: dict['model.add'] + dict['model.menu'],
|
type: 'add',
|
formlist: [
|
{ // 父级菜单
|
type: 'select',
|
key: 'parentId',
|
label: dict['model.super'] + dict['model.menu'],
|
initVal: this.props.supMenu.MenuID,
|
required: true,
|
options: this.props.menuTree
|
},
|
{ // 菜单名称
|
type: 'text',
|
key: 'menuName',
|
label: dict['model.menu'] + dict['model.name'],
|
initVal: '',
|
required: true,
|
readonly: false
|
},
|
{ // 菜单图标
|
type: 'icon',
|
key: 'icon',
|
label: dict['model.icon'],
|
initVal: 'folder',
|
required: true
|
}
|
]
|
})
|
} else if (type === 'thaw') { // 解冻已有菜单
|
this.setState({
|
thawMvisible: true,
|
targetKeys: []
|
})
|
Api.getSystemConfig({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: this.props.supMenu.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: 5
|
})
|
}
|
})
|
} else if (type === 'confirm') { // 确定时入顺序改变，则提示保存，否则退出编辑
|
if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
|
let _this = this
|
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: this.state.dict['model.menu.resetorder'],
|
content: '',
|
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 {
|
this.props.exitEdit()
|
}
|
} else if (type === 'close') { // 退出编辑
|
if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
|
let _this = this
|
|
confirm({
|
title: '菜单顺序已调整，放弃保存吗？',
|
content: '',
|
onOk() {
|
_this.props.exitEdit()
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.exitEdit()
|
}
|
}
|
}
|
|
memuHandleSubmit = () => {
|
if (this.state.type === 'add') { // 新建菜单：提交
|
this.menuFormRef.handleConfirm().then(values => {
|
let param = {
|
ParentID: values.parentId,
|
MenuID: Utils.getuuid(),
|
MenuName: values.menuName,
|
PageParam: JSON.stringify({
|
Icon: values.icon
|
})
|
}
|
param.func = 'sPC_SndMenu_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,
|
visible: false
|
})
|
this.props.reload()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
} else if (this.state.type === 'edit') { // 编辑菜单：提交
|
this.menuFormRef.handleConfirm().then(values => {
|
let param = {
|
func: 'sPC_SndMenu_Upt',
|
ParentID: values.parentId,
|
MenuID: this.state.editMenu.MenuID,
|
MenuName: values.menuName,
|
PageParam: JSON.stringify({
|
Icon: values.icon
|
})
|
}
|
this.setState({
|
confirmLoading: true
|
})
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
confirmLoading: false,
|
visible: false
|
})
|
this.props.reload()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
}
|
}
|
|
memuHandleCancel = () => { // 取消操作，关闭模态框
|
this.setState({
|
visible: false,
|
type: '',
|
formlist: null,
|
editMenu: null
|
})
|
}
|
|
thawMemuSubmit = () => { // 解冻菜单，提交，存在多个时，循环提交
|
const { targetKeys } = this.state
|
|
if (targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['form.required.select'] + this.state.dict['model.menu'],
|
duration: 5
|
})
|
} else {
|
this.setState({
|
confirmLoading: true
|
})
|
let defers = 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,
|
targetKeys: [],
|
thawmenulist: null
|
})
|
this.props.reload()
|
}
|
})
|
}
|
}
|
|
thawMemuCancel = () => { // 解冻菜单取消
|
this.setState({
|
thawMvisible: false,
|
targetKeys: [],
|
thawmenulist: null
|
})
|
}
|
|
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
|
})
|
}
|
}
|
|
render () {
|
const { dict } = this.state
|
|
return (
|
<div className="second-edit-box">
|
<div className="mask">
|
<div className="tipcard card1" style={{backgroundImage: 'url(' + card1 + ')'}}>
|
拖动二级菜单可调整顺序，顺序调整后，请点击确定按钮保存。
|
</div>
|
<div className="tipcard card2" style={{backgroundImage: 'url(' + card2 + ')'}}>
|
点击编辑图标可修改菜单属性，点击删除图标可删除菜单。
|
</div>
|
<div className="tipcard card3" style={{backgroundImage: 'url(' + card3 + ')'}}>
|
点击解除冻结按钮，可还原已删除的二级菜单。
|
</div>
|
<div className="tipcard card4" style={{backgroundImage: 'url(' + card4 + ')'}}>
|
点击添加图标，可新增二级菜单。
|
</div>
|
<div className="tipcard card5" style={{backgroundImage: 'url(' + card5 + ')'}}>
|
<p>编辑状态中，菜单之外区域会锁定，查看系统数据请点击。</p>
|
<div>
|
<span className="new-view" onClick={() => {window.open('#/main')}} >新页面</span>
|
</div>
|
</div>
|
</div>
|
<DndProvider backend={HTML5Backend}>
|
{this.state.menulist && this.state.menulist.length > 0 ? <DragElement
|
list={this.state.menulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.handleMenu}
|
/> : null}
|
</DndProvider>
|
<div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
|
<PlusOutlined />
|
</div>
|
<div className="menu-btn">
|
<Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{dict['model.thaw'] + dict['model.menu']}</Button>
|
<Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{dict['model.confirm']}</Button>
|
<Button onClick={() => {this.handleSubBtn('close')}}>{dict['model.close']}</Button>
|
</div>
|
<Modal
|
title={this.state.title}
|
visible={this.state.visible}
|
onOk={this.memuHandleSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={this.memuHandleCancel}
|
destroyOnClose
|
>
|
{this.state.formlist ?
|
<MenuForm
|
dict={dict}
|
inputSubmit={this.memuHandleSubmit}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.menuFormRef = inst}
|
/> : null}
|
</Modal>
|
<Modal
|
title={dict['model.thaw'] + dict['model.menu']}
|
width={600}
|
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 onChange={(vals) => this.setState({targetKeys: vals})} menulist={this.state.thawmenulist}/>}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default EditMenu
|
