listCardItem.jsx 3.01 KB
Newer Older
Maofei94's avatar
Maofei94 committed
1 2 3
import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { Checkbox, Row, Col } from 'antd';
import styles from './ListCardItem.less';
4 5 6

const CheckGroup = Checkbox.Group;

Maofei94's avatar
Maofei94 committed
7 8 9 10 11 12
const ListCardItem = props => {
  const { getValueCallback, itemid, userList, OUName, searchWord } = props;
  const [indeterminate, setIndeterminate] = useState(false);
  const [allChecked, setAllChecked] = useState(false); // 全选状态
  const [checkList, setCheckList] = useState([]); // 复选框列表选中的值
  const [defaultList, setDefaultList] = useState([]); // 默认的选项
陈前坚's avatar
陈前坚 committed
13 14
  const [submitArr, setSubmitArr] = useState([]); // 提交的数组
  // const submitArr = [];
15

Maofei94's avatar
Maofei94 committed
16 17 18 19 20 21 22 23 24 25 26 27
  useEffect(() => {
    let arr = [];
    userList.map((item, index) => {
      let obj = { ...item };
      obj.label = (
        <span
          className={
            searchWord && obj.userName.includes(searchWord)
              ? styles.isSearch
              : ''
          }
        >
陈前坚's avatar
陈前坚 committed
28
          {obj.userName || obj.roleName || obj.stationName}
Maofei94's avatar
Maofei94 committed
29 30
        </span>
      );
31
      obj.value = obj.userID || obj.roleID || obj.stationID;
Maofei94's avatar
Maofei94 committed
32 33 34 35
      arr.push(obj);
    });
    setDefaultList(arr);
  }, [searchWord]);
36

Maofei94's avatar
Maofei94 committed
37 38 39 40
  useEffect(() => {
    let arr2 = [];
    userList.map((item, index) => {
      if (item.isChecked) {
陈前坚's avatar
陈前坚 committed
41
        arr2.push(item.userID || item.roleID || item.stationID);
Maofei94's avatar
Maofei94 committed
42 43
      }
    });
44 45 46 47 48 49
    // eslint-disable-next-line no-unused-expressions
    getValueCallback && getValueCallback(arr2, itemid);

    const all = userList.every(u => u.isChecked);
    setIndeterminate(!all && userList.some(u => u.isChecked));
    setAllChecked(all);
Maofei94's avatar
Maofei94 committed
50 51
    setCheckList(arr2);
  }, [userList]);
52

Maofei94's avatar
Maofei94 committed
53 54 55 56 57 58
  const handleAllChecked = e => {
    const { checked } = e.target;
    setAllChecked(checked);
    let arr = [];
    if (checked) {
      arr = defaultList.map(item => item.value);
59
    }
Maofei94's avatar
Maofei94 committed
60
    setIndeterminate(false);
61
    setCheckList(arr);
62 63
    // eslint-disable-next-line no-unused-expressions
    getValueCallback && getValueCallback(arr, itemid);
Maofei94's avatar
Maofei94 committed
64
  };
65

Maofei94's avatar
Maofei94 committed
66 67 68 69 70 71
  const handleChecked = e => {
    setCheckList(e);
    setAllChecked(e.length === defaultList.length);
    setIndeterminate(!!e.length && e.length < defaultList.length);
    getValueCallback(e, itemid);
  };
72 73 74
  if (defaultList.length === 0) {
    return null;
  }
75 76
  return (
    <>
Maofei94's avatar
Maofei94 committed
77 78
      <div className={`${styles.divBox}`}>
        <div className={styles.topCheckbox}>
79
          <Checkbox
Maofei94's avatar
Maofei94 committed
80 81 82 83 84 85 86 87
            indeterminate={indeterminate}
            checked={allChecked}
            onChange={e => {
              handleAllChecked(e);
            }}
          >
            {OUName}
          </Checkbox>
88
        </div>
Maofei94's avatar
Maofei94 committed
89 90 91 92 93 94 95 96 97 98 99
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {defaultList && defaultList.length > 0 && (
            <CheckGroup
              className={styles.check}
              onChange={e => {
                handleChecked(e);
              }}
              value={checkList}
              options={defaultList}
            />
          )}
100 101 102
        </div>
      </div>
    </>
Maofei94's avatar
Maofei94 committed
103 104
  );
};
105

Maofei94's avatar
Maofei94 committed
106
export default ListCardItem;