listCardItem.jsx 3.4 KB
import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { Checkbox, Row, Col } from 'antd';
import styles from './ListCardItem.less';

const CheckGroup = Checkbox.Group;

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([]); // 默认的选项
  const [submitArr, setSubmitArr] = useState([]); // 提交的数组
  // const submitArr = [];

  useEffect(() => {
    let arr = [];
    userList.map((item, index) => {
      let obj = { ...item };
      obj.label = (
        <span
          className={
            searchWord && obj.userName.includes(searchWord)
              ? styles.isSearch
              : ''
          }
        >
          {obj.userName || obj.roleName || obj.stationName}
        </span>
      );
      obj.value = obj.userID || obj.roleID || obj.stationID;
      arr.push(obj);
    });
    setDefaultList(arr);
  }, [searchWord]);

  useEffect(() => {
    let arr2 = [];
    userList.map((item, index) => {
      if (item.isChecked) {
        arr2.push(item.userID || item.roleID || item.stationID);
      }
    });
    // 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);
    setCheckList(arr2);
  }, [userList]);

  const handleAllChecked = e => {
    const { checked } = e.target;
    setAllChecked(checked);
    let arr = [];
    if (checked) {
      arr = defaultList.map(item => item.value);
    }
    setIndeterminate(false);
    setCheckList(arr);
    // eslint-disable-next-line no-unused-expressions
    getValueCallback && getValueCallback(arr, itemid);
  };

  const handleChecked = e => {
    setCheckList(e);
    setAllChecked(e.length === defaultList.length);
    setIndeterminate(!!e.length && e.length < defaultList.length);
    getValueCallback(e, itemid);
  };
  if (defaultList.length === 0) {
    return null;
  }
  return (
    <>
      <div className={`${styles.divBox}`}>
        <div className={styles.topCheckbox}>
          <Checkbox
            indeterminate={indeterminate}
            checked={allChecked}
            onChange={e => {
              handleAllChecked(e);
            }}
          >
            {OUName}
          </Checkbox>
        </div>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {defaultList && defaultList.length > 0 && (
            <CheckGroup
              className={styles.check}
              onChange={e => {
                handleChecked(e);
              }}
              value={checkList}
              options={defaultList}
            />
          )}

          {/* { <CheckGroup onChange = {(e) => { handleChecked(e)}}  >
          {defaultList && defaultList.length>0 &&
            defaultList.map( (item, index) =>{ 
              return item.label.includes(searchWord) && 
              <Checkbox key={index}  value={item.value} >{item.label}{item.userID}{String(item.isChecked)}</Checkbox>
              })
          }
        </CheckGroup>} */}
        </div>
      </div>
    </>
  );
};

export default ListCardItem;