From fd1a4a42bbef3e9c02e0fee346b49401ec0fe23f Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期一, 29 七月 2024 17:00:15 +0800
Subject: [PATCH] 2024-07-29

---
 src/tabviews/zshare/mutilform/mkCheckCard/index.jsx |   75 +++++++++++++++++++++++++++++++++----
 1 files changed, 66 insertions(+), 9 deletions(-)

diff --git a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx
index a80a850..a73b13c 100644
--- a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx
+++ b/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,11 +69,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()
       })
     }
@@ -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) => {
@@ -178,7 +208,7 @@
   getCards = () => {
     const { selectKeys, options, config } = this.state
     const { display, width, fields, picratio, multiple, backgroundColor, selectStyle, selectClass } = config
-    
+
     if (options.length === 0) {
       return null
     } else if (display === 'color') {
@@ -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>
             })}
@@ -231,10 +261,10 @@
 
       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}>
@@ -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>
     )

--
Gitblit v1.8.0