import React, { useEffect, useState } from 'react'; import { Modal, Checkbox, Spin } from 'antd'; import { RoleGroupList } from '@/services/messagemanage/messagemanage'; import { GetUserRelationListNew } from '@/services/userManage/api'; import styles from './RoleModal.less'; const CheckboxGroup = Checkbox.Group; const RoleModal = porps => { const { visible, rolCallBack, onCancel, selectValue } = porps; const [roleList, setRoleList] = useState([]); // 角色列表 const [isLoading, setIsLoading] = useState(false); useEffect(() => { if (visible) { setIsLoading(true); let hasCheckList = selectValue ? selectValue.split(',') : []; GetUserRelationListNew({ userID: 9999999 }).then(res => { setIsLoading(false); 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; // 全选样式 let arr = {}; let name = {}; let last = {}; options = item.roleList.map(val => { hasCheckList.forEach(ele => { if (val.roleID === ele) { checkedList.push(val.roleName); } }); return val.roleName; }); name = item.roleList.map(val => { hasCheckList.forEach(ele => { if (val.roleID === ele) { last[val.roleID] = val.roleName; } }); arr[val.roleID] = val.roleName; return arr; }); if (checkedList.length === options.length && checkedList.length > 0) { checkAll = true; } if (checkedList.length < options.length && checkedList.length > 0) { indeterminate = true; } return { options, checkedList, checkAll, name, last, arr, indeterminate, visibleTitle: item.visibleTitle, }; }); console.log(list, 'list'); setRoleList(list); } }); console.log(selectValue, 'selectValue'); } else { setRoleList([]); } }, [visible]); // 多选change事件 const onCheckAllChange = (e, index) => { let newCheckList = JSON.parse(JSON.stringify(roleList)); let aa = {}; if (e.target.checked) { newCheckList[index].options.map(j => { Object.keys(newCheckList[index].arr).forEach(i => { if (newCheckList[index].arr[i] == j) { aa[i] = j; } }); }); newCheckList[index].last = aa; } else { newCheckList[index].last = {}; } 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)); let aa = {}; list.map(j => { Object.keys(newCheckList[index].arr).forEach(i => { if (newCheckList[index].arr[i] == j) { aa[i] = j; } }); }); newCheckList[index].last = aa; 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 > <Spin spinning={isLoading}> <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> </Spin> </Modal> </div> ); }; export default RoleModal;