From 71d4765ba3cdc4a004687cd37a529b565e9ea9fd Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 06 七月 2021 16:26:29 +0800
Subject: [PATCH] 2021-07-06
---
src/mob/searchconfig/index.jsx | 355 +++++++++++++++++++++++++++++++++--------------------------
1 files changed, 198 insertions(+), 157 deletions(-)
diff --git a/src/mob/searchconfig/index.jsx b/src/mob/searchconfig/index.jsx
index 0f0ca45..89587cf 100644
--- a/src/mob/searchconfig/index.jsx
+++ b/src/mob/searchconfig/index.jsx
@@ -10,21 +10,20 @@
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 ModalForm from '@/templates/zshare/modalform'
+import { getSearchForm } from '@/templates/zshare/formconfig'
import SourceElement from '@/templates/modalconfig/dragelement/source'
-import SettingForm from '@/templates/modalconfig/settingform'
+import SettingForm from './settingform'
import asyncComponent from '@/utils/asyncComponent'
import { SearchItems } from './source'
import './index.scss'
const { Panel } = Collapse
const { confirm } = Modal
-const CommonDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS
+const SearchForm = asyncComponent(() => import('@/templates/sharecomponent/searchcomponent/searchform'))
const PasteComponent = asyncComponent(() => import('./pastecomponent'))
-const DragElement = asyncComponent(() => import('@/mob/components/formdragelement'))
-const FieldsComponent = asyncComponent(() => import('@/templates/sharecomponent/fieldscomponent'))
+const DragElement = asyncComponent(() => import('./searchdragelement'))
+const GDragElement = asyncComponent(() => import('./groupdragelement'))
+const GroupForm = asyncComponent(() => import('./groupform'))
class ComModalConfig extends Component {
static propTpyes = {
@@ -34,7 +33,7 @@
}
state = {
- dict: CommonDict, // 瀛楀吀
+ dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀
config: null, // 椤甸潰閰嶇疆锛屽寘鎷ā鏉跨被鍨嬨�佹ā鎬佹璁剧疆銆佹坊鍔犺〃鍚嶃�佽〃鍗曞垪琛�
visible: false, // 琛ㄥ崟缂栬緫妯℃�佹锛屾樉绀烘帶鍒�
formlist: null, // 琛ㄥ崟缂栬緫妯℃�佹锛屽彲缂栬緫瀛楁
@@ -43,21 +42,20 @@
originConfig: null, // 鍘熷鑿滃崟
sqlVerifing: false, // sql楠岃瘉
showField: false, // 鏄剧ず琛ㄥ崟瀛楁鍊�
- standardform: null
+ group: null,
+ editGroup: null
}
/**
* @description 鏁版嵁棰勫鐞�
*/
UNSAFE_componentWillMount () {
- const { btn } = this.props
-
- let _config = btn.modal
- _config.version = '1.0'
+ const { config } = this.props
this.setState({
- config: _config,
- originConfig: fromJS(_config).toJS()
+ group: fromJS(config).toJS(),
+ config: fromJS(config).toJS(),
+ originConfig: fromJS(config).toJS()
})
}
@@ -72,105 +70,74 @@
/**
* @description 琛ㄥ崟鍙樺寲
- * 1銆佽〃鍗曟嫋鎷芥坊鍔犳椂锛屾鏌ユ槸鍚﹀瓨鍦ㄧず渚嬭〃鍗曪紝濡傚瓨鍦ㄥ垯鍘婚櫎绀轰緥
- * 2銆佽〃鍗曠Щ鍔ㄥ悗锛屼繚瀛樼Щ鍔ㄥ悗鐨勯『搴�
- * 3銆佹柊澧炶〃鍗曟椂锛岀洿鎺ユ墦寮�缂栬緫妗�
*/
handleList = (list, newcard) => {
- let _config = fromJS(this.state.config).toJS()
+ let _group = {...this.state.group, fields: list}
- if (list.length > _config.fields.length) {
- _config.fields = list.filter(item => !item.origin)
-
- this.setState({
- config: _config
- }, () => {
+ this.setState({
+ group: _group
+ }, () => {
+ if (newcard) {
this.handleForm(newcard)
- })
+ }
+ })
+ this.resetConfig(_group)
+ }
+
+ /**
+ * @description 鍒嗙粍鍙樺寲
+ */
+ handleGroupList = (list) => {
+ let _group = {...this.state.group, groups: list}
+
+ this.setState({
+ group: _group
+ })
+ this.resetConfig(_group)
+ }
+
+ /**
+ * @description 琛ㄥ崟鍙樺寲
+ */
+ handleList = (list, newcard) => {
+ let _group = {...this.state.group, fields: list}
+
+ this.setState({
+ group: _group
+ }, () => {
+ if (newcard) {
+ this.handleForm(newcard)
+ }
+ })
+ this.resetConfig(_group)
+ }
+
+ resetConfig = (group) => {
+ let _config = fromJS(this.state.config).toJS()
+ if (group.floor === 1) {
+ _config = group
} else {
- _config.fields = list
- this.setState({config: _config})
+ _config.groups = _config.groups.map(item => {
+ if (item.uuid === group.uuid) return group
+ return item
+ })
}
+
+ this.setState({
+ config: _config
+ })
}
/**
* @description 琛ㄥ崟缂栬緫
- * 1銆佹樉绀虹紪杈戝脊绐�-visible
- * 2銆佷繚瀛樼紪杈戦」-card
- * 3銆佽缃紪杈戝弬鏁伴」-formlist
*/
handleForm = (_card) => {
- const { componentConfig } = this.props
- const { config } = this.state
let card = fromJS(_card).toJS()
- let _inputfields = []
- let _tabfields = []
- let _linkableFields = []
- let _linksupFields = [{
- value: '',
- text: '绌�'
- }]
- let standardform = null
-
- _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)
- let index = null
- config.fields.forEach((item, i) => {
- if (card.uuid === item.uuid) {
- index = i
- }
- if (item.type !== 'select' && item.type !== 'link' && item.type !== 'radio') return
- if (item.field && !uniq.has(item.field)) {
- uniq.set(item.field, true)
-
- _linkableFields.push({
- value: item.field,
- text: item.label + ' (琛ㄥ崟)'
- })
- _linksupFields.push({
- value: item.field,
- text: item.label
- })
- }
- })
- if (index !== null) {
- if (index === 0) {
- standardform = config.fields[index + 1] || null
- } else {
- standardform = config.fields[index - 1] || null
- }
- }
-
- componentConfig.columns.forEach(col => {
- if (col.field && !uniq.has(col.field)) {
- uniq.set(col.field, true)
-
- _linkableFields.push({
- value: col.field,
- text: col.label + ' (鏄剧ず鍒�)'
- })
- }
- })
-
- if (card.linkSubField && card.linkSubField.length > 0) {
- let fields = _inputfields.map(item => item.field)
- card.linkSubField = card.linkSubField.filter(item => fields.includes(item))
- }
-
- if (!card.span && standardform && standardform.span) {
- card.span = standardform.span
- card.labelwidth = standardform.labelwidth
- }
this.setState({
- standardform,
visible: true,
card: card,
- formlist: getModalForm(card, _inputfields, _tabfields, _linkableFields, _linksupFields, !!this.props.editTab)
+ formlist: getSearchForm(card, [])
})
}
@@ -182,15 +149,12 @@
*/
handleSubmit = () => {
this.formRef.handleConfirm().then(res => {
- let _config = fromJS(this.state.config).toJS()
+ let _group = fromJS(this.state.group).toJS()
let fieldrepet = false // 瀛楁閲嶅
- let labelrepet = false // 鎻愮ず鏂囧瓧閲嶅
- _config.fields = _config.fields.map(item => {
- if (item.uuid !== res.uuid && res.field && item.field && item.field.toLowerCase() === res.field.toLowerCase()) {
+ _group.fields = _group.fields.map(item => {
+ if (item.uuid !== res.uuid && 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) {
@@ -207,18 +171,9 @@
duration: 10
})
return
- } else if (labelrepet) {
- notification.warning({
- top: 92,
- message: '鍚嶇О宸插瓨鍦紒',
- duration: 10
- })
- return
}
- _config.fields = _config.fields.filter(item => !item.origin)
-
- if (['select', 'multiselect', 'link', 'checkbox', 'radio', 'checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
+ if (['checkcard'].includes(res.type) && res.resourceType === '1' && /\s/.test(res.dataSource)) {
this.setState({
sqlVerifing: true
})
@@ -243,10 +198,11 @@
if (result.status) {
this.setState({
sqlVerifing: false,
- config: _config,
+ group: _group,
card: null,
visible: false
})
+ this.resetConfig(_group)
} else {
this.setState({sqlVerifing: false})
@@ -257,10 +213,11 @@
})
} else {
this.setState({
- config: _config,
+ group: _group,
card: null,
visible: false
})
+ this.resetConfig(_group)
}
})
}
@@ -274,12 +231,13 @@
confirm({
content: `纭畾鍒犻櫎${card.label ? `<<${card.label}>>` : ''}鍚楋紵`,
onOk() {
- let _config = fromJS(_this.state.config).toJS()
- _config.fields = _config.fields.filter(item => !(item.uuid === card.uuid))
+ let _group = fromJS(_this.state.group).toJS()
+ _group.fields = _group.fields.filter(item => item.uuid !== card.uuid)
_this.setState({
- config: _config,
+ group: _group,
})
+ _this.resetConfig(_group)
},
onCancel() {}
})
@@ -315,7 +273,7 @@
}
/**
- * @description 鍏ㄥ眬璁剧疆妯℃�佹
+ * @description 鍒嗙粍璁剧疆妯℃�佹
*/
changeSetting = () => {
this.setState({
@@ -324,30 +282,32 @@
}
/**
- * @description 淇濆瓨鍏ㄥ眬璁剧疆
+ * @description 淇濆瓨鍒嗙粍璁剧疆
*/
settingSave = () => {
- const {config} = this.state
this.settingRef.handleConfirm().then(res => {
+ let _group = {...this.state.group, setting: res}
this.setState({
- config: {...config, setting: res},
+ group: _group,
settingVisible: false
})
+ this.resetConfig(_group)
})
}
editModalCancel = () => {
- const { config, card } = this.state
+ const { group, card } = this.state
if (card.focus) {
- let _fields = config.fields.filter(item => item.uuid !== card.uuid)
- let _config = {...config, fields: _fields}
+ let _fields = group.fields.filter(item => item.uuid !== card.uuid)
+ let _group = {...group, fields: _fields}
this.setState({
card: null,
- config: _config,
+ group: _group,
visible: false
})
+ this.resetConfig(_group)
} else {
this.setState({
card: null,
@@ -356,18 +316,77 @@
}
}
- /**
- * @description 鏇存柊
+ plusGroup = () => {
+ let config = fromJS(this.state.config).toJS()
+ let _g = {
+ uuid: Utils.getuuid(),
+ wrap: { name: 'name', icon: '' },
+ setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' },
+ fields: []
+ }
+
+ config.groups.push(_g)
+
+ this.setState({config, group: config, editGroup: _g, gVisible: true})
+ }
+
+ handleGroupForm = (_g) => {
+ this.setState({editGroup: _g, gVisible: true})
+ }
+
+ /**
+ * @description 淇濆瓨鍒嗙粍璁剧疆
*/
- updateConfig = (config) => {
+ groupSave = () => {
+ this.gRef.handleConfirm().then(res => {
+ let _g = {...this.state.editGroup, wrap: res}
+
+ let _group = fromJS(this.state.group).toJS()
+ _group.groups = _group.groups.map(item => {
+ if (item.uuid === _g.uuid) return _g
+ return item
+ })
+
+ this.setState({
+ editGroup: null,
+ group: _group,
+ gVisible: false
+ })
+ this.resetConfig(_group)
+ })
+ }
+
+ handleGroup = (g) => {
this.setState({
- config
+ group: g
+ })
+ }
+
+ closeGroup = (g) => {
+ const _this = this
+ let _group = fromJS(this.state.group).toJS()
+ _group.groups = _group.groups.filter(item => item.uuid !== g.uuid)
+
+ confirm({
+ content: `纭畾鍒犻櫎鍒嗙粍銆�${g.wrap.name}銆嬪悧锛焋,
+ onOk() {
+ _this.setState({ group: _group })
+ _this.resetConfig(_group)
+ },
+ onCancel() {}
+ })
+ }
+
+ returnUp = () => {
+ const { config } = this.state
+
+ this.setState({
+ group: config
})
}
render () {
- const { config, dict } = this.state
-
+ const { dict, group, editGroup } = this.state
return (
<div className="mob-search-board">
<DndProvider backend={HTML5Backend}>
@@ -379,38 +398,48 @@
return (<SourceElement key={index} content={item}/>)
})}
</div>
- <FieldsComponent
- config={config}
- type="form"
- updatefield={this.updateConfig}
- />
</Panel>
</Collapse>
</div>
<div className="modal-control">
- <Button icon="setting" onClick={this.changeSetting}>璁剧疆</Button>
<Button type="primary" onClick={this.submitConfig}>淇濆瓨</Button>
- <Button onClick={this.cancelConfig}>杩斿洖</Button>
- <PasteComponent type="menu" Tab={null} insert={this.insert} />
+ <Button onClick={this.cancelConfig}>鍏抽棴</Button>
+ {!group.floor ? <Button onClick={this.returnUp}>杩斿洖涓婄骇</Button> : null}
+ <PasteComponent insert={this.insert} />
<Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} />
</div>
<div className="setting">
<div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}>
<div className="mob-shell-inner">
- <div className="am-navbar">
+ <Icon className="setting-group" onClick={this.changeSetting} type="setting" />
+ {group.setting.type === 'title' ? <div className="am-navbar">
<Icon type="close" />
- <div className="am-navbar-title">{config.setting.title}</div>
+ <div className="am-navbar-title">{group.setting.title}</div>
+ </div> : <div className="am-navbar">
+ <Icon type="left" />
+ <div className="search-bar"><Icon type="search" /></div>
+ </div>}
+ {group.floor === 1 ? <Icon className="plus-group" type="plus" onClick={this.plusGroup} /> : null}
+ <div style={{minHeight: 'calc(100% - 100px)'}}>
+ {group.floor === 1 && group.groups.length > 0 ? <GDragElement
+ list={group.groups}
+ handleList={this.handleGroupList}
+ handleForm={this.handleGroupForm}
+ handleGroup={this.handleGroup}
+ closeForm={this.closeGroup}
+ /> : null}
+ <DragElement
+ list={group.fields}
+ showField={this.state.showField}
+ handleList={this.handleList}
+ handleForm={this.handleForm}
+ closeForm={this.closeForm}
+ />
</div>
- <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}
- />
- <Button className="modal-submit" type="primary">纭畾</Button>
+ {group.setting.btn !== 'hidden' ? <div className="search-btn">
+ <Button className="reset">閲嶇疆</Button>
+ <Button className="submit" type="primary">纭畾</Button>
+ </div> : null}
</div>
</div>
</div>
@@ -424,12 +453,11 @@
confirmLoading={this.state.sqlVerifing}
destroyOnClose
>
- <ModalForm
+ <SearchForm
dict={this.state.dict}
card={this.state.card}
formlist={this.state.formlist}
inputSubmit={this.handleSubmit}
- standardform={this.state.standardform}
wrappedComponentRef={(inst) => this.formRef = inst}
/>
</Modal>
@@ -443,13 +471,26 @@
destroyOnClose
>
<SettingForm
- config={config}
- dict={this.state.dict}
- isSubTab={!!this.props.editTab}
+ config={group}
inputSubmit={this.settingSave}
wrappedComponentRef={(inst) => this.settingRef = inst}
/>
</Modal>
+ <Modal
+ title={this.state.dict['model.edit']}
+ visible={this.state.gVisible}
+ width={600}
+ maskClosable={false}
+ onOk={this.groupSave}
+ onCancel={() => { this.setState({ gVisible: false }) }}
+ destroyOnClose
+ >
+ <GroupForm
+ config={editGroup}
+ inputSubmit={this.groupSave}
+ wrappedComponentRef={(inst) => this.gRef = inst}
+ />
+ </Modal>
</div>
)
}
--
Gitblit v1.8.0