From 2d2e949452f12bf81e778168f65600b3a266b0dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=A2=AB=E9=9B=A8=E6=B0=B4=E8=BF=87=E6=BB=A4=E7=9A=84?= =?UTF-8?q?=E7=A9=BA=E6=B0=94-Rairn?= <958414905@qq.com> Date: Tue, 18 Apr 2023 10:23:27 +0800 Subject: [PATCH] fix(record-picker): fix the table paging problem (#1718) * fix(record-picker): fix the table paging problem * fix(recorder-picker): de-duplication --- .../block-provider/TableSelectorProvider.tsx | 46 +++++++++++++++++-- .../antd/record-picker/InputRecordPicker.tsx | 46 ++++++++++++------- 2 files changed, 73 insertions(+), 19 deletions(-) diff --git a/packages/core/client/src/block-provider/TableSelectorProvider.tsx b/packages/core/client/src/block-provider/TableSelectorProvider.tsx index 8620d020b..39a622836 100644 --- a/packages/core/client/src/block-provider/TableSelectorProvider.tsx +++ b/packages/core/client/src/block-provider/TableSelectorProvider.tsx @@ -6,8 +6,39 @@ import { useCollectionManager } from '../collection-manager'; import { RecordProvider, useRecord } from '../record-provider'; import { SchemaComponentOptions } from '../schema-component'; import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestContext } from './BlockProvider'; +import { mergeFilter } from './SharedFilterProvider'; + +type Params = { + filter?: any; + pageSize?: number; + page?: number; + sort?: any; +}; export const TableSelectorContext = createContext({}); +const TableSelectorParamsContext = createContext({}); // 用于传递参数 + +type TableSelectorProviderProps = { + params: Record; + collection?: string; + dragSort?: boolean; + children?: any; +}; + +const useTableSelectorParams = () => { + return useContext(TableSelectorParamsContext); +}; + +export const TableSelectorParamsProvider = ({ params, children }: { params: Params; children: any }) => { + const parentParams = useTableSelectorParams(); + try { + params.filter = mergeFilter([parentParams.filter, params.filter]); + params = { ...parentParams, ...params }; + } catch (err) { + console.error(err); + } + return {children}; +}; const InternalTableSelectorProvider = (props) => { const { params, rowKey, extraFilter } = props; @@ -102,7 +133,8 @@ const useAssociationNames = (collection) => { ); }; -export const TableSelectorProvider = (props) => { +export const TableSelectorProvider = (props: TableSelectorProviderProps) => { + const parentParams = useTableSelectorParams(); const fieldSchema = useFieldSchema(); const { getCollectionJoinField, getCollectionFields } = useCollectionManager(); const record = useRecord(); @@ -111,12 +143,12 @@ export const TableSelectorProvider = (props) => { const { treeTable } = fieldSchema?.['x-decorator-props'] || {}; const collectionFieldSchema = recursiveParent(fieldSchema, 'CollectionField'); const collectionField = getCollectionJoinField(collectionFieldSchema?.['x-collection-field']); - const params = { ...props.params }; const appends = useAssociationNames(props.collection); + let params = { ...props.params }; if (props.dragSort) { params['sort'] = ['sort']; } - if (collection.tree && treeTable !== false) { + if (collection?.tree && treeTable !== false) { params['tree'] = true; if (collectionFieldSchema.name === 'parent') { params.filter = { @@ -195,6 +227,14 @@ export const TableSelectorProvider = (props) => { params['filter'] = extraFilter; } } + + try { + params.filter = mergeFilter([parentParams.filter, params.filter]); + params = { ...parentParams, ...params }; + } catch (err) { + console.error(err); + } + return ( diff --git a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx index dc1d0249a..5f673bfd9 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/InputRecordPicker.tsx @@ -3,7 +3,10 @@ import { RecursionField, useField, useFieldSchema } from '@formily/react'; import { Select } from 'antd'; import { differenceBy, unionBy } from 'lodash'; import React, { createContext, useContext, useEffect, useState } from 'react'; -import { useTableSelectorProps as useTsp } from '../../../block-provider/TableSelectorProvider'; +import { + TableSelectorParamsProvider, + useTableSelectorProps as useTsp, +} from '../../../block-provider/TableSelectorProvider'; import { CollectionProvider, useCollection } from '../../../collection-manager'; import { FormProvider, SchemaComponentOptions } from '../../core'; import { useCompile } from '../../hooks'; @@ -47,7 +50,6 @@ const useTableSelectorProps = () => { .filter((item) => options.every((row) => row[rowKey] !== item[rowKey])) .map((item) => item[rowKey]), }, - dataSource: field.value?.filter((item) => options.every((row) => row[rowKey] !== item[rowKey])), onRowSelectionChange(selectedRowKeys, selectedRows) { if (multiple) { const scopeRows = flatData(field.value) || []; @@ -69,11 +71,11 @@ const useTableSelectorProps = () => { const usePickActionProps = () => { const { setVisible } = useActionContext(); - const { multiple, selectedRows, onChange, options } = useContext(RecordPickerContext); + const { multiple, selectedRows, onChange, options, collectionField } = useContext(RecordPickerContext); return { onClick() { if (multiple) { - onChange([...options, ...selectedRows]); + onChange(unionBy(selectedRows, options, collectionField?.targetKey || 'id')); } else { onChange(selectedRows?.[0] || null); } @@ -182,10 +184,10 @@ export const InputRecordPicker: React.FC = (props: IRecordPickerProps) => { allowClear onChange={(changed: any) => { if (!changed) { - onChange(null); + onChange([]); setSelectedRows([]); } else if (!changed?.length) { - onChange(null); + onChange([]); setSelectedRows([]); } else if (Array.isArray(changed)) { const values = options?.filter((option) => changed.includes(option[fieldNames.value])); @@ -234,20 +236,32 @@ const Drawer: React.FunctionComponent<{ fieldSchema, options, }) => { + console.log('collectionField', options); + const getFilter = () => { + const targetKey = collectionField.targetKey || 'id'; + const list = options.map((option) => option[targetKey]); + const filter = list.length ? { $and: [{ [`${targetKey}.$ne`]: list }] } : {}; + return filter; + }; + return ( - + - - { - return s['x-component'] === 'RecordPicker.Selector'; - }} - /> - + + + { + return s['x-component'] === 'RecordPicker.Selector'; + }} + /> + +