2021-11-04

king

2021-11-04 4190affb665438b1067af88f09e8557abbbfea2b

 src/templates/zshare/modalform/index.jsx

@@ -6,34 +6,36 @@
import { dateOptions } from '@/utils/option.js'
import Utils from '@/utils/utils.js'
import EditTable from './modaleditable'
import DataTable from './datatable'
import FieldsTable from './fieldtable'
import asyncComponent from '@/utils/asyncComponent'
import CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const FieldsTable = asyncComponent(() => import('./fieldtable'))
const DataTable = asyncComponent(() => import('./datatable'))

const modalTypeOptions = {
  text: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'regular', 'interception', 'span', 'labelwidth', 'tooltip', 'extra', 'enter', 'cursor', 'scan'],
  number: ['initval', 'readonly', 'hidden', 'decimal', 'min', 'max', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'enter', 'cursor'],
  select: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter'],
  checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'span', 'labelwidth', 'tooltip', 'extra'],
  radio: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'setAll', 'emptyText'],
  checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'fieldlength', 'span', 'labelwidth', 'display', 'tooltip', 'extra', 'width', 'multiple'],
  multiselect: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra'],
  link: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter'],
  fileupload: ['readonly', 'required', 'readin', 'fieldlength', 'maxfile', 'fileType', 'span', 'labelwidth', 'tooltip', 'extra', 'suffix'],
  switch: ['initval', 'openVal', 'closeVal', 'openText', 'closeText', 'readonly', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra'],
  date: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'declareType'],
  datemonth: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'declareType'],
  datetime: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'declareType'],
  textarea: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'span', 'labelwidth', 'maxRows', 'encryption', 'interception', 'tooltip', 'extra'],
  color: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra'],
  hint: ['label', 'type', 'blacklist', 'message', 'span', 'labelwidth'],
  split: ['label', 'type'],
  brafteditor: ['required', 'hidelabel', 'hidden', 'readin', 'fieldlength', 'readonly', 'span', 'labelwidth', 'tooltip', 'extra', 'encryption'],
  funcvar: ['span', 'labelwidth'],
  linkMain: ['readonly', 'required', 'hidden', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra']
  text: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'regular', 'interception', 'span', 'labelwidth', 'tooltip', 'extra', 'enter', 'cursor', 'scan', 'splitline', 'placeholder', 'place', 'marginTop', 'marginBottom'],
  number: ['initval', 'readonly', 'hidden', 'decimal', 'min', 'max', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'enter', 'cursor', 'splitline', 'place', 'marginTop', 'marginBottom'],
  select: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter', 'splitline', 'dropdown', 'marginTop', 'marginBottom'],
  checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'span', 'labelwidth', 'tooltip', 'extra', 'splitline', 'arrange', 'marginTop', 'marginBottom'],
  radio: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'setAll', 'emptyText', 'splitline', 'arrange', 'marginTop', 'marginBottom'],
  checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'fieldlength', 'span', 'labelwidth', 'display', 'tooltip', 'extra', 'width', 'multiple', 'borderColor', 'splitline', 'marginTop', 'marginBottom'],
  multiselect: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra', 'marginTop', 'marginBottom'],
  link: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkField', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter', 'splitline', 'dropdown', 'marginTop', 'marginBottom'],
  fileupload: ['readonly', 'required', 'readin', 'fieldlength', 'maxfile', 'fileType', 'span', 'labelwidth', 'tooltip', 'extra', 'compress', 'splitline', 'marginTop', 'marginBottom'],
  switch: ['initval', 'openVal', 'closeVal', 'openText', 'closeText', 'readonly', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'splitline', 'marginTop', 'marginBottom'],
  date: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'declareType', 'mode', 'splitline', 'marginTop', 'marginBottom', 'minDate', 'maxDate'],
  datemonth: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'declareType', 'splitline', 'marginTop', 'marginBottom'],
  datetime: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'declareType', 'mode', 'splitline', 'marginTop', 'marginBottom', 'minDate', 'maxDate'],
  textarea: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'span', 'labelwidth', 'maxRows', 'encryption', 'interception', 'tooltip', 'extra', 'count', 'placeholder', 'marginTop', 'marginBottom'],
  color: ['initval', 'readonly', 'required', 'hidden', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'marginTop', 'marginBottom'],
  hint: ['label', 'type', 'blacklist', 'message', 'span', 'labelwidth', 'splitline', 'marginTop', 'marginBottom'],
  split: ['label', 'type', 'marginTop', 'marginBottom'],
  brafteditor: ['required', 'hidelabel', 'hidden', 'readin', 'fieldlength', 'readonly', 'span', 'labelwidth', 'tooltip', 'extra', 'encryption', 'marginTop', 'marginBottom'],
  funcvar: ['span', 'labelwidth', 'splitline', 'marginTop', 'marginBottom'],
  linkMain: ['readonly', 'required', 'hidden', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra', 'marginTop', 'marginBottom']
}

class MainSearch extends Component {
@@ -49,6 +51,7 @@
    openType: null,
    resourceType: null,
    supField: '',
    compress: 'false',
    display: 'text',
    enter: '',
    cFields: [],
@@ -62,6 +65,7 @@
    let resourceType = ''
    let supField = ''
    let display = ''
    let compress = 'false'
    let enter = ''
    let cFields = []
    let linkSubFields = []
@@ -69,6 +73,8 @@
    formlist.forEach(cell => {
      if (cell.key === 'type') {
        type = cell.initVal
      } else if (cell.key === 'compress') {
        compress = cell.initVal
      } else if (cell.key === 'display') {
        display = cell.initVal
      } else if (cell.key === 'enter') {
@@ -92,10 +98,11 @@
      }
    })
    
    let _options = this.getOptions(type, resourceType, supField, display, enter)
    let _options = this.getOptions(type, resourceType, supField, display, enter, compress)

    this.setState({
      enter: enter,
      compress: compress,
      openType: type,
      supField: supField,
      display: display,
@@ -137,13 +144,13 @@
      try {
        let _form = document.getElementById('label')
        _form.select()
      } catch {
      } catch (e) {
        console.warn('表单focus失败！')
      }
    }
  }

  getOptions = (type, resourceType, supField, display, enter) => {
  getOptions = (type, resourceType, supField, display, enter, compress) => {
    let _options = ['label', 'field', 'type', 'blacklist', 'writein', ...fromJS(modalTypeOptions[type]).toJS()]

    if (type === 'hint') {
@@ -154,21 +161,31 @@
      if (resourceType === '0') {        // 自定义资源
        _options.push('options')
      } else if (resourceType === '1') { // 数据源
        _options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database')
        _options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'disableField', 'database')
      }
    } else if (type === 'checkcard') {
      if (display === 'picture') {
        if (resourceType === '0') {        // 自定义资源
          _options.push('options', 'ratio')
        } else if (resourceType === '1') { // 数据源
          _options.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'database', 'ratio')
          _options.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'disableField', 'database', 'ratio')
        }
      } else {
        if (resourceType === '0') {        // 自定义资源
          _options.push('options', 'fields')
          _options.push('options', 'fields', 'backgroundColor')
        } else if (resourceType === '1') { // 数据源
          _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database')
          _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'disableField', 'database', 'backgroundColor')
        }
      }

      if (sessionStorage.getItem('appType') === 'mob') {
        _options.push('hidelabel')
      }
    } else if (type === 'fileupload') {
      if (compress === 'true') {
        _options.push('limit', 'rduri', 'proRduri')
      } else {
        _options.push('suffix')
      }
    }

@@ -201,7 +218,7 @@
        fieldValue.enter = 'false'
      }

      let _options = this.getOptions(value, this.state.resourceType, this.state.supField, this.state.display, enter)
      let _options = this.getOptions(value, this.state.resourceType, this.state.supField, this.state.display, enter, this.state.compress)
      
      this.setState({
        openType: value,
@@ -314,10 +331,10 @@
  }

  onChange = (e, key) => {
    const { openType } = this.state
    const { openType, compress } = this.state
    let value = e.target.value
    if (key === 'resourceType') {
      let _options = this.getOptions(openType, value, this.state.supField, this.state.display, this.state.enter)
      let _options = this.getOptions(openType, value, this.state.supField, this.state.display, this.state.enter, compress)
      
      this.setState({
        resourceType: value,
@@ -327,7 +344,7 @@
        })
      })
    } else if (key === 'display') {
      let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, value, this.state.enter)
      let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, value, this.state.enter, compress)
      
      this.setState({
        display: value,
@@ -336,8 +353,18 @@
          return form
        })
      })
    } else if (key === 'compress') {
      let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, this.state.display, this.state.enter, value)
      
      this.setState({
        compress: value,
        formlist: this.state.formlist.map(form => {
          form.show = _options.includes(form.key)
          return form
        })
      })
    } else if (key === 'enter') {
      let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, this.state.display, value)
      let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, this.state.display, value, compress)
      
      this.setState({
        enter: value,
@@ -562,8 +589,8 @@
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value) => this.multiselectChange(item.key, value, item.options)}
                >
                  {item.options.map(option =>
                    <Select.Option id={option.uuid} key={option.uuid} value={option.field}>{option.label}</Select.Option>
                  {item.options.map((option, i) =>
                    <Select.Option key={i} value={option.field}>{option.label}</Select.Option>
                  )}
                </Select>
              )}
@@ -589,14 +616,12 @@
                ]
              })(
                <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}>
                  {
                    item.options.map(option => {
                      return (
                        <Radio key={option.value} value={option.value}>{option.text}</Radio>
                      )
                    })
                  }
                </Radio.Group>,
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
                    )
                  })}
                </Radio.Group>
              )}
            </Form.Item>
          </Col>
@@ -620,7 +645,12 @@
      } else if (item.type === 'textarea') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item className="text-msg" label={item.label}>
            <Form.Item className="text-msg" label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
@@ -629,7 +659,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={4} />)}
              })(<TextArea rows={item.rows || 4} />)}
            </Form.Item>
          </Col>
        )
@@ -665,6 +695,16 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'color') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label} className="color-form-item">
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(<ColorSketch allowClear={true}/>)}
            </Form.Item>
          </Col>
        )
      }
    })