feat: 优化查询部门成员方法

Author: coding-hui

src/pages/User/List/index.tsx

@@ -1,17 +1,30 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import CreateUserModal from '@/pages/User/components/CreateUserModal';
 import { ListUserOptions, listUsers } from '@/services/user/listUsers';
 import { deleteUser } from '@/services/user/deleteUser';
 import { DeleteOutlined, EllipsisOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable } from '@ant-design/pro-components';
 import { FormattedMessage, history, useIntl, useRequest } from '@umijs/max';
-import { App, Button, Card, Dropdown, message, Skeleton } from 'antd';
+import {
+  App,
+  Button,
+  Card,
+  Checkbox,
+  Divider,
+  Dropdown,
+  message,
+  Skeleton,
+  Space,
+  Typography,
+} from 'antd';
 import { BASIC_INTL } from '@/constant';
 import { transformSearchParams } from '@/utils';
 
 import useStyle from './style';
 
+const { Text } = Typography;
+
 export type Props = {
   organization?: { id: string; name: string };
 };
@@ -32,6 +45,9 @@ const INTL = {
   LAST_LOGIN_TIME: {
     id: 'users.table.lastLoginTime',
   },
+  ONLY_DIRECT_MEMBERS: {
+    id: 'users.table.onlyDirectMembers',
+  },
 };
 
 const UserList: React.FC<Props> = (props) => {
@@ -43,6 +59,8 @@ const UserList: React.FC<Props> = (props) => {
   const { modal } = App.useApp();
   const intl = useIntl();
 
+  const [onlyDirectMembers, setOnlyDirectMembers] = useState(false);
+
   const reloadTable = () => {
     if (actionRef.current) {
       actionRef.current.reload();
@@ -184,7 +202,7 @@ const UserList: React.FC<Props> = (props) => {
       ) : (
         <ProTable<API.UserInfo, ListUserOptions>
           size="small"
-          params={{ departmentId: organization.id }}
+          params={{ departmentId: organization.id, includeChildrenDepartments: !onlyDirectMembers }}
           className={styles}
           headerTitle={organization.name}
           style={{
@@ -204,6 +222,17 @@ const UserList: React.FC<Props> = (props) => {
             pageSizeOptions: [10, 20, 30, 50],
           }}
           toolBarRender={() => [
+            <Space key={'checkbox'} style={{ alignItems: 'flex-start' }}>
+              <Checkbox
+                checked={onlyDirectMembers}
+                onChange={({ target: { checked } }) => {
+                  setOnlyDirectMembers(checked);
+                  actionRef.current?.reload();
+                }}
+              />
+              <Text ellipsis>{intl.formatMessage(INTL.ONLY_DIRECT_MEMBERS)}</Text>
+            </Space>,
+            <Divider key="divider" type="vertical" />,
             <CreateUserModal
               key="create"
               organization={organization}

src/pages/User/locales/zh-CN.ts

@@ -1,5 +1,6 @@
 export default {
   'users.page.content': '管理组织中的用户，可以直接在 IAM 中进行维护，也可以同步外部身份源。',
+  'users.table.onlyDirectMembers': '只展示部门直属成员',
   'users.table.title': '用户列表',
   'users.table.add': '新增',
   'users.table.edit': '编辑',

src/services/user/listUsers.ts

@@ -1,6 +1,7 @@
 import { request } from '@@/exports';
 
 export type ListUserOptions = {
+  includeChildrenDepartments?: boolean;
   departmentId?: string;
 } & API.ListOptions;