CardCheck.jsx 3.59 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Checkbox, Tooltip } from 'antd';
3 4 5 6
import styles from './SelectUser.less';
const CheckboxGroup = Checkbox.Group;

const CardCheck = props => {
7
  const { cardMsg, callback, checkList, deleKey, delFlag } = props;
8 9 10 11 12
  const [checkedList, setCheckedList] = useState([]); // 选中列表
  const [indeterminate, setIndeterminate] = useState(false);
  const [checkAll, setCheckAll] = useState(false);
  const [plainOptions, setPlainOptions] = useState([]);

13 14 15 16 17 18 19 20 21
  useEffect(() => {
    let list = [...checkedList];
    if (list.some(item => item === deleKey)) {
      let newList = list.filter(item => item !== deleKey);
      setCheckedList(newList);
      setIndeterminate(!!newList.length && newList.length < plainOptions.length);
      setCheckAll(newList.length === plainOptions.length);
    }
  }, [delFlag]);
22
  useEffect(() => {
皮倩雯's avatar
皮倩雯 committed
23
    console.log(cardMsg);
24 25 26 27
    setPlainOptions(cardMsg.plainOptions);
    setCheckedList(cardMsg.checkedList);
    setIndeterminate(cardMsg.indeterminate);
    setCheckAll(cardMsg.checkAll);
邓超's avatar
邓超 committed
28
  }, [cardMsg]);
29 30 31 32 33

  // 获取勾选新增得数据
  const addData = (arr1, arr2) => arr2.filter(val => arr1.indexOf(val) === -1);
  // 获取勾选删除得数据
  const delData = (arr1, arr2) => arr1.filter(val => arr2.indexOf(val) === -1);
34 35
  // 单选监听
  const onChange = list => {
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
    let newCheckList = [...checkList];
    let arr;
    if (checkedList.length > list.length) {
      // 取消勾选
      arr = delData(checkedList, list);
      arr.forEach(item => {
        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
      });
    } else {
      // 勾选元素
      arr = addData(checkedList, list);
      arr.forEach(item => {
        let checkName = plainOptions.find(ele => ele.value === item);
        newCheckList.push(checkName);
      });
    }
    callback(newCheckList);
53 54 55 56 57 58
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions.length);
    setCheckAll(list.length === plainOptions.length);
  };
  // 全选监听
  const onCheckAllChange = e => {
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
    let newCheckList = [...checkList];
    let arr;
    if (e.target.checked) {
      // 全选
      arr = addData(checkedList, plainOptions.map(item => item.value));
      arr.forEach(item => {
        let checkName = plainOptions.find(ele => ele.value === item);
        newCheckList.push(checkName);
      });
    } else {
      arr = delData(checkedList, []);
      arr.forEach(item => {
        newCheckList.splice(newCheckList.findIndex(ele => ele.value === item), 1);
      });
    }
    callback(newCheckList);
75 76 77 78 79 80 81 82 83 84 85 86
    setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : []);
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };
  return (
    <div className={styles.checkContent}>
      <div className={styles.topCheckbox}>
        <Checkbox
          indeterminate={indeterminate}
          onChange={e => onCheckAllChange(e)}
          checked={checkAll}
        >
皮倩雯's avatar
皮倩雯 committed
87
          {cardMsg.level}
88 89 90 91 92 93 94 95 96 97
        </Checkbox>
      </div>
      <div className={styles.bottomCheckbox}>
        <CheckboxGroup
          value={checkedList}
          onChange={list => onChange(list)}
          style={{ display: 'flex', flexWrap: 'wrap' }}
        >
          {plainOptions.map(item => (
            <Checkbox key={item.value} value={item.value}>
98 99 100
              {/* <Tooltip placement="topLeft" title={item.label}> */}
              <span className={styles.fontlabel}>{item.label}</span>
              {/* </Tooltip> */}
101 102 103 104 105 106 107 108 109
            </Checkbox>
          ))}
        </CheckboxGroup>
      </div>
    </div>
  );
};

export default CardCheck;