/* eslint-disable no-unused-expressions */ /* eslint-disable eqeqeq */ import React, { useState, useEffect, useRef } from 'react'; import { Tree, Table, Space, message, Modal, Input, notification, Tooltip, Card, Button, Spin, Dropdown, Menu, Popconfirm, Form, Radio, Pagination, } from 'antd'; import { UserOutlined, UserAddOutlined, UsergroupAddOutlined, EditOutlined, EditTwoTone, DeleteOutlined, IdcardOutlined, UnlockOutlined, ApartmentOutlined, StopOutlined, DoubleLeftOutlined, DoubleRightOutlined, DownOutlined, BorderlessTableOutlined, LockOutlined, PlusSquareFilled, EllipsisOutlined, PlusOutlined, SyncOutlined, ClusterOutlined, } from '@ant-design/icons'; import PageContainer from '@/components/BasePageContainer'; import voca from 'voca'; import zhCN from 'antd/es/locale/zh_CN'; import { addToOrg, addToOrgs, getOneOUUserListNew, getUserRelationList, getUserTree, // eslint-disable-next-line import/named deleteUser as postDeleteUser, setUserState as postSetUserState, multiDeleteUsers, setOrgArea, getOrgArea, GetMapSetByGroupID, GetOUTreeNew, GetUserRelationListNew, GetUserByKeyNew, UserStateOUNew, JumpToAnotherOUNew, DeleteUserNew, loadAllUserRole, DragGroup, GetAllSite, SetGroupManager, } from '@/services/userManage/api'; import { AddUserAuthSetting, GetUserAuthSet } from '@/services/database/api'; import TreeComponents from '@/components/ExpendableTree'; import classnames from 'classnames'; import DraggleLayout from 'components/DraggleLayout'; import AddUserModal from './AddUserModal'; import AddSubOrgModal from './AddSubOrgModal'; import EditOrgModal from './EditOrgModal'; import DeleteOrgModal from './DeleteOrgModal'; import RelateRoleModal from './RelateRoleModal'; import EditUserModal from './EditUserModal'; import ChangePasswordModal from './ChangePasswordModal'; import MapScopeEditModal from '@/components/MapScope'; import AuthModal from './AuthModal'; import styles from './UserManage.less'; import { createGuid } from '@/utils/transformUtil'; const TdCell = props => { // onMouseEnter, onMouseLeave在数据量多的时候,会严重阻塞表格单元格渲染,严重影响性能 const { onMouseEnter, onMouseLeave, ...restProps } = props; return <td {...restProps} />; }; const UserManage = () => { const { TreeNode } = Tree; const [form] = Form.useForm(); const { Item } = Form; const [selectValue, setSelctValue] = useState(); // 用户鉴权 const [width, setWidth] = useState(50); const [treeLoading, setTreeLoading] = useState(false); const [tableLoading, setTableLoading] = useState(false); const [loading, setLoading] = useState(true); const [currentOrgOperate, setCurrentOrgOperate] = useState(false); // 是否禁用当前机构操作 const [multiOperate, setMultiOperate] = useState(true); // 是否禁用用户批量操作 const [multiOperateButtonType, setMultiOperateButtonType] = useState(''); // 更改批量操作按钮样式 const [treeData, setTreeData] = useState([]); // 用户机构树 const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份,用于更改机构 const [treeState, setTreeState] = useState(true); // 树第一次加载 const [treeVisible, setTreeVisible] = useState(true); // 树是否可见 const [tableData, setTableData] = useState([]); // 用户表 const [selectColor, setSelectColor] = useState({}); // 当前选中颜色,操作时设置 const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选 const [searchWord, setSearchWord] = useState(''); // 关键字 const [currentSelectOrg1, setCurrentSelectOrg1] = useState('-1'); const [currentSelectOrg, setCurrentSelectOrg] = useState('-1'); // 左侧机构树-选中组织,字符串类型默认全部机构'-1',注意用户表中的OUID是数字 const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-原先选中组织 const [showSearchStyle, setShowSearchStyle] = useState(false); // 是否显示模糊查询样式 /** ***Modal弹框,是否可视**** */ const [userVisible, setUserVisible] = useState(false); // 添加用户 const [addOrgVisible, setAddOrgVisible] = useState(false); // 添加机构 const [editOrgVisible, setEditOrgVisible] = useState(false); // 编辑机构 const [deleteOrgVisible, setDeleteOrgVisible] = useState(false); // 删除机构 const [editOrgExtentVisible, setEditOrgExtentVisible] = useState(false); // 删除机构 const [roleVisible, setRoleVisible] = useState(false); // 关联角色 const [changeOrgVisible, setChangeOrgVisible] = useState(false); // 更改机构 const [passwordVisible, setPasswordVisible] = useState(false); // 修改密码 const [editUserVisible, setEditUserVisible] = useState(false); // 编辑用户 // const [freezeUserVisible, setFreezeUserVisible] = useState(false); // 冻结用户 const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 删除用户 const [authUserVisible, setAuthUserVisible] = useState(false); // 鉴权用户 const [orgTitle, setOrgTitle] = useState('当前机构'); // 弹框标题 const [groupId, setGroupId] = useState(); const [orgTitle1, setOrgTitle1] = useState('当前机构'); // 弹框标题 const [description, setDescription] = useState(''); // 机构描述信息 const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置 const [tableLength, setTableLength] = useState(0); // 当前机构用户总数 const [orgID, setOrgID] = useState(); // 当前选择的机构ID const [newOrgID, setNewOrgID] = useState(); // 更改机构新选择的ID const [currentUser, setCurrentUser] = useState({}); // 当前用户 const [mult, setMult] = useState(''); // 判断是否是批量关联 const [multiRoleList, setMultiRoleList] = useState([]); const [multistationList, setMultiStationList] = useState([]); const [userIDs, setUserIDs] = useState(''); // 批量删除的用户 const [orgIDs, setOrgIDs] = useState(''); // 批量操作的机构 const [multiDelete, setMultiDelete] = useState(false); // 是否批量删除用户 const [multiChangeOrgs, setMultiChangeOrgs] = useState(false); // 是否批量更改机构 const [multiRelateRoles, setMultiRelateRoles] = useState(false); // 是否批量更改机构 const [rolelist, setRolelist] = useState([]); // 角色列表 const [stationlist, setStationlist] = useState([]); // 站点列表 const [orgAreas, setOrgAreas] = useState([]); const [currentOrgArea, setCurrentOrgArea] = useState(''); const [currentOrgDistinct, setCurrentOrgDistinct] = useState(''); const [saveExtentFlag, setSaveExtentFlag] = useState(0); const [filteredValue, setFilteredValue] = useState([]); const [keep1, setKeep1] = useState([4]); // 存储树选择 const [id, setId] = useState(''); const { Search } = Input; const [hoverItemIndex, setHoverItemIndex] = useState(0); // hover流程索引 const [keepTree, setKeepTree] = useState([]); // 保存所有一级id用于控制只展开一项一级菜单 const [expendKey, setExpendKey] = useState(''); // 保存默认展开项 const [expendKeyOrg, setExpendKeyOrg] = useState(''); // 保存默认展开项 const [menuID, setMenuID] = useState(''); // 选中的树IDs const [keepId, setKeepId] = useState(''); const [flag, setFlag] = useState(1); // 刷新标志 const userContainer = useRef(); const flagRef = useRef(1); const [searchWordOrg, setSearchWordOrg] = useState(''); const [keepDataList, setKeepDataList] = useState([]); const [siteList, setSiteList] = useState([]); const setRowClassName = record => record.userId === selectColor.userId ? styles.clickRowStyle : ''; const [demoVisivle, setDemoVisible] = useState(false); const [searchTreeValue, setSearchTreeValue] = useState(''); const [total, setTotal] = useState(0); const [pageSize, setPageSize] = useState(20); const [currentPage, setCurrentPage] = useState(1); const [treeDataTotal, setTreeDataTotal] = useState(); // 用户表列名 const columns = [ { title: '登录名', dataIndex: 'loginName', key: 'loginName', // width: 100, // fixed: 'left', render: item => searchStyle(item), }, { title: '用户姓名', dataIndex: 'userName', key: 'userName', // width: 100, render: item => searchStyle(item), }, { title: '所在机构', dataIndex: 'groupName', key: 'groupName', // width: 150, ellipsis: true, filters: orgFilters, filteredValue, onFilter: (value, record) => record.groupName === value, }, { title: '手机号码', dataIndex: 'phone', key: 'phone', // width: 150, ellipsis: true, render: text => { if (text) { return searchStyle(text); } return <span>未绑定</span>; }, }, // { // title: '钉钉账户', // dataIndex: 'ddid', // key: 'ddid', // // width: 150, // render: record => { // if (record) { // return ( // <Tooltip title={record}> // <span style={{ color: '#50aefc', cursor: 'pointer' }}>已绑定</span> // </Tooltip> // ); // } // return <span>未绑定</span>; // }, // }, // { // title: '微信账户', // dataIndex: 'wxid', // key: 'wxid', // // width: 140, // render: record => { // if (record) { // return ( // <Tooltip title={record}> // <span style={{ color: '#50aefc', cursor: 'pointer' }}>已绑定</span> // </Tooltip> // ); // } // return <span>未绑定</span>; // }, // }, { title: '权限设置', key: 'action', // fixed: 'right', width: 150, align: 'center', render: record => ( <Space size="middle"> <Tooltip title="关联权限"> <IdcardOutlined onClick={() => relateRole(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="更改机构"> <ApartmentOutlined onClick={() => changeOrg(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="设置为主管"> <Popconfirm placement="bottomRight" title={ <p> 确定将用户 <span className={styles.redText}>{voca.stripTags(record.loginName)}</span> 设置为{orgTitle}主管吗? </p> } okText="确认" cancelText="取消" onConfirm={() => { console.log(groupId, 'groupId'); SetGroupManager({ groupId, userId: record.userId }).then(res => { if (res.code === 0) { // eslint-disable-next-line no-unused-expressions currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]); } else { notification.error({ message: '设置失败', description: res.msg, }); } }); }} > <UserOutlined style={{ fontSize: '16px', color: record.isManager ? '#FAAD14' : '#1890FF' }} /> </Popconfirm> </Tooltip> </Space> ), }, { title: '操作', key: 'action', // fixed: 'right', width: 100, align: 'center', render: record => ( <Space size="middle"> {/* <Tooltip title="关联权限"> <IdcardOutlined onClick={() => relateRole(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="更改机构"> <ApartmentOutlined onClick={() => changeOrg(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> <Tooltip title="设置为主管"> <Popconfirm placement="bottomRight" title={ <p> 确定将用户 <span className={styles.redText}>{voca.stripTags(record.loginName)}</span> 设置为{orgTitle}主管吗? </p> } okText="确认" cancelText="取消" onConfirm={() => { console.log(groupId, 'groupId'); SetGroupManager({ groupId, userId: record.userId }).then(res => { if (res.code === 0) { // eslint-disable-next-line no-unused-expressions currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]); } else { notification.error({ message: '设置失败', description: res.msg, }); } }); }} > <UserOutlined style={{ fontSize: '16px', color: record.isManager ? '#FAAD14' : '#1890FF' }} /> </Popconfirm> </Tooltip> */} {/* <Tooltip title="修改密码"> <UnlockOutlined onClick={() => changePassword(record)} style={{ fontSize: '16px', color: '#1890FF' }} /> </Tooltip> */} {/* <Tooltip title="编辑用户"> <EditTwoTone onClick={() => editUser(record)} style={{ fontSize: '16px' }} /> </Tooltip> */} {(record.state == 0 || record.state == null) && ( <> {record.loginName == 'panda' || record.loginName == 'admin' ? ( <StopOutlined style={{ fontSize: '16px', color: '#1890ff' }} disabled /> ) : ( <Tooltip title="冻结用户"> <Popconfirm placement="bottomRight" title={ <p> 即将冻结用户{' '} <span className={styles.redText}>{voca.stripTags(record.loginName)}</span> ,是否确认冻结? </p> } okText="确认" cancelText="取消" onConfirm={() => freezeUser(record)} > <StopOutlined style={{ fontSize: '16px', color: '#1890ff' }} /> </Popconfirm> </Tooltip> )} </> )} {record.state == 1 && ( <> {console.log(record.state, 'record.state1')} <Tooltip title="解冻用户"> <Popconfirm placement="bottomRight" title={ <p> 即将解冻用户 <span className={styles.redText}>{voca.stripTags(record.loginName)}</span> ,是否确认解冻? </p> } okText="确认" cancelText="取消" onConfirm={() => freezeUser(record)} > <StopOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> </Tooltip> </> )} {/* <Tooltip title="用户鉴权"> <Popconfirm placement="bottomRight" title={ <div style={{ width: '130px' }}> <Form form={form}> <Item> <Radio.Group value={selectValue} onChange={onTypeChange}> <Space direction="vertical"> <Radio value={0}>访客</Radio> <Radio value={1}>普通用户</Radio> <Radio value={2}>管理员</Radio> <Radio value={3}>超级管理员</Radio> </Space> </Radio.Group> </Item> </Form> </div> } okText="确认" cancelText="取消" onConfirm={() => authUser(record)} > <LockOutlined onClick={() => jianquan(record)} style={{ fontSize: '16px', color: '#1890ff' }} /> </Popconfirm> </Tooltip> */} {record.loginName == 'panda' || record.loginName == 'admin' ? ( <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} disabled /> ) : ( <Popconfirm placement="bottomRight" title={ <p> 即将删除用户{' '} <span className={styles.redText}>{voca.stripTags(record.loginName)}</span> ,是否确认删除? </p> } // title={`确认删除用户${currentUser}`} okText="确认" cancelText="取消" onConfirm={() => deleteUser(record)} > <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} /> </Popconfirm> )} </Space> ), }, ]; useEffect(() => { setExpendKey(menuID); console.log(expendKey); }, [menuID]); // 获取用户机构树 useEffect(() => { window.addEventListener('resize', resizeListener); GetAllSite().then(res => { if (res.code === 0) { setSiteList(res.data.map(item => ({ value: item.GroupId, label: item.GroupName }))); } }); updateTrees(); return () => { window.removeEventListener('resize', resizeListener); }; }, []); // 更新获取初始范围 useEffect(() => { getOrgArea().then(res => { if (res.msg === 'Ok') { console.log(res); setOrgAreas(res.Results); } }); }, [saveExtentFlag]); useEffect(() => { if (!changeOrgVisible) { setExpendKeyOrg(''); setSearchWordOrg(''); GetOUTreeNew({ keyword: '' }) .then(newres => { if (newres.code === 0) { let res = newres.data.list; setTreeDataCopy(res); } }) .catch(err => { setTreeLoading(false); message.error(err); }); } }, [changeOrgVisible]); const resizeListener = () => { flagRef.current += 1; setFlag(flagRef.current); }; // 模糊查询匹配的样式 const searchStyle = val => { if (!val) { return val; } let n; if (showSearchStyle) { n = val.replace(new RegExp(searchWord, 'g'), `<span style='color:red'>${searchWord}</span>`); } else { n = val; } return <div dangerouslySetInnerHTML={{ __html: n }} />; }; // 获取搜索框的值 const handleSearch = e => { setSearchWord(e.target.value); }; // 获取搜索框的值 const handleSearchOrg = e => { setSearchWordOrg(e.target.value); }; const submitSearch = () => { GetOUTreeNew({ keyword: searchWordOrg }) .then(newres => { if (newres.code === 0) { let res = newres.data.list; setTreeDataCopy(res); console.log(res); let aa = []; res.map(i => { if (i.children.length > 0) { aa.push(i.id); } console.log(i.id); aa = i.id; }); setExpendKeyOrg(aa.toString()); } else { notification.error({ message: '获取失败', // eslint-disable-next-line no-undef description: res.message, }); } }) .catch(err => { setTreeLoading(false); message.error(err); }); }; // 复选框 const rowSelection = { selectedRowKeys, onChange: (RowKeys, Rows) => { console.log(RowKeys); console.log(Rows); setSelectedRowKeys(RowKeys); getCheckList(RowKeys); setUserIDs(RowKeys.toString()); // 数组转字符串,逗号连接 setOrgIDs(Rows.map(item => item.groupId).toString()); // 选中行数大于0时设置批量操作可行 if (RowKeys.length > 0) { setSelectColor({}); setMultiOperate(false); setMultiOperateButtonType('primary'); } else { setMultiOperate(true); setMultiOperateButtonType('default'); } }, }; // 渲染机构树 const mapTree = org => { const haveChildren = Array.isArray(org.children) && org.children.length > 0; const indexsearch = org.text.indexOf(searchTreeValue); const beforeStr = org.text.substring(0, indexsearch); const afterStr = org.text.slice(indexsearch + searchTreeValue.length); return { title: ( <div className={styles.title1}> <span className={styles.titleText}> {org.children.length == 0 ? ( <ApartmentOutlined style={{ fontSize: '14px', color: '#1890FF', verticalAlign: 'middle', marginTop: '-3px', }} /> ) : ( <span /> )} {org.text.includes(searchTreeValue) && searchTreeValue != '' ? ( <span> {beforeStr} <span className={styles.titleSearch}>{searchTreeValue}</span> {afterStr} </span> ) : ( <span>{org.text}</span> )} </span> <span className={classnames({ [styles.tip1]: true, [styles.listHover]: org === hoverItemIndex, })} onMouseEnter={() => { setHoverItemIndex(org); }} onMouseLeave={() => { setHoverItemIndex(''); }} > <Tooltip title="添加用户" className={styles.fs1}> <UserAddOutlined style={{ marginLeft: 20, lineHeight: '24px' }} onClick={e => { e.stopPropagation(); addUser(); }} onMouseEnter={e => { setOrgID(org); setOrgTitle1(org.text); console.log(org); }} /> </Tooltip> <Dropdown overlay={orgButtonMenu1}> <EllipsisOutlined style={{ marginLeft: 10, fontSize: '20px', lineHeight: '24px' }} onClick={e => e.stopPropagation()} onMouseEnter={e => { setOrgID(org); setOrgTitle1(org.text); getDescription(org.id); // getMapSetByGroupID(org.id); setCurrentSelectOrg1(org.id); setId(org.text); console.log(org); }} /> </Dropdown> </span> </div> ), key: org.id, // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作 children: haveChildren ? org.children.map(i => mapTree(i)) : [], }; }; const mapTree1 = org => { const haveChildren = Array.isArray(org.children) && org.children.length > 0; return { title: org.text, key: org.id, // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作 children: haveChildren ? org.children.map(i => mapTree1(i)) : [], }; }; // 重新渲染树 const updateTrees = e => { setTreeLoading(true); // getUserTree(-1, -1) // .then(res => { // if (res.length > 0) { // setTreeLoading(false); // setTreeData(res); // setTreeDataCopy(res); // // 第一次加载,默认选择第一个组织 // if (treeState) { // onSelect([res[0].id], false); // setTreeState(false); // } // } else { // setTreeLoading(false); // notification.error({ // message: '获取失败', // description: res.message, // }); // } // }) // .catch(err => { // setTreeLoading(false); // message.error(err); // }); GetOUTreeNew({ groupId: -1, keyword: e }) .then(newres => { setTreeLoading(false); if (newres.code === 0) { let res = newres.data.list; setTreeDataTotal(newres.data.count); console.log(res); setTreeData(res); // setTreeDataCopy(res); let aa = []; res.forEach(i => { aa.push(i.id); }); setKeepTree(aa); // 第一次加载,默认选择第一个组织 if (treeState) { onSelect([res[0].id]); setTreeState(false); } } else { setTreeLoading(false); notification.error({ message: '获取失败', // eslint-disable-next-line no-undef description: res.message, }); } }) .catch(err => { setTreeLoading(false); message.error(err); }); }; const updateTrees1 = e => { console.log(e); setTreeLoading(true); GetOUTreeNew({ groupId: -1 }) .then(newres => { if (newres.code === 0) { let res = newres.data.list; setTreeDataTotal(newres.data.count); console.log(res); setTreeLoading(false); setTreeData(res); setTreeDataCopy(res); let aa = []; res.forEach(i => { aa.push(i.id); }); setKeepTree(aa); console.log(e); setMenuID(e.toString()); setExpendKey(e); } else { setTreeLoading(false); notification.error({ message: '获取失败', // eslint-disable-next-line no-undef description: res.message, }); } }) .catch(err => { setTreeLoading(false); message.error(err); }); }; // 点击树节点,获取当前机构下所有用户 const onSelect = (props, e, size, index) => { if (e) { props[0] = e.node.key; } else { props[0] = props.toString(); } setKeep1(props); setTableLoading(true); if (!props[0]) { setCurrentSelectOrg(currentSelectOrg); setCurrentSelectOrg1(currentSelectOrg); } else { setCurrentSelectOrg(props[0]); setCurrentSelectOrg1(props[0]); } GetMapSetByGroupID({ groupID: props[0], }).then(res => { if (res.code === 0) { console.log(res); if (res.code.MapRange != null) { setCurrentOrgArea(res.data.MapRange); setCurrentOrgDistinct(res.data.AreeName); } } }); setOrgID(props[0] || currentSelectOrg); // 树节点变化(即props不为空)时才请求,避免重复请求 if (props[0]) { console.log(props[0]); setMenuID(props[0]); // eslint-disable-next-line no-console setGroupId(props[0]); let sizedata = ''; let currentData = ''; if (currentSelectOrg !== props[0]) { setPageSize(20); setCurrentPage(1); sizedata = size || 20; currentData = index || 1; } else { // 分页查询 sizedata = size || pageSize; currentData = index || currentPage; } getOneOUUserListNew(props[0] || currentSelectOrg, sizedata, currentData) .then(res => { setCurrentOrgOperate(false); // 重置禁用当前机构操作为false setMultiOperate(true); // 重新禁止用户批量操作 setSelectedRowKeys([]); // 重置选中用户数 if (res.code === 0) { setTotal(res.data.count); setTableLoading(false); setSearchWord(''); // 搜索框置空 setOrgTitle(res.data.GroupName); // 返回用户表数据结构处理,扁平化 let temp = res.data.data; // 设置过滤字段 let arr = temp.map(item => item.groupName); arr = arr.filter((value, index) => arr.indexOf(value) === index); setOrgFilters(arr.map(item => ({ text: item, value: item }))); setTableLength(temp.length); let datalist = []; const table = temp.map((item, index) => { if (item.loginName == 'panda' || item.loginName == 'admin') { datalist.push(item.userId); } item.key = index; return item; }); setKeepDataList(datalist); setShowSearchStyle(false); console.log(table); setTableData(table); } else { setTableLoading(false); // notification.error({ // message: '获取失败', // description: res.msg, // }); } }) .catch(err => { setTableLoading(false); message.error(err); }); } else { setTableLoading(false); } }; // // 添加用户刷新表数据 // const onSelect1 = () => { // console.log(orgID); // setTableLoading(true); // // eslint-disable-next-line no-console // getOneOUUserListNew(orgID.id || currentSelectOrg, pageSize, currentPage) // .then(res => { // setCurrentOrgOperate(false); // 重置禁用当前机构操作为false // setMultiOperate(true); // 重新禁止用户批量操作 // setSelectedRowKeys([]); // 重置选中用户数 // if (res.code === 0) { // setTableLoading(false); // setSearchWord(''); // 搜索框置空 // setOrgTitle(res.data.GroupName); // // setDescription(res.data.Description); // // 返回用户表数据结构处理,扁平化 // let temp = res.data.data; // // const temp = flatten(getUsers(res.data)); // // 设置过滤字段 // let arr = temp.map(item => item.groupName); // arr = arr.filter((value, index) => arr.indexOf(value) === index); // setOrgFilters(arr.map(item => ({ text: item, value: item }))); // setTableLength(temp.length); // const table = temp.map((item, index) => { // item.key = index; // return item; // }); // setShowSearchStyle(false); // setTableData(table); // } else { // setTableLoading(false); // } // }) // .catch(err => { // setTableLoading(false); // message.error(err); // }); // }; const getDescription = e => { getOneOUUserListNew(e, pageSize, currentPage).then(res => { if (res.code === 0) { setDescription(res.data.Description); } }); }; const getMapSetByGroupID = e => { GetMapSetByGroupID({ groupID: e, }).then(res => { if (res.code === 0) { console.log(res); setCurrentOrgArea(res.data.MapRange); setCurrentOrgDistinct(res.data.AreeName); } }); }; // 返回用户表数据结构处理,扁平化 // const getUsers = orgObj => { // let result = orgObj.Users; // result.map(item => { // item.OUID = orgObj.GroupId; // item.OUName = orgObj.GroupName; // return item; // }); // if (orgObj.Childs.length > 0) result = [...result, ...orgObj.Childs.map(o => getUsers(o))]; // return result; // }; const flatten = arr => { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr; }; // 添加用户 const addUser = e => { setUserVisible(true); }; // 添加顶级机构 const addOrg = () => { setAddOrgVisible(true); setOrgID('-1'); }; // 添加下级机构 const addSubOrg = e => { setAddOrgVisible(true); }; // 编辑机构 const editOrg = () => { setEditOrgVisible(true); }; // 删除机构 const deleteOrg = () => { setDeleteOrgVisible(true); console.log(orgID); console.log(keep1); if (orgID.id == keep1) { setTreeState(true); } else { setTreeState(false); } }; // 编辑机构范围 const EditOrgScope = () => { setEditOrgExtentVisible(true); }; // 在currentUser变化后获取角色列表 // useEffect(() => { // if (currentUser && currentUser.userId) { // getRoleList(); // } // }, [currentUser]); /** ***用户批量操作****** */ // 关联角色 const relateRoles = () => { setMult('Yes'); getEmptyRoleList(); // getCheckList() setRoleVisible(true); setMultiRelateRoles(true); }; // 批量更改机构 const changeOrgs = () => { setChangeOrgVisible(true); setMultiChangeOrgs(true); }; // 删除用户 const deleteUsers = () => { setDeleteUserVisible(true); setMultiDelete(true); }; /** ***右侧表格相关操作****** */ // 关联角色 const relateRole = record => { // getEmptyRoleList(record.userId); setMult('No'); console.log(record); getRoleList(record); setRoleVisible(true); setCurrentUser(record); setSelectColor(record); }; // 更改机构 const changeOrg = record => { setChangeOrgVisible(true); setMultiChangeOrgs(false); setCurrentUser(record); setSelectColor(record); setCurrentSelectOldOrg(record.groupId); }; // 修改密码 const changePassword = record => { setPasswordVisible(true); setCurrentUser(record); setSelectColor(record); }; // 编辑用户 const editUser = record => { setEditUserVisible(true); setCurrentUser(record); setSelectColor(record); }; // 冻结用户 const freezeUser = record => { console.log(currentUser); // setFreezeUserVisible(true); setCurrentUser(record); setSelectColor(record); let state = ''; console.log(record); if (record.state === '0' || record.state === null) { state = '1'; } else { state = '0'; } UserStateOUNew({ ouid: record.userId }) .then(res => { if (res.code === 0) { // 重新获取用户表 // eslint-disable-next-line no-unused-expressions currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]); notification.success({ message: '提交成功', duration: 2, }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { setTableLoading(false); message.error(err); }); }; // 删除用户 const deleteUser = record => { console.log(record.userName); setCurrentUser(record.userName); setSelectColor(record); DeleteUserNew({ userId: record.userId, }) .then(res => { if (res.code === 0) { notification.success({ message: '提交成功', duration: 2, }); // eslint-disable-next-line no-unused-expressions currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { setTableLoading(false); message.error(err); }); }; // 用户鉴权 // useEffect(() => { // currentUser.userId // GetUserAuthSet({ // UserId: currentUser.userId // }).then( // res => { // if(res.code == 0){ // setSelctValue(res.data) // console.log(selectValue); // console.log(res.data); // } // } // ) // }, [currentUser]) const jianquan = record => { GetUserAuthSet({ UserId: record.userId, }).then(res => { if (res.code === 0) { setSelctValue(res.data); console.log(res.data); } }); }; const onTypeChange = value => { setSelctValue(value.target.value); }; const authUser = record => { setCurrentUser(record); console.log(selectValue); AddUserAuthSetting({ userId: record.userId, userLevel: selectValue, }).then(res => { if (res.code === 0) { message.info('提交成功'); } }); }; // 查找用户 const submitSearchUser = () => { // if (!searchWord || searchWord.trim(' ').length == 0) { // message.warning('请输入搜索内容'); // return; // } setTableLoading(true); let data = searchWord != '' ? { key: searchWord } : ''; GetUserByKeyNew(data) .then(res => { setTableLoading(false); if (res.code === 0) { setSelectedRowKeys([]); // 重置选中用户数 setCurrentOrgOperate(true); // 禁止当前机构操作 setMultiOperate(true); // 禁用批量操作 setOrgTitle('全部机构搜索结果'); // 设置表头 setCurrentSelectOrg('-1'); // 清空选中机构 console.log(res.data); setShowSearchStyle(true); setTableData(res.data); setTableLength(res.data.length); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }) .catch(err => { message.error(err); }); }; /** ***表单提交相关操作****** */ // 根据当前 userId 获取用户关联角色 const getRoleList = e => { setLoading(true); GetUserRelationListNew({ userId: e.userId }) .then(res => { console.log(111); if (res.code === 0) { const { roleList, stationList } = res.data; console.log(roleList); setRolelist(roleList); setStationlist(stationList); setLoading(false); } else { console.log(res); setLoading(false); } }) .catch(err => { setLoading(false); setTableLoading(false); message.error(err); }); }; // 获取全部未勾选的角色列表与站点列表 const getEmptyRoleList = () => { setLoading(true); GetUserRelationListNew({ userId: 0 }) .then(res => { console.log(222); if (res.code === 0) { const { roleList, stationList } = res.data; setRolelist(roleList); setStationlist(stationList); setLoading(false); } else { console.log(res.msg); setLoading(false); } }) .catch(err => { setLoading(false); setTableLoading(false); message.error(err); }); }; const getCheckList = e => { console.log(e); let aa = []; let bb = []; loadAllUserRole(e).then(res => { if (res.code === 0) { if (res.data.roleList !== undefined) { // eslint-disable-next-line array-callback-return Object.keys(res.data.roleList).map((item, index) => { aa.push(item); }); } if (res.data.siteList !== undefined) { // eslint-disable-next-line array-callback-return Object.keys(res.data.siteList).map((item1, index1) => { bb.push(item1); }); } console.log(aa); console.log(bb); setMultiRoleList(aa); setMultiStationList(bb); } }); }; // 提交-更改机构 const submitChangeOrg = () => { // addToOrg(currentUser.userId, currentUser.OUID, newOrgID) // .then(res => { // if (res.success) { // setChangeOrgVisible(false); // // 跳转到新组织机构下的用户表 // onSelect([newOrgID]); // // setExpandedKeys([`${newOrgID}`]); // notification.success({ // message: '提交成功', // duration: 2, // }); // } else { // notification.error({ // message: '提交失败', // description: res.message, // }); // } // }) // .catch(err => { // message.error(err); // }); console.log(currentUser); JumpToAnotherOUNew({ userId: currentUser.userId, oldOUID: currentUser.groupId, newOUID: newOrgID, }) .then(res => { if (res.code === 0) { setChangeOrgVisible(false); // 跳转到新组织机构下的用户表 onSelect([newOrgID]); // setExpandedKeys([`${newOrgID}`]); notification.success({ message: '提交成功', duration: 2, }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { message.error(err); }); }; // 提交-批量更改机构 const submitChangeOrgs = () => addToOrgs(userIDs, orgIDs, newOrgID) .then(res => { if (res.code === 0) { setChangeOrgVisible(false); // 跳转到新组织机构下的用户表 const temp = orgIDs.split(','); // 批量更改机构成功后设置老的orgIDs为全部是newOrgID的数组,并转字符串 setOrgIDs(temp.map(() => newOrgID).toString()); onSelect([newOrgID]); notification.success({ message: '提交成功', duration: 2, }); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { message.error(err); }); // 提交-冻结用户 // const submitFreezeUser = () => { // let state = ''; // if (currentUser.state === '0' || currentUser.state === null) { // state = '1'; // } else { // state = '0'; // } // // postSetUserState(currentUser.userId, state) // // .then(res => { // // if (res.success) { // // setFreezeUserVisible(false); // // // 重新获取用户表 // // // eslint-disable-next-line no-unused-expressions // // currentSelectOrg === '-1' // // ? submitSearchUser() // // : onSelect([currentSelectOrg]); // // notification.success({ // // message: '提交成功', // // duration: 2, // // }); // // } else { // // notification.error({ // // message: '提交失败', // // description: res.message, // // }); // // } // // }) // // .catch(err => { // // setTableLoading(false); // // message.error(err); // // }); // UserStateOUNew({ ouid: currentUser.userId, state }) // .then(res => { // if (res.code === 0) { // // setFreezeUserVisible(false); // // 重新获取用户表 // // eslint-disable-next-line no-unused-expressions // currentSelectOrg === '-1' // ? submitSearchUser() // : onSelect([currentSelectOrg]); // notification.success({ // message: '提交成功', // duration: 2, // }); // } else { // notification.error({ // message: '提交失败', // description: res.msg, // }); // } // }) // .catch(err => { // setTableLoading(false); // message.error(err); // }); // }; // 提交-删除用户 const submitDeleteUser = () => { DeleteUserNew({ userId: currentUser.userId, }) .then(res => { if (res.code === 0) { notification.success({ message: '提交成功', duration: 2, }); // eslint-disable-next-line no-unused-expressions currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { setTableLoading(false); message.error(err); }); }; // 提交-批量删除用户 const submitDeleteUsers = () => { let data = []; keepDataList.length > 0 && keepDataList.map(i => { let aa = userIDs.split(',').indexOf(i); console.log(aa); if (aa !== -1) { data.push(aa); } }); console.log(data); if (data.length > 0) { notification.error({ message: '操作失败', description: '选中项包含不可删除的用户panda或admin', }); } else { multiDeleteUsers(userIDs) .then(res => { if (res.code === 0) { setDeleteUserVisible(false); notification.success({ message: '提交成功', duration: 2, }); // 重新获取用户表,查找用户时currentSelectOrg为'-1',无需跳转 // eslint-disable-next-line no-unused-expressions currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]); } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { setTableLoading(false); message.error(err); }); } }; // 重置默认第一个 const handleReset = () => { GetOUTreeNew({ groupId: -1 }) .then(newres => { if (newres.code === 0) { let res = newres.data.list; setTreeLoading(false); setSearchWord(''); setFilteredValue([]); // 第一次加载,默认选择第一个组织 onSelect([res[0].id], false); } else { setTreeLoading(false); notification.error({ message: '获取失败', // eslint-disable-next-line no-undef description: res.message, }); } }) .catch(err => { setTreeLoading(false); message.error(err); }); }; const onChangeInput = filters => { setFilteredValue(filters.OUName); }; // 更改机构范围 const submitExtent = (extent, areaName, flags) => { setTreeLoading(true); console.log(extent); console.log(areaName); console.log(flags); console.log(currentSelectOrg1); if (flags === 0) { setTreeLoading(false); notification.warn({ message: '提交失败', description: '请框选范围', }); } else if (extent) { setOrgArea({ OUID: currentSelectOrg1, areaName, extent, }).then(res => { if (res.msg === '') { setTreeLoading(false); setEditOrgExtentVisible(false); setSaveExtentFlag(saveExtentFlag + 1); message.success('机构范围设置成功!'); } else { setTreeLoading(false); setEditOrgExtentVisible(false); message.warn(res.Message); } }); } }; // 返回拖拽完毕后的信息 const loop = (datas, key, parentID, callback) => { for (let i = 0; i < datas.length; i++) { if (datas[i].id === key) { return callback(datas[i], i, datas, parentID); } if (datas[i].children) { loop(datas[i].children, key, datas[i].id, callback); } } }; // 树的拖拽 const handleDrop = infos => { console.log(infos); const dropKey = infos.node.key; const dragKey = infos.dragNode.key; const dropPos = infos.node.pos.split('-'); const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]); const datas = JSON.parse(JSON.stringify(treeData)); console.log(dropKey, 'dropKey'); console.log(dragKey, 'dragKey'); // 找到拖拽的元素 let dragObj; let dropObj; let parId; let dragList; // 保存拖拽到的节点信息 loop(datas, dropKey, -1, item => { dropObj = item; }); // 保存节点信息并删除节点 loop(datas, dragKey, -1, (item, index, arr) => { arr.splice(index, 1); dragObj = item; }); // 将节点插入到正确的位置 if (!infos.dropToGap) { console.log('33333333333'); dropObj.children = dropObj.children || []; // 在哪里插入,示例添加到头部,可以是随意位置 dropObj.children.unshift(dragObj); parId = dropObj.id; dragList = dropObj.children.map(val => val.id); } else { let ar; let i; loop(datas, dropKey, -1, (item, index, arr, parentID) => { ar = arr; i = index; parId = parentID; }); if (dropPosition === -1) { ar.splice(i, 0, dragObj); } else { ar.splice(i + 1, 0, dragObj); } dragList = ar.map(ele => ele.id); } DragGroup({ dragGroupType: 2, groupId: dragKey.toString(), groupList: dragList.map(item => item.toString()), parentId: parId.toString(), }).then(res => { if (res.code === 0) { updateTrees(); } else { message.error(res.msg); } }); }; const addChange = e => { e.domEvent.stopPropagation(); }; /** ***操作按钮**** */ // 机构操作 const orgButtonMenu = ( <Menu onClick={e => addChange(e)}> <Menu.Item key="1" onClick={addUser} icon={<UserAddOutlined style={{ marginTop: '5px' }} />}> 添加用户 </Menu.Item> </Menu> ); const orgButtonMenu1 = ( <Menu onClick={e => addChange(e)}> <Menu.Item key="2" onClick={addSubOrg} icon={<ClusterOutlined style={{ marginTop: '5px' }} />} > 添加下级机构 </Menu.Item> <Menu.Item key="3" onClick={editOrg} icon={<EditOutlined style={{ marginTop: '5px' }} />}> 编辑当前机构 </Menu.Item> <Menu.Item key="4" onClick={deleteOrg} icon={<DeleteOutlined style={{ marginTop: '5px' }} />}> 删除当前机构 </Menu.Item> {/* <Menu.Item key="5" onClick={EditOrgScope} icon={<BorderlessTableOutlined style={{ marginTop: '5px' }} />} > 编辑机构范围 </Menu.Item> */} </Menu> ); // 用户批量操作 const userButtonMenu = ( <Menu> <Menu.Item key="1" onClick={relateRoles} icon={<IdcardOutlined />}> 批量关联角色 </Menu.Item> <Menu.Item key="2" onClick={changeOrgs} icon={<ApartmentOutlined />}> 批量更改机构 </Menu.Item> <Menu.Item key="3" onClick={deleteUsers} icon={<DeleteOutlined />}> 批量删除用户 </Menu.Item> </Menu> ); const kee = () => { setUserVisible(false); }; const onSearch = value => { setSearchTreeValue(value); updateTrees(value); }; // 监听分页 const paginationChange = (page, pageSizes) => { setCurrentPage(page); setPageSize(pageSizes); onSelect([currentSelectOrg], '', pageSizes, page); }; return ( <PageContainer className={styles.userManageContainer}> <div className={styles.contentContainer}> {/* 左侧机构树 */} <Spin spinning={treeLoading} tip="loading..."> <Card style={{ overflowY: 'hidden', height: '100%' }} className={classnames({ [styles.orgContainer]: true, [styles.orgContainerHide]: !treeVisible, })} > <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }} > <span style={{ fontSize: '15px ', fontWeight: 'bold', marginLeft: '7px', }} > 机构列表({treeDataTotal}个) </span> <Tooltip title="添加顶级机构"> <PlusSquareFilled onClick={() => addOrg()} style={{ color: '#1890FF', fontSize: '25px', // marginLeft: '51%', }} /> </Tooltip> </div> <hr style={{ width: '97%', color: '#eeecec', marginLeft: '8px' }} /> <Search style={{ marginBottom: 8, width: '98%', marginLeft: '7px', }} placeholder="快速搜索机构" onSearch={onSearch} /> {searchTreeValue !== '' ? ( <> {treeData.length > 0 && ( <div style={{ height: '100%', overflowY: 'scroll' }}> <Tree showIcon="true" blockNode defaultExpandAll onSelect={onSelect} treeData={treeData.map(t => mapTree(t))} draggable onDrop={handleDrop} selectedKeys={[menuID]} keepTree={keepTree} /> </div> )} </> ) : ( <> {treeData.length > 0 && ( <div style={{ height: '100%', overflowY: 'scroll' }}> <TreeComponents showIcon="true" blockNode autoExpandParent onSelect={onSelect} treeData={treeData.map(t => mapTree(t))} draggable onDrop={handleDrop} selectedKeys={[menuID]} keepTree={keepTree} expandedKeys={expendKey} /> </div> )} </> )} </div> <div className={styles.switcher}> {treeVisible && ( <Tooltip title="隐藏机构列表"> <DoubleLeftOutlined onClick={() => setTreeVisible(false)} /> </Tooltip> )} {!treeVisible && ( <Tooltip title="显示机构列表"> <DoubleRightOutlined onClick={() => setTreeVisible(true)} /> </Tooltip> )} </div> </Card> </Spin> {/* 右侧用户表 */} <div ref={userContainer} className={classnames({ [styles.userContainer]: true, })} > <div style={{ height: '50px' }}> <span className={styles.title} title={`${orgTitle}(已选${selectedRowKeys.length}/共${tableLength}人)`} > {orgTitle}(已选{selectedRowKeys.length}/共{tableLength}人) </span> <span style={{ float: 'right', margin: '10px' }}> <Search style={{ width: 260, marginRight: '15px' }} placeholder="搜索登录名/用户姓名/手机号" onSearch={submitSearchUser} onChange={e => handleSearch(e)} enterButton value={searchWord} /> <Button style={{ marginRight: '15px' }} icon={<SyncOutlined />} onClick={handleReset}> 重置 </Button> <Dropdown overlay={userButtonMenu} disabled={multiOperate}> <Button type={multiOperateButtonType}> 用户批量操作 <DownOutlined /> </Button> </Dropdown> </span> </div> {userContainer.current && ( <Table // style={{ height: 'calc(100% -50px)' }} rowSelection={{ type: 'checkbox', ...rowSelection, }} rowClassName={setRowClassName} size="small" rowKey={record => record.userId} locale={zhCN} bordered columns={columns} dataSource={tableData} loading={tableLoading} scroll={{ x: 'max-content', y: `calc(${userContainer.current.clientHeight}px - 150px)`, }} pagination={false} onRow={record => ({ onDoubleClick: () => { editUser(record); }, })} onChange={onChangeInput} /> )} <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '10px', marginRight: '5px', }} > <Pagination total={total} showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`} defaultPageSize={pageSize} defaultCurrent={1} showSizeChanger pageSizeOptions={[10, 20, 40, 100]} current={currentPage} onChange={paginationChange} style={{ marginBottom: '10px' }} size="small" showQuickJumper /> </div> </div> {/* Modal弹框 */} {/* 添加用户 */} <AddUserModal visible={userVisible} orgID={orgID} orgTitle1={orgTitle1} onCancel={kee} updateTrees1={updateTrees1} siteList={siteList} onSelect={onSelect} /> {/* 添加下级机构 */} <AddSubOrgModal visible={addOrgVisible} orgTitle1={orgTitle1} orgID={orgID} onCancel={() => setAddOrgVisible(false)} onSelect={onSelect} updateTrees1={updateTrees1} /> {/* 编辑机构 */} <EditOrgModal visible={editOrgVisible} orgID={orgID} orgTitle1={orgTitle1} // description={description} onCancel={() => setEditOrgVisible(false)} updateTrees={updateTrees} /> {/* 删除机构 */} <DeleteOrgModal title="删除机构" visible={deleteOrgVisible} orgTitle={orgTitle1} orgID={orgID} updateTrees={updateTrees} onCancel={() => setDeleteOrgVisible(false)} /> {/* 关联角色 */} <RelateRoleModal currentUser={currentUser} userIDs={userIDs} currentSelectOrg={currentSelectOrg} visible={roleVisible} rolelist={rolelist} multiRoleList={multiRoleList} multistationList={multistationList} mult={mult} loading={loading} stationlist={stationlist} multiRelateRoles={multiRelateRoles} onSelect={onSelect} onCancel={() => { setRoleVisible(false); setMultiRelateRoles(false); }} /> {/* 更改机构 */} <Modal title="更改机构" visible={changeOrgVisible} onOk={multiChangeOrgs ? submitChangeOrgs : submitChangeOrg} maskClosable={false} onCancel={() => { setChangeOrgVisible(false); setMultiChangeOrgs(false); }} okText="确认" cancelText="取消" width="500px" > {/* <span>请选择要更改的目标机构:</span> */} <Search style={{ width: 260, marginBottom: '10px' }} placeholder="请输入机构名称" onSearch={submitSearch} onChange={e => handleSearchOrg(e)} enterButton value={searchWordOrg} /> <div style={{ height: '500px', overflowY: 'scroll' }}> {changeOrgVisible && treeDataCopy.length > 0 && ( <TreeComponents showIcon="true" showLine={{ showLeafIcon: false }} // defaultExpandAll // 未切换时原先的节点,注意要转字符串 selectedKeys={[`${currentSelectOldOrg}`]} onSelect={value => { setNewOrgID(value[0]); // 切换后选中的节点 setCurrentSelectOldOrg(value[0]); }} expandedKeys={expendKeyOrg} treeData={treeDataCopy.map(t => mapTree1(t))} /> )} </div> </Modal> {/* 修改密码 */} <ChangePasswordModal visible={passwordVisible} currentUser={currentUser} submitSearchUser={submitSearchUser} currentSelectOrg={currentSelectOrg} onSelect={onSelect} onCancel={() => setPasswordVisible(false)} /> {/* 编辑用户 */} <EditUserModal visible={editUserVisible} currentUser={currentUser} submitSearchUser={submitSearchUser} currentSelectOrg={currentSelectOrg} onSelect={onSelect} onCancel={() => setEditUserVisible(false)} /> {/* 冻结用户 */} {/* <Modal title="请确认" visible={freezeUserVisible} onOk={submitFreezeUser} onCancel={() => setFreezeUserVisible(false)} okText="确认" cancelText="取消" > <p> 即将{+currentUser.state ? '激活' : '冻结'}用户{' '} <span className={styles.redText}> {voca.stripTags(currentUser.loginName)} </span> ,是否确认 {+currentUser.state ? '激活' : '冻结'}? </p> </Modal> */} {/* 多选删除用户 */} <Modal title="确认删除用户" visible={deleteUserVisible} onOk={multiDelete ? submitDeleteUsers : submitDeleteUser} maskClosable={false} onCancel={() => { setDeleteUserVisible(false); setMultiDelete(false); }} okText="确认" cancelText="取消" > <p>将删除多个用户, 是否确认删除?</p> </Modal> {/* <MapScopeEditModal title={id} mapId={createGuid()} visible={editOrgExtentVisible} stationId={currentSelectOrg1} onCancel={() => setEditOrgExtentVisible(false)} confirmModal={submitExtent} distinct={currentOrgDistinct} extent={currentOrgArea} /> */} {/* <AuthModal visible={authUserVisible} currentUser={currentUser} onCancel={() => setAuthUserVisible(false)} /> */} </div> </PageContainer> // <DraggleLayout // containerWidth={550} // containerHeight={220} // min={50} // max={500} // initLeftWidth={100} // onWidthChange={w => setWidth(w)} // handler={ // <div // style={{ // width: 4, // height: '100%', // background: 'rgb(77, 81, 100)', // }} // /> // } // > // <div // style={{ // backgroundColor: `rgb(36, 205, 208)`, // color: `#fff`, // height: '100%', // display: 'flex', // alignItems: 'center', // justifyContent: 'center', // }} // > // left // </div> // <div // style={{ // backgroundColor: `rgb(116, 140, 253)`, // color: `#fff`, // height: '100%', // display: 'flex', // alignItems: 'center', // justifyContent: 'center', // }} // > // right // </div> // </DraggleLayout> ); }; export default UserManage;