2022-01-21

king

2022-01-21 46f79b491173d284a4900d19e7aecf7509481438

 src/tabviews/zshare/mutilform/mkCheckCard/index.jsx

@@ -1,5 +1,6 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Col, Row } from 'antd'

import MKEmitter from '@/utils/events.js'
@@ -12,26 +13,103 @@
  }

  state = {
    selectKeys: null
    selectKeys: null,
    config: null,
    options: []
  }

  UNSAFE_componentWillMount() {
    const { config } = this.props

    let selectKeys = config.initval
    if (config.multiple === 'true') {
      selectKeys = config.initval ? config.initval.split(',') : []
    }

    this.setState({
      config: fromJS(config).toJS(),
      options: fromJS(config.options).toJS(),
      selectKeys: selectKeys
    })
  }

  componentDidMount () {
    const { config } = this.state

    if (config.linkField) {
      MKEmitter.addListener('mkFP', this.mkFormHandle)
    }
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { config } = this.props

    if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) {
      this.setState({
        selectKeys: config.initval ? config.initval.split(',') : []
      })
    } else {
      this.setState({
        selectKeys: config.initval
        config: fromJS(nextProps.config).toJS(),
        options: fromJS(nextProps.config.options).toJS()
      })
    }
  }

  componentWillUnmount () {
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('mkFP', this.mkFormHandle)
  }

  mkFormHandle = (uuid, parentId, level) => {
    if (uuid !== this.state.config.uuid) return

    const { config } = this.state

    let options = config.oriOptions.filter(option => option.ParentID === parentId)

    if (config.multiple === 'true') {
      this.setState({
        options,
        selectKeys: []
      })
      this.props.onChange('')
    } else {
      let _option = options[0] && !options[0].$disabled ? options[0] : null
      let val = _option ? _option.$value : ''

      this.setState({
        options,
        selectKeys: val
      })
  
      let other = {}
  
      if (config.subFields && _option) {
        config.subFields.forEach((n, i) => {
          other[n.field] = _option[n.field]
          setTimeout(() => {
            MKEmitter.emit('mkFC', 'input', n.uuid, _option[n.field])
          }, i * 5)
        })
      }
  
      this.props.onChange(val, other)
  
      if (level < 7 && config.linkFields) {
        config.linkFields.forEach((m, i) => {
          setTimeout(() => {
            MKEmitter.emit('mkFP', m.uuid, val, level + 1)
          }, (i + 1) * 70)
        })
      }
    }
  }

  changeCard = (item) => {
    const { config } = this.props
    const { selectKeys } = this.state
    const { selectKeys, config } = this.state

    if (config.readonly || item.$disabled) return

@@ -71,8 +149,8 @@
  }

  getCards = () => {
    const { display, width, options, fields, ratio, multiple, backgroundColor, borderColor } = this.props.config
    const { selectKeys } = this.state
    const { selectKeys, options, config } = this.state
    const { display, width, fields, ratio, multiple, backgroundColor, borderColor } = config

    let paddingTop = '100%'
    if (ratio === '4:3') {
@@ -127,7 +205,7 @@
  }

  render() {
    const { config } = this.props
    const { config } = this.state

    return (
      <div className={'check-card-form-box' + (config.readonly ? ' readonly' : '')}>