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 } from 'antd'
|
import moment from 'moment'
|
|
import DragElement from './dragelement'
|
import MenuForm from './menuform'
|
import Utils from '@/utils/utils.js'
|
import Api from '@/api'
|
// import './index.scss'
|
|
const { confirm } = Modal
|
|
class EditMenu extends Component {
|
static propTpyes = {
|
menulist: PropTypes.any,
|
reload: PropTypes.func,
|
exitEdit: PropTypes.func
|
}
|
|
state = {
|
menulist: null,
|
editMenu: null, // 编辑菜单
|
visible: false, // 编辑菜单模态框
|
loading: false, // 提交中。。。
|
change: false
|
}
|
|
handlePreviewList = (List) => {
|
// 菜单顺序改变时，保存中间状态
|
this.setState({menulist: List, change: !is(fromJS(List), fromJS(this.props.menulist))})
|
}
|
|
editMenuModal = (Menu) => {
|
// 菜单编辑：修改
|
const menu = fromJS(Menu).toJS()
|
if (this.state.change) {
|
notification.warning({
|
top: 92,
|
message: '菜单顺序已调整，请保存！',
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
visible: true,
|
editMenu: menu.card,
|
loading: false
|
})
|
}
|
|
editMemuSubmit = () => {
|
// 编辑菜单：提交
|
this.editMenuFormRef.handleConfirm().then(param => {
|
param.func = 'sPC_MainMenu_Upt'
|
this.setState({
|
loading: true
|
})
|
Api.getCloudConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
loading: false,
|
visible: false,
|
editMenu: null
|
})
|
this.props.reload()
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}, () => {})
|
}
|
|
deleteMemu = (item) => {
|
if (this.state.change) {
|
notification.warning({
|
top: 92,
|
message: '菜单顺序已调整，请保存！',
|
duration: 5
|
})
|
return
|
}
|
|
let that = this
|
confirm({
|
title: `确定删除菜单《${item.MenuName}》吗？`,
|
content: '',
|
onOk() {
|
let param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: item.MenuID
|
}
|
return Api.getCloudConfig(param).then(res => {
|
if (res.status) {
|
that.props.reload()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
handleButton = (type) => {
|
const that = this
|
// 菜单编辑：添加，确定，取消
|
let _menuchange = !is(fromJS(this.state.menulist), fromJS(this.props.menulist))
|
|
if (type === 'confirm' && _menuchange) {
|
let param = {
|
func: 'sPC_Menu_SortUpt',
|
exec_type: 'x',
|
LText: this.state.menulist.map((item, index) => {
|
return 'select \'' + item.MenuID + '\' as Menuid,' + (index + 1) * 10 + ' as sort'
|
})
|
}
|
|
param.LText = param.LText.join(' union ')
|
param.LText = Utils.formatOptions(param.LText, 'x')
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt('', param.timestamp)
|
|
confirm({
|
title: '确认调整菜单顺序吗？',
|
content: '',
|
onOk() {
|
return Api.getCloudConfig(param).then(res => {
|
if (res.status) {
|
that.setState({ change: false })
|
that.props.reload()
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (type === 'cancel' && _menuchange) {
|
confirm({
|
title: '菜单顺序已调整，放弃保存吗？',
|
content: '',
|
onOk() {
|
that.props.exitEdit()
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.exitEdit()
|
}
|
}
|
|
UNSAFE_componentWillMount () {
|
this.setState({menulist: fromJS(this.props.menulist).toJS()})
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
|
this.setState({menulist: fromJS(nextProps.menulist).toJS(), change: false})
|
}
|
}
|
|
render () {
|
const { menulist, change } = this.state
|
|
return (
|
<>
|
<DndProvider backend={HTML5Backend}>
|
<DragElement
|
change={change}
|
list={menulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.editMenuModal}
|
deleteMemu={this.deleteMemu}
|
handleButton={this.handleButton}
|
/>
|
</DndProvider>
|
{/* 编辑菜单模态框 */}
|
<Modal
|
title="编辑菜单"
|
visible={this.state.visible}
|
onOk={this.editMemuSubmit}
|
confirmLoading={this.state.loading}
|
onCancel={() => this.setState({visible: false})}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={this.state.editMenu}
|
inputSubmit={this.editMemuSubmit}
|
wrappedComponentRef={(inst) => this.editMenuFormRef = inst}
|
/>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default EditMenu
|
