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 moment from 'moment'
|
import { Button, Card, Modal, Collapse, notification, Select, List, Icon, Empty } from 'antd'
|
|
import Api from '@/api'
|
import zhCN from '@/locales/zh-CN/comtable.js'
|
import enUS from '@/locales/en-US/comtable.js'
|
import Utils from '@/utils/utils.js'
|
import { getModalForm } from '@/templates/tableshare/formconfig'
|
|
import ModalForm from '@/templates/ushare/modalform'
|
import DragElement from './dragelement'
|
import SourceElement from './dragelement/source'
|
import SettingForm from './settingform'
|
import GroupForm from './groupform'
|
import EditCard from './editcard'
|
import MenuForm from './menuform'
|
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 = {
|
menu: PropTypes.any,
|
editTab: PropTypes.any,
|
editSubTab: PropTypes.any,
|
tabConfig: PropTypes.any,
|
subTabConfig: PropTypes.any,
|
btnTab: PropTypes.any,
|
btnTabConfig: PropTypes.any,
|
editAction: PropTypes.object,
|
subConfig: PropTypes.any,
|
handleView: PropTypes.func
|
}
|
|
state = {
|
menu: null, // 上级菜单，三级菜单或标签
|
dict: CommonDict, // 字典
|
config: null, // 页面配置，包括模板类型、模态框设置、添加表名、表单列表
|
visible: false, // 表单编辑模态框，显示控制
|
tableVisible: false, // 数据表字段列表模态框，显示控制
|
tableColumns: [], // 表格字段名列表
|
fields: null, // 表单，可选字段（去重后）
|
modalformlist: null, // 基本信息表单字段
|
formlist: null, // 表单编辑模态框，可编辑字段
|
card: null, // 编辑元素
|
loading: false, // 表单刷新时使用
|
menuloading: false, // 菜单保存中
|
closeloading: false, // 菜单保存中
|
settingVisible: false, // 全局配置模态框
|
closeVisible: false, // 关闭模态框
|
tables: [], // 可用表名
|
selectedTables: [], // 已选表名
|
originConfig: null, // 原始菜单
|
groupVisible: false, // 全局配置模态框
|
curgroup: null // 当前组，新建或编辑
|
}
|
|
/**
|
* @description 数据预处理
|
* 1、按钮配置存在时使用按钮配置，不存在时使用默认配置（示例）
|
* 2、模态框标题不存在时，使用按钮标题
|
* 3、设置已选表
|
* 4、设置按钮基本信息
|
*/
|
UNSAFE_componentWillMount () {
|
const {menu, editAction, tabConfig, subTabConfig, subConfig} = this.props
|
|
let _config = ''
|
let _tab = subTabConfig ? subTabConfig : tabConfig
|
|
let _menu = { // 上级菜单是三级菜单或标签页
|
type: _tab ? _tab.Template : menu.type,
|
tables: _tab ? _tab.tables : menu.LongParam.tables,
|
MenuID: _tab ? _tab.uuid : menu.MenuID,
|
MenuNo: _tab ? _tab.tabNo : menu.MenuNo,
|
MenuName: _tab ? _tab.tabName : menu.MenuName
|
}
|
|
if (subConfig) {
|
_config = subConfig
|
} else {
|
_config = JSON.parse(JSON.stringify((Source.baseConfig)))
|
}
|
|
if (!_config.setting.title) {
|
_config.setting.title = editAction.label
|
}
|
|
// 主菜单已有选择的表名，模态框没有表名时，复制主菜单表名
|
_config.tables = _config.tables.length === 0 ? _menu.tables : _config.tables
|
|
this.setState({
|
menu: _menu,
|
config: _config,
|
selectedTables: _config.tables || [],
|
originConfig: JSON.parse(JSON.stringify(_config)),
|
modalformlist: [
|
{
|
type: 'text',
|
key: 'supMenu',
|
label: this.state.dict['header.menu.supMenu'],
|
initVal: _menu.MenuName,
|
required: true,
|
readonly: true
|
},
|
{
|
type: 'text',
|
key: 'btnName',
|
label: '按钮名称',
|
initVal: editAction.label,
|
required: true,
|
readonly: true
|
}
|
]
|
})
|
}
|
|
/**
|
* @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)
|
})
|
})
|
})
|
|
// 获取字段后数据处理，根据类型分为text、number、datetime、date
|
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)
|
_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,
|
decimal: _decimal
|
}
|
})
|
}
|
_columns.push(tabmsg)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
|
this.setState({
|
tableColumns: _columns
|
})
|
})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
// 页面返回
|
handleViewBack = () => {
|
const {menu, editTab, editSubTab, tabConfig, subTabConfig, btnTab, btnTabConfig} = this.props
|
|
let _view = (subTabConfig && subTabConfig.Template) || (tabConfig && tabConfig.Template) || menu.LongParam.Template
|
|
let param = {
|
editMenu: menu,
|
editTab: editTab,
|
tabConfig: tabConfig,
|
editSubTab: editSubTab,
|
subTabConfig: subTabConfig,
|
btnTab: btnTab,
|
btnTabConfig: btnTabConfig,
|
editAction: null,
|
subConfig: subTabConfig || tabConfig || null,
|
tabview: _view
|
}
|
|
this.props.handleView(param)
|
}
|
|
/**
|
* @description 表单变化
|
* 1、表单拖拽添加时，检查是否存在示例表单，如存在则去除示例
|
* 2、表单移动后，保存移动后的顺序
|
* 3、新增表单时，直接打开编辑框
|
*/
|
handleList = (list, group, elementId, newcard) => {
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
|
if (!group && !elementId) {
|
// 没有分组时（拖拽添加）
|
if (list.length > _config.fields.length) {
|
_config.fields = list.filter(item => !item.origin)
|
|
this.setState({
|
loading: true,
|
config: _config
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
this.handleForm(newcard)
|
})
|
} else {
|
_config.fields = list
|
this.setState({config: _config})
|
}
|
} else if (group && !elementId) {
|
// 存在分组时，拖拽添加
|
if (list.length > group.sublist.length) {
|
group.sublist = list
|
_config.groups = _config.groups.map(item => {
|
if (item.uuid === group.uuid) {
|
return group
|
} else {
|
return item
|
}
|
})
|
|
this.setState({
|
loading: true,
|
config: _config
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
this.handleForm(newcard)
|
})
|
} else {
|
group.sublist = list
|
_config.groups = _config.groups.map(item => {
|
if (item.uuid === group.uuid) {
|
return group
|
} else {
|
return item
|
}
|
})
|
this.setState({config: _config})
|
}
|
} else if (group && elementId) {
|
// 修改已有元素的分组
|
let element = null
|
_config.groups.forEach(item => {
|
item.sublist = item.sublist.filter(cell => {
|
if (cell.uuid !== elementId) {
|
return true
|
} else {
|
element = cell
|
return false
|
}
|
})
|
})
|
|
group.sublist.push(element)
|
|
_config.groups = _config.groups.map(item => {
|
if (item.uuid === group.uuid) {
|
return group
|
} else {
|
return item
|
}
|
})
|
|
this.setState({
|
loading: true,
|
config: _config
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
})
|
}
|
}
|
|
/**
|
* @description 表单编辑
|
* 1、显示编辑弹窗-visible
|
* 2、保存编辑项-card
|
* 3、设置编辑参数项-formlist
|
*/
|
handleForm = (card) => {
|
const { config } = this.state
|
let _inputfields = []
|
|
// 设置下拉菜单可关联字段
|
if (config.groups.length > 0) {
|
config.groups.forEach(group => {
|
let sublist = group.sublist.filter(item => item.type === 'text' || item.type === 'number')
|
_inputfields = [..._inputfields, ...sublist]
|
})
|
} else {
|
_inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number')
|
}
|
if (card.linkSubField && card.linkSubField.length > 0) {
|
let fields = _inputfields.map(item => item.field)
|
card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
|
}
|
|
this.setState({
|
visible: true,
|
card: card,
|
formlist: getModalForm(card, _inputfields, !!this.props.editTab)
|
})
|
}
|
|
/**
|
* @description 编辑后提交
|
* 1、获取编辑后的表单信息
|
* 2、去除可能存在的示例表单
|
* 3、通过loading刷新
|
*/
|
handleSubmit = () => {
|
this.formRef.handleConfirm().then(res => {
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
|
if (_config.groups.length > 0) {
|
_config.groups.forEach(group => {
|
group.sublist = group.sublist.map(item => {
|
if (item.uuid === res.uuid) {
|
return res
|
} else {
|
return item
|
}
|
})
|
})
|
} else {
|
_config.fields = _config.fields.map(item => {
|
if (item.uuid === res.uuid) {
|
return res
|
} else {
|
return item
|
}
|
})
|
}
|
|
_config.fields = _config.fields.filter(item => !item.origin)
|
|
this.setState({
|
config: _config,
|
loading: true,
|
visible: false
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
})
|
})
|
}
|
|
/**
|
* @description 表单删除并刷新
|
*/
|
closeForm = (card) => {
|
let _this = this
|
|
confirm({
|
content: `确定删除<<${card.label}>>吗？`,
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
let _config = JSON.parse(JSON.stringify(_this.state.config))
|
|
if (_config.groups.length > 0) {
|
_config.groups.forEach(group => {
|
group.sublist = group.sublist.filter(item => !(item.uuid === card.uuid))
|
})
|
} else {
|
_config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))
|
}
|
|
_this.setState({
|
config: _config,
|
loading: true
|
}, () => {
|
_this.setState({
|
loading: false
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
submitConfig = () => {
|
const { editAction } = this.props
|
const { config, menu } = this.state
|
|
if ((!config.groups[0] && !config.fields[0]) || (config.fields[0] && config.fields[0].origin)) {
|
notification.warning({
|
top: 92,
|
message: '请添加表单',
|
duration: 10
|
})
|
return
|
}
|
|
// if (config.setting.display === 'prompt') { // 有需要置空的场景
|
// let _fields = []
|
// if (config.groups.length > 0) {
|
// config.groups.forEach(group => {
|
// _fields = [..._fields, ...group.sublist]
|
// })
|
// } else {
|
// _fields = config.fields
|
// }
|
|
// let readfields = _fields.filter(item => item.initval || item.initval === 0)
|
// if (readfields.length < _fields.length) {
|
// notification.warning({
|
// top: 92,
|
// message: '以《是否框》显示的弹框，所有表单必须含有默认值！',
|
// duration: 10
|
// })
|
// return
|
// }
|
// }
|
|
let _LongParam = ''
|
let _config = {...config, tables: this.state.selectedTables}
|
|
try {
|
_LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
|
} catch (e) {
|
notification.warning({
|
top: 92,
|
message: '编译错误',
|
duration: 10
|
})
|
return
|
}
|
|
let param = {
|
func: 'sPC_ButtonParam_AddUpt',
|
ParentID: menu.MenuID,
|
MenuID: editAction.uuid,
|
MenuNo: menu.MenuNo,
|
Template: 'Modal',
|
MenuName: editAction.label,
|
PageParam: JSON.stringify({Template: 'Modal'}),
|
LongParam: _LongParam
|
}
|
|
if (this.state.closeVisible) {
|
this.setState({
|
closeloading: true
|
})
|
} else {
|
this.setState({
|
menuloading: true
|
})
|
}
|
|
Api.getSystemConfig(param).then(response => {
|
if (response.status) {
|
this.setState({
|
menuloading: false,
|
closeloading: false,
|
originConfig: _config,
|
config: _config
|
})
|
notification.success({
|
top: 92,
|
message: '保存成功',
|
duration: 2
|
})
|
} else {
|
this.setState({
|
closeloading: false,
|
menuloading: false
|
})
|
notification.warning({
|
top: 92,
|
message: response.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
|
cancelConfig = () => {
|
const { config, originConfig } = this.state
|
let _this = this
|
|
let isOrigin = config.fields.filter(item => item.origin).length > 0
|
if (isOrigin) {
|
confirm({
|
content: '尚未提交，确定放弃保存吗？',
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
_this.handleViewBack()
|
},
|
onCancel() {}
|
})
|
} else {
|
|
if (!is(fromJS(config), fromJS(originConfig))) {
|
this.setState({
|
closeVisible: true
|
})
|
} else {
|
this.handleViewBack()
|
}
|
}
|
}
|
|
/**
|
* @description 通过表字段添加表单
|
* 1、检查是否已选表名，为选时警告提示
|
* 2、表字段名通过map去重
|
* 3、检查表单中的已选字段，并标记已选
|
*/
|
queryField = () => {
|
const {selectedTables, tableColumns, config} = this.state
|
if (selectedTables.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择表名！',
|
duration: 10
|
})
|
return
|
}
|
|
let columns = new Map()
|
tableColumns.forEach(table => {
|
table.columns.forEach(column => {
|
columns.set(column.field, column)
|
})
|
})
|
|
if (config.groups.length > 1) {
|
config.groups.forEach(group => {
|
group.sublist.forEach(item => {
|
if (columns.has(item.field)) {
|
columns.set(item.field, {...item, selected: true})
|
}
|
})
|
})
|
} else {
|
config.fields.forEach(item => {
|
if (columns.has(item.field)) {
|
columns.set(item.field, {...item, selected: true})
|
}
|
})
|
}
|
|
this.setState({
|
tableVisible: true,
|
fields: [...columns.values()]
|
})
|
}
|
|
/**
|
* @description 选择字段后提交
|
* 1、没有可选字段时，直接关闭
|
* 2、获取已选字段
|
* 3、与已有字段对比
|
* 4、添加新增字段
|
*/
|
addFieldSubmit = () => {
|
if (!this.state.fields || this.state.fields.length === 0) {
|
this.setState({
|
tableVisible: false
|
})
|
}
|
|
let _config = JSON.parse(JSON.stringify(this.state.config))
|
|
let cards = this.refs.searchcard.state.selectCards
|
let columns = new Map()
|
cards.forEach(card => {
|
columns.set(card.field, card)
|
})
|
|
if (_config.groups.length > 1) {
|
_config.groups.forEach(group => {
|
let items = []
|
group.sublist.forEach(item => {
|
if (columns.has(item.field)) {
|
let cell = columns.get(item.field)
|
|
if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
|
items.push(item)
|
} else if (cell.selected) { // 数据类型修改时，重置类型及初始值
|
item.type = cell.type
|
item.initval = ''
|
items.push(item)
|
}
|
columns.delete(item.field)
|
} else if (!item.origin) { // 过滤示例项
|
items.push(item)
|
}
|
})
|
group.sublist = items
|
})
|
|
let _columns = [...columns.values()]
|
|
let _additems = _columns.map(item => { // 循环添加新增字段
|
return {
|
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',
|
decimal: 0,
|
min: '',
|
max: '',
|
readonly: 'false',
|
required: 'true'
|
}
|
})
|
_config.groups[_config.groups.length - 1].sublist = [..._config.groups[_config.groups.length - 1].sublist, ..._additems]
|
|
} else {
|
let items = []
|
_config.fields.forEach(item => {
|
if (columns.has(item.field)) {
|
let cell = columns.get(item.field)
|
|
if (cell.selected && cell.type === item.type) { // 数据选择状态及类型未修改时，直接添加
|
items.push(item)
|
} else if (cell.selected) { // 数据类型修改时，重置类型及初始值
|
item.type = cell.type
|
item.initval = ''
|
items.push(item)
|
}
|
columns.delete(item.field)
|
} else if (!item.origin) { // 过滤示例项
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columns.values()]
|
|
_columns.forEach(item => { // 循环添加新增字段
|
if (item.selected) {
|
let newcard = {
|
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',
|
readonly: 'false',
|
required: 'true'
|
}
|
|
items.push(newcard)
|
}
|
})
|
|
_config.fields = items
|
}
|
|
this.setState({
|
tableVisible: false,
|
loading: true,
|
config: _config
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
})
|
}
|
|
/**
|
* @description 添加表名
|
* 1、获取表信息
|
* 2、检验是否已经添加，已添加时跳过
|
* 3、通过表名获取字段集，并设置数据类型
|
*/
|
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) return
|
|
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,
|
decimal: _decimal
|
}
|
})
|
}
|
this.setState({
|
tableColumns: [...tableColumns, tabmsg]
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 10
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 删除表名，删除对应字段集
|
*/
|
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)
|
})
|
}
|
|
/**
|
* @description 全局设置模态框
|
*/
|
changeSetting = () => {
|
this.setState({
|
settingVisible: true
|
})
|
}
|
|
/**
|
* @description 保存全局设置
|
*/
|
settingSave = () => {
|
const {config} = this.state
|
this.settingRef.handleConfirm().then(res => {
|
this.setState({
|
config: {...config, setting: res},
|
settingVisible: false
|
})
|
})
|
}
|
|
handleGroup = (group) => {
|
let curgroup = ''
|
|
if (group) {
|
curgroup = group
|
} else {
|
curgroup = {
|
isnew: true,
|
label: '',
|
default: false,
|
uuid: Utils.getuuid(),
|
sublist: []
|
}
|
}
|
|
this.setState({
|
groupVisible: true,
|
curgroup: curgroup
|
})
|
}
|
|
closeGroup = (group) => {
|
let _this = this
|
|
confirm({
|
content: `确定删除分组<<${group.label}>>吗？`,
|
okText: this.state.dict['header.confirm'],
|
cancelText: this.state.dict['header.cancel'],
|
onOk() {
|
let _config = JSON.parse(JSON.stringify(_this.state.config))
|
_config.groups = _config.groups.filter(item => !(item.uuid === group.uuid))
|
let _length = _config.groups.length
|
|
if (_length === 1) {
|
_config.fields = [...group.sublist, ..._config.groups[0].sublist]
|
_config.groups = []
|
} else {
|
_config.groups[_length - 1].sublist = [...group.sublist, ..._config.groups[_length - 1].sublist]
|
}
|
|
_this.setState({
|
config: _config,
|
loading: true
|
}, () => {
|
_this.setState({
|
loading: false
|
})
|
})
|
},
|
onCancel() {}
|
})
|
}
|
|
handleGroupSave = () => {
|
let _group = JSON.parse(JSON.stringify(this.state.curgroup))
|
let config = JSON.parse(JSON.stringify(this.state.config))
|
|
this.groupRef.handleConfirm().then(res => {
|
_group = {..._group, ...res.target}
|
|
if (_group.isnew) {
|
delete _group.isnew
|
config.groups.unshift(_group)
|
|
if (config.groups.length > 1) {
|
config.groups = config.groups.map(item => {
|
if (item.default) {
|
return res.default
|
} else {
|
return item
|
}
|
})
|
} else {
|
config.groups.push(res.default)
|
}
|
} else {
|
config.groups = config.groups.map(item => {
|
if (item.uuid === _group.uuid) {
|
return _group
|
} else if (item.default) {
|
return res.default
|
} else {
|
return item
|
}
|
})
|
}
|
|
config.fields = []
|
|
config.groups = config.groups.sort((a, b) => {
|
return a.sort - b.sort
|
})
|
|
this.setState({
|
groupVisible: false,
|
curgroup: '',
|
loading: true,
|
config: config
|
}, () => {
|
this.setState({
|
loading: false
|
})
|
})
|
})
|
}
|
|
render () {
|
const { config } = this.state
|
|
return (
|
<div className="modal-form-board">
|
<DndProvider backend={HTML5Backend}>
|
<div className="tools">
|
<Collapse accordion defaultActiveKey="0" bordered={false}>
|
<Panel header={this.state.dict['header.menu.basedata']} key="0" id="modal-basedata">
|
<MenuForm
|
dict={this.state.dict}
|
formlist={this.state.modalformlist}
|
/>
|
<div className="ant-col ant-form-item-label">
|
<label title={this.state.dict['header.menu.table.add']}>
|
{this.state.dict['header.menu.table.add']}
|
</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('modal-basedata')}
|
filterOption={(input, option) => {
|
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
}}
|
>
|
{this.state.tables.map((table, index) => (
|
<Option key={index} title={table.TbName} 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.form']} 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()}>{this.state.dict['header.menu.form.add']}</Button>
|
<Button type="primary" block onClick={() => this.handleGroup()}>{this.state.dict['header.menu.group.add']}</Button>
|
</Panel>
|
</Collapse>
|
</div>
|
<div className="setting">
|
<Card title={this.state.dict['header.menu.form.configurable']} bordered={false} extra={
|
<div>
|
<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="ant-modal-content" style={{width: config.setting.width + '%'}}>
|
<button type="button" className="ant-modal-close">
|
<span className="ant-modal-close-x"><Icon type="close"/></span>
|
</button>
|
<div className="ant-modal-header">
|
<div className="ant-modal-title">{config.setting.title}</div>
|
</div>
|
<div className="ant-modal-body">
|
<div className="modal-form">
|
{!this.state.loading && config.groups.length > 0 &&
|
config.groups.map(group => {
|
return (
|
<div key={group.uuid}>
|
<p className={'group-title' + (group.default ? ' default' : '')}>
|
<span>{group.label}</span>
|
<Icon className="edit" type="edit" onClick={() => {this.handleGroup(group)}} />
|
<Icon className="edit close" type="close" onClick={() => {this.closeGroup(group)}} />
|
</p>
|
<DragElement
|
group={group}
|
list={group.sublist}
|
setting={config.setting}
|
placeholder={this.state.dict['header.form.modal.placeholder']}
|
handleList={this.handleList}
|
handleForm={this.handleForm}
|
closeForm={this.closeForm}
|
/>
|
</div>
|
)
|
})
|
}
|
{!this.state.loading && config.groups.length === 0 ?
|
<DragElement
|
list={config.fields}
|
setting={config.setting}
|
placeholder={this.state.dict['header.form.modal.placeholder']}
|
handleList={this.handleList}
|
handleForm={this.handleForm}
|
closeForm={this.closeForm}
|
/> : null
|
}
|
</div>
|
</div>
|
<div className="ant-modal-footer">
|
<div>
|
<button type="button" className="ant-btn">
|
<span>{this.state.dict['header.cancel']}</span>
|
</button>
|
<button type="button" className="ant-btn ant-btn-primary">
|
<span>{this.state.dict['header.confirm']}</span>
|
</button>
|
</div>
|
<div className="action-mask"></div>
|
</div>
|
</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
|
>
|
{<ModalForm
|
dict={this.state.dict}
|
card={this.state.card}
|
formlist={this.state.formlist}
|
wrappedComponentRef={(inst) => this.formRef = inst}
|
/>}
|
</Modal>
|
<Modal
|
wrapClassName="modal-fields"
|
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 }) }}
|
destroyOnClose
|
>
|
{this.state.fields && this.state.fields.length > 0 ?
|
<EditCard data={this.state.fields} ref="searchcard" type="search" /> : 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
|
dict={this.state.dict}
|
config={config}
|
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.closeloading} onClick={this.submitConfig}>{this.state.dict['header.save']}</Button>,
|
<Button key="confirm" className="mk-btn mk-yellow" onClick={this.handleViewBack}>{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>
|
<Modal
|
title={this.state.dict['header.menu.group.manage']}
|
visible={this.state.groupVisible}
|
width={700}
|
onOk={this.handleGroupSave}
|
onCancel={() => { this.setState({ groupVisible: false }) }}
|
destroyOnClose
|
>
|
<GroupForm
|
config={config}
|
group={this.state.curgroup}
|
dict={this.state.dict}
|
wrappedComponentRef={(inst) => this.groupRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default ComTableConfig
|
