import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Modal, notification, Col, Card, Tabs, Row, Input, Button } from 'antd'
|
import { PlusOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import { sysTemps } from '@/utils/option.js'
|
import MKEmitter from '@/utils/events.js'
|
import Utils from '@/utils/utils.js'
|
import Preview from './preview'
|
import MenuUtils from '@/utils/utils-custom.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
|
import mainsubtable from '@/assets/img/mainsubtable.jpg'
|
import treepage from '@/assets/img/treepage.jpg'
|
import calendar from '@/assets/img/calendar.jpg'
|
import customImg from '@/assets/img/custom.jpg'
|
|
import './index.scss'
|
|
const MenuForm = asyncComponent(() => import('../thdmenuform'))
|
const { TabPane } = Tabs
|
const { Search } = Input
|
|
class ThdMenuAdd extends Component {
|
static propTpyes = {
|
mainMenu: PropTypes.object,
|
supMenu: PropTypes.object,
|
menuTree: PropTypes.array,
|
Type: PropTypes.string
|
}
|
|
state = {
|
sysTemplates: [],
|
usedTemplates: [],
|
tempSearchKey: '',
|
addVisible: false,
|
preview: null,
|
visible: false,
|
sysMenu: null,
|
loading: false
|
}
|
|
UNSAFE_componentWillMount() {
|
this.getUsedTemplate()
|
}
|
|
getUsedTemplate = () => {
|
let { sysTemplates } = this.state
|
let memberLevel = Utils.getMemberLevel()
|
const illust = { // 模板图片，用于已使用模板
|
CommonTable: mainsubtable,
|
TreePage: treepage,
|
CalendarPage: calendar,
|
CustomPage: customImg
|
}
|
|
Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'menu'}).then(res => {
|
let _templates = []
|
|
res.UserTemp.forEach(temp => {
|
if (!['CommonTable', 'TreePage', 'CalendarPage', 'CustomPage'].includes(temp.Template)) {
|
return
|
} else if (temp.Template === 'CustomPage' && memberLevel < 20) {
|
temp.disabled = true
|
temp.disTitle = '会员等级不够，无开发权限。'
|
}
|
|
_templates.push({
|
uuid: temp.MenuID,
|
title: temp.MenuName,
|
MenuNo: temp.MenuNo,
|
type: temp.Template,
|
url: illust[temp.Template],
|
disabled: temp.disabled || false,
|
disTitle: temp.disTitle || ''
|
})
|
})
|
|
sysTemplates = sysTemps.map(temp => {
|
if (temp.type === 'CustomPage' && memberLevel < 20) {
|
temp.disabled = true
|
temp.disTitle = '会员等级不够，无开发权限。'
|
}
|
|
return temp
|
})
|
|
this.setState({
|
usedTemplates: _templates,
|
sysTemplates: sysTemplates
|
})
|
})
|
}
|
|
trigger = () => {
|
this.setState({
|
visible: true
|
})
|
document.getElementById('root').style.overflowY = 'hidden'
|
}
|
|
previewPicture = (template) => {
|
if (template.disabled) return
|
// 图片预览
|
this.setState({
|
preview: template.url,
|
pretemplate: template
|
})
|
}
|
|
cancelPrePicture = () => {
|
// 关闭图片预览
|
this.setState({
|
preview: null
|
})
|
}
|
|
useTemplate = (template) => {
|
const { mainMenu, supMenu, menuTree } = this.props
|
|
let sysMenu = {
|
MenuID: Utils.getuuid(),
|
MenuName: template.title,
|
Template: template.type,
|
fstMenuId: mainMenu.MenuID,
|
ParentId: supMenu.MenuID,
|
menuSort: (supMenu.children.length + 1) * 10,
|
copyId: template.uuid || '',
|
fstMenuList: menuTree,
|
supMenuList: mainMenu.children
|
}
|
|
this.setState({
|
visible: false
|
}, () => {
|
this.setState({
|
addVisible: true,
|
sysMenu: sysMenu
|
})
|
document.getElementById('root').style.overflowY = 'unset'
|
})
|
}
|
|
memuSubmit = () => {
|
const { sysMenu } = this.state
|
|
this.menuFormRef.handleConfirm().then(values => {
|
let PageParam = {
|
Template: sysMenu.Template,
|
OpenType: 'newtab'
|
}
|
|
if (sysMenu.Template === 'NewPage') {
|
PageParam.OpenType = 'NewPage'
|
PageParam.url = values.url
|
}
|
|
if (sysMenu.copyId && sysMenu.Template !== 'CustomPage') {
|
PageParam.copyMenuId = sysMenu.copyId
|
}
|
|
let param = {
|
func: 'sPC_TrdMenu_AddUpt',
|
FstID: values.fstMenuId,
|
SndID: values.ParentID,
|
ParentID: values.ParentID,
|
MenuID: sysMenu.MenuID,
|
MenuNo: values.MenuNo,
|
Template: sysMenu.Template,
|
MenuName: values.MenuName,
|
PageParam: JSON.stringify(PageParam),
|
LongParam: '',
|
LText: '',
|
LTexttb: '',
|
Sort: sysMenu.menuSort
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
this.setState({
|
loading: true
|
})
|
|
if (sysMenu.Template === 'CustomPage' && sysMenu.copyId) {
|
this.copyMenu(param, sysMenu.copyId)
|
} else {
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
loading: false,
|
addVisible: false,
|
sysMenu: null
|
})
|
|
MKEmitter.emit('mkUpdateMenuList')
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
})
|
}
|
|
copyMenu = (param, MenuId) => {
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: MenuId
|
}).then(result => {
|
if (result.status) {
|
let config = null
|
|
try {
|
config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null
|
} catch (e) {
|
console.warn('Parse Failure')
|
config = null
|
}
|
|
if (config) {
|
config.uuid = param.MenuID
|
config.MenuID = param.MenuID
|
config.parentId = param.ParentID
|
config.MenuName = param.MenuName
|
config.MenuNo = param.MenuNo
|
config.easyCode = ''
|
config.components = MenuUtils.resetConfig(config.components)
|
config.enabled = false
|
|
param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config)))
|
}
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
loading: false,
|
addVisible: false,
|
sysMenu: null
|
})
|
|
MKEmitter.emit('mkUpdateMenuList')
|
document.getElementById('root').style.overflowY = 'unset'
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
}
|
})
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
render() {
|
const { visible, loading, tempSearchKey } = this.state
|
|
return (
|
<>
|
<PlusOutlined onClick={this.trigger}/>
|
<Modal
|
className="mk-template-modal"
|
visible={visible}
|
onOk={this.submit}
|
onCancel={() => this.setState({visible: false}, () => {document.getElementById('root').style.overflowY = 'unset'})}
|
destroyOnClose
|
>
|
<Tabs defaultActiveKey="1">
|
<TabPane tab="系统模板" key="1">
|
<Row>
|
{this.state.sysTemplates.map((template, index) => {
|
return (
|
<Col key={`${index}`} className={template.disabled ? 'disabled' : ''} title={template.disTitle || ''} span={8}>
|
<Card
|
title={template.title}>
|
<img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
|
<div className="card-operation">
|
<Button type="primary" onClick={() => {this.useTemplate(template, 'sys')}}>使用模板</Button>
|
</div>
|
</Card>
|
</Col>
|
)
|
})}
|
</Row>
|
</TabPane>
|
<TabPane tab="已使用模板" key="2">
|
<Row>
|
<Col span={8}>
|
<Search placeholder="请输入菜单名称" defaultValue={''} onSearch={value => {this.setState({tempSearchKey: value})}} enterButton />
|
</Col>
|
</Row>
|
<Row>
|
{this.state.usedTemplates.map((template, index) => {
|
if (tempSearchKey) {
|
if ((template.title + template.MenuNo).toLowerCase().indexOf(tempSearchKey.toLowerCase()) === -1) {
|
return null
|
}
|
}
|
|
return (
|
<Col key={template.type + index} className={template.disabled ? 'disabled' : ''} title={template.disTitle || ''} span={6}>
|
<Card title={<div className="title-wrap"><div>{template.title}</div><div>{template.MenuNo}</div></div>}>
|
<img onClick={() => {this.previewPicture(template)}} src={template.url} alt=""/>
|
<div className="card-operation">
|
<Button type="primary" onClick={() => {this.useTemplate(template, 'user')}}>使用模板</Button>
|
</div>
|
</Card>
|
</Col>
|
)
|
})}
|
</Row>
|
</TabPane>
|
</Tabs>
|
{/* 图片预览 */}
|
<Preview cancel={this.cancelPrePicture} preview={this.state.preview} template={this.state.pretemplate} confirm={this.useTemplate}/>
|
</Modal>
|
{/* 添加系统菜单 */}
|
<Modal
|
title="添加菜单"
|
visible={this.state.addVisible}
|
width={600}
|
onOk={this.memuSubmit}
|
confirmLoading={loading}
|
onCancel={() => {this.setState({addVisible: false})}}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={this.state.sysMenu}
|
inputSubmit={this.memuSubmit}
|
wrappedComponentRef={(inst) => this.menuFormRef = inst}
|
/>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default ThdMenuAdd
|
