From 7b0dbecd1d6155d26ec67be0a47a16264c738c85 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期二, 09 五月 2023 14:48:10 +0800
Subject: [PATCH] 2023-05-09
---
src/templates/sharecomponent/searchcomponent/searchform/index.jsx | 1001 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 521 insertions(+), 480 deletions(-)
diff --git a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
index e8faf2e..9cb4ffc 100644
--- a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
+++ b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
@@ -1,9 +1,10 @@
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 { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Checkbox, Cascader, AutoComplete } from 'antd'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+
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'
@@ -12,6 +13,7 @@
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const FieldsTable = asyncComponent(() => import('@/templates/zshare/modalform/fieldtable'))
const DataTable = asyncComponent(() => import('@/templates/zshare/modalform/datatable'))
+const EditTable = asyncComponent(() => import('@/templates/zshare/modalform/modaleditable'))
const groupOptions = [
{
@@ -24,8 +26,13 @@
{value: 3, label: '鍓嶄笁澶�'},
{value: 7, label: '鍓嶄竷澶�'},
{value: 30, label: '鍓�30澶�'},
- {value: -1, label: '鏄庡ぉ'},
- {value: -2, label: '鍚庡ぉ'}
+ {value: 90, text: '鍓�90澶�'},
+ {value: -1, text: '鏄庡ぉ'},
+ {value: -2, text: '鍚庡ぉ'},
+ {value: -3, text: '鍚庝笁澶�'},
+ {value: -7, text: '鍚庝竷澶�'},
+ {value: -30, text: '鍚�30澶�'},
+ {value: -90, text: '鍚�90澶�'},
]
},
{
@@ -87,22 +94,23 @@
]
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', 'dropdown'],
- 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', 'dropdown'],
- 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']
+ text: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'inputType', 'advanced', 'query', 'labelwidth'],
+ select: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'],
+ multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
+ link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'],
+ date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'],
+ checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
+ dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
+ datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
+ daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'],
+ group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow', 'query', 'labelwidth'],
+ switch: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'openVal', 'closeVal', 'openText', 'closeText', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
+ check: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'openVal', 'closeVal', 'checkTip', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
+ range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow', 'query', 'labelwidth']
}
class MainSearch extends Component {
static propTpyes = {
- dict: PropTypes.object, // 瀛楀吀椤�
formlist: PropTypes.any, // 琛ㄥ崟
card: PropTypes.object, // 鎼滅储鏉′欢淇℃伅
inputSubmit: PropTypes.any // 鍥炶溅鎻愪氦浜嬩欢
@@ -112,80 +120,41 @@
openType: null, // 鎼滅储鏉′欢鏄剧ず绫诲瀷
resourceType: null, // 涓嬫媺鎼滅储鏃讹紝閫夐」鏉ユ簮绫诲瀷
formlist: null, // 琛ㄥ崟
- display: null,
cFields: [],
textTooltip: '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱�',
}
- /**
- * @description 琛ㄥ崟棰勫鐞�
- * 1銆佹牴鎹〃鍗曠被鍨嬶紝鏄剧ず琛ㄥ崟鍙紪杈戦」
- * 2銆佷笅鎷夐�夋嫨锛屾牴鎹暟鎹簮绫诲瀷鏄剧ず鐩稿叧閰嶇疆
- */
+ record = {}
+
UNSAFE_componentWillMount () {
- const { formlist, dict } = this.props
-
- let type = ''
- let _items = []
- let resourceType = ''
- let display = ''
- let cFields = []
- let multiple = 'false'
-
- 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
- }
+ this.props.formlist.forEach(item => {
+ this.record[item.key] = item.initVal
})
- let _options = this.getOptions(type, resourceType, display)
-
+ let { shows, reOptions, reTypes, reTooltip, reLabel, reRequired } = this.getMutilOptions()
+
this.setState({
- display,
- cFields,
- openType: type,
- items: _items,
- resourceType,
- formlist: formlist.map(form => {
- // 琛ㄥ崟涓哄垵濮嬪�煎瓧娈碉紝涓旀暟鎹被鍨嬪睘浜庢椂闂寸被鍨嬫椂锛岃缃垵濮嬪�间负涓嬫媺閫夋嫨锛屽苟閲嶇疆閫夋嫨椤�
- if (form.key === 'initval' && dateOptions.hasOwnProperty(type)) {
- form.options = dateOptions[type]
- form.type = 'select'
- } else if (form.key === 'initval' && type === 'group') {
- form.options = groupOptions.filter(op => _items.includes(op.value))
- form.type = 'cascader'
- } else if (form.key === 'match') { // 琛ㄥ崟涓哄尮閰嶅瓧娈垫椂锛屾牴鎹笉鍚岀殑绫诲瀷锛屾樉绀哄搴旂殑鍖归厤瑙勫垯
- if (type === 'text') {
- form.options = matchReg.text
- } else if (type === 'multiselect' || (type === 'checkcard' && multiple === 'true')) {
- form.options = matchReg.multiselect
- } 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' || type === 'range') {
- form.options = matchReg.daterange
- }
- } 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']
+ formlist: this.props.formlist.map(item => {
+ item.hidden = !shows.includes(item.key)
+ item.initVal = this.record[item.key]
+
+ if (reOptions[item.key]) {
+ item.options = reOptions[item.key]
}
- form.hidden = !_options.includes(form.key)
- return form
+ if (reTypes[item.key]) {
+ item.type = reTypes[item.key]
+ }
+ if (reTooltip[item.key] !== undefined) {
+ item.tooltip = reTooltip[item.key]
+ }
+ if (reLabel[item.key] !== undefined) {
+ item.label = reLabel[item.key]
+ }
+ if (reRequired[item.key] !== undefined) {
+ item.required = reRequired[item.key]
+ }
+
+ return item
})
})
}
@@ -203,182 +172,222 @@
}
}
- 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')
+ getMutilOptions = () => {
+ let type = this.record.type
+ let shows = fromJS(searchTypeOptions[type]).toJS()
+ let reOptions = {}
+ let reTypes = {}
+ let reTooltip = {}
+ let reRequired = {}
+ let reLabel = {}
+
+ if (['multiselect', 'select', 'link'].includes(type)) {
+ reRequired.linkField = true
+ if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧�
+ shows.push('options')
+ } else if (this.record.resourceType === '1') { // 鏁版嵁婧�
+ shows.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')
+ reRequired.fields = false
+ if (this.record.display === 'picture') {
+ if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧�
+ shows.push('options', 'fields', 'picratio')
+ } else if (this.record.resourceType === '1') { // 鏁版嵁婧�
+ shows.push('dataSource', 'cardValField', 'fields', 'urlField', 'orderBy', 'orderType', 'database', 'picratio')
+ }
+ } else if (this.record.display === 'color') {
+ if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧�
+ shows.push('options', 'fields')
+ } else if (this.record.resourceType === '1') { // 鏁版嵁婧�
+ shows.push('dataSource', 'cardValField', 'colorField', 'fields', 'orderBy', 'orderType', 'database')
}
} else {
- if (resourceType === '0') { // 鑷畾涔夎祫婧�
- _options.push('options', 'fields', 'backgroundColor')
- } else if (resourceType === '1') { // 鏁版嵁婧�
- _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor')
+ reRequired.fields = true
+ if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧�
+ shows.push('options', 'fields', 'selectStyle')
+ } else if (this.record.resourceType === '1') { // 鏁版嵁婧�
+ shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'selectStyle')
}
+ if (this.record.selectStyle === 'custom') {
+ shows.push('backgroundColor')
+ }
+ }
+ shows.push('linkField')
+ reRequired.linkField = false
+ }
+
+ if (dateOptions.hasOwnProperty(type)) { // 鏍规嵁鎼滅储鏉′欢绫诲瀷锛岄�夋嫨鍒濆鍊肩殑绫诲瀷鍙婃暟鎹�
+ reOptions.initval = dateOptions[type]
+ reTypes.initval = 'select'
+ } else if (type === 'group') {
+ reOptions.initval = groupOptions.filter(op => this.record.items.includes(op.value))
+ reTypes.initval = 'cascader'
+ } else {
+ reTypes.initval = 'text'
+ }
+
+ if (type === 'text') {
+ reOptions.match = matchReg.class1
+ } else if (type === 'multiselect') {
+ reOptions.match = matchReg.class3
+ } else if (type === 'select' || type === 'link') {
+ reOptions.match = matchReg.class1
+ } else if (type === 'switch' || type === 'check') {
+ reOptions.match = matchReg.class2
+ } else if (type === 'date') {
+ reOptions.match = matchReg.class4
+ } else if (type === 'datemonth') {
+ reOptions.match = matchReg.class5
+ } else if (type === 'dateweek' || type === 'daterange' || type === 'range') {
+ reOptions.match = matchReg.class5
+ } else if (type === 'checkcard') {
+ if (this.record.multiple === 'false') {
+ reOptions.match = matchReg.class1
+ } else if (this.record.multiple === 'true') {
+ reOptions.match = matchReg.class3
}
}
- return _options
+ reTooltip.field = ''
+ reLabel.field = '瀛楁'
+
+ if (type === 'text' || type === 'select') {
+ reTooltip.field = '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱€��'
+ } else if (type === 'group') {
+ reTooltip.field = '鏌ヨ鏁版嵁鏃讹紙鑷畾涔夎剼鏈垨缁熻鏁版嵁婧愶級锛岀被鍨嬪瓧娈靛皢鐢ㄤ綔鏇挎崲鑴氭湰涓殑 @瀛楁@ 锛岀被鍨嬪瓧娈靛搴斿�间负锛氭棩 -> day锛涘懆 -> week锛涙湀 -> month锛涘 -> quarter锛涘勾 -> year锛涜嚜瀹氫箟 -> customized'
+ reLabel.field = '绫诲瀷瀛楁'
+ }
+
+ return {
+ shows,
+ reOptions,
+ reTypes,
+ reTooltip,
+ reRequired,
+ reLabel
+ }
}
- /**
- * @description 鎼滅储鏉′欢绫诲瀷鍒囨崲
- */
- openTypeChange = (key, value) => {
- const { dict } = this.props
- const { resourceType, items, display } = this.state
+ optionChange = (key, value) => {
+ this.record[key] = value
+ let _fieldval = {}
if (key === 'type') {
- let _options = this.getOptions(value, resourceType, display)
- let matchs = []
+ this.record.initval = ''
+ _fieldval.initval = ''
- this.setState({
- openType: value,
- formlist: this.state.formlist.map(form => {
- form.hidden = !_options.includes(form.key) // 闅愯棌琛ㄥ崟
+ if (value === 'text' || value === 'multiselect') {
+ this.record.match = 'like'
+ _fieldval.match = 'like'
+ } else if (value === 'select' || value === 'link' || value === 'checkcard') {
+ this.record.match = '='
+ _fieldval.match = '='
+ } else if (value === 'date') {
+ this.record.match = '>='
+ _fieldval.match = '>='
+ } else if (value === 'datemonth' || value === 'dateweek' || value === 'daterange' || value === 'range') {
+ this.record.match = 'between'
+ _fieldval.match = 'between'
+ }
- if (form.key === 'initval') {
- if (dateOptions.hasOwnProperty(value)) { // 鏍规嵁鎼滅储鏉′欢绫诲瀷锛岄�夋嫨鍒濆鍊肩殑绫诲瀷鍙婃暟鎹�
- form.options = dateOptions[value]
- form.type = 'select'
- } else if (value === 'group') {
- form.options = groupOptions.filter(op => items.includes(op.value))
- form.type = 'cascader'
- } else {
- form.type = 'text'
- }
- } else if (form.key === 'match') { // 鎼滅储鏉′欢绫诲瀷鍒囨崲鏃讹紝鍖归厤瑙勫垯绫诲瀷瀵瑰簲鍒囨崲
- if (value === 'text') {
- form.options = matchReg.text
- } else if (value === 'multiselect') {
- form.options = matchReg.multiselect
- } 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' || 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' || 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']
- }
+ if (value === 'checkcard') {
+ this.record.multiple = 'false'
+ _fieldval.multiple = 'false'
+ }
+
+ if (this.record.options.length > 0) {
+ if (value === 'checkcard') {
+ this.record.options = this.record.options.map(cell => {
+ cell.$value = cell.Value || ''
+ delete cell.Value
+ return cell
+ })
+
+ if (this.record.options[0].Text) {
+ let key = Utils.getuuid()
+
+ this.record.fields = [{
+ $index: 1,
+ align: 'left',
+ color: 'rgba(0, 0, 0, 0.85)',
+ field: 'Text',
+ fontSize: 14,
+ key: key,
+ uuid: key
+ }]
}
-
- return form
- })
- }, () => {
- if (this.props.form.getFieldValue('initval') !== undefined) {
- this.props.form.setFieldsValue({initval: ''})
+ } else if (['multiselect', 'select', 'link'].includes(value)) {
+ if (!this.record.options[0].Text && this.record.fields.length > 0) {
+ let field = this.record.fields[0].field
+
+ this.record.options = this.record.options.map(cell => {
+ cell.Value = cell.Value || cell.$value || ''
+ cell.Text = cell[field] || ''
+
+ return cell
+ })
+ } else {
+ this.record.options = this.record.options.map(cell => {
+ cell.Value = cell.Value || cell.$value || ''
+
+ return cell
+ })
+ }
}
- 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'})
- }
- })
- }
- }
-
- /**
- * @description 鏁版嵁婧愮被鍨嬪垏鎹�
- */
- onChange = (e, key) => {
- const { openType, display, resourceType } = this.state
- let value = e.target.value
-
- if (key === 'resourceType') {
- let _options = this.getOptions(openType, value, display)
-
- this.setState({
- resourceType: value,
- formlist: this.state.formlist.map(form => {
- form.hidden = !_options.includes(form.key)
- 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})
- }
- })
+ if (value === 'false') {
+ this.record.match = '='
+ _fieldval.match = '='
+ } else if (value === 'true') {
+ this.record.match = 'like'
+ _fieldval.match = 'like'
+ }
+ } else if (key === 'items') {
+ let _initval = this.props.form.getFieldValue('initval')
+ if (_initval && !value.includes(_initval[0])) {
+ this.record.initval = ''
+ _fieldval.initval = ''
+ }
}
- }
- changeField = (data) => {
+ let { shows, reOptions, reTypes, reLabel, reTooltip, reRequired } = this.getMutilOptions()
+
this.setState({
- cFields: data,
- formlist: this.state.formlist.map(form => {
- if (form.key === 'fields') {
- form.initVal = data
+ formlist: this.state.formlist.map(item => {
+ item.hidden = !shows.includes(item.key)
+ item.initVal = this.record[item.key]
+
+ if (reOptions[item.key]) {
+ item.options = reOptions[item.key]
}
- return form
+ if (reTypes[item.key]) {
+ item.type = reTypes[item.key]
+ }
+ if (reTooltip[item.key] !== undefined) {
+ item.tooltip = reTooltip[item.key]
+ }
+ if (reLabel[item.key] !== undefined) {
+ item.label = reLabel[item.key]
+ }
+ if (reRequired[item.key] !== undefined) {
+ item.required = reRequired[item.key]
+ }
+
+ return item
})
+ }, () => {
+ this.props.form.setFieldsValue(_fieldval)
})
}
- checkChange = (values, key) => {
- const { openType, formlist } = this.state
+ changeField = (data) => {
+ this.record.fields = data || []
+ }
- if (key === 'items') {
- this.setState({
- items: values,
- formlist: formlist.map(form => {
- if (form.key === 'initval' && openType === 'group') {
- form.options = groupOptions.filter(op => values.includes(op.value))
- }
-
- return form
- })
- })
-
- let _initval = this.props.form.getFieldValue('initval')
- if (_initval && !values.includes(_initval[0])) {
- this.props.form.setFieldsValue({initval: ''})
- }
- }
+ changeOptions = (data) => {
+ this.record.options = data || []
}
handleSubmit = (e) => {
@@ -389,244 +398,213 @@
}
}
+ handleEmpty = () => {
+ let field = this.props.form.getFieldValue('valueField')
+
+ if (!field) {
+ notification.warning({
+ top: 92,
+ message: '璇峰～鍐欏�悸峰瓧娈点��',
+ duration: 5
+ })
+ return
+ }
+
+ let text = this.props.form.getFieldValue('valueText')
+
+ if (!text) {
+ notification.warning({
+ top: 92,
+ message: '璇峰～鍐欐枃鏈峰瓧娈点��',
+ duration: 5
+ })
+ return
+ }
+
+ let resource = this.props.form.getFieldValue('dataSource') || ''
+
+ if (field === text) {
+ resource = `select '' as ${field} union all \n${resource}`
+ } else {
+ resource = `select '' as ${field},'鍏ㄩ儴' as ${text} union all \n${resource}`
+ }
+
+ this.props.form.setFieldsValue({dataSource: resource})
+ }
+
+ complete = (key, option) => {
+ let label = option.props.label
+
+ this.props.form.setFieldsValue({label: label})
+ }
+
getFields() {
- const { openType } = this.state
const { getFieldDecorator } = this.props.form
+ const { formlist } = this.state
const fields = []
- this.state.formlist.forEach((item, index) => {
+
+ formlist.forEach((item, index) => {
if (item.hidden || item.forbid) return
- if (item.type === 'text') { // 鏂囨湰鎼滅储
- let rules = []
+ let span = 12
+ let rules = []
+ let className = ''
+ let content = null
+ let extra = null
+ let initVal = item.initVal || ''
+
+ if (item.type === 'text') {
+ let type = this.record.type
+ rules = [
+ { required: item.required, message: '璇疯緭鍏�' + item.label + '!' }
+ ]
if (item.key === 'field' || item.key === 'datefield') {
- rules = [{
- pattern: (openType === 'text' || openType === 'select') ? formRule.field.multipattern : formRule.field.pattern,
+ rules.push({
+ pattern: (type === 'text' || type === 'select') ? formRule.field.multipattern : formRule.field.pattern,
message: formRule.field.message
}, {
max: formRule.field.max,
message: formRule.field.maxMessage
- }]
+ })
} else {
- rules = [{
+ rules.push({
max: formRule.input.max,
message: formRule.input.message
- }]
+ })
}
-
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal || '',
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
- },
- ...rules
- ]
- })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'number') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
- }
- ]
- })(item.max ?
- <InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/> :
- <InputNumber onPressEnter={this.handleSubmit}/>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'select') { // 涓嬫媺鎼滅储
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal || '',
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Select
- showSearch
- filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
- onChange={(value) => {this.openTypeChange(item.key, value)}}
- getPopupContainer={() => document.getElementById('commontable-search-form-box')}
- >
- {item.options.map(option =>
- <Select.Option id={option.value} title={option.text} key={option.value} value={option.value}>
- {item.key === 'icon' && <Icon type={option.text} />} {option.text}
- </Select.Option>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'radio') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.tooltip ?
- <Tooltip placement="topLeft" title={item.tooltip}>
- <Icon type="question-circle" />
- {item.label}
- </Tooltip> : item.label
- }>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}>
- {
- item.options.map(option => {
- return (
- <Radio key={option.value} value={option.value}>{option.text}</Radio>
- )
- })
- }
- </Radio.Group>,
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'textarea') {
- fields.push(
- <Col span={24} key={index}>
- <Form.Item className="text-area" label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.input'] + item.label + '!'
- }
- ]
- })(<CodeMirror />)}
- </Form.Item>
- </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>
- )
+
+ if (item.key === 'field' && item.options && item.options.length > 0) {
+ content = <AutoComplete
+ dataSource={item.options.map((cell) => <AutoComplete.Option label={cell.label} value={cell.value} key={cell.key}>
+ {cell.text}
+ </AutoComplete.Option>)}
+ filterOption={(input, option) => option.props.children.indexOf(input) > -1}
+ onSelect={this.complete}
+ placeholder=""
+ >
+ <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />
+ </AutoComplete>
} 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>
- )
+ content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />
+ }
+ } else if (item.type === 'number') {
+ rules = [
+ { required: item.required, message: '璇疯緭鍏�' + item.label + '!' }
+ ]
+ initVal = item.initVal
+
+ if (item.max) {
+ content = <InputNumber min={item.min} max={item.max} precision={item.precision || 0} onPressEnter={this.handleSubmit}/>
+ } else {
+ content = <InputNumber onPressEnter={this.handleSubmit}/>
+ }
+ } else if (item.type === 'select') { // 涓嬫媺鎼滅储
+ rules = [
+ { required: item.required, message: '璇烽�夋嫨' + item.label + '!' }
+ ]
+
+ content = <Select
+ showSearch
+ allowClear={item.allowClear === true}
+ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ onChange={(value) => {this.optionChange(item.key, value)}}
+ getPopupContainer={() => document.getElementById('commontable-search-form-box')}
+ >
+ {item.options.map((option, i) =>
+ <Select.Option key={`${i}`} value={option.value}>
+ {option.text || option.label}
+ </Select.Option>
+ )}
+ </Select>
+ } else if (item.type === 'radio') {
+ rules = [
+ { required: item.required, message: '璇烽�夋嫨' + item.label + '!' }
+ ]
+
+ content = <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.optionChange(item.key, e.target.value)}}>
+ {item.options.map(option => {
+ return (
+ <Radio key={option.value} value={option.value}>{option.text}</Radio>
+ )
+ })}
+ </Radio.Group>
+ } else if (item.type === 'codemirror') {
+ rules = [
+ { required: item.required, message: '璇疯緭鍏�' + item.label + '!' }
+ ]
+ span = 24
+ className = 'text-area'
+
+ if (this.record.type === 'select' || this.record.type === 'link') {
+ extra = <span className="add-resource-empty" onClick={this.handleEmpty}>鍏ㄩ儴</span>
+ }
+
+ content = <CodeMirror />
+ } else if (item.type === 'options') {
+ span = 24
+ className = 'text-area'
+
+ let type = this.record.type
+
+ if (type !== 'checkcard') {
+ content = <EditTable type={type} module="search" transfield={{}} linkSubFields={[]} onChange={this.changeOptions}/>
+ } else {
+ if (this.record.linkField) {
+ type = 'link'
+ }
+ content = <DataTable type={type} display={this.record.display} linkSubFields={[]} transfield={{}} fields={this.record.fields || []} onChange={this.changeOptions}/>
}
} else if (item.type === 'fields') {
- fields.push(
- <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>
- )
+ span = 24
+ className = 'text-area'
+
+ rules = [
+ { required: item.required, message: '璇锋坊鍔�' + item.label + '!' }
+ ]
+
+ content = <FieldsTable onChange={this.changeField}/>
} else if (item.type === 'checkbox') {
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal,
- rules: [
- {
- required: !!item.required,
- message: this.props.dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Checkbox.Group style={{width: '105%'}} options={item.options} onChange={(values) => this.checkChange(values, item.key)}/>
- )}
- </Form.Item>
- </Col>
- )
+ rules = [
+ { required: item.required, message: '璇烽�夋嫨' + item.label + '!' }
+ ]
+
+ content = <Checkbox.Group style={{width: '105%'}} options={item.options} onChange={(values) => this.optionChange(item.key, values)}/>
} else if (item.type === 'multiselect') { // 澶氶��
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal || []
- })(
- <Select
- showSearch
- mode="multiple"
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- >
- {item.options.map((option, i) =>
- <Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
+ content = <Select
+ showSearch
+ mode="multiple"
+ filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+ >
+ {item.options.map((option, i) =>
+ <Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option>
+ )}
+ </Select>
} else if (item.type === 'cascader') { // 澶氶��
- fields.push(
- <Col span={12} key={index}>
- <Form.Item label={item.label}>
- {getFieldDecorator(item.key, {
- initialValue: item.initVal
- })(
- <Cascader options={item.options} placeholder="" />
- )}
- </Form.Item>
- </Col>
- )
+ content = <Cascader options={item.options} placeholder="" />
} 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>
- )
+ className = 'color-form-item'
+ rules = [
+ { required: item.required, message: '璇烽�夋嫨' + item.label + '!' }
+ ]
+
+ content = <ColorSketch allowClear={true}/>
}
+
+ fields.push(
+ <Col span={span} key={index}>
+ <Form.Item className={className} extra={extra} label={item.tooltip ?
+ <Tooltip placement="topLeft" title={item.tooltip}>
+ <QuestionCircleOutlined className="mk-form-tip" />
+ {item.label}
+ </Tooltip> : item.label
+ }>
+ {getFieldDecorator(item.key, {
+ initialValue: initVal,
+ rules: rules
+ })(content)}
+ </Form.Item>
+ </Col>
+ )
})
return fields
@@ -637,23 +615,92 @@
return new Promise((resolve, reject) => {
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
- let isvalid = true
values.uuid = this.props.card.uuid
// 涓嬫媺鑿滃崟鎴栬仈鍔ㄨ彍鍗�
- if (['multiselect', 'select', 'link', 'checkcard'].includes(values.type) && values.resourceType === '0') {
- values.options = values.options || []
- values.dataSource = ''
- let emptys = []
- if (['multiselect', 'select'].includes(values.type)) {
- emptys = values.options.filter(op => !(op.Value && op.Text))
- } else if (values.type === 'link') {
- emptys = values.options.filter(op => !(op.Value && op.Text && op.ParentID))
+ if (['multiselect', 'select', 'link'].includes(values.type)) {
+ if (values.resourceType === '0') {
+ values.options = values.options || []
+ values.dataSource = ''
+
+ if (values.options.filter(op => op.Text === '').length > 0) {
+ notification.warning({
+ top: 92,
+ message: '鎻愮ず鏂囨湰锛圱ext锛変笉鍙负绌猴紒',
+ duration: 5
+ })
+ return
+ } else if (values.options.filter(op => op.Value === '').length > 1) {
+ notification.warning({
+ top: 92,
+ message: 'Value涓虹┖鏈�澶氬彧鍙坊鍔犱竴琛岋紙鍦ㄥ叧鑱旇彍鍗曚腑锛孷alue涓虹┖鏃朵笉鍖哄垎ParentID锛夛紒',
+ duration: 5
+ })
+ return
+ } else if (values.type === 'link') {
+ let arr = values.options.map(m => m.ParentID + m.Value)
+ let _arr = Array.from(new Set(arr))
+ if (arr.length > _arr.length) {
+ notification.warning({
+ top: 92,
+ message: '鍚屼竴ParentID涓紝Value鍊间笉鍙噸澶嶏紒',
+ duration: 5
+ })
+ return
+ }
+ } else {
+ let arr = values.options.map(m => m.Value)
+ let _arr = Array.from(new Set(arr))
+ if (arr.length > _arr.length) {
+ notification.warning({
+ top: 92,
+ message: 'Value鍊间笉鍙噸澶嶏紒',
+ duration: 5
+ })
+ return
+ }
+ }
+ } else {
+ values.options = []
}
- if (emptys.length > 0) {
- isvalid = false
+ } else if (values.type === 'checkcard') {
+ if (values.resourceType === '0') {
+ values.options = values.options || []
+ values.options = values.options.map(m => {
+ m.ParentID = m.ParentID || ''
+ return m
+ })
+
+ let type = values.type
+ if (values.linkField) {
+ type = 'link'
+ }
+
+ if (type === 'link') {
+ let arr = values.options.map(m => m.ParentID + m.$value)
+ let _arr = Array.from(new Set(arr))
+ if (arr.length > _arr.length) {
+ notification.warning({
+ top: 92,
+ message: '鍚屼竴ParentID涓紝Value鍊间笉鍙噸澶嶏紒',
+ duration: 5
+ })
+ return
+ }
+ } else {
+ let arr = values.options.map(m => m.$value)
+ let _arr = Array.from(new Set(arr))
+ if (arr.length > _arr.length) {
+ notification.warning({
+ top: 92,
+ message: 'Value鍊间笉鍙噸澶嶏紒',
+ duration: 5
+ })
+ return
+ }
+ }
+ } else {
+ values.options = []
}
- } else if (['multiselect', 'select', 'link', 'checkcard'].includes(values.type) && values.resourceType === '1') {
- values.options = []
}
if (values.type === 'range') {
@@ -695,34 +742,28 @@
})
return
}
+ } else if (values.type === 'switch' || values.type === 'check') {
+ values.initval = values.initval === values.openVal ? values.openVal : values.closeVal
}
- if (isvalid) {
- ['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => {
- if (values[item]) {
- values[item] = values[item].replace(/\s* | \t* | \v* | \r*/ig, '')
- }
- })
-
- let error = Utils.verifySql(values.dataSource)
-
- if (error) {
- notification.warning({
- top: 92,
- message: '鏁版嵁婧愪腑涓嶅彲浣跨敤' + error,
- duration: 5
- })
- return
+ ['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => {
+ if (values[item]) {
+ values[item] = values[item].replace(/\s* | \t* | \v* | \r*/ig, '')
}
+ })
- resolve(values)
- } else {
+ let error = Utils.verifySql(values.dataSource)
+
+ if (error) {
notification.warning({
top: 92,
- message: this.props.dict['model.form.selectItem.error'],
+ message: '鏁版嵁婧愪腑涓嶅彲浣跨敤' + error,
duration: 5
})
+ return
}
+
+ resolve(values)
} else {
reject(err)
}
--
Gitblit v1.8.0