import React, {Component} from 'react'
|
import { notification, Spin, ConfigProvider } from 'antd'
|
import enUS from 'antd/es/locale/en_US'
|
import zhCN from 'antd/es/locale/zh_CN'
|
|
import Api from '@/api'
|
import asyncComponent from '@/utils/asyncComponent'
|
import asyncLoadComponent from '@/utils/asyncLoadComponent'
|
import './index.scss'
|
|
const _locale = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
|
const Header = asyncComponent(() => import('@/menu/header'))
|
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'))
|
|
document.body.className = ''
|
sessionStorage.setItem('isEditState', 'true')
|
|
class BaseDesign extends Component {
|
state = {
|
loading: false, // 编辑菜单或使用已使用模板时，获取配置信息
|
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: null, // 添加或编辑菜单（角色权限分配等）
|
change: false
|
}
|
|
UNSAFE_componentWillMount() {
|
try {
|
let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param)))
|
|
this.getMenuParam(param)
|
} catch (e) {
|
notification.warning({
|
top: 92,
|
message: '菜单信息解析错误！',
|
duration: 5
|
})
|
}
|
}
|
|
getMenuParam = (editMenu) => {
|
editMenu.fstMenuId = editMenu.FstId
|
editMenu.supMenuList = []
|
editMenu.fstMenuList = []
|
|
let tree = sessionStorage.getItem('menuTree')
|
if (tree) {
|
tree = JSON.parse(tree)
|
editMenu.fstMenuList = tree
|
|
tree.forEach(item => {
|
if (item.MenuID === editMenu.FstId) {
|
editMenu.supMenuList = item.children
|
}
|
})
|
}
|
|
let param = {
|
func: 'sPC_Get_LongParam',
|
// MenuID: editMenu.MenuID
|
MenuID: '1587005717541lov40vg61q7l1rbveon'
|
}
|
|
this.setState({
|
loading: true
|
})
|
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
editMenu.open_edition = res.open_edition || ''
|
editMenu.LongParam = ''
|
|
if (res.LongParam) {
|
let _LongParam = ''
|
try {
|
_LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_LongParam = ''
|
}
|
editMenu.LongParam = _LongParam
|
} else if (editMenu.PageParam.copyMenuId) {
|
let _param = {
|
func: 'sPC_Get_LongParam',
|
MenuID: editMenu.PageParam.copyMenuId
|
}
|
|
Api.getSystemConfig(_param).then(res => {
|
if (res.status) {
|
if (res.LongParam) {
|
let _LongParam = ''
|
try {
|
_LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
_LongParam.type = 'user'
|
} catch (e) {
|
console.warn('Parse Failure')
|
_LongParam = ''
|
}
|
editMenu.LongParam = _LongParam
|
}
|
|
this.setState({
|
editMenu: editMenu,
|
loading: false,
|
tabview: editMenu.type
|
})
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
return
|
}
|
|
this.setState({
|
editMenu: editMenu,
|
loading: false,
|
tabview: editMenu.type
|
})
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
handleView = (param) => {
|
this.setState({
|
tabview: ''
|
}, () => {
|
if (param) {
|
this.setState(param)
|
} else {
|
window.close()
|
}
|
})
|
}
|
|
render () {
|
const { loading } = this.state
|
|
return (
|
<div className="mk-base-design-wrap">
|
<ConfigProvider locale={_locale}>
|
|
<Header/>
|
{this.state.tabview === 'TreePage' ?
|
<TreePageConfig
|
menu={this.state.editMenu}
|
reloadmenu={() => {localStorage.setItem('menuUpdate', new Date().getTime())}}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'CalendarPage' ?
|
<CalendarPageConfig
|
menu={this.state.editMenu}
|
reloadmenu={() => {localStorage.setItem('menuUpdate', new Date().getTime())}}
|
handleView={this.handleView}
|
/> : null
|
}
|
{this.state.tabview === 'CommonTable' ?
|
<ComTableConfig
|
menu={this.state.editMenu}
|
reloadmenu={() => {localStorage.setItem('menuUpdate', new Date().getTime())}}
|
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
|
}
|
{loading ? <Spin className="loading-view" size="large"/> : null}
|
</ConfigProvider>
|
</div>
|
)
|
}
|
}
|
|
export default BaseDesign
|
