fix: 修复分页问题 (#631)

Reviewed-on: daoyoucloud/tachycode#631
Co-authored-by: bai.jingfeng <bai.jingfeng@foxmail.com>
Co-committed-by: bai.jingfeng <bai.jingfeng@foxmail.com>
This commit is contained in:
bai.jingfeng 2024-04-08 18:19:26 +08:00 committed by sealday
parent 4c8698c6ed
commit cedcba2336
2 changed files with 26 additions and 18 deletions

View File

@ -6,6 +6,7 @@ import { mergeFilter } from '../../../../../filter-provider/utils';
import { removeNullCondition } from '../../../../../schema-component'; import { removeNullCondition } from '../../../../../schema-component';
import { findFilterTargets } from '../../../../../block-provider/hooks'; import { findFilterTargets } from '../../../../../block-provider/hooks';
import { useTableBlockContext } from '../../../../../block-provider/TableBlockProvider'; import { useTableBlockContext } from '../../../../../block-provider/TableBlockProvider';
import _ from 'lodash';
export const useTableBlockProps = () => { export const useTableBlockProps = () => {
const field = useField<ArrayField>(); const field = useField<ArrayField>();
@ -13,33 +14,38 @@ export const useTableBlockProps = () => {
const ctx = useTableBlockContext(); const ctx = useTableBlockContext();
const globalSort = fieldSchema.parent?.['x-decorator-props']?.['params']?.['sort']; const globalSort = fieldSchema.parent?.['x-decorator-props']?.['params']?.['sort'];
const { getDataBlocks } = useFilterBlock(); const { getDataBlocks } = useFilterBlock();
const isLoading = ctx?.service?.loading;
const params = ctx?.service?.params;
useEffect(() => { useEffect(() => {
if (!ctx?.service?.loading) { if (!isLoading) {
field.value = []; const serviceResponse = ctx?.service?.data;
field.value = ctx?.service?.data?.data; const data = serviceResponse?.data || [];
field?.setInitialValue(ctx?.service?.data?.data); const meta = serviceResponse?.meta || {};
field.data = field.data || {}; const selectedRowKeys = ctx?.field?.data?.selectedRowKeys;
field.data.selectedRowKeys = ctx?.field?.data?.selectedRowKeys;
field.componentProps.pagination = field.componentProps.pagination || {}; if (!_.isEqual(field.value, data)) {
field.componentProps.pagination.pageSize = ctx?.service?.data?.meta?.pageSize; field.value = data;
field.componentProps.pagination.total = ctx?.service?.data?.meta?.count; field?.setInitialValue(data);
field.componentProps.pagination.current = ctx?.service?.data?.meta?.page;
} }
}, [ctx?.service?.data, ctx?.service?.loading]); // 这里如果依赖了 ctx?.field?.data?.selectedRowKeys 的话,会导致这个问题: field.data = field.data || {};
if (!_.isEqual(field.data.selectedRowKeys, selectedRowKeys)) {
field.data.selectedRowKeys = selectedRowKeys;
}
field.componentProps.pagination = field.componentProps.pagination || {};
field.componentProps.pagination.pageSize = meta?.pageSize;
field.componentProps.pagination.total = meta?.count;
field.componentProps.pagination.current = meta?.page;
}
}, [ctx?.field?.data?.selectedRowKeys, ctx?.service?.data, field, isLoading]);
return { return {
childrenColumnName: ctx.childrenColumnName, childrenColumnName: ctx.childrenColumnName,
loading: ctx?.service?.loading, loading: ctx?.service?.loading,
showIndex: ctx.showIndex, showIndex: ctx.showIndex,
dragSort: ctx.dragSort && ctx.dragSortBy, dragSort: ctx.dragSort && ctx.dragSortBy,
rowKey: ctx.rowKey || 'id', rowKey: ctx.rowKey || 'id',
pagination: pagination: fieldSchema?.['x-component-props']?.pagination === false ? false : field.componentProps.pagination,
ctx?.params?.paginate !== false
? {
defaultCurrent: ctx?.params?.page || 1,
defaultPageSize: ctx?.params?.pageSize,
}
: false,
onRowSelectionChange(selectedRowKeys) { onRowSelectionChange(selectedRowKeys) {
ctx.field.data = ctx?.field?.data || {}; ctx.field.data = ctx?.field?.data || {};
ctx.field.data.selectedRowKeys = selectedRowKeys; ctx.field.data.selectedRowKeys = selectedRowKeys;

View File

@ -228,6 +228,8 @@ const TableIndex = (props) => {
const usePaginationProps = (pagination1, pagination2) => { const usePaginationProps = (pagination1, pagination2) => {
const { t } = useTranslation(); const { t } = useTranslation();
const showTotal = useCallback((total) => t('Total {{count}} items', { count: total }), [t]);
if (pagination2 === false) { if (pagination2 === false) {
return false; return false;
} }
@ -235,7 +237,7 @@ const usePaginationProps = (pagination1, pagination2) => {
return false; return false;
} }
const result = { const result = {
showTotal: (total) => t('Total {{count}} items', { count: total }), showTotal,
showSizeChanger: true, showSizeChanger: true,
...pagination1, ...pagination1,
...pagination2, ...pagination2,