2021-07-28

king

2021-07-28 137fb8ea6af2789b3238b22bac31d80bced41dfe

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

@@ -2,6 +2,7 @@
import PropTypes from 'prop-types'
import { Col, Row } from 'antd'

import MKEmitter from '@/utils/events.js'
import './index.scss'

class CheckCard extends Component {
@@ -29,10 +30,12 @@
  }

  changeCard = (item) => {
    const { multiple } = this.props.card
    const { card } = this.props
    const { selectKeys } = this.state

    if (multiple === 'true') {
    if (card.readonly) return

    if (card.multiple === 'true') {
      let keys = []
      if (selectKeys.includes(item.$value)) {
        keys = selectKeys.filter(key => key !== item.$value)
@@ -45,7 +48,13 @@
      }, () => {
        this.props.onChange && this.props.onChange(keys.join(','))
      })
    } else if (multiple !== 'true' && selectKeys !== item.$value) {
    } else if (selectKeys !== item.$value) {
      card.linkFields && card.linkFields.forEach((m, i) => {
        setTimeout(() => {
          MKEmitter.emit('mkSP', m.uuid, item.$value, 0)
        }, (i + 1) * 10)
      })

      this.setState({
        selectKeys: item.$value
      }, () => {
@@ -55,7 +64,7 @@
  }

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

    let paddingTop = '100%'
@@ -67,12 +76,16 @@
      paddingTop = '56.25%'
    }

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

    if (!options || options.length === 0) {
      return null
    } else if (display !== 'picture') {
      if (!fields || fields.length === 0) {
        return null
      }

      return options.map(item => {
        let _active = false
        if (multiple === 'true' && selectKeys.includes(item.$value)) {
@@ -82,7 +95,8 @@
        }

        return <Col span={width} key={item.key}>
          <div className={'card-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)}>
          <div className={'card-cell' + (_active ? ' active' : '') + (_style ? ' bg-control' : '')} style={style} 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>
            })}
@@ -99,7 +113,7 @@
        }

        return <Col span={width} key={item.key}>
          <div className={'card-pic-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)} style={{paddingTop, backgroundImage: `url(${item.$url})`}}>
          <div className={'card-pic-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)} style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}>
          </div>
        </Col>
      })
@@ -107,8 +121,9 @@
  }

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