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('|') : []; console.log(hasCheckList, 'hasCheckList'); 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); }); } }); let list = roleListData.map(item => { let checkedList = []; // 已选 let options = []; // 数据源 let indeterminate = false; // 有选中但没全选样式 let checkAll = false; // 全选样式 options = item.roleList.map(val => { let value = JSON.stringify({ value: Number(val.roleID), label: val.roleName }); hasCheckList.forEach(ele => { if (value === ele) { checkedList.push(ele); } }); return value; }); // console.log(options, 'options'); 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}> {JSON.parse(val).label} </Checkbox> ))} </CheckboxGroup> </div> </div> ))} </div> </Modal> </div> ); }; export default RoleModal;