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
import React, { useState, useEffect } from 'react';
import { Checkbox, Empty } from 'antd';
import styles from './checkBox.less';
const CheckList = props => {
const { info = {}, valueCallback = () => {}, nodeType = '', addList } = props;
const [list, setList] = useState([]);
const [addRoleList, setAddRoleList] = useState([]);
useEffect(() => {
if (info.pageUrl) {
let arr = [...info.relatedRoleList];
let arr2 = [];
arr.map(item => {
if (item.related) {
arr2.push(item.relatedRoleCode);
}
});
valueCallback(arr);
console.log(arr);
setList(arr);
}
}, [info]);
useEffect(() => {
if (addList && addList.length > 0) {
setAddRoleList([...addList]);
}
}, [addList]);
const handleSelect = (e, val) => {
list.forEach(item => {
if (item.relatedRoleCode === val) {
item.related = e.target.checked;
}
});
setList([...list]);
valueCallback(list);
};
const handleRoleSelect = (e, val) => {
addRoleList.forEach(item => {
if (item.roleCode === val) {
item.related = e.target.checked;
}
});
setAddRoleList([...addRoleList]);
valueCallback(addRoleList);
};
return (
<div>
{nodeType === 3 || nodeType === 4 ? (
<>
<div className={styles.boxtitle}>
<span className={styles.boxspan}>关联角色</span>
</div>
<div className={styles.box}>
{/* <Checkbox>全选/反选</Checkbox> */}
{list &&
list.length > 0 &&
list.map(item => (
<div
key={item.relatedRoleCode}
className={styles.check}
title={item.relatedRoleName}
>
<Checkbox
checked={item.related}
onChange={e => {
handleSelect(e, item.relatedRoleCode);
}}
>
{item.relatedRoleName}
</Checkbox>
</div>
))}
</div>
</>
) : (
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
)}
{/* {
<div className={styles.box}>
{addRoleList &&
addRoleList.length > 0 &&
addRoleList.map(item => (
<div key={item.roleCode} className={styles.check}>
<Checkbox
checked={item.related}
onChange={e => {
handleRoleSelect(e, item.roleCode);
}}
>
{item.roleName}
</Checkbox>
</div>
))}
</div>
} */}
</div>
);
};
export default CheckList;