feat: configurable the scope of target collections (#1165)

* feat: collection template support availableTargetCollections

* feat: add targetScope

* feat: code opmization

* feat: custom-collection-template improve

* feat: useAsyncDataSource fix

* feat: useAsyncDataSource fix

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

@@ -28,7 +28,7 @@ const getSchema = (schema, record: any, compile): ISchema => {
     properties['defaultValue']['x-decorator'] = 'FormItem';
   }
   const initialValue: any = {
-    name: `f_${uid()}`,
+    name: `t_${uid()}`,
     template: schema.name,
     ...cloneDeep(schema.default),
   };
@@ -198,7 +198,6 @@ const useCreateCollection = () => {
       await form.submit();
       const values = cloneDeep(form.values);
       const fields = useDefaultCollectionFields(values);
-      console.log(fields);
       if (values.autoCreateReverseField) {
       } else {
         delete values.reverseField;

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

@@ -28,7 +28,6 @@ const getSchema = (schema: IField, record: any, compile) => {
     properties['defaultValue']['title'] = compile('{{ t("Default value") }}');
     properties['defaultValue']['x-decorator'] = 'FormItem';
   }
-
   const initialValue: any = {
     name: `f_${uid()}`,
     ...cloneDeep(schema.default),
@@ -145,6 +144,7 @@ export const AddFieldAction = (props) => {
   const { scope, getContainer, item: record, children, trigger, align } = props;
   const { getInterface, getTemplate } = useCollectionManager();
   const [visible, setVisible] = useState(false);
+  const [targetScope, setTargetScope] = useState();
   const [schema, setSchema] = useState({});
   const compile = useCompile();
   const { t } = useTranslation();
@@ -165,18 +165,28 @@ export const AddFieldAction = (props) => {
           }),
         });
       } else {
-        const children = v.children.filter((v) => {
+        let children = [];
-          if (include?.length) {
+        if (include?.length) {
-            return include.includes(v.value);
+          include.forEach((k) => {
-          } else if (exclude?.length) {
+            const field = v.children.find((h) => [k, k.interface].includes(h.value));
+            field &&
+              children.push({
+                ...field,
+                targetScope: k?.targetScope,
+              });
+          });
+        } else if (exclude?.length) {
+          children = v.children.filter((v) => {
             return !exclude.includes(v.value);
-          }
+          });
-          return true;
+        } else {
-        });
+          children = v.children;
-        optionArr.push({
+        }
-          ...v,
+        children.length &&
-          children,
+          optionArr.push({
-        });
+            ...v,
+            children,
+          });
       }
     });
     return optionArr;
@@ -194,8 +204,11 @@ export const AddFieldAction = (props) => {
                 maxHeight: '60vh',
                 overflow: 'auto',
               }}
-              onClick={(info) => {
+              onClick={(e) => {
-                const schema = getSchema(getInterface(info.key), record, compile);
+                //@ts-ignore
+                const targetScope = e.item.props['data-targetScope'];
+                targetScope && setTargetScope(targetScope);
+                const schema = getSchema(getInterface(e.key), record, compile);
                 if (schema) {
                   setSchema(schema);
                   setVisible(true);
@@ -209,7 +222,11 @@ export const AddFieldAction = (props) => {
                       {option.children
                         .filter((child) => !['o2o', 'subTable'].includes(child.name))
                         .map((child) => {
-                          return <Menu.Item key={child.name}>{compile(child.title)}</Menu.Item>;
+                          return (
+                            <Menu.Item key={child.name} data-targetScope={child.targetScope}>
+                              {compile(child.title)}
+                            </Menu.Item>
+                          );
                         })}
                     </Menu.ItemGroup>
                   )
@@ -234,6 +251,7 @@ export const AddFieldAction = (props) => {
             useCreateCollectionField,
             record,
             showReverseFieldConfig: true,
+            targetScope,
             ...scope,
           }}
         />

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

@@ -3,7 +3,7 @@ import { ArrayField, Field } from '@formily/core';
 import { observer, RecursionField, Schema, useField, useFieldSchema } from '@formily/react';
 import { Table, TableColumnProps } from 'antd';
 import { default as classNames } from 'classnames';
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { findIndex } from 'lodash';
 import {

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

@@ -14,14 +14,16 @@ import { FieldSummary } from './components/FieldSummary';
 import { EditSubFieldAction } from './EditSubFieldAction';
 import { collectionSchema } from './schemas/collections';
 
-const useAsyncDataSource = (service: any) => (field: any) => {
+const useAsyncDataSource = (service: any) => {
-  field.loading = true;
+  return (field: any, options?: any) => {
-  service(field).then(
+    field.loading = true;
-    action.bound((data: any) => {
+    service(field, options).then(
-      field.dataSource = data;
+      action.bound((data: any) => {
-      field.loading = false;
+        field.dataSource = data;
-    }),
+        field.loading = false;
-  );
+      }),
+    );
+  };
 };
 
 const useSelectedRowKeys = () => {
@@ -77,9 +79,15 @@ export const ConfigurationTable = () => {
   const collectonsRef: any = useRef();
   collectonsRef.current = collections;
   const compile = useCompile();
-  const loadCollections = async (field: any) => {
+  const loadCollections = async (field, options) => {
+    const { targetScope } = options;
     return collectonsRef.current
       ?.filter((item) => !(item.autoCreate && item.isThrough))
+      .filter((item) =>
+        targetScope
+          ? targetScope['template']?.includes(item.template) || targetScope['name']?.includes(item.name)
+          : true,
+      )
       .map((item: any) => ({
         label: compile(item.title),
         value: item.name,

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

@@ -128,12 +128,18 @@ const getIsOverriding = (currentFields, record) => {
 };
 export const OverridingFieldAction = (props) => {
   const { scope, getContainer, item: record, children, currentCollection } = props;
-  const { getInterface, getCurrentCollectionFields } = useCollectionManager();
+  const { target } = record;
+  const { getInterface, getCurrentCollectionFields, getChildrenCollections } = useCollectionManager();
   const [visible, setVisible] = useState(false);
   const [schema, setSchema] = useState({});
   const api = useAPIClient();
   const { t } = useTranslation();
   const compile = useCompile();
+  const childCollections =
+    target &&
+    getChildrenCollections(target)
+      ?.map((v) => v.name)
+      .concat([target]);
   const [data, setData] = useState<any>({});
   const currentFields = getCurrentCollectionFields(currentCollection);
   const disabled = getIsOverriding(currentFields, record);
@@ -183,6 +189,7 @@ export const OverridingFieldAction = (props) => {
             useCancelAction,
             showReverseFieldConfig: !data?.reverseField,
             createOnly: true,
+            targetScope: { name: childCollections },
             ...scope,
           }}
         />

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

@@ -1,5 +1,5 @@
 import { ArrayTable } from '@formily/antd';
-import { ISchema, useForm } from '@formily/react';
+import { ISchema } from '@formily/react';
 import { uid } from '@formily/shared';
 import cloneDeep from 'lodash/cloneDeep';
 import set from 'lodash/set';

packages/core/client/src/collection-manager/templates/types.ts

@@ -1,12 +1,10 @@
 import { ISchema } from '@formily/react';
 import { FieldOptions } from '../../collection-manager/types';
 
-
-
 export interface ICollectionTemplate {
   name: string;
   title?: string;
-  color?:string;
+  color?: string;
   /** 排序 */
   order?: number;
   /** 默认配置 */
@@ -25,8 +23,9 @@ interface AvailableFieldInterfacesExclude {
   exclude?: any[];
 }
 
+
 interface CollectionOptions {
-  /** 
+  /**
    * 自动生成 id
    * @default true
    * */

packages/samples/custom-collection-template/src/client/index.tsx

@@ -18,9 +18,30 @@ const myCollectionTemplate: ICollectionTemplate = {
       },
     ],
   },
-  configurableProperties: getConfigurableProperties('name', 'title', 'inherits', 'createdAt', 'updatedAt'),
+  configurableProperties: getConfigurableProperties('title', 'name', 'inherits', 'createdAt', 'updatedAt'),
   availableFieldInterfaces: {
-    exclude: ['linkTo', 'o2o'],
+    include: [
+      'input',
+      {
+        interface: 'o2m',
+        targetScope: {
+          template: ['calendar'],
+        },
+      },
+      {
+        interface: 'm2m',
+        targetScope: {
+          template: ['calendar', 'myCollection'],
+        },
+      },
+      {
+        interface: 'linkTo',
+        targetScope: {
+          template: ['myCollection'],
+        },
+      },
+    ],
+    // exclude: ['input', 'linkTo'],
   },
 };