2023-05-18

king

2023-05-18 e9e8b1c7b481415714fff9a0d83099fd5a7d6ff0

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -29,7 +29,7 @@
  color: ['eleType', 'datatype', 'width', 'lenWidRadio', 'noValue', 'copyable'],
}

class MainSearch extends Component {
class ElementEditForm extends Component {
  static propTpyes = {
    config: PropTypes.object,    // 组件信息
    formlist: PropTypes.any,     // 表单信息
@@ -38,28 +38,24 @@
  }

  state = {
    formlist: null,  // 表单信息
    eleType: '',
    datatype: '',
    showType: '',
    showInfo: 'false',
    fixStyle: '',
    link: ''
    formlist: null  // 表单信息
  }

  record = null

  UNSAFE_componentWillMount () {
    const { card, config, side } = this.props
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo, card.fixStyle || '', card.posterType || '')
    const { card, config, side, formlist } = this.props
    
    this.record = {}

    formlist.forEach(item => {
      this.record[item.key] = item.initVal
    })
    
    let _options = this.getOptions()

    this.setState({
      link: card.link,
      eleType: card.eleType,
      datatype: card.datatype,
      showType: card.showType || 'line',
      showInfo: card.showInfo || 'false',
      fixStyle: card.fixStyle || '',
      posterType: card.posterType || '',
      formlist: this.props.formlist.map(item => {
      formlist: formlist.map(item => {
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') {
@@ -154,50 +150,50 @@
    })
  }

  getOptions = (eleType, datatype, link, showType, showInfo, fixStyle, posterType) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
  getOptions = () => {
    let _options = fromJS(cardTypeOptions[this.record.eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color'].includes(eleType)) {
      if (datatype === 'dynamic') {
    if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color'].includes(this.record.eleType)) {
      if (this.record.datatype === 'dynamic') {
        _options.push('field')
        if (eleType === 'number') {
        if (this.record.eleType === 'number') {
          _options.push('decimal', 'format')
        }
      } else if (eleType === 'picture' || eleType === 'video') {
      } else if (this.record.eleType === 'picture' || this.record.eleType === 'video') {
        _options.push('url')
      } else {
        _options.push('value')
      }
      if (eleType === 'video' && posterType) {
        if (posterType === 'dynamic') {
      if (this.record.eleType === 'video' && this.record.posterType) {
        if (this.record.posterType === 'dynamic') {
          _options.push('posterField')
        } else {
          _options.push('posterUrl')
        }
      }

      if (['text', 'picture'].includes(eleType) && link) {
        // if (link === 'dynamic' || link === 'static') {
          _options.push('linkurl', 'joint', 'linkType')
        // }
      } else if (eleType === 'picture' && !link) {
      if (['text', 'picture'].includes(this.record.eleType) && this.record.link) {
        _options.push('linkurl', 'joint', 'linkType')
      } else if (this.record.eleType === 'picture' && !this.record.link) {
        _options.push('scale')
      } else if (eleType === 'slider') {
        if (showInfo === 'true') {
      } else if (this.record.eleType === 'slider') {
        if (this.record.showInfo === 'true') {
          _options.push('infoColor')
        }
        if (showType !== 'line') {
        if (this.record.showType !== 'line') {
          _options.push('outlineWidth', 'textAlign')
        }
      }
    } else if (eleType === 'icon') {
      if (datatype === 'dynamic') {
    } else if (this.record.eleType === 'icon') {
      if (this.record.datatype === 'dynamic') {
        _options.push('field', 'noValue')
      } else {
        _options.push('icon')
      }
    } else if (this.record.eleType === 'formula' && this.record.eval === 'true') {
      _options.push('decimal')
    }
    if (_options.includes('fixStyle') && fixStyle === 'alone') {
    if (_options.includes('fixStyle') && this.record.fixStyle === 'alone') {
      _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight')
    }

@@ -211,13 +207,22 @@
   * 3、切换标签类型，重置可选标签
   */
  selectChange = (key, value, option) => {
    const { card, config, side } = this.props
    const { datatype, eleType, showType, showInfo, fixStyle, posterType } = this.state
    const { config, side } = this.props

    this.record[key] = value

    if (key === 'eleType') {
      let _options = this.getOptions(value, datatype, '', showType, showInfo, fixStyle, posterType)
      this.record.link = ''
      let _options = this.getOptions()

      if (value === 'splitline') {
        this.record.color = '#EBE9E9'
      } else if (value === 'formula') {
        this.record.decimal = ''
      }
      
      let _formlist = this.state.formlist.map(item => {
        item.initVal = this.record[item.key]
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field') {
@@ -274,16 +279,6 @@
          }
        } else if (item.key === 'url') {
          item.required = value !== 'qrcode'
        } else if (item.key === 'showInfo') {
          item.initVal = showInfo
        } else if (item.key === 'posterType') {
          item.initVal = posterType
        } else if (item.key === 'fixStyle') {
          item.initVal = fixStyle
        } else if (item.key === 'color') {
          if (value === 'splitline') {
            item.initVal = '#EBE9E9'
          }
        }

        return item
@@ -295,9 +290,6 @@
      }

      this.setState({
        link: '',
        eleType: value,
        showType: card.showType || 'line',
        formlist: _formlist
      }, () => {
        if (value === 'splitline') {
@@ -320,90 +312,27 @@
        this.props.form.setFieldsValue({value: option.props.title})
      }
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle, posterType)
      let _options = this.getOptions()
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
          item.initVal = this.record[item.key]
          item.hidden = !_options.includes(item.key)

          if (item.key === 'linkurl') {
            item.type = value === 'dynamic' ? 'select' : 'textarea'
          }
          return item
        })
      })
    }
  }

  onChange = (e, key) => {
    const { eleType, datatype, link, showType, showInfo, fixStyle, posterType } = this.state
    let value = e.target.value

    if (key === 'datatype') {
      let _options = this.getOptions(eleType, value, link, showType, showInfo, fixStyle, posterType)
    } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval'].includes(key)) {
      let _options = this.getOptions()

      this.setState({
        datatype: value,
        formlist: this.state.formlist.map(item => {
          item.initVal = this.record[item.key]
          item.hidden = !_options.includes(item.key)

          return item
        })
      })
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle, posterType)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          if (item.key === 'linkurl') {
            item.type = value === 'dynamic' ? 'select' : 'textarea'
          }
          return item
        })
      })
    } else if (key === 'showInfo') {
      let _options = this.getOptions(eleType, datatype, link, showType, value, fixStyle, posterType)
      this.setState({
        showInfo: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          return item
        })
      })
    } else if (key === 'showType') {
      this.setState({
        showType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, value, showInfo, fixStyle, posterType)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    } else if (key === 'fixStyle') {
      this.setState({
        fixStyle: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, showType, showInfo, value, posterType)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    } else if (key === 'posterType') {
      this.setState({
        posterType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, showType, showInfo, fixStyle, value)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    }
@@ -585,7 +514,7 @@
                  message: '请选择' + item.label + '!'
                }]
              })(
                <Radio.Group onChange={(e) => {this.onChange(e, item.key)}} disabled={item.readonly}>
                <Radio.Group onChange={(e) => {this.selectChange(item.key, e.target.value)}} disabled={item.readonly}>
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
@@ -670,12 +599,33 @@
  }

  handleConfirm = () => {
    const { config } = this.props

    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.uuid = this.props.card.uuid
          values.marks = this.props.card.marks || null

          // eslint-disable-next-line
          if (values.eleType === 'formula' && values.eval !== 'false' && /^[\u4E00-\u9FA50-9a-zA-Z_\s@\+\-\*\/]*$/ig.test(values.formula) && /[\+\-\*\/]/ig.test(values.formula)) {
            let cols = []
            config.subColumns && config.subColumns.forEach(col => {
              if (/^(Int|Decimal)/ig.test(col.datatype)) {
                cols.push({reg: new RegExp('@' + col.field + '@', 'ig'), value: `(@${col.field}@)`})
              }
            })
            config.columns.forEach(col => {
              if (/^(Int|Decimal)/ig.test(col.datatype)) {
                cols.push({reg: new RegExp('@' + col.field + '@', 'ig'), value: `(@${col.field}@)`})
              }
            })

            cols.forEach(col => {
              values.formula = values.formula.replace(col.reg, col.value)
            })
          }

          resolve(values)
        } else {
@@ -704,4 +654,4 @@
  }
}

export default Form.create()(MainSearch)
export default Form.create()(ElementEditForm)