feat: relation field uiSchema (#487)

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/core/client/src/collection-manager/Configuration/AddFieldAction.tsx

@@ -113,7 +113,7 @@ const useCreateCollectionField = () => {
 
       recursiveChildren(form?.values?.children);
 
-      if (form?.values?.interface === 'linkTo' && title) {
+      if (['o2o', 'o2m', 'm2o', 'm2m', 'linkTo'].includes(form?.values?.interface) && title) {
         form.setValuesIn('reverseField.uiSchema.title', title);
       }
       await run();

packages/core/client/src/collection-manager/interfaces/o2m.tsx

@@ -1,6 +1,4 @@
 import { ISchema } from '@formily/react';
-import { cloneDeep } from 'lodash';
-import { recordPickerSelector, recordPickerViewer } from './properties';
 import { IField } from './types';
 
 export const o2m: IField = {
@@ -15,16 +13,14 @@ export const o2m: IField = {
     // name,
     uiSchema: {
       // title,
-      'x-component': 'RecordPicker',
-      // type: 'void',
-      // 'x-component': 'TableField',
+      'x-component': 'TableField',
       'x-component-props': {
         // mode: 'tags',
-        multiple: true,
-        fieldNames: {
-          label: 'id',
-          value: 'id',
-        },
+        // multiple: true,
+        // fieldNames: {
+        //   label: 'id',
+        //   value: 'id',
+        // },
       },
     },
     reverseField: {
@@ -45,16 +41,56 @@ export const o2m: IField = {
       },
     },
   },
-  schemaInitialize(schema: ISchema, { readPretty }) {
-    if (readPretty) {
-      schema['properties'] = {
-        viewer: cloneDeep(recordPickerViewer),
-      };
-    } else {
-      schema['properties'] = {
-        selector: cloneDeep(recordPickerSelector),
-      };
-    }
+  schemaInitialize(schema: ISchema, { field, readPretty }) {
+    const association = `${field.collectionName}.${field.name}`;
+    schema['type'] = 'void';
+    schema['x-component'] = 'TableField';
+    schema['properties'] = {
+      block: {
+        type: 'void',
+        'x-decorator': 'TableFieldProvider',
+        'x-decorator-props': {
+          collection: field.target,
+          association: association,
+          resource: association,
+          action: 'list',
+          params: {
+            paginate: false,
+          },
+          showIndex: true,
+          dragSort: false,
+        },
+        properties: {
+          actions: {
+            type: 'void',
+            'x-initializer': 'SubTableActionInitializers',
+            'x-component': 'TableField.ActionBar',
+            'x-component-props': {},
+          },
+          [field.name]: {
+            type: 'array',
+            'x-initializer': 'TableColumnInitializers',
+            'x-component': 'TableV2',
+            'x-component-props': {
+              rowSelection: {
+                type: 'checkbox',
+              },
+              useProps: '{{ useTableFieldProps }}',
+            },
+          },
+        },
+      },
+    };
+
+    // if (readPretty) {
+    //   schema['properties'] = {
+    //     viewer: cloneDeep(recordPickerViewer),
+    //   };
+    // } else {
+    //   schema['properties'] = {
+    //     selector: cloneDeep(recordPickerSelector),
+    //   };
+    // }
   },
   properties: {
     'uiSchema.title': {