| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { Form, Row, Col, Input, Select, DatePicker } from 'antd' |
| | | import { Form, Row, Col, Input, Button } from 'antd' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import Utils from '@/utils/utils.js' |
| | | import './index.scss' |
| | | |
| | | const { MonthPicker, WeekPicker, RangePicker } = DatePicker |
| | | const CheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard')) |
| | | const { Search } = Input |
| | | const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard')) |
| | | const MKSelect = asyncComponent(() => import('../mkSelect')) |
| | | const MKDatePicker = asyncComponent(() => import('../mkDatePicker')) |
| | | |
| | | class AdvanceSearch extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典 |
| | | searchValues: PropTypes.object, // 搜索条件值 |
| | | record: PropTypes.object, // 搜索条件值 |
| | | searchlist: PropTypes.array, // 搜索条件列表 |
| | | handleSearch: PropTypes.func // 搜索条件提交 |
| | | advanceSubmit: PropTypes.func, // 搜索条件提交 |
| | | handleClose: PropTypes.func // 关闭 |
| | | } |
| | | |
| | | state = { |
| | | dict: this.props.dict, |
| | | formId: Utils.getuuid(), // 搜索表单Id |
| | | searchlist: fromJS(this.props.searchlist).toJS() |
| | | } |
| | | |
| | | 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) |
| | | } |
| | | return item |
| | | }) |
| | | |
| | | if (subfields.length === 0) { |
| | | return |
| | | } |
| | | |
| | | formlist = this.resetform(formlist, subfields, 0, fieldsvalue) |
| | | |
| | | if (Object.keys(fieldsvalue).length > 0) { |
| | | this.props.form.setFieldsValue(fieldsvalue) |
| | | } |
| | | |
| | | this.setState({ |
| | | searchlist: formlist |
| | | }) |
| | | } |
| | | |
| | | getFields() { |
| | | const { getFieldDecorator } = this.props.form |
| | | const { searchValues } = this.props |
| | | const { dict, formId } = this.state |
| | | const { record } = this.props |
| | | const fields = [] |
| | | |
| | | this.state.searchlist.forEach((item, index) => { |
| | | if (item.advanced !== 'true' || item.Hide === 'true') return |
| | | if (!item.advanced || item.hidden) return |
| | | |
| | | let initval = searchValues[item.field] || '' |
| | | 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: initval, |
| | | rules: [ |
| | | { |
| | | required: item.required, |
| | | message: dict['form.required.input'] + item.label + '!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={item.labelShow === 'false' ? item.label : ''} autoComplete="off" onPressEnter={this.props.handleSearch} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } 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 : ''}> |
| | | {getFieldDecorator(item.field, { |
| | | initialValue: initval, |
| | | rules: [ |
| | | { |
| | | required: item.required, |
| | | 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 || option.props.value.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') { // 下拉多选 |
| | | 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, |
| | | message: dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <Select |
| | | showSearch |
| | | mode="multiple" |
| | | 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: initval || null, |
| | | rules: [ |
| | | { |
| | | required: item.required, |
| | | message: dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <DatePicker 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: initval || null, |
| | | rules: [ |
| | | { |
| | | required: item.required, |
| | | message: dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <MonthPicker 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: initval || null, |
| | | rules: [ |
| | | { |
| | | required: item.required, |
| | | message: dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <WeekPicker getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} /> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'daterange') { |
| | | let _defaultValue = initval |
| | | |
| | | if (!initval) { |
| | | _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, |
| | | message: dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <RangePicker |
| | | placeholder={['开始日期', '结束日期']} |
| | | renderExtraFooter={() => 'extra footer'} |
| | | getCalendarContainer={() => formId ? document.getElementById(formId) : document.body} |
| | | /> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | | } else if (item.type === 'checkcard') { // 多选框 |
| | | let content = null |
| | | item.initval = record[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}/>) |
| | | } else if (item.type === 'date' || item.type === 'datemonth' || item.type === 'dateweek' || item.type === 'daterange') { |
| | | content = (<MKDatePicker config={item}/>) |
| | | } else if (item.type === 'checkcard') { |
| | | content = <MKCheckCard card={item}/> |
| | | } |
| | | |
| | | if (content) { |
| | | 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, |
| | | message: dict['form.required.select'] + item.label + '!' |
| | | } |
| | | ] |
| | | })( |
| | | <CheckCard card={item} /> |
| | | )} |
| | | rules: _rules |
| | | })(content)} |
| | | </Form.Item> |
| | | </Col> |
| | | ) |
| | |
| | | return fields |
| | | } |
| | | |
| | | handleConfirm = () => { |
| | | handleSubmit = () => { |
| | | // 回车或点击搜索 |
| | | return new Promise((resolve, reject) => { |
| | | this.props.form.validateFields((err, values) => { |
| | | if (!err) { |
| | | resolve(values) |
| | | } |
| | | }) |
| | | this.props.form.validateFields((err, values) => { |
| | | if (err) return |
| | | |
| | | this.props.advanceSubmit(values) |
| | | }) |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | return ( |
| | | <Form {...formItemLayout} className="advance-search" id={this.state.formId}> |
| | | <Form {...formItemLayout} className="advance-search"> |
| | | <Row gutter={24}>{this.getFields()}</Row> |
| | | <div className="advance-button"> |
| | | <Button style={{ marginRight: 8 }} onClick={this.props.handleClose}> |
| | | 关闭 |
| | | </Button> |
| | | <Button type="primary" onClick={this.handleSubmit}> |
| | | 确定 |
| | | </Button> |
| | | </div> |
| | | </Form> |
| | | ) |
| | | } |