1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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;