2020-10-20

king

2020-10-20 7b01bec1609710729a868093ad69484ebea82d80

 src/templates/zshare/modalform/index.jsx

@@ -6,27 +6,32 @@
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 CodeMirror from '@/templates/zshare/codemirror'
import './index.scss'

const { TextArea } = Input

const modalTypeOptions = {
  text: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'regular', 'interception', 'entireLine'],
  number: ['initval', 'readonly', 'hidden', 'decimal', 'min', 'max', 'readin', 'entireLine'],
  select: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkSubField', 'entireLine'],
  checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'entireLine'],
  radio: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'entireLine'],
  checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'display'],
  multiselect: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'entireLine'],
  link: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkField', 'entireLine'],
  fileupload: ['readonly', 'required', 'readin', 'fieldlength', 'maxfile', 'fileType', 'entireLine'],
  switch: ['initval', 'openVal', 'closeVal', 'readonly', 'required', 'hidden', 'readin', 'entireLine'],
  date: ['initval', 'readonly', 'required', 'hidden', 'readin', 'entireLine'],
  datemonth: ['initval', 'readonly', 'required', 'hidden', 'readin', 'entireLine'],
  datetime: ['initval', 'readonly', 'required', 'hidden', 'readin', 'entireLine'],
  textarea: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'maxRows', 'encryption', 'interception'],
  color: ['readonly', 'required', 'hidden', 'readin', 'entireLine'],
  funcvar: ['hidden'],
  linkMain: ['readonly', 'required', 'hidden', 'fieldlength', 'entireLine']
  text: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'regular', 'interception', 'entireLine', 'tooltip'],
  number: ['initval', 'readonly', 'hidden', 'decimal', 'min', 'max', 'readin', 'entireLine', 'tooltip'],
  select: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkSubField', 'entireLine', 'tooltip'],
  checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'entireLine', 'tooltip'],
  radio: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'entireLine', 'tooltip'],
  checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'fieldlength', 'display', 'tooltip', 'width', 'multiple'],
  multiselect: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'entireLine', 'tooltip'],
  link: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkField', 'entireLine', 'tooltip'],
  fileupload: ['readonly', 'required', 'readin', 'fieldlength', 'maxfile', 'fileType', 'entireLine', 'tooltip'],
  switch: ['initval', 'openVal', 'closeVal', 'readonly', 'required', 'hidden', 'readin', 'entireLine', 'tooltip'],
  date: ['initval', 'readonly', 'required', 'hidden', 'readin', 'entireLine', 'tooltip'],
  datemonth: ['initval', 'readonly', 'required', 'hidden', 'readin', 'entireLine', 'tooltip'],
  datetime: ['initval', 'readonly', 'required', 'hidden', 'readin', 'entireLine', 'tooltip'],
  textarea: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'maxRows', 'encryption', 'interception', 'tooltip'],
  color: ['readonly', 'required', 'hidden', 'readin', 'entireLine', 'tooltip'],
  hint: ['label', 'type', 'blacklist', 'message'],
  funcvar: [],
  linkMain: ['readonly', 'required', 'hidden', 'fieldlength', 'entireLine', 'tooltip']
}

class MainSearch extends Component {
@@ -41,6 +46,8 @@
    openType: null,
    resourceType: null,
    supField: '',
    display: 'text',
    cFields: [],
    formlist: null,
    linkSubFields: null
  }
@@ -51,11 +58,17 @@
    let type = ''
    let resourceType = ''
    let supField = ''
    let display = ''
    let cFields = []
    let linkSubFields = []

    formlist.forEach(cell => {
      if (cell.key === 'type') {
        type = cell.initVal
      } else if (cell.key === 'display') {
        display = cell.initVal
      } else if (cell.key === 'fields') {
        cFields = cell.initVal
      } else if (cell.key === 'resourceType') {
        resourceType = cell.initVal
      } else if (cell.key === 'linkSubField') {
@@ -73,11 +86,13 @@
      }
    })
    
    let _options = this.getOptions(type, resourceType, supField)
    let _options = this.getOptions(type, resourceType, supField, display)

    this.setState({
      openType: type,
      supField: supField,
      display: display,
      cFields: cFields,
      resourceType: resourceType,
      linkSubFields: linkSubFields,
      formlist: formlist.map(form => {
@@ -95,6 +110,11 @@
          form.type = 'number'
          form.initVal = form.initVal || 0
          form.required = true
        } else if (form.key === 'label') {
          form.required = true
          if (type === 'hint') {
            form.required = false
          }
        }

        form.show = _options.includes(form.key)
@@ -116,14 +136,30 @@
    }
  }

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

    if (['multiselect', 'select', 'link', 'radio', 'checkbox', 'checkcard'].includes(type)) {
    if (type === 'hint') {
      _options = fromJS(modalTypeOptions[type]).toJS()
    } else if (['multiselect', 'select', 'link', 'radio', 'checkbox'].includes(type)) {
      if (resourceType === '0') {        // 自定义资源
        _options = [..._options, 'options']
        _options.push('options')
      } else if (resourceType === '1') { // 数据源
        _options = [..._options, 'dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database']
        _options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', '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')
        }
      } else {
        if (resourceType === '0') {        // 自定义资源
          _options.push('options', 'fields')
        } else if (resourceType === '1') { // 数据源
          _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database')
        }
      }
    }

@@ -140,7 +176,7 @@

  openTypeChange = (key, value) => {
    if (key === 'type') {
      let _options = this.getOptions(value, this.state.resourceType, this.state.supField)
      let _options = this.getOptions(value, this.state.resourceType, this.state.supField, this.state.display)
      let fieldValue = {}
      
      this.setState({
@@ -192,7 +228,13 @@
            if (form.show) {
              fieldValue.linkSubField = form.initVal
            }
          } else if (form.key === 'label') {
            form.required = true
            if (value === 'hint') {
              form.required = false
          }
          }

          return form
        })
      }, () => {
@@ -240,7 +282,7 @@
    const { openType } = this.state
    let value = e.target.value
    if (key === 'resourceType') {
      let _options = this.getOptions(openType, value, this.state.supField)
      let _options = this.getOptions(openType, value, this.state.supField, this.state.display)
      
      this.setState({
        resourceType: value,
@@ -249,7 +291,27 @@
          return form
        })
      })
    } else if (key === 'display') {
      let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, value)
      
      this.setState({
        display: value,
        formlist: this.state.formlist.map(form => {
          form.show = _options.includes(form.key)
          return form
        })
      })
    } else if (key === 'multiple') {
      if (value === 'true') {
        this.props.form.setFieldsValue({fieldlength: 512})
      } else {
        this.props.form.setFieldsValue({fieldlength: 50})
    }
    }
  }

  changeField = (data) => {
    this.setState({cFields: data})
  }

  handleSubmit = (e) => {
@@ -262,6 +324,7 @@

  getFields() {
    const { getFieldDecorator } = this.props.form
    const { openType } = this.state
    const fields = []

    this.state.formlist.forEach((item, index) => {
@@ -355,6 +418,27 @@
              </Form.Item>
            </Col>
          )
        } else if (item.key === 'width') {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <Icon type="question-circle" />
                  {item.label}
                </Tooltip>
              }>
                {getFieldDecorator(item.key, {
                  initialValue: item.initVal,
                  rules: [
                    {
                      required: !!item.required,
                      message: this.props.dict['form.required.input'] + item.label + '!'
                    }
                  ]
                })(<InputNumber min={1} max={24} precision={0} />)}
              </Form.Item>
            </Col>
          )
        } else {
          fields.push(
            <Col span={12} key={index}>
@@ -409,7 +493,12 @@
      } else if (item.type === 'multiselect') { // 多选
        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
              })(
@@ -458,10 +547,10 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'textarea') {
      } else if (item.type === 'codemirror') {
        fields.push(
          <Col span={20} offset={4} key={index}>
            <Form.Item className="text-area">
          <Col span={24} key={index}>
            <Form.Item className="text-area" label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
@@ -474,15 +563,52 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'options') {
      } else if (item.type === 'textarea') {
        fields.push(
          <Col span={20} offset={4} key={index}>
            <Form.Item className="text-area">
          <Col span={24} key={index}>
            <Form.Item className="text-msg" label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={4} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'options') {
        if (openType !== 'checkcard') {
          fields.push(
            <Col span={24} key={index}>
              <Form.Item label={item.label} className="text-area">
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(<EditTable dict={this.props.dict} type={this.state.openType} linkSubFields={this.state.linkSubFields}/>)}
                })(<EditTable dict={this.props.dict} type={openType} linkSubFields={this.state.linkSubFields}/>)}
            </Form.Item>
            {/* <EditTable data={item.initVal} dict={this.props.dict} type={this.state.openType} linkSubFields={this.state.linkSubFields} ref="editTable"/> */}
            </Col>
          )
        } else {
          fields.push(
            <Col span={24} key={index}>
              <Form.Item label={item.label} className="text-area">
                {getFieldDecorator(item.key, {
                  initialValue: item.initVal
                })(<DataTable dict={this.props.dict} type={this.state.display} fields={this.state.cFields}/>)}
              </Form.Item>
            </Col>
          )
        }
      } else if (item.type === 'fields') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label} className="text-area">
              {getFieldDecorator(item.key, {
                initialValue: item.initVal
              })(<FieldsTable dict={this.props.dict} onChange={this.changeField}/>)}
            </Form.Item>
          </Col>
        )
      }
@@ -575,7 +701,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="ant-advanced-search-form modal-fields-form" id="modal-fields-form-box">
      <Form {...formItemLayout} className="modal-fields-form" id="modal-fields-form-box">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )