From 95afd40fc2741ac0ce59c2091f6cfce1f98877d4 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 24 六月 2021 09:15:45 +0800
Subject: [PATCH] 2021-06-24
---
src/templates/sharecomponent/searchcomponent/searchform/index.jsx | 142 ++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 121 insertions(+), 21 deletions(-)
diff --git a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
index 9918283..8a4b9f2 100644
--- a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
+++ b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
@@ -6,7 +6,12 @@
import EditTable from '../searcheditable'
import Utils from '@/utils/utils.js'
import CodeMirror from '@/templates/zshare/codemirror'
+import asyncComponent from '@/utils/asyncComponent'
import './index.scss'
+
+const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
+const FieldsTable = asyncComponent(() => import('@/templates/zshare/modalform/fieldtable'))
+const DataTable = asyncComponent(() => import('@/templates/zshare/modalform/datatable'))
const groupOptions = [
{
@@ -87,6 +92,7 @@
multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'],
link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll'],
date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'],
+ checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'borderColor', 'required', 'Hide', 'labelShow', 'advanced'],
dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'],
datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'],
daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced'],
@@ -105,6 +111,8 @@
openType: null, // 鎼滅储鏉′欢鏄剧ず绫诲瀷
resourceType: null, // 涓嬫媺鎼滅储鏃讹紝閫夐」鏉ユ簮绫诲瀷
formlist: null, // 琛ㄥ崟
+ display: null,
+ cFields: [],
textTooltip: '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱�',
}
@@ -116,16 +124,34 @@
UNSAFE_componentWillMount () {
const { formlist, dict } = this.props
- let type = formlist.filter(cell => cell.key === 'type')[0].initVal
- let _items = formlist.filter(cell => cell.key === 'items')[0].initVal
- let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
+ let type = ''
+ let _items = []
+ let resourceType = ''
+ let display = ''
+ let cFields = []
- let _options = this.getOptions(type, resourceType)
+ formlist.forEach(cell => {
+ if (cell.key === 'type') {
+ type = cell.initVal
+ } else if (cell.key === 'items') {
+ _items = cell.initVal
+ } else if (cell.key === 'display') {
+ display = cell.initVal
+ } else if (cell.key === 'resourceType') {
+ resourceType = cell.initVal
+ } else if (cell.key === 'fields') {
+ cFields = cell.initVal
+ }
+ })
+
+ let _options = this.getOptions(type, resourceType, display)
this.setState({
+ display,
+ cFields,
openType: type,
items: _items,
- resourceType: resourceType,
+ resourceType,
formlist: formlist.map(form => {
// 琛ㄥ崟涓哄垵濮嬪�煎瓧娈碉紝涓旀暟鎹被鍨嬪睘浜庢椂闂寸被鍨嬫椂锛岃缃垵濮嬪�间负涓嬫媺閫夋嫨锛屽苟閲嶇疆閫夋嫨椤�
if (form.key === 'initval' && dateOptions.hasOwnProperty(type)) {
@@ -139,7 +165,7 @@
form.options = matchReg.text
} else if (type === 'multiselect') {
form.options = matchReg.multiselect
- } else if (type === 'select' || type === 'link') {
+ } else if (type === 'select' || type === 'link' || type === 'checkcard') {
form.options = matchReg.select
} else if (type === 'date') {
form.options = matchReg.date
@@ -172,13 +198,27 @@
}
}
- getOptions = (type, resourceType) => {
+ getOptions = (type, resourceType, display) => {
let _options = fromJS(searchTypeOptions[type]).toJS() // 閫夐」鍒楄〃
if (['multiselect', 'select', 'link'].includes(type) && resourceType === '0') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓鸿嚜瀹氫箟璧勬簮
_options.push('options')
} else if (['multiselect', 'select', 'link'].includes(type) && resourceType === '1') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓哄悗鍙版暟鎹簮涓幏鍙�
_options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database')
+ } else if (type === 'checkcard') {
+ if (display === 'picture') {
+ if (resourceType === '0') { // 鑷畾涔夎祫婧�
+ _options.push('options', 'picratio')
+ } else if (resourceType === '1') { // 鏁版嵁婧�
+ _options.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'database', 'picratio')
+ }
+ } else {
+ if (resourceType === '0') { // 鑷畾涔夎祫婧�
+ _options.push('options', 'fields', 'backgroundColor')
+ } else if (resourceType === '1') { // 鏁版嵁婧�
+ _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor')
+ }
+ }
}
return _options
@@ -189,10 +229,10 @@
*/
openTypeChange = (key, value) => {
const { dict } = this.props
- const { resourceType, items } = this.state
+ const { resourceType, items, display } = this.state
if (key === 'type') {
- let _options = this.getOptions(value, resourceType)
+ let _options = this.getOptions(value, resourceType, display)
let matchs = []
this.setState({
@@ -215,7 +255,7 @@
form.options = matchReg.text
} else if (value === 'multiselect') {
form.options = matchReg.multiselect
- } else if (value === 'select' || value === 'link') {
+ } else if (value === 'select' || value === 'link' || value === 'checkcard') {
form.options = matchReg.select
} else if (value === 'date') {
form.options = matchReg.date
@@ -252,11 +292,11 @@
* @description 鏁版嵁婧愮被鍨嬪垏鎹�
*/
onChange = (e, key) => {
- const { openType } = this.state
+ const { openType, display, resourceType } = this.state
let value = e.target.value
if (key === 'resourceType') {
- let _options = this.getOptions(openType, value)
+ let _options = this.getOptions(openType, value, display)
this.setState({
resourceType: value,
@@ -265,7 +305,29 @@
return form
})
})
+ } else if (key === 'display') {
+ let _options = this.getOptions(openType, resourceType, value)
+
+ this.setState({
+ display: value,
+ formlist: this.state.formlist.map(form => {
+ form.hidden = !_options.includes(form.key)
+ return form
+ })
+ })
}
+ }
+
+ changeField = (data) => {
+ this.setState({
+ cFields: data,
+ formlist: this.state.formlist.map(form => {
+ if (form.key === 'fields') {
+ form.initVal = data
+ }
+ return form
+ })
+ })
}
checkChange = (values, key) => {
@@ -426,8 +488,8 @@
)
} else if (item.type === 'textarea') {
fields.push(
- <Col span={20} offset={4} key={index}>
- <Form.Item className="text-area">
+ <Col span={24} key={index}>
+ <Form.Item className="text-area" label={item.label}>
{getFieldDecorator(item.key, {
initialValue: item.initVal,
rules: [
@@ -441,9 +503,35 @@
</Col>
)
} else if (item.type === 'options') {
+ if (openType !== 'checkcard') {
+ fields.push(
+ <Col span={24} key={index}>
+ <Form.Item label={item.label} className="text-area">
+ {getFieldDecorator(item.key, {
+ initialValue: item.initVal
+ })(<EditTable dict={this.props.dict} type={this.state.openType} data={item.initVal}/>)}
+ </Form.Item>
+ </Col>
+ )
+ } else {
+ fields.push(
+ <Col span={24} key={index}>
+ <Form.Item label={item.label} className="text-area">
+ {getFieldDecorator(item.key, {
+ initialValue: item.initVal
+ })(<DataTable dict={this.props.dict} type={this.state.display} fields={this.state.cFields}/>)}
+ </Form.Item>
+ </Col>
+ )
+ }
+ } else if (item.type === 'fields') {
fields.push(
- <Col span={20} offset={4} key={index}>
- <EditTable data={item.initVal} type={this.state.openType} dict={this.props.dict} ref="editTable"/>
+ <Col span={24} key={index}>
+ <Form.Item label={item.label} className="text-area">
+ {getFieldDecorator(item.key, {
+ initialValue: item.initVal
+ })(<FieldsTable dict={this.props.dict} onChange={this.changeField}/>)}
+ </Form.Item>
</Col>
)
} else if (item.type === 'checkbox') {
@@ -496,6 +584,16 @@
</Form.Item>
</Col>
)
+ } else if (item.type === 'color') {
+ fields.push(
+ <Col span={12} key={index}>
+ <Form.Item label={item.label} className="color-form-item">
+ {getFieldDecorator(item.key, {
+ initialValue: item.initVal
+ })(<ColorSketch allowClear={true}/>)}
+ </Form.Item>
+ </Col>
+ )
}
})
@@ -510,22 +608,24 @@
let isvalid = true
values.uuid = this.props.card.uuid
// 涓嬫媺鑿滃崟鎴栬仈鍔ㄨ彍鍗�
- if ((values.type === 'multiselect' || values.type === 'select' || values.type === 'link') && values.resourceType === '0') {
- values.options = this.refs.editTable.state.dataSource
+ if (['multiselect', 'select', 'link', 'checkcard'].includes(values.type) && values.resourceType === '0') {
+ values.options = values.options || []
values.dataSource = ''
let emptys = []
- if (values.type === 'multiselect' || values.type === 'select') {
+ if (['multiselect', 'select'].includes(values.type)) {
emptys = values.options.filter(op => !(op.Value && op.Text))
- } else {
+ } else if (values.type === 'link') {
emptys = values.options.filter(op => !(op.Value && op.Text && op.ParentID))
}
if (emptys.length > 0) {
isvalid = false
}
- } else if ((values.type === 'multiselect' || values.type === 'select' || values.type === 'link') && values.resourceType === '1') {
+ } else if (['multiselect', 'select', 'link', 'checkcard'].includes(values.type) && values.resourceType === '1') {
values.options = []
}
+ console.log(values)
+
if (isvalid) {
['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => {
if (values[item]) {
--
Gitblit v1.8.0