2023-06-15

king

2023-06-15 a29d9d644a2a30e9ef4afcc6d728c20c218dc359

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

@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Col, Row } from 'antd'
import { CheckOutlined } from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
import './index.scss'
@@ -19,17 +20,37 @@
  }

  UNSAFE_componentWillMount() {
    const { config } = this.props
    let config = fromJS(this.props.config).toJS()

    let selectKeys = config.initval
    let initlength = 0
    if (config.multiple === 'true') {
      selectKeys = config.initval ? config.initval.split(',') : []
      initlength = selectKeys.length
      selectKeys = this.filterVals(config.options, selectKeys)
    }

    if (!config.selectStyle && config.backgroundColor) {
      config.selectStyle = 'custom'
    } else if (!config.selectStyle) {
      config.selectStyle = 'background'
    }

    if (config.display === 'picture' && !config.picratio) { // 兼容旧数据
      config.picratio = config.ratio || '1:1'
    }

    config.selectClass = ` mk-${config.selectStyle} `
    config.fields = config.fields || []

    this.setState({
      config: fromJS(config).toJS(),
      config: config,
      options: fromJS(config.options).toJS(),
      selectKeys: selectKeys
    }, () => {
      if (config.multiple === 'true' && selectKeys.length < initlength) {
        this.props.onChange(selectKeys.join(','))
      }
    })
  }

@@ -46,11 +67,22 @@
  }

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

    if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) {
      if (config.multiple === 'true') {
        let keys = this.filterVals(nextProps.config.options, fromJS(selectKeys).toJS())
        if (keys.length < selectKeys.length) {
          this.setState({
            selectKeys: keys
          }, () => {
            this.props.onChange(keys.join(','))
          })
        }
      }

      this.setState({
        config: fromJS(nextProps.config).toJS(),
        config: {...config, oriOptions: nextProps.config.oriOptions},
        options: fromJS(nextProps.config.options).toJS()
      })
    }
@@ -61,6 +93,16 @@
      return
    }
    MKEmitter.removeListener('mkFP', this.mkFormHandle)
  }

  filterVals = (options, vals) => {
    if (options.length === 0 || vals.length === 0) return vals

    let ops = options.map(item => item.$value)

    vals = vals.filter(val => ops.includes(val))

    return vals
  }

  mkFormHandle = (uuid, parentId, level) => {
@@ -163,54 +205,76 @@

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

    let paddingTop = '100%'
    if (ratio === '4:3') {
      paddingTop = '75%'
    } else if (ratio === '3:2') {
      paddingTop = '66.7%'
    } else if (ratio === '16:9') {
      paddingTop = '56.25%'
    }

    let style = borderColor ? {borderColor} : {}
    let _style = backgroundColor ? {backgroundColor} : null

    if (!options || options.length === 0) {
    if (options.length === 0) {
      return null
    } else if (display !== 'picture') {
      if (!fields || fields.length === 0) {
        return null
      }
    } else if (display === 'color') {
      return options.map(item => {
        let _active = false
        if (multiple === 'true' && selectKeys.includes(item.$value)) {
          _active = true
        } else if (multiple !== 'true' && selectKeys === item.$value) {
          _active = true
        if (multiple === 'true') {
          _active = selectKeys.includes(item.$value)
        } else {
          _active = selectKeys === item.$value
        }

        return <Col span={width} key={item.key}>
          <div className={'card-cell' + (_active ? ' active' : '') + (_style ? ' bg-control' : '') + (item.$disabled ? ' disabled' : '')} style={style} onClick={() => this.changeCard(item)}>
          <div className={'card-color-cell' + (_active ? ' active' : '') + (item.$disabled ? ' disabled' : '')} style={{background: item.$color}} onClick={() => this.changeCard(item)}>
            {fields.map(col => {
              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
            <CheckOutlined />
          </div>
        </Col>
      })
    } else if (display !== 'picture') {
      let _style = selectStyle === 'custom' ? {backgroundColor} : null

      return options.map(item => {
        let _active = false
        if (multiple === 'true') {
          _active = selectKeys.includes(item.$value)
        } else {
          _active = selectKeys === item.$value
        }

        return <Col span={width} key={item.key}>
          <div className={'card-cell' + (_active ? ' active' : '') + selectClass + (item.$disabled ? ' disabled' : '')} onClick={() => this.changeCard(item)}>
            <div className="bg-mask" style={_style}></div>
            {fields.map(col => {
              return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
              return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
            })}
          </div>
        </Col>
      })
    } else {
      let paddingTop = '100%'
      if (picratio === '4:3') {
        paddingTop = '75%'
      } else if (picratio === '3:2') {
        paddingTop = '66.7%'
      } else if (picratio === '16:9') {
        paddingTop = '56.25%'
      }

      return options.map(item => {
        let _active = false
        if (multiple === 'true' && selectKeys.includes(item.$value)) {
          _active = true
        } else if (multiple !== 'true' && selectKeys === item.$value) {
          _active = true
        if (multiple === 'true') {
          _active = selectKeys.includes(item.$value)
        } else {
          _active = selectKeys === item.$value
        }

        return <Col span={width} key={item.key}>
          <div className={'card-pic-cell ' + (_active ? 'active' : '') + (item.$disabled ? ' disabled' : '')} onClick={() => this.changeCard(item)} style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
          <div className={'card-pic-cell ' + (_active ? 'active' : '') + (item.$disabled ? ' disabled' : '')} onClick={() => this.changeCard(item)} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
            <div className="content-wrap">
              <div className="content-center">
                {fields.map(col => {
                  return <span className="content-line" key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span>
                })}
              </div>
              <CheckOutlined />
            </div>
          </div>
        </Col>
      })
@@ -218,10 +282,19 @@
  }

  render() {
    const { config } = this.state
    const { config, options } = this.state

    let extend = config.readonly ? 'readonly' : ''

    if (options.length * config.width > 24) {
      extend += ' mutile-line'
    }
    if (config.border === 'hide') {
      extend += ' border-hide'
    }

    return (
      <div className={'check-card-form-box' + (config.readonly ? ' readonly' : '')}>
      <div className={'check-card-form-box ' + extend}>
        <Row gutter={12}>{this.getCards()}</Row>
      </div>
    )