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
2024-11-15 08:36:44 +00:00 · 2022-12-01 14:24:35 +08:00 · 2022-12-01 14:24:35 +08:00 · d668aa0d92
commit d668aa0d92
parent 1f431dc2d6
8 changed files with 87 additions and 35 deletions
--- a/packages/core/client/src/collection-manager/Configuration/AddCollectionAction.tsx
+++ b/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;
--- a/packages/core/client/src/collection-manager/Configuration/AddFieldAction.tsx
+++ b/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) => {
-          if (include?.length) {
-            return include.includes(v.value);
-          } else if (exclude?.length) {
+        let children = [];
+        if (include?.length) {
+          include.forEach((k) => {
+            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;
-        });
-        optionArr.push({
-          ...v,
-          children,
-        });
+          });
+        } else {
+          children = v.children;
+        }
+        children.length &&
+          optionArr.push({
+            ...v,
+            children,
+          });
      }
    });
    return optionArr;
@ -194,8 +204,11 @@ export const AddFieldAction = (props) => {
                maxHeight: '60vh',
                overflow: 'auto',
              }}
-              onClick={(info) => {
-                const schema = getSchema(getInterface(info.key), record, compile);
+              onClick={(e) => {
+                //@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,
          }}
        />
--- a/packages/core/client/src/collection-manager/Configuration/CollectionFieldsTableArray.tsx
+++ b/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 {
--- a/packages/core/client/src/collection-manager/Configuration/ConfigurationTable.tsx
+++ b/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) => {
-  field.loading = true;
-  service(field).then(
-    action.bound((data: any) => {
-      field.dataSource = data;
-      field.loading = false;
-    }),
-  );
+const useAsyncDataSource = (service: any) => {
+  return (field: any, options?: any) => {
+    field.loading = true;
+    service(field, options).then(
+      action.bound((data: any) => {
+        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,
--- a/packages/core/client/src/collection-manager/Configuration/OverridingCollectionField.tsx
+++ b/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,
          }}
        />
--- a/packages/core/client/src/collection-manager/Configuration/ViewInheritedField.tsx
+++ b/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';
--- a/packages/core/client/src/collection-manager/templates/types.ts
+++ b/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
   * */
--- a/packages/samples/custom-collection-template/src/client/index.tsx
+++ b/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'],
  },
 };