From d05e0494d938c165d328c37ba452a2a8579ed724 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 06 十二月 2019 17:10:53 +0800
Subject: [PATCH] 2019-12-06
---
src/templates/modalconfig/index.jsx | 414 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 248 insertions(+), 166 deletions(-)
diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx
index b8ce5bd..8515ef6 100644
--- a/src/templates/modalconfig/index.jsx
+++ b/src/templates/modalconfig/index.jsx
@@ -4,11 +4,13 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import { Button, Card, Modal, Collapse, notification, Select, List, Icon, Empty } from 'antd'
+import moment from 'moment'
import DragElement from './dragelement'
import SourceElement from './dragelement/source'
import Api from '@/api'
import ModalForm from './modalform'
import SettingForm from './settingform'
+import GroupForm from './groupform'
import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/comtable.js'
@@ -30,45 +32,49 @@
}
state = {
- operaType: '', // 鎿嶄綔绫诲瀷锛屾柊寤烘垨缂栬緫
- dict: CommonDict, // 瀛楀吀
- config: null, // 椤甸潰閰嶇疆
- visible: false, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪锛屾ā鎬佹鏄剧ず鎺у埗
- tableVisible: false, // 鏁版嵁琛ㄥ瓧娈垫ā鎬佹
- addType: '', // 娣诲姞绫诲瀷-鎼滅储鏉′欢鎴栨樉绀哄垪
- tableColumns: [], // 琛ㄦ牸鏄剧ず鍒�
- fields: null, // 鎼滅储鏉′欢鍙婃樉绀哄垪锛屽彲閫夊瓧娈�
- modalformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁
- formlist: null, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪琛ㄥ崟瀛楁
- card: null, // 缂栬緫鍏冪礌
- loading: false, // 鎼滅储鏉′欢鍔犺浇涓�
- menuloading: false, // 鑿滃崟淇濆瓨涓�
+ dict: CommonDict, // 瀛楀吀
+ config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛�
+ visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒�
+ tableVisible: false, // 鏁版嵁琛ㄥ瓧娈靛垪琛ㄦā鎬佹锛屾樉绀烘帶鍒�
+ tableColumns: [], // 琛ㄦ牸瀛楁鍚嶅垪琛�
+ fields: null, // 琛ㄥ崟锛屽彲閫夊瓧娈碉紙鍘婚噸鍚庯級
+ modalformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁
+ formlist: null, // 琛ㄥ崟缂栬緫妯℃�佹锛屽彲缂栬緫瀛楁
+ card: null, // 缂栬緫鍏冪礌
+ loading: false, // 琛ㄥ崟鍒锋柊鏃朵娇鐢�
+ menuloading: false, // 鑿滃崟淇濆瓨涓�
settingVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹
- closeVisible: false, // 鍏抽棴妯℃�佹
- tables: [], // 鍙敤琛ㄥ悕
- selectedTables: [], // 宸查�夎〃鍚�
- originMenu: null // 鍘熷鑿滃崟
+ closeVisible: false, // 鍏抽棴妯℃�佹
+ tables: [], // 鍙敤琛ㄥ悕
+ selectedTables: [], // 宸查�夎〃鍚�
+ originMenu: null, // 鍘熷鑿滃崟
+ groupVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹
}
+ /**
+ * @description 鏁版嵁棰勫鐞�
+ * 1銆佹寜閽厤缃瓨鍦ㄦ椂浣跨敤鎸夐挳閰嶇疆锛屼笉瀛樺湪鏃朵娇鐢ㄩ粯璁ら厤缃紙绀轰緥锛�
+ * 2銆佹ā鎬佹鏍囬涓嶅瓨鍦ㄦ椂锛屼娇鐢ㄦ寜閽爣棰�
+ * 3銆佽缃凡閫夎〃
+ * 4銆佽缃寜閽熀鏈俊鎭�
+ */
UNSAFE_componentWillMount () {
const {menu, editAction} = this.props
let _config = ''
- let _operaType = 'add'
if (editAction.pageParam) {
_config = editAction.pageParam
- _operaType = 'edit'
} else {
_config = JSON.parse(JSON.stringify((Source.baseConfig)))
+ _config.groups[0].sublist = _config.fields.map(field => field.uuid)
}
if (!_config.setting.title) {
_config.setting.title = editAction.label
}
-
+
this.setState({
config: _config,
- operaType: _operaType,
selectedTables: _config.tables || [],
modalformlist: [
{
@@ -91,11 +97,24 @@
})
}
+ /**
+ * @description 鑾峰彇鏁版嵁琛ㄤ俊鎭�
+ * 1銆佽幏鍙栫郴缁熶腑鍏ㄩ儴琛ㄥ悕
+ * 2銆佹牴鎹凡閫夎〃鍚嶏紝鑾峰彇琛ㄦ牸瀛楁鍒楄〃
+ */
componentDidMount () {
- let _text = 'select TbName ,Remark from sDataDictionary where IsKey!=\'\' and Deleted =0'
- _text = Utils.formatOptions(_text)
+ let param = {
+ func: 'sPC_Get_SelectedList',
+ LText: 'select TbName ,Remark from sDataDictionary where IsKey!=\'\' and Deleted =0',
+ obj_name: 'data',
+ arr_field: 'TbName,Remark'
+ }
- Api.getSystemConfig({func: 'sPC_Get_SelectedList', LText: _text, obj_name: 'data', arr_field: 'TbName,Remark'}).then(res => {
+ 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
@@ -117,6 +136,8 @@
})
})
})
+
+ // 鑾峰彇瀛楁鍚庢暟鎹鐞嗭紝鏍规嵁绫诲瀷鍒嗕负text銆乶umber銆乨atetime銆乨ate
Promise.all(deffers).then(response => {
let _columns = []
response.forEach(res => {
@@ -133,16 +154,6 @@
} 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'
@@ -176,11 +187,17 @@
})
}
+ /**
+ * @description 琛ㄥ崟鍙樺寲
+ * 1銆佽〃鍗曟嫋鎷芥坊鍔犳椂锛屾鏌ユ槸鍚﹀瓨鍦ㄧず渚嬭〃鍗曪紝濡傚瓨鍦ㄥ垯鍘婚櫎绀轰緥
+ * 2銆佽〃鍗曠Щ鍔ㄥ悗锛屼繚瀛樼Щ鍔ㄥ悗鐨勯『搴�
+ */
handleList = (list) => {
let _config = JSON.parse(JSON.stringify(this.state.config))
if (list.length > _config.fields.length) {
_config.fields = list.filter(item => !item.origin)
+
this.setState({
loading: true,
config: _config
@@ -195,6 +212,12 @@
}
}
+ /**
+ * @description 琛ㄥ崟缂栬緫
+ * 1銆佹樉绀虹紪杈戝脊绐�
+ * 2銆佷繚瀛樼紪杈戦」
+ * 3銆佽缃紪杈戝弬鏁伴」
+ */
handleForm = (card) => {
this.setState({
visible: true,
@@ -344,10 +367,16 @@
})
}
+ /**
+ * @description 缂栬緫鍚庢彁浜�
+ * 1銆佽幏鍙栫紪杈戝悗鐨勮〃鍗曚俊鎭�
+ * 2銆佸幓闄ゅ彲鑳藉瓨鍦ㄧ殑绀轰緥琛ㄥ崟
+ * 3銆侀�氳繃loading鍒锋柊
+ */
handleSubmit = () => {
this.formRef.handleConfirm().then(res => {
let _config = JSON.parse(JSON.stringify(this.state.config))
- console.log(res)
+
_config.fields = _config.fields.map(item => {
if (item.uuid === res.uuid) {
return res
@@ -369,6 +398,9 @@
})
}
+ /**
+ * @description 琛ㄥ崟鍒犻櫎骞跺埛鏂�
+ */
closeForm = (card) => {
let _this = this
@@ -396,10 +428,6 @@
},
onCancel() {}
})
- }
-
- changeTemplate = () => {
- this.props.handleConfig('template')
}
submitConfig = () => {
@@ -449,7 +477,6 @@
if (response.status) {
this.setState({
menuloading: false,
- operaType: 'edit',
originMenu: {
...originMenu,
LongParam: _config,
@@ -476,57 +503,53 @@
}
})
- if (this.state.operaType === 'add') {
-
- } 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
- }
- this.setState({
- menuloading: true
- })
+ // 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
+ // }
+ this.setState({
+ menuloading: true
+ })
- 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,
- originMenu: {
- ...originMenu,
- LongParam: _config,
- PageParam: _pageParam,
- MenuName: res.menuName,
- MenuNo: res.menuNo,
- ParentID: res.parentId
- }
- })
- }
+ 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
- })
- notification.warning({
- top: 92,
- message: response.message,
- duration: 10
+ menuloading: false,
+ originMenu: {
+ ...originMenu,
+ LongParam: _config,
+ PageParam: _pageParam,
+ MenuName: res.menuName,
+ MenuNo: res.menuNo,
+ ParentID: res.parentId
+ }
})
}
- })
- }
+ } else {
+ this.setState({
+ menuloading: false
+ })
+ notification.warning({
+ top: 92,
+ message: response.message,
+ duration: 10
+ })
+ }
+ })
}, () => {
notification.warning({
top: 92,
@@ -541,7 +564,8 @@
const { config, originMenu } = this.state
let _this = this
- if (this.state.operaType === 'add') {
+ let isOrigin = config.fields.filter(item => item.origin).length > 0
+ if (isOrigin) {
confirm({
content: '鑿滃崟灏氭湭鎻愪氦锛岀‘瀹氭斁寮冧繚瀛樺悧锛�',
okText: this.state.dict['header.confirm'],
@@ -579,6 +603,12 @@
}
}
+ /**
+ * @description 閫氳繃琛ㄥ瓧娈垫坊鍔犺〃鍗�
+ * 1銆佹鏌ユ槸鍚﹀凡閫夎〃鍚嶏紝涓洪�夋椂璀﹀憡鎻愮ず
+ * 2銆佽〃瀛楁鍚嶉�氳繃map鍘婚噸
+ * 3銆佹鏌ヨ〃鍗曚腑鐨勫凡閫夊瓧娈碉紝骞舵爣璁板凡閫�
+ */
queryField = () => {
const {selectedTables, tableColumns, config} = this.state
if (selectedTables.length === 0) {
@@ -599,7 +629,7 @@
config.fields.forEach(item => {
if (columns.has(item.field)) {
- columns.set(item.field, {...item, selected: true, type: item.type})
+ columns.set(item.field, {...item, selected: true})
}
})
@@ -609,6 +639,13 @@
})
}
+ /**
+ * @description 閫夋嫨瀛楁鍚庢彁浜�
+ * 1銆佹病鏈夊彲閫夊瓧娈垫椂锛岀洿鎺ュ叧闂�
+ * 2銆佽幏鍙栧凡閫夊瓧娈�
+ * 3銆佷笌宸叉湁瀛楁瀵规瘮
+ * 4銆佹坊鍔犳柊澧炲瓧娈�
+ */
addFieldSubmit = () => {
if (!this.state.fields || this.state.fields.length === 0) {
this.setState({
@@ -629,15 +666,15 @@
if (columns.has(item.field)) {
let cell = columns.get(item.field)
- if (cell.selected && cell.type === item.type) { // 鏁版嵁鏈慨鏀�
+ if (cell.selected && cell.type === item.type) { // 鏁版嵁閫夋嫨鐘舵�佸強绫诲瀷鏈慨鏀规椂锛岀洿鎺ユ坊鍔�
items.push(item)
- } else if (cell.selected) { // 鏁版嵁绫诲瀷淇敼
+ } else if (cell.selected) { // 鏁版嵁绫诲瀷淇敼鏃讹紝閲嶇疆绫诲瀷鍙婂垵濮嬪��
item.type = cell.type
item.initval = ''
items.push(item)
}
columns.delete(item.field)
- } else if (!item.origin) {
+ } else if (!item.origin) { // 杩囨护绀轰緥椤�
items.push(item)
}
})
@@ -646,7 +683,7 @@
let indexes = items.map(card => {return card.id})
let id = Math.max(...indexes, 0) + 1
- _columns.forEach(item => {
+ _columns.forEach(item => { // 寰幆娣诲姞鏂板瀛楁
if (item.selected) {
let newcard = {
id: id,
@@ -684,60 +721,70 @@
})
}
+ /**
+ * @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) {
- 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
+ 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
@@ -747,12 +794,18 @@
})
}
+ /**
+ * @description 鍏ㄥ眬璁剧疆妯℃�佹
+ */
changeSetting = () => {
this.setState({
settingVisible: true
})
}
+ /**
+ * @description 淇濆瓨鍏ㄥ眬璁剧疆
+ */
settingSave = () => {
const {config} = this.state
this.settingRef.handleConfirm().then(res => {
@@ -763,6 +816,14 @@
})
}
+ handleGroup = () => {
+
+ }
+
+ handleGroupSave = () => {
+
+ }
+
render () {
const { config } = this.state
@@ -771,26 +832,23 @@
<DndProvider backend={HTML5Backend}>
<div className="tools">
<Collapse accordion defaultActiveKey="0" bordered={false}>
- <Panel header="鍩烘湰淇℃伅" key="0" id="modal-basedata">
- <MenuForm
- dict={this.state.dict}
- formlist={this.state.modalformlist}
- wrappedComponentRef={(inst) => this.menuformRef = inst}
- />
+ <Panel header={this.state.dict['header.menu.basedata']} key="0" id="modal-basedata">
<MenuForm
dict={this.state.dict}
formlist={this.state.modalformlist}
wrappedComponentRef={(inst) => this.menuformRef = inst}
/>
<div className="ant-col ant-form-item-label">
- <label title="娣诲姞琛ㄥ悕">娣诲姞琛ㄥ悕</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={'璇烽�夋嫨琛ㄥ悕'}
+ value={this.state.dict['header.menu.table.placeholder']}
onChange={this.onTableChange}
showArrow={false}
getPopupContainer={() => document.getElementById('modal-basedata')}
@@ -813,18 +871,19 @@
</List.Item>}
/>}
</Panel>
- <Panel header="琛ㄥ崟" key="1">
+ <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()}>娣诲姞琛ㄥ崟</Button>
+ <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="琛ㄥ崟閰嶇疆" bordered={false} extra={
+ <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>
@@ -840,7 +899,24 @@
</div>
<div className="ant-modal-body">
<div className="modal-form">
- {!this.state.loading ?
+ {!this.state.loading && config.groups.length > 1 &&
+ config.groups.map(group => {
+ return (
+ <div key={group.uuid}>
+ <p className="group-title">{group.label}</p>
+ <DragElement
+ list={config.fields}
+ 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 === 1?
<DragElement
list={config.fields}
setting={config.setting}
@@ -854,8 +930,12 @@
</div>
<div className="ant-modal-footer">
<div>
- <button type="button" className="ant-btn"><span>鍙� 娑�</span></button>
- <button type="button" className="ant-btn ant-btn-primary"><span>纭� 瀹�</span></button>
+ <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>
@@ -867,11 +947,7 @@
title={this.state.dict['header.edit']}
visible={this.state.visible}
width={700}
- onCancel={() => {
- this.setState({
- visible: false
- })
- }}
+ onCancel={() => { this.setState({ visible: false }) }}
onOk={this.handleSubmit}
destroyOnClose
>
@@ -888,11 +964,7 @@
width={'65vw'}
style={{minWidth: '900px', maxWidth: '1200px'}}
onOk={this.addFieldSubmit}
- onCancel={() => {
- this.setState({
- tableVisible: false
- })
- }}
+ onCancel={() => { this.setState({ tableVisible: false }) }}
destroyOnClose
>
{this.state.fields && this.state.fields.length > 0 ?
@@ -907,11 +979,7 @@
visible={this.state.settingVisible}
width={700}
onOk={this.settingSave}
- onCancel={() => {
- this.setState({
- settingVisible: false
- })
- }}
+ onCancel={() => { this.setState({ settingVisible: false }) }}
destroyOnClose
>
<SettingForm
@@ -932,7 +1000,21 @@
]}
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
+ data={config.setting}
+ dict={this.state.dict}
+ wrappedComponentRef={(inst) => this.settingRef = inst}
+ />
</Modal>
</div>
)
--
Gitblit v1.8.0