import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Button, Modal, Typography, Tree } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import options from '@/store/options.js'
|
|
import './index.scss'
|
|
const { TreeNode } = Tree
|
const { Paragraph } = Typography
|
|
class PageMessage extends Component {
|
static propTpyes = {
|
BID: PropTypes.any, // 父级Id，用于查询下拉选择项
|
}
|
|
state = {
|
debug: sessionStorage.getItem('debug') === 'true',
|
visible: false,
|
key: '', // 更新指针
|
data: []
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
handleviewconfig = (e) => {
|
const { config } = this.props
|
let data = []
|
e.stopPropagation()
|
|
if (config.Template === 'CustomPage') {
|
data = this.getCusData(config)
|
} else {
|
data = this.getData(config)
|
}
|
|
this.setState({
|
visible: true,
|
data: data
|
})
|
}
|
|
getBtnCell = (cell, item) => {
|
let _cell = { uuid: cell.uuid, title: `按钮(${cell.label})：` }
|
let _others = []
|
let tablename = cell.OpenType === 'excelIn' ? (cell.sheet || '') : (cell.sql || '')
|
|
if (cell.OpenType === 'excelOut' && cell.intertype === 'system') {
|
tablename = item.setting.tableName || ''
|
}
|
if (['pop', 'prompt', 'exec', 'excelIn', 'excelOut'].includes(cell.OpenType)) {
|
if (tablename) {
|
_others.push(`${tablename}(表名)`)
|
}
|
if (cell.innerFunc) {
|
_others.push(`${cell.innerFunc}(内部函数)`)
|
}
|
if (cell.outerFunc) {
|
_others.push(`${cell.outerFunc}(外部函数)`)
|
}
|
} else if (cell.OpenType === 'popview') {
|
_cell.sublist = []
|
Api.getLocalCacheConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: cell.uuid
|
}).then(res => {
|
if (res.LongParam) {
|
let _config
|
try { // 配置信息解析
|
_config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
_config = ''
|
}
|
|
if (_config) {
|
_cell.sublist = this.getCusData(_config)
|
this.setState({key: cell.uuid})
|
}
|
}
|
})
|
}
|
|
_cell.title = _cell.title + _others.join('、')
|
|
return _cell
|
}
|
|
getCusData = (config) => {
|
let data = []
|
config.components.forEach(item => {
|
let _item = { uuid: item.uuid, title: item.name, sublist: [] }
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
let cell = { uuid: tab.uuid, title: tab.label }
|
|
cell.sublist = this.getCusData(tab)
|
|
_item.sublist.push(cell)
|
})
|
} else if (item.type === 'group') {
|
_item.sublist = this.getCusData(item)
|
} else if (item.type === 'search' || (item.type === 'card' && item.subtype === 'propcard' && item.wrap.datatype === 'static')) {
|
let cell = { uuid: Utils.getuuid(), title: '数据源：(无)' }
|
_item.sublist.push(cell)
|
} else if (item.setting) {
|
let cell = { uuid: Utils.getuuid(), title: '数据源：' }
|
let _others = []
|
|
if (item.setting.tableName) {
|
_others.push(`${item.setting.tableName}(表名)`)
|
}
|
if (item.setting.innerFunc) {
|
_others.push(`${item.setting.innerFunc}(内部函数)`)
|
}
|
if (item.setting.outerFunc) {
|
_others.push(`${item.setting.outerFunc}(外部函数)`)
|
}
|
cell.title = cell.title + _others.join('、')
|
|
_item.sublist.push(cell)
|
}
|
|
if (item.action) {
|
item.action.forEach(cell => {
|
let _cell = this.getBtnCell(cell, item)
|
_item.sublist.push(_cell)
|
})
|
}
|
|
if (item.type === 'card') {
|
item.subcards.forEach(card => {
|
card.elements && card.elements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
let _cell = this.getBtnCell(cell, item)
|
_item.sublist.push(_cell)
|
}
|
})
|
card.backElements && card.backElements.forEach(cell => {
|
if (cell.eleType === 'button') {
|
let _cell = this.getBtnCell(cell, item)
|
_item.sublist.push(_cell)
|
}
|
})
|
})
|
} else if (item.type === 'table') {
|
item.cols.forEach(col => {
|
if (col.type !== 'action') return
|
col.elements && col.elements.forEach(cell => {
|
let _cell = this.getBtnCell(cell, item)
|
_item.sublist.push(_cell)
|
})
|
})
|
}
|
|
data.push(_item)
|
})
|
|
return data
|
}
|
|
getData = (config) => {
|
let data = []
|
let item = {uuid: Utils.getuuid(), title: '数据源：'}
|
let _others = []
|
|
if (config.Template === 'SubTable') {
|
if (config.tabNo) {
|
_others.push(`${config.tabNo}(菜单参数)`)
|
}
|
}
|
|
if (config.setting.tableName) {
|
_others.push(`${config.setting.tableName}(表名)`)
|
}
|
if (config.setting.innerFunc) {
|
_others.push(`${config.setting.innerFunc}(内部函数)`)
|
}
|
if (config.setting.outerFunc) {
|
_others.push(`${config.setting.outerFunc}(外部函数)`)
|
}
|
item.title = item.title + _others.join('、')
|
data.push(item)
|
|
// 按钮
|
config.action && config.action.forEach(item => {
|
let _item = {uuid: Utils.getuuid(), title: `按钮(${item.label})：`}
|
let _others = []
|
|
let tablename = item.OpenType === 'excelIn' ? (item.sheet || '') : (item.sql || '')
|
|
if (item.OpenType === 'excelOut' && item.intertype === 'system') {
|
tablename = config.setting.tableName || ''
|
}
|
|
if (item.OpenType === 'popview') {
|
_item.sublist = []
|
Api.getLocalCacheConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: item.linkTab
|
}).then(res => {
|
if (res.LongParam) {
|
let _config
|
try { // 配置信息解析
|
_config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
_config = ''
|
}
|
|
if (_config) {
|
_item.sublist = this.getData(_config)
|
this.setState({key: item.uuid})
|
}
|
}
|
})
|
} else if (['pop', 'prompt', 'exec', 'excelIn', 'excelOut'].includes(item.OpenType)) {
|
if (tablename) {
|
_others.push(`${tablename}(表名)`)
|
}
|
if (item.innerFunc) {
|
_others.push(`${item.innerFunc}(内部函数)`)
|
}
|
if (item.outerFunc) {
|
_others.push(`${item.outerFunc}(外部函数)`)
|
}
|
}
|
_item.title = _item.title + _others.join('、')
|
|
data.push(_item)
|
})
|
|
// 标签页
|
config.tabgroups && config.tabgroups.forEach(group => {
|
group.sublist.forEach(tab => {
|
let _item = {uuid: Utils.getuuid(), title: `标签(${tab.label})：`, sublist: []}
|
|
Api.getLocalCacheConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: tab.linkTab
|
}).then(res => {
|
if (res.LongParam) {
|
let _config
|
try { // 配置信息解析
|
_config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
_config = ''
|
}
|
|
if (_config) {
|
_item.sublist = this.getData(_config)
|
this.setState({key: tab.uuid})
|
}
|
}
|
})
|
|
data.push(_item)
|
})
|
})
|
|
if (config.Template === 'CalendarPage' && config.tab) {
|
let _item = {uuid: Utils.getuuid(), title: `标签(${config.tab.label})：`, sublist: []}
|
|
Api.getLocalCacheConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: config.tab.linkTab
|
}).then(res => {
|
if (res.LongParam) {
|
let _config
|
try { // 配置信息解析
|
_config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
_config = ''
|
}
|
|
if (_config) {
|
_item.sublist = this.getData(_config)
|
this.setState({key: config.tab.linkTab})
|
}
|
}
|
})
|
|
data.push(_item)
|
}
|
|
return data
|
}
|
|
getTreeNode = (data) => {
|
return data.map(item => {
|
if (item.sublist && item.sublist.length) {
|
return (
|
<TreeNode title={item.title} key={item.uuid} selectable={false}>
|
{this.getTreeNode(item.sublist)}
|
</TreeNode>
|
)
|
}
|
return <TreeNode key={item.uuid} title={item.title} isLeaf selectable={false} />
|
})
|
}
|
|
|
render() {
|
const { menu } = this.props
|
const { debug, visible, data } = this.state
|
|
return (
|
<div className={'page-message-wrap ' + (debug && options.sysType !== 'cloud' ? 'exist' : '')}>
|
{debug && options.sysType !== 'cloud' ? <Button
|
icon="copy"
|
shape="circle"
|
className="page-message"
|
onClick={this.handleviewconfig}
|
/> : null}
|
<Modal
|
className="menu-tree-modal"
|
title={'菜单信息'}
|
width={'850px'}
|
maskClosable={false}
|
visible={visible}
|
onCancel={() => this.setState({visible: false})}
|
footer={[
|
<Button key="close" onClick={() => this.setState({visible: false})}>关闭</Button>
|
]}
|
destroyOnClose
|
>
|
<div className="menu-header">
|
<span>菜单名称：{menu.MenuName}</span>
|
{menu.MenuNo ? <span>菜单参数：<Paragraph copyable>{menu.MenuNo}</Paragraph></span> : null}
|
</div>
|
{visible ? <Tree defaultExpandAll showLine={true}>
|
{this.getTreeNode(data)}
|
</Tree> : null}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default PageMessage
|
