2023-08-10

king

2023-08-10 ac1d52c46ff9019fcc93cf3d5e7ab17cf850824e

 src/templates/sharecomponent/searchcomponent/searchform/index.jsx

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Checkbox, Cascader } from 'antd'
import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Checkbox, Cascader, AutoComplete } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import { dateOptions, matchReg, formRule } from '@/utils/option.js'
@@ -84,9 +84,12 @@
      {value: '[3, 0]', label: '近三天'},
      {value: '[7, 0]', label: '近七天'},
      {value: '[30, 0]', label: '近30天'},
      {value: '[90, 0]', label: '近90天'},
      {value: '[7, -7]', label: '前后七天'},
      {value: '[30, -30]', label: '前后30天'},
      {value: '[90, -90]', label: '前后90天'},
      {value: '[180, -180]', label: '前后180天'},
      {value: '[365, -365]', label: '前后365天'},
      {value: '[-1, -1]', label: '明天'},
      {value: '[-2, -2]', label: '后天'}
    ]
@@ -94,34 +97,31 @@
]

const searchTypeOptions = {
  text: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'inputType', 'advanced', 'query'],
  select: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query'],
  multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'],
  link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query'],
  date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'],
  checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'borderColor', 'required', 'Hide', 'labelShow', 'advanced', 'query'],
  dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'],
  datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'],
  daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query'],
  group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow', 'query'],
  range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow', 'query']
  text: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'inputType', 'advanced', 'query', 'labelwidth'],
  select: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'],
  radio: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'query', 'labelwidth'],
  multiselect: ['label', 'field', 'resourceType', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  link: ['label', 'field', 'resourceType', 'initval', 'type', 'linkField', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'setAll', 'dropdown', 'query', 'labelwidth'],
  date: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'],
  checkcard: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'resourceType', 'display', 'width', 'multiple', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  dateweek: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  datemonth: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  daterange: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'required', 'Hide', 'labelShow', 'advanced', 'query', 'precision', 'labelwidth'],
  group: ['label', 'type', 'field', 'datefield', 'initval', 'blacklist', 'ratio', 'items', 'required', 'labelShow', 'query', 'labelwidth'],
  switch: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'openVal', 'closeVal', 'openText', 'closeText', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  check: ['label', 'field', 'initval', 'type', 'match', 'ratio', 'blacklist', 'openVal', 'closeVal', 'checkTip', 'Hide', 'labelShow', 'advanced', 'query', 'labelwidth'],
  range: ['label', 'type', 'field', 'initval', 'match', 'blacklist', 'Hide', 'required', 'maxValue', 'minValue', 'step', 'labelShow', 'query', 'labelwidth']
}

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

  state = {
    openType: null,          // 搜索条件显示类型
    resourceType: null,      // 下拉搜索时，选项来源类型
    formlist: null,          // 表单
    display: null,
    cFields: [],
    textTooltip: '字段名可以使用逗号分隔，进行综合搜索',
    formlist: null
  }

  record = {}
@@ -181,7 +181,7 @@
    let reRequired = {}
    let reLabel = {}

    if (['multiselect', 'select', 'link'].includes(type)) {
    if (['multiselect', 'select', 'link', 'radio'].includes(type)) {
      reRequired.linkField = true
      if (this.record.resourceType === '0') {        // 自定义资源
        shows.push('options')
@@ -189,17 +189,31 @@
        shows.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database')
      }
    } else if (type === 'checkcard') {
      reRequired.fields = false
      if (this.record.display === 'picture') {
        if (this.record.resourceType === '0') {        // 自定义资源
          shows.push('options', 'picratio')
          shows.push('options', 'fields', 'picratio')
        } else if (this.record.resourceType === '1') { // 数据源
          shows.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'database', 'picratio')
          shows.push('dataSource', 'cardValField', 'fields', 'urlField', 'orderBy', 'orderType', 'database', 'picratio')
        }
      } else if (this.record.display === 'color') {
        if (this.record.resourceType === '0') {        // 自定义资源
          shows.push('options', 'fields')
        } else if (this.record.resourceType === '1') { // 数据源
          shows.push('dataSource', 'cardValField', 'colorField', 'fields', 'orderBy', 'orderType', 'database')
        }
      } else {
        reRequired.fields = true
        if (this.record.resourceType === '0') {        // 自定义资源
          shows.push('options', 'fields', 'backgroundColor')
          shows.push('options', 'fields', 'selectStyle', 'border')
        } else if (this.record.resourceType === '1') { // 数据源
          shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor')
          shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'selectStyle', 'border')
        }
        if (this.record.selectStyle === 'custom') {
          shows.push('backgroundColor')
        }
        if (this.record.multiple === 'dropdown' && this.record.resourceType === '1') {
          shows.push('mark', 'parentField')
        }
      }
      shows.push('linkField')
@@ -217,22 +231,24 @@
    }

    if (type === 'text') {
      reOptions.match = matchReg.text
      reOptions.match = matchReg.class1
    } else if (type === 'multiselect') {
      reOptions.match = matchReg.multiselect
      reOptions.match = matchReg.class3
    } else if (type === 'select' || type === 'link') {
      reOptions.match = matchReg.select
      reOptions.match = matchReg.class1
    } else if (type === 'switch' || type === 'check') {
      reOptions.match = matchReg.class2
    } else if (type === 'date') {
      reOptions.match = matchReg.date
      reOptions.match = matchReg.class4
    } else if (type === 'datemonth') {
      reOptions.match = matchReg.datemonth
      reOptions.match = matchReg.class5
    } else if (type === 'dateweek' || type === 'daterange' || type === 'range') {
      reOptions.match = matchReg.daterange
      reOptions.match = matchReg.class5
    } else if (type === 'checkcard') {
      if (this.record.multiple === 'false') {
        reOptions.match = matchReg.select
        reOptions.match = matchReg.class1
      } else if (this.record.multiple === 'true') {
        reOptions.match = matchReg.multiselect
        reOptions.match = matchReg.class3
      }
    }

@@ -304,7 +320,7 @@
              uuid: key
            }]
          }
        } else if (['multiselect', 'select', 'link'].includes(value)) {
        } else if (['multiselect', 'select', 'link', 'radio'].includes(value)) {
          if (!this.record.options[0].Text && this.record.fields.length > 0) {
            let field = this.record.fields[0].field
    
@@ -385,9 +401,48 @@
    }
  }

  handleEmpty = () => {
    let field = this.props.form.getFieldValue('valueField')

    if (!field) {
      notification.warning({
        top: 92,
        message: '请填写值·字段。',
        duration: 5
      })
      return
    }

    let text = this.props.form.getFieldValue('valueText')

    if (!text) {
      notification.warning({
        top: 92,
        message: '请填写文本·字段。',
        duration: 5
      })
      return
    }

    let resource = this.props.form.getFieldValue('dataSource') || ''

    if (field === text) {
      resource = `select '' as ${field} union all \n${resource}`
    } else {
      resource = `select '' as ${field},'全部' as ${text} union all \n${resource}`
    }

    this.props.form.setFieldsValue({dataSource: resource})
  }

  complete = (key, option) => {
    let label = option.props.label

    this.props.form.setFieldsValue({label: label})
  }

  getFields() {
    const { getFieldDecorator } = this.props.form
    const { dict } = this.props
    const { formlist } = this.state
    const fields = []
    
@@ -398,12 +453,13 @@
      let rules = []
      let className = ''
      let content = null
      let extra = null
      let initVal = item.initVal || ''

      if (item.type === 'text') { // 文本搜索
      if (item.type === 'text') {
        let type = this.record.type
        rules = [
          { required: item.required, message: dict['form.required.input'] + item.label + '!' }
          { required: item.required, message: '请输入' + item.label + '!' }
        ]
        if (item.key === 'field' || item.key === 'datefield') {
          rules.push({
@@ -420,27 +476,40 @@
          })
        }

        content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />
        if (item.key === 'field' && item.options && item.options.length > 0) {
          content = <AutoComplete
            dataSource={item.options.map((cell) => <AutoComplete.Option label={cell.label} value={cell.value} key={cell.key}>
              {cell.text}
            </AutoComplete.Option>)}
            filterOption={(input, option) => option.props.children.indexOf(input) > -1}
            onSelect={this.complete}
            placeholder=""
          >
            <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />
          </AutoComplete>
        } else {
          content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} onChange={(e) => {this.optionChange(item.key, e.target.value)}}/>
        }
      } else if (item.type === 'number') {
        rules = [
          { required: item.required, message: dict['form.required.input'] + item.label + '!' }
          { required: item.required, message: '请输入' + item.label + '!' }
        ]
        initVal = item.initVal

        if (item.max) {
          content = <InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/>
          content = <InputNumber min={item.min} max={item.max} precision={item.precision || 0} onPressEnter={this.handleSubmit}/>
        } else {
          content = <InputNumber onPressEnter={this.handleSubmit}/>
        }
      } else if (item.type === 'select') { // 下拉搜索
        rules = [
          { required: item.required, message: dict['form.required.select'] + item.label + '!' }
          { required: item.required, message: '请选择' + item.label + '!' }
        ]

        content = <Select
          showSearch
          allowClear={item.allowClear === true}
          filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          onChange={(value) => {this.optionChange(item.key, value)}}
          getPopupContainer={() => document.getElementById('commontable-search-form-box')}
        >
@@ -452,22 +521,26 @@
        </Select>
      } else if (item.type === 'radio') {
        rules = [
          { required: item.required, message: dict['form.required.select'] + item.label + '!' }
          { required: item.required, message: '请选择' + item.label + '!' }
        ]

        content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}>
        content = <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => {this.optionChange(item.key, e.target.value)}}>
          {item.options.map(option => {
            return (
              <Radio key={option.value} value={option.value}>{option.text}</Radio>
            )
          })}
        </Radio.Group>
      } else if (item.type === 'textarea') {
      } else if (item.type === 'codemirror') {
        rules = [
          { required: item.required, message: dict['form.required.input'] + item.label + '!' }
          { required: item.required, message: '请输入' + item.label + '!' }
        ]
        span = 24
        className = 'text-area'

        if (this.record.type === 'select' || this.record.type === 'link') {
          extra = <span className="add-resource-empty" onClick={this.handleEmpty}>全部</span>
        }

        content = <CodeMirror />
      } else if (item.type === 'options') {
@@ -477,21 +550,25 @@
        let type = this.record.type
        
        if (type !== 'checkcard') {
          content = <EditTable type={type} transfield={{}} linkSubFields={[]} onChange={this.changeOptions}/>
          content = <EditTable type={type} module="search" transfield={{}} linkSubFields={[]} onChange={this.changeOptions}/>
        } else {
          if (this.record.linkField) {
            type = 'link'
          }
          content = <DataTable dict={dict} type={type} display={this.record.display} linkSubFields={[]} transfield={{}} fields={this.record.fields || []} onChange={this.changeOptions}/>
          content = <DataTable type={type} multiple={this.record.multiple} display={this.record.display} linkSubFields={[]} transfield={{}} fields={this.record.fields || []} onChange={this.changeOptions}/>
        }
      } else if (item.type === 'fields') {
        span = 24
        className = 'text-area'

        content = <FieldsTable dict={dict} onChange={this.changeField}/>
        rules = [
          { required: item.required, message: '请添加' + item.label + '!' }
        ]

        content = <FieldsTable onChange={this.changeField}/>
      } else if (item.type === 'checkbox') {
        rules = [
          { required: item.required, message: dict['form.required.select'] + item.label + '!' }
          { required: item.required, message: '请选择' + item.label + '!' }
        ]

        content = <Checkbox.Group style={{width: '105%'}} options={item.options} onChange={(values) => this.optionChange(item.key, values)}/>
@@ -509,12 +586,16 @@
        content = <Cascader options={item.options} placeholder="" />
      } else if (item.type === 'color') {
        className = 'color-form-item'
        rules = [
          { required: item.required, message: '请选择' + item.label + '!' }
        ]
        
        content = <ColorSketch allowClear={true}/>
      }

      fields.push(
        <Col span={span} key={index}>
          <Form.Item className={className} label={item.tooltip ?
          <Form.Item className={className} extra={extra} label={item.tooltip ?
            <Tooltip placement="topLeft" title={item.tooltip}>
              <QuestionCircleOutlined className="mk-form-tip" />
              {item.label}
@@ -539,7 +620,7 @@
        if (!err) {
          values.uuid = this.props.card.uuid
          // 下拉菜单或联动菜单
          if (['multiselect', 'select', 'link'].includes(values.type)) {
          if (['multiselect', 'select', 'link', 'radio'].includes(values.type)) {
            if (values.resourceType === '0') {
              values.options = values.options || []
              values.dataSource = ''
@@ -585,10 +666,15 @@
              values.options = []
            }
          } else if (values.type === 'checkcard') {
            if (values.multiple === 'dropdown' && values.display !== 'text') {
              values.multiple = 'false'
            }

            if (values.resourceType === '0') {
              values.options = values.options || []
              values.options = values.options.map(m => {
                m.ParentID = m.ParentID || ''
                m.pid = m.pid || ''
                return m
              })

@@ -664,11 +750,13 @@
              })
              return
            }
          } else if (values.type === 'switch' || values.type === 'check') {
            values.initval = values.initval === values.openVal ? values.openVal : values.closeVal
          }

          ['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => {
            if (values[item]) {
              values[item] = values[item].replace(/\s* | \t* | \v* | \r*/ig, '')
              values[item] = values[item].replace(/\s+|\t+|\v+|\r+/ig, '')
            }
          })