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
import React, { useState, useEffect } from 'react';
import { Checkbox, Tooltip } from 'antd';
import styles from './index.less';
const CheckboxGroup = Checkbox.Group;
const CardCheck = props => {
const { cardMsg, callback, checkList, deleKey, delFlag } = props;
const [checkedList, setCheckedList] = useState([]); // 选中列表
const [indeterminate, setIndeterminate] = useState(false);
const [checkAll, setCheckAll] = useState(false);
const [plainOptions, setPlainOptions] = useState([]);
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]);
useEffect(() => {
console.log(cardMsg);
setPlainOptions(cardMsg.plainOptions);
setCheckedList(cardMsg.checkedList);
setIndeterminate(cardMsg.indeterminate);
setCheckAll(cardMsg.checkAll);
}, [cardMsg]);
// 获取勾选新增得数据
const addData = (arr1, arr2) => arr2.filter(val => arr1.indexOf(val) === -1);
// 获取勾选删除得数据
const delData = (arr1, arr2) => arr1.filter(val => arr2.indexOf(val) === -1);
// 单选监听
const onChange = list => {
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);
setCheckedList(list);
setIndeterminate(!!list.length && list.length < plainOptions.length);
setCheckAll(list.length === plainOptions.length);
};
// 全选监听
const onCheckAllChange = e => {
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);
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}
>
{cardMsg.level}
</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}>
{/* <Tooltip placement="topLeft" title={item.label}> */}
<span className={styles.fontlabel}>{item.label}</span>
{/* </Tooltip> */}
</Checkbox>
))}
</CheckboxGroup>
</div>
</div>
);
};
export default CardCheck;