2024-07-29

king

2024-07-29 fd1a4a42bbef3e9c02e0fee346b49401ec0fe23f

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

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Col, Row } from 'antd'
import { Col, Row, Switch } from 'antd'
import { CheckOutlined } from '@ant-design/icons'

import MKEmitter from '@/utils/events.js'
@@ -23,8 +23,13 @@
    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)
    } else if (config.options[0] && typeof(config.options[0].$value) === 'number' && /^([0-9]|[1-9]\d{0,2})$/.test(config.initval)) {
      selectKeys = +config.initval
    }

    if (!config.selectStyle && config.backgroundColor) {
@@ -44,6 +49,10 @@
      config: config,
      options: fromJS(config.options).toJS(),
      selectKeys: selectKeys
    }, () => {
      if (config.multiple === 'true' && selectKeys.length < initlength) {
        this.props.onChange(selectKeys.join(','))
      }
    })
  }

@@ -60,9 +69,20 @@
  }

  UNSAFE_componentWillReceiveProps (nextProps) {
    const { config } = this.state
    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: {...config, oriOptions: nextProps.config.oriOptions},
        options: fromJS(nextProps.config.options).toJS()
@@ -75,6 +95,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) => {
@@ -191,7 +221,7 @@
        }

        return <Col span={width} key={item.key}>
          <div className={'card-color-cell' + (_active ? ' active' : '') + (item.$disabled ? ' disabled' : '')} style={{background: item.$value}} 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>
            })}
@@ -253,6 +283,29 @@
    }
  }

  onChange = (val) => {
    if (val) {
      let keys = []
      this.state.options.forEach(item => {
        if (item.$disabled) return

        keys.push(item.$value)
      })

      this.setState({
        selectKeys: keys
      }, () => {
        this.props.onChange(keys.join(','))
      })
    } else {
      this.setState({
        selectKeys: []
      }, () => {
        this.props.onChange('')
      })
    }
  }

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

@@ -261,9 +314,13 @@
    if (options.length * config.width > 24) {
      extend += ' mutile-line'
    }
    if (config.border === 'hide') {
      extend += ' border-hide'
    }

    return (
      <div className={'check-card-form-box ' + extend}>
        {config.checkAll === 'show' && options.length > 3 ? <Switch size="small" onChange={this.onChange}/> : null}
        <Row gutter={12}>{this.getCards()}</Row>
      </div>
    )