2025-01-22

king

2025-01-22 871597aaf2c838946723ee44fc7fa12487b56d34

 src/components/normalform/modalform/index.jsx

@@ -17,18 +17,23 @@
const MKCheckbox = asyncComponent(() => import('./mkCheckbox'))
const StyleInput = asyncComponent(() => import('./styleInput'))
const MKFileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor'))
const MkPrintTemps = asyncComponent(() => import('@/menu/components/share/actioncomponent/actionform/mkPrintTemps'))
const MKColor = asyncComponent(() => import('@/mob/colorsketch'))
// const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor'))
const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))

class ModalForm extends Component {
  static propTpyes = {
    formlist: PropTypes.array,   // 表单列表
    inputSubmit: PropTypes.func  // input回车提交
    formlist: PropTypes.array,
    inputSubmit: PropTypes.func,
    transVals: PropTypes.func,
  }

  state = {
    formlist: [],    // 表单项
    formId: ''
  }

  record = {}
@@ -37,6 +42,15 @@
    let record = {}
    let controlFields = {}
    let fieldMap = new Map()
    let formId = (() => {
      let uuid = []
      let _options = '0123456789abcdefghigklmnopqrstuv'
      for (let i = 0; i < 19; i++) {
        uuid.push(_options.substr(Math.floor(Math.random() * 0x20), 1))
      }
      uuid = uuid.join('')
      return uuid
    })()

    let formlist = this.props.formlist.filter(item => {
      if (item.controlFields) { // 多层表单控制
@@ -45,18 +59,25 @@
      
      item.hidden = false

      if (item.forbid && item.del) return false

      if (item.forbid) {
        item.hidden = true
      }
      if (item.options) {
        item.oriOptions = fromJS(item.options).toJS()
      }
      item.$formId = formId

      if (item.type === 'text') {
        let _rules = [{
          required: item.required,
          message: item.label + '不可为空!'
        }]

        if (item.rules) {
          _rules.push(...item.rules)
        }
        
        item.rules = _rules
      } else if (item.type === 'number') {
@@ -64,7 +85,7 @@
          required: item.required,
          message: item.label + '不可为空!'
        }, {
          validator: (rule, value, callback) => this.handleConfirmPassword(rule, value, callback, item)
          validator: (rule, value, callback) => this.checkNumber(rule, value, callback, item)
        }]
      } else if (item.type === 'textarea') {
        item.rules = [
@@ -100,29 +121,36 @@
      if (!fieldMap.has(key)) return

      let supItem = fieldMap.get(key)
      let supval = supItem.initval

      if (supval && JSON.stringify(supval) === '[]') {
        supval = ''
      }

      let fields = []
      
      controlFields[key].forEach(item => {
        if (!fieldMap.has(item.field)) return

        let cell = fieldMap.get(item.field)

        if (cell.hidden) return
        cell.$ctrls = cell.$ctrls || []
        cell.$ctrls.push(key)

        if (cell.skip && supItem.forbid) { // 上级表单禁用时，此表单不受控制

        if (cell.hidden) {
          
        } else if (supItem.hidden) {
          cell.hidden = true
        } else if (supItem.type === 'checkbox') {
          let vals = [...supItem.initval, ...item.values]
        } else if (item.notNull) {
          cell.hidden = !supval
        } else if (supItem.type === 'checkbox' || supItem.type === 'multiselect') {
          let vals = [...(supval || []), ...item.values]
          if (vals.length === new Set(vals).size) {
            cell.hidden = true
          }
        } else if (item.notNull) {
          cell.hidden = !supItem.initval || JSON.stringify(supItem.initval) === '[]'
        } else if (!item.values.includes(supItem.initval)) {
        } else if (!item.values.includes(supval)) {
          cell.hidden = true
        }

        fieldMap.set(item.field, cell)

        fields.push(item)
@@ -136,10 +164,14 @@
    formlist = formlist.map(cell => {
      let item = fieldMap.get(cell.field)

      if (item.$ctrls && item.$ctrls.length === 1) {
        delete item.$ctrls
      }

      if (item.linkField) {
        let supInitVal = fieldMap.get(item.linkField).initval || ''
        
        item.options = item.oriOptions.filter(option => option.ParentID === supInitVal)
        item.options = item.oriOptions.filter(option => option.ParentID === supInitVal || option.ParentID === '')
      }

      return item
@@ -147,10 +179,10 @@

    this.record = record

    this.setState({ formlist })
    this.setState({ formlist, formId })
  }

  handleConfirmPassword = (rule, value, callback, item) => {
  checkNumber = (rule, value, callback, item) => {
    let val = parseFloat(value)

    if (!isNaN(val)) {
@@ -166,7 +198,13 @@
  recordChange = (values, item) => {
    this.record = {...this.record, ...values}

    if (item && item.controlFields) {
    if (!item) return

    if (item.$trans) {
      this.props.transVals && this.props.transVals(values, item.field)
    }
    
    if (item.controlFields) {
      let map = new Map()
      this.state.formlist.forEach(cell => {
        if (!cell.field) return
@@ -176,22 +214,52 @@
      let reset = (current) => {
        let val = this.record[current.field]

        if (val && JSON.stringify(val) === '[]') {
          val = ''
        }

        current.controlFields.forEach(cell => {
          let m = map.get(cell.field)

          if (current.hidden) {
            m.hidden = true
          } else if (current.type === 'checkbox') {
            let vals = [...val, ...cell.values]
          } else if (cell.notNull) {
            m.hidden = !val
          } else if (current.type === 'checkbox' || current.type === 'multiselect') {
            let vals = [...(val || []), ...cell.values]
            if (vals.length !== new Set(vals).size) {
              m.hidden = false
            } else {
              m.hidden = true
            }
          } else if (cell.notNull) {
            m.hidden = !val || JSON.stringify(val) === '[]'
          } else {
            m.hidden = !cell.values.includes(val)
          }

          if (!m.hidden && m.$ctrls) {
            m.$ctrls.forEach(n => {
              if (n === current.field || m.hidden) return

              let oth = map.get(n)
              let _val = this.record[n]

              if (_val && JSON.stringify(_val) === '[]') {
                _val = ''
              }

              let p = oth.controlFields.filter(q => q.field === m.field)[0]

              if (oth.hidden || (p.notNull && !_val)) {
                m.hidden = true
              } else if (oth.type === 'checkbox' || oth.type === 'multiselect') {
                let _vals = [...(_val || []), ...p.values]
                if (_vals.length === new Set(_vals).size) {
                  m.hidden = true
                }
              } else if (p.values && !p.values.includes(_val)) {
                m.hidden = true
              }
            })
          }

          if (m.hidden) {
@@ -217,12 +285,27 @@
          if (item && item.linkField) {
            let supInitVal = this.record[item.linkField] || ''
            
            item.options = item.oriOptions.filter(option => option.ParentID === supInitVal)
            item.options = item.oriOptions.filter(option => option.ParentID === supInitVal || option.ParentID === '')
          }

          return item || cell
        })
      })
    } else if (item.reset_source) {
      let reOptions = item.callback(this.record)
      
      if (reOptions) {
        this.setState({
          formlist: this.state.formlist.map(cell => {
            if (!cell.field || !reOptions[cell.field]) return cell
  
            cell.options = reOptions[cell.field]
            cell.timestamp = new Date().getTime()
            
            return cell
          })
        })
      }
    }
  }

@@ -236,16 +319,23 @@
      if (item.hidden || item.forbid) return

      let content = null
      let label = item.tooltip ? <Tooltip placement="topLeft" title={item.tooltip}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip> : item.label
      let label = item.label
      if (item.tooltip) {
        if (item.toolWidth) {
          label = <Tooltip placement="topLeft" overlayStyle={{maxWidth: item.toolWidth}} title={<div onClick={(e) => e.stopPropagation()}>{item.tooltip}</div>}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip>
        } else {
          label = <Tooltip placement="topLeft" title={<div onClick={(e) => e.stopPropagation()}>{item.tooltip}</div>}><QuestionCircleOutlined className="mk-form-tip" />{item.label}</Tooltip>
        }
      }
    
      if (item.type === 'text') {
        content = (<MKEInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})} onSubmit={this.props.inputSubmit} />)
        content = (<MKEInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val}, item)} onSubmit={this.props.inputSubmit} />)
      } else if (item.type === 'number') {
        content = (<MKNumberInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})} onSubmit={this.props.inputSubmit} />)
        content = (<MKNumberInput config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val}, item)} onSubmit={this.props.inputSubmit} />)
      } else if (item.type === 'select' || item.type === 'multiselect') {
        content = (<MKSelect config={item} onChange={(val, other) => this.recordChange({[item.field]: val, ...other}, item)} />)
      } else if (item.type === 'color') {
        content = (<MKColor config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>)
        content = (<MKColor config={item} allowClear={item.allowClear} onChange={(val) => this.recordChange({[item.field]: val})}/>)
      } else if (item.type === 'styleInput') {
        content = (<StyleInput config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>)
      } else if (item.type === 'radio') {
@@ -263,21 +353,51 @@
      } else if (item.type === 'source') {
        content = (<SourceComponent type="" placement="right"/>)
      } else if (item.type === 'table') {
        content = (<MKTable columns={item.columns || []}/>)
        content = (<MKTable tip={item.tip || ''} columns={item.columns || []} actions={item.actions || []}/>)
      } else if (item.type === 'hint') {
        fields.push(
          <Col span={24} key={index}>
            <div style={{color: '#1890ff', borderBottom: '1px solid #e9e9e9', marginBottom: '15px', paddingLeft: '10px'}}>{item.label}</div>
          </Col>
        )
        return
      } else if (item.type === 'printTemps') {
        content = <MkPrintTemps onChange={(val) => this.recordChange({[item.field]: val})}/>
      } else if (item.type === 'codemirror') {
        content = <CodeMirror mode="text/javascript" theme="cobalt" onChange={(val) => this.recordChange({[item.field]: val})}/>
      }

      if (!content) return

      fields.push(
        <Col span={item.span || 12} key={index}>
          <Form.Item label={label}>
            {getFieldDecorator(item.field, {
              initialValue: item.initval,
              rules: item.rules
            })(content)}
          </Form.Item>
        </Col>
      )
      if (item.help) {
        let help = null
        if (typeof(item.help) === 'function') {
          help = item.help(this.record)
        } else {
          help = <span style={{fontSize: '12px'}}>{item.help}</span>
        }
        fields.push(
          <Col span={item.span || 12} key={index}>
            <Form.Item label={label} help={help}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: item.rules
              })(content)}
            </Form.Item>
          </Col>
        )
      } else {
        fields.push(
          <Col span={item.span || 12} key={index}>
            <Form.Item label={label}>
              {getFieldDecorator(item.field, {
                initialValue: item.initval,
                rules: item.rules
              })(content)}
            </Form.Item>
          </Col>
        )
      }
    })
    
    return fields
@@ -310,7 +430,7 @@
    }

    return (
      <Form {...formItemLayout} className="normal-form-field">
      <Form {...formItemLayout} className="normal-form-field" id={this.state.formId}>
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )