perf: 用户管理

src/pages/userCenter/UserManage.js

@@ -9,6 +9,11 @@ import {
   Input,
   notification,
   Tooltip,
+  Row,
+  Col,
+  Divider,
+  Tabs,
+  Checkbox,
 } from 'antd';
 import {
   FileAddTwoTone,
@@ -24,20 +29,24 @@ import { PageContainer } from '@ant-design/pro-layout';
 // import classnames from 'classnames';
 import { get } from '../../services';
 import styles from './UserManage.less';
+import ListCardItem from '../orgnazation/listCardItem';
 
 const UserManage = () => {
   const time = new Date();
   const [treeLoading, setTreeLoading] = useState(false);
   const [tableLoading, setTableLoading] = useState(false);
+
   const [treeData, setTreeData] = useState([]); // 用户机构树
   const [treeData1, setTreeData1] = useState([]);
   const [treeData2, setTreeData2] = useState([]);
   const [tableData, setTableData] = useState([]); // 用户表
   const [currentSelect, setCurrentSelect] = useState([]);
+
   const [userVisible, setUserVisible] = useState(false);
   const [addOrgVisible, setAddOrgVisible] = useState(false);
   const [editOrgVisible, setEditOrgVisible] = useState(false);
   const [deleteOrgVisible, setDeleteOrgVisible] = useState(false);
+  const [roleVisible, setRoleVisible] = useState(false);
   const [changeOrgVisible, setChangeOrgVisible] = useState(false);
   const [passwordVisible, setPasswordVisible] = useState(false);
   const [editUserVisible, setEditUserVisible] = useState(false);
@@ -45,58 +54,26 @@ const UserManage = () => {
   const [treeState, setTreeState] = useState(true);
   const [freezeUserVisible, setFreezeUserVisible] = useState(false);
   const [deleteUserVisible, setDeleteUserVisible] = useState(false);
+
   const [orgTitle, setOrgTitle] = useState('机构');
   const [orgID, setOrgID] = useState();
   const [newOrgID, setNewOrgID] = useState();
   const [userID, setUserID] = useState();
+  const [rolelist, setRolelist] = useState([]);
+  const [stationlist, setStationlist] = useState([]);
+
   const [addUserForm] = Form.useForm();
   const [addOrgForm] = Form.useForm();
   const [editOrgForm] = Form.useForm();
   const [editUserForm] = Form.useForm();
   const [passwordForm] = Form.useForm();
+  const { TabPane } = Tabs;
+
   let freezeText = '即将冻结该用户，是否确认冻结？';
   if (userState) {
     freezeText = '即将激活该用户，是否确认激活？';
   }
-  // 渲染机构树
-  const mapTree = org => {
-    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
-    return {
-      title: (
-        <>
-          <span>{org.text}</span>
-          <div className={styles.iconWraper1}>
-            <Tooltip title="添加用户">
-              <FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
-            </Tooltip>
-            <Tooltip title="添加下级机构">
-              <FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} />
-            </Tooltip>
-            <Tooltip title="编辑当前机构">
-              <EditTwoTone onClick={e => editOrg(e, org.text, org.id)} />
-            </Tooltip>
-            <Tooltip title="删除当前机构">
-              <DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} />
-            </Tooltip>
-          </div>
-        </>
-      ),
-      key: org.id,
-      // icon: <CaretDownOutlined />,
-      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
-      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,
-      // icon: <CaretDownOutlined />,
-      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
-      children: haveChildren ? org.children.map(i => mapTree1(i)) : [],
-    };
-  };
+
   // 用户表列名
   const columns = [
     {
@@ -185,6 +162,46 @@ const UserManage = () => {
     },
   ];
 
+  // 渲染机构树
+  const mapTree = org => {
+    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
+    return {
+      title: (
+        <>
+          <span>{org.text}</span>
+          <div className={styles.iconWraper1}>
+            <Tooltip title="添加用户">
+              <FileAddTwoTone onClick={e => addUser(e, org.text, org.id)} />
+            </Tooltip>
+            <Tooltip title="添加下级机构">
+              <FolderAddTwoTone onClick={e => addSubOrg(e, org.text, org.id)} />
+            </Tooltip>
+            <Tooltip title="编辑当前机构">
+              <EditTwoTone onClick={e => editOrg(e, org.text, org.id)} />
+            </Tooltip>
+            <Tooltip title="删除当前机构">
+              <DeleteTwoTone onClick={e => deleteOrg(e, org.text, org.id)} />
+            </Tooltip>
+          </div>
+        </>
+      ),
+      key: org.id,
+      // icon: <CaretDownOutlined />,
+      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
+      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,
+      // icon: <CaretDownOutlined />,
+      // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
+      children: haveChildren ? org.children.map(i => mapTree1(i)) : [],
+    };
+  };
+
   // 获取用户机构树
   useEffect(() => {
     getUserTree(-1, -1);
@@ -281,8 +298,11 @@ const UserManage = () => {
 
   // 右侧表格相关操作
   const relateRole = record => {
-    // setDeleteUserVisible(true);
+    setRoleVisible(true);
     setUserID(record.userID);
+    setTimeout(() => {
+      getRoleList();
+    }, 1000);
   };
   const changeOrg = record => {
     setChangeOrgVisible(true);
@@ -439,7 +459,82 @@ const UserManage = () => {
         message.error(err);
       });
   };
-
+  const listitem = list =>
+    list.map(item1 => {
+      item1.key = item1.roleID;
+      return (
+        <Col className="gutter-row" span={6}>
+          <Checkbox checked={item1.isChecked} />
+          <span>{item1.roleName}</span>
+        </Col>
+      );
+    });
+  const checkBox = () => {
+    console.log('123');
+  };
+  // const style = { padding: '8px 0', fontSize: '14px' };
+  const getRoleList = () => {
+    get(`/Cityinterface/rest/services/OMS.svc/W4_GetUserRelationList`, {
+      _version: 9999,
+      _dc: time.getTime(),
+      userID: `${userID}`,
+    })
+      .then(res => {
+        if (res.success) {
+          // const { roleList, stationList } = res;
+          setRolelist(
+            res.roleList.map((item, index) => {
+              item.key = index;
+              return (
+                <>
+                  <Divider orientation="left" style={{ fontSize: '14px' }}>
+                    <Checkbox onClick={checkBox} />
+                    {item.visibleTitle}
+                  </Divider>
+                  <Row gutter={16}>{listitem(item.roleList)}</Row>
+                </>
+              );
+            }),
+          );
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        setTableLoading(false);
+        message.error(err);
+      });
+  };
+  const submitRole = () => {
+    get(`/Cityinterface/rest/services/OMS.svc/U_JumpToAnotherOU`, {
+      _version: 9999,
+      _dc: time.getTime(),
+      userID,
+      oldOUID: orgID,
+      newOUID: newOrgID,
+    })
+      .then(res => {
+        if (res.success) {
+          setChangeOrgVisible(false);
+          // 跳转到新组织机构下的用户表
+          onSelect([newOrgID]);
+          notification.success({
+            message: '提交成功',
+          });
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
   const submitChangeOrg = () => {
     get(`/Cityinterface/rest/services/OMS.svc/U_JumpToAnotherOU`, {
       _version: 9999,
@@ -723,6 +818,24 @@ const UserManage = () => {
         >
           <p>即将删除该机构，是否确认删除？</p>
         </Modal>
+        <Modal
+          title="用户关联"
+          visible={roleVisible}
+          // onOk={submitRole}
+          onCancel={() => setRoleVisible(false)}
+          okText="确认"
+          cancelText="取消"
+          width="960px"
+        >
+          <Tabs defaultActiveKey="1">
+            <TabPane tab="角色" key="1">
+              {rolelist}
+            </TabPane>
+            <TabPane tab="站点" key="2">
+              Content of Tab Pane 2
+            </TabPane>
+          </Tabs>
+        </Modal>
         <Modal
           title="更改机构"
           visible={changeOrgVisible}