From cf804e19634ff953bb132af1b2f46905d80c1e3a Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期三, 12 五月 2021 15:08:34 +0800 Subject: [PATCH] 2021-05-12 --- src/tabviews/zshare/topSearch/index.jsx | 480 +++++++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 335 insertions(+), 145 deletions(-) diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx index 1fbf809..be6e6fe 100644 --- a/src/tabviews/zshare/topSearch/index.jsx +++ b/src/tabviews/zshare/topSearch/index.jsx @@ -1,12 +1,13 @@ 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, Select, DatePicker, 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 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' @@ -14,12 +15,15 @@ const { MonthPicker, WeekPicker, RangePicker } = DatePicker +const MutilForm = asyncSpinComponent(() => import('./advanceform')) + class MainSearch extends Component { static propTpyes = { BID: PropTypes.any, // 鐖剁骇Id锛岀敤浜庢煡璇笅鎷夐�夋嫨椤� menuType: PropTypes.any, // 鑿滃崟鏉冮檺锛屾槸鍚︿负HS searchlist: PropTypes.array, // 鎼滅储鏉′欢鍒楄〃 config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�) + setting: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅(鑷畾涔夐〉闈�) refreshdata: PropTypes.func // 鍒锋柊鏁版嵁 } @@ -27,25 +31,22 @@ 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, // 鎼滅储鏉′欢鏍峰紡 + searchValues: {}, // 鎼滅储鏉′欢淇濆瓨鍊� + advanceValues: [], // 楂樼骇鎼滅储鏉′欢淇濆瓨鍊� + visible: false, + adModelWidth: '1000px', } 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 = [] // 浜戠鎴栧崟鐐规暟鎹� @@ -54,7 +55,23 @@ let float = '' let showButton = true let searchStyle = null + let searchValues = {} + let advanceValues = [] + let showAdvanced = false + let adModelWidth = 1000 let formId = Utils.getuuid() + + 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() @@ -77,10 +94,7 @@ } 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' + item.required = item.required === 'true' if (['select', 'link', 'multiselect'].includes(item.type)) { if (item.setAll === 'true' && item.type !== 'multiselect') { @@ -120,8 +134,23 @@ _list.push(item) }) - let _groups = [] _list = _list.map(item => { + if (item.Hide === 'true') { + searchValues[item.field] = this.getInitValue(item) + } else if (showButton && item.advanced === 'true') { + showAdvanced = true + let _value = this.getInitValue(item) + searchValues[item.field] = _value + + let _val = this.getAdvanceValue(item, _value) + if (_val) { + advanceValues.push({field: item.field, type: item.type, label: item.label, value: _val}) + } + } else if (item.type === 'group') { + searchValues[item.datefield] = this.getInitValue(item) + searchValues[item.field] = item.initval && item.initval[0] ? item.initval[0] : '' + } + if (item.type === 'link') { let supItem = fieldMap.get(item.linkField) @@ -136,24 +165,21 @@ 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 + searchValues, + showAdvanced, + adModelWidth, + advanceValues, + searchlist: _list }, () => { if (menuType !== 'HS' && options.sysType === 'local' && !window.GLOB.systemType) { this.improveSimpleSearch(deForms) @@ -161,6 +187,98 @@ this.improveSearch(mainItems, localItems) } }) + } + + getInitValue = (item) => { + let value = item.initval || '' + + 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' && item.initval && item.initval.length > 0) { + let _type = item.initval[0] + let _val = item.initval[1] + + if (_type === 'day') { + value = [moment().subtract(_val, 'days').format('YYYY-MM-DD'), moment().subtract(_val, 'days').format('YYYY-MM-DD')] + } else if (_type === 'week') { + value = [moment().subtract(_val * 7, 'days').startOf('week').format('YYYY-MM-DD'), moment().subtract(_val * 7, 'days').endOf('week').format('YYYY-MM-DD')] + } else if (_type === 'month') { + value = [moment().subtract(_val, 'month').startOf('month').format('YYYY-MM-DD'), moment().subtract(_val, 'month').endOf('month').format('YYYY-MM-DD')] + } else if (_type === 'quarter') { + let _differ = parseInt(moment().format('MM')) % 3 + let _pdiffer = 0 + let _ndiffer = 0 + + // 宸�艰绠� + switch(_differ) { + case 0: + _pdiffer = 2 + _ndiffer = 0 + break + case 1: + _pdiffer = 0 + _ndiffer = -2 + break + case 2: + _pdiffer = 1 + _ndiffer = -1 + break + default: + } + + value = [moment().subtract(_pdiffer + _val * 3, 'month').startOf('month').format('YYYY-MM-DD'), moment().subtract(_ndiffer + _val * 3, 'month').endOf('month').format('YYYY-MM-DD')] + } else if (_type === 'year') { + let _year = parseInt(moment().format('YYYY')) - _val + value = [_year + '-01-01', _year + '-12-31'] + } else if (_type === 'customized') { + try { + _val = JSON.parse(_val) + } catch { + _val = [0, 0] + } + value = [moment().subtract(_val[0], 'days').format('YYYY-MM-DD'), moment().subtract(_val[1], 'days').format('YYYY-MM-DD')] + } + } + + return value + } + + getAdvanceValue = (item, value) => { + if (!value || (Array.isArray(value) && value.length === 0)) return '' + + let val = '' + if (item.type === 'multiselect') { + val = value.join(', ') + } else if (item.type === 'daterange') { + if (value[0] && value[1]) { + val = `${moment(value[0]).format('YYYY-MM-DD')} ~ ${moment(value[1]).format('YYYY-MM-DD')}` + } + } else if (item.type === 'dateweek') { + val = `${moment(value).startOf('week').format('YYYY-MM-DD')} ~ ${moment(value).endOf('week').format('YYYY-MM-DD')}` + } else if (item.type === 'date') { + val = moment(value).format('YYYY-MM-DD') + } else if (item.type === 'datemonth') { + val = moment(value).format('YYYY-MM') + } else { + val = value.replace(/(^\s*|\s*$)/ig, '') + } + + return val } // 鏌ヨ涓嬫媺鑿滃崟 @@ -455,11 +573,11 @@ getFields() { const { getFieldDecorator } = this.props.form - const { dict, showButton, formId } = this.state + const { dict, showButton, formId, showAdvanced } = this.state const fields = [] this.state.searchlist.forEach((item, index) => { - if (item.Hide === 'true') return + if (item.Hide === 'true' || (showAdvanced && item.advanced === 'true')) return if (item.type === 'text') { // 鏂囨湰鎼滅储 fields.push( @@ -469,7 +587,7 @@ initialValue: item.initval, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.input'] + item.label + '!' } ] @@ -477,7 +595,7 @@ </Form.Item> </Col> ) - } else if (item.type === 'select') { // 涓嬫媺鎼滅储 + } else if (item.type === 'select' || item.type === 'link') { // 涓嬫媺鎼滅储 fields.push( <Col span={item.ratio || 6} key={index}> <Form.Item label={item.labelShow !== 'false' ? item.label : ''}> @@ -485,7 +603,7 @@ initialValue: item.initval, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.select'] + item.label + '!' } ] @@ -513,7 +631,7 @@ initialValue: _initval, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.select'] + item.label + '!' } ] @@ -541,7 +659,7 @@ initialValue: item.initval ? moment().subtract(item.initval, 'days') : null, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.select'] + item.label + '!' } ] @@ -559,7 +677,7 @@ initialValue: item.initval ? moment().subtract(item.initval, 'month') : null, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.select'] + item.label + '!' } ] @@ -577,7 +695,7 @@ initialValue: item.initval ? moment().subtract(item.initval * 7, 'days') : null, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.select'] + item.label + '!' } ] @@ -607,7 +725,7 @@ initialValue: _defaultValue, rules: [ { - required: item.required === 'true', + required: item.required, message: dict['form.required.select'] + item.label + '!' } ] @@ -625,8 +743,8 @@ } else if (item.type === 'group') { 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 : ''} className={item.required ? 'group-required' : ''}> + <DateGroup reset={this.state.reset} position={index} card={item} onGroupChange={this.onGroupChange} /> </Form.Item> </Col> ) @@ -643,6 +761,9 @@ <Button style={{ marginLeft: 8 }} onClick={this.handleReset}> {dict['main.reset']} </Button> + {showAdvanced ? <Button type="link" onClick={this.handleAdvance}> + 楂樼骇 + </Button> : null} </Form.Item> </Col> ) @@ -651,47 +772,14 @@ 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) => { + handleSearch = () => { // 鍥炶溅鎴栫偣鍑绘悳绱� - e.preventDefault() this.props.form.validateFields((err, values) => { if (!err) { - values = this.addHideFieldValue(values) let searches = this.getFieldsValues(values) let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) @@ -712,11 +800,19 @@ }) } + onGroupChange = (values) => { + const { searchValues } = this.state + + this.setState({ + searchValues: {...searchValues, ...values} + }) + this.searchChange() + } + searchChange = () => { this.setState({}, () => { this.props.form.validateFields((err, values) => { if (!err) { - values = this.addHideFieldValue(values) let searches = this.getFieldsValues(values) let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) @@ -734,101 +830,162 @@ * @description 鎼滅储鏉′欢閲嶇疆 */ handleReset = () => { - const { groups } = this.state + const { showAdvanced } = this.state - if (groups.length > 0) { - groups.forEach(item => { - this.refs[item.uuid].reset() - }) - } - + let searchValues = {} + let advanceValues = [] let searchlist = this.state.searchlist.map(item => { item.initval = item.oriInitval + + if (item.Hide === 'true') { + searchValues[item.field] = this.getInitValue(item) + } else if (showAdvanced && item.advanced === 'true') { + let _value = this.getInitValue(item) + searchValues[item.field] = _value + + let _val = this.getAdvanceValue(item, _value) + if (_val) { + advanceValues.push({field: item.field, type: item.type, label: item.label, value: _val}) + } + } else if (item.type === 'group') { + searchValues[item.datefield] = this.getInitValue(item) + searchValues[item.field] = item.initval && item.initval[0] ? item.initval[0] : '' + } return item }) - this.setState({searchlist}, () => { + this.setState({searchlist, searchValues, advanceValues, reset: !this.state.reset}, () => { this.props.form.resetFields() this.props.form.validateFields((err, values) => { if (!err) { - // 寮傛鑾峰彇鏇存柊鍚庣殑鏃堕棿缁� - this.setState({}, () => { - values = this.addHideFieldValue(values) - let searches = this.getFieldsValues(values) + let searches = this.getFieldsValues(values) - let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) - 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 - } + let requireFields = searches.filter(item => item.required && (!item.value || item.value.length === 0)) + 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) - }) + this.props.refreshdata(searches) } }) }) } getFieldsValues = (values) => { - const { groups } = this.state + const { searchValues, searchlist } = this.state // 鑾峰彇鎼滅储鏉′欢鍊� 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] || [] - - } else { - _value = (values[key] || values[key] === 0) ? values[key] : '' - - _value = _value.replace(/(^\s*|\s*$)/ig, '') + searchlist.forEach(item => { + let cell = { + type: item.type, + key: item.field.replace(/@tail@$/, ''), + label: item.label, + match: item.match || '=', + required: item.required, + value: '' + } + if ((item.Hide === 'true' || item.advanced === 'true')) { + cell.value = searchValues[item.field] || '' } - 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 (item.type === 'group') { + cell.type = 'daterange' + cell.key = item.datefield + cell.value = searchValues[item.datefield] || '' + cell.match = 'between' - if (groups.length > 0) { - groups.forEach(item => { - let items = this.refs[item.uuid].getSearchItems() - search.push(...items) - }) - } + search.push(cell) + if (item.transfer === 'true') { + let copy = fromJS(cell).toJS() + copy.type = 'group' + copy.key = item.field.replace(/@tail@$/, '') + copy.value = searchValues[item.field] || '' + copy.match = '=' + copy.forbid = true + search.push(copy) + } + } else { + let _value = values[item.field] || cell.value || '' + if (!_value) { + if (item.type === 'multiselect') { + cell.value = [] + } + search.push(cell) + } else { + if (item.type === 'daterange') { + if (_value[0] && _value[1]) { + _value = [moment(_value[0]).format('YYYY-MM-DD'), moment(_value[1]).format('YYYY-MM-DD')] + } else { + _value = '' + } + } else if (item.type === 'dateweek') { + _value = [moment(_value).startOf('week').format('YYYY-MM-DD'), moment(_value).endOf('week').format('YYYY-MM-DD')] + } else if (item.type === 'date') { + _value = moment(_value).format('YYYY-MM-DD') + } else if (item.type === 'datemonth') { + _value = moment(_value).format('YYYY-MM') + } else if (item.type === 'multiselect') { + + } else { + _value = _value.replace(/(^\s*|\s*$)/ig, '') + } + + cell.value = _value + search.push(cell) + } + } + }) return search } + handleOk = () => { + const { searchValues, searchlist } = this.state + + this.formRef.handleConfirm().then(res => { + let values = {} + let advanceValues = [] + searchlist.forEach(item => { + if (item.advanced === 'true' && item.Hide !== 'true') { + let _value = res[item.field] || '' + + if (!_value && item.type === 'multiselect') { + _value = [] + } else if (typeof(_value) === 'string') { + _value = _value.replace(/(^\s*|\s*$)/ig, '') + } + values[item.field] = _value + + let _val = this.getAdvanceValue(item, _value) + if (_val) { + advanceValues.push({field: item.field, type: item.type, label: item.label, value: _val}) + } + } + }) + this.setState({searchValues: {...searchValues, ...values}, advanceValues, visible: false}, () => { + this.handleSearch() + }) + }) + } + + closeAdvanceForm = (cell) => { + const { searchValues, advanceValues } = this.state + + this.setState({searchValues: {...searchValues, [cell.field]: ''}, advanceValues: advanceValues.filter(item => item.field !== cell.field)}, () => { + this.handleSearch() + }) + } + render() { - const { float, searchStyle } = this.state + const { float, searchStyle, visible, searchlist, searchValues, showAdvanced, advanceValues, adModelWidth } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -841,9 +998,42 @@ } 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} id={this.state.formId || this.state.oriId}> + <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} + onOk={this.handleOk} + cancelText={'鍏抽棴'} + onCancel={() => this.setState({visible: false})} + destroyOnClose + > + <MutilForm + dict={this.state.dict} + searchlist={searchlist} + searchValues={searchValues} + handleSearch={this.handleOk} + wrappedComponentRef={(inst) => this.formRef = inst} + /> + </Modal> + </> ) } } -- Gitblit v1.8.0