diff --git a/packages/core/client/src/block-provider/DetailsBlockProvider.tsx b/packages/core/client/src/block-provider/DetailsBlockProvider.tsx index 4f228ab21..36a2a95b0 100644 --- a/packages/core/client/src/block-provider/DetailsBlockProvider.tsx +++ b/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, }; diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx index 517ef47a2..34170f93e 100644 --- a/packages/core/client/src/block-provider/TableBlockProvider.tsx +++ b/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] = { diff --git a/packages/core/client/src/block-provider/TableFieldProvider.tsx b/packages/core/client/src/block-provider/TableFieldProvider.tsx index 6b14b2e3f..18966e757 100644 --- a/packages/core/client/src/block-provider/TableFieldProvider.tsx +++ b/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, diff --git a/packages/core/client/src/block-provider/TableSelectorProvider.tsx b/packages/core/client/src/block-provider/TableSelectorProvider.tsx index 4d422b8e8..11f3903e0 100644 --- a/packages/core/client/src/block-provider/TableSelectorProvider.tsx +++ b/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, diff --git a/packages/core/client/src/block-provider/hooks/index.ts b/packages/core/client/src/block-provider/hooks/index.ts index 1a7efc58c..a7747989d 100644 --- a/packages/core/client/src/block-provider/hooks/index.ts +++ b/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]; } diff --git a/packages/core/client/src/data-source/data-block/DataBlockProvider.tsx b/packages/core/client/src/data-source/data-block/DataBlockProvider.tsx index cb1ea1170..6936566d6 100644 --- a/packages/core/client/src/data-source/data-block/DataBlockProvider.tsx +++ b/packages/core/client/src/data-source/data-block/DataBlockProvider.tsx @@ -24,6 +24,7 @@ export interface AllDataBlockProps { parentRecord?: CollectionRecord; requestService?: UseRequestService; requestOptions?: UseRequestOptions; + dataLoadingMode?: 'auto' | 'manual'; [index: string]: any; } diff --git a/packages/core/client/src/data-source/data-block/DataBlockRequestProvider.tsx b/packages/core/client/src/data-source/data-block/DataBlockRequestProvider.tsx index 45759d922..37c88569c 100644 --- a/packages/core/client/src/data-source/data-block/DataBlockRequestProvider.tsx +++ b/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>(null); BlockRequestContext.displayName = 'BlockRequestContext'; function useCurrentRequest(options: Omit) { + const dataLoadingMode = useDataLoadingMode(); const resource = useDataBlockResource(); const { action, params = {}, record, requestService, requestOptions } = options; if (params.filterByTk === undefined) { @@ -36,13 +38,13 @@ function useCurrentRequest(options: Omit) { // 因为修改 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]); diff --git a/packages/core/client/src/filter-provider/FilterProvider.tsx b/packages/core/client/src/filter-provider/FilterProvider.tsx index faaa7aee0..cf24dba71 100644 --- a/packages/core/client/src/filter-provider/FilterProvider.tsx +++ b/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; /** 清除筛选区块设置的筛选参数 */ 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 进行去重操作 diff --git a/packages/core/client/src/index.ts b/packages/core/client/src/index.ts index 64bcbcdff..7f62193cc 100644 --- a/packages/core/client/src/index.ts +++ b/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'; diff --git a/packages/core/client/src/locale/en_US.json b/packages/core/client/src/locale/en_US.json index f9e39fb4f..e3c4e97b4 100644 --- a/packages/core/client/src/locale/en_US.json +++ b/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", diff --git a/packages/core/client/src/locale/es_ES.json b/packages/core/client/src/locale/es_ES.json index 6bbf0c913..af55655a2 100644 --- a/packages/core/client/src/locale/es_ES.json +++ b/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", diff --git a/packages/core/client/src/locale/fr_FR.json b/packages/core/client/src/locale/fr_FR.json index a81918bae..852c37671 100644 --- a/packages/core/client/src/locale/fr_FR.json +++ b/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", diff --git a/packages/core/client/src/locale/ja_JP.json b/packages/core/client/src/locale/ja_JP.json index c5d8fc488..f70622c4c 100644 --- a/packages/core/client/src/locale/ja_JP.json +++ b/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(継承)", diff --git a/packages/core/client/src/locale/ko_KR.json b/packages/core/client/src/locale/ko_KR.json index e92098e09..5d0da90cd 100644 --- a/packages/core/client/src/locale/ko_KR.json +++ b/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": "필터 블록", diff --git a/packages/core/client/src/locale/pt_BR.json b/packages/core/client/src/locale/pt_BR.json index 5a0075d59..956dbd6ff 100644 --- a/packages/core/client/src/locale/pt_BR.json +++ b/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", diff --git a/packages/core/client/src/locale/ru_RU.json b/packages/core/client/src/locale/ru_RU.json index a53571217..cc7aac53f 100644 --- a/packages/core/client/src/locale/ru_RU.json +++ b/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": "Лицензия" -} \ No newline at end of file +} diff --git a/packages/core/client/src/locale/tr_TR.json b/packages/core/client/src/locale/tr_TR.json index 47acb64db..6a16fc2bd 100644 --- a/packages/core/client/src/locale/tr_TR.json +++ b/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" -} \ No newline at end of file +} diff --git a/packages/core/client/src/locale/uk_UA.json b/packages/core/client/src/locale/uk_UA.json index 2aceca92b..a9fcf430b 100644 --- a/packages/core/client/src/locale/uk_UA.json +++ b/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": "Таблиця", diff --git a/packages/core/client/src/locale/zh-CN.json b/packages/core/client/src/locale/zh-CN.json index 13f2b191e..d4ad16f75 100644 --- a/packages/core/client/src/locale/zh-CN.json +++ b/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": "筛选区块", diff --git a/packages/core/client/src/locale/zh-TW.json b/packages/core/client/src/locale/zh-TW.json index 14aed365a..5af1598dc 100644 --- a/packages/core/client/src/locale/zh-TW.json +++ b/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": "篩選區塊", diff --git a/packages/core/client/src/modules/blocks/data-blocks/details-multi/multiDataDetailsBlockSettings.ts b/packages/core/client/src/modules/blocks/data-blocks/details-multi/multiDataDetailsBlockSettings.tsx similarity index 95% rename from packages/core/client/src/modules/blocks/data-blocks/details-multi/multiDataDetailsBlockSettings.ts rename to packages/core/client/src/modules/blocks/data-blocks/details-multi/multiDataDetailsBlockSettings.tsx index d2cd919c9..d4a8601ef 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/details-multi/multiDataDetailsBlockSettings.ts +++ b/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, diff --git a/packages/core/client/src/modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem.tsx b/packages/core/client/src/modules/blocks/data-blocks/details-multi/setDataLoadingModeSettingsItem.tsx new file mode 100644 index 000000000..20707d7c1 --- /dev/null +++ b/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 ( + { + _.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); + } + }} + /> + ); +} diff --git a/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts b/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts index cc8a796f6..11938ba5b 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/grid-card/gridCardBlockSettings.ts +++ b/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', diff --git a/packages/core/client/src/modules/blocks/data-blocks/list/listBlockSettings.ts b/packages/core/client/src/modules/blocks/data-blocks/list/listBlockSettings.ts index 3f73310bb..32b4b179b 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/list/listBlockSettings.ts +++ b/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', diff --git a/packages/core/client/src/modules/blocks/data-blocks/table-selector/tableSelectorBlockSettings.ts b/packages/core/client/src/modules/blocks/data-blocks/table-selector/tableSelectorBlockSettings.ts index ff736f6ef..3960b9ff6 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table-selector/tableSelectorBlockSettings.ts +++ b/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', diff --git a/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx b/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx index 1a97d3374..3d9cdd7dc 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx +++ b/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 }, - { filters }, - ); + + if (dataLoadingMode === 'auto') { + 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', diff --git a/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts b/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts index fa89c4a11..6deb6d2a4 100644 --- a/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts +++ b/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(); + 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); }, }; }; diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.Settings.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.Settings.tsx index 463fcf5aa..55c57c97f 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/Form.Settings.tsx +++ b/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', diff --git a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx b/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx index 18384d580..ecb1c0fe5 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/GridCard.Decorator.tsx +++ b/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( { obj[cur] = cur; @@ -209,6 +210,7 @@ export const GridCardDesigner = () => { }); }} /> + { 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 ( { }); }} /> + { 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 = () => { }} /> )} + { const { name, title } = useCollection_deprecated(); @@ -126,6 +127,7 @@ export const TableSelectorDesigner = () => { }} /> )} + {!dragSort && (