From c20c68cc42aedaeada94e32f20521f6e71b8a369 Mon Sep 17 00:00:00 2001 From: katherinehhh Date: Tue, 11 Jul 2023 17:43:25 +0800 Subject: [PATCH] fix: failed to correctly respond to optional fields in the child collection in the parent collection table (#2207) * refactor: process inherited field uischema in table * refactor: code improve * refactor: code improve * refactor: code improve * refactor: code improve * refactor: code improve * refactor: code improve --- .../src/block-provider/TableBlockProvider.tsx | 54 +------------------ .../CollectionFieldProvider.tsx | 8 ++- .../schema-component/antd/table-v2/Table.tsx | 14 +++-- .../components/ColumnFieldProvider.tsx | 33 ++++++++++++ 4 files changed, 50 insertions(+), 59 deletions(-) create mode 100644 packages/core/client/src/schema-component/antd/table-v2/components/ColumnFieldProvider.tsx diff --git a/packages/core/client/src/block-provider/TableBlockProvider.tsx b/packages/core/client/src/block-provider/TableBlockProvider.tsx index 642a73904..181ba8a57 100644 --- a/packages/core/client/src/block-provider/TableBlockProvider.tsx +++ b/packages/core/client/src/block-provider/TableBlockProvider.tsx @@ -1,10 +1,8 @@ import { ArrayField, createForm } from '@formily/core'; import { FormContext, useField, useFieldSchema } from '@formily/react'; -import { boolean } from 'mathjs'; import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; import { useCollectionManager } from '../collection-manager'; import { useFilterBlock } from '../filter-provider/FilterProvider'; -import { useRecord } from '../record-provider'; import { FixedBlockWrapper, removeNullCondition, SchemaComponentOptions } from '../schema-component'; import { BlockProvider, RenderChildrenWithAssociationFilter, useBlockRequestContext } from './BlockProvider'; import { findFilterTargets } from './hooks'; @@ -68,60 +66,9 @@ const InternalTableBlockProvider = (props: Props) => { ); }; -// export const useAssociationNames = (collection) => { -// const { getCollectionFields } = useCollectionManager(); -// const collectionFields = getCollectionFields(collection); -// const associationFields = new Set(); -// for (const collectionField of collectionFields) { -// if (collectionField.target) { -// associationFields.add(collectionField.name); -// const fields = getCollectionFields(collectionField.target); -// for (const field of fields) { -// if (field.target) { -// associationFields.add(`${collectionField.name}.${field.name}`); -// } -// } -// } -// } -// const fieldSchema = useFieldSchema(); -// const tableSchema = fieldSchema.reduceProperties((buf, schema) => { -// if (schema['x-component'] === 'TableV2') { -// return schema; -// } -// if (schema['x-component'] === 'Gantt') { -// return schema.properties?.table; -// } -// return buf; -// }, new Schema({})); -// return uniq( -// tableSchema.reduceProperties((buf, schema) => { -// if (schema['x-component'] === 'TableV2.Column') { -// const s = schema.reduceProperties((buf, s) => { -// const [name] = (s.name as string).split('.'); -// if (s['x-collection-field'] && associationFields.has(name)) { -// return s; -// } -// return buf; -// }, null); -// if (s) { -// // 关联字段和关联的关联字段 -// const [firstName] = s.name.split('.'); -// if (associationFields.has(s.name)) { -// buf.push(s.name); -// } else if (associationFields.has(firstName)) { -// buf.push(firstName); -// } -// } -// } -// return buf; -// }, []), -// ); -// }; - export const TableBlockProvider = (props) => { const resourceName = props.resource; const params = { ...props.params }; - const record = useRecord(); const fieldSchema = useFieldSchema(); const { getCollection, getCollectionField } = useCollectionManager(); const collection = getCollection(props.collection); @@ -170,6 +117,7 @@ export const useTableBlockProps = () => { useEffect(() => { if (!ctx?.service?.loading) { + field.value=[]; field.value = ctx?.service?.data?.data; field.data = field.data || {}; field.data.selectedRowKeys = ctx?.field?.data?.selectedRowKeys; diff --git a/packages/core/client/src/collection-manager/CollectionFieldProvider.tsx b/packages/core/client/src/collection-manager/CollectionFieldProvider.tsx index aec1f6496..f4e9351aa 100644 --- a/packages/core/client/src/collection-manager/CollectionFieldProvider.tsx +++ b/packages/core/client/src/collection-manager/CollectionFieldProvider.tsx @@ -13,9 +13,13 @@ export const CollectionFieldProvider: React.FC<{ const fieldSchema = useFieldSchema(); const { getField } = useCollection(); const { getCollectionJoinField } = useCollectionManager(); - const value = field || getField(field?.name || name) || getCollectionJoinField(fieldSchema?.['x-collection-field']); + const value = getCollectionJoinField(fieldSchema?.['x-collection-field']) || field || getField(field?.name || name); if (!value) { return fallback; } - return {children}; + return ( + + {children} + + ); }; diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx index 9c14fb7b6..fae849817 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx @@ -19,6 +19,7 @@ import { useTableSelectorContext, } from '../../../'; import { useACLFieldWhitelist } from '../../../acl/ACLProvider'; +import { ColumnFieldProvider } from './components/ColumnFieldProvider'; import { extractIndex, isCollectionFieldComponent, isColumnComponent } from './utils'; const useArrayField = (props) => { @@ -58,11 +59,16 @@ const useTableColumns = (props) => { return ( - + basePath={field.address.concat(record.__index || index)} + > + + ); diff --git a/packages/core/client/src/schema-component/antd/table-v2/components/ColumnFieldProvider.tsx b/packages/core/client/src/schema-component/antd/table-v2/components/ColumnFieldProvider.tsx new file mode 100644 index 000000000..88c540493 --- /dev/null +++ b/packages/core/client/src/schema-component/antd/table-v2/components/ColumnFieldProvider.tsx @@ -0,0 +1,33 @@ +import { observer, RecursionField } from '@formily/react'; +import React from 'react'; +import { useRecord } from '../../../../record-provider'; +export const ColumnFieldProvider = observer( + (props: { schema: any; basePath: any; children: any }) => { + const { schema, basePath } = props; + const record = useRecord(); + const fieldSchema = schema.reduceProperties((buf, s) => { + if (s['x-component'] === 'CollectionField') { + return s; + } + return buf; + }, null); + if (fieldSchema && record?.__collection) { + const fieldName = `${record.__collection}.${fieldSchema.name}`; + const newSchema = { + ...schema.toJSON(), + properties: { + [fieldSchema.name]: { + ...fieldSchema.toJSON(), + 'x-collection-field': fieldName, + 'x-component-props': { + ...fieldSchema['x-component-props'], + }, + }, + }, + }; + return ; + } + return props.children; + }, + { displayName: 'ColumnFieldProvider' }, +);