fix(departments): 切换部门,自动刷新获取当前用户列表 (#1549)

Reviewed-on: daoyoucloud/tachybase#1549
Reviewed-by: sealday <zhanglin@daoyoucloud.com>
Co-authored-by: bai.zixv <bai.zixv@foxmail.com>
Co-committed-by: bai.zixv <bai.zixv@foxmail.com>

packages/plugins/@hera/plugin-core/src/client/features/departments/common/scopes/useDepartmentFilterActionProps.tsx

@@ -10,6 +10,5 @@ export const useDepartmentFilterActionProps = () => {
     params: service.state?.params?.[0] || service.params,
     service,
   });
-
   return result;
 };

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/DepartmentIndex.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SchemaComponentContext, useSchemaComponentContext } from '@tachybase/client';
 
-import { ViewDepartmentManagement } from './DepartmentManagement.view';
 import { ProviderDepartmentIndex } from './DepartmentIndex.provider';
+import { ViewDepartmentManagement } from './DepartmentManagement.view';
 
 /**
  * TODO: 组件名称有待重新确认
- * @returns 
+ * @returns
  */
 export const DepartmentIndex = () => {
   const context = useSchemaComponentContext();

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/departments-block/DepartmentsTree.component.tsx

@@ -5,7 +5,6 @@ import { MoreOutlined } from '@ant-design/icons';
 import { App, Dropdown, Empty, Tree } from 'antd';
 
 import { useTranslation } from '../../../../locale';
-import { getUserListByDepartment } from '../../utils/getUserListByDepartment';
 import { useContextDepartments } from '../context/Department.context';
 import { useContextDepartmentsExpanded } from '../context/DepartmentsExpanded.context';
 import { schemaDepartmentEdit } from './schemas/schemaDepartmentEdit';
@@ -13,7 +12,6 @@ import { schemaDepartmentNewSub } from './schemas/schemaDepartmentNewSub';
 
 // 部门左边-部门列表
 export const DepartmentsTree = () => {
-  const api = useAPIClient();
   const { data, loading } = useResourceActionContext();
   const { department, setDepartment, setUser } = useContextDepartments();
   const { treeData, nodeMap, loadData, loadedKeys, setLoadedKeys, initData, expandedKeys, setExpandedKeys } =
@@ -24,8 +22,6 @@ export const DepartmentsTree = () => {
       return;
     }
     const department = nodeMap[keys[0]];
-    const userList = await getUserListByDepartment(api, department.id);
-
     setDepartment(department);
     setUser(null);
   };

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/departments-users-block/DepartmentsUsersBlock.tsx

@@ -19,13 +19,13 @@ import { UserDepartmentsField } from './UserDepartmentsField.component';
 export const ViewDepartmentsUsersBlock = () => {
   const { t } = useTranslation();
   const { department, user } = useContextDepartments();
-  const { data, setState } = useResourceActionContext();
+  const { data, setState, refresh } = useResourceActionContext();
 
   const MemberActions = () => <ViewMemberActions department={department} />;
 
   const RowRemoveAction = () => <ViewRowRemoveAction department={department} />;
 
-  const schema = useMemo(() => getSchemaDepartmentsUsersBlock(department, user), [department, user]);
+  const schema = useMemo(() => getSchemaDepartmentsUsersBlock(department, user), [department?.id, user]);
 
   useEffect(() => {
     setState?.({
@@ -33,6 +33,10 @@ export const ViewDepartmentsUsersBlock = () => {
     });
   }, [data, setState]);
 
+  useEffect(() => {
+    refresh?.();
+  }, [department?.id, user]);
+
   return (
     <>
       <h2>{user ? t('Search results') : t(department?.title ?? 'All users')}</h2>

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/departments-users-block/MemberActions.schema.tsx

@@ -18,6 +18,18 @@ export const schemaMemberActions = {
         useAction: '{{ useBulkRemoveMembersAction }}',
       },
     },
+    refresh: {
+      type: 'void',
+      title: '{{ t("Refresh") }}',
+      'x-component': 'Action',
+      'x-use-component-props': 'useRefreshActionProps',
+      'x-component-props': {
+        icon: 'ReloadOutlined',
+        style: {
+          marginRight: 8,
+        },
+      },
+    },
     create: {
       type: 'void',
       title: '{{t("Add members")}}',

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/departments-users-block/MemberActions.view.tsx

@@ -2,8 +2,16 @@ import React from 'react';
 import { SchemaComponent } from '@tachybase/client';
 
 import { schemaMemberActions } from './MemberActions.schema';
+import { useRefreshActionProps } from './scopes/useRefreshActionProps';
 
 export const ViewMemberActions = (props) => {
   const { department } = props;
-  return department ? <SchemaComponent schema={schemaMemberActions} /> : null;
+  return department ? (
+    <SchemaComponent
+      scope={{
+        useRefreshActionProps,
+      }}
+      schema={schemaMemberActions}
+    />
+  ) : null;
 };

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/departments-users-block/scopes/useMembersDataSource.tsx

@@ -6,6 +6,7 @@ import { useContextDepartments } from '../../context/Department.context';
 export const useMembersDataSource = (props) => {
   const { user } = useContextDepartments();
   const ctx = useResourceActionContext();
+  const { onSuccess } = props;
   useEffect(() => {
     if (user) {
       props?.onSuccess({ data: [user] });
@@ -14,7 +15,7 @@ export const useMembersDataSource = (props) => {
     }
 
     if (!ctx.loading) {
-      props?.onSuccess(ctx.data);
+      onSuccess?.(ctx.data);
     }
   }, [user, ctx.loading]);
 

packages/plugins/@hera/plugin-core/src/client/features/departments/main-tab/departments-users-block/scopes/useRefreshActionProps.ts

@@ -0,0 +1,11 @@
+import { useResourceActionContext } from '@tachybase/client';
+
+export function useRefreshActionProps() {
+  const service = useResourceActionContext();
+
+  return {
+    async onClick() {
+      service?.refresh?.();
+    },
+  };
+}