feat: support to set data loading mode (#3712)

* feat: add setDataLoadingModeSettingItem

* feat: support to set data loading mode

* chore: add translation

* chore: refresh the block immediately after the configuration has been changed

* feat: the data loading mode should also work for the filter buttons

* feat: support old version

* fix: data scope

* fix: fix known bugs

* fix: add setting for table selector

* test: fix e2e

packages/core/client/src/block-provider/DetailsBlockProvider.tsx

@@ -38,7 +38,7 @@ const InternalDetailsBlockProvider = (props) => {
     filterOption: service?.params?.[0]?.filter,
   });
   useEffect(() => {
-    if (!_.isEmpty(filter)) {
+    if (!_.isEmpty(filter) && !service.loading) {
       service?.run({ ...service?.params?.[0], filter });
     }
   }, [JSON.stringify(filter)]);
@@ -80,7 +80,7 @@ export const useDetailsBlockProps = () => {
         })
         .catch(console.error);
     }
-  }, [ctx.service.loading]);
+  }, [ctx.form, ctx.service?.data?.data, ctx.service.loading]);
   return {
     form: ctx.form,
   };

packages/core/client/src/block-provider/TableBlockProvider.tsx

@@ -145,7 +145,15 @@ export const useTableBlockProps = () => {
       field.componentProps.pagination.total = ctx?.service?.data?.meta?.count;
       field.componentProps.pagination.current = ctx?.service?.data?.meta?.page;
     }
-  }, [ctx?.service?.loading]);
+  }, [
+    ctx?.field?.data?.selectedRowKeys,
+    ctx?.service?.data?.data,
+    ctx?.service?.data?.meta?.count,
+    ctx?.service?.data?.meta?.page,
+    ctx?.service?.data?.meta?.pageSize,
+    ctx?.service?.loading,
+    field,
+  ]);
   return {
     childrenColumnName: ctx.childrenColumnName,
     loading: ctx?.service?.loading,
@@ -199,6 +207,9 @@ export const useTableBlockProps = () => {
         const storedFilter = block.service.params?.[1]?.filters || {};
 
         if (selectedRow.includes(record[ctx.rowKey])) {
+          if (block.dataLoadingMode === 'manual') {
+            return block.clearData();
+          }
           delete storedFilter[uid];
         } else {
           storedFilter[uid] = {

packages/core/client/src/block-provider/TableFieldProvider.tsx

@@ -148,7 +148,7 @@ export const useTableFieldProps = () => {
       field.data = field.data || {};
       field.data.selectedRowKeys = ctx?.field?.data?.selectedRowKeys;
     }
-  }, [ctx?.service?.loading]);
+  }, [ctx?.field?.data?.selectedRowKeys, ctx?.service?.data?.data, ctx?.service?.loading, field]);
   return {
     size: 'middle',
     loading: ctx?.service?.loading,

packages/core/client/src/block-provider/TableSelectorProvider.tsx

@@ -290,7 +290,16 @@ export const useTableSelectorProps = () => {
       field.componentProps.pagination.total = ctx?.service?.data?.meta?.count;
       field.componentProps.pagination.current = ctx?.service?.data?.meta?.page;
     }
-  }, [ctx?.service?.loading]);
+  }, [
+    collectionField?.foreignKey,
+    ctx?.field?.data?.selectedRowKeys,
+    ctx?.service?.data?.data,
+    ctx?.service?.data?.meta?.count,
+    ctx?.service?.data?.meta?.page,
+    ctx?.service?.data?.meta?.pageSize,
+    ctx?.service?.loading,
+    field,
+  ]);
   return {
     loading: ctx?.service?.loading,
     showIndex: false,

packages/core/client/src/block-provider/hooks/index.ts

@@ -11,6 +11,7 @@ import { useReactToPrint } from 'react-to-print';
 import {
   AssociationFilter,
   useCollectionRecord,
+  useDataLoadingMode,
   useDataSourceHeaders,
   useFormActiveFields,
   useFormBlockContext,
@@ -198,6 +199,10 @@ export const useCreateActionProps = () => {
   const collectValues = useCollectValuesToSubmit();
   const action = record.isNew ? actionField.componentProps.saveMode || 'create' : 'update';
   const filterKeys = actionField.componentProps.filterKeys?.checked || [];
+  const dataLoadingMode = useDataLoadingMode();
+
+  console.log('dataLoadingMode', dataLoadingMode);
+
   return {
     async onClick() {
       const { onSuccess, skipValidator, triggerWorkflows } = actionSchema?.['x-action-settings'] ?? {};
@@ -426,6 +431,10 @@ export const useFilterBlockActionProps = () => {
               block.defaultFilter,
             ]);
 
+            if (block.dataLoadingMode === 'manual' && _.isEmpty(mergedFilter)) {
+              return block.clearData();
+            }
+
             return block.doFilter(
               {
                 ...param,
@@ -436,11 +445,10 @@ export const useFilterBlockActionProps = () => {
             );
           }),
         );
-        actionField.data.loading = false;
       } catch (error) {
         console.error(error);
-        actionField.data.loading = false;
       }
+      actionField.data.loading = false;
     },
   };
 };
@@ -466,6 +474,10 @@ export const useResetBlockActionProps = () => {
             const target = targets.find((target) => target.uid === block.uid);
             if (!target) return;
 
+            if (block.dataLoadingMode === 'manual') {
+              return block.clearData();
+            }
+
             const param = block.service.params?.[0] || {};
             // 保留原有的 filter
             const storedFilter = block.service.params?.[1]?.filters || {};
@@ -1208,6 +1220,9 @@ export const useAssociationFilterBlockProps = () => {
           [filterKey]: value,
         };
       } else {
+        if (block.dataLoadingMode === 'manual') {
+          return block.clearData();
+        }
         delete storedFilter[key];
       }
 

packages/core/client/src/data-source/data-block/DataBlockProvider.tsx

@@ -24,6 +24,7 @@ export interface AllDataBlockProps {
   parentRecord?: CollectionRecord;
   requestService?: UseRequestService<any>;
   requestOptions?: UseRequestOptions;
+  dataLoadingMode?: 'auto' | 'manual';
   [index: string]: any;
 }
 

packages/core/client/src/data-source/data-block/DataBlockRequestProvider.tsx

@@ -6,11 +6,13 @@ import { CollectionRecordProvider, CollectionRecord } from '../collection-record
 import { AllDataBlockProps, useDataBlockProps } from './DataBlockProvider';
 import { useDataBlockResource } from './DataBlockResourceProvider';
 import { useDataSourceHeaders } from '../utils';
+import { useDataLoadingMode } from '../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
 export const BlockRequestContext = createContext<UseRequestResult<any>>(null);
 BlockRequestContext.displayName = 'BlockRequestContext';
 
 function useCurrentRequest<T>(options: Omit<AllDataBlockProps, 'type'>) {
+  const dataLoadingMode = useDataLoadingMode();
   const resource = useDataBlockResource();
   const { action, params = {}, record, requestService, requestOptions } = options;
   if (params.filterByTk === undefined) {
@@ -36,13 +38,13 @@ function useCurrentRequest<T>(options: Omit<AllDataBlockProps, 'type'>) {
 
   // 因为修改 Schema 会导致 params 对象发生变化，所以这里使用 `DeepCompare`
   useDeepCompareEffect(() => {
-    if (action) {
+    if (action && dataLoadingMode === 'auto') {
       request.run();
     }
   }, [params, action, record]);
 
   useUpdateEffect(() => {
-    if (action) {
+    if (action && dataLoadingMode === 'auto') {
       request.run();
     }
   }, [resource]);

packages/core/client/src/filter-provider/FilterProvider.tsx

@@ -1,10 +1,12 @@
 import { useField, useFieldSchema } from '@formily/react';
 import { uniqBy } from 'lodash';
-import React, { createContext, useEffect, useRef } from 'react';
+import React, { createContext, useCallback, useEffect, useRef } from 'react';
 import { useBlockRequestContext } from '../block-provider/BlockProvider';
 import { CollectionFieldOptions_deprecated, useCollection_deprecated } from '../collection-manager';
 import { removeNullCondition } from '../schema-component';
 import { mergeFilter, useAssociatedFields } from './utils';
+import { useDataLoadingMode } from '../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
+import { GeneralField } from '@formily/core';
 
 enum FILTER_OPERATOR {
   AND = '$and',
@@ -40,6 +42,8 @@ export interface DataBlock {
   doFilter: (params: any, params2?: any) => Promise<void>;
   /** 清除筛选区块设置的筛选参数 */
   clearFilter: (uid: string) => void;
+  /** 将数据区块的数据置为空 */
+  clearData: () => void;
   /** 数据区块表中所有的关系字段 */
   associatedFields?: CollectionFieldOptions_deprecated[];
   /** 数据区块表中所有的外键字段 */
@@ -50,6 +54,11 @@ export interface DataBlock {
   service?: any;
   /** 数据区块所的 DOM 容器 */
   dom: HTMLElement;
+  /**
+   * auto: 数据区块会在初始渲染时请求数据
+   * manual: 只有当点击了筛选按钮，才会请求数据
+   */
+  dataLoadingMode?: 'auto' | 'manual';
 }
 
 interface FilterContextValue {
@@ -89,13 +98,14 @@ export const DataBlockCollector = ({
   const fieldSchema = useFieldSchema();
   const associatedFields = useAssociatedFields();
   const container = useRef(null);
+  const dataLoadingMode = useDataLoadingMode();
 
   const shouldApplyFilter =
     field.decoratorType !== 'FilterFormBlockProvider' &&
     field.decoratorType !== 'FormBlockProvider' &&
     field.decoratorProps.blockType !== 'filter';
 
-  const addBlockToDataBlocks = () => {
+  const addBlockToDataBlocks = useCallback(() => {
     recordDataBlocks({
       uid: fieldSchema['x-uid'],
       title: field.componentProps.title,
@@ -106,6 +116,7 @@ export const DataBlockCollector = ({
       defaultFilter: params?.filter || {},
       service,
       dom: container.current,
+      dataLoadingMode,
       clearFilter(uid: string) {
         const param = this.service.params?.[0] || {};
         const storedFilter = this.service.params?.[1]?.filters || {};
@@ -124,12 +135,15 @@ export const DataBlockCollector = ({
           { filters: storedFilter },
         );
       },
+      clearData() {
+        this.service.mutate(undefined);
+      },
     });
-  };
+  }, [associatedFields, collection, dataLoadingMode, field, fieldSchema, params?.filter, recordDataBlocks, service]);
 
   useEffect(() => {
     if (shouldApplyFilter) addBlockToDataBlocks();
-  }, [params?.filter, service]);
+  }, [params.filter, service, dataLoadingMode, shouldApplyFilter, addBlockToDataBlocks]);
 
   useEffect(() => {
     return () => {
@@ -163,6 +177,7 @@ export const useFilterBlock = () => {
       // 这里的值有可能会变化，所以需要更新
       existingBlock.service = block.service;
       existingBlock.defaultFilter = block.defaultFilter;
+      existingBlock.dataLoadingMode = block.dataLoadingMode;
       return;
     }
     // 由于 setDataBlocks 是异步操作，所以上面的 existingBlock 在判断时有可能用的是旧的 dataBlocks,所以下面还需要根据 uid 进行去重操作

packages/core/client/src/index.ts

@@ -58,3 +58,4 @@ export * from './modules/blocks/BlockSchemaToolbar';
 export * from './modules/blocks/data-blocks/table';
 export * from './modules/blocks/data-blocks/form';
 export * from './modules/blocks/data-blocks/table-selector';
+export * from './modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';

packages/core/client/src/locale/en_US.json

@@ -104,6 +104,10 @@
   "Submit": "Submit",
   "Close": "Close",
   "Set the data scope": "Set the data scope",
+  "Set data loading mode": "Set data loading mode",
+  "Automatically load data": "Automatically load data",
+  "Load data after filtering": "Load data after filtering",
+  "Data loading mode": "Data loading mode",
   "Data blocks": "Data blocks",
   "Filter blocks": "Filter blocks",
   "Table": "Table",

packages/core/client/src/locale/es_ES.json

@@ -99,6 +99,10 @@
   "Submit": "Enviar",
   "Close": "Cerrar",
   "Set the data scope": "Establecer el ámbito de los datos",
+  "Data loading mode": "Modo de carga de datos",
+  "Set data loading mode": "Establecer el modo de carga de datos",
+  "Automatically load data": "Cargar datos",
+  "Load data after filtering": "Cargar datos después de filtrar",
   "Data blocks": "Bloques de datos",
   "Filter blocks": "Bloques de filtro",
   "Table": "Tabla",

packages/core/client/src/locale/fr_FR.json

@@ -99,6 +99,10 @@
   "Submit": "Envoyer",
   "Close": "Fermer",
   "Set the data scope": "Définir la portée des données",
+  "Data loading mode": "Mode de chargement des données",
+  "Set data loading mode": "Définir le mode de chargement des données",
+  "Automatically load data": "Charger automatiquement les données",
+  "Load data after filtering": "Charger les données après filtrage",
   "Data blocks": "Blocs de données",
   "Filter blocks": "Blocs de filtre",
   "Table": "Tableau",

packages/core/client/src/locale/ja_JP.json

@@ -102,6 +102,10 @@
   "Submit": "送信",
   "Close": "閉じる",
   "Set the data scope": "データ範囲の設定",
+  "Data loading mode": "データ読み込みモード",
+  "Set data loading mode": "データ読み込みモードの設定",
+  "Automatically load data": "データを自動的に読み込む",
+  "Load data after filtering": "フィルタリング後にデータを読み込む",
   "Data blocks": "データブロック",
   "Filter blocks": "フィルターブロック",
   "Table OID(Inheritance)": "データテーブルOID(継承)",

packages/core/client/src/locale/ko_KR.json

@@ -122,6 +122,10 @@
   "Submit": "제출",
   "Close": "닫기",
   "Set the data scope": "데이터 범위 설정",
+  "Data loading mode": "데이터 로드 모드",
+  "Set data loading mode": "데이터 로드 모드 설정",
+  "Automatically load data": "데이터 자동 로드",
+  "Load data after filtering": "필터링 후 데이터 로드",
   "Block": "블록",
   "Data blocks": "데이터 블록",
   "Filter blocks": "필터 블록",

packages/core/client/src/locale/pt_BR.json

@@ -73,6 +73,10 @@
   "Submit": "Enviar",
   "Close": "Fechar",
   "Set the data scope": "Definir o escopo de dados",
+  "Data loading mode": "Modo de carregamento de dados",
+  "Set data loading mode": "Definir modo de carregamento de dados",
+  "Automatically load data": "Carregar dados automaticamente",
+  "Load data after filtering": "Carregar dados após filtragem",
   "Data blocks": "Blocos de dados",
   "Filter blocks": "Blocos de filtro",
   "Table": "Tabela",

packages/core/client/src/locale/ru_RU.json

@@ -69,6 +69,10 @@
   "Submit": "Отправить",
   "Close": "Закрыть",
   "Set the data scope": "Установить область данных",
+  "Data loading mode": "Режим загрузки данных",
+  "Set data loading mode": "Установить режим загрузки данных",
+  "Automatically load data": "Автоматически загружать данные",
+  "Load data after filtering": "Загружать данные после фильтрации",
   "Data blocks": "Блоки данных",
   "Filter blocks": "Просеивающие блоки",
   "Table": "Таблица",
@@ -555,4 +559,4 @@
   "Home page": "Домашняя страница",
   "Handbook": "Руководство пользователя",
   "License": "Лицензия"
-}
+}

packages/core/client/src/locale/tr_TR.json

@@ -69,6 +69,10 @@
   "Submit": "Gönder",
   "Close": "Kapat",
   "Set the data scope": "Veri kapsamını ayarla",
+  "Data loading mode": "Veri yükleme modu",
+  "Set data loading mode": "Veri yükleme modunu ayarla",
+  "Automatically load data": "Veriyi otomatik yükle",
+  "Load data after filtering": "Filtrelemeden sonra veriyi yükle",
   "Data blocks": "Veri Blokları",
   "Filter blocks": "Filtre blokları",
   "Table": "Tablo",
@@ -552,4 +556,4 @@
   "Home page": "Anasayfa",
   "Handbook": "Kullanıcı kılavuzu",
   "License": "Lisans"
-}
+}

packages/core/client/src/locale/uk_UA.json

@@ -99,6 +99,10 @@
   "Submit": "Відправити",
   "Close": "Закрити",
   "Set the data scope": "Встановити обсяг даних",
+  "Data loading mode": "Режим завантаження даних",
+  "Set data loading mode": "Встановити режим завантаження даних",
+  "Automatically load data": "Автоматично завантажувати дані",
+  "Load data after filtering": "Завантажувати дані після фільтрації",
   "Data blocks": "Блоки даних",
   "Filter blocks": "Блоки фільтрів",
   "Table": "Таблиця",

packages/core/client/src/locale/zh-CN.json

@@ -122,6 +122,10 @@
   "Submit": "提交",
   "Close": "关闭",
   "Set the data scope": "设置数据范围",
+  "Data loading mode": "数据加载方式",
+  "Set data loading mode": "设置数据加载方式",
+  "Automatically load data": "自动加载数据",
+  "Load data after filtering": "筛选后才加载数据",
   "Block": "区块",
   "Data blocks": "数据区块",
   "Filter blocks": "筛选区块",

packages/core/client/src/locale/zh-TW.json

@@ -122,6 +122,10 @@
   "Submit": "提交",
   "Close": "關閉",
   "Set the data scope": "設定資料範圍",
+  "Data loading mode": "資料加載方式",
+  "Set data loading mode": "設定資料加載方式",
+  "Automatically load data": "自動加載資料",
+  "Load data after filtering": "篩選後才加載資料",
   "Block": "區塊",
   "Data blocks": "資料區塊",
   "Filter blocks": "篩選區塊",

packages/core/client/src/modules/blocks/data-blocks/details-multi/multiDataDetailsBlockSettings.tsx

@@ -8,6 +8,7 @@ import { useCollection_deprecated, useSortFields } from '../../../../collection-
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
 import { SchemaSettingsBlockTitleItem, SchemaSettingsTemplate } from '../../../../schema-settings';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
+import { setDataLoadingModeSettingsItem, useDataLoadingMode } from './setDataLoadingModeSettingsItem';
 
 export const multiDataDetailsBlockSettings = new SchemaSettings({
   name: 'blockSettings:multiDataDetails',
@@ -26,6 +27,7 @@ export const multiDataDetailsBlockSettings = new SchemaSettings({
         const field = useField();
         const { service } = useDetailsBlockContext();
         const { dn } = useDesignable();
+        const dataLoadingMode = useDataLoadingMode();
         return {
           collectionName: name,
           defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@@ -36,7 +38,11 @@ export const multiDataDetailsBlockSettings = new SchemaSettings({
             params.filter = filter;
             field.decoratorProps.params = params;
             fieldSchema['x-decorator-props']['params'] = params;
-            service.run({ ...service.params?.[0], filter });
+
+            if (dataLoadingMode === 'auto') {
+              service.run({ ...service.params?.[0], filter });
+            }
+
             dn.emit('patch', {
               schema: {
                 ['x-uid']: fieldSchema['x-uid'],
@@ -164,6 +170,7 @@ export const multiDataDetailsBlockSettings = new SchemaSettings({
         };
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'template',
       Component: SchemaSettingsTemplate,

packages/core/client/src/modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem.tsx

@@ -0,0 +1,71 @@
+import { ISchema, useField, useFieldSchema } from '@formily/react';
+import _ from 'lodash';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesignable } from '../../../../schema-component';
+import { SchemaSettingsModalItem, useCollectionState } from '../../../../schema-settings';
+import { useCollection_deprecated } from '../../../../collection-manager/hooks/useCollection_deprecated';
+import { useDataBlockProps, useDataBlockRequest } from '../../../../data-source';
+
+export const setDataLoadingModeSettingsItem = {
+  name: 'setDataLoadingMode',
+  Component: SetDataLoadingMode,
+};
+
+export function useDataLoadingMode() {
+  const { dataLoadingMode } = useDataBlockProps() || {};
+  return dataLoadingMode || 'auto';
+}
+
+export function SetDataLoadingMode() {
+  const { dn } = useDesignable();
+  const { t } = useTranslation();
+  const field = useField();
+  const fieldSchema = useFieldSchema();
+  const { name } = useCollection_deprecated();
+  const { getEnableFieldTree, getOnLoadData } = useCollectionState(name);
+  const request = useDataBlockRequest();
+
+  return (
+    <SchemaSettingsModalItem
+      title={t('Set data loading mode')}
+      scope={{ getEnableFieldTree, name, getOnLoadData }}
+      schema={
+        {
+          type: 'object',
+          title: t('Data loading mode'),
+          properties: {
+            dataLoadingMode: {
+              'x-decorator': 'FormItem',
+              'x-component': 'Radio.Group',
+              default: fieldSchema['x-decorator-props']?.dataLoadingMode || 'auto',
+              enum: [
+                { value: 'auto', label: t('Automatically load data') },
+                { value: 'manual', label: t('Load data after filtering') },
+              ],
+            },
+          },
+        } as ISchema
+      }
+      onSubmit={({ dataLoadingMode }) => {
+        _.set(fieldSchema, 'x-decorator-props.dataLoadingMode', dataLoadingMode);
+        field.decoratorProps.dataLoadingMode = dataLoadingMode;
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-decorator-props': {
+              ...fieldSchema['x-decorator-props'],
+            },
+          },
+        });
+        dn.refresh();
+
+        if (dataLoadingMode === 'auto') {
+          request.run();
+        } else {
+          request.mutate(undefined);
+        }
+      }}
+    />
+  );
+}

packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts

@@ -18,6 +18,7 @@ import {
 import { SchemaSettingsTemplate } from '../../../../schema-settings';
 import { columnCountMarks } from './utils';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
+import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
 
 export const gridCardBlockSettings = new SchemaSettings({
   name: 'blockSettings:gridCard',
@@ -90,7 +91,6 @@ export const gridCardBlockSettings = new SchemaSettings({
         const { form } = useFormBlockContext();
         const field = useField();
         const { dn } = useDesignable();
-        const defaultSort = fieldSchema?.['x-decorator-props']?.params?.sort || [];
 
         return {
           collectionName: name,
@@ -224,6 +224,7 @@ export const gridCardBlockSettings = new SchemaSettings({
         };
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'RecordsPerPage',
       type: 'select',

packages/core/client/src/modules/blocks/data-blocks/list/listBlockSettings.ts

@@ -8,6 +8,7 @@ import { useCollection_deprecated, useSortFields } from '../../../../collection-
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
 import { SchemaSettingsBlockTitleItem, SchemaSettingsTemplate } from '../../../../schema-settings';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
+import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingModeSettingsItem';
 
 export const listBlockSettings = new SchemaSettings({
   name: 'blockSettings:list',
@@ -156,6 +157,7 @@ export const listBlockSettings = new SchemaSettings({
         };
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'RecordsPerPage',
       type: 'select',

packages/core/client/src/modules/blocks/data-blocks/table-selector/tableSelectorBlockSettings.ts

@@ -12,6 +12,7 @@ import {
 } from '../../../../collection-manager';
 import { removeNullCondition, useDesignable } from '../../../../schema-component';
 import { SchemaSettingsDataScope } from '../../../../schema-settings/SchemaSettingsDataScope';
+import { setDataLoadingModeSettingsItem, useDataLoadingMode } from '../details-multi/setDataLoadingModeSettingsItem';
 
 export const tableSelectorBlockSettings = new SchemaSettings({
   name: 'blockSettings:tableSelector',
@@ -26,6 +27,7 @@ export const tableSelectorBlockSettings = new SchemaSettings({
         const { form } = useFormBlockContext();
         const { service, extraFilter } = useTableSelectorContext();
         const { dn } = useDesignable();
+        const dataLoadingMode = useDataLoadingMode();
         const onDataScopeSubmit = useCallback(
           ({ filter }) => {
             filter = removeNullCondition(filter);
@@ -43,7 +45,11 @@ export const tableSelectorBlockSettings = new SchemaSettings({
                 serviceFilter = extraFilter;
               }
             }
-            service.run({ ...service.params?.[0], filter: serviceFilter, page: 1 });
+
+            if (dataLoadingMode === 'auto') {
+              service.run({ ...service.params?.[0], filter: serviceFilter, page: 1 });
+            }
+
             dn.emit('patch', {
               schema: {
                 ['x-uid']: fieldSchema['x-uid'],
@@ -51,7 +57,7 @@ export const tableSelectorBlockSettings = new SchemaSettings({
               },
             });
           },
-          [dn, field.decoratorProps, fieldSchema, service, extraFilter],
+          [field.decoratorProps, fieldSchema, extraFilter, dataLoadingMode, dn, service],
         );
 
         return {
@@ -223,6 +229,7 @@ export const tableSelectorBlockSettings = new SchemaSettings({
         return !dragSort;
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'RecordsPerPage',
       type: 'select',

packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from 'react-i18next';
 import { ArrayItems } from '@formily/antd-v5';
 import { FixedBlockDesignerItem } from '../../../../schema-component/antd/page/FixedBlockDesignerItem';
 import { SchemaSettings } from '../../../../application/schema-settings/SchemaSettings';
+import { setDataLoadingModeSettingsItem, useDataLoadingMode } from '../details-multi/setDataLoadingModeSettingsItem';
 
 export const tableBlockSettings = new SchemaSettings({
   name: 'blockSettings:table',
@@ -138,6 +139,7 @@ export const tableBlockSettings = new SchemaSettings({
         const { form } = useFormBlockContext();
         const { service } = useTableBlockContext();
         const { dn } = useDesignable();
+        const dataLoadingMode = useDataLoadingMode();
         const onDataScopeSubmit = useCallback(
           ({ filter }) => {
             filter = removeNullCondition(filter);
@@ -146,10 +148,14 @@ export const tableBlockSettings = new SchemaSettings({
             field.decoratorProps.params = params;
             fieldSchema['x-decorator-props']['params'] = params;
             const filters = service.params?.[1]?.filters || {};
-            service.run(
+
-              { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
+            if (dataLoadingMode === 'auto') {
-              { filters },
+              service.run(
-            );
+                { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
+                { filters },
+              );
+            }
+
             dn.emit('patch', {
               schema: {
                 ['x-uid']: fieldSchema['x-uid'],
@@ -290,6 +296,7 @@ export const tableBlockSettings = new SchemaSettings({
         return !dragSort;
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'RecordsPerPage',
       type: 'select',

packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts

@@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { useBlockRequestContext } from '../../../block-provider';
 import { useCollection_deprecated, useCollectionManager_deprecated } from '../../../collection-manager';
 import { mergeFilter } from '../../../filter-provider/utils';
+import { useDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
+import _ from 'lodash';
 
 export const useGetFilterOptions = () => {
   const { getCollectionFields } = useCollectionManager_deprecated();
@@ -168,6 +170,8 @@ export const useFilterActionProps = () => {
 export const useFilterFieldProps = ({ options, service, params }) => {
   const { t } = useTranslation();
   const field = useField<Field>();
+  const dataLoadingMode = useDataLoadingMode();
+
   return {
     options,
     onSubmit(values) {
@@ -176,6 +180,10 @@ export const useFilterFieldProps = ({ options, service, params }) => {
       // filter parameter for the filter action
       const filter = removeNullCondition(values?.filter);
 
+      if (dataLoadingMode === 'manual' && _.isEmpty(filter)) {
+        return service.mutate(undefined);
+      }
+
       const filters = service.params?.[1]?.filters || {};
       filters[`filterAction`] = filter;
       service.run(
@@ -193,15 +201,24 @@ export const useFilterFieldProps = ({ options, service, params }) => {
       const filter = params.filter;
       const filters = service.params?.[1]?.filters || {};
       delete filters[`filterAction`];
-      service.run(
+
+      const newParams = [
         {
           ...service.params?.[0],
           filter: mergeFilter([...Object.values(filters), filter]),
           page: 1,
         },
         { filters },
-      );
+      ];
+
       field.title = t('Filter');
+
+      if (dataLoadingMode === 'manual') {
+        service.params = newParams;
+        return service.mutate(undefined);
+      }
+
+      service.run(...newParams);
     },
   };
 };

packages/core/client/src/schema-component/antd/form-v2/Form.Settings.tsx

@@ -16,6 +16,7 @@ import {
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
 import { useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
+import { setDataLoadingModeSettingsItem } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
 /**
  * @deprecated
@@ -169,6 +170,7 @@ export const formDetailsSettings = new SchemaSettings({
         };
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'sortingRules',
       type: 'modal',

packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx

@@ -22,7 +22,7 @@ const InternalGridCardBlockProvider = (props) => {
     if (!service?.loading) {
       form.setValuesIn(field.address.concat('list').toString(), service?.data?.data);
     }
-  }, [service?.data?.data, service?.loading]);
+  }, [field.address, form, service?.data?.data, service?.loading]);
 
   return wrapSSR(
     <GridCardBlockContext.Provider

packages/core/client/src/schema-component/antd/grid-card/GridCard.Designer.tsx

@@ -21,6 +21,7 @@ import { useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
 import { defaultColumnCount, gridSizes, pageSizeOptions, screenSizeMaps, screenSizeTitleMaps } from './options';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
+import { SetDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
 const columnCountMarks = [1, 2, 3, 4, 6, 8, 12, 24].reduce((obj, cur) => {
   obj[cur] = cur;
@@ -209,6 +210,7 @@ export const GridCardDesigner = () => {
             });
           }}
         />
+        <SetDataLoadingMode />
         <SchemaSettingsSelectItem
           title={t('Records per page')}
           value={field.decoratorProps?.params?.pageSize || 20}

packages/core/client/src/schema-component/antd/list/List.Decorator.tsx

@@ -23,7 +23,7 @@ const InternalListBlockProvider = (props) => {
     if (!service?.loading) {
       form.setValuesIn(field.address.concat('list').toString(), service?.data?.data);
     }
-  }, [service?.data?.data, service?.loading]);
+  }, [field.address, form, service?.data?.data, service?.loading]);
 
   return (
     <ListBlockContext.Provider

packages/core/client/src/schema-component/antd/list/List.Designer.tsx

@@ -19,6 +19,7 @@ import { useSchemaTemplate } from '../../../schema-templates';
 import { useDesignable } from '../../hooks';
 import { removeNullCondition } from '../filter';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
+import { SetDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
 /**
  * @deprecated - 已使用 SchemaSettings 替代
@@ -154,6 +155,7 @@ export const ListDesigner = () => {
           });
         }}
       />
+      <SetDataLoadingMode />
       <SchemaSettingsSelectItem
         title={t('Records per page')}
         value={field.decoratorProps?.params?.pageSize || 20}

packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx

@@ -26,6 +26,7 @@ import { removeNullCondition } from '../filter';
 import { useCompile } from '../../';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
 import { FixedBlockDesignerItem } from '../page/FixedBlockDesignerItem';
+import { SetDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
 export const EditSortField = () => {
   const { fields } = useCollection_deprecated();
@@ -66,7 +67,7 @@ export const EditSortField = () => {
 };
 
 export const TableBlockDesigner = () => {
-  const { name, title, sortable } = useCollection_deprecated();
+  const { name, title } = useCollection_deprecated();
   const { getCollectionField, getCollection } = useCollectionManager_deprecated();
   const field = useField();
   const fieldSchema = useFieldSchema();
@@ -75,7 +76,6 @@ export const TableBlockDesigner = () => {
   const { service } = useTableBlockContext();
   const { t } = useTranslation();
   const { dn } = useDesignable();
-  const record = useRecord();
 
   const defaultSort = fieldSchema?.['x-decorator-props']?.params?.sort || [];
   const defaultResource = fieldSchema?.['x-decorator-props']?.resource;
@@ -268,6 +268,7 @@ export const TableBlockDesigner = () => {
           }}
         />
       )}
+      <SetDataLoadingMode />
       <SchemaSettingsSelectItem
         title={t('Records per page')}
         value={field.decoratorProps?.params?.pageSize || 20}

packages/core/client/src/schema-component/antd/table-v2/TableSelectorDesigner.tsx

@@ -23,6 +23,7 @@ import { removeNullCondition } from '../filter';
 import { VariableInput, getShouldChange } from '../../../schema-settings/VariableInput/VariableInput';
 import { RecordPickerContext } from '../../antd/record-picker';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
+import { SetDataLoadingMode } from '../../../modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem';
 
 export const TableSelectorDesigner = () => {
   const { name, title } = useCollection_deprecated();
@@ -126,6 +127,7 @@ export const TableSelectorDesigner = () => {
           }}
         />
       )}
+      <SetDataLoadingMode />
       {!dragSort && (
         <SchemaSettingsModalItem
           title={t('Set default sorting rules')}

packages/plugins/@nocobase/plugin-gantt/src/client/Gantt.Settings.tsx

@@ -6,9 +6,11 @@ import {
   SchemaSettingsSelectItem,
   SchemaSettingsTemplate,
   removeNullCondition,
+  setDataLoadingModeSettingsItem,
   useCollection,
   useCollection_deprecated,
   useCompile,
+  useDataLoadingMode,
   useDesignable,
   useFormBlockContext,
 } from '@nocobase/client';
@@ -206,6 +208,7 @@ export const oldGanttSettings = new SchemaSettings({
         const field = useField();
         const { service } = useGanttBlockContext();
         const { dn } = useDesignable();
+        const dataLoadingMode = useDataLoadingMode();
         return {
           collectionName: name,
           defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@@ -216,7 +219,11 @@ export const oldGanttSettings = new SchemaSettings({
             params.filter = filter;
             field.decoratorProps.params = params;
             fieldSchema['x-decorator-props']['params'] = params;
-            service.run({ ...service.params?.[0], filter });
+
+            if (dataLoadingMode === 'auto') {
+              service.run({ ...service.params?.[0], filter });
+            }
+
             dn.emit('patch', {
               schema: {
                 ['x-uid']: fieldSchema['x-uid'],
@@ -373,6 +380,7 @@ export const ganttSettings = new SchemaSettings({
         };
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'endDateField',
       Component: SchemaSettingsSelectItem,
@@ -446,6 +454,7 @@ export const ganttSettings = new SchemaSettings({
         const field = useField();
         const { service } = useGanttBlockContext();
         const { dn } = useDesignable();
+        const dataLoadingMode = useDataLoadingMode();
         return {
           collectionName: name,
           defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@@ -456,7 +465,11 @@ export const ganttSettings = new SchemaSettings({
             params.filter = filter;
             field.decoratorProps.params = params;
             fieldSchema['x-decorator-props']['params'] = params;
-            service.run({ ...service.params?.[0], filter });
+
+            if (dataLoadingMode === 'auto') {
+              service.run({ ...service.params?.[0], filter });
+            }
+
             dn.emit('patch', {
               schema: {
                 ['x-uid']: fieldSchema['x-uid'],

packages/plugins/@nocobase/plugin-map/src/client/block/MapBlock.Settings.tsx

@@ -12,11 +12,12 @@ import {
   SchemaSettingsTemplate,
   mergeFilter,
   useCollection,
-  useCollectionManager,
   useDesignable,
   useFormBlockContext,
   SchemaSettings,
   useCollectionManager_deprecated,
+  setDataLoadingModeSettingsItem,
+  useDataLoadingMode,
 } from '@nocobase/client';
 import lodash from 'lodash';
 import { useMapTranslation } from '../locale';
@@ -127,6 +128,7 @@ export const mapBlockSettings = new SchemaSettings({
         };
       },
     },
+    setDataLoadingModeSettingsItem,
     {
       name: 'defaultZoomLevel',
       Component: SchemaSettingsModalItem,
@@ -177,6 +179,7 @@ export const mapBlockSettings = new SchemaSettings({
         const field = useField();
         const { service } = useMapBlockContext();
         const { dn } = useDesignable();
+        const dataLoadingMode = useDataLoadingMode();
         return {
           collectionName: name,
           defaultFilter: fieldSchema?.['x-decorator-props']?.params?.filter || {},
@@ -187,10 +190,14 @@ export const mapBlockSettings = new SchemaSettings({
             field.decoratorProps.params = params;
             fieldSchema['x-decorator-props']['params'] = params;
             const filters = service.params?.[1]?.filters || {};
-            service.run(
+
-              { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
+            if (dataLoadingMode === 'auto') {
-              { filters },
+              service.run(
-            );
+                { ...service.params?.[0], filter: mergeFilter([...Object.values(filters), filter]), page: 1 },
+                { filters },
+              );
+            }
+
             dn.emit('patch', {
               schema: {
                 ['x-uid']: fieldSchema['x-uid'],