@nocobase/client-v2 2.1.38 → 2.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.1.38",
+  "version": "2.1.40",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -27,11 +27,11 @@
     "@formily/antd-v5": "1.2.3",
     "@formily/react": "^2.2.27",
     "@formily/shared": "^2.2.27",
-    "@nocobase/evaluators": "2.1.38",
-    "@nocobase/flow-engine": "2.1.38",
-    "@nocobase/sdk": "2.1.38",
-    "@nocobase/shared": "2.1.38",
-    "@nocobase/utils": "2.1.38",
+    "@nocobase/evaluators": "2.1.40",
+    "@nocobase/flow-engine": "2.1.40",
+    "@nocobase/sdk": "2.1.40",
+    "@nocobase/shared": "2.1.40",
+    "@nocobase/utils": "2.1.40",
     "ahooks": "^3.7.2",
     "antd": "5.24.2",
     "antd-style": "3.7.1",
@@ -48,5 +48,5 @@
     "react-i18next": "^11.15.1",
     "react-router-dom": "^6.30.1"
   },
-  "gitHead": "cf73a1ede7f46029428d3ed143af2e5dc4f035e6"
+  "gitHead": "4099ac7037f46789c6eff98be54f20ae9fdde0e2"
 }

package/src/flow/actions/__tests__/linkageRules.subFormSetFieldProps.test.ts

@@ -18,6 +18,7 @@ import {
   subFormFieldLinkageRules,
   subFormLinkageSetFieldProps,
 } from '../linkageRules';
+import { CreateFormModel, EditFormModel, FormGridModel, FormItemModel, JSItemModel } from '../../models';
 
 const createSubFormFieldModel = ({
   uid,
@@ -1056,6 +1057,77 @@ describe('linkageSetFieldProps action', () => {
     expect(await screen.findByText('Published')).toBeTruthy();
   });
 
+  it.each([
+    ['create form', CreateFormModel, linkageSetFieldProps, false],
+    ['edit form', EditFormModel, linkageSetFieldProps, false],
+    ['to-one subform', FlowModel, subFormLinkageSetFieldProps, false],
+    ['to-many subform row', FlowModel, subFormLinkageSetFieldProps, true],
+  ])('should exclude JS items from %s field state options', async (_, ModelClass, action, useGridFork) => {
+    const engine = new FlowEngine();
+    engine.registerModels({
+      CreateFormModel,
+      EditFormModel,
+      FormGridModel,
+      FormItemModel,
+      JSItemModel,
+    });
+    const model = new ModelClass({
+      flowEngine: engine,
+      uid: 'form-model',
+      use: ModelClass.name,
+    }) as FlowModel;
+    const grid = engine.createModel<FormGridModel>({
+      use: 'FormGridModel',
+      uid: 'form-grid',
+    });
+    const fieldModel = engine.createModel<FormItemModel>({
+      use: 'FormItemModel',
+      uid: 'name-field',
+      props: { label: 'Name' },
+      subModels: {
+        field: {
+          use: 'FlowModel',
+          uid: 'name-field-component',
+        },
+      },
+    });
+    const jsItemModel = engine.createModel<JSItemModel>({
+      use: 'JSItemModel',
+      uid: 'js-item',
+      props: { label: 'JS item' },
+    });
+    Object.assign(model.subModels, {
+      grid: useGridFork
+        ? grid.createFork({}, 'row-0')
+        : Object.assign(grid, {
+            subModels: {
+              ...grid.subModels,
+              items: [fieldModel, jsItemModel],
+            },
+          }),
+    });
+    Object.assign(model.subModels.grid.subModels, {
+      items: [fieldModel, jsItemModel],
+    });
+    const ctx = model.context;
+    const Comp: any = action.uiSchema.value['x-component'];
+    const view = render(
+      React.createElement(
+        FlowSettingsContextProvider,
+        { value: ctx },
+        React.createElement(Comp, {
+          value: { fields: [] },
+          onChange: () => {},
+        }),
+      ),
+    );
+
+    fireEvent.mouseDown(view.container.querySelector('.ant-select-selector') as Element);
+
+    expect(await screen.findByText('Name')).toBeTruthy();
+    expect(screen.queryByText('JS item')).toBeNull();
+  });
+
   it('should only show options state for supported single field selection', () => {
     const supportedField: any = {
       uid: 'status-field',

package/src/flow/actions/linkageRules.tsx

@@ -124,11 +124,16 @@ const isActionFlowModel = (model: any): boolean => {
   return false;
 };
 
+const isFormFieldModel = (model: unknown): model is FlowModel => {
+  if (!model || typeof model !== 'object') return false;
+  return !!(model as FlowModel).subModels?.field;
+};
+
 // 获取表单中所有字段的 model 实例的通用函数
 const getFormFields = (ctx: any) => {
   try {
     const fieldModels = ctx.model?.subModels?.grid?.subModels?.items || [];
-    return fieldModels.map((model: any) => ({
+    return fieldModels.filter(isFormFieldModel).map((model) => ({
       label: model.props.label || model.props.name,
       value: model.uid,
       model,
@@ -350,8 +355,8 @@ const FieldStateEditor = ({
 const getFormFieldsByForkModel = (ctx: any) => {
   try {
     const fieldModels = ctx.model?.subModels?.grid?.subModels?.items || [];
-    return fieldModels.map((model: any) => {
-      const forkModel = Array.from(model.forks)[0] as any;
+    return fieldModels.filter(isFormFieldModel).map((model) => {
+      const forkModel = Array.from(model.forks)[0] as FlowModel | undefined;
 
       if (forkModel) {
         return {

package/src/flow/models/blocks/filter-form/FilterFormGridModel.tsx

@@ -59,11 +59,42 @@ export class FilterFormGridModel extends GridModel {
 
   readonly loading = observable.ref(false);
 
-  private getAssociationFilterTargetKey(field: any) {
-    const filterTargetKey = field?.targetCollection?.filterTargetKey;
+  private isRecordSelectFilterField(subModel: FilterFormItemModel) {
+    const fieldModel = subModel.subModels?.field;
+    if (!fieldModel) {
+      return true;
+    }
+
+    const RecordSelectModel = this.flowEngine.getModelClass('FilterFormRecordSelectFieldModel');
+    if (!RecordSelectModel) {
+      return fieldModel.constructor?.name === 'FilterFormRecordSelectFieldModel';
+    }
+
+    return fieldModel instanceof RecordSelectModel;
+  }
+
+  private getAssociationFilterTargetKey(field: any, subModel: FilterFormItemModel) {
+    const normalizeKey = (key: any) => {
+      if (Array.isArray(key)) {
+        return key[0];
+      }
+      return key;
+    };
+
+    const fieldModelValueKey = normalizeKey(subModel.subModels?.field?.props?.fieldNames?.value);
+    if (fieldModelValueKey) {
+      return fieldModelValueKey;
+    }
+
+    const filterTargetKey = normalizeKey(field?.targetCollection?.filterTargetKey);
+    const fieldTargetKey = normalizeKey(field?.targetKey);
+
+    if (filterTargetKey && filterTargetKey !== 'id') {
+      return filterTargetKey;
+    }
 
-    if (Array.isArray(filterTargetKey)) {
-      return filterTargetKey[0] || 'id';
+    if (!this.isRecordSelectFilterField(subModel) && fieldTargetKey) {
+      return fieldTargetKey;
     }
 
     return filterTargetKey || 'id';
@@ -370,7 +401,7 @@ export class FilterFormGridModel extends GridModel {
           if (field?.target) {
             return {
               targetId: model.uid,
-              filterPaths: [`${fieldPath}.${this.getAssociationFilterTargetKey(field)}`],
+              filterPaths: [`${fieldPath}.${this.getAssociationFilterTargetKey(field, subModel)}`],
             };
           }
         }

package/src/flow/models/blocks/filter-form/FilterFormItemModel.tsx

@@ -31,6 +31,12 @@ import {
 import { FilterFormFieldModel } from './fields';
 import { normalizeFilterValueByOperator } from './valueNormalization';
 
+type CollectionWithManager = Collection & {
+  collectionManager?: {
+    getCollection?: (name: string) => Collection | undefined;
+  };
+};
+
 const getAssociationTargetCollection = (field: any, collection?: Collection, model?: CollectionBlockModel) => {
   if (field?.targetCollection) {
     return field.targetCollection;
@@ -42,6 +48,10 @@ const getAssociationTargetCollection = (field: any, collection?: Collection, mod
   if (collection?.dataSource?.getCollection) {
     return collection.dataSource.getCollection(targetName);
   }
+  const collectionManager = (collection as CollectionWithManager | undefined)?.collectionManager;
+  if (collectionManager?.getCollection) {
+    return collectionManager.getCollection(targetName);
+  }
   const dataSourceKey = collection?.dataSourceKey;
   if (dataSourceKey && model?.context?.dataSourceManager?.getCollection) {
     return model.context.dataSourceManager.getCollection(dataSourceKey, targetName);
@@ -168,6 +178,74 @@ const buildVirtualFilterCollectionField = (ctx: FlowModelContext, filterField: a
   return result;
 };
 
+const getFilterableChildren = (field: any) => {
+  const children = field?.filterable?.children;
+  return Array.isArray(children) ? children : [];
+};
+
+const hasAssociationChildren = (field: any, collection?: Collection, model?: CollectionBlockModel) => {
+  return (
+    isAssociationCollectionField(field) &&
+    (getFilterableChildren(field).length > 0 || !!getAssociationTargetCollection(field, collection, model))
+  );
+};
+
+const inferFilterableChildInterface = (child: any) => {
+  if (child?.interface) {
+    return child.interface;
+  }
+
+  const schema = child?.schema || child?.uiSchema;
+  const component = schema?.['x-component'];
+  if (component === 'Select') {
+    return 'select';
+  }
+  if (component === 'Checkbox.Group') {
+    return 'checkboxGroup';
+  }
+  if (component === 'Checkbox') {
+    return 'checkbox';
+  }
+
+  const type = child?.type || schema?.type;
+  if (type === 'number' || type === 'integer') {
+    return 'number';
+  }
+  return 'input';
+};
+
+const translateFilterableChildTitle = (title: unknown, t: (value: string) => string) => {
+  return typeof title === 'string' ? t(title) : title;
+};
+
+const buildFilterableChildField = (child: any, t: (value: string) => string) => {
+  const name = child?.name || child?.value;
+  if (!name) {
+    return;
+  }
+
+  const schema = child?.schema || child?.uiSchema || {};
+  const rawTitle = child?.title || child?.label || schema?.title || name;
+  const title = translateFilterableChildTitle(rawTitle, t);
+  const filterable = child?.filterable || (child?.operators ? { operators: child.operators } : undefined);
+
+  return {
+    ...child,
+    name,
+    title,
+    type: child?.type || schema?.type || 'string',
+    interface: inferFilterableChildInterface(child),
+    uiSchema: {
+      ...schema,
+      title: translateFilterableChildTitle(schema?.title || title, t),
+    },
+    filterable,
+    __filterFormVirtual: true,
+    isAssociationField: () => false,
+    getComponentProps: () => schema?.['x-component-props'] || {},
+  };
+};
+
 const buildFilterFormFieldItem = ({
   model,
   collection,
@@ -187,11 +265,7 @@ const buildFilterFormFieldItem = ({
   if (!binding) {
     return;
   }
-  const isAssociation = isAssociationCollectionField(field);
-  const fieldModel =
-    isAssociation && ctxWithFlags.engine?.getModelClass?.('FilterFormRecordSelectFieldModel')
-      ? 'FilterFormRecordSelectFieldModel'
-      : binding.modelName;
+  const fieldModel = binding.modelName;
   const label = field.title || field.name;
   const displayLabel = labelPrefix ? `${labelPrefix} / ${label}` : label;
   return {
@@ -211,7 +285,10 @@ const buildFilterFormFieldItem = ({
         },
         filterFormItemSettings: {
           init: {
-            filterField: _.pick(field, ['name', 'title', 'interface', 'type']),
+            filterField: {
+              ..._.pick(field, ['name', 'title', 'interface', 'type', 'filterable', 'uiSchema', '__filterFormVirtual']),
+              title: displayLabel,
+            },
             defaultTargetUid: model.uid,
           },
         },
@@ -245,7 +322,8 @@ const buildAssociationFieldMenuItem = ({
   depth: number;
 }) => {
   const targetCollection = getAssociationTargetCollection(field, collection, model);
-  if (!targetCollection) {
+  const filterableChildren = getFilterableChildren(field);
+  if (!targetCollection && !filterableChildren.length) {
     return;
   }
   if (depth > MAX_ASSOCIATION_DEPTH) {
@@ -262,10 +340,35 @@ const buildAssociationFieldMenuItem = ({
       const targetFields = getTargetFilterableFields(field, collection, model);
       const fieldItems: any[] = [];
       const associationItems: any[] = [];
+      const addedFieldPaths = new Set<string>();
+
+      filterableChildren.forEach((child: any) => {
+        const virtualChildField = buildFilterableChildField(child, t);
+        if (!virtualChildField) {
+          return;
+        }
+
+        const childFieldPath = `${fieldPath}.${virtualChildField.name}`;
+        const childItem = buildFilterFormFieldItem({
+          model,
+          collection,
+          ctxWithFlags,
+          field: virtualChildField,
+          fieldPath: childFieldPath,
+          labelPrefix: label,
+        });
+        if (childItem) {
+          addedFieldPaths.add(childFieldPath);
+          fieldItems.push(childItem);
+        }
+      });
 
       targetFields.forEach((targetField: any) => {
         const targetFieldPath = `${fieldPath}.${targetField.name}`;
-        if (targetField?.targetCollection) {
+        if (addedFieldPaths.has(targetFieldPath)) {
+          return;
+        }
+        if (hasAssociationChildren(targetField, collection, model)) {
           const associationItem = buildAssociationFieldMenuItem({
             model,
             collection,
@@ -358,7 +461,7 @@ const getModelFieldGroups = async (model: CollectionBlockModel) => {
       baseItems.push(baseItem);
     }
 
-    if (field?.targetCollection) {
+    if (hasAssociationChildren(field, collection, model)) {
       const associationItem = buildAssociationFieldMenuItem({
         model,
         collection,
@@ -489,6 +592,14 @@ export class FilterFormItemModel extends FilterableItemModel<{
           title: initFilterField?.title || initFilterField?.name,
         },
       });
+      if (initFilterField?.__filterFormVirtual) {
+        const virtualField = buildVirtualFilterCollectionField(this.context, initFilterField);
+        if (virtualField) {
+          this.context.defineProperty('collectionField', {
+            value: virtualField,
+          });
+        }
+      }
     }
   }
 
@@ -692,7 +803,8 @@ FilterFormItemModel.registerFlow({
           // @ts-ignore
           (fieldSettingsInitParams?.dataSourceKey && fieldSettingsInitParams?.collectionName)
         );
-        if (!hasCollectionContext && !collectionField && normalizedFilterField) {
+        const shouldUseVirtualFilterField = !!normalizedFilterField?.__filterFormVirtual;
+        if ((shouldUseVirtualFilterField || (!hasCollectionContext && !collectionField)) && normalizedFilterField) {
           const virtualField = buildVirtualFilterCollectionField(ctx, normalizedFilterField);
           if (virtualField) {
             ctx.model.context.defineProperty('collectionField', {
@@ -787,10 +899,13 @@ FilterFormItemModel.registerFlow({
           type: 'select',
           key: 'use',
           props: {
-            options: classes.map((model) => ({
-              label: t(model.modelName),
-              value: model.modelName,
-            })),
+            options: classes.map((model) => {
+              const ModelClass = ctx.engine.getModelClass(model.modelName);
+              return {
+                label: t(ModelClass?.meta?.label || model.modelName),
+                value: model.modelName,
+              };
+            }),
           },
         };
       },

package/src/flow/models/blocks/filter-form/FilterFormSubmitActionModel.tsx

@@ -8,23 +8,76 @@
  */
 
 import type { ButtonProps } from 'antd/es/button';
+import { reaction } from '@formily/reactive';
 import { tExpr } from '@nocobase/flow-engine';
 import { FilterFormActionModel } from './FilterFormActionModel';
 
+type FilterFormBlockState = {
+  autoTriggerFilter: boolean;
+};
+
+const mountedSubmitActions = new WeakSet<object>();
+const visibleSubmitActionsByBlock = new WeakMap<FilterFormBlockState, Set<object>>();
+const hiddenReactionDisposers = new WeakMap<object, () => void>();
+
+const syncAutoTriggerFilter = (blockModel: FilterFormBlockState, lifecycleAction: object & { hidden?: boolean }) => {
+  let visibleSubmitActions = visibleSubmitActionsByBlock.get(blockModel);
+
+  if (mountedSubmitActions.has(lifecycleAction) && !lifecycleAction.hidden) {
+    if (!visibleSubmitActions) {
+      visibleSubmitActions = new Set<object>();
+      visibleSubmitActionsByBlock.set(blockModel, visibleSubmitActions);
+    }
+    visibleSubmitActions.add(lifecycleAction);
+  } else {
+    visibleSubmitActions?.delete(lifecycleAction);
+  }
+
+  blockModel.autoTriggerFilter = Boolean(!visibleSubmitActions?.size);
+  if (!visibleSubmitActions?.size) {
+    visibleSubmitActionsByBlock.delete(blockModel);
+  }
+};
+
 export class FilterFormSubmitActionModel extends FilterFormActionModel {
   defaultProps: ButtonProps = {
     title: tExpr('Filter'),
     type: 'primary',
   };
 
-  onInit(options): void {
-    super.onInit(options);
-    this.context.blockModel.autoTriggerFilter = false;
+  private getLifecycleAction(): object & { hidden?: boolean } {
+    return this.context.model || this;
+  }
+
+  private syncAutoTriggerFilter(): void {
+    const blockModel = this.context.blockModel as FilterFormBlockState;
+    const lifecycleAction = this.getLifecycleAction();
+    syncAutoTriggerFilter(blockModel, lifecycleAction);
+  }
+
+  onMount(): void {
+    super.onMount();
+    const blockModel = this.context.blockModel as FilterFormBlockState;
+    const lifecycleAction = this.getLifecycleAction();
+    mountedSubmitActions.add(lifecycleAction);
+    hiddenReactionDisposers.get(lifecycleAction)?.();
+    hiddenReactionDisposers.set(
+      lifecycleAction,
+      reaction(
+        () => lifecycleAction.hidden,
+        () => syncAutoTriggerFilter(blockModel, lifecycleAction),
+      ),
+    );
+    this.syncAutoTriggerFilter();
   }
 
   onUnmount(): void {
     super.onUnmount();
-    this.context.blockModel.autoTriggerFilter = true;
+    const lifecycleAction = this.getLifecycleAction();
+    hiddenReactionDisposers.get(lifecycleAction)?.();
+    hiddenReactionDisposers.delete(lifecycleAction);
+    mountedSubmitActions.delete(lifecycleAction);
+    this.syncAutoTriggerFilter();
   }
 }