From 2cb65d99c9aebf8293cb2838fcfe3e09fb2739ce Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 06 十二月 2019 00:15:12 +0800
Subject: [PATCH] 2019-12-06
---
src/templates/modalconfig/index.jsx | 610 +++++++++++++++++++++++-------------------------------
1 files changed, 261 insertions(+), 349 deletions(-)
diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx
index 1a28518..b8ce5bd 100644
--- a/src/templates/modalconfig/index.jsx
+++ b/src/templates/modalconfig/index.jsx
@@ -3,15 +3,13 @@
import { is, fromJS } from 'immutable'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
-import { Button, Card, Modal, Collapse, notification, Select, List, Icon } from 'antd'
+import { Button, Card, Modal, Collapse, notification, Select, List, Icon, Empty } from 'antd'
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 ModalForm from './modalform'
import SettingForm from './settingform'
-// import EditCard from './editcard'
+import EditCard from './editcard'
import MenuForm from './menuform'
import zhCN from '@/locales/zh-CN/comtable.js'
import enUS from '@/locales/en-US/comtable.js'
@@ -42,11 +40,8 @@
fields: null, // 鎼滅储鏉′欢鍙婃樉绀哄垪锛屽彲閫夊瓧娈�
modalformlist: null, // 鍩烘湰淇℃伅琛ㄥ崟瀛楁
formlist: null, // 鎼滅储鏉′欢銆佹寜閽�佹樉绀哄垪琛ㄥ崟瀛楁
- formtemp: '', // 琛ㄥ崟绫诲瀷锛屾樉绀哄垪銆佹寜閽�佹悳绱㈡潯浠�
card: null, // 缂栬緫鍏冪礌
- searchloading: false, // 鎼滅储鏉′欢鍔犺浇涓�
- actionloading: false, // 鎸夐挳鍔犺浇涓�
- columnsloading: false, // 鏄剧ず鍒楀姞杞戒腑
+ loading: false, // 鎼滅储鏉′欢鍔犺浇涓�
menuloading: false, // 鑿滃崟淇濆瓨涓�
settingVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹
closeVisible: false, // 鍏抽棴妯℃�佹
@@ -58,10 +53,22 @@
UNSAFE_componentWillMount () {
const {menu, editAction} = this.props
- let _config = JSON.parse(JSON.stringify((Source.baseConfig)))
+ let _config = ''
+ let _operaType = 'add'
+ if (editAction.pageParam) {
+ _config = editAction.pageParam
+ _operaType = 'edit'
+ } else {
+ _config = JSON.parse(JSON.stringify((Source.baseConfig)))
+ }
+
+ if (!_config.setting.title) {
+ _config.setting.title = editAction.label
+ }
this.setState({
config: _config,
+ operaType: _operaType,
selectedTables: _config.tables || [],
modalformlist: [
{
@@ -77,22 +84,6 @@
key: 'btnName',
label: '鎸夐挳鍚嶇О',
initVal: editAction.label,
- required: true,
- readonly: true
- },
- {
- type: 'text',
- key: 'menuNo',
- label: this.state.dict['header.menu.menuNo'],
- initVal: menu.MenuNo,
- required: true,
- readonly: true
- },
- {
- type: 'text',
- key: 'opentype',
- label: this.state.dict['header.menu.openType'],
- initVal: '寮圭獥锛堣〃鍗曪級',
required: true,
readonly: true
}
@@ -185,36 +176,28 @@
})
}
- handleList = (listObj) => {
- let config = this.state.config
- if (this.state.operaType === 'add') {
- let key = Object.keys(listObj)[0]
- let newlength = listObj[key].length
- if (newlength > config[key].length) {
- listObj[key] = listObj[key].filter(item => !item.origin)
- }
- if (newlength > listObj[key].length) {
+ 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
+ }, () => {
this.setState({
- [key + 'loading']: true,
- config: {...config, ...listObj}
+ loading: false
})
- setTimeout(() => {
- this.setState({
- [key + 'loading']: false
- })
- }, 100)
- } else {
- this.setState({config: {...config, ...listObj}})
- }
+ })
} else {
- this.setState({config: {...config, ...listObj}})
+ _config.fields = list
+ this.setState({config: _config})
}
}
- handleSearch = (card) => {
+ handleForm = (card) => {
this.setState({
visible: true,
- formtemp: 'search',
card: card,
formlist: [
{
@@ -234,34 +217,40 @@
readonly: false
},
{
- type: 'text',
- key: 'initval',
- label: this.state.dict['header.form.initval'],
- initVal: card.initval,
- required: false
- },
- {
type: 'select',
key: 'type',
label: this.state.dict['header.form.type'],
initVal: card.type,
required: true,
options: [{
- MenuID: 'text',
+ value: 'text',
text: this.state.dict['header.form.text']
}, {
- MenuID: 'select',
+ value: 'select',
text: this.state.dict['header.form.select']
}, {
- MenuID: 'link',
+ value: 'link',
text: this.state.dict['header.form.link']
}, {
- MenuID: 'date',
+ value: 'date',
text: this.state.dict['header.form.dateday']
}, {
- MenuID: 'datetime',
- text: this.state.dict['header.form.datetime']
+ 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',
@@ -270,10 +259,10 @@
initVal: card.resourceType || '0',
required: true,
options: [{
- MenuID: '0',
+ value: '0',
text: this.state.dict['header.form.custom']
}, {
- MenuID: '1',
+ value: '1',
text: this.state.dict['header.form.datasource']
}]
},
@@ -283,10 +272,10 @@
label: this.state.dict['header.form.setAll'],
initVal: card.setAll || 'false',
options: [{
- MenuID: 'true',
+ value: 'true',
text: this.state.dict['header.form.true']
}, {
- MenuID: 'false',
+ value: 'false',
text: this.state.dict['header.form.false']
}]
},
@@ -344,25 +333,11 @@
label: this.state.dict['header.form.orderType'],
initVal: card.orderType || 'asc',
options: [{
- MenuID: 'asc',
+ value: 'asc',
text: this.state.dict['header.form.asc']
}, {
- MenuID: 'desc',
+ value: 'desc',
text: this.state.dict['header.form.desc']
- }]
- },
- {
- type: 'select',
- key: 'display',
- label: this.state.dict['header.form.display'],
- initVal: card.display || 'dropdown',
- required: true,
- options: [{
- MenuID: 'dropdown',
- text: this.state.dict['header.form.dropdown']
- }, {
- MenuID: 'button',
- text: this.state.dict['header.form.button']
}]
}
]
@@ -371,70 +346,56 @@
handleSubmit = () => {
this.formRef.handleConfirm().then(res => {
- let _config = this.state.config
-
- if (this.state.operaType === 'add') {
- _config[res.type] = _config[res.type].map(item => {
- if (item.uuid === res.values.uuid) {
- 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) {
- return res.values
- } else {
- return item
- }
- })
- }
+ 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
+ } else {
+ return item
+ }
+ })
+ _config.fields = _config.fields.filter(item => !item.origin)
this.setState({
config: _config,
- [res.type + 'loading']: true,
+ loading: true,
visible: false
+ }, () => {
+ this.setState({
+ loading: false
+ })
})
- this.resetFrom()
})
}
- deleteElement = () => {
- let _config = this.state.config
- _config[this.state.formtemp] = _config[this.state.formtemp].filter(item => {
- if (item.uuid === this.state.card.uuid) {
- return false
- } else {
- return true
- }
- })
- this.setState({
- config: _config,
- [this.state.formtemp + 'loading']: true,
- visible: false
- })
- this.resetFrom()
- }
+ closeForm = (card) => {
+ let _this = this
- handleCancel = () => {
- this.setState({
- visible: false
+ 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))
+ _config.fields = _config.fields.filter(item => {
+ if (item.uuid === card.uuid) {
+ return false
+ } else {
+ return true
+ }
+ })
+ _this.setState({
+ config: _config,
+ loading: true
+ }, () => {
+ _this.setState({
+ loading: false
+ })
+ })
+ },
+ onCancel() {}
})
- this.resetFrom()
- }
-
- resetFrom = () => {
- setTimeout(() => {
- this.setState({
- // formtemp: '',
- searchloading: false,
- actionloading: false,
- columnsloading: false
- // formlist: null
- })
- }, 10)
}
changeTemplate = () => {
@@ -445,26 +406,11 @@
const { menu } = this.props
const { config, originMenu } = this.state
this.menuformRef.handleConfirm().then(res => {
- if (config.search[0] && config.search[0].origin) {
+
+ if (!config.fields[0] && config.fields[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: '璇疯缃樉绀哄垪',
+ message: '璇锋坊鍔犺〃鍗�',
duration: 10
})
return
@@ -485,51 +431,53 @@
return
}
- 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
- }
- this.setState({
- menuloading: true
- })
+ let param = {
+ func: 'sPC_ButtonParam_AddUpt',
+ 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) {
- this.setState({
- menuloading: false,
- operaType: 'edit',
- originMenu: {
- ...originMenu,
- LongParam: _config,
- PageParam: _pageParam,
- MenuName: res.menuName,
- MenuNo: res.menuNo,
- ParentID: res.parentId
- }
- })
- notification.success({
- top: 92,
- message: '淇濆瓨鎴愬姛',
- duration: 10
- })
- } else {
- this.setState({
- menuloading: false
- })
- notification.warning({
- top: 92,
- message: response.message,
- duration: 10
- })
- }
- })
+ Api.getSystemConfig(param).then(response => {
+ if (response.status) {
+ this.setState({
+ menuloading: false,
+ operaType: 'edit',
+ originMenu: {
+ ...originMenu,
+ LongParam: _config,
+ PageParam: _pageParam,
+ MenuName: res.menuName,
+ MenuNo: res.menuNo,
+ ParentID: res.parentId
+ }
+ })
+ notification.success({
+ top: 92,
+ message: '淇濆瓨鎴愬姛',
+ duration: 10
+ })
+ } else {
+ this.setState({
+ menuloading: false
+ })
+ notification.warning({
+ top: 92,
+ message: response.message,
+ duration: 10
+ })
+ }
+ })
+
+ if (this.state.operaType === 'add') {
+
} else {
let param = {
func: 'sPC_TrdMenu_Upt',
@@ -631,7 +579,7 @@
}
}
- queryField = (type) => {
+ queryField = () => {
const {selectedTables, tableColumns, config} = this.state
if (selectedTables.length === 0) {
notification.warning({
@@ -649,22 +597,13 @@
})
})
- if (type === 'search') {
- config.search.forEach(item => {
- if (columns.has(item.field)) {
- columns.set(item.field, {...item, selected: true, type: item.type})
- }
- })
- } else if (type === 'columns') {
- config.columns.forEach(item => {
- if (columns.has(item.field)) {
- columns.set(item.field, {...item, selected: true, type: item.type})
- }
- })
- }
+ config.fields.forEach(item => {
+ if (columns.has(item.field)) {
+ columns.set(item.field, {...item, selected: true, type: item.type})
+ }
+ })
this.setState({
- addType: type,
tableVisible: true,
fields: [...columns.values()]
})
@@ -673,118 +612,75 @@
addFieldSubmit = () => {
if (!this.state.fields || this.state.fields.length === 0) {
this.setState({
- tableVisible: false,
- addType: ''
+ tableVisible: false
})
}
- const {addType, config} = this.state
+ let _config = JSON.parse(JSON.stringify(this.state.config))
- let cards = this.refs.searchcard.getSelectedCard()
+ let cards = this.refs.searchcard.state.selectCards
let columns = new Map()
cards.forEach(card => {
columns.set(card.field, card)
})
let items = []
- if (addType === 'search') {
- config.search.forEach(item => {
- if (columns.has(item.field)) {
- let cell = columns.get(item.field)
+ _config.fields.forEach(item => {
+ if (columns.has(item.field)) {
+ let cell = columns.get(item.field)
- if (cell.selected) {
- items.push(item)
- }
- columns.delete(item.field)
- } else if (!item.origin) {
+ if (cell.selected && cell.type === item.type) { // 鏁版嵁鏈慨鏀�
+ items.push(item)
+ } else if (cell.selected) { // 鏁版嵁绫诲瀷淇敼
+ item.type = cell.type
+ item.initval = ''
items.push(item)
}
- })
-
- let _columns = [...columns.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(),
- label: item.label,
- field: item.field,
- initval: '',
- type: item.type,
- resourceType: '0',
- setAll: 'false',
- options: [],
- dataSource: '',
- linkField: '',
- valueField: '',
- valueText: '',
- orderBy: '',
- orderType: 'asc',
- display: 'dropdown'
- }
-
- items.push(newcard)
- id++
- }
- })
- } else {
- config.columns.forEach(item => {
- if (columns.has(item.field)) {
- let cell = columns.get(item.field)
-
- if (cell.selected) {
- items.push(item)
- }
- columns.delete(item.field)
- } else if (!item.origin) {
- items.push(item)
- }
- })
-
- let _columns = [...columns.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}
+ columns.delete(item.field)
+ } else if (!item.origin) {
+ items.push(item)
+ }
})
- setTimeout(() => {
- this.setState({
- [addType + 'loading']: false
- })
- }, 100)
- }
- cancelFieldSubmit = () => {
+ let _columns = [...columns.values()]
+ let indexes = items.map(card => {return card.id})
+ let id = Math.max(...indexes, 0) + 1
+
+ _columns.forEach(item => {
+ if (item.selected) {
+ 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',
+ }
+
+ items.push(newcard)
+ id++
+ }
+ })
+
+ _config.fields = items
+
this.setState({
tableVisible: false,
- addType: ''
+ loading: true,
+ config: _config
+ }, () => {
+ this.setState({
+ loading: false
+ })
})
}
@@ -811,16 +707,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'
@@ -877,19 +763,20 @@
})
}
- cancelSetting = () => {
- this.setState({
- settingVisible: 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="鍩烘湰淇℃伅" key="0" id="modal-basedata">
+ <MenuForm
+ dict={this.state.dict}
+ formlist={this.state.modalformlist}
+ wrappedComponentRef={(inst) => this.menuformRef = inst}
+ />
<MenuForm
dict={this.state.dict}
formlist={this.state.modalformlist}
@@ -932,7 +819,7 @@
return (<SourceElement key={index} content={item}/>)
})}
</div>
- <Button type="primary" block onClick={() => this.queryField('search')}>娣诲姞琛ㄥ崟</Button>
+ <Button type="primary" block onClick={() => this.queryField()}>娣诲姞琛ㄥ崟</Button>
</Panel>
</Collapse>
</div>
@@ -944,31 +831,51 @@
</div>
} style={{ width: '100%' }}>
<Icon type="setting" onClick={this.changeSetting} />
- <div className="search-list">
- {<DragElement
- list={this.state.config.search}
- type="search"
- placeholder={this.state.dict['header.form.search.placeholder']}
- handleList={this.handleList}
- handleMenu={this.handleSearch}
- />}
+ <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 ?
+ <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>鍙� 娑�</span></button>
+ <button type="button" className="ant-btn ant-btn-primary"><span>纭� 瀹�</span></button>
+ </div>
+ <div className="action-mask"></div>
+ </div>
</div>
</Card>
</div>
</DndProvider>
- {/* <Modal
+ <Modal
title={this.state.dict['header.edit']}
visible={this.state.visible}
width={700}
- onCancel={this.handleCancel}
- footer={[
- <Button key="delete" type="danger" onClick={this.deleteElement}>{this.state.dict['header.delete']}</Button>,
- <Button key="cancel" onClick={this.handleCancel}>{this.state.dict['header.cancel']}</Button>,
- <Button key="confirm" type="primary" onClick={this.handleSubmit}>{this.state.dict['header.confirm']}</Button>
- ]}
+ onCancel={() => {
+ this.setState({
+ visible: false
+ })
+ }}
+ onOk={this.handleSubmit}
destroyOnClose
>
- {this.state.formtemp === 'search' && <SearchForm
+ {<ModalForm
dict={this.state.dict}
formlist={this.state.formlist}
card={this.state.card}
@@ -981,29 +888,34 @@
width={'65vw'}
style={{minWidth: '900px', maxWidth: '1200px'}}
onOk={this.addFieldSubmit}
- onCancel={this.cancelFieldSubmit}
+ onCancel={() => {
+ this.setState({
+ tableVisible: false
+ })
+ }}
destroyOnClose
>
- {this.state.addType === 'search' && this.state.fields.length > 0 &&
- <EditCard data={this.state.fields} ref="searchcard" type="search" />
- }
- {this.state.addType === 'columns' && this.state.fields.length > 0 &&
- <EditCard data={this.state.fields} ref="searchcard" type="columns" />
+ {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>
<Modal
title={this.state.dict['header.edit']}
visible={this.state.settingVisible}
width={700}
onOk={this.settingSave}
- onCancel={this.cancelSetting}
+ onCancel={() => {
+ this.setState({
+ settingVisible: false
+ })
+ }}
destroyOnClose
>
<SettingForm
- data={this.state.config.setting}
+ data={config.setting}
dict={this.state.dict}
wrappedComponentRef={(inst) => this.settingRef = inst}
/>
--
Gitblit v1.8.0