Merge pull request #128 from sj-distributor/enhance-user-list-tree

Enhance user list tree
sj-distributor · Nov 13, 2024 · 6d38814 · 6d38814
2 parents a72874f + 7284ef1
commit 6d38814
Show file tree

Hide file tree

Showing 12 changed files with 223 additions and 53 deletions.
diff --git a/web/src/pages/login/hook.ts b/web/src/pages/login/hook.ts
@@ -1,15 +1,19 @@
 import { useDebounceFn } from "ahooks";
-import { message } from "antd";
+import { App } from "antd";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useAuth } from "@/hooks/use-auth";
 import { Login } from "@/services/api/login";
 import { IUserInfo } from "@/services/dtos/login";
+import { GetCurrentAccountPermission } from "@/services/api/user-permission";
+import { FrontRolePermissionEnum } from "../user/user-permissions/user-newpermissions/props";
 
 export const useAction = () => {
   const { signIn } = useAuth();
 
+  const { message } = App.useApp();
+
   const navigate = useNavigate();
 
   const [userInfo, setUserInfo] = useState<IUserInfo>({
@@ -26,16 +30,26 @@ export const useAction = () => {
     }));
   };
 
+  const hanldeNoPermission = () => {
+    message.error("您没有访问後台权限");
+
+    localStorage.removeItem(
+      (window as any).appsettings?.tokenKey ?? "tokenKey"
+    );
+
+    localStorage.removeItem((window as any).appsettings?.userNameKey);
+  };
+
   const onLogin = () => {
     setLoginLoading(true);
+
     if (
       userInfo.userName.trim().length !== 0 &&
       userInfo.password.trim().length !== 0
     ) {
       Login(userInfo)
         .then((res) => {
           if (res) {
-            message.success("登录成功");
             localStorage.setItem(
               (window as any).appsettings?.tokenKey ?? "tokenKey",
               res
@@ -45,9 +59,33 @@ export const useAction = () => {
               userInfo.userName
             );
 
-            navigate("/user/list");
+            GetCurrentAccountPermission()
+              .then((response) => {
+                if (
+                  response.rolePermissionData.some((item) =>
+                    item.permissions.some(
+                      (permission) =>
+                        permission.name ===
+                        FrontRolePermissionEnum.CanSwitchCameraAiBackEnd
+                    )
+                  )
+                ) {
+                  message.success("登录成功");
+
+                  navigate("/");
 
-            signIn(res);
+                  signIn(
+                    localStorage.getItem(
+                      (window as any).appsettings?.tokenKey ?? "tokenKey"
+                    ) || ""
+                  );
+                } else {
+                  hanldeNoPermission();
+                }
+              })
+              .catch(() => {
+                hanldeNoPermission();
+              });
           }
         })
         .catch(() => {

diff --git a/web/src/pages/main/index.tsx b/web/src/pages/main/index.tsx
@@ -1,9 +1,56 @@
 import { Outlet } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { GetCurrentAccountPermission } from "@/services/api/user-permission";
+import { Spin } from "antd";
+import { FrontRolePermissionEnum } from "../user/user-permissions/user-newpermissions/props";
 
 export const Container = () => {
+  const [permission, setPermission] = useState<{
+    isGetPermission: boolean;
+    hasSwitchCameraAiBackEnd: boolean;
+  }>({
+    isGetPermission: false,
+    hasSwitchCameraAiBackEnd: false,
+  });
+
+  useEffect(() => {
+    GetCurrentAccountPermission()
+      .then((response) => {
+        if (!response) return;
+
+        setPermission((prevState) => ({
+          ...prevState,
+          isGetPermission: true,
+          hasSwitchCameraAiBackEnd: response.rolePermissionData.some((item) =>
+            item.permissions.some(
+              (permission) =>
+                permission.name ===
+                FrontRolePermissionEnum.CanSwitchCameraAiBackEnd
+            )
+          ),
+        }));
+      })
+      .catch(() => {
+        setPermission({
+          isGetPermission: true,
+          hasSwitchCameraAiBackEnd: false,
+        });
+      });
+  }, []);
+
   return (
     <div className="pt-6 px-6 flex-1 flex flex-col bg-[#F6F8FC] overflow-hidden">
-      <Outlet />
+      {permission.isGetPermission ? (
+        permission.hasSwitchCameraAiBackEnd ? (
+          <Outlet />
+        ) : (
+          <div className="flex justify-center font-semibold">暂无权限</div>
+        )
+      ) : (
+        <div className="w-full h-screen flex items-center justify-center">
+          <Spin />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/web/src/pages/user/user-lilst/hook.ts b/web/src/pages/user/user-lilst/hook.ts
@@ -62,6 +62,8 @@ export const useAction = () => {
       PageSize: 20,
     });
 
+  const [disableTreeStaffId, setDisableTreeStaffId] = useState<string[]>([]);
+
   const handelConfirmDeleteUsers = () => {
     if (deleteUserKeys.length < 1) return;
 
@@ -73,12 +75,16 @@ export const useAction = () => {
     deleteUserFun(data as string & string[])
       .then(() => {
         setIsRemoveUser(false);
+
         handelGetUserList({
           PageIndex: 1,
           PageSize: userListData.PageSize,
           Keyword: filterKeyword,
           Status: userListData.Status,
         });
+
+        getAllUserList();
+
         message.success(t(KEYS.REMOVE_USER_OK, source));
       })
       .catch((err) => {
@@ -104,6 +110,8 @@ export const useAction = () => {
         Status: userListData.Status,
       });
 
+      getAllUserList();
+
       loading = false;
     } catch (err) {
       loading = false;
@@ -143,6 +151,21 @@ export const useAction = () => {
       },
     });
 
+  const getAllUserList = () => {
+    GetUserList({
+      PageIndex: 1,
+      PageSize: 2147483647,
+    }).then((res) => {
+      setDisableTreeStaffId(
+        (res?.userProfiles ?? []).map((item) => item.staffId)
+      );
+    });
+  };
+
+  useEffect(() => {
+    getAllUserList();
+  }, []);
+
   useEffect(() => {
     handelGetUserList({
       PageIndex: 1,
@@ -152,13 +175,6 @@ export const useAction = () => {
     });
   }, [filterKeyword]);
 
-  useEffect(() => {
-    handelGetUserList({
-      PageIndex: userListData.PageIndex,
-      PageSize: userListData.PageSize,
-    });
-  }, []);
-
   const handelGetUserList = (data: IGetUserListRequest) => {
     setUserListData((prev) => ({
       ...prev,
@@ -224,5 +240,6 @@ export const useAction = () => {
     language,
     handelGetUserList,
     filterKeyword,
+    disableTreeStaffId,
   };
 };
diff --git a/web/src/pages/user/user-lilst/index.tsx b/web/src/pages/user/user-lilst/index.tsx
@@ -23,6 +23,7 @@ import { IUserDataItem, UserStatus } from "@/services/dtos/user";
 import { TransferTree } from "../user-permissions/tranfer-tree";
 import { BackGroundRolePermissionEnum } from "../user-permissions/user-newpermissions/props";
 import { useAction } from "./hook";
+import { TreeTypeEnum } from "@/services/dtos/tree";
 
 export const UserList = () => {
   const {
@@ -51,6 +52,7 @@ export const UserList = () => {
     language,
     handelGetUserList,
     filterKeyword,
+    disableTreeStaffId,
   } = useAction();
 
   const columns: TableProps<IUserDataItem>["columns"] = [
@@ -324,6 +326,8 @@ export const UserList = () => {
         setIsModelOpen={setIsAddUser}
         handelGetSelectedUsers={handelGetSelectedUsers}
         staffIdSource={0}
+        disableTreeStaffId={disableTreeStaffId}
+        type={TreeTypeEnum.UserList}
       />
 
       <CustomModal

diff --git a/web/src/pages/user/user-permissions/distribute/hook.ts b/web/src/pages/user/user-permissions/distribute/hook.ts
@@ -60,6 +60,8 @@ export const useAction = () => {
   const [userByRoleIdAllData, setUserByRoleIdAllData] =
     useState<IUserByRoleIdResponse>(initialUserByRoleIdData);
 
+  const [disableTreeStaffId, setDisableTreeStaffId] = useState<string[]>([]);
+
   const filterKeyword = useDebounce(searchValue, { wait: 500 });
 
   const onSelectedAllRow = (selected: boolean) => {
@@ -98,6 +100,8 @@ export const useAction = () => {
           KeyWord: filterKeyword,
           RoleId: id,
         });
+
+        getAllRolesUsersList();
       })
       .catch((error) => message.error((error as Error).message));
   };
@@ -124,6 +128,8 @@ export const useAction = () => {
         RoleId: id,
       });
 
+      getAllRolesUsersList();
+
       loading = false;
     } catch (err) {
       loading = false;
@@ -145,13 +151,22 @@ export const useAction = () => {
       .finally(() => setIsTableLoading(false));
   };
 
-  const getAllRolesUsersList = (prams: IRoleIdRequestParams) => {
-    GetRolesUserByRoleId(prams)
+  const getAllRolesUsersList = () => {
+    GetRolesUserByRoleId({
+      PageIndex: 1,
+      PageSize: 2147483647,
+      RoleId: id,
+    })
       .then((res) => {
+        setDisableTreeStaffId(
+          (res?.roleUsers ?? []).map((item) => String(item.userId))
+        );
+
         if (res) setUserByRoleIdAllData(res ?? initialUserByRoleIdData);
       })
       .catch(() => {
         navigate("/user/permissions");
+
         message.error("獲取全部用戶數據失敗");
       });
   };
@@ -166,13 +181,8 @@ export const useAction = () => {
   }, [pageDto.pageIndex, pageDto.pageSize, filterKeyword]);
 
   useEffect(() => {
-    getAllRolesUsersList({
-      PageIndex: 1,
-      PageSize: 2147483647,
-      KeyWord: filterKeyword,
-      RoleId: id,
-    });
-  }, [filterKeyword]);
+    getAllRolesUsersList();
+  }, []);
 
   useEffect(() => {
     const newSelectedRowKeys = selectedRows.map((x) => x.id);
@@ -184,6 +194,7 @@ export const useAction = () => {
     t,
     source,
     isDeletePermissions,
+    disableTreeStaffId,
     setIsDeletePermissions,
     isBatchDeleteUser,
     setIsBatchDeleteUser,

diff --git a/web/src/pages/user/user-permissions/distribute/index.tsx b/web/src/pages/user/user-permissions/distribute/index.tsx
@@ -11,7 +11,7 @@ import dayjs from "dayjs";
 import { Trans } from "react-i18next";
 
 import KEYS from "@/i18n/language/keys/user-permissions-keys";
-import { HierarchyStaffIdSourceEnum } from "@/services/dtos/tree";
+import { HierarchyStaffIdSourceEnum, TreeTypeEnum } from "@/services/dtos/tree";
 import { IUserByRoleIdData } from "@/services/dtos/user-permission";
 
 import { OperateConfirmModal } from "../operate-confirm";
@@ -23,6 +23,7 @@ export const UserDistribute = () => {
   const {
     t,
     source,
+    disableTreeStaffId,
     isDeletePermissions,
     setIsDeletePermissions,
     isBatchDeleteUser,
@@ -209,9 +210,8 @@ export const UserDistribute = () => {
         setIsModelOpen={setIsAddNewUser}
         handelGetSelectedUsers={handelGetSelectedUsers}
         staffIdSource={HierarchyStaffIdSourceEnum.IntegerStaffId}
-        disabledKeys={userByRoleIdData.roleUsers?.map((item) =>
-          String(item.userId)
-        )}
+        type={TreeTypeEnum.UserPermission}
+        disableTreeStaffId={disableTreeStaffId}
       />
     </div>
   );