import React, { useState, useCallback } from 'react'; import { Modal, Spin, Tabs, notification, message } from 'antd'; import { setUserRelation, setUserRelations, } from '@/services/userCenter/userManage/api'; import ListCardItem from '../../orgnazation/listCardItem'; const RelateRoleModal = props => { const { currentUser, currentSelectOrg, userIDs, visible, rolelist, stationlist, multiRelateRoles, onCancel, onSelect, loading, } = props; const { TabPane } = Tabs; const [roleValueList, setRoleValueList] = useState({}); // 勾选的角色列表 const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表 const getRoleValueCallback = useCallback((value, index) => { roleValueList[index] = value; setRoleValueList({ ...roleValueList }); }, []); const getStationValueCallback = useCallback((value, index) => { stationValueList[index] = value; setStationValueList({ ...stationValueList }); }, []); // 提交-关联角色 const submitRole = () => { setUserRelation( currentUser.userID, Object.keys(roleValueList) .map(k => roleValueList[k]) .flat(), Object.keys(stationValueList) .map(k => stationValueList[k]) .flat(), ) .then(res => { if (res.success) { onCancel(); // 跳转到新组织机构下的用户表 onSelect([`${currentUser.OUID}`]); // setExpandedKeys([`${currentUser.OUID}`]); notification.success({ message: '提交成功', duration: 2, }); } else { notification.error({ message: '提交失败', description: res.message, }); } }) .catch(err => { message.error(err); }); }; // 提交-批量关联角色 const submitRoles = () => { setUserRelations( userIDs, Object.keys(roleValueList) .map(k => roleValueList[k]) .flat() .toString(), Object.keys(stationValueList) .map(k => stationValueList[k]) .flat() .toString(), ) .then(res => { if (res.code === 0) { onCancel(); // 跳转到组织重新请求改机构下用户数据,查找用户时currentSelectOrg为空数组,不需要重新请求 if (currentSelectOrg.length !== 0) { onSelect([currentSelectOrg]); } notification.success({ message: '提交成功', duration: 2, }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { message.error(err); }); }; return ( <Modal title="关联角色" visible={visible} onOk={multiRelateRoles ? submitRoles : submitRole} onCancel={onCancel} okText="确认" cancelText="取消" width="920px" > <Spin spinning={loading} tip="loading"> <Tabs defaultActiveKey="1" style={{ marginTop: '-16px' }}> <TabPane tab="角色" key="1"> {visible && rolelist.map((role, index) => ( <ListCardItem itemid={index} key={`item${index}key`} userList={role.roleList} OUName={role.visibleTitle} getValueCallback={getRoleValueCallback} /> ))} </TabPane> <TabPane tab="站点" key="2"> {visible && stationlist.map((station, index) => ( <ListCardItem itemid={index} key={`item${index}key`} userList={station.stationList} OUName={station.visibleTitle} getValueCallback={getStationValueCallback} /> ))} </TabPane> </Tabs> </Spin> </Modal> ); }; export default RelateRoleModal;