fix(linkageRules): fix invalid issue of form linkage rules (#5876) (#6023)

* fix(linkageRules): fix invalid issue of form linkage rules (#5876) * test: add e2e test * fix: complete the fix * fix: fix e2e errors * fix: fix e2e errors * feat(table): add support for conditional styling based on pretty mode * feat(FormItem): enhance wrapperStyle to conditionally apply padding based on background color * chore: skip e2e test --------- Co-authored-by: sheldon guo <sheldon_66@163.com>
2025-05-07 14:39:25 +08:00 · 2025-01-09 19:08:18 +08:00 · 2025-01-09 19:08:18 +08:00 · ea82812222
commit ea82812222
parent 736aa9ee93
9 changed files with 1184 additions and 34 deletions
--- a/packages/core/client/src/modules/blocks/data-blocks/form/e2e/form-create/schemaSettings2.test.ts
+++ b/packages/core/client/src/modules/blocks/data-blocks/form/e2e/form-create/schemaSettings2.test.ts
@ -13,7 +13,7 @@ import {
  oneTableBlockWithAddNewAndViewAndEditAndBasicFields,
  test,
 } from '@nocobase/test/e2e';
-import { T2165, T3251, T3806, T3815, expressionTemplateInLinkageRules, T4891 } from './templatesOfBug';
+import { expressionTemplateInLinkageRules, T2165, T3251, T3806, T3815, T4891 } from './templatesOfBug';

 test.describe('linkage rules', () => {
  test('basic usage', async ({ page, mockPage }) => {
@ -276,7 +276,6 @@ test.describe('linkage rules', () => {
    }
  });

-  // https://nocobase.height.app/T-T3815 &&T-3802
  test('fireImmediately in create form & edit form', async ({ page, mockPage, mockRecord }) => {
    const nocoPage = await mockPage(T3815).waitForInit();
    await mockRecord('general', {
--- a/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
+++ b/packages/core/client/src/schema-component/antd/form-item/FormItem.tsx
@ -51,7 +51,7 @@ export const FormItem: any = withDynamicSchemaProps(
    const field = useField<Field>();
    const schema = useFieldSchema();
    const { addActiveFieldName } = useFormActiveFields() || {};
-    const { wrapperStyle } = useDataFormItemProps();
+    const { wrapperStyle }: { wrapperStyle: any } = useDataFormItemProps();

    useParseDefaultValue();
    useLazyLoadDisplayAssociationFieldsOfForm();
@ -95,7 +95,15 @@ export const FormItem: any = withDynamicSchemaProps(
          )}
        >
          <ACLCollectionFieldProvider>
-            <Item className={className} {...props} extra={extra} wrapperStyle={wrapperStyle} />
+            <Item
+              className={className}
+              {...props}
+              extra={extra}
+              wrapperStyle={{
+                ...(wrapperStyle.backgroundColor ? { paddingLeft: '5px', paddingRight: '5px' } : {}),
+                ...wrapperStyle,
+              }}
+            />
          </ACLCollectionFieldProvider>
        </BlockItem>
      </CollectionFieldProvider>
--- a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
+++ b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx
@ -16,7 +16,9 @@ import { ConfigProvider, Spin, theme } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import { useActionContext } from '..';
 import { useAttach, useComponent } from '../..';
+import { getCardItemSchema } from '../../../block-provider';
 import { useTemplateBlockContext } from '../../../block-provider/TemplateBlockProvider';
+import { useDataBlockRequest } from '../../../data-source/data-block/DataBlockRequestProvider';
 import { withDynamicSchemaProps } from '../../../hoc/withDynamicSchemaProps';
 import { bindLinkageRulesToFiled } from '../../../schema-settings/LinkageRules/bindLinkageRulesToFiled';
 import { forEachLinkageRule } from '../../../schema-settings/LinkageRules/forEachLinkageRule';
@ -24,7 +26,6 @@ import { useToken } from '../../../style';
 import { useLocalVariables, useVariables } from '../../../variables';
 import { useProps } from '../../hooks/useProps';
 import { useFormBlockHeight } from './hook';
-import { getCardItemSchema } from '../../../block-provider';

 export interface FormProps extends IFormLayoutProps {
  form?: FormilyForm;
@ -128,6 +129,7 @@ const WithForm = (props: WithFormProps) => {
  const variables = useVariables();
  const localVariables = useLocalVariables({ currentForm: form });
  const { templateFinished } = useTemplateBlockContext();
+  const { loading } = useDataBlockRequest() || {};
  const linkageRules: any[] =
    (getLinkageRules(fieldSchema) || fieldSchema.parent?.['x-linkage-rules'])?.filter((k) => !k.disabled) || [];

@ -150,29 +152,36 @@ const WithForm = (props: WithFormProps) => {
  }, [form, props.disabled, setFormValueChanged]);

  useEffect(() => {
+    if (loading) {
+      return;
+    }
+
    const id = uid();
    const disposes = [];

-    form.addEffects(id, () => {
-      forEachLinkageRule(linkageRules, (action, rule) => {
-        if (action.targetFields?.length) {
-          const fields = action.targetFields.join(',');
+    // 如果不延迟执行，那么一开始获取到的 form.values 的值是旧的，会导致详情区块的联动规则出现一些问题
+    setTimeout(() => {
+      form.addEffects(id, () => {
+        forEachLinkageRule(linkageRules, (action, rule) => {
+          if (action.targetFields?.length) {
+            const fields = action.targetFields.join(',');

-          // 之前使用的 `onFieldReact` 有问题，没有办法被取消监听，所以这里用 `onFieldInit` 和 `reaction` 代替
-          onFieldInit(`*(${fields})`, (field: any, form) => {
-            disposes.push(
-              bindLinkageRulesToFiled({
-                field,
-                linkageRules,
-                formValues: form.values,
-                localVariables,
-                action,
-                rule,
-                variables,
-              }),
-            );
-          });
-        }
+            // 之前使用的 `onFieldReact` 有问题，没有办法被取消监听，所以这里用 `onFieldInit` 和 `reaction` 代替
+            onFieldInit(`*(${fields})`, (field: any, form) => {
+              disposes.push(
+                bindLinkageRulesToFiled({
+                  field,
+                  linkageRules,
+                  formValues: form.values,
+                  localVariables,
+                  action,
+                  rule,
+                  variables,
+                }),
+              );
+            });
+          }
+        });
      });
    });

@ -182,7 +191,7 @@ const WithForm = (props: WithFormProps) => {
        dispose();
      });
    };
-  }, [linkageRules, templateFinished]);
+  }, [linkageRules, templateFinished, loading]);

  return fieldSchema['x-decorator'] === 'FormV2' ? <FormDecorator {...props} /> : <FormComponent {...props} />;
 };
--- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
+++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx
@ -500,6 +500,8 @@ const InternalBodyCellComponent = (props) => {
  const { record, schema, rowIndex, isSubTable, ...others } = props;
  const { valueMap } = useSatisfiedActionValues({ formValues: record, category: 'style', schema });
  const style = useMemo(() => Object.assign({ ...props.style }, valueMap), [props.style, valueMap]);
+  const isReadyPrettyMode =
+    !!schema?.properties && Object.values(schema.properties).some((item) => item['x-read-pretty'] === true);
  const skeletonStyle = {
    height: '1em',
    backgroundColor: 'rgba(0, 0, 0, 0.06)',
@ -507,7 +509,7 @@ const InternalBodyCellComponent = (props) => {
  };

  return (
-    <td {...others} className={classNames(props.className, cellClass)} style={style}>
+    <td {...others} className={classNames(props.className, cellClass)} style={isReadyPrettyMode ? style : {}}>
      {/* Lazy rendering cannot be used in sub-tables. */}
      {isSubTable || inView || isIndex ? props.children : <div style={skeletonStyle} />}
    </td>
--- a/packages/core/client/src/schema-component/common/utils/uitls.tsx
+++ b/packages/core/client/src/schema-component/common/utils/uitls.tsx
@ -95,7 +95,6 @@ export const conditionAnalyses = async ({
  const conditions = ruleGroup[type];

  let results = conditions.map(async (condition) => {
-    // fix https://nocobase.height.app/T-3152
    if ('$and' in condition || '$or' in condition) {
      return await conditionAnalyses({ ruleGroup: condition, variables, localVariables });
    }
@ -155,7 +154,7 @@ export const conditionAnalyses = async ({
 * @param targetField
 * @returns
 */
-export function targetFieldToVariableString(targetField: string[], variableName = '$nForm') {
+function targetFieldToVariableString(targetField: string[], variableName = '$nForm') {
  // Action 中的联动规则虽然没有 form 上下文但是在这里也使用的是 `$nForm` 变量，这样实现更简单
  return `{{ ${variableName}.${targetField.join('.')} }}`;
 }
--- a/packages/core/client/src/schema-settings/LinkageRules/bindLinkageRulesToFiled.ts
+++ b/packages/core/client/src/schema-settings/LinkageRules/bindLinkageRulesToFiled.ts
@ -102,7 +102,6 @@ function getFieldValuesInCondition({ linkageRules, formValues }) {

      return conditions
        .map((condition) => {
-          // fix https://nocobase.height.app/T-3251
          if ('$and' in condition || '$or' in condition) {
            return run(condition);
          }
--- a/packages/core/client/src/schema-settings/VariableInput/hooks/useFormVariable.ts
+++ b/packages/core/client/src/schema-settings/VariableInput/hooks/useFormVariable.ts
@ -77,16 +77,13 @@ const useCurrentFormData = () => {
 */
 export const useCurrentFormContext = ({ form: _form }: Pick<Props, 'form'> = {}) => {
  const { form } = useFormBlockContext();
-  const formData = useCurrentFormData();
  const { isVariableParsedInOtherContext } = useFlag();
+
  const formInstance = _form || form;

  return {
    /** 变量值 */
-    currentFormCtx:
-      formInstance?.readPretty === false && formInstance?.values && Object.keys(formInstance?.values)?.length
-        ? formInstance?.values
-        : formData || formInstance?.values,
+    currentFormCtx: formInstance?.values,
    /** 用来判断是否可以显示`当前表单`变量 */
    shouldDisplayCurrentForm: formInstance && !formInstance.readPretty && !isVariableParsedInOtherContext,
  };
--- a/packages/core/client/src/schema-settings/e2e/linkageRules.test.ts
+++ b/packages/core/client/src/schema-settings/e2e/linkageRules.test.ts
@ -0,0 +1,61 @@
+/**
+ * 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 { expect, test } from '@nocobase/test/e2e';
+import { formFieldDependsOnSubtableFieldsWithLinkageRules } from './template';
+
+test.describe('linkage rules', () => {
+  test.skip('form field depends on subtable fields with linkage rules', async ({ page, mockPage, mockRecord }) => {
+    const nocoPage = await mockPage(formFieldDependsOnSubtableFieldsWithLinkageRules).waitForInit();
+    const record = await mockRecord('test');
+    await nocoPage.goto();
+
+    // 1. 点击 Add new，打开新增表单弹窗
+    await page.getByLabel('action-Action-Add new-create-').click();
+
+    // 2. 新增表单中，填上子表单的值，result 会自动计算结果
+    await page.getByLabel('action-AssociationField.').click();
+    await page.getByLabel('block-item-CollectionField-A-form-A.count-count').getByRole('spinbutton').fill('10');
+    await page.getByLabel('block-item-CollectionField-A-form-A.price-price').getByRole('spinbutton').fill('10');
+    // 10 * 10 = 100
+    await expect(
+      page.getByLabel('block-item-CollectionField-test-form-test.result-result').getByRole('spinbutton'),
+    ).toHaveValue('100');
+
+    // 3. 关闭弹窗，点击 Edit 按钮打开编辑表单弹窗
+    await page.getByLabel('drawer-Action.Container-test-Add record-mask').click();
+    await page.getByRole('button', { name: 'OK', exact: true }).click();
+    await page.getByLabel('action-Action.Link-Edit-').click();
+
+    // 4. 编辑表单中的 result 字段值，应该是由子表格中填入的值计算得出的
+    await expect(
+      page.getByLabel('block-item-CollectionField-test-form-test.result-result').getByRole('spinbutton'),
+    ).toHaveValue(String(calcResult(record)));
+
+    // 5. 在子表格中新增并输入新的值，result 字段值会自动计算
+    await page.getByLabel('action-AssociationField.').click();
+    await page
+      .getByRole('row', { name: `table-index-${record.subtable.length + 1} block-item-` })
+      .getByRole('spinbutton')
+      .first()
+      .fill('10');
+    await page
+      .getByRole('row', { name: `table-index-${record.subtable.length + 1} block-item-` })
+      .getByRole('spinbutton')
+      .nth(1)
+      .fill('10');
+    await expect(
+      page.getByLabel('block-item-CollectionField-test-form-test.result-result').getByRole('spinbutton'),
+    ).toHaveValue(String(calcResult(record) + 10 * 10));
+  });
+});
+
+function calcResult(record) {
+  return record.subtable.reduce((acc, item) => acc + item.count * item.price, 0);
+}
--- a/packages/core/client/src/schema-settings/e2e/template.ts
+++ b/packages/core/client/src/schema-settings/e2e/template.ts