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/tabviews/zshare/topSearch/index.jsx | 765 ++++++++++++++++++++++++----------------------------------
1 files changed, 319 insertions(+), 446 deletions(-)
diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx
index 79a77e4..c16a881 100644
--- a/src/tabviews/zshare/topSearch/index.jsx
+++ b/src/tabviews/zshare/topSearch/index.jsx
@@ -1,18 +1,25 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
-import { Form, Row, Col, Input, Button, Select, DatePicker, notification } from 'antd'
+import { Form, Row, Col, Input, Button, notification, Modal, Icon } from 'antd'
import moment from 'moment'
import Api from '@/api'
import options from '@/store/options.js'
-import DateGroup from '@/tabviews/zshare/dategroup'
+import asyncComponent from '@/utils/asyncComponent'
+import asyncSpinComponent from '@/utils/asyncSpinComponent'
import Utils from '@/utils/utils.js'
import zhCN from '@/locales/zh-CN/main.js'
import enUS from '@/locales/en-US/main.js'
import './index.scss'
-const { MonthPicker, WeekPicker, RangePicker } = DatePicker
+const { Search } = Input
+
+const MutilForm = asyncSpinComponent(() => import('./advanceform'))
+const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard'))
+const MKSelect = asyncComponent(() => import('./mkSelect'))
+const DateGroup = asyncComponent(() => import('./dategroup'))
+const MKDatePicker = asyncComponent(() => import('./mkDatePicker'))
class MainSearch extends Component {
static propTpyes = {
@@ -20,33 +27,30 @@
menuType: PropTypes.any, // 鑿滃崟鏉冮檺锛屾槸鍚︿负HS
searchlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃
config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�)
+ setting: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�)
refreshdata: PropTypes.func // 鍒锋柊鏁版嵁
}
state = {
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
- oriId: Utils.getuuid(), // 鎼滅储琛ㄥ崟Id
- formId: '', // 鎼滅储琛ㄥ崟Id
- match: null, // 鎼滅储鏉′欢鍖归厤瑙勫垯
- style: null, // 鎼滅储鏉′欢绫诲瀷
- label: null, // 鎻愮ず鏂囧瓧
- required: null, // 鏄惁蹇呭～
searchlist: null, // 鎼滅储椤�
- groups: null, // 缁勫悎鎼滅储椤�
+ reset: true, // 鎺у埗缁勫悎鎼滅储椤归噸缃�
float: '', // 娴姩
showButton: true, // 鏄惁鏄剧ず鎼滅储鎸夐挳
- searchStyle: null // 鎼滅储鏉′欢鏍峰紡
+ showAdvanced: false, // 鏄惁鏄剧ず楂樼骇鎼滅储
+ searchStyle: null, // 鎼滅储鏉′欢鏍峰紡
+ advanceValues: [], // 楂樼骇鎼滅储鏉′欢淇濆瓨鍊�
+ visible: false,
+ adModelWidth: '1000px',
+ hasReqFields: false
}
+ record = {}
+
UNSAFE_componentWillMount () {
- const { config, menuType, searchlist } = this.props
+ const { config, menuType, searchlist, setting } = this.props
let _searchlist = []
- let match = {}
- let label = {}
- let style = {}
- let required = {}
- let _list = []
let fieldMap = new Map()
let mainItems = [] // 浜戠鎴栧崟鐐规暟鎹�
let localItems = [] // 鏈湴鏁版嵁
@@ -54,7 +58,24 @@
let float = ''
let showButton = true
let searchStyle = null
- let formId = Utils.getuuid()
+ let advanceValues = []
+ let showAdvanced = false
+ let adModelWidth = 1000
+ let linkFields = {}
+ let record = {}
+ let hasReqFields = false
+
+ if (setting && setting.advanceWidth) {
+ adModelWidth = setting.advanceWidth
+ } else if (config && config.wrap && config.wrap.advanceWidth) {
+ adModelWidth = config.wrap.advanceWidth
+ }
+
+ if (adModelWidth < 100) {
+ adModelWidth = adModelWidth + 'vw'
+ } else {
+ adModelWidth = adModelWidth + 'px'
+ }
if (searchlist) {
_searchlist = fromJS(searchlist).toJS()
@@ -62,28 +83,48 @@
_searchlist = fromJS(config.search).toJS()
if (config.type === 'search' && config.subtype === 'mainsearch') {
float = config.wrap.float
- showButton = config.wrap.float === 'left' && config.wrap.show === 'true'
+ showButton = config.wrap.show !== 'false'
searchStyle = config.style
} else {
- formId = ''
showButton = false
float = 'right'
}
}
_searchlist.forEach(item => {
+ if (item.type === 'link') {
+ linkFields[item.linkField] = linkFields[item.linkField] || []
+ linkFields[item.linkField].push({field: item.field, uuid: item.uuid})
+ }
+
if (fieldMap.has(item.field)) {
item.field = item.field + '@tail@'
}
- fieldMap.set(item.field, item)
- match[item.field] = item.match
- label[item.field] = item.label
- style[item.field] = item.type
- required[item.field] = item.required === 'true'
+ if (item.required) {
+ hasReqFields = true
+ }
- if (['select', 'link', 'multiselect'].includes(item.type)) {
- if (item.setAll === 'true' && item.type !== 'multiselect') {
+ if (showButton && item.advanced) {
+ showAdvanced = true
+ } else {
+ item.advanced = false
+ }
+
+ if (item.advanced && item.initval) {
+ advanceValues.push({field: item.field, type: item.type, label: item.label, value: item.initval})
+ }
+
+ if (item.type === 'group') {
+ record[item.field] = item.initType
+ record[item.datefield] = item.initval
+ } else {
+ record[item.field] = item.initval
+ }
+
+ if (['select', 'link', 'multiselect', 'checkcard'].includes(item.type)) {
+ item.options = item.options || []
+ if (item.setAll === 'true' && ['select', 'link'].includes(item.type)) {
item.options.unshift({
key: Utils.getuuid(),
Value: '',
@@ -103,10 +144,6 @@
data_sql: Utils.formatOptions(_option.sql)
})
} else { // 鍚堝苟璇锋眰锛屽尯鍒嗘湰鍦板強绯荤粺
- // 澶栬仈鏁版嵁搴撴浛鎹�
- if (window.GLOB.externalDatabase !== null) {
- _option.sql = _option.sql.replace(/@db@/ig, window.GLOB.externalDatabase)
- }
if (item.database === 'sso') {
mainItems.push(`select '${item.field}' as obj_name,'${_option.field}' as arr_field,'${window.btoa(window.encodeURIComponent(_option.sql))}' as LText`)
} else {
@@ -117,11 +154,18 @@
item.oriOptions = fromJS(item.options).toJS()
}
- _list.push(item)
+ fieldMap.set(item.field, item)
})
- let _groups = []
- _list = _list.map(item => {
+ this.record = record
+
+ let _list = _searchlist.map(item => {
+ if (item.hidden) return item
+
+ if (linkFields[item.field]) {
+ item.linkFields = linkFields[item.field]
+ }
+
if (item.type === 'link') {
let supItem = fieldMap.get(item.linkField)
@@ -131,29 +175,25 @@
message: '鏈煡璇㈠埌鎼滅储鏉′欢銆�' + item.label + '銆嬪叧鑱斿瓧娈碉紒',
duration: 5
})
- item.supInitVal = ''
+ item.type = 'select'
} else {
item.supInitVal = supItem.initval
item.options = item.oriOptions.filter(option => option.ParentID === supItem.initval || option.Value === '')
}
- } else if (item.type === 'group' && item.Hide !== 'true') {
- _groups.push(fromJS(item).toJS())
}
return item
})
this.setState({
- match,
- label,
- style,
float,
- formId,
- required,
showButton,
searchStyle,
- searchlist: _list,
- groups: _groups
+ hasReqFields,
+ showAdvanced,
+ adModelWidth,
+ advanceValues,
+ searchlist: _list
}, () => {
if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) {
this.improveSimpleSearch(deForms)
@@ -264,42 +304,7 @@
delete result.message
delete result.status
- let _searchlist = this.state.searchlist.map(item => {
- if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
- let options = result[item.field].map(cell => {
- let _item = {
- key: Utils.getuuid(),
- Value: cell[item.valueField],
- Text: cell[item.valueText]
- }
-
- if (item.type === 'link') {
- _item.ParentID = cell[item.linkField]
- }
-
- return _item
- })
-
- item.oriOptions = [...item.oriOptions, ...options]
- }
- return item
- })
-
- this.setState({
- searchlist: _searchlist.map(item => {
- if (item.type === 'link') {
- if (item.supInitVal) {
- item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
- } else {
- item.options = item.oriOptions
- }
- } else if (item.type === 'select' || item.type === 'multiselect') {
- item.options = item.oriOptions
- }
-
- return item
- })
- })
+ this.resetSearch(result)
})
}
@@ -350,283 +355,119 @@
delete result.message
delete result.status
- let _searchlist = this.state.searchlist.map(item => {
- if (['select', 'link', 'multiselect'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
- let options = result[item.field].map(cell => {
- let _item = {
- key: Utils.getuuid(),
- Value: cell[item.valueField],
- Text: cell[item.valueText]
- }
+ this.resetSearch(result)
+ })
+ }
- if (item.type === 'link') {
- _item.ParentID = cell[item.linkField]
- }
+ resetSearch = (result) => {
+ let _searchlist = this.state.searchlist.map(item => {
+ if (['select', 'link', 'multiselect', 'checkcard'].includes(item.type) && result[item.field] && result[item.field].length > 0) {
+ let options = result[item.field].map(cell => {
+ let _item = {
+ key: Utils.getuuid()
+ }
- return _item
- })
+ if (item.type !== 'checkcard') {
+ _item.Value = cell[item.valueField]
+ _item.Text = cell[item.valueText]
+ } else {
+ _item.$value = cell[item.cardValField]
+ _item = {..._item, ...cell}
+ }
- item.oriOptions = [...item.oriOptions, ...options]
- }
- return item
- })
-
- this.setState({
- searchlist: _searchlist.map(item => {
if (item.type === 'link') {
- if (item.supInitVal) {
- item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
- } else {
- item.options = item.oriOptions
- }
- } else if (item.type === 'select' || item.type === 'multiselect') {
- item.options = item.oriOptions
+ _item.ParentID = cell[item.linkField]
}
- return item
+ return _item
})
- })
- })
- }
- resetform = (formlist, supfields, index, fieldsvalue) => {
- index++
- let subfields = []
-
- supfields.forEach(supfield => {
- formlist = formlist.map(item => {
- if (item.type === 'link' && item.linkField === supfield.field) {
- item.options = item.oriOptions.filter(option => option.ParentID === supfield.initval || option.Value === '')
- item.initval = item.options[0] ? item.options[0].Value : ''
-
- if (this.props.form.getFieldValue(item.field) !== undefined) {
- fieldsvalue[item.field] = item.initval
- }
-
- subfields.push(item)
- }
- return item
- })
- })
-
- if (subfields.length === 0 || index > 6) {
- return formlist
- } else {
- return this.resetform(formlist, subfields, index, fieldsvalue)
- }
- }
-
- selectChange = (_field, value) => {
- let formlist = fromJS(this.state.searchlist).toJS()
-
- let subfields = []
- let fieldsvalue = {}
- formlist = formlist.map(item => {
- if (item.type === 'link' && item.linkField === _field.field) {
- item.options = item.oriOptions.filter(option => option.ParentID === value || option.Value === '')
- item.initval = item.options[0] ? item.options[0].Value : ''
-
- if (this.props.form.getFieldValue(item.field) !== undefined) {
- fieldsvalue[item.field] = item.initval
- }
-
- subfields.push(item)
+ item.oriOptions = [...item.oriOptions, ...options]
}
return item
})
- if (subfields.length === 0) {
- this.searchChange()
- return
- }
-
- formlist = this.resetform(formlist, subfields, 0, fieldsvalue)
-
- if (Object.keys(fieldsvalue).length > 0) {
- this.props.form.setFieldsValue(fieldsvalue)
- }
-
this.setState({
- searchlist: formlist
- }, () => {
- this.searchChange()
+ searchlist: _searchlist.map(item => {
+ if (item.type === 'link') {
+ if (item.supInitVal) {
+ item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '')
+ } else {
+ item.options = item.oriOptions
+ }
+ } else if (item.type === 'select' || item.type === 'multiselect' || item.type === 'checkcard') {
+ item.options = item.oriOptions
+ }
+
+ return item
+ })
})
+ }
+
+ recordChange = (val, defer, item) => {
+ this.record[item.field] = val
+
+ if (defer) return
+
+ if (item.linkFields) {
+ setTimeout(() => {
+ this.handleSubmit()
+ }, 1000)
+ } else {
+ this.handleSubmit()
+ }
+ }
+
+ dateGroupChange = (val, type, item) => {
+ this.record[item.datefield] = val
+ this.record[item.field] = type
+
+ this.handleSubmit()
}
getFields() {
const { getFieldDecorator } = this.props.form
- const { dict, showButton, formId } = this.state
+ const { dict, showButton, showAdvanced, float } = this.state
const fields = []
this.state.searchlist.forEach((item, index) => {
- if (item.Hide === 'true') return
-
- if (item.type === 'text') { // 鏂囨湰鎼滅储
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: item.initval,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.input'] + item.label + '!'
- }
- ]
- })(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.handleSearch} />)}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'select') { // 涓嬫媺鎼滅储
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: item.initval,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Select
- showSearch
- onChange={(value) => {this.selectChange(item, value)}}
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
- >
- {item.options.map((option, i) =>
- <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'multiselect') { // 涓嬫媺澶氶��
- let _initval = item.initval ? item.initval.split(',').filter(Boolean) : []
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: _initval,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <Select
- showSearch
- mode="multiple"
- onChange={this.searchChange}
- filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
- getPopupContainer={() => formId ? document.getElementById(formId) : document.body}
- >
- {item.options.map((option, i) =>
- <Select.Option id={`${i}`} title={option.Text} key={`${i}`} value={option.Value}>{option.Text}</Select.Option>
- )}
- </Select>
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'date') { // 鏃堕棿鎼滅储
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: item.initval ? moment().subtract(item.initval, 'days') : null,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <DatePicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'datemonth') {
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: item.initval ? moment().subtract(item.initval, 'month') : null,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <MonthPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'dateweek') {
- fields.push(
- <Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field, {
- initialValue: item.initval ? moment().subtract(item.initval * 7, 'days') : null,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <WeekPicker onChange={this.searchChange} getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} />
- )}
- </Form.Item>
- </Col>
- )
- } else if (item.type === 'daterange') {
- let _defaultValue = [null, null]
+ if (item.hidden || item.advanced) return
- if (item.initval) {
- try {
- let _initval = JSON.parse(item.initval)
- _defaultValue = [moment().subtract(_initval[0], 'days'), moment().subtract(_initval[1], 'days')]
- } catch {
- _defaultValue = [null, null]
- }
+ const _rules = [
+ {
+ required: item.required,
+ message: item.label + '涓嶅彲涓虹┖!'
}
+ ]
- fields.push(
- <Col className="daterange" span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
- {getFieldDecorator(item.field,
- {
- initialValue: _defaultValue,
- rules: [
- {
- required: item.required === 'true',
- message: dict['form.required.select'] + item.label + '!'
- }
- ]
- })(
- <RangePicker
- placeholder={['寮�濮嬫棩鏈�', '缁撴潫鏃ユ湡']}
- renderExtraFooter={() => 'extra footer'}
- onChange={this.searchChange}
- getCalendarContainer={() => formId ? document.getElementById(formId) : document.body}
- />
- )}
- </Form.Item>
- </Col>
- )
+ let content = null
+ let field = item.field
+
+ if (item.type === 'text') {
+ if (item.inputType === 'search') {
+ content = <Search placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onSearch={this.handleSubmit} enterButton/>
+ } else {
+ content = <Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.handleSubmit} />
+ }
+ } else if (item.type === 'select' || item.type === 'link' || item.type === 'multiselect') {
+ content = (<MKSelect config={item} onChange={(val, defer) => this.recordChange(val, defer, item)} />)
+ } else if (item.type === 'date' || item.type === 'datemonth' || item.type === 'dateweek' || item.type === 'daterange') {
+ content = (<MKDatePicker config={item} onChange={(val) => this.recordChange(val, false, item)} />)
} else if (item.type === 'group') {
+ field = item.datefield
+ content = <DateGroup position={index} config={item} onChange={(val, type) => this.dateGroupChange(val, type, item)} />
+ } else if (item.type === 'checkcard') {
+ content = <MKCheckCard card={item} onChange={this.handleSubmit} />
+ }
+
+ if (content) {
fields.push(
<Col span={item.ratio || 6} key={index}>
- <Form.Item label={item.labelShow !== 'false' ? item.label : ''} className={item.required === 'true' ? 'group-required' : ''}>
- <DateGroup ref={item.uuid} position={index} card={item} onGroupChange={this.searchChange} />
+ <Form.Item label={item.labelShow !== 'false' ? item.label : ''}>
+ {getFieldDecorator(field, {
+ initialValue: item.initval,
+ rules: _rules
+ })(content)}
</Form.Item>
</Col>
)
@@ -634,78 +475,58 @@
})
if (showButton) {
- fields.push(
+ let action = (
<Col span={6} style={{ whiteSpace: 'nowrap' }} className="search-button" key="actions">
<Form.Item label={' '} colon={false} style={{ minHeight: '40px' }}>
- <Button type="primary" onClick={this.handleSearch}>
+ <Button type="primary" onClick={this.handleSubmit}>
{dict['main.search']}
</Button>
<Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
{dict['main.reset']}
</Button>
+ {showAdvanced ? <Button type="link" onClick={this.handleAdvance}>
+ 楂樼骇
+ </Button> : null}
</Form.Item>
</Col>
)
+ if (float === 'right') {
+ fields.unshift(action)
+ } else {
+ fields.push(action)
+ }
}
return fields
}
- addHideFieldValue = (values) => {
- const { searchlist } = this.state
- let hideValue = {}
- searchlist.forEach(item => {
- if (item.Hide === 'true') {
- let value = ''
-
- if (item.type === 'multiselect') { // 涓嬫媺澶氶��
- value = item.initval ? item.initval.split(',').filter(Boolean) : []
- } else if (item.type === 'date') { // 鏃堕棿鎼滅储
- value = item.initval ? moment().subtract(item.initval, 'days') : ''
- } else if (item.type === 'datemonth') {
- value = item.initval ? moment().subtract(item.initval, 'month') : ''
- } else if (item.type === 'dateweek') {
- value = item.initval ? moment().subtract(item.initval * 7, 'days') : ''
- } else if (item.type === 'daterange') {
- if (item.initval) {
- try {
- let _initval = JSON.parse(item.initval)
- value = [moment().subtract(_initval[0], 'days'), moment().subtract(_initval[1], 'days')]
- } catch {
- value = ''
- }
- }
- } else if (item.type !== 'group') {
- value = item.initval
- }
-
- hideValue[item.field] = value
- }
- })
-
- return {...hideValue, ...values}
+ handleAdvance = () => {
+ this.setState({visible: true})
}
- handleSearch = (e) => {
- // 鍥炶溅鎴栫偣鍑绘悳绱�
- e.preventDefault()
- this.props.form.validateFields((err, values) => {
- if (!err) {
- values = this.addHideFieldValue(values)
- let searches = this.getFieldsValues(values)
- this.props.refreshdata(searches)
- }
- })
- }
-
- searchChange = () => {
+ handleSubmit = () => {
this.setState({}, () => {
this.props.form.validateFields((err, values) => {
- if (!err) {
- values = this.addHideFieldValue(values)
- let searches = this.getFieldsValues(values)
- this.props.refreshdata(searches)
+ if (err) return
+
+ let searches = this.getFieldsValues(values)
+
+ if (this.state.hasReqFields) {
+ let requireFields = searches.filter(item => item.required && item.value === '')
+ if (requireFields.length > 0) {
+ let labels = requireFields.map(item => item.label)
+ labels = Array.from(new Set(labels))
+
+ notification.warning({
+ top: 92,
+ message: this.state.dict['form.required.input'] + labels.join('銆�') + ' !',
+ duration: 3
+ })
+ return
+ }
}
+
+ this.props.refreshdata(searches)
})
})
}
@@ -714,87 +535,109 @@
* @description 鎼滅储鏉′欢閲嶇疆
*/
handleReset = () => {
- const { groups } = this.state
-
- if (groups.length > 0) {
- groups.forEach(item => {
- this.refs[item.uuid].reset()
- })
- }
-
+ let record = {}
+ let advanceValues = []
let searchlist = this.state.searchlist.map(item => {
item.initval = item.oriInitval
+
+ if (item.type === 'group') {
+ record[item.datefield] = item.initval
+ record[item.field] = item.initType
+ } else {
+ record[item.field] = item.initval
+ }
+ if (item.advanced && item.initval) {
+ advanceValues.push({field: item.field, type: item.type, label: item.label, value: item.initval})
+ }
+
return item
})
- this.setState({searchlist}, () => {
- this.props.form.resetFields()
- this.props.form.validateFields((err, values) => {
- if (!err) {
- // 寮傛鑾峰彇鏇存柊鍚庣殑鏃堕棿缁�
- this.setState({}, () => {
- values = this.addHideFieldValue(values)
- let searches = this.getFieldsValues(values)
- this.props.refreshdata(searches)
- })
- }
+ this.record = record
+
+ this.setState({searchlist: [], advanceValues}, () => {
+ this.setState({searchlist}, () => {
+ this.handleSubmit()
})
})
}
- getFieldsValues = (values) => {
- const { groups } = this.state
+ getFieldsValues = (vals) => {
+ const { searchlist } = this.state
+ let values = {...this.record, ...vals}
+ this.record = values
+
// 鑾峰彇鎼滅储鏉′欢鍊�
let search = []
- Object.keys(values).forEach(key => {
- let _value = ''
- if (this.state.style[key] === 'daterange') {
- if (values[key].length > 0 && values[key][0] && values[key][1]) {
- _value = [moment(values[key][0]).format('YYYY-MM-DD'), moment(values[key][1]).format('YYYY-MM-DD')]
- }
- } else if (this.state.style[key] === 'dateweek') {
- if (values[key]) {
- _value = [moment(values[key]).startOf('week').format('YYYY-MM-DD'), moment(values[key]).endOf('week').format('YYYY-MM-DD')]
- }
- } else if (this.state.style[key] === 'date') {
- if (values[key]) {
- _value = moment(values[key]).format('YYYY-MM-DD')
- }
- } else if (this.state.style[key] === 'datemonth') {
- if (values[key]) {
- _value = moment(values[key]).format('YYYY-MM')
- }
- } else if (this.state.style[key] === 'multiselect') {
- _value = values[key] || []
-
+ searchlist.forEach(item => {
+ if (item.type === 'group') {
+ search.push({
+ type: 'daterange',
+ key: item.datefield,
+ value: values[item.datefield] || '',
+ label: item.label,
+ match: 'between',
+ required: item.required
+ }, {
+ type: 'group',
+ key: item.field,
+ value: values[item.field] || '',
+ label: item.label,
+ match: '=',
+ forbid: true,
+ required: item.required
+ })
} else {
- _value = (values[key] || values[key] === 0) ? values[key] : ''
+ let type = item.type
+ if (type === 'multiselect' || (type === 'checkcard' && item.multiple === 'true')) {
+ type = 'multi'
+ }
+ let val = values[item.field] !== undefined ? values[item.field] : ''
- _value = _value.replace(/(^\s*|\s*$)/ig, '')
+ if (typeof(val) === 'string') {
+ val = val.replace(/(^\s*|\s*$)/ig, '')
+ }
+
+ search.push({
+ type: type,
+ key: item.field.replace(/@tail@$/, ''),
+ value: val,
+ label: item.label,
+ match: item.match,
+ required: item.required
+ })
}
-
- search.push({
- type: this.state.style[key],
- key: key.replace(/@tail@$/, ''),
- value: _value,
- label: this.state.label[key],
- match: this.state.match[key],
- required: this.state.required[key]
- })
})
-
- if (groups.length > 0) {
- groups.forEach(item => {
- let items = this.refs[item.uuid].getSearchItems()
- search.push(...items)
- })
- }
return search
}
+ handleOk = (values) => {
+ this.record = {...this.record, ...values}
+
+ let advanceValues = []
+ this.state.searchlist.forEach(item => {
+ if (!item.advanced) return
+
+ let val = this.record[item.field]
+ if (val || val === 0) {
+ advanceValues.push({field: item.field, type: item.type, label: item.label, value: val})
+ }
+ })
+
+ this.setState({advanceValues, visible: false})
+ this.handleSubmit()
+ }
+
+ closeAdvanceForm = (cell) => {
+ this.record[cell.field] = ''
+
+ this.setState({advanceValues: this.state.advanceValues.filter(item => item.field !== cell.field)})
+ this.handleSubmit()
+ }
+
render() {
- const { float, searchStyle } = this.state
+ const { float, searchStyle, visible, searchlist, showAdvanced, advanceValues, adModelWidth } = this.state
const formItemLayout = {
labelCol: {
xs: { span: 24 },
@@ -807,9 +650,39 @@
}
return (
- <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle} id={this.state.formId || this.state.oriId}>
- <Row gutter={24}>{this.getFields()}</Row>
- </Form>
+ <>
+ <Form {...formItemLayout} className={`top-search ${float}`} style={searchStyle}>
+ <Row gutter={24}>{this.getFields()}</Row>
+ <Row gutter={24}>
+ {showAdvanced ? <div className="advanced-list">
+ {advanceValues.map((item, index) => {
+ return (
+ <div key={index}>
+ <span>{item.label}: </span>
+ <span className="advance-value">{item.value}</span>
+ <Icon type="close" onClick={() => this.closeAdvanceForm(item)} />
+ </div>)
+ })}
+ </div> : null}
+ </Row>
+ </Form>
+ <Modal
+ title="楂樼骇鎼滅储"
+ maskClosable={false}
+ visible={visible}
+ width={adModelWidth}
+ closable={false}
+ footer={null}
+ destroyOnClose
+ >
+ <MutilForm
+ searchlist={searchlist}
+ record={this.record}
+ advanceSubmit={this.handleOk}
+ handleClose={() => this.setState({visible: false})}
+ />
+ </Modal>
+ </>
)
}
}
--
Gitblit v1.8.0