@nocobase/client-v2 2.4.0-alpha.4 → 2.4.0-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocobase/client-v2",
-  "version": "2.4.0-alpha.4",
+  "version": "2.4.0-alpha.5",
   "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.4.0-alpha.4",
-    "@nocobase/flow-engine": "2.4.0-alpha.4",
-    "@nocobase/sdk": "2.4.0-alpha.4",
-    "@nocobase/shared": "2.4.0-alpha.4",
-    "@nocobase/utils": "2.4.0-alpha.4",
+    "@nocobase/evaluators": "2.4.0-alpha.5",
+    "@nocobase/flow-engine": "2.4.0-alpha.5",
+    "@nocobase/sdk": "2.4.0-alpha.5",
+    "@nocobase/shared": "2.4.0-alpha.5",
+    "@nocobase/utils": "2.4.0-alpha.5",
     "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": "527910882037ce1558ee6b0ef748208b8d6996bb"
+  "gitHead": "ce4b0948641b13d2964c44905cb30bebe877a657"
 }

package/src/collection-manager/__tests__/field-configure.test.ts

@@ -0,0 +1,52 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { getCoreFieldConfigureState, reverseFieldConfigureItems } from '../field-configure';
+
+describe('inverse relationship configuration', () => {
+  it.each(['hasOne', 'hasMany', 'belongsTo', 'belongsToMany'])(
+    'keeps the %s inverse relationship type disabled when creating or editing a field',
+    (type) => {
+      for (const createOnly of [true, false]) {
+        for (const showReverseFieldConfig of [true, false]) {
+          const values = {
+            autoCreateReverseField: true,
+            reverseField: { type, ...(createOnly ? {} : { key: 'existing-reverse-field' }) },
+          };
+
+          expect(
+            getCoreFieldConfigureState('reverseField.type', values, { createOnly, showReverseFieldConfig }),
+          ).toEqual({
+            disabled: true,
+            hidden: !showReverseFieldConfig,
+          });
+        }
+      }
+    },
+  );
+
+  it.each(['reverseField.name', 'reverseField.uiSchema.title'])(
+    'allows editing %s only when the inverse configuration is visible',
+    (name) => {
+      for (const showReverseFieldConfig of [true, false]) {
+        expect(getCoreFieldConfigureState(name, {}, { showReverseFieldConfig })).toEqual({
+          disabled: !showReverseFieldConfig,
+          hidden: !showReverseFieldConfig,
+        });
+      }
+    },
+  );
+
+  it('also disables the inverse relationship type in explicit configure items', () => {
+    const item = reverseFieldConfigureItems().find(({ name }) => name === 'reverseField.type');
+
+    expect(item?.disabled).toBe(true);
+  });
+});

package/src/collection-manager/field-configure.ts

@@ -271,7 +271,7 @@ export function getCoreFieldConfigureState(
 
   if (name.startsWith('reverseField.')) {
     return {
-      disabled: !context.showReverseFieldConfig,
+      disabled: name === 'reverseField.type' || !context.showReverseFieldConfig,
       hidden: !context.showReverseFieldConfig,
     };
   }
@@ -514,7 +514,7 @@ export function reverseFieldConfigureItems(): FieldConfigureItem[] {
         { label: "{{t('BelongsToMany')}}", value: 'belongsToMany' },
       ],
       hidden: ({ context, values }) => !context.showReverseFieldConfig && !get(values, 'autoCreateReverseField'),
-      disabled: ({ context }) => !context.showReverseFieldConfig,
+      disabled: true,
     },
     {
       name: 'reverseField.uiSchema.title',

package/src/flow/models/blocks/form/FormBlockModel.tsx

@@ -399,20 +399,41 @@ export class FormBlockModel<
           if (Array.isArray(topValue) && topValue.length === 0) return false;
 
           // 本地优先：支持对多关系的 dot 聚合路径（例如 assignees.name）。
-          // lodash.get 对数组聚合路径会返回 undefined（如 _.get({ assignees:[{name:'A'}] }, 'assignees.name')），
-          // 因而这里先用 getValuesByPath 做一次前端可解析性检查，命中则直接前端解析。
+          // 关联字段只有在本地值包含目标标题字段时才算完整；标量外键或仅含主键的轻量对象仍需服务端补全。
           const formValuesSnapshot = runtime.getFormValuesSnapshot();
+          let shouldResolveAssociationValueOnServer = false;
           if (formValuesSnapshot && typeof formValuesSnapshot === 'object') {
-            const localResolved = getValuesByPath(formValuesSnapshot as Record<string, any>, subPath);
+            const localResolved = getValuesByPath(formValuesSnapshot as Record<string, unknown>, subPath);
             if (typeof localResolved !== 'undefined') {
-              return false;
+              const fieldPath = subPath
+                .replace(/\[\d+\]/g, '')
+                .split('.')
+                .filter((segment) => !/^\d+$/.test(segment))
+                .join('.');
+              const resolvedField = this.collection?.getFieldByPath?.(fieldPath);
+              const titleFieldName = resolvedField?.targetCollectionTitleFieldName;
+              const isLoadedAssociationRecord = (value: unknown) => {
+                if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+                if (!titleFieldName) return true;
+                return typeof (value as Record<string, unknown>)[titleFieldName] !== 'undefined';
+              };
+              const isAssociationValueLoaded =
+                localResolved === null ||
+                (Array.isArray(localResolved)
+                  ? localResolved.length === 0 ||
+                    localResolved.every((value) => value === null || isLoadedAssociationRecord(value))
+                  : isLoadedAssociationRecord(localResolved));
+              if (!resolvedField?.isAssociationField?.() || isAssociationValueLoaded) {
+                return false;
+              }
+              shouldResolveAssociationValueOnServer = true;
             }
           }
 
           // 已配置字段：仅关联字段的子路径按需服务端补全（保持现有语义）
           const assocResolver = createAssociationSubpathResolver(
             () => this.collection,
-            () => runtime.getFormValuesSnapshot(),
+            shouldResolveAssociationValueOnServer ? undefined : () => runtime.getFormValuesSnapshot(),
           );
           return assocResolver(subPath);
         }

package/src/flow/models/blocks/form/__tests__/FormBlockModel.test.tsx

@@ -77,6 +77,7 @@ async function setupFormModel() {
   ds.addCollection({
     name: 'levels',
     filterTargetKey: 'id',
+    titleField: 'name',
     fields: [
       { name: 'id', type: 'integer', interface: 'number' },
       { name: 'name', type: 'string', interface: 'text' },
@@ -549,6 +550,150 @@ describe('FormBlockModel (form/formValues injection & server resolve anchors)',
     expect(api.request).toHaveBeenCalledTimes(1);
   });
 
+  it('resolves a configured nested association from the server when the local value is only its key', async () => {
+    const model = await setupFormModel();
+    const api = {
+      request: vi.fn(async (config: any) => {
+        const batch = config?.data?.values?.batch || [];
+        const item = batch[0] || {};
+        expect(item.template).toEqual({ level: '{{ ctx.formValues.customer.level }}' });
+        expect(Object.keys(item.contextParams || {})).toEqual(['formValues.customer']);
+        expect(item.contextParams['formValues.customer']).toMatchObject({
+          collection: 'customers',
+          filterByTk: 9,
+        });
+        return {
+          data: {
+            data: {
+              results: [{ id: item.id, data: { level: { id: 'level-1', name: 'Level 1' } } }],
+            },
+          },
+        } as any;
+      }),
+    } as any;
+    (model.flowEngine.context as any).defineProperty('api', { value: api });
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    fakeForm.setFieldsValue({ customer: { id: 9, level: 'level-1' } });
+    mockFormGridEnabledFields(model, ['customer']);
+
+    const output = await (model.context as any).resolveJsonTemplate({
+      level: '{{ ctx.formValues.customer.level }}',
+    });
+
+    expect(api.request).toHaveBeenCalledTimes(1);
+    expect(output).toEqual({ level: { id: 'level-1', name: 'Level 1' } });
+  });
+
+  it('resolves a configured nested association when its local record does not include the title field', async () => {
+    const model = await setupFormModel();
+    const api = {
+      request: vi.fn(async (config: any) => {
+        const item = config?.data?.values?.batch?.[0] || {};
+        return {
+          data: {
+            data: {
+              results: [{ id: item.id, data: { level: { id: 'level-1', name: 'Level 1' } } }],
+            },
+          },
+        } as any;
+      }),
+    } as any;
+    (model.flowEngine.context as any).defineProperty('api', { value: api });
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    fakeForm.setFieldsValue({ customer: { id: 9, level: { id: 'level-1' } } });
+    mockFormGridEnabledFields(model, ['customer']);
+
+    const output = await (model.context as any).resolveJsonTemplate({
+      level: '{{ ctx.formValues.customer.level }}',
+    });
+
+    expect(api.request).toHaveBeenCalledTimes(1);
+    expect(output).toEqual({ level: { id: 'level-1', name: 'Level 1' } });
+  });
+
+  it('uses a configured nested association locally when its record is already loaded', async () => {
+    const model = await setupFormModel();
+    const api = { request: vi.fn(async () => ({ data: {} }) as any) } as any;
+    (model.flowEngine.context as any).defineProperty('api', { value: api });
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    const level = { id: 'level-1', name: 'Level 1' };
+    fakeForm.setFieldsValue({ customer: { id: 9, level } });
+    mockFormGridEnabledFields(model, ['customer']);
+
+    const output = await (model.context as any).resolveJsonTemplate({
+      level: '{{ ctx.formValues.customer.level }}',
+    });
+
+    expect(output).toEqual({ level });
+    expect(api.request).not.toHaveBeenCalled();
+  });
+
+  it('keeps indexed paths local when the nested association record is already loaded', async () => {
+    const model = await setupFormModel();
+
+    function HookCaller() {
+      model.useHooksBeforeRender();
+      return null;
+    }
+    render(React.createElement(HookCaller));
+
+    const mem: Record<string, any> = {};
+    const fakeForm = {
+      setFieldsValue: (values: Record<string, any>) => Object.assign(mem, values),
+      getFieldsValue: () => ({ ...mem }),
+      getFieldValue: (namePath: any) => getByPath(mem, namePath),
+      setFieldValue: (key: string, value: any) => (mem[key] = value),
+    };
+    (model.context as any).defineProperty('form', { value: fakeForm });
+    fakeForm.setFieldsValue({ assignees: [{ id: 3, org: { id: 1, name: 'Org 1' } }] });
+    mockFormGridEnabledFields(model, ['assignees']);
+
+    const options = (model.context as any).getPropertyOptions('formValues');
+    expect(options.resolveOnServer('assignees[0].org.name')).toBe(false);
+  });
+
   it('configured toMany dot aggregation path uses local value and skips server', async () => {
     const model = await setupFormModel();
 

package/src/flow/models/fields/DisplayAssociationField/DisplaySubTableFieldModel.tsx

@@ -17,14 +17,16 @@ import {
   observer,
 } from '@nocobase/flow-engine';
 import { Table } from 'antd';
+import type { TableProps } from 'antd';
 import classNames from 'classnames';
 import { DragEndEvent } from '@dnd-kit/core';
 import { css } from '@emotion/css';
-import { isEmpty } from 'lodash';
+import { get, isEmpty, orderBy } from 'lodash';
 import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FieldModel } from '../../base';
 import { DetailsItemModel } from '../../blocks/details/DetailsItemModel';
+import { FormAssociationItemModel } from '../../blocks/form/FormAssociationItemModel';
 import { adjustColumnOrder } from '../../blocks/table/utils';
 
 const HeaderWrapperComponent = React.memo((props) => {
@@ -65,11 +67,31 @@ const AddFieldColumn = ({ model }) => {
 };
 
 const DisplayTable = (props) => {
-  const { pageSize, value, size, collection, baseColumns, enableIndexColumn = true, model } = props;
+  const { pageSize, value: rawValue, size, collection, baseColumns, enableIndexColumn = true, model } = props;
+  const isFormAssociation = model.parent instanceof FormAssociationItemModel;
   const [currentPage, setCurrentPage] = useState(1);
   const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const [localSort, setLocalSort] = useState<{ field: string; order: 'asc' | 'desc' }>();
   const { t } = useTranslation();
 
+  const value = useMemo(() => {
+    if (!isFormAssociation || Array.isArray(rawValue)) return rawValue;
+    if (rawValue && Array.isArray(rawValue.rows)) return rawValue.rows;
+    return rawValue && typeof rawValue === 'object' ? [rawValue] : [];
+  }, [isFormAssociation, rawValue]);
+
+  const sortedValue = useMemo(
+    () =>
+      isFormAssociation && localSort
+        ? orderBy(value, [(record) => get(record, localSort.field)], [localSort.order])
+        : value,
+    [isFormAssociation, localSort, value],
+  );
+
+  useEffect(() => {
+    if (isFormAssociation) setCurrentPage(1);
+  }, [isFormAssociation, rawValue]);
+
   useEffect(() => {
     setCurrentPageSize(pageSize);
   }, [pageSize]);
@@ -89,7 +111,7 @@ const DisplayTable = (props) => {
         return t('Total {{count}} items', { count: total });
       },
     } as any;
-  }, [currentPage, currentPageSize, value]);
+  }, [currentPage, currentPageSize, value, t]);
 
   const getColumns = () => {
     const cols = adjustColumnOrder(
@@ -119,8 +141,20 @@ const DisplayTable = (props) => {
     }
     return cols;
   };
-  const handleChange = useCallback(
-    async (pagination, filters, sorter) => {
+  const handleChange = useCallback<NonNullable<TableProps<Record<string, unknown>>['onChange']>>(
+    async (pagination, filters, sorters, extra) => {
+      const sorter = Array.isArray(sorters) ? sorters[0] : sorters;
+      if (isFormAssociation) {
+        if (extra.action !== 'sort') return;
+        const column = sorter?.column as { sortField?: string } | undefined;
+        const sortField = column?.sortField || sorter?.field;
+        const fullPath = Array.isArray(sortField) ? sortField.join('.') : String(sortField ?? '');
+        const prefix = `${model.context.fieldPath}.`;
+        const field = fullPath.startsWith(prefix) ? fullPath.slice(prefix.length) : fullPath;
+        setLocalSort(sorter?.order && field ? { field, order: sorter.order === 'ascend' ? 'asc' : 'desc' } : undefined);
+        setCurrentPage(1);
+        return;
+      }
       //支持列点击排序
       if (!isEmpty(sorter)) {
         const resource = model.context.blockModel.resource;
@@ -138,7 +172,7 @@ const DisplayTable = (props) => {
         await resource.refresh();
       }
     },
-    [model],
+    [isFormAssociation, model],
   );
 
   return (
@@ -147,7 +181,7 @@ const DisplayTable = (props) => {
       size={size}
       rowKey={collection.filterTargetKey}
       scroll={{ x: 'max-content' }}
-      dataSource={value}
+      dataSource={sortedValue}
       columns={getColumns()}
       pagination={pagination}
       onChange={handleChange}
@@ -269,3 +303,4 @@ DisplaySubTableFieldModel.define({
 });
 
 DetailsItemModel.bindModelToInterface('DisplaySubTableFieldModel', ['m2m', 'o2m', 'mbm']);
+FormAssociationItemModel.bindModelToInterface('DisplaySubTableFieldModel', ['m2m', 'o2m', 'mbm']);