From 137fb8ea6af2789b3238b22bac31d80bced41dfe Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期三, 28 七月 2021 11:39:39 +0800
Subject: [PATCH] 2021-07-28
---
src/templates/sharecomponent/searchcomponent/searchform/index.jsx | 296 ++++++++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 223 insertions(+), 73 deletions(-)
diff --git a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
index 843331c..96c3459 100644
--- a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
+++ b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
@@ -1,11 +1,17 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
+import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber, Checkbox, Cascader } from 'antd'
import { dateOptions, matchReg, formRule } from '@/utils/option.js'
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 = [
{
@@ -80,6 +86,20 @@
},
]
+const searchTypeOptions = {
+ text: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'inputType', 'advanced'],
+ select: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll'],
+ 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'],
+ group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow'],
+ range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow']
+}
+
class MainSearch extends Component {
static propTpyes = {
dict: PropTypes.object, // 瀛楀吀椤�
@@ -92,6 +112,8 @@
openType: null, // 鎼滅储鏉′欢鏄剧ず绫诲瀷
resourceType: null, // 涓嬫媺鎼滅储鏃讹紝閫夐」鏉ユ簮绫诲瀷
formlist: null, // 琛ㄥ崟
+ display: null,
+ cFields: [],
textTooltip: '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱�',
}
@@ -103,31 +125,37 @@
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 _options = ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow'] // 榛樿鏄剧ず椤�
+ let type = ''
+ let _items = []
+ let resourceType = ''
+ let display = ''
+ let cFields = []
+ let multiple = 'false'
- if ((type === 'multiselect' || type === 'select' || type === 'link') && resourceType === '0') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓鸿嚜瀹氫箟璧勬簮
- _options = [..._options, 'resourceType', 'options', 'display']
- } else if ((type === 'multiselect' || type === 'select' || type === 'link') && resourceType === '1') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓哄悗鍙版暟鎹簮涓幏鍙�
- _options = [..._options, 'resourceType', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display', 'database']
- } else if (type === 'group') {
- _options = ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'transfer', 'labelShow']
- }
+ 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
+ } else if (cell.key === 'multiple') {
+ multiple = cell.initVal
+ }
+ })
- if (type === 'select' || type === 'link') {
- _options.push('setAll')
- }
-
- if (type === 'link') { // 鍏宠仈绫诲瀷銆佸鍔犲叧鑱斾笂绾х殑瀛楁鍚�
- _options = [..._options, 'linkField']
- }
+ 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,20 +167,21 @@
} else if (form.key === 'match') { // 琛ㄥ崟涓哄尮閰嶅瓧娈垫椂锛屾牴鎹笉鍚岀殑绫诲瀷锛屾樉绀哄搴旂殑鍖归厤瑙勫垯
if (type === 'text') {
form.options = matchReg.text
- } else if (type === 'multiselect') {
+ } else if (type === 'multiselect' || (type === 'checkcard' && multiple === 'true')) {
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
} else if (type === 'datemonth') {
form.options = matchReg.datemonth
- } else if (type === 'dateweek' || type === 'daterange') {
+ } else if (type === 'dateweek' || type === 'daterange' || type === 'range') {
form.options = matchReg.daterange
}
- } else if (form.key === 'field' && type === 'text') {
+ } else if (form.key === 'field' && (type === 'text' || type === 'select')) {
form.tooltip = this.state.textTooltip
} else if (form.key === 'field' && type === 'group') {
+ form.tooltip = '鏌ヨ鏁版嵁鏃讹紙鑷畾涔夎剼鏈垨缁熻鏁版嵁婧愶級锛岀被鍨嬪瓧娈靛皢鐢ㄤ綔鏇挎崲鑴氭湰涓殑 @瀛楁@ 锛岀被鍨嬪瓧娈靛搴斿�间负 {"鏃�": "day", "鍛�": "week", "鏈�": "month", "瀛�": "quarter", "骞�": "year", "鑷畾涔�": "customized"}銆�'
form.label = dict['model.form.type'] + dict['model.form.field']
}
form.hidden = !_options.includes(form.key)
@@ -174,32 +203,41 @@
}
}
+ 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
+ }
+
/**
* @description 鎼滅储鏉′欢绫诲瀷鍒囨崲
*/
openTypeChange = (key, value) => {
const { dict } = this.props
- const { resourceType, items } = this.state
+ const { resourceType, items, display } = this.state
if (key === 'type') {
- let _options = ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow']
-
- if ((value === 'multiselect' || value === 'select' || value === 'link') && resourceType === '0') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓鸿嚜瀹氫箟璧勬簮
- _options = [..._options, 'resourceType', 'options', 'display']
- } else if ((value === 'multiselect' || value === 'select' || value === 'link') && resourceType === '1') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓哄悗鍙版暟鎹簮涓幏鍙�
- _options = [..._options, 'resourceType', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display', 'database']
- } else if (value === 'group') {
- _options = ['label', 'type', 'field', 'datefield', 'initval', 'items', 'ratio', 'blacklist', 'required', 'transfer', 'labelShow']
- }
-
- if (value === 'select' || value === 'link') {
- _options.push('setAll')
- }
-
- if (value === 'link') {
- _options = [..._options, 'linkField']
- }
-
+ let _options = this.getOptions(value, resourceType, display)
let matchs = []
this.setState({
@@ -222,22 +260,23 @@
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
} else if (value === 'datemonth') {
form.options = matchReg.datemonth
- } else if (value === 'dateweek' || value === 'daterange') {
+ } else if (value === 'dateweek' || value === 'daterange' || value === 'range') {
form.options = matchReg.daterange
}
matchs = form.options
} else if (form.key === 'field') {
form.tooltip = ''
form.label = dict['model.form.field']
- if (value === 'text') {
+ if (value === 'text' || value === 'select') {
form.tooltip = this.state.textTooltip
} else if (value === 'group') {
+ form.tooltip = '鏌ヨ鏁版嵁鏃讹紙鑷畾涔夎剼鏈垨缁熻鏁版嵁婧愶級锛岀被鍨嬪瓧娈靛皢鐢ㄤ綔鏇挎崲鑴氭湰涓殑 @瀛楁@ 锛岀被鍨嬪瓧娈靛搴斿�间负 {"鏃�": "day", "鍛�": "week", "鏈�": "month", "瀛�": "quarter", "骞�": "year", "鑷畾涔�": "customized"}銆�'
form.label = dict['model.form.type'] + dict['model.form.field']
}
}
@@ -251,6 +290,9 @@
if (this.props.form.getFieldValue('match') !== undefined) {
this.props.form.setFieldsValue({match: matchs[0].value})
}
+ if (this.props.form.getFieldValue('multiple') !== undefined) {
+ this.props.form.setFieldsValue({multiple: 'false'})
+ }
})
}
}
@@ -259,26 +301,12 @@
* @description 鏁版嵁婧愮被鍨嬪垏鎹�
*/
onChange = (e, key) => {
- const { openType } = this.state
+ const { openType, display, resourceType } = this.state
let value = e.target.value
if (key === 'resourceType') {
- let _options = ['label', 'field', 'initval', 'type', 'match', 'resourceType', 'display', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow']
+ let _options = this.getOptions(openType, value, display)
- if (value === '0') {
- _options = [..._options, 'options']
- } else if (value === '1') {
- _options = [..._options, 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database']
- }
-
- if (openType === 'select' || openType === 'link') {
- _options.push('setAll')
- }
-
- if (openType === 'link') {
- _options = [..._options, 'linkField']
- }
-
this.setState({
resourceType: value,
formlist: this.state.formlist.map(form => {
@@ -286,7 +314,49 @@
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
+ })
+ })
+ } else if (key === 'multiple') {
+ let matchs = []
+ this.setState({
+ formlist: this.state.formlist.map(form => {
+ if (form.key === 'match') {
+ if (value === 'true') {
+ form.options = matchReg.multiselect
+ } else {
+ form.options = matchReg.select
+ }
+ matchs = form.options
+ }
+
+ return form
+ })
+ }, () => {
+ if (this.props.form.getFieldValue('match') !== undefined) {
+ this.props.form.setFieldsValue({match: matchs[0].value})
+ }
+ })
}
+ }
+
+ changeField = (data) => {
+ this.setState({
+ cFields: data,
+ formlist: this.state.formlist.map(form => {
+ if (form.key === 'fields') {
+ form.initVal = data
+ }
+ return form
+ })
+ })
}
checkChange = (values, key) => {
@@ -324,7 +394,7 @@
const { getFieldDecorator } = this.props.form
const fields = []
this.state.formlist.forEach((item, index) => {
- if (item.hidden) return
+ if (item.hidden || item.forbid) return
if (item.type === 'text') { // 鏂囨湰鎼滅储
let rules = []
@@ -374,14 +444,17 @@
</Tooltip> : item.label
}>
{getFieldDecorator(item.key, {
- initialValue: item.initVal || 6,
+ initialValue: item.initVal,
rules: [
{
required: item.required,
message: this.props.dict['form.required.input'] + item.label + '!'
}
]
- })(<InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/>)}
+ })(item.max ?
+ <InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/> :
+ <InputNumber onPressEnter={this.handleSubmit}/>
+ )}
</Form.Item>
</Col>
)
@@ -447,8 +520,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: [
@@ -462,9 +535,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') {
@@ -517,6 +616,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>
+ )
}
})
@@ -531,22 +640,63 @@
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 = []
}
+ if (values.type === 'range') {
+ let error = ''
+ if (values.maxValue <= values.minValue) {
+ error = '鏈�澶у�煎繀椤诲ぇ浜庢渶灏忓��'
+ } else if (values.step <= 0) {
+ error = '姝ラ暱蹇呴』澶т簬0'
+ } else {
+ let s = (values.maxValue - values.minValue) / values.step
+ if (s !== parseInt(s)) {
+ error = '姝ラ暱蹇呴』琚� (max - min) 鏁撮櫎'
+ }
+ }
+
+ if (!error && values.initval) {
+ let vals = values.initval.split(',')
+ if (vals.length !== 2) {
+ error = '鍒濆鍊艰缃敊璇紒'
+ } else if (isNaN(parseFloat(vals[0])) || isNaN(parseFloat(vals[1]))) {
+ error = '鍒濆鍊艰缃敊璇紒'
+ } else {
+ let start = parseFloat(vals[0])
+ let end = parseFloat(vals[1])
+ let s = (values.maxValue - start) / values.step
+ let e = (values.maxValue - end) / values.step
+ if (start > end || start < values.minValue || end > values.maxValue) {
+ error = '鍒濆鍊艰缃敊璇紒'
+ } else if (s !== parseInt(s) || e !== parseInt(e)) {
+ error = '鍒濆鍊艰缃敊璇紒'
+ }
+ }
+ }
+ if (error) {
+ notification.warning({
+ top: 92,
+ message: error,
+ duration: 5
+ })
+ return
+ }
+ }
+
if (isvalid) {
['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => {
if (values[item]) {
--
Gitblit v1.8.0