perf: UserManage

src/pages/userCenter/UserManage.js

 import React, { useState, useEffect } from 'react';
-import { Tree, Table, Space, message, Modal, Form, Input } from 'antd';
 import {
-  UsergroupAddOutlined,
+  Tree,
+  Table,
+  Space,
+  message,
+  Modal,
+  Form,
+  Input,
+  notification,
+  Tooltip,
+} from 'antd';
+import {
   FileAddTwoTone,
   FolderAddTwoTone,
   EditTwoTone,
@@ -14,15 +23,22 @@ import styles from './UserManage.less';
 
 const UserManage = () => {
   const time = new Date();
+  const [treeLoading, setTreeLoading] = useState(false);
   const [tableLoading, setTableLoading] = useState(false);
   const [treeData, setTreeData] = 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 [deleteUserVisible, setDeleteUserVisible] = useState(false);
   const [orgTitle, setOrgTitle] = useState('机构');
   const [orgID, setOrgID] = useState();
-  const [userID, setUserID] = useState('机构');
+  const [userID, setUserID] = useState();
   const [addUserForm] = Form.useForm();
+  const [addOrgForm] = Form.useForm();
+  const [editOrgForm] = Form.useForm();
   // 渲染机构目录树
   const mapTree = org => {
     const haveChildren = Array.isArray(org.children) && org.children.length > 0;
@@ -30,13 +46,18 @@ const UserManage = () => {
       title: (
         <div className={styles.iconWraper1}>
           {org.text}
-          <FileAddTwoTone
-            onClick={e => addUser(e, org.text, org.id)}
-            title="添加用户"
-          />
-          <FolderAddTwoTone onClick={addSubOrg} title="添加下级机构" />
-          <EditTwoTone onClick={editOrg} title="编辑" />
-          <DeleteTwoTone onClick={deleteOrg} title="删除" />
+          <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,
@@ -89,42 +110,51 @@ const UserManage = () => {
 
   // 获取用户机构列表
   useEffect(() => {
-    setTableLoading(true);
+    getUserTree(-1, -1);
+  }, []);
+
+  const getUserTree = (selectOU, node) => {
+    setTreeLoading(true);
     get(`/Cityinterface/rest/services/OMS.svc/U_GetOUTree`, {
       _version: 9999,
       _dc: time.getTime(),
-      node: -1,
+      selectOU,
+      node,
     })
       .then(res => {
-        setTableLoading(false);
+        setTreeLoading(false);
         if (res.length > 0) {
           const orgTree = res.map(org => mapTree(org));
           setTreeData(orgTree);
+          onSelect([res[0].id]);
         }
       })
       .catch(err => {
-        setTableLoading(false);
+        setTreeLoading(false);
         message.error(err);
       });
-  }, []);
+  };
 
   // 获取当前机构下所有用户
   const onSelect = props => {
     setTableLoading(true);
+    if (!props[0]) {
+      setCurrentSelect(currentSelect);
+    } else {
+      setCurrentSelect(props[0]);
+    }
     get(`/Cityinterface/rest/services/OMS.svc/U_GetOneOUUserListNew`, {
       _version: 9999,
       _dc: time.getTime(),
-      OUID: props[0],
+      OUID: props[0] || currentSelect,
     })
       .then(res => {
         setTableLoading(false);
-        if (res.root.length > 0) {
-          const table = res.root.map((item, index) => {
-            item.key = index;
-            return item;
-          });
-          setTableData(table);
-        }
+        const table = res.root.map((item, index) => {
+          item.key = index;
+          return item;
+        });
+        setTableData(table);
       })
       .catch(err => {
         setTableLoading(false);
@@ -133,27 +163,29 @@ const UserManage = () => {
   };
 
   const addUser = (e, title, id) => {
-    e.stopPropagation();
+    // e.stopPropagation();
     setUserVisible(true);
     setOrgTitle(`在${title}下添加用户`);
     setOrgID(id);
   };
   const addSubOrg = (e, title, id) => {
-    e.stopPropagation();
-    // setUserVisible(true);
-    // setOrgTitle(`在${title}下添加机构`);
+    // e.stopPropagation();
+    setAddOrgVisible(true);
+    setOrgTitle(`在${title}下添加机构`);
     setOrgID(id);
   };
   const editOrg = (e, title, id) => {
-    e.stopPropagation();
-    // setUserVisible(true);
-    // setOrgTitle(`在${title}下添加用户`);
+    // e.stopPropagation();
+    setEditOrgVisible(true);
+    editOrgForm.setFieldsValue({
+      OUName: title,
+    });
     setOrgID(id);
   };
   const deleteOrg = (e, title, id) => {
-    e.stopPropagation();
-    // setUserVisible(true);
-    // setOrgTitle(`在${title}下添加用户`);
+    // e.stopPropagation();
+    setDeleteOrgVisible(true);
+    setOrgTitle(`在${title}下添加用户`);
     setOrgID(id);
   };
   // 提交-添加用户
@@ -167,25 +199,114 @@ const UserManage = () => {
       userName: addUserForm.getFieldValue('userName'),
       phone: addUserForm.getFieldValue('phone') || '',
       email: addUserForm.getFieldValue('email') || '',
-      ddid: addUserForm.getFieldValue('ddid') || '',
-      wxid: addUserForm.getFieldValue('wxid') || '',
     })
       .then(res => {
         if (res.message === '') {
-          Modal.success({
-            content: '添加成功',
-          });
           setUserVisible(false);
+          notification.success({
+            message: '提交成功',
+          });
           // 重新获取用户表
           onSelect([orgID]);
         } else {
-          Modal.error({
-            title: '添加失败',
-            content: res.message,
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  // 提交-添加下级机构
+  const submitAddOrg = () => {
+    get(`/Cityinterface/rest/services/OMS.svc/U_AddOU`, {
+      _version: 9999,
+      _dc: time.getTime(),
+      pid: orgID,
+      OUName: addOrgForm.getFieldValue('OUName'),
+      description: addOrgForm.getFieldValue('desrciption') || '',
+      comment: '',
+    })
+      .then(res => {
+        if (res.message === '') {
+          setAddOrgVisible(false);
+          notification.success({
+            message: '提交成功',
+          });
+          // 重新获取机构树与用户表
+          getUserTree(-1, -1);
+          // onSelect([res.OUID]);
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+          // Modal.error({
+          //   title: '添加失败',
+          //   content: res.message,
+          // });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  // 提交-编辑当前机构
+  const submitEditOrg = () => {
+    get(`/Cityinterface/rest/services/OMS.svc/U_EditOneOUInfo`, {
+      _version: 9999,
+      _dc: time.getTime(),
+      OUID: orgID,
+      OUName: editOrgForm.getFieldValue('OUName'),
+      description: editOrgForm.getFieldValue('desrciption') || '',
+      comment: '',
+    })
+      .then(res => {
+        if (res.message === '') {
+          setEditOrgVisible(false);
+          notification.success({
+            message: '提交成功',
+          });
+          getUserTree(-1, -1);
+          // 重新获取用户表
+          // onSelect([orgID]);
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  const submitDeleteOrg = () => {
+    get(`/Cityinterface/rest/services/OMS.svc/U_DeleteOU`, {
+      _version: 9999,
+      _dc: time.getTime(),
+      OUID: orgID,
+    })
+      .then(res => {
+        if (res.message === '') {
+          setDeleteOrgVisible(false);
+          notification.success({
+            message: '提交成功',
+          });
+          // 重新获取用户表
+          getUserTree(-1, -1);
+          // onSelect([orgID]);
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
           });
         }
       })
       .catch(err => {
+        setTableLoading(false);
         message.error(err);
       });
   };
@@ -202,9 +323,6 @@ const UserManage = () => {
     })
       .then(res => {
         if (res.message === '') {
-          Modal.success({
-            content: '删除成功',
-          });
           setDeleteUserVisible(false);
           // 重新获取用户表
           onSelect([orgID]);
@@ -230,16 +348,23 @@ const UserManage = () => {
           background: 'white',
           float: 'left',
           padding: '10px',
+          minWidth: '330px',
         }}
       >
-        <div style={{ padding: '8px' }}>
+        <span style={{ padding: '8px' }}>
           机构列表
-          <UsergroupAddOutlined style={{ color: '#1890ff', float: 'right' }} />
-        </div>
+          <Tooltip title="添加下级机构">
+            <FolderAddTwoTone
+              style={{ fontSize: '16px', float: 'right' }}
+              onClick={e => addSubOrg(e, '根目录', '-1')}
+            />
+          </Tooltip>
+        </span>
         <Tree
           showLine="true"
           showIcon="true"
-          loading={tableLoading}
+          selectedKeys={[currentSelect]}
+          loading={treeLoading}
           onSelect={onSelect}
           treeData={treeData}
         />
@@ -259,6 +384,7 @@ const UserManage = () => {
           loading={tableLoading}
         />
       </div>
+      {/* 添加用户 */}
       <Modal
         title={orgTitle}
         visible={userVisible}
@@ -267,10 +393,6 @@ const UserManage = () => {
         okText="确认"
         cancelText="取消"
       >
-        {/* <div style={{ width: '20%', float: 'left' }}>
-          <UserAddOutlined style={{ color: 'blue', width: '40px' }} />
-        </div> */}
-        {/* <div style={{ width: '80%', float: 'right' }}> */}
         <Form form={addUserForm}>
           <Form.Item
             name="loginName"
@@ -281,7 +403,7 @@ const UserManage = () => {
               },
             ]}
           >
-            <Input />
+            <Input placeholder="情输入登录名称" />
           </Form.Item>
           <Form.Item
             name="password"
@@ -292,7 +414,7 @@ const UserManage = () => {
               },
             ]}
           >
-            <Input />
+            <Input placeholder="情输入账户密码" />
           </Form.Item>
           <Form.Item
             name="userName"
@@ -303,25 +425,80 @@ const UserManage = () => {
               },
             ]}
           >
-            <Input />
+            <Input placeholder="情输入用户姓名" />
           </Form.Item>
           <Form.Item name="phone" label="手 机 号 码">
-            <Input />
+            <Input placeholder="情输入手机号码" />
+          </Form.Item>
+          <Form.Item name="email" label="电 子 邮 箱">
+            <Input placeholder="情输入电子邮箱" />
+          </Form.Item>
+        </Form>
+      </Modal>
+      {/* 添加下级机构 */}
+      <Modal
+        title={orgTitle}
+        visible={addOrgVisible}
+        onOk={submitAddOrg}
+        onCancel={() => setAddOrgVisible(false)}
+        okText="确认"
+        cancelText="取消"
+      >
+        <Form form={addOrgForm}>
+          <Form.Item
+            name="OUName"
+            label="机构名称"
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+          >
+            <Input placeholder="情输入机构名称" />
           </Form.Item>
-          <Form.Item name="email" label="电 子 邮 件">
-            <Input />
+          <Form.Item name="description" label="--描---述--">
+            <Input placeholder="情输入相关描述" />
           </Form.Item>
-          <Form.Item name="ddid" label="钉 钉 账 户">
-            <Input />
+        </Form>
+      </Modal>
+      {/* 编辑机构 */}
+      <Modal
+        title={orgTitle}
+        visible={editOrgVisible}
+        onOk={submitEditOrg}
+        onCancel={() => setEditOrgVisible(false)}
+        okText="确认"
+        cancelText="取消"
+      >
+        <Form form={editOrgForm}>
+          <Form.Item
+            name="OUName"
+            label="机构名称"
+            rules={[
+              {
+                required: true,
+              },
+            ]}
+          >
+            <Input placeholder="情输入机构名称" />
           </Form.Item>
-          <Form.Item name="wxid" label="微 信 账 户">
-            <Input />
+          <Form.Item name="description" label="--描---述--">
+            <Input placeholder="情输入相关描述" />
           </Form.Item>
         </Form>
-        {/* </div> */}
       </Modal>
       <Modal
-        title="删除用户"
+        title="确认删除机构"
+        visible={deleteOrgVisible}
+        onOk={submitDeleteOrg}
+        onCancel={() => setDeleteOrgVisible(false)}
+        okText="确认"
+        cancelText="取消"
+      >
+        <p>即将删除该机构，是否确认删除？</p>
+      </Modal>
+      <Modal
+        title="确认删除用户"
         visible={deleteUserVisible}
         onOk={submitDeleteUser}
         onCancel={() => setDeleteUserVisible(false)}

src/pages/userCenter/UserManage.less

@@ -6,6 +6,7 @@
 .iconWraper1:hover{
     span{
         margin-left: 12px;
+        font-size: 16px;
         display: inline-block;
     }
     // display: block;