2019-12-13

king

2019-12-13 a70940450c021a47e69abdf8fa8f7f98594601cc

 src/templates/comtableconfig/searchform/index.jsx

@@ -1,77 +1,87 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Select, Icon, Radio, notification } from 'antd'
import { dateOptions, matchReg } from '@/utils/option.js'
import EditTable from '../editable'
import './index.scss'

const { TextArea } = Input
const matchReg = {
  text: [{
    value: 'like',
    text: 'like'
  }, {
    value: 'not like',
    text: 'not like'
  }, {
    value: '=',
    text: '='
  }],
  select: [{
    value: '=',
    text: '='
  }, {
    value: 'like',
    text: 'like'
  }, {
    value: 'not like',
    text: 'not like'
  }],
  date: [{
    value: '>=',
    text: '>='
  }, {
    value: '<=',
    text: '<='
  }, {
    value: '>',
    text: '>'
  }, {
    value: '<',
    text: '<'
  }, {
    value: '=',
    text: '='
  }],
  daterange: [{
    value: 'between',
    text: 'between'
  }]
}

class MainSearch extends Component {
  static propTpyes = {
    dict: PropTypes.object, // 字典项
    formlist: PropTypes.any,
    card: PropTypes.object
    dict: PropTypes.object,  // 字典项
    formlist: PropTypes.any, // 表单
    card: PropTypes.object   // 搜索条件信息
  }

  state = {
    openType: null,
    resourceType: null,
    formlist: null,
    dateoptions: {
      date: [{value: '', text: '空'}, {value: '0', text: '当天'}, {value: 1, text: '前一天'}, {value: 3, text: '前三天'}, {value: 7, text: '前七天'}, {value: 30, text: '前30天'}],
      dateweek: [{value: '', text: '空'}, {value: '0', text: '本周'}, {value: 1, text: '上周'}, {value: 3, text: '前三周'}, {value: 7, text: '前七周'}],
      datemonth: [{value: '', text: '空'}, {value: '0', text: '本月'}, {value: 1, text: '上月'}, {value: 3, text: '前三月'}, {value: 7, text: '前七月'}],
      daterange: [{value: '', text: '空'}, {value: '0', text: '今天'}, {value: 1, text: '昨天'}, {value: 3, text: '前三天'}, {value: 7, text: '前七天'}, {value: 30, text: '前30天'}],
    }
    openType: null,          // 搜索条件显示类型
    resourceType: null,      // 下拉搜索时，选项来源类型
    formlist: null           // 表单
  }

  /**
   * @description 表单预处理
   * 1、根据表单类型，显示表单可编辑项
   * 2、下拉选择，根据数据源类型显示相关配置
   */
  UNSAFE_componentWillMount () {
    const { formlist } = this.props

    let type = formlist.filter(cell => cell.key === 'type')[0].initVal
    let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
    let _options = ['label', 'field', 'initval', 'type', 'match']                // 默认显示项

    if ((type === 'select' || type === 'link') && resourceType === '0') {        // 下拉选择类型、选项为自定义资源
      _options = [..._options, 'resourceType', 'setAll', 'options', 'display']
    } else if ((type === 'select' || type === 'link') && resourceType === '1') { // 下拉选择类型、选项为后台数据源中获取
      _options = [..._options, 'resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']
    }

    if (type === 'link') { // 关联类型、增加关联上级的字段名
      _options = [..._options, 'linkField']
    }
    
    this.setState({
      openType: type,
      resourceType: resourceType,
      formlist: formlist.map(form => {
        // 表单为初始值字段，且数据类型属于时间类型时，设置初始值为下拉选择，并重置选择项
        if (form.key === 'initval' && dateOptions.hasOwnProperty(type)) {
          form.options = dateOptions[type]
          form.type = 'select'
        }
        // 表单为匹配字段时，根据不同的类型，显示对应的匹配规则
        if (form.key === 'match') {
          if (type === 'text') {
            form.options = matchReg.text
          } else if (type === 'select' || type === 'link') {
            form.options = matchReg.select
          } else if (type === 'date' || type === 'datemonth') {
            form.options = matchReg.date
          } else if (type === 'dateweek' || type === 'daterange') {
            form.options = matchReg.daterange
          }
        }
        form.hidden = !_options.includes(form.key)
        return form
      })
    })
  }

  /**
   * @description 搜索条件类型切换
   */
  openTypeChange = (key, value) => {
    const { resourceType } = this.state

    if (key === 'type') {
      let _options = ['label', 'field', 'initval', 'type', 'match']
      if (value === 'select' || value === 'link') { // 切换类型为选择或关联时，来源默认为自定义

      if ((value === 'select' || value === 'link') && resourceType === '0') {        // 下拉选择类型、选项为自定义资源
        _options = [..._options, 'resourceType', 'setAll', 'options', 'display']
      } else if ((value === 'select' || value === 'link') && resourceType === '1') { // 下拉选择类型、选项为后台数据源中获取
        _options = [..._options, 'resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']
      }
      
      if (value === 'link') {
@@ -80,21 +90,19 @@
      
      this.setState({
        openType: value,
        resourceType: '0',
        formlist: this.state.formlist.map(form => {
          form.hidden = !_options.includes(form.key)
          form.hidden = !_options.includes(form.key)            // 隐藏表单

          if (form.key === 'initval') {
            if (this.state.dateoptions.hasOwnProperty(value)) {
              form.options = this.state.dateoptions[value]
            if (dateOptions.hasOwnProperty(value)) { // 根据搜索条件类型，选择初始值的类型及数据
              form.options = dateOptions[value]
              form.type = 'select'
            } else {
              form.type = 'text'
            }
            form.initVal = ''
            form.initVal = ''                                    // 搜索条件类型切换时，初始值置空
            form.hidden = true
          }

          if (form.key === 'match') {
          } else if (form.key === 'match') {                     // 搜索条件类型切换时，匹配规则类型对应切换
            if (value === 'text') {
              form.options = matchReg.text
            } else if (value === 'select' || value === 'link') {
@@ -106,18 +114,20 @@
            }
            form.hidden = true
          }

          return form
        })
      }, () => {
        this.setState({
          formlist: this.state.formlist.map(form => {

            if (form.key === 'initval') {
              form.hidden = false
            }
            if (form.key === 'match') {
            } else if (form.key === 'match') {
              form.initVal = form.options[0].value
              form.hidden = false
            }

            return form
          })
        })
@@ -125,11 +135,16 @@
    }
  }

  /**
   * @description 数据源类型切换
   */
  onChange = (e, key) => {
    const { openType } = this.state
    let value = e.target.value

    if (key === 'resourceType') {
      let _options = ['label', 'field', 'initval', 'type', 'match', 'resourceType', 'setAll', 'display']

      if (value === '0') {
        _options = [..._options, 'options']
      } else if (value === '1') {
@@ -298,50 +313,6 @@
        }
      })
    })
  }

  resetForm = (formlist) => {
    if (!formlist) return
    let type = formlist.filter(cell => cell.key === 'type')[0].initVal
    let resourceType = formlist.filter(cell => cell.key === 'resourceType')[0].initVal
    let _options = ['label', 'field', 'initval', 'type', 'match'] // 默认显示项
    if ((type === 'select' || type === 'link') && resourceType === '0') { // 选择类型、自定义资源
      _options = [..._options, 'resourceType', 'setAll', 'options', 'display']
    } else if ((type === 'select' || type === 'link') && resourceType === '1') { // 选择类型、数据源
      _options = [..._options, 'resourceType', 'setAll', 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'display']
    }

    if (type === 'link') { // 关联类型、增加关联字段
      _options = [..._options, 'linkField']
    }
    
    this.setState({
      openType: type,
      resourceType: resourceType,
      formlist: formlist.map(form => {
        if (this.state.dateoptions.hasOwnProperty(type) && form.key === 'initval') {
          form.options = this.state.dateoptions[type]
          form.type = 'select'
        }
        if (form.key === 'match') {
          if (type === 'text') {
            form.options = matchReg.text
          } else if (type === 'select' || type === 'link') {
            form.options = matchReg.select
          } else if (type === 'date' || type === 'datemonth') {
            form.options = matchReg.date
          } else if (type === 'dateweek' || type === 'daterange') {
            form.options = matchReg.daterange
          }
        }
        form.hidden = !_options.includes(form.key)
        return form
      })
    })
  }

  UNSAFE_componentWillMount () {
    this.resetForm(this.props.formlist)
  }

  render() {