listCardItem.jsx 4.74 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
const ListCardItem = props => {
8 9 10 11 12 13 14 15 16 17
  const {
    getValueCallback,
    itemid,
    userList,
    OUName,
    searchWord,
    multiRoleList,
    multistationList,
    mult,
  } = props;
Maofei94's avatar
Maofei94 committed
18 19 20 21
  const [indeterminate, setIndeterminate] = useState(false);
  const [allChecked, setAllChecked] = useState(false); // 全选状态
  const [checkList, setCheckList] = useState([]); // 复选框列表选中的值
  const [defaultList, setDefaultList] = useState([]); // 默认的选项
陈前坚's avatar
陈前坚 committed
22
  const [submitArr, setSubmitArr] = useState([]); // 提交的数组
23
  const authority = sessionStorage.getItem('userType');
24

陈前坚's avatar
陈前坚 committed
25
  // const submitArr = [];
26

Maofei94's avatar
Maofei94 committed
27 28 29 30 31 32 33 34 35 36 37 38
  useEffect(() => {
    let arr = [];
    userList.map((item, index) => {
      let obj = { ...item };
      obj.label = (
        <span
          className={
            searchWord && obj.userName.includes(searchWord)
              ? styles.isSearch
              : ''
          }
        >
陈前坚's avatar
陈前坚 committed
39
          {obj.userName || obj.roleName || obj.stationName}
Maofei94's avatar
Maofei94 committed
40 41
        </span>
      );
42
      obj.value = obj.userID || obj.roleID || obj.stationID;
Maofei94's avatar
Maofei94 committed
43 44 45 46
      arr.push(obj);
    });
    setDefaultList(arr);
  }, [searchWord]);
47

Maofei94's avatar
Maofei94 committed
48
  useEffect(() => {
49
    if (mult == 'Yes') {
50 51 52 53 54 55 56 57 58 59 60 61
      console.log(multiRoleList);
      console.log(multistationList);
      let arr2 = [];
      if (multiRoleList != undefined) {
        multiRoleList.map((item, index) => {
          arr2.push(item);
        });
      }
      if (multistationList != undefined) {
        multistationList.map((item1, index) => {
          arr2.push(item1);
        });
Maofei94's avatar
Maofei94 committed
62
      }
63 64 65
      console.log(arr2);
      console.log(userList);
      console.log(itemid);
66

67 68 69 70 71 72 73 74 75
      // 勾选展示
      let flag = 0;
      let aa = [];
      userList.map((item, index) => {
        if (item.roleID != undefined) {
          if (arr2.indexOf(item.roleID) != -1) {
            flag += 1;
            aa.push(item.roleID);
          }
76
        }
77 78 79 80 81
        if (item.stationID != undefined) {
          if (arr2.indexOf(item.stationID) != -1) {
            flag += 1;
            aa.push(item.stationID);
          }
82
        }
83 84 85 86 87 88 89
      });
      console.log(aa);
      console.log(userList.length);
      console.log(flag);
      if (flag == userList.length) {
        setIndeterminate(false);
        setAllChecked(true);
90
      }
91 92 93
      if (flag < userList.length && flag > 0) {
        setIndeterminate(true);
        setAllChecked(false);
94
      }
95 96 97
      if (flag == 0) {
        setIndeterminate(false);
        setAllChecked(false);
98
      }
99
      // eslint-disable-next-line no-unused-expressions
100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115
      getValueCallback && getValueCallback(aa, itemid);
      setCheckList(arr2);
    } else {
      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);
    }
Maofei94's avatar
Maofei94 committed
116
  }, [userList]);
117

Maofei94's avatar
Maofei94 committed
118 119 120 121 122 123
  const handleAllChecked = e => {
    const { checked } = e.target;
    setAllChecked(checked);
    let arr = [];
    if (checked) {
      arr = defaultList.map(item => item.value);
124
    }
Maofei94's avatar
Maofei94 committed
125
    setIndeterminate(false);
126
    setCheckList(arr);
127 128
    // eslint-disable-next-line no-unused-expressions
    getValueCallback && getValueCallback(arr, itemid);
Maofei94's avatar
Maofei94 committed
129
  };
130

Maofei94's avatar
Maofei94 committed
131 132 133 134 135 136
  const handleChecked = e => {
    setCheckList(e);
    setAllChecked(e.length === defaultList.length);
    setIndeterminate(!!e.length && e.length < defaultList.length);
    getValueCallback(e, itemid);
  };
137 138 139
  if (defaultList.length === 0) {
    return null;
  }
140
  return (
141 142 143
    <div
      style={{
        display:
144
          OUName === '运维管理' && authority !== 'super' ? 'none' : 'block',
145 146
      }}
    >
Maofei94's avatar
Maofei94 committed
147 148
      <div className={`${styles.divBox}`}>
        <div className={styles.topCheckbox}>
149
          <Checkbox
Maofei94's avatar
Maofei94 committed
150 151 152 153 154 155 156 157
            indeterminate={indeterminate}
            checked={allChecked}
            onChange={e => {
              handleAllChecked(e);
            }}
          >
            {OUName}
          </Checkbox>
158
        </div>
Maofei94's avatar
Maofei94 committed
159 160 161 162 163 164 165 166 167 168 169
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {defaultList && defaultList.length > 0 && (
            <CheckGroup
              className={styles.check}
              onChange={e => {
                handleChecked(e);
              }}
              value={checkList}
              options={defaultList}
            />
          )}
170 171
        </div>
      </div>
172
    </div>
Maofei94's avatar
Maofei94 committed
173 174
  );
};
175

Maofei94's avatar
Maofei94 committed
176
export default ListCardItem;