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
116
117
118
119
120
121
122
123
import React, { useEffect, useState } from 'react';
import { Modal, Checkbox } from 'antd';
import { RoleGroupList } from '@/services/messagemanage/messagemanage';
import styles from './RoleModal.less';
const CheckboxGroup = Checkbox.Group;
const RoleModal = porps => {
const { visible, rolCallBack, onCancel, selectValue } = porps;
const [roleList, setRoleList] = useState([]); // 角色列表
useEffect(() => {
if (visible) {
let hasCheckList = selectValue ? selectValue.split(',') : [];
RoleGroupList().then(res => {
if (res.code === 0) {
let roleListData = res.data.roleList;
// 给子角色分类放到外面来
roleListData.forEach((item, index) => {
if (item.child.length > 0) {
item.child.forEach((val, i) => {
val.visibleTitle = `${item.visibleTitle}(${val.visibleTitle})`;
roleListData.splice(index + 1 + i, 0, val);
});
}
});
console.log(roleListData, 'roleListData');
let list = roleListData.map(item => {
let checkedList = []; // 已选
let options = []; // 数据源
let indeterminate = false; // 有选中但没全选样式
let checkAll = false; // 全选样式
options = item.roleList.map(val => {
hasCheckList.forEach(ele => {
if (val.roleName === ele) {
checkedList.push(ele);
}
});
return val.roleName;
});
if (checkedList.length === options.length && checkedList.length > 0) {
checkAll = true;
}
if (checkedList.length < options.length && checkedList.length > 0) {
indeterminate = true;
}
return {
options,
checkedList,
checkAll,
indeterminate,
visibleTitle: item.visibleTitle,
};
});
console.log(list, 'list');
setRoleList(list);
}
});
console.log(selectValue, 'selectValue');
}
}, [visible]);
// 多选change事件
const onCheckAllChange = (e, index) => {
let newCheckList = JSON.parse(JSON.stringify(roleList));
newCheckList[index].checkedList = e.target.checked ? newCheckList[index].options : [];
newCheckList[index].indeterminate = false;
newCheckList[index].checkAll = e.target.checked;
setRoleList(newCheckList);
};
// 单选change事件
const onChange = (list, index) => {
let newCheckList = JSON.parse(JSON.stringify(roleList));
newCheckList[index].checkedList = list;
newCheckList[index].indeterminate =
!!list.length && list.length < newCheckList[index].options.length;
newCheckList[index].checkAll = list.length === newCheckList[index].options.length;
setRoleList(newCheckList);
};
return (
<div>
<Modal
title="选择推送人"
visible={visible}
onOk={() => rolCallBack(roleList)}
width="900px"
onCancel={onCancel}
maskClosable={false}
destroyOnClose
centered
>
<div className={styles.checkContainer}>
{roleList.map((item, index) => (
<div className={styles.checkContent} key={item.visibleTitle}>
<div className={styles.topCheckbox}>
<Checkbox
indeterminate={item.indeterminate}
onChange={e => onCheckAllChange(e, index)}
checked={item.checkAll}
>
{item.visibleTitle}
</Checkbox>
</div>
<div className={styles.bottomCheckbox}>
<CheckboxGroup
value={item.checkedList}
onChange={list => onChange(list, index)}
style={{ display: 'flex', flexWrap: 'wrap' }}
>
{item.options.map(val => (
<Checkbox key={val} value={val}>
{val}
</Checkbox>
))}
</CheckboxGroup>
</div>
</div>
))}
</div>
</Modal>
</div>
);
};
export default RoleModal;