From 655ac8aef54bc134c1420c19975023182a10cae4 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 08 十二月 2020 19:25:27 +0800
Subject: [PATCH] 2020-12-08
---
src/templates/modalconfig/index.jsx | 426 ++++------------------------------------------------
1 files changed, 35 insertions(+), 391 deletions(-)
diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx
index dde833a..4c04d53 100644
--- a/src/templates/modalconfig/index.jsx
+++ b/src/templates/modalconfig/index.jsx
@@ -5,30 +5,30 @@
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, Popover, Switch } from 'antd'
+import { Button, Card, Modal, Collapse, notification, Icon, Popover, Switch } from 'antd'
import Api from '@/api'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/model.js'
import enUS from '@/locales/en-US/model.js'
import { getModalForm } from '@/templates/zshare/formconfig'
-import { queryTableSql } from '@/utils/option.js'
import ModalForm from '@/templates/zshare/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 asyncComponent from '@/utils/asyncComponent'
import EditComponent from '@/templates/zshare/editcomponent'
import { BaseConfig, SearchItems } from './source'
import './index.scss'
const { Panel } = Collapse
-const { Option } = Select
const { confirm } = Modal
const CommonDict = localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
+const TableComponent = asyncComponent(() => import('@/templates/sharecomponent/tablecomponent'))
+const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
class ComModalConfig extends Component {
static propTpyes = {
@@ -47,11 +47,9 @@
state = {
menu: null, // 涓婄骇鑿滃崟锛屼笁绾ц彍鍗曟垨鏍囩
dict: CommonDict, // 瀛楀吀
+ tableFields: [], // 宸查�夌殑甯哥敤琛�
config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛�
visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒�
- tableVisible: false, // 鏁版嵁琛ㄥ瓧娈靛垪琛ㄦā鎬佹锛屾樉绀烘帶鍒�
- tableColumns: [], // 琛ㄦ牸瀛楁鍚嶅垪琛�
- fields: null, // 琛ㄥ崟锛屽彲閫夊瓧娈碉紙鍘婚噸鍚庯級
modalformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁
formlist: null, // 琛ㄥ崟缂栬緫妯℃�佹锛屽彲缂栬緫瀛楁
card: null, // 缂栬緫鍏冪礌
@@ -59,12 +57,9 @@
closeloading: false, // 鑿滃崟淇濆瓨涓�
settingVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹
closeVisible: false, // 鍏抽棴妯℃�佹
- tables: [], // 鍙敤琛ㄥ悕
- selectedTables: [], // 宸查�夎〃鍚�
originConfig: null, // 鍘熷鑿滃崟
groupVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹
curgroup: null, // 褰撳墠缁勶紝鏂板缓鎴栫紪杈�
- sources: null, // 琛ㄥ崟绫诲瀷
sqlVerifing: false, // sql楠岃瘉
openEdition: '', // 缂栬緫鐗堟湰鏍囪锛岄槻姝㈠浜烘搷浣�
showField: false // 鏄剧ず琛ㄥ崟瀛楁鍊�
@@ -119,7 +114,6 @@
menu: _menu,
source: _source,
config: _config,
- selectedTables: _config.tables || [],
originConfig: fromJS(_config).toJS(),
modalformlist: [
{
@@ -139,98 +133,6 @@
readonly: true
}
]
- })
- }
-
- /**
- * @description 鑾峰彇鏁版嵁琛ㄤ俊鎭�
- * 1銆佽幏鍙栫郴缁熶腑鍏ㄩ儴琛ㄥ悕
- * 2銆佹牴鎹凡閫夎〃鍚嶏紝鑾峰彇琛ㄦ牸瀛楁鍒楄〃
- */
- componentDidMount () {
- let param = {
- func: 'sPC_Get_SelectedList',
- LText: queryTableSql,
- obj_name: 'data',
- arr_field: 'TbName,Remark'
- }
-
- param.LText = Utils.formatOptions(param.LText)
- param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
- param.secretkey = Utils.encrypt(param.LText, param.timestamp)
-
- param.open_key = Utils.encryptOpenKey(param.secretkey, 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銆乶umber銆乨atetime銆乨ate
- 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
- })
})
}
@@ -592,7 +494,7 @@
}
let _LongParam = ''
- let _config = {...config, tables: this.state.selectedTables}
+ let _config = fromJS(config).toJS()
try {
_LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(_config)))
@@ -685,241 +587,14 @@
}
/**
- * @description 閫氳繃琛ㄥ瓧娈垫坊鍔犺〃鍗�
- * 1銆佹鏌ユ槸鍚﹀凡閫夎〃鍚嶏紝涓洪�夋椂璀﹀憡鎻愮ず
- * 2銆佽〃瀛楁鍚嶉�氳繃map鍘婚噸
- * 3銆佹鏌ヨ〃鍗曚腑鐨勫凡閫夊瓧娈碉紝骞舵爣璁板凡閫�
+ * @description 鏇存柊甯哥敤琛ㄤ俊鎭紝蹇嵎娣诲姞鍚庢洿鏂伴厤缃俊鎭�
*/
- 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})
- }
- })
- }
+ updatetable = (config, fields) => {
+ const { tableFields } = this.state
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 = fromJS(this.state.config).toJS()
-
- 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: '',
- orderType: 'asc',
- decimal: 0,
- readonly: 'false',
- required: 'true'
- }
- })
- _config.groups[_config.groups.length - 1].sublist = [..._config.groups.slice(-1)[0].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: '',
- orderType: 'asc',
- readonly: 'false',
- required: 'true'
- }
-
- items.push(newcard)
- }
- })
-
- _config.fields = items
- }
-
- this.setState({
- config: _config
- })
- notification.success({
- top: 92,
- message: '娣诲姞鎴愬姛',
- duration: 2
- })
- }
-
- /**
- * @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)
+ config: config,
+ tableFields: fields ? fields : tableFields
})
}
@@ -1071,13 +746,22 @@
/**
* @description 缂栬緫鍔熻兘瀹屾垚鏇存柊锛屽寘鎷В鍐绘寜閽�佺矘璐淬�佹浛鎹㈢瓑
*/
- updateConfig = (res) => {
+ updateEditConfig = (res) => {
if (res.type === 'paste') {
this.setState({
config: res.content
})
this.handleForm(res.newform)
}
+ }
+
+ /**
+ * @description 鏇存柊閰嶇疆淇℃伅
+ */
+ updateconfig = (config) => {
+ this.setState({
+ config: config
+ })
}
render () {
@@ -1088,43 +772,17 @@
<DndProvider backend={HTML5Backend}>
<div className="tools">
<Collapse accordion defaultActiveKey="1" bordered={false}>
- <Panel header={dict['header.menu.basedata']} key="0" id="modal-basedata">
+ <Panel forceRender={true} header={dict['header.menu.basedata']} key="0" id="modal-basedata">
<MenuForm
dict={dict}
formlist={this.state.modalformlist}
/>
- <div className="ant-col ant-form-item-label">
- <label title={dict['header.menu.table.add']}>
- {dict['header.menu.table.add']}
- </label>
- </div>
- <Select
- showSearch
- showArrow={false}
- className="tables"
- style={{ width: '100%' }}
- optionFilterProp="children"
- value={dict['header.menu.table.placeholder']}
- onChange={this.onTableChange}
- 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>}
- />}
+ {/* 琛ㄥ悕娣诲姞 */}
+ <TableComponent
+ config={config}
+ containerId="modal-basedata"
+ updatetable={this.updatetable}
+ />
</Panel>
<Panel header={dict['header.menu.form']} key="1">
<div className="search-element">
@@ -1132,7 +790,12 @@
return (<SourceElement key={index} content={item}/>)
})}
</div>
- <Button type="primary" block onClick={() => this.queryField()}>{dict['header.menu.form.add']}</Button>
+ <FieldsComponent
+ config={config}
+ type="form"
+ tableFields={this.state.tableFields}
+ updatefield={this.updateconfig}
+ />
<Button type="primary" block onClick={() => this.handleGroup()}>{dict['header.menu.group.add']}</Button>
</Panel>
</Collapse>
@@ -1140,7 +803,7 @@
<div className="setting">
<Card title={dict['header.menu.form.configurable']} bordered={false} extra={
<div>
- <EditComponent dict={dict} type="form" config={this.state.config} refresh={this.updateConfig}/>
+ <EditComponent dict={dict} type="form" config={this.state.config} refresh={this.updateEditConfig}/>
<Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['model.save']}</Button>
<Button onClick={this.cancelConfig}>{dict['model.back']}</Button>
</div>
@@ -1227,25 +890,6 @@
inputSubmit={this.handleSubmit}
wrappedComponentRef={(inst) => this.formRef = inst}
/>
- </Modal>
- <Modal
- wrapClassName="modal-fields"
- title={dict['model.edit']}
- visible={this.state.tableVisible}
- width={'65vw'}
- maskClosable={false}
- style={{minWidth: '900px', maxWidth: '1200px'}}
- onOk={this.addFieldSubmit}
- cancelText={dict['model.close']}
- 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={dict['model.edit']}
--
Gitblit v1.8.0