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, Icon, Col, Card, Tabs, Row, Input } from 'antd'
|
import Preview from '@/components/preview'
|
import TransferForm from '@/components/transferform'
|
import Utils from '@/utils/utils.js'
|
import DragElement from '../menuelement'
|
import asyncLoadComponent from '@/utils/asyncLoadComponent'
|
import Api from '@/api'
|
import zhCN from '@/locales/zh-CN/header.js'
|
import enUS from '@/locales/en-US/header.js'
|
import nortable from '@/assets/img/normaltable.jpg'
|
import './index.scss'
|
|
const ComTableConfig = asyncLoadComponent(() => import('@/templates/comtableconfig'))
|
const ModalConfig = asyncLoadComponent(() => import('@/templates/modalconfig'))
|
const { confirm } = Modal
|
const { TabPane } = Tabs
|
const { Search } = Input
|
const illust = {
|
CommonTable: nortable
|
}
|
let previewList = null
|
|
class EditMenu extends Component {
|
static propTpyes = {
|
menulist: PropTypes.any,
|
supMenuList: PropTypes.array,
|
supMenu: PropTypes.object,
|
reload: PropTypes.func,
|
exitEdit: PropTypes.func
|
}
|
|
state = {
|
show: true,
|
thawmenulist: null, // 已冻结的二级菜单
|
visible: null,
|
title: '',
|
type: '',
|
tabview: '', // 选择模板窗口（template）、基础表格配置（CommonTable）
|
formlist: null,
|
editMenu: null, // 编辑菜单
|
thawMvisible: false, // 解除冻结模态框
|
confirmLoading: false, // 提交中。。。
|
dict: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
selectTemp: '', // 选择模板
|
usedTemplates: null,
|
menuConfig: '',
|
tempSearchKey: '',
|
baseTemplates: [{
|
title: '基础表格',
|
type: 'CommonTable',
|
url: illust['CommonTable'],
|
baseconfig: ''
|
}]
|
}
|
|
handlePreviewList = (List) => {
|
// 菜单顺序改变时，保存中间状态
|
previewList = List
|
}
|
|
handleMenu = (menu) => {
|
// 菜单编辑：修改、删除
|
const _this = this
|
if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 10
|
})
|
} else if (menu.type === 'close') {
|
confirm({
|
title: this.state.dict['header.menu.close'].replace('@M', menu.card.text),
|
content: '',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
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: 10
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else if (menu.type === 'edit') {
|
let _menu = menu.card
|
let param = {
|
func: 'sPC_Get_LongParam',
|
MenuID: _menu.MenuID
|
}
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
let _LongParam = res.LongParam && window.decodeURIComponent(window.atob(res.LongParam))
|
try {
|
_LongParam = JSON.parse(_LongParam)
|
} catch (e) {
|
_LongParam = {
|
type: 'system',
|
setting: {},
|
search: [],
|
action: [],
|
columns: []
|
}
|
}
|
_menu.LongParam = _LongParam
|
_menu.ParentID = this.props.supMenu.MenuID
|
// console.log(_menu)
|
// 检测模板是否存在
|
let _Template = this.state.baseTemplates.filter(temp => temp.type === _menu.PageParam.Template)
|
this.setState({
|
type: 'edit',
|
editMenu: _menu,
|
tabview: _Template.length > 0 ? _menu.PageParam.Template : 'template'
|
})
|
if (_Template.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.template.empty'],
|
duration: 10
|
})
|
}
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
}
|
|
handleSubBtn = (type) => {
|
// 操作按钮：添加、解除冻结、确认及关闭
|
if (type === 'add') { // 点击添加时，展开模板
|
if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 10
|
})
|
return
|
}
|
this.setState({tabview: 'template', type: 'add'})
|
} else if (type === 'thaw') {
|
if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.presave'],
|
duration: 10
|
})
|
return
|
}
|
this.setState({
|
thawMvisible: true
|
})
|
Api.getSystemConfig({
|
func: 'sPC_Get_FrozenMenu',
|
ParentID: this.props.supMenu.MenuID,
|
TYPE: 30
|
}).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: 10
|
})
|
}
|
})
|
} else if (type === 'confirm') {
|
if (previewList && !is(fromJS(previewList), fromJS(this.state.subMenulist))) {
|
let _this = this
|
let param = {}
|
param.func = 'sPC_Menu_SortUpt'
|
param.LText = []
|
previewList.forEach((item, index) => {
|
param.LText.push('selectmspace\'' + item.MenuID + '\'mspaceasmspaceMenuid,' + (index + 1) * 10 + 'mspaceasmspacesort')
|
})
|
param.LText = param.LText.join('mspaceunionmspace')
|
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: 10
|
})
|
}
|
})
|
},
|
onCancel() {}
|
})
|
} else {
|
this.props.exitEdit()
|
}
|
} else if (type === 'close') {
|
this.props.exitEdit()
|
}
|
}
|
|
thawMemuSubmit = () => {
|
// 三级菜单解除冻结
|
if (this.refs.trawmenu.state.targetKeys.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.thawmenu.select'],
|
duration: 10
|
})
|
} 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: 15
|
})
|
} else {
|
this.setState({
|
confirmLoading: false,
|
thawMvisible: false,
|
thawmenulist: null
|
})
|
this.props.reload()
|
}
|
})
|
}
|
}
|
|
thawMemuCancel = () => {
|
// 解除冻结-取消
|
this.setState({
|
thawMvisible: false,
|
thawmenulist: null
|
})
|
}
|
|
previewPicture = (url) => {
|
// 图片预览
|
this.setState({
|
preview: url
|
})
|
}
|
|
cancelPrePicture = () => {
|
// 关闭图片预览
|
this.setState({
|
preview: null
|
})
|
}
|
|
useTemplate = (template) => {
|
const { type, editMenu } = this.state
|
|
// 选择模板：添加菜单时
|
if (type === 'add') {
|
this.setState({
|
tabview: template.type,
|
editMenu: {
|
MenuID: Utils.getuuid(),
|
MenuName: '',
|
MenuNo: '',
|
id: this.props.menulist.length,
|
src: '',
|
text: '',
|
type: template.type,
|
PageParam: {OpenType: 'newtab', Template: template.type},
|
LongParam: '',
|
ParentID: this.props.supMenu.MenuID
|
}
|
})
|
} else {
|
let _PageParam = {OpenType: editMenu.PageParam.OpenType || 'newtab', Template: template.type}
|
|
this.setState({
|
tabview: template.type,
|
editMenu: {...editMenu, ...{LongParam: template.baseconfig, PageParam: _PageParam, type: template.type}}
|
})
|
}
|
document.getElementById('root').style.overflowY = 'hidden'
|
}
|
|
getUsedTemplate = () => {
|
Api.getSystemConfig({func: 'sPC_Get_UserTemp'}).then(res => {
|
this.setState({
|
usedTemplates: res.UserTemp.map(temp => {
|
let _config = ''
|
if (temp.LongParam) {
|
_config = window.decodeURIComponent(window.atob(temp.LongParam))
|
try {
|
_config = JSON.parse(_config)
|
} catch (e) {
|
_config = ''
|
}
|
}
|
return {
|
title: temp.MenuName,
|
type: temp.Template,
|
url: illust[temp.Template],
|
baseconfig: _config
|
}
|
})
|
})
|
})
|
}
|
|
exittabview = () => {
|
this.setState({tabview: ''})
|
}
|
|
handleConfig = (type) => {
|
this.setState({tabview: type})
|
document.getElementById('root').style.overflowY = 'unset'
|
}
|
|
handleSubConfig = (item, originMenu, config) => {
|
if (item.OpenType === 'pop') {
|
// this.setState({
|
// editMenu: originMenu,
|
// tabview: 'Modal'
|
// })
|
}
|
console.log(item)
|
console.log(originMenu)
|
}
|
|
UNSAFE_componentWillMount () {
|
previewList = null
|
this.getUsedTemplate()
|
}
|
|
UNSAFE_componentWillReceiveProps (nextProps) {
|
if (!is(fromJS(this.props.menulist), fromJS(nextProps.menulist))) {
|
previewList = null
|
this.setState({show: false})
|
setTimeout(() => {
|
this.setState({show: true})
|
}, 10)
|
}
|
}
|
|
render () {
|
return (
|
<div className="third-edit-box">
|
<div className="cus-submenu-title">
|
<Icon type={this.props.supMenu.PageParam.Icon} />
|
<span>{this.props.supMenu.text}</span>
|
</div>
|
{this.state.show && <DndProvider backend={HTML5Backend}>
|
<DragElement
|
list={this.props.menulist}
|
handlePreviewList={this.handlePreviewList}
|
handleMenu={this.handleMenu}
|
/>
|
</DndProvider>}
|
<div className="menu-add" onClick={() => {this.handleSubBtn('add')}}>
|
<Icon type="plus" />
|
</div>
|
<div className="menu-btn">
|
<Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{this.state.dict['header.thawmenu']}</Button>
|
<Button type="primary" onClick={() => {this.handleSubBtn('confirm')}}>{this.state.dict['header.confirm']}</Button>
|
<Button onClick={() => {this.handleSubBtn('close')}}>{this.state.dict['header.close']}</Button>
|
</div>
|
{this.state.tabview === 'template' &&
|
<div className="editboard">
|
<div className="workplace">
|
<Button className="top-btn" onClick={this.exittabview}>{this.state.dict['header.cancel']}</Button>
|
{this.state.tabview === 'template' && <Tabs defaultActiveKey="1">
|
<TabPane tab="系统模板" key="1">
|
<Row>
|
{this.state.baseTemplates.map(template => {
|
return (
|
<Col key={template.type} span={8}>
|
<Card
|
title={template.title}>
|
<img onClick={() => {this.previewPicture(template.url)}} src={template.url} alt=""/>
|
<div className="card-operation">
|
{/* <Button type="primary" onClick={() => {this.previewPicture(template.url)}}>预览</Button> */}
|
<Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
|
</div>
|
</Card>
|
</Col>
|
)
|
})}
|
</Row>
|
</TabPane>
|
<TabPane tab="已使用模板" key="2">
|
<Row>
|
<Col span={8}>
|
<Search placeholder="请输入菜单名称" defaultValue={this.state.tempSearchKey} onSearch={value => {this.setState({tempSearchKey: value})}} enterButton />
|
</Col>
|
</Row>
|
<Row>
|
{this.state.usedTemplates && this.state.usedTemplates.map((template, index) => {
|
if (template.title.toLowerCase().indexOf(this.state.tempSearchKey.toLowerCase()) >= 0) {
|
return (
|
<Col key={template.type + index} span={8}>
|
<Card
|
title={template.title}>
|
<img onClick={() => {this.previewPicture(template.url)}} src={template.url} alt=""/>
|
<div className="card-operation">
|
{/* <Button type="primary" onClick={() => {this.previewPicture(template.url)}}>预览</Button> */}
|
<Button type="primary" onClick={() => {this.useTemplate(template)}}>使用模板</Button>
|
</div>
|
</Card>
|
</Col>
|
)
|
} else {
|
return ''
|
}
|
})}
|
</Row>
|
</TabPane>
|
</Tabs>}
|
</div>
|
</div>}
|
{this.state.tabview === 'CommonTable' &&
|
<ComTableConfig
|
type={this.state.type}
|
menu={this.state.editMenu}
|
supMenuList={this.props.supMenuList}
|
handleConfig={this.handleConfig}
|
handleSubConfig={this.handleSubConfig}
|
/>
|
}
|
{this.state.tabview === 'Modal' &&
|
<ModalConfig
|
menu={this.state.editMenu}
|
supMenu={this.props.supMenu}
|
supMenuList={this.props.supMenuList}
|
handleConfig={this.handleConfig}
|
/>
|
}
|
{/* 图片预览 */}
|
<Preview cancel={this.cancelPrePicture} preview={this.state.preview}/>
|
{/* 解冻菜单模态框 */}
|
<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}
|
>
|
{!this.state.thawmenulist && <Spin style={{marginLeft: 'calc(50% - 22px)', marginTop: '70px', marginBottom: '70px'}} size="large" />}
|
{this.state.thawmenulist && <TransferForm ref="trawmenu" dict={this.state.dict} menulist={this.state.thawmenulist}/>}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default EditMenu
|
