import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { DndProvider } from 'react-dnd'
|
import HTML5Backend from 'react-dnd-html5-backend'
|
import { Button, Card, Modal, Collapse, notification, Spin, Select, List, Icon, Empty, Switch, Tooltip } from 'antd'
|
import moment from 'moment'
|
import DragElement from './dragelement'
|
import SourceElement from './dragelement/source'
|
import Api from '@/api'
|
import SearchForm from './searchform'
|
import ActionForm from './actionform'
|
import ColumnForm from './columnform'
|
import ColspanForm from './colspanform'
|
import SettingForm from './settingform'
|
import GridBtnForm from './gridbtnform'
|
import EditCard from './editcard'
|
import MenuForm from './menuform'
|
import zhCN from '@/locales/zh-CN/comtable.js'
|
import enUS from '@/locales/en-US/comtable.js'
|
import Utils from '@/utils/utils.js'
|
import Source from './source'
|
import './index.scss'
|
|
const { Panel } = Collapse
|
const { Option } = Select
|
const { confirm } = Modal
|
const CommonDict = (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS
|
|
class ComTableConfig extends Component {
|
static propTpyes = {
|
type: PropTypes.string,
|
menu: PropTypes.any,
|
handleConfig: PropTypes.func,
|
handleSubConfig: PropTypes.func,
|
supMenuList: PropTypes.array
|
}
|
|
state = {
|
operaType: '', // 操作类型，新建或编辑
|
dict: CommonDict, // 字典
|
config: null, // 页面配置
|
visible: false, // 搜索条件、按钮、显示列，模态框显示控制
|
tableVisible: false, // 数据表字段模态框
|
addType: '', // 添加类型-搜索条件或显示列
|
tableColumns: [], // 表格显示列
|
fields: null, // 搜索条件及显示列，可选字段
|
menuformlist: null, // 基本信息表单字段
|
formlist: null, // 搜索条件、按钮、显示列表单字段
|
formtemp: '', // 表单类型，显示列、按钮、搜索条件
|
card: null, // 编辑元素
|
searchloading: false, // 搜索条件加载中
|
actionloading: false, // 按钮加载中
|
columnsloading: false, // 显示列加载中
|
menuloading: false, // 菜单保存中
|
menucloseloading: false, // 菜单关闭时，选择保存
|
loading: false, // 加载中，页面spin
|
settingVisible: false, // 全局配置模态框
|
closeVisible: false, // 关闭模态框
|
tables: [], // 可用表名
|
selectedTables: [], // 已选表名
|
originMenu: null, // 原始菜单
|
originActions: null
|
}
|
|
/**
|
* @description 数据预处理
|
* 1、设置页面配置信息，新建或无配置信息时（切换模板后无配置信息），使用模板默认配置
|
* 2、设置操作类型、原始菜单信息（每次保存后重置）、已使用表及基本信息表单
|
*/
|
UNSAFE_componentWillMount () {
|
const { menu, type } = this.props
|
|
let _LongParam = menu.LongParam
|
let _config = ''
|
let _type = type
|
|
if (_type === 'add' || !_LongParam) {
|
_type = 'add'
|
_config = JSON.parse(JSON.stringify((Source.baseConfig)))
|
} else {
|
let _setting = Source.baseConfig.setting
|
if (_LongParam.setting) {
|
_setting = {..._setting, ..._LongParam.setting}
|
}
|
_LongParam.setting = _setting
|
_config = _LongParam
|
}
|
|
let _oriActions = _config.action
|
if (_config.type === 'user' || _config.type === 'system') {
|
_oriActions = []
|
}
|
|
this.setState({
|
originActions: _oriActions,
|
config: _config,
|
operaType: _type,
|
originMenu: JSON.parse(JSON.stringify(menu)),
|
selectedTables: _config.tables || [],
|
menuformlist: [
|
{
|
type: 'select',
|
key: 'parentId',
|
label: this.state.dict['header.menu.supMenu'],
|
initVal: menu.ParentID,
|
required: true,
|
readonly: false,
|
options: this.props.supMenuList
|
},
|
{
|
type: 'text',
|
key: 'menuName',
|
label: this.state.dict['header.menu.menuName'],
|
initVal: menu.MenuName,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'menuNo',
|
label: this.state.dict['header.menu.menuNo'],
|
initVal: menu.MenuNo,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'opentype',
|
label: this.state.dict['header.menu.openType'],
|
initVal: menu.PageParam.OpenType,
|
required: true,
|
options: [{
|
MenuID: 'newtab',
|
text: this.state.dict['header.form.tab']
|
}, {
|
MenuID: 'newpage',
|
text: this.state.dict['header.form.newpage']
|
}]
|
}
|
]
|
})
|
}
|
|
/**
|
* @description 加载完成后
|
* 1、获取系统可使用表
|
* 2、根据配置信息中已使用表获取相关字段信息
|
*/
|
componentDidMount () {
|
let param = {
|
func: 'sPC_Get_SelectedList',
|
LText: 'select TbName ,Remark from sDataDictionary where IsKey!=\'\' and Deleted =0',
|
obj_name: 'data',
|
arr_field: 'TbName,Remark'
|
}
|
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + '.000'
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
Api.getSystemConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
tables: res.data
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
|
let deffers = this.state.selectedTables.map(item => {
|
return new Promise(resolve => {
|
Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: item.TbName}).then(res => {
|
res.TBName = item.TbName
|
resolve(res)
|
})
|
})
|
})
|
Promise.all(deffers).then(response => {
|
let _columns = []
|
response.forEach(res => {
|
if (res.status) {
|
let tabmsg = {
|
tableName: res.TBName,
|
columns: res.FDName.map(item => {
|
let _type = item.FieldType.toLowerCase()
|
let _decimal = 0
|
if (/^nvarchar/.test(_type)) {
|
_type = 'text'
|
} else if (/^int/.test(_type)) {
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
if (_decimal > 4) {
|
_decimal = 4
|
}
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
if (_decimal > 4) {
|
_decimal = 4
|
}
|
_type = 'number'
|
} else if (/^datetime/.test(_type)) {
|
_type = 'datetime'
|
} else if (/^date/.test(_type)) {
|
_type = 'date'
|
} else {
|
_type = 'text'
|
}
|
|
return {
|
field: item.FieldName,
|
label: item.FieldDec,
|
type: _type,
|
datatype: _type,
|
decimal: _decimal
|
}
|
})
|
}
|
_columns.push(tabmsg)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
|
this.setState({
|
tableColumns: _columns
|
})
|
})
|
}
|
|
handleList = (type, list, card) => {
|
const { config } = this.state
|
|
if (list.length > config[type].length) {
|
list = list.filter(item => !item.origin)
|
|
this.setState({
|
[type + 'loading']: true,
|
config: {...config, [type]: list }
|
}, () => {
|
// 刷新对应的配置信息
|
this.setState({
|
[type + 'loading']: false
|
})
|
|
if (type === 'search') {
|
this.handleSearch(card)
|
} else if (type === 'action') {
|
this.handleAction(card)
|
} else if (type === 'columns') {
|
this.handleColumn(card)
|
}
|
})
|
} else {
|
this.setState({config: {...config, [type]: list}})
|
}
|
}
|
|
handleSearch = (card) => {
|
this.setState({
|
visible: true,
|
formtemp: 'search',
|
card: card,
|
formlist: [
|
{
|
type: 'text',
|
key: 'label',
|
label: this.state.dict['header.form.name'],
|
initVal: card.label,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'field',
|
label: this.state.dict['header.form.field'],
|
initVal: card.field,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'type',
|
label: this.state.dict['header.form.type'],
|
initVal: card.type,
|
required: true,
|
options: [{
|
value: 'text',
|
text: this.state.dict['header.form.text']
|
}, {
|
value: 'select',
|
text: this.state.dict['header.form.select']
|
}, {
|
value: 'link',
|
text: this.state.dict['header.form.link']
|
}, {
|
value: 'date',
|
text: this.state.dict['header.form.dateday']
|
}, {
|
value: 'dateweek',
|
text: this.state.dict['header.form.dateweek']
|
}, {
|
value: 'datemonth',
|
text: this.state.dict['header.form.datemonth']
|
}, {
|
value: 'daterange',
|
text: this.state.dict['header.form.daterange']
|
}]
|
},
|
{
|
type: 'text',
|
key: 'initval',
|
label: this.state.dict['header.form.initval'],
|
initVal: card.initval,
|
required: false
|
},
|
{
|
type: 'radio',
|
key: 'resourceType',
|
label: this.state.dict['header.form.resourceType'],
|
initVal: card.resourceType || '0',
|
required: true,
|
options: [{
|
value: '0',
|
text: this.state.dict['header.form.custom']
|
}, {
|
value: '1',
|
text: this.state.dict['header.form.datasource']
|
}]
|
},
|
{
|
type: 'radio',
|
key: 'setAll',
|
label: this.state.dict['header.form.setAll'],
|
initVal: card.setAll || 'false',
|
options: [{
|
value: 'true',
|
text: this.state.dict['header.form.true']
|
}, {
|
value: 'false',
|
text: this.state.dict['header.form.false']
|
}]
|
},
|
{
|
type: 'textarea',
|
key: 'dataSource',
|
label: this.state.dict['header.form.datasource'],
|
initVal: card.dataSource || '',
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'options',
|
key: 'options',
|
label: '',
|
initVal: card.options || [],
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'linkField',
|
label: this.state.dict['header.form.linkField'],
|
initVal: card.linkField || '',
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'valueField',
|
label: this.state.dict['header.form.valueField'],
|
initVal: card.valueField || '',
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'valueText',
|
label: this.state.dict['header.form.valueText'],
|
initVal: card.valueText || '',
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'orderBy',
|
label: this.state.dict['header.form.orderBy'],
|
initVal: card.orderBy || '',
|
required: false,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'orderType',
|
label: this.state.dict['header.form.orderType'],
|
initVal: card.orderType || 'asc',
|
options: [{
|
value: 'asc',
|
text: this.state.dict['header.form.asc']
|
}, {
|
value: 'desc',
|
text: this.state.dict['header.form.desc']
|
}]
|
},
|
{
|
type: 'select',
|
key: 'match',
|
label: this.state.dict['header.form.match'],
|
initVal: card.match || 'like',
|
required: true,
|
options: [{
|
value: 'like',
|
text: 'like'
|
}, {
|
value: 'equal',
|
text: 'equal'
|
}, {
|
value: 'greater',
|
text: '>'
|
}, {
|
value: 'less',
|
text: '<'
|
}, {
|
value: 'greaterequal',
|
text: '>='
|
}]
|
},
|
{
|
type: 'select',
|
key: 'display',
|
label: this.state.dict['header.form.display'],
|
initVal: card.display || 'dropdown',
|
required: true,
|
options: [{
|
value: 'dropdown',
|
text: this.state.dict['header.form.dropdown']
|
}, {
|
value: 'button',
|
text: this.state.dict['header.form.button']
|
}]
|
}
|
]
|
})
|
}
|
|
handleAction = (card) => {
|
this.setState({
|
visible: true,
|
formtemp: 'action',
|
card: card,
|
formlist: [
|
{
|
type: 'text',
|
key: 'label',
|
label: this.state.dict['header.form.name'],
|
initVal: card.label,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'OpenType',
|
label: this.state.dict['header.form.openType'],
|
initVal: card.OpenType,
|
required: true,
|
options: [{
|
MenuID: 'pop',
|
text: this.state.dict['header.form.popform']
|
}, {
|
MenuID: 'popview',
|
text: this.state.dict['header.form.popview']
|
}, {
|
MenuID: 'prompt',
|
text: this.state.dict['header.form.prompt']
|
}, {
|
MenuID: 'exec',
|
text: this.state.dict['header.form.exec']
|
}, {
|
MenuID: 'tab',
|
text: this.state.dict['header.form.tab']
|
}, {
|
MenuID: 'excelIn',
|
text: this.state.dict['header.form.excelIn']
|
}, {
|
MenuID: 'excelOut',
|
text: this.state.dict['header.form.excelOut']
|
}, {
|
MenuID: 'blank',
|
text: this.state.dict['header.form.blank']
|
}, {
|
MenuID: 'innerpage',
|
text: this.state.dict['header.form.newpage.inner']
|
}, {
|
MenuID: 'outerpage',
|
text: this.state.dict['header.form.newpage.outer']
|
}]
|
},
|
{
|
type: 'select',
|
key: 'pageTemplate',
|
label: this.state.dict['header.form.pageTemplate'],
|
initVal: card.pageTemplate,
|
required: true,
|
options: []
|
},
|
{
|
type: 'text',
|
key: 'url',
|
label: this.state.dict['header.form.newpage.url'],
|
initVal: card.url || '',
|
required: true
|
},
|
{
|
type: 'radio',
|
key: 'intertype',
|
label: this.state.dict['header.form.intertype'],
|
initVal: card.intertype,
|
required: true,
|
options: [{
|
MenuID: 'inner',
|
text: this.state.dict['header.form.interface.inner']
|
}, {
|
MenuID: 'outer',
|
text: this.state.dict['header.form.interface.outer']
|
}]
|
},
|
{
|
type: 'text',
|
key: 'innerFunc',
|
label: this.state.dict['header.form.innerFunc'],
|
initVal: card.innerFunc,
|
tooltip: <div>
|
<p>内部接口: 可自定义数据处理函数，未设置时会调用系统函数，使用系统函数需完善数据源及操作类型;</p>
|
<p>外部接口: 可自定义数据处理函数，提交数据经过内部函数处理后，传入外部接口，未设置时，数据会直接传入外部接口。</p>
|
</div>,
|
tooltipClass: 'middle',
|
required: false,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'interface',
|
label: this.state.dict['header.form.interface'],
|
initVal: card.interface,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'outerFunc',
|
label: this.state.dict['header.form.outerFunc'],
|
initVal: card.outerFunc,
|
required: false,
|
readonly: false
|
},
|
{
|
type: 'text',
|
key: 'callbackFunc',
|
label: this.state.dict['header.form.callbackFunc'],
|
initVal: card.callbackFunc,
|
required: false,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'position',
|
label: this.state.dict['header.form.position'],
|
initVal: card.position || 'toolbar',
|
required: true,
|
options: [{
|
MenuID: 'toolbar',
|
text: this.state.dict['header.form.toolbar']
|
}, {
|
MenuID: 'grid',
|
text: this.state.dict['header.form.grid']
|
}]
|
},
|
{
|
type: 'select',
|
key: 'Ot',
|
label: this.state.dict['header.form.isRequired'],
|
initVal: card.Ot || 'requiredSgl',
|
required: true,
|
options: []
|
},
|
{
|
type: 'select',
|
key: 'execSuccess',
|
label: this.state.dict['header.form.execSuccess'],
|
initVal: card.execSuccess || 'never',
|
required: true,
|
options: [{
|
MenuID: 'never',
|
text: this.state.dict['header.form.refresh.never']
|
}, {
|
MenuID: 'grid',
|
text: this.state.dict['header.form.refresh.grid']
|
}, {
|
MenuID: 'view',
|
text: this.state.dict['header.form.refresh.view']
|
}]
|
},
|
{
|
type: 'select',
|
key: 'execError',
|
label: this.state.dict['header.form.execError'],
|
initVal: card.execError || 'never',
|
required: true,
|
options: [{
|
MenuID: 'never',
|
text: this.state.dict['header.form.refresh.never']
|
}, {
|
MenuID: 'grid',
|
text: this.state.dict['header.form.refresh.grid']
|
}, {
|
MenuID: 'view',
|
text: this.state.dict['header.form.refresh.view']
|
}]
|
},
|
// {
|
// type: 'select',
|
// key: 'method',
|
// label: this.state.dict['header.form.request.method'],
|
// initVal: card.method || 'POST',
|
// required: true,
|
// options: [{
|
// MenuID: 'POST',
|
// text: 'POST'
|
// }, {
|
// MenuID: 'GET',
|
// text: 'GET'
|
// }]
|
// },
|
{
|
type: 'select',
|
key: 'icon',
|
label: this.state.dict['header.form.icon'],
|
initVal: card.icon,
|
required: false,
|
options: []
|
},
|
{
|
type: 'select',
|
key: 'class',
|
label: this.state.dict['header.form.class'],
|
initVal: card.class,
|
required: false,
|
options: []
|
},
|
{
|
type: 'text',
|
key: 'sql',
|
label: this.state.dict['header.form.datasource'],
|
initVal: card.sql || this.state.config.setting.tableName || '',
|
tooltip: this.state.dict['header.form.actionhelp.datasource'],
|
required: false
|
},
|
{
|
type: 'select',
|
key: 'sqlType',
|
label: this.state.dict['header.form.action.type'],
|
initVal: card.sqlType || 'insert',
|
tooltip: this.state.dict['header.form.actionhelp.sqlType'],
|
required: false,
|
options: [{
|
MenuID: 'insert',
|
text: this.state.dict['header.form.action.insert']
|
}, {
|
MenuID: 'update',
|
text: this.state.dict['header.form.action.update']
|
}, {
|
MenuID: 'LogicDelete',
|
text: this.state.dict['header.form.action.LogicDelete']
|
}, {
|
MenuID: 'delete',
|
text: this.state.dict['header.form.action.delete']
|
}]
|
}
|
]
|
})
|
}
|
|
handleColumn = (card) => {
|
if (card.type !== 'colspan') {
|
this.setState({
|
visible: true,
|
formtemp: 'columns',
|
card: card,
|
formlist: [
|
{
|
type: 'text',
|
key: 'label',
|
label: this.state.dict['header.form.name'],
|
initVal: card.label,
|
required: true
|
},
|
{
|
type: 'text',
|
key: 'field',
|
label: this.state.dict['header.form.field'],
|
initVal: card.field,
|
required: true,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'type',
|
label: this.state.dict['header.form.type'],
|
initVal: card.type,
|
required: true,
|
options: [{
|
MenuID: 'text',
|
text: this.state.dict['header.form.text']
|
}, {
|
MenuID: 'picture',
|
text: this.state.dict['header.form.picture']
|
}, {
|
MenuID: 'number',
|
text: this.state.dict['header.form.number']
|
}, {
|
MenuID: 'textarea',
|
text: this.state.dict['header.form.textarea']
|
}]
|
},
|
{
|
type: 'select',
|
key: 'Align',
|
label: this.state.dict['header.form.align'],
|
initVal: card.Align,
|
required: true,
|
options: [{
|
MenuID: 'left',
|
text: this.state.dict['header.form.alignLeft']
|
}, {
|
MenuID: 'right',
|
text: this.state.dict['header.form.alignRight']
|
}, {
|
MenuID: 'center',
|
text: this.state.dict['header.form.alignCenter']
|
}]
|
},
|
{
|
type: 'radio',
|
key: 'Hide',
|
label: this.state.dict['header.form.Hide'],
|
initVal: card.Hide,
|
required: true,
|
options: [{
|
MenuID: 'true',
|
text: this.state.dict['header.form.true']
|
}, {
|
MenuID: 'false',
|
text: this.state.dict['header.form.false']
|
}]
|
},
|
{
|
type: 'radio',
|
key: 'IsSort',
|
label: this.state.dict['header.form.IsSort'],
|
initVal: card.IsSort,
|
required: true,
|
options: [{
|
MenuID: 'true',
|
text: this.state.dict['header.form.true']
|
}, {
|
MenuID: 'false',
|
text: this.state.dict['header.form.false']
|
}]
|
},
|
{
|
type: 'number',
|
key: 'Width',
|
min: 1,
|
max: 1000,
|
decimal: 0,
|
label: this.state.dict['header.form.columnWidth'],
|
initVal: card.Width,
|
required: true
|
},
|
{
|
type: 'number',
|
key: 'decimal',
|
min: 0,
|
max: 18,
|
decimal: 0,
|
label: this.state.dict['header.form.decimal'],
|
initVal: card.decimal,
|
required: false
|
},
|
{
|
type: 'select',
|
key: 'format',
|
label: this.state.dict['header.form.format'],
|
initVal: card.format || '',
|
options: [{
|
MenuID: '',
|
text: this.state.dict['header.form.empty']
|
}, {
|
MenuID: 'thdSeparator',
|
text: this.state.dict['header.form.thdSeparator']
|
}],
|
required: false
|
},
|
{
|
type: 'text',
|
key: 'prefix',
|
label: this.state.dict['header.form.prefix'],
|
initVal: card.prefix || '',
|
required: false,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'match',
|
label: this.state.dict['header.form.match'],
|
initVal: card.match || '',
|
options: [{
|
MenuID: '',
|
text: this.state.dict['header.form.empty']
|
}, {
|
MenuID: '>',
|
text: '>'
|
}, {
|
MenuID: '<',
|
text: '<'
|
}, {
|
MenuID: '>=',
|
text: '>='
|
}, {
|
MenuID: '<=',
|
text: '<='
|
}, {
|
MenuID: 'between',
|
text: 'between'
|
}],
|
required: false
|
},
|
{
|
type: 'text',
|
key: 'matchVal',
|
min: -Infinity,
|
max: Infinity,
|
decimal: 0,
|
label: this.state.dict['header.form.matchVal'],
|
initVal: card.matchVal || '',
|
required: false,
|
readonly: false
|
},
|
{
|
type: 'select',
|
key: 'color',
|
label: this.state.dict['header.form.color'],
|
initVal: card.color || '',
|
options: [{
|
MenuID: '',
|
text: this.state.dict['header.form.empty']
|
}, {
|
MenuID: 'red',
|
text: '红色（内容）'
|
}, {
|
MenuID: 'redbg',
|
text: '红色（背景）'
|
}, {
|
MenuID: 'orange',
|
text: '橙色（内容）'
|
}, {
|
MenuID: 'orangebg',
|
text: '橙色（背景）'
|
}, {
|
MenuID: 'green',
|
text: '绿色（内容）'
|
}, {
|
MenuID: 'greenbg',
|
text: '绿色（背景）'
|
}],
|
required: false
|
}
|
]
|
})
|
} else {
|
this.setState({
|
visible: true,
|
formtemp: 'columns',
|
card: card
|
})
|
}
|
}
|
|
handleGridBtn = () => {
|
this.setState({
|
visible: true,
|
formtemp: 'gridbtn'
|
})
|
}
|
|
/**
|
* @description 搜索、按钮、显示列修改后提交保存
|
* 1、搜索条件保存，当类型为下拉框且存在数据源时，将查询条件拼接为sql，并用base64转码
|
* 2、按钮包括正常编辑和复制，复制时,按钮列末尾添加
|
* 3、添加或编辑列，保存时，如按钮位置设置为表格，则修改操作列显示状态
|
*/
|
handleSubmit = () => {
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
|
if (this.state.formtemp !== 'gridbtn') {
|
this.formRef.handleConfirm().then(res => {
|
let isupdate = false
|
|
if (res.type === 'search') {
|
if ((res.values.type === 'select' || res.values.type === 'link') && res.values.resourceType === '1') {
|
let sql = 'select ' + res.values.valueField + ',' + res.values.valueText + ' from (' + res.values.dataSource + ')'
|
if (res.values.orderBy) {
|
sql = sql + ' ld order by ' + res.values.orderBy + ' ' + res.values.orderType
|
}
|
res.values.dataSourceSql = Utils.formatOptions(sql)
|
}
|
}
|
|
if (this.state.operaType === 'add') {
|
_config[res.type] = _config[res.type].map(item => {
|
if (item.uuid === res.values.uuid) {
|
isupdate = true
|
return res.values
|
} else {
|
return item
|
}
|
})
|
_config[res.type] = _config[res.type].filter(item => !item.origin)
|
} else {
|
_config[res.type] = _config[res.type].map(item => {
|
if (item.uuid === res.values.uuid) {
|
isupdate = true
|
return res.values
|
} else {
|
return item
|
}
|
})
|
}
|
|
if (!isupdate) { // 操作不是修改，添加元素至列表
|
_config[res.type].push(res.values)
|
}
|
|
if (res.type === 'action') {
|
let gridbtn = _config.action.filter(act => act.position === 'grid')
|
let _display = false
|
|
if (gridbtn.length > 0) {
|
_display = true
|
}
|
|
if (_config.gridBtn) {
|
_config.gridBtn.display = _display
|
} else {
|
_config.gridBtn = {
|
display: _display,
|
Align: 'center',
|
IsSort: 'false',
|
uuid: Utils.getuuid(),
|
label: this.state.dict['header.form.column.action'],
|
type: 'action',
|
style: 'button',
|
show: 'horizontal',
|
Width: 120
|
}
|
}
|
}
|
|
this.setState({
|
config: _config,
|
searchloading: true,
|
actionloading: true,
|
columnsloading: true,
|
visible: false
|
}, () => {
|
this.setState({
|
searchloading: false,
|
actionloading: false,
|
columnsloading: false
|
})
|
})
|
})
|
} else {
|
this.formRef.handleConfirm().then(res => {
|
_config.gridBtn = res
|
|
this.setState({
|
config: _config,
|
visible: false
|
})
|
})
|
}
|
}
|
|
deleteElement = (element) => {
|
let _this = this
|
confirm({
|
content: `确定删除<<${element.card.label}>>吗？`,
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
let _config = JSON.parse(JSON.stringify(_this.state.config))
|
_config[element.type] = _config[element.type].filter(item => {
|
if (item.uuid === element.card.uuid) {
|
return false
|
} else {
|
return true
|
}
|
})
|
_this.setState({
|
config: _config,
|
[element.type + 'loading']: true
|
}, () => {
|
_this.setState({
|
[element.type + 'loading']: false
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
changeTemplate = () => {
|
this.props.handleConfig('template')
|
}
|
|
/**
|
* @description 三级菜单保存
|
*/
|
submitConfig = () => {
|
const { menu } = this.props
|
const { config, originMenu } = this.state
|
this.menuformRef.handleConfirm().then(res => {
|
config.search = config.search.filter(item => !item.origin)
|
if (config.search[0] && config.search[0].origin) {
|
notification.warning({
|
top: 92,
|
message: '请设置搜索条件',
|
duration: 10
|
})
|
return
|
}
|
if (config.action[0] && config.action[0].origin) {
|
notification.warning({
|
top: 92,
|
message: '请设置按钮',
|
duration: 10
|
})
|
return
|
}
|
if (config.columns[0] && config.columns[0].origin) {
|
notification.warning({
|
top: 92,
|
message: '请设置显示列',
|
duration: 10
|
})
|
return
|
}
|
|
let _LongParam = ''
|
let _config = {...config, tables: this.state.selectedTables}
|
let _pageParam = {...menu.PageParam, OpenType: res.opentype}
|
|
// 保存时删除配置类型，system 、user
|
delete _config.type
|
|
try {
|
_LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
|
} catch (e) {
|
notification.warning({
|
top: 92,
|
message: '编译错误',
|
duration: 10
|
})
|
return
|
}
|
|
let btnParam = {
|
func: 'sPC_Button_AddUpt',
|
ParentID: menu.MenuID,
|
MenuNo: res.menuNo,
|
Template: menu.PageParam.Template || '',
|
PageParam: '',
|
LongParam: '',
|
LText: config.action.map((item, index) => {
|
return `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') + '.000'
|
btnParam.secretkey = Utils.encrypt(btnParam.LText, btnParam.timestamp)
|
|
if (this.state.operaType === 'add') { // 新建菜单
|
let param = {
|
func: 'sPC_TrdMenu_Add',
|
ParentID: res.parentId,
|
MenuID: menu.MenuID,
|
MenuNo: res.menuNo,
|
Template: menu.PageParam.Template || '',
|
MenuName: res.menuName,
|
PageParam: JSON.stringify(_pageParam),
|
LongParam: _LongParam
|
}
|
|
if (this.state.closeVisible) { // 显示关闭对话框时，模态框中保存按钮，显示保存中状态
|
this.setState({
|
menucloseloading: true
|
})
|
} else {
|
this.setState({
|
menuloading: true
|
})
|
}
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
operaType: 'edit',
|
originMenu: {
|
...originMenu,
|
LongParam: _config,
|
PageParam: _pageParam,
|
MenuName: res.menuName,
|
MenuNo: res.menuNo,
|
ParentID: res.parentId
|
}
|
})
|
this.submitAction(btnParam)
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 10
|
})
|
}
|
})
|
} else { // 修改菜单
|
let param = {
|
func: 'sPC_TrdMenu_Upt',
|
ParentID: res.parentId,
|
MenuID: menu.MenuID,
|
MenuNo: res.menuNo,
|
Template: menu.PageParam.Template || '',
|
MenuName: res.menuName,
|
PageParam: JSON.stringify(_pageParam),
|
LongParam: _LongParam
|
}
|
|
if (this.state.closeVisible) { // 显示关闭对话框时，模态框中保存按钮，显示保存中状态
|
this.setState({
|
menucloseloading: true
|
})
|
} else {
|
this.setState({
|
menuloading: true
|
})
|
}
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
originMenu: {
|
...originMenu,
|
LongParam: _config,
|
PageParam: _pageParam,
|
MenuName: res.menuName,
|
MenuNo: res.menuNo,
|
ParentID: res.parentId
|
}
|
})
|
this.submitAction(btnParam)
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
}, () => {
|
notification.warning({
|
top: 92,
|
message: this.state.dict['header.menu.basemsg'],
|
duration: 10
|
})
|
})
|
}
|
|
/**
|
* @description 保存或修改菜单按钮
|
*/
|
submitAction = (param) => {
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 10
|
})
|
if (this.state.closeVisible) {
|
this.props.handleConfig('')
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
}
|
} else {
|
this.setState({
|
menuloading: false,
|
menucloseloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
|
cancelConfig = () => {
|
const { menu } = this.props
|
const { config, originMenu } = this.state
|
let _this = this
|
|
if (this.state.operaType === 'add') {
|
confirm({
|
content: '菜单尚未提交，确定放弃保存吗？',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
_this.props.handleConfig('')
|
},
|
onCancel() {}
|
})
|
} else {
|
this.menuformRef.handleConfirm().then(res => {
|
let _config = {...config, tables: this.state.selectedTables}
|
let _pageParam = {...menu.PageParam, OpenType: res.opentype}
|
let _originMenu = {
|
...originMenu,
|
LongParam: _config,
|
PageParam: _pageParam,
|
MenuName: res.menuName,
|
MenuNo: res.menuNo,
|
ParentID: res.parentId
|
}
|
|
if (!is(fromJS(originMenu), fromJS(_originMenu))) {
|
this.setState({
|
closeVisible: true
|
})
|
} else {
|
this.props.handleConfig('')
|
}
|
}, () => {
|
this.setState({
|
closeVisible: true
|
})
|
})
|
}
|
}
|
|
queryField = (type) => {
|
const {selectedTables, tableColumns, config} = this.state
|
// 判断是否已选择表名
|
if (selectedTables.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择表名！',
|
duration: 10
|
})
|
return
|
}
|
|
// 表字段集转为map数据
|
let columns = new Map()
|
tableColumns.forEach(table => {
|
table.columns.forEach(column => {
|
columns.set(column.field, column)
|
})
|
})
|
|
if (type === 'search') {
|
// 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
|
config.search.forEach(item => {
|
if (columns.has(item.field)) {
|
let _datatype = columns.get(item.field).datatype
|
columns.set(item.field, {...item, selected: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'columns') {
|
// 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
|
config.columns.forEach(item => {
|
if (columns.has(item.field)) {
|
let _datatype = columns.get(item.field).datatype
|
columns.set(item.field, {...item, selected: true, datatype: _datatype})
|
}
|
})
|
}
|
|
// 显示字段集弹窗
|
this.setState({
|
addType: type,
|
tableVisible: true,
|
fields: [...columns.values()]
|
})
|
}
|
|
addFieldSubmit = () => {
|
// 字段集为空，关闭弹窗
|
if (!this.state.fields || this.state.fields.length === 0) {
|
this.setState({
|
tableVisible: false,
|
addType: ''
|
})
|
}
|
|
const {addType, config} = this.state
|
const textmatch = { // 选择text时匹配规则
|
text: 'like',
|
number: 'like',
|
datetime: 'like',
|
date: 'like'
|
}
|
const selectmatch = { // 选择select时匹配规则
|
text: 'equal',
|
number: 'equal',
|
datetime: 'equal',
|
date: 'equal'
|
}
|
const datematch = { // 选择dateRange时匹配规则
|
text: 'between',
|
number: 'between',
|
datetime: 'between',
|
date: 'between'
|
}
|
|
// 获取已选字段集合
|
let cards = this.refs.searchcard.state.selectCards
|
let columnsMap = new Map()
|
cards.forEach(card => {
|
columnsMap.set(card.field, card)
|
})
|
|
let items = []
|
if (addType === 'search') {
|
config.search.forEach(item => {
|
if (columnsMap.has(item.field)) {
|
let cell = columnsMap.get(item.field)
|
|
if (cell.selected && cell.type === item.type) { // 数据未修改
|
items.push(item)
|
} else if (cell.selected) { // 数据类型修改
|
if (cell.type === 'text') {
|
item.match = textmatch[cell.datatype]
|
} else if (cell.type === 'select') {
|
item.match = selectmatch[cell.datatype]
|
} else if (cell.type === 'daterange') {
|
item.match = datematch[cell.datatype]
|
} else {
|
cell.type = 'text'
|
item.match = textmatch[cell.datatype]
|
}
|
|
item.type = cell.type
|
item.initval = ''
|
items.push(item)
|
}
|
columnsMap.delete(item.field)
|
} else if (!item.origin) {
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columnsMap.values()]
|
let indexes = items.map(card => {return card.id})
|
let id = Math.max(...indexes, 0) + 1
|
|
_columns.forEach(item => {
|
if (item.selected) {
|
let _match = ''
|
if (item.type === 'text') {
|
_match = textmatch[item.datatype]
|
} else if (item.type === 'select') {
|
_match = selectmatch[item.datatype]
|
} else if (item.type === 'daterange') {
|
_match = datematch[item.datatype]
|
} else {
|
item.type = 'text'
|
_match = textmatch[item.datatype]
|
}
|
|
let newcard = {
|
id: id,
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: '',
|
type: item.type,
|
resourceType: '0',
|
setAll: 'false',
|
options: [],
|
dataSource: '',
|
linkField: '',
|
valueField: '',
|
valueText: '',
|
orderBy: '',
|
orderType: 'asc',
|
match: _match,
|
display: 'dropdown'
|
}
|
|
items.push(newcard)
|
id++
|
}
|
})
|
} else {
|
config.columns.forEach(item => {
|
if (columnsMap.has(item.field)) {
|
let cell = columnsMap.get(item.field)
|
|
if (cell.selected) {
|
items.push(item)
|
}
|
columnsMap.delete(item.field)
|
} else if (!item.origin) {
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columnsMap.values()]
|
let indexes = items.map(card => {return card.id})
|
let id = Math.max(...indexes, 0)
|
|
_columns.forEach(item => {
|
if (item.selected) {
|
let newcard = {
|
id: id,
|
uuid: Utils.getuuid(),
|
Align: 'left',
|
label: item.label,
|
field: item.field,
|
Hide: 'false',
|
IsSort: 'true',
|
type: 'text',
|
Width: 120
|
}
|
|
items.push(newcard)
|
id++
|
}
|
})
|
}
|
|
this.setState({
|
tableVisible: false,
|
[addType + 'loading']: true,
|
addType: '',
|
config: {...config, [addType]: items}
|
}, () => {
|
this.setState({
|
[addType + 'loading']: false
|
})
|
})
|
}
|
|
onTableChange = (value) => {
|
const {tables, selectedTables, tableColumns} = this.state
|
|
let _table = tables.filter(item => item.TbName === value)[0]
|
let isSelected = !!selectedTables.filter(cell => cell.TbName === value)[0]
|
if (!isSelected) {
|
this.setState({
|
selectedTables: [...selectedTables, _table]
|
})
|
Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: value}).then(res => {
|
if (res.status) {
|
let tabmsg = {
|
tableName: _table.name,
|
columns: res.FDName.map(item => {
|
let _type = item.FieldType.toLowerCase()
|
let _decimal = 0
|
if (/^nvarchar/.test(_type)) {
|
_type = 'text'
|
} else if (/^int/.test(_type)) {
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
_type = 'number'
|
} else if (/^datetime/.test(_type)) {
|
_type = 'datetime'
|
} else if (/^date/.test(_type)) {
|
_type = 'date'
|
} else {
|
_type = 'text'
|
}
|
|
return {
|
field: item.FieldName,
|
label: item.FieldDec,
|
type: _type,
|
datatype: _type,
|
decimal: _decimal
|
}
|
})
|
}
|
this.setState({
|
tableColumns: [...tableColumns, tabmsg]
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
}
|
|
deleteTable = (table) => {
|
const {selectedTables, tableColumns} = this.state
|
|
this.setState({
|
selectedTables: selectedTables.filter(item => item.TbName !== table.TbName),
|
tableColumns: tableColumns.filter(item => item.tableName !== table.TbName)
|
})
|
}
|
|
changeSetting = () => {
|
this.setState({
|
settingVisible: true
|
})
|
}
|
|
settingSave = () => {
|
const {config} = this.state
|
this.settingRef.handleConfirm().then(res => {
|
this.setState({
|
config: {...config, setting: res},
|
settingVisible: false,
|
columnsloading: true
|
}, () => {
|
this.setState({
|
columnsloading: false
|
})
|
})
|
})
|
}
|
|
/**
|
* @description 设置可配置按钮
|
*/
|
setSubConfig = (btn) => {
|
const { menu } = this.props
|
const { config, originMenu } = this.state
|
|
if (this.state.operaType === 'add') {
|
notification.warning({
|
top: 92,
|
message: '菜单尚未保存，请保存菜单配置！',
|
duration: 10
|
})
|
} else {
|
this.menuformRef.handleConfirm().then(res => {
|
let _config = {...config, tables: this.state.selectedTables}
|
let _pageParam = {...menu.PageParam, OpenType: res.opentype}
|
let _originMenu = {
|
...originMenu,
|
LongParam: _config,
|
PageParam: _pageParam,
|
MenuName: res.menuName,
|
MenuNo: res.menuNo,
|
ParentID: res.parentId
|
}
|
|
if (!is(fromJS(originMenu), fromJS(_originMenu))) {
|
notification.warning({
|
top: 92,
|
message: '菜单配置已修改，请保存！',
|
duration: 10
|
})
|
} else {
|
this.setState({
|
loading: true
|
})
|
Api.getSystemConfig({
|
func: 'sPC_Get_LongParam',
|
MenuID: btn.uuid
|
}).then(res => {
|
if (res.status) {
|
this.setState({
|
loading: false
|
})
|
let _LongParam = ''
|
if (res.LongParam) {
|
_LongParam = window.decodeURIComponent(window.atob(res.LongParam))
|
try {
|
_LongParam = JSON.parse(_LongParam)
|
} catch (e) {
|
_LongParam = ''
|
}
|
}
|
|
this.props.handleSubConfig(btn, originMenu, _LongParam)
|
} else {
|
this.setState({
|
loading: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
}, () => {
|
notification.warning({
|
top: 92,
|
message: '菜单基本信息已修改，请保存！',
|
duration: 10
|
})
|
})
|
}
|
}
|
|
onEnabledChange = () => {
|
const { config } = this.state
|
|
this.setState({
|
config: {...config, enabled: !config.enabled}
|
})
|
}
|
|
render () {
|
const configAction = this.state.config.action.filter(_action =>
|
!_action.origin && (_action.OpenType === 'pop' || _action.OpenType === 'popview' || _action.OpenType === 'blank' || _action.OpenType === 'tab')
|
)
|
|
return (
|
<div className="common-table-board">
|
<DndProvider backend={HTML5Backend}>
|
{/* 工具栏 */}
|
<div className="tools">
|
<Collapse accordion defaultActiveKey="0" bordered={false}>
|
{/* 基本信息 */}
|
<Panel header={this.state.dict['header.menu.basedata']} key="0" id="common-basedata">
|
{/* 菜单信息 */}
|
<MenuForm
|
dict={this.state.dict}
|
formlist={this.state.menuformlist}
|
wrappedComponentRef={(inst) => this.menuformRef = inst}
|
/>
|
{/* 表名添加 */}
|
<div className="ant-col ant-form-item-label">
|
<label>
|
<Tooltip placement="topLeft" title="此处可以添加配置相关的常用表，在添加搜索条件和显示列时，可通过工具栏中的添加按钮，批量添加表格相关字段。">
|
<Icon type="question-circle" />
|
{this.state.dict['header.menu.table.add']}
|
</Tooltip>
|
</label>
|
</div>
|
<Select
|
showSearch
|
className="tables"
|
style={{ width: '100%' }}
|
optionFilterProp="children"
|
value={this.state.dict['header.menu.table.placeholder']}
|
onChange={this.onTableChange}
|
showArrow={false}
|
getPopupContainer={() => document.getElementById('common-basedata')}
|
filterOption={(input, option) => {
|
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
|
option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
}}
|
>
|
{this.state.tables.map((table, index) => (
|
<Option key={index} value={table.TbName}>{table.Remark}</Option>
|
))}
|
</Select>
|
{this.state.selectedTables.length > 0 && <List
|
size="small"
|
bordered
|
dataSource={this.state.selectedTables}
|
renderItem={(item, index) => <List.Item key={index} title={item.Remark + ' (' + item.TbName + ')'}>
|
{item.Remark + ' (' + item.TbName + ')'}
|
<Icon type="close" onClick={() => this.deleteTable(item)}/>
|
<div className="bottom-mask"></div>
|
</List.Item>}
|
/>}
|
</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>
|
<Button type="primary" block onClick={() => this.queryField('search')}>{this.state.dict['header.menu.search.add']}</Button>
|
</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>
|
{configAction.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
|
}
|
{configAction.map((item, index) => {
|
return (
|
<div key={index}>
|
<Button
|
icon={item.icon}
|
style={{marginBottom: '10px'}}
|
className={'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>
|
<Button type="primary" block onClick={() => this.queryField('columns')}>{this.state.dict['header.menu.column.add']}</Button>
|
</Panel>
|
</Collapse>
|
</div>
|
<div className="setting">
|
<Card title={this.state.dict['header.menu.page.configurable']} bordered={false} extra={
|
<div>
|
<Switch className="big" checkedChildren="启" unCheckedChildren="停" defaultChecked={this.state.config.enabled} onChange={this.onEnabledChange} />
|
<Button type="primary" onClick={this.changeTemplate}>{this.state.dict['header.menu.template.change']}</Button>
|
<Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['header.save']}</Button>
|
<Button onClick={this.cancelConfig}>{this.state.dict['header.return']}</Button>
|
</div>
|
} style={{ width: '100%' }}>
|
<Icon type="setting" onClick={this.changeSetting} />
|
<div className="search-list">
|
<Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《搜索》中，选择对应搜索框拖至此处添加；或点击按钮《添加搜索条件》批量添加，选择批量添加时，需提前选择使用表。">
|
<Icon type="question-circle" />
|
</Tooltip>
|
{!this.state.searchloading ?
|
<DragElement
|
list={this.state.config.search}
|
type="search"
|
placeholder={this.state.dict['header.form.search.placeholder']}
|
handleList={this.handleList}
|
handleMenu={this.handleSearch}
|
deleteMenu={this.deleteElement}
|
/> : null
|
}
|
</div>
|
<div className="action-list">
|
<Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《按钮》中，选择对应类型的按钮拖至此处添加，如选择按钮类型为表单、新标签页等含有配置页面的按钮，可在左侧工具栏-按钮-可配置按钮处，点击按钮完成相关配置。注：当设置按钮显示位置为表格时，显示列会增加操作列。">
|
<Icon type="question-circle" />
|
</Tooltip>
|
{!this.state.actionloading ?
|
<DragElement
|
list={this.state.config.action}
|
type="action"
|
placeholder={this.state.dict['header.form.action.placeholder']}
|
handleList={this.handleList}
|
handleMenu={this.handleAction}
|
copyElement={this.handleAction}
|
deleteMenu={this.deleteElement}
|
/> : null
|
}
|
</div>
|
<div className="column-list">
|
<Tooltip placement="bottomLeft" overlayClassName="middle" title="在左侧工具栏《显示列》中，选择对应类型的显示列拖至此处添加；或点击《添加显示列》按钮批量添加，选择批量添加时，需提前选择使用表。注：添加合并列时，需设置可选列。">
|
<Icon type="question-circle" />
|
</Tooltip>
|
{!this.state.columnsloading ?
|
<DragElement
|
list={this.state.config.columns}
|
setting={this.state.config.setting}
|
gridBtn={this.state.config.gridBtn}
|
type="columns"
|
placeholder={this.state.dict['header.form.column.placeholder']}
|
handleList={this.handleList}
|
handleMenu={this.handleColumn}
|
deleteMenu={this.deleteElement}
|
handleGridBtn={this.handleGridBtn}
|
/> : null
|
}
|
</div>
|
</Card>
|
</div>
|
</DndProvider>
|
{/* 编辑搜索条件、按钮、显示列 */}
|
<Modal
|
title={this.state.dict['header.edit']}
|
visible={this.state.visible}
|
width={700}
|
onCancel={() => { this.setState({ visible: false }) }}
|
onOk={this.handleSubmit}
|
destroyOnClose
|
>
|
{this.state.formtemp === 'search' ?
|
<SearchForm
|
dict={this.state.dict}
|
formlist={this.state.formlist}
|
card={this.state.card}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/> : null
|
}
|
{this.state.formtemp === 'action' ?
|
<ActionForm
|
dict={this.state.dict}
|
card={this.state.card}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/> : null
|
}
|
{this.state.formtemp === 'columns' && this.state.card.type !== 'colspan' ?
|
<ColumnForm
|
dict={this.state.dict}
|
card={this.state.card}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/> : null
|
}
|
{this.state.formtemp === 'columns' && this.state.card.type === 'colspan' ?
|
<ColspanForm
|
dict={this.state.dict}
|
card={this.state.card}
|
columns={this.state.config.columns}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/> : null
|
}
|
{this.state.formtemp === 'gridbtn' ?
|
<GridBtnForm
|
dict={this.state.dict}
|
card={this.state.config.gridBtn}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/> : null
|
}
|
</Modal>
|
{/* 根据字段名添加显示列及搜索条件 */}
|
<Modal
|
wrapClassName="common-table-fields-modal"
|
title={this.state.dict['header.edit']}
|
visible={this.state.tableVisible}
|
width={'65vw'}
|
style={{minWidth: '900px', maxWidth: '1200px'}}
|
onOk={this.addFieldSubmit}
|
onCancel={() => { // 取消添加
|
this.setState({
|
tableVisible: false,
|
addType: ''
|
})
|
}}
|
destroyOnClose
|
>
|
{this.state.addType && this.state.fields.length > 0 ?
|
<EditCard data={this.state.fields} ref="searchcard" type={this.state.addType} /> : null
|
}
|
{(!this.state.fields || this.state.fields.length === 0) &&
|
<Empty />
|
}
|
</Modal>
|
{/* 设置全局配置及列表数据源 */}
|
<Modal
|
title={this.state.dict['header.edit']}
|
visible={this.state.settingVisible}
|
width={700}
|
onOk={this.settingSave}
|
onCancel={() => { // 取消修改
|
this.setState({
|
settingVisible: false
|
})
|
}}
|
destroyOnClose
|
>
|
<SettingForm
|
data={this.state.config.setting}
|
columns={this.state.config.columns}
|
dict={this.state.dict}
|
wrappedComponentRef={(inst) => this.settingRef = inst}
|
/>
|
</Modal>
|
<Modal
|
bodyStyle={{textAlign: 'center', color: '#000000', fontSize: '16px'}}
|
closable={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['header.save']}</Button>,
|
<Button key="confirm" className="mk-btn mk-yellow" onClick={() => {this.props.handleConfig('')}}>{this.state.dict['header.notsave']}</Button>,
|
<Button key="cancel" onClick={() => { this.setState({closeVisible: false}) }}>{this.state.dict['header.cancel']}</Button>
|
]}
|
destroyOnClose
|
>
|
{this.state.dict['header.menu.config.placeholder']}
|
</Modal>
|
{this.state.loading && <Spin size="large" />}
|
</div>
|
)
|
}
|
}
|
|
export default ComTableConfig
|
