refactor: support simple Paginate (#5093)

* refactor: support simple Paginate * chore: simple paginate * refactor: simplePaginate * fix: test * refactor: usePaginationProps * refactor: simplePaginate * fix: bug --------- Co-authored-by: Chareice <chareice@live.com>
2025-05-09 15:39:24 +08:00 · 2024-08-21 12:03:02 +08:00 · 2024-08-21 12:03:02 +08:00 · 5f5b97ed69
commit 5f5b97ed69
parent d2c7092861
10 changed files with 168 additions and 31 deletions
--- a/packages/core/actions/src/actions/list.ts
+++ b/packages/core/actions/src/actions/list.ts
@ -38,7 +38,7 @@ function findArgs(ctx: Context) {
 }

 async function listWithPagination(ctx: Context) {
-  const { page = DEFAULT_PAGE, pageSize = DEFAULT_PER_PAGE } = ctx.action.params;
+  const { page = DEFAULT_PAGE, pageSize = DEFAULT_PER_PAGE, simplePaginate } = ctx.action.params;

  const repository = getRepositoryFromParams(ctx);

@ -54,6 +54,14 @@ async function listWithPagination(ctx: Context) {
    }
  });

+  if (simplePaginate) {
+    const rows = await repository.find(options);
+    ctx.body = {
+      rows,
+      page: Number(page),
+      pageSize: Number(pageSize),
+    };
+  } else {
    const [rows, count] = await repository.findAndCount(options);

    ctx.body = {
@ -63,6 +71,7 @@ async function listWithPagination(ctx: Context) {
      pageSize: Number(pageSize),
      totalPage: totalPage(count, pageSize),
    };
+  }
 }

 async function listWithNonPaged(ctx: Context) {
--- a/packages/core/client/src/block-provider/TableBlockProvider.tsx
+++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx
@ -147,7 +147,7 @@ export const TableBlockProvider = withDynamicSchemaProps((props) => {
  const fieldSchema = useFieldSchema();
  const { getCollection, getCollectionField } = useCollectionManager_deprecated(props.dataSource);
  const collection = getCollection(props.collection, props.dataSource);
-  const { treeTable } = fieldSchema?.['x-decorator-props'] || {};
+  const { treeTable, pagingMode } = fieldSchema?.['x-decorator-props'] || {};
  const { params, parseVariableLoading } = useTableBlockParamsCompat(props);
  let childrenColumnName = 'children';

@ -166,6 +166,11 @@ export const TableBlockProvider = withDynamicSchemaProps((props) => {
      params['tree'] = true;
    }
  }
+  if (pagingMode === 'simplePaginate') {
+    params['simplePaginate'] = true;
+  } else {
+    delete params?.['simplePaginate'];
+  }
  const form = useMemo(() => createForm(), [treeTable]);

  // 在解析变量的时候不渲染，避免因为重复请求数据导致的资源浪费
--- a/packages/core/client/src/locale/zh-CN.json
+++ b/packages/core/client/src/locale/zh-CN.json
@ -964,5 +964,7 @@
  "Expand All": "展开全部",
  "Search": "搜索",
  "Clear default value": "清除默认值",
-  "Open in new window": "新窗口打开"
+  "Open in new window": "新窗口打开",
+  "Paging mode": "分页模式",
+  "Simple Paginate": "简单分页"
 }
--- a/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx
+++ b/packages/core/client/src/modules/blocks/data-blocks/table/tableBlockSettings.tsx
@ -24,6 +24,7 @@ import { setDataLoadingModeSettingsItem } from '../details-multi/setDataLoadingM
 import { setDefaultSortingRulesSchemaSettingsItem } from '../../../../schema-settings/setDefaultSortingRulesSchemaSettingsItem';
 import { setTheDataScopeSchemaSettingsItem } from '../../../../schema-settings/setTheDataScopeSchemaSettingsItem';
 import { createSwitchSettingsItem } from '../../../../application/schema-settings/utils';
+import { SchemaSettingsPagingMode } from '../../../../schema-settings/SchemaSettingsPagingMode';

 export const tableBlockSettings = new SchemaSettings({
  name: 'blockSettings:table',
@ -185,6 +186,10 @@ export const tableBlockSettings = new SchemaSettings({
        };
      },
    },
+    {
+      name: 'pagingMode',
+      Component: SchemaSettingsPagingMode,
+    },
    {
      name: 'ConnectDataBlocks',
      Component: SchemaSettingsConnectDataBlocks,
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@ -258,21 +258,61 @@ const TableIndex = (props) => {

 const usePaginationProps = (pagination1, pagination2) => {
  const { t } = useTranslation();
+  const field: any = useField();
+  const { token } = useToken();
  const pagination = useMemo(
    () => ({ ...pagination1, ...pagination2 }),
    [JSON.stringify({ ...pagination1, ...pagination2 })],
  );
-
-  const showTotal = useCallback((total) => t('Total {{count}} items', { count: total }), [t]);
-
-  const result = useMemo(
-    () => ({
+  const { total: totalCount, current, pageSize } = pagination || {};
+  const showTotal = useCallback(
+    (total) => {
+      return t('Total {{count}} items', { count: total });
+    },
+    [t, totalCount],
+  );
+  const result = useMemo(() => {
+    if (totalCount) {
+      return {
        showTotal,
        showSizeChanger: true,
        ...pagination,
-    }),
-    [pagination, t, showTotal],
+      };
+    } else {
+      return {
+        showTotal: false,
+        simple: true,
+        showTitle: false,
+        showSizeChanger: true,
+        hideOnSinglePage: false,
+        ...pagination,
+        total: field.value?.length < pageSize ? pageSize * current : pageSize * current + 1,
+        className: css`
+          .ant-pagination-simple-pager {
+            display: none !important;
+          }
+        `,
+        itemRender: (_, type, originalElement) => {
+          if (type === 'prev') {
+            return (
+              <div
+                style={{ display: 'flex' }}
+                className={css`
+                  .ant-pagination-item-link {
+                    min-width: ${token.controlHeight}px;
+                  }
+                `}
+              >
+                {originalElement} <div style={{ marginLeft: '7px' }}>{current}</div>
+              </div>
            );
+          } else {
+            return originalElement;
+          }
+        },
+      };
+    }
+  }, [pagination, t, showTotal]);

  if (pagination2 === false) {
    return false;
--- a/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/TableBlockDesigner.tsx
@ -30,7 +30,7 @@ import {
 } from '../../../schema-settings';
 import { SchemaSettingsBlockHeightItem } from '../../../schema-settings/SchemaSettingsBlockHeightItem';
 import { SchemaSettingsBlockTitleItem } from '../../../schema-settings/SchemaSettingsBlockTitleItem';
-
+import { SchemaSettingsPagingMode } from '../../../schema-settings/SchemaSettingsPagingMode';
 import { SchemaSettingsConnectDataBlocks } from '../../../schema-settings/SchemaSettingsConnectDataBlocks';
 import { SchemaSettingsDataScope } from '../../../schema-settings/SchemaSettingsDataScope';
 import { SchemaSettingsTemplate } from '../../../schema-settings/SchemaSettingsTemplate';
@ -301,6 +301,7 @@ export const TableBlockDesigner = () => {
          });
        }}
      />
+      <SchemaSettingsPagingMode />
      <SchemaSettingsConnectDataBlocks type={FilterBlockType.TABLE} emptyDescription={t('No blocks to connect')} />
      {supportTemplate && <SchemaSettingsDivider />}
      {supportTemplate && (
--- a/packages/core/client/src/schema-component/antd/table-v2/tests/Table.settings.test.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/tests/Table.settings.test.tsx
@ -219,6 +219,10 @@ describe('Table.settings', () => {
            },
          ],
        },
+        {
+          title: 'Paging mode',
+          type: 'select',
+        },
        {
          title: 'Save as template',
          type: 'modal',
--- a/packages/core/client/src/schema-settings/SchemaSettingsPagingMode.tsx
+++ b/packages/core/client/src/schema-settings/SchemaSettingsPagingMode.tsx
@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Field } from '@formily/core';
+import { useField, useFieldSchema } from '@formily/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useTableBlockContext } from '../block-provider';
+import { useDesignable } from '../schema-component/hooks/useDesignable';
+import { SchemaSettingsSelectItem } from './SchemaSettings';
+
+export function SchemaSettingsPagingMode() {
+  const field = useField<Field>();
+  const fieldSchema = useFieldSchema();
+  const { t } = useTranslation();
+  const { dn } = useDesignable();
+  const { service } = useTableBlockContext();
+  const options = [
+    {
+      value: 'default',
+      label: t('Default'),
+    },
+    {
+      value: 'simplePaginate',
+      label: t('Simple Paginate'),
+    },
+  ];
+
+  return (
+    <SchemaSettingsSelectItem
+      key="paging-mode"
+      title={t('Paging mode')}
+      options={options}
+      value={field.decoratorProps.pagingMode || 'default'}
+      onChange={(pagingMode) => {
+        fieldSchema['x-decorator-props'].pagingMode = pagingMode;
+        const params = { ...service.params?.[0] };
+        if (pagingMode === 'simplePaginate') {
+          params['simplePaginate'] = true;
+        } else {
+          delete params['simplePaginate'];
+        }
+        service.run({ params });
+        field.decoratorProps.pagingMode = pagingMode;
+        dn.emit('patch', {
+          schema: {
+            ['x-uid']: fieldSchema['x-uid'],
+            'x-decorator-props': fieldSchema['x-decorator-props'],
+          },
+        });
+        dn.refresh();
+      }}
+    />
+  );
+}
--- a/packages/core/client/src/schema-settings/index.ts
+++ b/packages/core/client/src/schema-settings/index.ts
@ -21,6 +21,7 @@ export * from './SchemaSettingsSortingRule';
 export * from './SchemaSettingsTemplate';
 export * from './SchemaSettingsBlockHeightItem';
 export * from './setDefaultSortingRulesSchemaSettingsItem';
+export * from './SchemaSettingsPagingMode';
 export * from './setTheDataScopeSchemaSettingsItem';
 export * from './hooks/useGetAriaLabelOfDesigner';
 export * from './hooks/useIsAllowToSetDefaultValue';
--- a/packages/core/data-source-manager/src/default-actions/list.ts
+++ b/packages/core/data-source-manager/src/default-actions/list.ts
@ -38,7 +38,7 @@ function findArgs(ctx: Context) {
 }

 async function listWithPagination(ctx: Context) {
-  const { page = 1, pageSize = 50 } = ctx.action.params;
+  const { page = 1, pageSize = 50, simplePaginate } = ctx.action.params;

  const repository = ctx.getCurrentRepository();

@ -54,6 +54,14 @@ async function listWithPagination(ctx: Context) {
    }
  });

+  if (simplePaginate) {
+    const rows = await repository.find(options);
+    ctx.body = {
+      rows,
+      page: Number(page),
+      pageSize: Number(pageSize),
+    };
+  } else {
    const [rows, count] = await repository.findAndCount(options);

    ctx.body = {
@ -63,6 +71,7 @@ async function listWithPagination(ctx: Context) {
      pageSize: Number(pageSize),
      totalPage: totalPage(count, pageSize),
    };
+  }
 }

 async function listWithNonPaged(ctx: Context) {