2020-05-08

king

2020-05-08 2031a460f6c0827fe80f8c625dd98333d1631d2f

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