From 2031a460f6c0827fe80f8c625dd98333d1631d2f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期五, 08 五月 2020 22:10:48 +0800
Subject: [PATCH] 2020-05-08
---
src/templates/sharecomponent/searchcomponent/searchform/index.jsx | 206 ++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 176 insertions(+), 30 deletions(-)
diff --git a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
index e7941ec..f6c62a0 100644
--- a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
+++ b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx
@@ -1,12 +1,85 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
-import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber } from 'antd'
+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 './index.scss'
const { TextArea } = Input
+
+const groupOptions = [
+ {
+ value: 'day',
+ label: '鏃�',
+ children: [
+ {value: '0', label: '褰撳ぉ'},
+ {value: 1, label: '鏄ㄥぉ'},
+ {value: 2, label: '鍓嶅ぉ'},
+ {value: 3, label: '鍓嶄笁澶�'},
+ {value: 7, label: '鍓嶄竷澶�'},
+ {value: 30, label: '鍓�30澶�'},
+ {value: -1, label: '鏄庡ぉ'},
+ {value: -2, label: '鍚庡ぉ'}
+ ]
+ },
+ {
+ value: 'week',
+ label: '鍛�',
+ children: [
+ {value: '0', label: '鏈懆'},
+ {value: 1, label: '涓婂懆'},
+ {value: 3, label: '鍓嶄笁鍛�'},
+ {value: 7, label: '鍓嶄竷鍛�'},
+ {value: -1, label: '涓嬪懆'}
+ ]
+ },
+ {
+ value: 'month',
+ label: '鏈�',
+ children: [
+ {value: '0', label: '鏈湀'},
+ {value: 1, label: '涓婃湀'},
+ {value: 3, label: '鍓嶄笁鏈�'},
+ {value: 7, label: '鍓嶄竷鏈�'},
+ {value: -1, label: '涓嬫湀'}
+ ]
+ },
+ {
+ value: 'quarter',
+ label: '瀛�',
+ children: [
+ {value: '0', label: '鏈搴�'},
+ {value: 1, label: '涓婂搴�'},
+ {value: -1, label: '涓嬪搴�'}
+ ]
+ },
+ {
+ value: 'year',
+ label: '骞�',
+ children: [
+ {value: '0', label: '鏈勾'},
+ {value: 1, label: '鍘诲勾'},
+ {value: -1, label: '鏄庡勾'}
+ ]
+ },
+ {
+ value: 'customized',
+ label: '鑷畾涔�',
+ children: [
+ {value: '[0, 0]', label: '浠婂ぉ'},
+ {value: '[1, 1]', label: '鏄ㄥぉ'},
+ {value: '[3, 0]', label: '杩戜笁澶�'},
+ {value: '[7, 0]', label: '杩戜竷澶�'},
+ {value: '[30, 0]', label: '杩�30澶�'},
+ {value: '[7, -7]', label: '鍓嶅悗涓冨ぉ'},
+ {value: '[30, -30]', label: '鍓嶅悗30澶�'},
+ {value: '[90, -90]', label: '鍓嶅悗90澶�'},
+ {value: '[-1, -1]', label: '鏄庡ぉ'},
+ {value: '[-2, -2]', label: '鍚庡ぉ'}
+ ]
+ },
+]
class MainSearch extends Component {
static propTpyes = {
@@ -20,7 +93,8 @@
state = {
openType: null, // 鎼滅储鏉′欢鏄剧ず绫诲瀷
resourceType: null, // 涓嬫媺鎼滅储鏃讹紝閫夐」鏉ユ簮绫诲瀷
- formlist: null // 琛ㄥ崟
+ formlist: null, // 琛ㄥ崟
+ textTooltip: '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱�',
}
/**
@@ -29,9 +103,10 @@
* 2銆佷笅鎷夐�夋嫨锛屾牴鎹暟鎹簮绫诲瀷鏄剧ず鐩稿叧閰嶇疆
*/
UNSAFE_componentWillMount () {
- const { formlist, optionLibs } = this.props
+ const { formlist, optionLibs, 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'] // 榛樿鏄剧ず椤�
@@ -39,6 +114,8 @@
_options = [..._options, 'resourceType', 'options', 'display', 'quick']
} 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']
}
if (type === 'select' || type === 'link') {
@@ -51,15 +128,17 @@
this.setState({
openType: type,
+ items: _items,
resourceType: resourceType,
formlist: formlist.map(form => {
// 琛ㄥ崟涓哄垵濮嬪�煎瓧娈碉紝涓旀暟鎹被鍨嬪睘浜庢椂闂寸被鍨嬫椂锛岃缃垵濮嬪�间负涓嬫媺閫夋嫨锛屽苟閲嶇疆閫夋嫨椤�
if (form.key === 'initval' && dateOptions.hasOwnProperty(type)) {
form.options = dateOptions[type]
form.type = 'select'
- }
- // 琛ㄥ崟涓哄尮閰嶅瓧娈垫椂锛屾牴鎹笉鍚岀殑绫诲瀷锛屾樉绀哄搴旂殑鍖归厤瑙勫垯
- if (form.key === 'match') {
+ } 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') {
@@ -80,6 +159,10 @@
text: cell.label + '(' + cell.parname + ')'
}
})
+ } else if (form.key === 'field' && type === 'text') {
+ form.tooltip = this.state.textTooltip
+ } else if (form.key === 'field' && type === 'group') {
+ form.label = dict['header.form.type'] + dict['header.form.field']
}
form.hidden = !_options.includes(form.key)
return form
@@ -104,7 +187,8 @@
* @description 鎼滅储鏉′欢绫诲瀷鍒囨崲
*/
openTypeChange = (key, value) => {
- const { resourceType } = this.state
+ const { dict } = this.props
+ const { resourceType, items } = this.state
if (key === 'type') {
let _options = ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required']
@@ -113,6 +197,8 @@
_options = [..._options, 'resourceType', 'options', 'display', 'quick']
} 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']
}
if (value === 'select' || value === 'link') {
@@ -123,6 +209,8 @@
_options = [..._options, 'linkField']
}
+ let matchs = []
+
this.setState({
openType: value,
formlist: this.state.formlist.map(form => {
@@ -132,11 +220,12 @@
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'
}
- form.initVal = '' // 鎼滅储鏉′欢绫诲瀷鍒囨崲鏃讹紝鍒濆鍊肩疆绌�
- form.hidden = true
} else if (form.key === 'match') { // 鎼滅储鏉′欢绫诲瀷鍒囨崲鏃讹紝鍖归厤瑙勫垯绫诲瀷瀵瑰簲鍒囨崲
if (value === 'text') {
form.options = matchReg.text
@@ -151,33 +240,34 @@
} else if (value === 'dateweek' || value === 'daterange') {
form.options = matchReg.daterange
}
- form.hidden = true
+ matchs = form.options
+ } else if (form.key === 'field') {
+ form.tooltip = ''
+ form.label = dict['header.form.field']
+ if (value === 'text') {
+ form.tooltip = this.state.textTooltip
+ } else if (value === 'group') {
+ form.label = dict['header.form.type'] + dict['header.form.field']
+ }
}
return form
})
}, () => {
- this.setState({
- formlist: this.state.formlist.map(form => {
-
- if (form.key === 'initval') {
- form.hidden = false
- } else if (form.key === 'match') {
- form.initVal = form.options[0].value
- form.hidden = false
- }
-
- return form
- })
- })
+ if (this.props.form.getFieldValue('initval') !== undefined) {
+ this.props.form.setFieldsValue({initval: ''})
+ }
+ if (this.props.form.getFieldValue('match') !== undefined) {
+ this.props.form.setFieldsValue({match: matchs[0].value})
+ }
})
} else if (key === 'quick') {
- let option = this.props.optionLibs.get(value)
+ let _option = this.props.optionLibs.get(value)
this.setState({
formlist: this.state.formlist.map(form => {
if (form.key === 'options') {
- form.initVal = option.options
+ form.initVal = _option.options
}
return form
@@ -220,6 +310,26 @@
}
}
+ checkChange = (values, key) => {
+ const { openType, formlist } = this.state
+
+ 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
+ })
+ })
+ if (this.props.form.getFieldValue('initval') !== undefined) {
+ this.props.form.setFieldsValue({initval: ''})
+ }
+ }
+ }
+
handleSubmit = (e) => {
e.preventDefault()
@@ -229,6 +339,7 @@
}
getFields() {
+ const { openType } = this.state
const { getFieldDecorator } = this.props.form
const fields = []
this.state.formlist.forEach((item, index) => {
@@ -236,9 +347,9 @@
if (item.type === 'text') { // 鏂囨湰鎼滅储
let rules = []
- if (item.key === 'field') {
+ if (item.key === 'field' || item.key === 'datefield') {
rules = [{
- pattern: formRule.field.pattern,
+ pattern: openType === 'text' ? formRule.field.multipattern : formRule.field.pattern,
message: formRule.field.message
}, {
max: formRule.field.max,
@@ -325,7 +436,12 @@
} else if (item.type === 'radio') {
fields.push(
<Col span={12} key={index}>
- <Form.Item label={item.label}>
+ <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: [
@@ -367,7 +483,25 @@
} else if (item.type === 'options') {
fields.push(
<Col span={20} offset={4} key={index}>
- <EditTable data={item.initVal} type={this.state.openType} ref="editTable"/>
+ <EditTable data={item.initVal} type={this.state.openType} dict={this.props.dict} ref="editTable"/>
+ </Col>
+ )
+ } 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>
)
} else if (item.type === 'multiselect') { // 澶氶��
@@ -386,6 +520,18 @@
<Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option>
)}
</Select>
+ )}
+ </Form.Item>
+ </Col>
+ )
+ } 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>
@@ -465,7 +611,7 @@
}
}
return (
- <Form {...formItemLayout} className="ant-advanced-search-form commontable-search-form" id="commontable-search-form-box">
+ <Form {...formItemLayout} className="model-search-edit-form" id="commontable-search-form-box">
<Row gutter={24}>{this.getFields()}</Row>
</Form>
)
--
Gitblit v1.8.0