import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import {connect} from 'react-redux'
|
import { is, fromJS } from 'immutable'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { Button, Card, Modal, Collapse, notification, Spin, Icon, Switch, Tooltip, Col } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.js'
|
import Utils from '@/utils/utils.js'
|
import { updateSubTable } from '@/utils/utils-update.js'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import SearchComponent from '@/templates/sharecomponent/searchcomponent'
|
import ActionComponent from '@/templates/sharecomponent/actioncomponent'
|
import ColumnComponent from '@/templates/sharecomponent/columncomponent'
|
|
import MenuForm from './menuform'
|
import SourceElement from '@/templates/zshare/dragsource'
|
import Source from './source'
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { confirm } = Modal
|
|
const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
|
const SettingComponent = asyncComponent(() => import('@/templates/sharecomponent/settingcomponent'))
|
const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
|
const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
|
const ChartGroupComponent = asyncComponent(() => import('@/templates/sharecomponent/chartgroupcomponent'))
|
const ChartComponent = asyncComponent(() => import('@/templates/sharecomponent/chartcomponent'))
|
const CardComponent = asyncComponent(() => import('@/templates/sharecomponent/cardcomponent'))
|
|
class SubTableConfig extends Component {
|
static propTpyes = {
|
menu: PropTypes.any,
|
editTab: PropTypes.any,
|
tabConfig: PropTypes.any,
|
editSubTab: PropTypes.any,
|
btnTab: PropTypes.any,
|
btnTabConfig: PropTypes.any,
|
config: PropTypes.any,
|
handleView: PropTypes.func
|
}
|
|
state = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 字典
|
config: null, // 页面配置
|
visible: false, // 搜索条件、按钮、显示列，模态框显示控制
|
tableFields: [], // 已选表字段集
|
menuloading: false, // 菜单保存中
|
menucloseloading: false, // 菜单关闭时，选择保存
|
loading: false, // 加载中，页面spin
|
closeVisible: false, // 关闭模态框
|
originConfig: null, // 原配置
|
originActions: null, // 原始按钮信息，使用已有用户模板
|
delActions: [], // 删除按钮列表
|
copyActions: [], // 复制按钮组
|
tabviews: [], // 所有标签页
|
thawButtons: [], // 已选择要解冻的按钮
|
activeKey: '0', // 默认展开基本信息
|
chartview: null, // 当前视图
|
openEdition: '' // 编辑版本标记，防止多人操作
|
}
|
|
/**
|
* @description 数据预处理
|
* 1、设置页面配置信息，新建或无配置信息时（切换模板后无配置信息），使用模板默认配置
|
* 2、设置操作类型、原始菜单信息（每次保存后重置）、已使用表及基本信息表单
|
*/
|
UNSAFE_componentWillMount () {
|
const { config, editTab, editSubTab } = this.props
|
|
let _config = null
|
|
if (!config) {
|
_config = fromJS(Source.baseConfig).toJS()
|
_config.uuid = editSubTab ? editSubTab.linkTab : editTab.linkTab
|
_config.tabName = editSubTab ? editSubTab.label : editTab.label
|
_config.isAdd = true
|
} else {
|
_config = fromJS(config).toJS()
|
}
|
|
let _oriActions = []
|
|
if (_config.type === 'user') {
|
_config.action = _config.action.map(item => {
|
let uuid = Utils.getuuid()
|
if (item.OpenType === 'pop') { // 含有子配置项的按钮
|
_oriActions.push({
|
prebtn: fromJS(item).toJS(),
|
curuuid: uuid,
|
Template: 'Modal'
|
})
|
}
|
|
item.uuid = uuid
|
return item
|
})
|
}
|
|
let _activeKey = editSubTab ? editSubTab.activeKey : editTab.activeKey
|
|
// 版本兼容
|
_config = updateSubTable(_config)
|
|
this.setState({
|
openEdition: editSubTab ? (editSubTab.open_edition || '') : (editTab.open_edition || ''),
|
chartview: _config.charts[0].uuid,
|
originActions: _oriActions,
|
config: _config,
|
activeKey: _activeKey || '0',
|
originConfig: fromJS(_config).toJS(),
|
})
|
}
|
|
/**
|
* @description 加载完成后
|
* 1、获取系统可使用表
|
* 2、根据配置信息中已使用表获取相关字段信息
|
*/
|
componentDidMount () {
|
this.reloadTab(false)
|
}
|
|
/**
|
* @description 加载或刷新标签信息
|
*/
|
reloadTab = (type) => {
|
this.setState({
|
loading: type,
|
tabviews: []
|
})
|
Api.getSystemConfig({func: 'sPC_Get_UserTemp', TypeCharTwo: 'tab'}).then(res => {
|
if (res.status) {
|
let _tabviews = []
|
res.UserTemp.forEach(temp => {
|
let item = {
|
uuid: temp.MenuID,
|
value: temp.MenuID,
|
text: temp.MenuName,
|
type: temp.Template,
|
MenuNo: temp.MenuNo
|
}
|
|
if (this.props.config && temp.MenuID === this.props.config.uuid) return
|
|
_tabviews.push(item)
|
})
|
|
this.setState({
|
loading: false,
|
tabviews: _tabviews
|
})
|
|
if (type) {
|
notification.success({
|
top: 92,
|
message: '刷新成功。',
|
duration: 2
|
})
|
}
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
// 页面返回
|
handleViewBack = () => {
|
const {menu, editTab, tabConfig, editSubTab, btnTab, btnTabConfig} = this.props
|
let _tabview = menu ? menu.LongParam.Template : ''
|
let _subconfig = null
|
|
if (editSubTab) {
|
_subconfig = tabConfig
|
if (editTab.hasOwnProperty('OpenType')) {
|
_tabview = editTab.tabType || 'SubTable'
|
} else {
|
_tabview = editTab.type
|
}
|
} else if (!editSubTab && btnTab) {
|
_tabview = btnTab.tabTemplate
|
_subconfig = btnTabConfig
|
}
|
|
let param = {
|
editMenu: menu,
|
editTab: editSubTab ? editTab : null,
|
tabConfig: null,
|
editSubTab: null,
|
subTabConfig: null,
|
btnTab: btnTab,
|
btnTabConfig: btnTabConfig,
|
editAction: null,
|
subConfig: _subconfig,
|
tabview: _tabview
|
}
|
|
this.state.copyActions.forEach(item => {
|
let _param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: item
|
}
|
Api.getSystemConfig(_param)
|
})
|
|
this.props.handleView(param)
|
}
|
|
/**
|
* @description 标签页保存
|
*/
|
submitConfig = () => {
|
const { delActions, thawButtons, openEdition } = this.state
|
let _config = fromJS(this.state.config).toJS()
|
let copyreg = /\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/ig
|
|
// 基本信息验证
|
if (!_config.tabName || !_config.tabNo) {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['model.menu.basemsg'],
|
duration: 5
|
})
|
this.setState({activeKey: '0'})
|
return
|
}
|
|
if (copyreg.test(_config.tabNo) || copyreg.test(_config.tabName)) {
|
notification.warning({
|
top: 92,
|
message: '此标签为复制标签，请修改标签名称和标签参数，不可以时间格式 YYYY-MM-DD HH:mm:ss 结尾！',
|
duration: 5
|
})
|
return
|
}
|
|
if (_config.isAdd) {
|
if (_config.search[0] && _config.search[0].origin) {
|
_config.search = _config.search.filter(item => !item.origin)
|
}
|
if (_config.action[0] && _config.action[0].origin) {
|
_config.action = _config.action.filter(item => !item.origin)
|
}
|
if (_config.columns[0] && _config.columns[0].origin) {
|
_config.columns = _config.columns.filter(item => !item.origin)
|
}
|
}
|
|
// 未设置数据源或主键时，启用状态为false
|
let result = this.verifyconfig(_config)
|
|
if (result !== true) {
|
_config.enabled = false
|
}
|
|
if (this.state.closeVisible) { // 显示关闭对话框时，模态框中保存按钮，显示保存中状态
|
this.setState({
|
menucloseloading: true
|
})
|
} else {
|
this.setState({
|
menuloading: true
|
})
|
}
|
|
// 保存时删除配置类型，system 、user
|
delete _config.type
|
delete _config.isAdd
|
|
let _LongParam = ''
|
|
try {
|
_LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
|
} catch (e) {
|
notification.warning({
|
top: 92,
|
message: '编译错误',
|
duration: 5
|
})
|
|
this.setState({
|
menucloseloading: false,
|
menuloading: false
|
})
|
return
|
}
|
|
let btnParam = {
|
func: 'sPC_Button_AddUpt',
|
Type: 40,
|
ParentID: _config.uuid,
|
MenuNo: _config.tabNo,
|
Template: 'SubTable',
|
PageParam: '',
|
LongParam: '',
|
LText: []
|
}
|
|
let btntabs = []
|
|
_config.action.forEach((item, index) => {
|
if (item.OpenType === 'popview') {
|
btntabs.push(`select '${item.uuid}' as MenuID ,'${item.linkTab}' as Tabid,'${item.label}' as TabName ,'${(index + 1) * 10}' as Sort`)
|
}
|
btnParam.LText.push(`select '${item.uuid}' as menuid, '${item.label}' as menuname, '${(index + 1) * 10}' as Sort`)
|
})
|
|
btnParam.LText = btnParam.LText.join(' union all ')
|
btnParam.LText = Utils.formatOptions(btnParam.LText)
|
btnParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
btnParam.secretkey = Utils.encrypt(btnParam.LText, btnParam.timestamp)
|
|
let tabParam = { // 添加标签按钮tab页
|
func: 'sPC_sMenusTab_AddUpt',
|
MenuID: _config.uuid,
|
LText: btntabs.join(' union all ')
|
}
|
|
tabParam.LText = Utils.formatOptions(tabParam.LText)
|
tabParam.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
tabParam.secretkey = Utils.encrypt(tabParam.LText, tabParam.timestamp)
|
|
let param = {
|
func: 'sPC_Tab_AddUpt',
|
MenuID: _config.uuid,
|
MenuNo: _config.tabNo,
|
Template: 'SubTable',
|
MenuName: _config.tabName,
|
Remark: _config.Remark,
|
Sort: 0,
|
PageParam: JSON.stringify({Template: 'SubTable'}),
|
LongParam: _LongParam
|
}
|
|
if (openEdition) {
|
param.open_edition = openEdition
|
}
|
|
// 有按钮或标签删除时，先进行删除操作
|
// 删除成功后，保存页面配置
|
new Promise(resolve => {
|
if (delActions.length > 0) {
|
let deffers = delActions.map(item => {
|
let _param = {
|
func: 'sPC_MainMenu_Del',
|
MenuID: item.card.uuid
|
}
|
|
let _ParentParam = null
|
|
try {
|
_ParentParam = window.btoa(window.encodeURIComponent(JSON.stringify(item.card)))
|
} catch (e) {
|
console.warn('Stringify Failure')
|
_ParentParam = null
|
}
|
|
if (_ParentParam) { // 删除按钮时，保存按钮配置信息，用于恢复按钮
|
_param.ParentParam = _ParentParam
|
}
|
|
return new Promise(resolve => {
|
Api.getSystemConfig(_param).then(response => {
|
resolve(response)
|
})
|
})
|
})
|
Promise.all(deffers).then(result => {
|
let error = null
|
result.forEach(response => {
|
if (!response.status) {
|
error = response
|
}
|
})
|
|
if (error) {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: error.message,
|
duration: 5
|
})
|
resolve(false)
|
} else {
|
this.setState({
|
delActions: []
|
})
|
resolve(true)
|
}
|
})
|
} else if (delActions.length === 0) {
|
resolve(true)
|
}
|
}).then(resp => {
|
if (resp === false) return
|
|
if (thawButtons.length > 0) {
|
let defers = thawButtons.map(item => {
|
return new Promise((resolve) => {
|
Api.getSystemConfig({
|
func: 'sPC_MainMenu_ReDel',
|
MenuID: item
|
}).then(res => {
|
if (res.status) {
|
resolve('')
|
} else {
|
resolve(res.message)
|
}
|
})
|
})
|
})
|
|
return Promise.all(defers)
|
} else {
|
return true
|
}
|
}).then(res => {
|
if (res === true || res === false) return res
|
|
let msg = res.filter(Boolean)[0]
|
if (msg) {
|
notification.warning({
|
top: 92,
|
message: msg,
|
duration: 5
|
})
|
return false
|
} else {
|
this.setState({
|
thawButtons: []
|
})
|
return true
|
}
|
}).then(resp => {
|
if (resp === false) return
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
openEdition: response.open_edition || '',
|
config: _config,
|
originConfig: fromJS(_config).toJS()
|
}, () => {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
this.submitAction(btnParam, tabParam)
|
})
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 5
|
})
|
}
|
})
|
})
|
}
|
|
/**
|
* @description 保存或修改菜单按钮
|
*/
|
submitAction = (btnParam, tabParam) => {
|
const { config } = this.state
|
|
new Promise(resolve => {
|
let deffers = []
|
|
if (tabParam.LText) {
|
let defer = new Promise(resolve => {
|
Api.getSystemConfig(tabParam).then(result => {
|
resolve(result)
|
})
|
})
|
deffers.push(defer)
|
}
|
|
if (btnParam.LText) {
|
let defer = new Promise(resolve => {
|
Api.getSystemConfig(btnParam).then(result => {
|
if (result.status) {
|
this.setState({ // 保存成功后清空复制列表
|
copyActions: []
|
})
|
}
|
resolve(result)
|
})
|
})
|
deffers.push(defer)
|
}
|
|
if (deffers.length === 0) {
|
resolve(true)
|
} else {
|
Promise.all(deffers).then(result => {
|
let error = false
|
result.forEach(res => {
|
if (!res.status) {
|
error = res
|
}
|
})
|
|
if (error) {
|
notification.warning({
|
top: 92,
|
message: error.message,
|
duration: 5
|
})
|
resolve(false)
|
} else {
|
resolve(true)
|
}
|
})
|
}
|
}).then(response => {
|
if (response === false) return response
|
|
let oriActions = []
|
this.state.originActions.forEach(item => {
|
let curBtn = config.action.filter(cell => item.curuuid === cell.uuid)[0] // 查看初始化按钮是否存在
|
if (!curBtn) return
|
if (curBtn.OpenType !== item.prebtn.OpenType) return
|
|
oriActions.push({
|
prebtn: item.prebtn,
|
curBtn: curBtn
|
})
|
})
|
|
if (oriActions.length === 0) return 'true'
|
|
oriActions.forEach(action => {
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: action.prebtn ? action.prebtn.uuid : ''
|
}).then(result => {
|
if (result.status && result.LongParam) {
|
let _LongParam = ''
|
|
if (result.LongParam) {
|
try {
|
_LongParam = JSON.parse(window.decodeURIComponent(window.atob(result.LongParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_LongParam = ''
|
}
|
}
|
|
if (_LongParam) {
|
let param = {
|
func: 'sPC_ButtonParam_AddUpt',
|
ParentID: config.uuid,
|
MenuID: action.curBtn.uuid,
|
MenuNo: config.tabNo,
|
Template: _LongParam.type,
|
MenuName: action.curBtn.label,
|
PageParam: JSON.stringify({Template: _LongParam.type}),
|
LongParam: result.LongParam
|
}
|
Api.getSystemConfig(param).then(() => {})
|
}
|
}
|
})
|
})
|
return 'true'
|
}).then(response => {
|
if (response === 'true') {
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
if (this.state.closeVisible) {
|
this.handleViewBack()
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
}
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
}
|
})
|
}
|
|
cancelConfig = () => {
|
const { config, originConfig } = this.state
|
|
let _this = this
|
|
if (originConfig.isAdd) {
|
confirm({
|
content: '菜单尚未提交，确定放弃保存吗？',
|
onOk() {
|
_this.handleViewBack()
|
},
|
onCancel() {}
|
})
|
} else {
|
if (!is(fromJS(originConfig), fromJS(config))) {
|
this.setState({
|
closeVisible: true
|
})
|
} else {
|
this.handleViewBack()
|
}
|
}
|
}
|
|
/**
|
* @description 设置可配置按钮
|
*/
|
setSubConfig = (btn) => {
|
const {menu, editTab, tabConfig, editSubTab, btnTab, btnTabConfig} = this.props
|
const { config, originConfig, activeKey, openEdition } = this.state
|
|
if (originConfig.isAdd) {
|
notification.warning({
|
top: 92,
|
message: '菜单尚未保存，请保存菜单配置！',
|
duration: 5
|
})
|
} else {
|
if (!is(fromJS(originConfig), fromJS(config))) {
|
notification.warning({
|
top: 92,
|
message: '菜单配置已修改，请保存！',
|
duration: 5
|
})
|
} else {
|
// 子菜单信息验证通过后，跳转子按钮配置页面
|
let _view = ''
|
let _subtab = editSubTab
|
|
if (btn.OpenType === 'pop') {
|
_view = 'Modal' // 表单页面
|
} else if (btn.OpenType === 'popview') {
|
_view = btn.tabType || 'SubTable' // 新弹窗标签模板 tabType 属性已去除
|
_subtab = btn
|
|
if (editSubTab) {
|
notification.warning({
|
top: 92,
|
message: '弹窗(标签)中不支持此按钮打开方式！',
|
duration: 5
|
})
|
return
|
}
|
}
|
|
if (editSubTab) {
|
editSubTab.activeKey = activeKey
|
editSubTab.open_edition = openEdition // 更新版本号
|
} else {
|
editTab.activeKey = activeKey
|
editTab.open_edition = openEdition // 更新版本号
|
}
|
|
let param = {
|
editMenu: menu,
|
editTab: editTab,
|
tabConfig: editSubTab ? tabConfig : originConfig,
|
editSubTab: _subtab,
|
subTabConfig: editSubTab ? originConfig : null,
|
btnTab: btnTab,
|
btnTabConfig: btnTabConfig,
|
editAction: btn,
|
subConfig: '',
|
tabview: _view
|
}
|
|
this.setState({
|
loading: true
|
})
|
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: btn.OpenType === 'popview' ? btn.linkTab : btn.uuid
|
}).then(res => {
|
if (res.status) {
|
this.setState({
|
loading: false
|
})
|
let _LongParam = ''
|
if (res.LongParam) {
|
try {
|
_LongParam = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
} catch (e) {
|
console.warn('Parse Failure')
|
_LongParam = ''
|
}
|
}
|
|
if (_LongParam && param.tabview === 'Modal' && _LongParam.type === 'Modal') {
|
param.subConfig = _LongParam
|
} else if (_LongParam && param.tabview === 'SubTable' && _LongParam.Template === 'SubTable') {
|
param.subConfig = _LongParam
|
}
|
|
if (param.editAction) {
|
param.editAction.open_edition = res.open_edition || ''
|
} else if (param.editSubTab) {
|
param.editSubTab.open_edition = res.open_edition || ''
|
}
|
|
this.props.handleView(param)
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
}
|
}
|
|
/**
|
* @description 切换标签是否启用
|
*/
|
onEnabledChange = () => {
|
const { config } = this.state
|
|
let _enabled = !config.enabled
|
let result = this.verifyconfig(config)
|
|
if (_enabled && result !== true) {
|
notification.warning({
|
top: 92,
|
message: result,
|
duration: 5
|
})
|
return
|
}
|
|
this.setState({
|
config: {...config, enabled: _enabled}
|
})
|
}
|
|
/**
|
* @description 校验配置信息的合法性
|
*/
|
verifyconfig = (config) => {
|
let hasKey = false
|
let chartcols = []
|
config.columns.forEach(col => {
|
if (col.field) {
|
chartcols.push(col.field)
|
}
|
if (config.setting.primaryKey === col.field) {
|
hasKey = true
|
}
|
})
|
|
let chartError = ''
|
config.charts && config.charts.forEach((chart, index) => {
|
if (chartError) return
|
if (chart.Hide === 'true') return
|
if (!['line', 'bar', 'pie'].includes(chart.chartType)) return
|
|
if (!chart.Xaxis) {
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段尚未设置，不可启用！`
|
} else if (['line', 'bar'].includes(chart.chartType) && chart.datatype !== 'statistics' && (!chart.Yaxis || chart.Yaxis.length === 0)) { // query 查询数据
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段尚未设置，不可启用！`
|
} else if (['line', 'bar'].includes(chart.chartType) && chart.datatype === 'statistics' && (!chart.InfoType || !chart.InfoValue)) { // statistics 统计数据
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段尚未设置，不可启用！`
|
} else if (chart.chartType === 'pie' && !chart.Yaxis) {
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段尚未设置，不可启用！`
|
} else if (!chartcols.includes(chart.Xaxis)) {
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段在显示列中不存在，不可启用！`
|
} else if (chart.chartType === 'pie' && !chartcols.includes(chart.Yaxis)) {
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段在显示列中不存在，不可启用！`
|
} else if (['line', 'bar'].includes(chart.chartType) && chart.datatype === 'statistics' && (!chartcols.includes(chart.InfoType) || !chartcols.includes(chart.InfoValue))) { // statistics 统计数据
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段在显示列中不存在，不可启用！`
|
} else if (['line', 'bar'].includes(chart.chartType) && chart.datatype !== 'statistics' && chart.Yaxis.filter(yaxis => !chartcols.includes(yaxis)).length > 0) {
|
chartError = `图表${chart.title ? '《' + chart.title + '》' : index + 1}坐标轴字段在显示列中不存在，不可启用！`
|
}
|
})
|
|
config.action && config.action.forEach((btn) => {
|
if (['prompt', 'exec', 'pop'].includes(btn.OpenType) && btn.Ot === 'required' && btn.verify && btn.verify.scripts && btn.verify.scripts.length > 0) {
|
let hascheck = false
|
btn.verify.scripts.forEach(item => {
|
if (item.status === 'false') return
|
|
if (/\$check@|@check\$/ig.test(item.sql)) {
|
hascheck = true
|
}
|
})
|
if (hascheck) {
|
notification.warning({
|
top: 92,
|
message: `可选择多行的按钮《${btn.label}》中 $check@ 或 @check$ 将不会生效！`,
|
duration: 5
|
})
|
}
|
}
|
})
|
|
if ((config.setting.interType === 'system' || config.setting.requestMode === 'system') && config.setting.default === 'false' && config.setting.scripts && config.setting.scripts.filter(item => item.status !== 'false').length === 0) {
|
return '数据源中不执行默认sql，且未添加自定义脚本，不可启用！'
|
} else if (config.setting.interType === 'custom' && config.setting.procMode !== 'inner' && config.setting.preScripts && config.setting.preScripts.filter(item => item.status !== 'false').length === 0) {
|
return '数据源未设置前置脚本，不可启用！'
|
} else if (config.setting.interType === 'custom' && config.setting.callbackType === 'script' && config.setting.cbScripts && config.setting.cbScripts.filter(item => item.status !== 'false').length === 0) {
|
return '数据源未设置回调脚本，不可启用！'
|
} else if (!config.setting.primaryKey) {
|
return '尚未设置主键，不可启用！'
|
} else if (config.columns.length === 0) {
|
return '尚未设置显示列，不可启用！'
|
} else if (!hasKey) {
|
return '显示列中不存在主键字段，不可启用！'
|
} else if (chartError) {
|
return chartError
|
} else {
|
return true
|
}
|
}
|
|
/**
|
* @description 编辑功能完成更新，包括解冻按钮、粘贴、替换等
|
*/
|
updateConfig = (res) => {
|
if (res.type === 'thaw') {
|
this.setState({
|
thawButtons: res.thawButtons,
|
config: res.config
|
})
|
} else if (res.type === 'paste') {
|
this.setState({config: res.config})
|
}
|
}
|
|
/**
|
* @description 更新搜索条件配置信息
|
*/
|
updatesearch = (config) => {
|
|
this.setState({
|
config: config
|
})
|
}
|
|
/**
|
* @description 更新按钮配置信息
|
*/
|
updateaction = (config, copyId, delcard) => {
|
const { copyActions, delActions } = this.state
|
|
this.setState({
|
config: config,
|
copyActions: copyId ? [...copyActions, copyId] : copyActions,
|
delActions: delcard ? [...delActions, delcard] : delActions
|
})
|
}
|
|
/**
|
* @description 更新显示列配置信息
|
*/
|
updateconfig = (config) => {
|
this.setState({
|
config: config
|
})
|
}
|
|
/**
|
* @description 更新图表组配置信息
|
*/
|
updatechartgroup = (config, _chartview) => {
|
this.setState({
|
config: config,
|
chartview: _chartview
|
})
|
}
|
|
/**
|
* @description 更新常用表信息，快捷添加后更新配置信息
|
*/
|
updatetable = (config, fields) => {
|
const { tableFields } = this.state
|
|
this.setState({
|
config: config,
|
tableFields: fields ? fields : tableFields
|
})
|
}
|
|
/**
|
* @description 批量添加，更新配置信息
|
*/
|
updatefield = (config) => {
|
this.setState({
|
config: config
|
})
|
}
|
|
render () {
|
const { activeKey, config, chartview } = this.state
|
|
const confActions = config.action.filter(_action => !_action.origin && ['pop', 'popview', 'blank'].includes(_action.OpenType))
|
|
return (
|
<div className="model-subtable-board">
|
<DndProvider backend={HTML5Backend}>
|
{/* 工具栏 */}
|
<div className="tools">
|
<Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}>
|
{/* 基本信息 */}
|
<Panel forceRender={true} header={'标签基本信息'} key="0" id="subtable-basedata">
|
{/* 菜单信息 */}
|
<MenuForm
|
dict={this.state.dict}
|
config={config}
|
updatemenu={this.updateconfig}
|
/>
|
{/* 表名添加 */}
|
<TableComponent
|
config={config}
|
containerId="subtable-basedata"
|
updatetable={this.updatetable}
|
/>
|
</Panel>
|
{/* 搜索条件添加 */}
|
<Panel header={this.state.dict['header.menu.search']} key="1">
|
<div className="search-element">
|
{Source.searchItems.map((item, index) => {
|
return (<SourceElement key={index} content={item}/>)
|
})}
|
</div>
|
<FieldsComponent
|
config={config}
|
type="search"
|
tableFields={this.state.tableFields}
|
updatefield={this.updatefield}
|
/>
|
</Panel>
|
{/* 按钮添加 */}
|
<Panel header={this.state.dict['header.menu.action']} key="2">
|
<div className="search-element">
|
{Source.actionItems.map((item, index) => {
|
return (<SourceElement key={index} content={item}/>)
|
})}
|
</div>
|
<div className="config-btn">
|
{confActions.length > 0 ?
|
<p className="config-btn-title">
|
<Tooltip placement="topLeft" title="点击按钮，可完成或查看按钮配置信息。">
|
<Icon type="question-circle" />
|
</Tooltip>
|
{this.state.dict['header.menu.action.configurable']}
|
</p> : null
|
}
|
</div>
|
{confActions.map((item, index) => {
|
return (
|
<div key={index}>
|
<Button
|
icon={item.icon}
|
style={{marginBottom: '10px'}}
|
className={'config-button mk-btn mk-' + item.class}
|
onClick={() => this.setSubConfig(item)}
|
>{item.label}</Button>
|
</div>
|
)
|
})}
|
</Panel>
|
{/* 添加显示列 */}
|
<Panel header={this.state.dict['header.menu.column']} key="3">
|
<div className="search-element">
|
{Source.columnItems.map((item, index) => {
|
return (<SourceElement key={index} content={item}/>)
|
})}
|
</div>
|
<FieldsComponent
|
config={config}
|
type="columns"
|
tableFields={this.state.tableFields}
|
updatefield={this.updatefield}
|
/>
|
</Panel>
|
</Collapse>
|
</div>
|
<div className="setting">
|
<Card title={
|
<div>
|
标签（子表）页面配置
|
<Icon type="redo" style={{marginLeft: '10px'}} title="刷新标签列表" onClick={() => this.reloadTab(true)} />
|
</div>
|
} bordered={false} extra={
|
<div>
|
<EditComponent dict={this.state.dict} options={['search', 'action', 'columns']} config={config} MenuID={config.uuid} thawButtons={this.state.thawButtons} refresh={this.updateConfig}/>
|
<Switch className="big" checkedChildren="启" unCheckedChildren="停" checked={config.enabled} onChange={this.onEnabledChange} />
|
<Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button>
|
<Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button>
|
</div>
|
} style={{ width: '100%' }}>
|
<SettingComponent
|
config={config}
|
mainsearch={!this.props.editSubTab && this.props.editTab.mainsearch ? this.props.editTab.mainsearch : ''}
|
MenuID={config.uuid}
|
updatesetting={this.updateconfig}
|
/>
|
<SearchComponent
|
config={config}
|
updatesearch={this.updatesearch}
|
/>
|
<div className="chart-view" style={{position: 'relative'}}>
|
{/* 视图组 权限 会员等级20+ */}
|
{this.props.memberLevel >= 20 ? <ChartGroupComponent
|
config={config}
|
updatechartgroup={this.updatechartgroup}
|
/> : null}
|
{config.charts.map(item => {
|
if (!config.expand && chartview !== item.uuid) return ''
|
|
if (item.chartType === 'table') {
|
return (
|
<Col span={item.width || 24} key={item.uuid}>
|
{config.charts.length > 1 ? <p className="chart-title">{item.title}</p> : null}
|
<ActionComponent
|
type="subtable"
|
menu={{MenuID: config.uuid, MenuName: config.tabName, MenuNo: config.tabNo, fstMenuList: this.props.menu.fstMenuList}}
|
config={config}
|
tabs={this.state.tabviews}
|
setSubConfig={this.setSubConfig}
|
updateaction={this.updateaction}
|
/>
|
<ColumnComponent
|
config={config}
|
menu={this.props.menu}
|
updatecolumn={this.updateconfig}
|
/>
|
</Col>
|
)
|
} else if (item.chartType === 'card') {
|
return (
|
<Col span={item.width} key={item.uuid}>
|
<CardComponent
|
card={item}
|
config={config}
|
plotchange={this.updateconfig}
|
/>
|
</Col>
|
)
|
} else {
|
return (
|
<Col span={item.width} key={item.uuid}>
|
<ChartComponent
|
plot={item}
|
config={config}
|
plotchange={this.updateconfig}
|
/>
|
</Col>
|
)
|
}
|
})}
|
</div>
|
</Card>
|
</div>
|
</DndProvider>
|
<Modal
|
bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}}
|
closable={false}
|
maskClosable={false}
|
visible={this.state.closeVisible}
|
onCancel={() => { this.setState({closeVisible: false}) }}
|
footer={[
|
<Button key="save" className="mk-btn mk-green" loading={this.state.menucloseloading} onClick={this.submitConfig}>{this.state.dict['model.save']}</Button>,
|
<Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>{this.state.dict['model.notsave']}</Button>,
|
<Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>{this.state.dict['model.cancel']}</Button>
|
]}
|
destroyOnClose
|
>
|
{this.state.dict['header.menu.config.placeholder']}
|
</Modal>
|
{this.state.loading && <Spin size="large" />}
|
</div>
|
)
|
}
|
}
|
|
const mapStateToProps = (state) => {
|
return {
|
memberLevel: state.memberLevel
|
}
|
}
|
|
const mapDispatchToProps = () => {
|
return {}
|
}
|
|
export default connect(mapStateToProps, mapDispatchToProps)(SubTableConfig)
|
