2021-06-27

king

2021-06-27 69cd43786253e299f6856a200554ae7fc0621877

 src/tabviews/zshare/topSearch/advanceform/index.jsx

@@ -1,268 +1,68 @@
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>
        )
@@ -272,14 +72,12 @@
    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)
    })
  }

@@ -296,8 +94,16 @@
    }

    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>
    )
  }