feat: 页面优化

src/pages/Admin/Product/Detail/tabs/MemberTab.tsx

@@ -7,6 +7,7 @@ import {
 } from '@/defines';
 import { BindRolesDrawer } from '@/pages/Admin/_shared/BindRolesDrawer';
 import { UserPermDrawer } from '@/pages/Admin/_shared/UserPermDrawer';
+import { fetchDeptTree } from '@/services/dept';
 import {
   fetchAddMember,
   fetchMemberList,
@@ -35,7 +36,9 @@ export const MemberTab = ({ productCode, roleRefreshKey }: MemberTabProps) => {
   const [userOptions, setUserOptions] = useState<{ label: string; value: number }[]>([]);
   const [roleMap, setRoleMap] = useState<Map<number, string>>(new Map());
   const [userRoleIds, setUserRoleIds] = useState<Map<number, number[]>>(new Map());
+  const [userDeptIds, setUserDeptIds] = useState<Map<number, number>>(new Map());
   const [pageMembers, setPageMembers] = useState<API.MemberItem[]>([]);
+  const [deptOptions, setDeptOptions] = useState<Map<number, string>>(new Map());
   const [rolesDrawer, setRolesDrawer] = useState<{ open: boolean; userId: number }>({
     open: false,
     userId: 0,
@@ -56,6 +59,20 @@ export const MemberTab = ({ productCode, roleRefreshKey }: MemberTabProps) => {
     );
   };
 
+  useEffect(() => {
+    fetchDeptTree().then((res) => {
+      const map = new Map<number, string>();
+      const walk = (items: API.DeptItem[]) => {
+        items.forEach((d) => {
+          map.set(d.id, d.name);
+          if (d.children) walk(d.children);
+        });
+      };
+      walk(res.data ?? []);
+      setDeptOptions(map);
+    });
+  }, []);
+
   useEffect(() => {
     fetchRoleList({ productCode, pageSize: 9999 }).then((res) => {
       const map = new Map<number, string>();
@@ -67,17 +84,22 @@ export const MemberTab = ({ productCode, roleRefreshKey }: MemberTabProps) => {
   useEffect(() => {
     if (pageMembers.length === 0) {
       setUserRoleIds(new Map());
+      setUserDeptIds(new Map());
       return;
     }
     const load = async () => {
       const details = await Promise.all(
         pageMembers.map((m) => fetchUserDetail({ id: m.userId, productCode })),
       );
-      const map = new Map<number, number[]>();
+      const roleMap = new Map<number, number[]>();
+      const deptMap = new Map<number, number>();
       details.forEach((res, i) => {
-        map.set(pageMembers[i].userId, res.data?.roleIds ?? []);
+        const userId = pageMembers[i].userId;
+        roleMap.set(userId, res.data?.roleIds ?? []);
+        deptMap.set(userId, res.data?.deptId ?? 0);
       });
-      setUserRoleIds(map);
+      setUserRoleIds(roleMap);
+      setUserDeptIds(deptMap);
     };
     load();
   }, [pageMembers, refreshKey, roleRefreshKey]);
@@ -95,6 +117,18 @@ export const MemberTab = ({ productCode, roleRefreshKey }: MemberTabProps) => {
         </Tag>
       ),
     },
+    {
+      title: '部门',
+      key: 'dept',
+      width: 120,
+      render: (_, r) => {
+        const deptId = userDeptIds.get(r.userId);
+        if (!deptId)
+          return <span className="text-(--ant-color-text-quaternary) text-xs">无部门</span>;
+        const name = deptOptions.get(deptId);
+        return name ?? <span className="text-(--ant-color-text-quaternary) text-xs">无部门</span>;
+      },
+    },
     {
       title: '角色',
       key: 'roles',