import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { connect } from 'react-redux'
|
import { DndProvider } from 'react-dnd'
|
import { withRouter } from 'react-router-dom'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { notification, Modal, Button, Spin, Icon, Col, Card, Tabs, Row, Input } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import { sysTemps } from '@/utils/option.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
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 Preview from './preview'
|
import MenuForm from './menuform'
|
import TransferForm from '@/templates/zshare/basetransferform'
|
import Utils from '@/utils/utils.js'
|
import MenuUtils from '@/menu/utils/menuUtils.js'
|
import DragElement from '../menuelement'
|
import asyncLoadComponent from '@/utils/asyncLoadComponent'
|
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 ComTableConfig = asyncLoadComponent(() => import('@/templates/comtableconfig'))
|
const TreePageConfig = asyncLoadComponent(() => import('@/templates/treepageconfig'))
|
const CalendarPageConfig = asyncLoadComponent(() => import('@/templates/calendarconfig'))
|
const FormTabConfig = asyncLoadComponent(() => import('@/templates/formtabconfig'))
|
const ModalConfig = asyncLoadComponent(() => import('@/templates/modalconfig'))
|
const SubTable = asyncLoadComponent(() => import('@/templates/subtableconfig'))
|
|
const { confirm } = Modal
|
const { TabPane } = Tabs
|
const { Search } = Input
|
|
class EditMenu extends Component {
|
static propTpyes = {
|
reload: PropTypes.func, // 菜单修改后刷新
|
menulist: PropTypes.any, // 三级菜单列表
|
exitEdit: PropTypes.func, // 退出编辑状态
|
supMenu: PropTypes.object, // 对应的上级菜单
|
supMenuList: PropTypes.array // 上级菜单列表，用于三级菜单切换上级菜单
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
thawmenulist: null, // 已冻结的二级菜单
|
type: '', // 操作类型，新建或编辑菜单
|
thawMvisible: false, // 解除冻结模态框
|
confirmLoading: false, // 提交中。。。
|
selectTemp: '', // 选择模板
|
usedTemplates: null, // 已使用模板列表
|
tempSearchKey: '', // 菜单名称过滤值
|
loading: false, // 编辑菜单或使用已使用模板时，获取配置信息
|
preview: null, // 图片预览url
|
pretemplate: null, // 预览模板
|
btnParam: null, // 编辑按钮的配置信息
|
menulist: null, // 编辑中的菜单
|
sysTemplates: sysTemps, // 系统模板
|
tabview: '', // 选择模板窗口（template）、基础表格配置（CommonTable）、表单（Modal）、子表（SubTable）
|
editMenu: null, // 编辑菜单
|
editAction: null, // 编辑按钮
|
editTab: null, // 编辑标签
|
tabConfig: null, // 标签配置信息
|
editSubTab: null, // 编辑子标签（标签中的标签）
|
subTabConfig: null, // 子标签配置信息
|
subConfig: null, // 子配置信息
|
btnTab: null, // 打开新标签或当前页面刷新的按钮
|
btnTabConfig: null, // 打开新标签按钮配置
|
handleMVisible: false, // 添加或修改菜单模态框（角色权限分配等）
|
sysMenu: false, // 添加或编辑菜单（角色权限分配等）
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
/**
|
* @description 菜单顺序改变时，保存中间状态
|
*/
|
handlePreviewList = (List) => {
|
this.setState({
|
menulist: List
|
})
|
}
|
|
/**
|
* @description 菜单编辑：修改、删除
|
* 1、菜单修改或删除时，先查看菜单顺序是否改变
|
* 2、菜单删除
|
* 3、菜单编辑，查询菜单配置信息，信息正确，进入对应编辑页面
|
*/
|
handleMenu = (menu) => {
|
const _this = this
|
|
if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['model.menu.presave'],
|
duration: 5
|
})
|
} else if (menu.type === 'close') {
|
confirm({
|
title: this.state.dict['model.menu.close'].replace('@M', 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') {
|
let _menu = fromJS(menu.card).toJS()
|
|
if (_menu.PageParam && (_menu.PageParam.Template === 'RolePermission' || _menu.PageParam.Template === 'NewPage')) { // 单页面修改
|
_menu.Template = _menu.PageParam.Template
|
_menu.url = _menu.PageParam.url
|
|
_menu.fstMenuId = _menu.FstId
|
_menu.supMenuList = this.props.supMenuList
|
_menu.fstMenuList = this.props.menuTree
|
|
this.setState({
|
handleMVisible: true,
|
sysMenu: _menu
|
})
|
|
return
|
}
|
|
|
let param = {
|
func: 'sPC_Get_LongParam',
|
MenuID: _menu.MenuID
|
}
|
|
this.setState({
|
loading: true
|
})
|
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
let _LongParam = ''
|
if (res.LongParam) {
|
try {
|
_LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_LongParam = ''
|
}
|
}
|
|
_menu.LongParam = _LongParam
|
_menu.fstMenuId = _menu.FstId
|
_menu.supMenuList = this.props.supMenuList
|
_menu.fstMenuList = this.props.menuTree
|
_menu.open_edition = res.open_edition || ''
|
|
// 检测模板是否存在
|
let _Template = this.state.sysTemplates.filter(temp => temp.type === _menu.PageParam.Template)
|
|
// 模板不存在时错误提示
|
if (_Template.length === 0) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['model.menu.template.empty'],
|
duration: 5
|
})
|
|
this.setState({
|
type: 'edit',
|
editMenu: _menu,
|
loading: false,
|
tabview: 'template'
|
}, () => {
|
document.getElementById('root').style.overflowY = 'hidden'
|
})
|
} else {
|
this.setState({
|
type: 'edit',
|
editMenu: _menu,
|
loading: false,
|
tabview: _menu.PageParam.Template
|
}, () => {
|
document.getElementById('root').style.overflowY = 'hidden'
|
})
|
}
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
}
|
|
handleSubBtn = (type) => {
|
// 操作按钮：添加、解除冻结、确认及关闭
|
if (type === 'add') { // 点击添加时，展开模板
|
if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['model.menu.presave'],
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
tabview: 'template',
|
editMenu: {
|
MenuID: Utils.getuuid(),
|
MenuName: '',
|
MenuNo: '',
|
type: '',
|
PageParam: '',
|
LongParam: '',
|
isSubtable: '', // 是否为主子表
|
ParentId: this.props.supMenu.MenuID,
|
supMenuList: this.props.supMenuList,
|
fstMenuId: this.props.mainMenu.MenuID,
|
fstMenuList: this.props.menuTree,
|
menuSort: (this.props.menulist.length + 1) * 10 // 新建菜单设置排序
|
}
|
}, () => {
|
document.getElementById('root').style.overflowY = 'hidden'
|
})
|
} else if (type === 'thaw') {
|
if (!is(fromJS(this.props.menulist), fromJS(this.state.menulist))) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['model.menu.presave'],
|
duration: 5
|
})
|
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: 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()
|
}
|
}
|
}
|
|
thawMemuSubmit = () => {
|
// 三级菜单解除冻结
|
if (this.refs.trawmenu.state.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 = 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
|
})
|
}
|
|
previewPicture = (template) => {
|
// 图片预览
|
this.setState({
|
preview: template.url,
|
pretemplate: template
|
})
|
}
|
|
cancelPrePicture = () => {
|
// 关闭图片预览
|
this.setState({
|
preview: null
|
})
|
}
|
|
/**
|
* @description 使用模板
|
* 1、使用系统模板时，使用系统配置
|
* 2、使用已有菜单模板时，获取菜单配置信息，标记为user（复制菜单按钮）
|
*/
|
useTemplate = (template, useType) => {
|
let editMenu = fromJS(this.state.editMenu).toJS()
|
|
editMenu.fstMenuId = this.props.mainMenu.MenuID
|
editMenu.fstMenuList = this.props.menuTree
|
|
if (useType === 'sys' && (template.type === 'RolePermission' || template.type === 'NewPage')) { // 独立页面
|
let _menu = {
|
...editMenu,
|
MenuID: Utils.getuuid(),
|
MenuName: template.title,
|
Template: template.type,
|
ParentId: this.props.supMenu.MenuID,
|
menuSort: (this.props.menulist.length + 1) * 10,
|
isSystem: true
|
}
|
|
this.setState({
|
handleMVisible: true,
|
sysMenu: _menu
|
})
|
return
|
} else if (template.type === 'CustomPage') {
|
let _menu = {
|
...editMenu,
|
MenuID: Utils.getuuid(),
|
MenuName: template.title,
|
Template: template.type,
|
ParentId: this.props.supMenu.MenuID,
|
OriginMenuId: template.uuid || '',
|
menuSort: (this.props.menulist.length + 1) * 10,
|
isSystem: true
|
}
|
|
this.setState({
|
handleMVisible: true,
|
sysMenu: _menu
|
})
|
return
|
}
|
|
new Promise(resolve => {
|
if (useType === 'sys') {
|
resolve(true)
|
} else {
|
let param = {
|
func: 'sPC_Get_LongParam',
|
MenuID: template.uuid
|
}
|
this.setState({
|
loading: true
|
})
|
|
Api.getSystemConfig(param).then(result => {
|
if (!result.status) {
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
resolve(false)
|
} else {
|
let _config = ''
|
if (result.LongParam) {
|
try {
|
_config = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
|
_config.type = 'user'
|
} catch (e) {
|
console.warn('Parse Failure')
|
_config = ''
|
}
|
}
|
|
if (_config) {
|
template.baseconfig = _config
|
resolve(true)
|
} else {
|
notification.warning({
|
top: 92,
|
message: '模板信息获取失败！',
|
duration: 5
|
})
|
resolve(false)
|
}
|
}
|
})
|
}
|
}).then(res => {
|
if (!res) { // 错误时，重置状态
|
this.setState({
|
loading: false
|
})
|
return
|
}
|
|
// 选择模板：添加菜单时(不存在menuId)
|
let _PageParam = {
|
OpenType: editMenu.PageParam ? editMenu.PageParam.OpenType : 'newtab',
|
Template: template.type
|
}
|
|
this.setState({
|
loading: false,
|
tabview: template.type,
|
editMenu: {
|
...editMenu,
|
type: template.type,
|
PageParam: _PageParam,
|
LongParam: template.baseconfig,
|
isSubtable: template.isSubtable
|
}
|
})
|
|
document.getElementById('root').style.overflowY = 'hidden'
|
})
|
}
|
|
getUsedTemplate = () => {
|
const { memberLevel } = this.props
|
let { sysTemplates } = this.state
|
const illust = { // 模板图片，用于已使用模板
|
CommonTable: mainsubtable,
|
TreePage: treepage,
|
CalendarPage: calendar,
|
CustomPage: customImg
|
}
|
|
Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'menu'}).then(res => {
|
let _templates = []
|
let hasRolePermission = false
|
|
res.UserTemp.forEach(temp => {
|
if (temp.Template === 'NewPage') {
|
return
|
} else if (temp.Template === 'RolePermission') {
|
hasRolePermission = true
|
return
|
} else if (temp.Template === 'CustomPage' && memberLevel < 20) {
|
return
|
}
|
|
_templates.push({
|
uuid: temp.MenuID,
|
title: temp.MenuName,
|
type: temp.Template,
|
url: illust[temp.Template]
|
})
|
})
|
|
sysTemplates = sysTemplates.map(temp => {
|
if (temp.type === 'RolePermission' && !hasRolePermission) {
|
temp.hidden = false
|
} else if (temp.type === 'CustomPage' && memberLevel < 20) {
|
temp.hidden = true
|
}
|
|
return temp
|
})
|
|
this.setState({
|
usedTemplates: _templates,
|
sysTemplates: sysTemplates
|
})
|
})
|
}
|
|
exittabview = () => {
|
this.setState({tabview: ''})
|
document.getElementById('root').style.overflowY = 'unset'
|
}
|
|
handleView = (param) => {
|
this.setState({
|
tabview: ''
|
}, () => {
|
if (param) {
|
this.setState(param)
|
document.getElementById('root').style.overflowY = 'hidden'
|
} else {
|
document.getElementById('root').style.overflowY = 'unset'
|
}
|
})
|
}
|
|
/**
|
* @description 三级菜单添加或修改
|
*/
|
memuSubmit = () => {
|
const { sysMenu } = this.state
|
let sysTemplates = fromJS(this.state.sysTemplates).toJS()
|
|
// 角色权限分配模板，只可以添加一次
|
if (sysMenu.isSystem && sysMenu.Template === 'RolePermission') {
|
sysTemplates = sysTemplates.map(temp => {
|
if (temp.type === sysMenu.type) {
|
temp.hidden = true
|
}
|
|
return temp
|
})
|
}
|
|
this.menuFormRef.handleConfirm().then(res => {
|
let PageParam = {
|
Template: sysMenu.Template,
|
OpenType: 'newtab'
|
}
|
|
if (sysMenu.Template === 'NewPage') {
|
PageParam.OpenType = 'NewPage'
|
PageParam.url = res.url
|
}
|
|
let param = {
|
func: 'sPC_TrdMenu_AddUpt',
|
FstID: res.fstMenuId,
|
SndID: res.ParentID,
|
ParentID: res.ParentID,
|
MenuID: sysMenu.MenuID,
|
MenuNo: res.MenuNo,
|
Template: sysMenu.Template,
|
MenuName: res.MenuName,
|
PageParam: JSON.stringify(PageParam),
|
LongParam: '',
|
LText: '',
|
LTexttb: ''
|
}
|
|
if (sysMenu.menuSort) { // 菜单新建时设置排序
|
param.Sort = sysMenu.menuSort
|
}
|
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
this.setState({
|
confirmLoading: true
|
})
|
|
if (sysMenu.Template === 'CustomPage' && sysMenu.OriginMenuId) {
|
this.copyMenu(param, sysMenu.OriginMenuId)
|
} else {
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
sysTemplates: sysTemplates,
|
confirmLoading: false,
|
handleMVisible: false,
|
sysMenu: '',
|
tabview: ''
|
})
|
|
this.props.reload()
|
} else {
|
this.setState({
|
confirmLoading: 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)
|
|
param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config)))
|
}
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
confirmLoading: false,
|
handleMVisible: false,
|
sysMenu: '',
|
tabview: ''
|
})
|
|
this.props.reload()
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
}
|
})
|
} else {
|
this.setState({
|
confirmLoading: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
UNSAFE_componentWillMount () {
|
this.getUsedTemplate()
|
|
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="third-edit-box">
|
{!this.state.tabview ?
|
<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>
|
<a target="blank" href="#/main" >新页面</a>
|
</div>
|
</div>
|
</div> : null
|
}
|
<div className="cus-submenu-title">
|
<Icon type={this.props.supMenu.PageParam.Icon} />
|
<span>{this.props.supMenu.MenuName}</span>
|
</div>
|
<DndProvider backend={HTML5Backend}>
|
<DragElement
|
list={this.state.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')}}>{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>
|
{this.state.tabview === 'template' ?
|
<div className="editboard">
|
<div className="workplace">
|
<Button className="top-btn mk-yellow" onClick={this.exittabview}>{dict['model.cancel']}</Button>
|
{this.state.tabview === 'template' && <Tabs defaultActiveKey="1">
|
<TabPane tab="系统模板" key="1">
|
<Row>
|
{this.state.sysTemplates.map((template, index) => {
|
if (template.hidden) return null
|
|
return (
|
<Col key={`${index}`} 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={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)}} src={template.url} alt=""/>
|
<div className="card-operation">
|
<Button type="primary" onClick={() => {this.useTemplate(template, 'user')}}>使用模板</Button>
|
</div>
|
</Card>
|
</Col>
|
)
|
} else {
|
return ''
|
}
|
})}
|
</Row>
|
</TabPane>
|
</Tabs>}
|
</div>
|
</div> : null
|
}
|
{this.state.tabview === 'TreePage' ?
|
<TreePageConfig
|
menu={this.state.editMenu}
|
reloadmenu={() => {this.props.reload()}}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'CalendarPage' ?
|
<CalendarPageConfig
|
menu={this.state.editMenu}
|
reloadmenu={() => {this.props.reload()}}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'CommonTable' ?
|
<ComTableConfig
|
menu={this.state.editMenu}
|
reloadmenu={() => {this.props.reload()}}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'Modal' ?
|
<ModalConfig
|
menu={this.state.editMenu}
|
editTab={this.state.editTab}
|
tabConfig={this.state.tabConfig}
|
editSubTab={this.state.editSubTab}
|
subTabConfig={this.state.subTabConfig}
|
btnTab={this.state.btnTab}
|
btnTabConfig={this.state.btnTabConfig}
|
editAction={this.state.editAction}
|
subConfig={this.state.subConfig}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'SubTable' ?
|
<SubTable
|
menu={this.state.editMenu}
|
editTab={this.state.editTab}
|
editSubTab={this.state.editSubTab}
|
tabConfig={this.state.tabConfig}
|
btnTab={this.state.btnTab}
|
btnTabConfig={this.state.btnTabConfig}
|
config={this.state.subConfig}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'FormTab' ?
|
<FormTabConfig
|
menu={this.state.editMenu}
|
btnTab={this.state.btnTab}
|
config={this.state.subConfig}
|
handleView={this.handleView}
|
/> : null
|
}
|
{/* 图片预览 */}
|
<Preview cancel={this.cancelPrePicture} preview={this.state.preview} template={this.state.pretemplate} confirm={this.useTemplate}/>
|
{/* 解冻菜单模态框 */}
|
<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 ref="trawmenu" menulist={this.state.thawmenulist}/>}
|
</Modal>
|
{/* 添加系统菜单 */}
|
<Modal
|
title={this.state.sysMenu && this.state.sysMenu.isSystem ? dict['model.add'] + dict['model.menu'] : dict['model.update'] + dict['model.menu']}
|
visible={this.state.handleMVisible}
|
onOk={this.memuSubmit}
|
confirmLoading={this.state.confirmLoading}
|
onCancel={() => {this.setState({handleMVisible: false})}}
|
destroyOnClose
|
>
|
<MenuForm
|
menu={this.state.sysMenu}
|
dict={dict}
|
inputSubmit={this.memuSubmit}
|
wrappedComponentRef={(inst) => this.menuFormRef = inst}
|
/>
|
</Modal>
|
{this.state.loading && <Spin className="loading-thdmenu" size="large" />}
|
</div>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
mainMenu: state.mainMenu,
|
menuTree: state.menuTree,
|
memberLevel: state.memberLevel
|
}
|
}
|
|
const mapDispatchToProps = () => {
|
return {}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(EditMenu))
|
