From a8e94242166881639cecf3809e45ca527233ebd7 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 23 三月 2021 16:42:20 +0800
Subject: [PATCH] 2021-03-23
---
src/menu/modalconfig/index.jsx | 593 +++++++++-------------------------------------------------
1 files changed, 96 insertions(+), 497 deletions(-)
diff --git a/src/menu/modalconfig/index.jsx b/src/menu/modalconfig/index.jsx
index c6fa855..06f94c0 100644
--- a/src/menu/modalconfig/index.jsx
+++ b/src/menu/modalconfig/index.jsx
@@ -5,7 +5,7 @@
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import moment from 'moment'
-import { Button, Card, Modal, Collapse, notification, Icon, Empty, Popover } from 'antd'
+import { Button, Card, Modal, Collapse, notification, Icon, Switch } from 'antd'
import Api from '@/api'
import Utils from '@/utils/utils.js'
@@ -14,11 +14,8 @@
import { getModalForm } from '@/templates/zshare/formconfig'
import ModalForm from '@/templates/zshare/modalform'
-import DragElement from '@/templates/modalconfig/dragelement'
import SourceElement from '@/templates/modalconfig/dragelement/source'
import SettingForm from '@/templates/modalconfig/settingform'
-import GroupForm from '@/templates/modalconfig/groupform'
-import EditCard from '@/templates/modalconfig/editcard'
import asyncComponent from '@/utils/asyncComponent'
import { SearchItems } from '@/templates/modalconfig/source'
import './index.scss'
@@ -27,6 +24,8 @@
const { confirm } = Modal
const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
const EditComponent = asyncComponent(() => import('@/templates/zshare/editcomponent'))
+const DragElement = asyncComponent(() => import('@/templates/modalconfig/dragelement'))
+const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
class ComModalConfig extends Component {
static propTpyes = {
@@ -51,11 +50,10 @@
tables: [], // 鍙敤琛ㄥ悕
selectedTables: [], // 宸查�夎〃鍚�
originConfig: null, // 鍘熷鑿滃崟
- groupVisible: false, // 鍏ㄥ眬閰嶇疆妯℃�佹
- curgroup: null, // 褰撳墠缁勶紝鏂板缓鎴栫紪杈�
sources: null, // 琛ㄥ崟绫诲瀷
sqlVerifing: false, // sql楠岃瘉
- openEdition: '' // 缂栬緫鐗堟湰鏍囪锛岄槻姝㈠浜烘搷浣�
+ openEdition: '', // 缂栬緫鐗堟湰鏍囪锛岄槻姝㈠浜烘搷浣�
+ showField: false // 鏄剧ず琛ㄥ崟瀛楁鍊�
}
/**
@@ -65,20 +63,12 @@
const { btn } = this.props
let _config = btn.modal
+ _config.version = '1.0'
this.setState({
config: _config,
originConfig: fromJS(_config).toJS()
})
- }
-
- /**
- * @description 鑾峰彇鏁版嵁琛ㄤ俊鎭�
- * 1銆佽幏鍙栫郴缁熶腑鍏ㄩ儴琛ㄥ悕
- * 2銆佹牴鎹凡閫夎〃鍚嶏紝鑾峰彇琛ㄦ牸瀛楁鍒楄〃
- */
- componentDidMount () {
-
}
/**
@@ -96,78 +86,20 @@
* 2銆佽〃鍗曠Щ鍔ㄥ悗锛屼繚瀛樼Щ鍔ㄥ悗鐨勯『搴�
* 3銆佹柊澧炶〃鍗曟椂锛岀洿鎺ユ墦寮�缂栬緫妗�
*/
- handleList = (list, group, elementId, newcard) => {
+ handleList = (list, newcard) => {
let _config = fromJS(this.state.config).toJS()
- if (!group && !elementId) {
- // 娌℃湁鍒嗙粍鏃讹紙鎷栨嫿娣诲姞锛�
- if (list.length > _config.fields.length) {
- _config.fields = list.filter(item => !item.origin)
-
- this.setState({
- config: _config
- }, () => {
- 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({
- config: _config
- }, () => {
- 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
- }
- })
+ if (list.length > _config.fields.length) {
+ _config.fields = list.filter(item => !item.origin)
this.setState({
config: _config
+ }, () => {
+ this.handleForm(newcard)
})
+ } else {
+ _config.fields = list
+ this.setState({config: _config})
}
}
@@ -188,24 +120,14 @@
value: '',
text: '绌�'
}]
- let _formfields = []
- // 璁剧疆涓嬫媺鑿滃崟鍙叧鑱斿瓧娈�(涓婄骇涓庝笅绾�)
- if (config.groups.length > 0) {
- config.groups.forEach(group => {
- _formfields = [..._formfields, ...group.sublist]
- })
- } else {
- _formfields = config.fields
- }
-
- _inputfields = _formfields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
- _tabfields = _formfields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
+ _inputfields = config.fields.filter(item => item.type === 'text' || item.type === 'number' || item.type === 'textarea' || item.type === 'color')
+ _tabfields = config.fields.filter(item => card.field !== item.field && item.hidden !== 'true' && ['text', 'number', 'select', 'link'].includes(item.type))
_tabfields.unshift({field: '', text: '鍘熻〃鍗�'})
let uniq = new Map()
uniq.set(card.field, true)
- _formfields.forEach(item => {
+ config.fields.forEach(item => {
if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return
if (item.field && !uniq.has(item.field)) {
uniq.set(item.field, true)
@@ -256,37 +178,19 @@
let fieldrepet = false // 瀛楁閲嶅
let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅
- if (_config.groups.length > 0) {
- _config.groups.forEach(group => {
- group.sublist = group.sublist.map(item => {
- if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
- fieldrepet = true
- } else if (item.uuid !== res.uuid && item.label === res.label) {
- labelrepet = true
- }
+ _config.fields = _config.fields.map(item => {
+ if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
+ fieldrepet = true
+ } else if (res.label && item.uuid !== res.uuid && item.label === res.label) {
+ labelrepet = true
+ }
- if (item.uuid === res.uuid) {
- return res
- } else {
- return item
- }
- })
- })
- } else {
- _config.fields = _config.fields.map(item => {
- if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
- fieldrepet = true
- } else if (item.uuid !== res.uuid && item.label === res.label) {
- labelrepet = true
- }
-
- if (item.uuid === res.uuid) {
- return res
- } else {
- return item
- }
- })
- }
+ if (item.uuid === res.uuid) {
+ return res
+ } else {
+ return item
+ }
+ })
if (fieldrepet) {
notification.warning({
@@ -363,14 +267,7 @@
content: `纭畾鍒犻櫎<<${card.label}>>鍚楋紵`,
onOk() {
let _config = fromJS(_this.state.config).toJS()
-
- 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))
- }
+ _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))
_this.setState({
config: _config,
@@ -399,173 +296,6 @@
}
/**
- * @description 閫氳繃琛ㄥ瓧娈垫坊鍔犺〃鍗�
- * 1銆佹鏌ユ槸鍚﹀凡閫夎〃鍚嶏紝涓洪�夋椂璀﹀憡鎻愮ず
- * 2銆佽〃瀛楁鍚嶉�氳繃map鍘婚噸
- * 3銆佹鏌ヨ〃鍗曚腑鐨勫凡閫夊瓧娈碉紝骞舵爣璁板凡閫�
- */
- queryField = () => {
- const { config } = this.state
-
- if (window.GLOB.tableFields.length === 0) {
- notification.warning({
- top: 92,
- message: '璇烽�夋嫨琛ㄥ悕锛�',
- duration: 10
- })
- return
- }
-
- let columns = new Map()
- window.GLOB.tableFields.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 = 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: [],
- orderType: 'asc',
- decimal: 0,
- min: '',
- max: '',
- 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: [],
- orderType: 'asc',
- readonly: 'false',
- required: 'true'
- }
-
- items.push(newcard)
- }
- })
-
- _config.fields = items
- }
-
- this.setState({
- config: _config
- })
- notification.success({
- top: 92,
- message: '娣诲姞鎴愬姛',
- duration: 2
- })
- }
-
- /**
* @description 鍏ㄥ眬璁剧疆妯℃�佹
*/
changeSetting = () => {
@@ -587,115 +317,12 @@
})
}
- 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}>>鍚楋紵`,
- onOk() {
- let _config = fromJS(_this.state.config).toJS()
- _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
- })
- },
- onCancel() {}
- })
- }
-
- handleGroupSave = () => {
- let _group = fromJS(this.state.curgroup).toJS()
- let config = fromJS(this.state.config).toJS()
-
- 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: '',
- config: config
- })
- })
- }
-
editModalCancel = () => {
const { config, card } = this.state
if (card.focus) {
- let _config = null
- if (config.groups.length > 0) {
- let _groups = config.groups.map(group => {
- group.sublist = group.sublist.filter(item => item.uuid !== card.uuid)
- return group
- })
- _config = {...config, groups: _groups}
- } else {
- let _fields = config.fields.filter(item => item.uuid !== card.uuid)
- _config = {...config, fields: _fields}
- }
+ let _fields = config.fields.filter(item => item.uuid !== card.uuid)
+ let _config = {...config, fields: _fields}
this.setState({
card: null,
@@ -711,91 +338,99 @@
}
/**
- * @description 缂栬緫鍔熻兘瀹屾垚鏇存柊锛屽寘鎷В鍐绘寜閽�佺矘璐淬�佹浛鎹㈢瓑
+ * @description 鏇存柊
*/
- updateConfig = (res) => {
- if (res.type === 'paste') {
- this.setState({
- config: res.config
- })
- }
+ updateConfig = (config) => {
+ this.setState({
+ config
+ })
+ }
+
+ changecols = (type) => {
+ let config = fromJS(this.state.config).toJS()
+ let _this = this
+
+ config.fields = config.fields.map(item => {
+ item.labelwidth = 33.3
+ item.span = 24
+ if (['textarea','split','hint','checkcard','brafteditor'].includes(item.type)) {
+ if (type === 2) {
+ item.labelwidth = 16.3
+ } else if (type === 3) {
+ item.labelwidth = 10.5
+ } else if (type === 4) {
+ item.labelwidth = 8.3
+ }
+ } else if (type === 2) {
+ item.span = 12
+ } else if (type === 3) {
+ item.span = 8
+ } else if (type === 4) {
+ item.span = 6
+ }
+ return item
+ })
+
+ confirm({
+ content: `纭畾鍒囨崲涓�${type}鍒楀悧锛焋,
+ onOk() {
+ _this.setState({config})
+ },
+ onCancel() {}
+ })
}
render () {
- const { config } = this.state
+ const { config, dict } = this.state
return (
<div className="modal-form-board">
<DndProvider backend={HTML5Backend}>
<div className="tools">
<Collapse accordion defaultActiveKey="1" bordered={false}>
- <Panel header={this.state.dict['header.menu.form']} key="1">
+ <Panel header={dict['header.menu.form']} key="1">
<div className="search-element">
{SearchItems.map((item, index) => {
return (<SourceElement key={index} content={item}/>)
})}
</div>
- <Button type="primary" block onClick={() => this.queryField()}>{this.state.dict['model.batchAdd']}</Button>
- <Button type="primary" block onClick={() => this.handleGroup()}>{this.state.dict['header.menu.group.add']}</Button>
+ <FieldsComponent
+ config={config}
+ type="form"
+ updatefield={this.updateConfig}
+ />
</Panel>
</Collapse>
</div>
<div className="setting">
- <Card title={this.state.dict['header.menu.form.configurable']} bordered={false} extra={
+ <Card title={dict['header.menu.form.configurable']} bordered={false} extra={
<div>
- <EditComponent dict={this.state.dict} options={['form']} config={this.state.config} refresh={this.updateConfig}/>
- <Button type="primary" onClick={this.submitConfig}>{this.state.dict['model.confirm']}</Button>
- <Button onClick={this.cancelConfig}>{this.state.dict['model.cancel']}</Button>
+ <EditComponent dict={dict} options={['form']} config={this.state.config} refresh={(res) => this.updateConfig(res.config)}/>
+ <Button type="primary" onClick={this.submitConfig}>{dict['model.confirm']}</Button>
+ <Button onClick={this.cancelConfig}>{dict['model.cancel']}</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>
+ <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button>
+ <Button className="mk-cols-change" onClick={() => this.changecols(2)}>2鍒�</Button>
+ <Button className="mk-cols-change" onClick={() => this.changecols(3)}>3鍒�</Button>
+ <Button className="mk-cols-change" onClick={() => this.changecols(4)}>4鍒�</Button>
+ <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
</div>
<div className="ant-modal-body">
<div className="modal-form">
- {config.groups.length > 0 &&
- config.groups.map(group => {
- return (
- <div key={group.uuid}>
- <div className="group-title">
- {!group.default ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
- <div className="mk-popover-control">
- <Icon className="edit" type="edit" onClick={() => {this.handleGroup(group)}} />
- <Icon className="edit close" type="close" onClick={() => {this.closeGroup(group)}} />
- </div>
- } trigger="hover">
- <span>{group.label}</span>
- </Popover> : null}
- {group.default ? <span style={{color: '#bcbcbc'}}>{group.label}</span> : null}
- </div>
- <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>
- )
- })
- }
- {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
- }
+ <DragElement
+ list={config.fields}
+ setting={config.setting}
+ showField={this.state.showField}
+ placeholder={this.state.dict['header.form.modal.placeholder']}
+ handleList={this.handleList}
+ handleForm={this.handleForm}
+ closeForm={this.closeForm}
+ />
</div>
</div>
<div className="ant-modal-footer">
@@ -831,25 +466,6 @@
/>
</Modal>
<Modal
- wrapClassName="modal-fields"
- title={this.state.dict['model.edit']}
- visible={this.state.tableVisible}
- width={'65vw'}
- maskClosable={false}
- style={{minWidth: '900px', maxWidth: '1200px'}}
- onOk={this.addFieldSubmit}
- cancelText={this.state.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={this.state.dict['model.edit']}
visible={this.state.settingVisible}
width={700}
@@ -880,23 +496,6 @@
destroyOnClose
>
{this.state.dict['header.menu.config.placeholder']}
- </Modal>
- <Modal
- title={this.state.dict['header.menu.group.manage']}
- visible={this.state.groupVisible}
- width={700}
- maskClosable={false}
- onOk={this.handleGroupSave}
- onCancel={() => { this.setState({ groupVisible: false }) }}
- destroyOnClose
- >
- <GroupForm
- config={config}
- dict={this.state.dict}
- group={this.state.curgroup}
- inputSubmit={this.handleGroupSave}
- wrappedComponentRef={(inst) => this.groupRef = inst}
- />
</Modal>
</div>
)
--
Gitblit v1.8.0