From 0a9f5c7d9439450752995c0e85c5a3a59c859958 Mon Sep 17 00:00:00 2001 From: Katherine Date: Mon, 22 Jul 2024 18:18:09 +0800 Subject: [PATCH] fix: required not applied when changing field from hidden to visible and setting it as required (#4927) --- .../form-create/schemaSettings2.test.ts | 33 +- .../__e2e__/form-create/templatesOfBug.ts | 308 ++++++++++++++++++ .../schema-component/antd/form-v2/Form.tsx | 6 +- 3 files changed, 345 insertions(+), 2 deletions(-) diff --git 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 index 599ff6b647..587d404279 100644 --- 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 } from './templatesOfBug'; +import { T2165, T3251, T3806, T3815, expressionTemplateInLinkageRules, T4891 } from './templatesOfBug'; test.describe('linkage rules', () => { test('basic usage', async ({ page, mockPage }) => { @@ -323,4 +323,35 @@ test.describe('linkage rules', () => { page.getByLabel('block-item-CollectionField-general1-form-general1.number1-number1').getByRole('spinbutton'), ).toHaveValue('3'); }); + test('field are set from not displayed to displayed and required', async ({ page, mockPage }) => { + await mockPage(T4891).goto(); + + await expect(page.getByLabel('block-item-CardItem-general-')).toBeVisible(); + + // 初始化时select没有值,name 必填 + await expect( + page.getByLabel('block-item-CollectionField-general-form-general.name-name').locator('.ant-formily-item-label'), + ).toContainText('*name'); + + //select 为111,name 隐藏 + await page.getByLabel('block-item-CollectionField-general-form-general.select-select').click(); + await page.getByText('111').click(); + + await expect(page.getByLabel('block-item-CollectionField-general-form-general.name-name')).not.toBeVisible(); + + //select 为333,name 显示且必填 + await page.getByTestId('select-single').click(); + await page.getByText('333').click(); + await expect( + page.getByLabel('block-item-CollectionField-general-form-general.name-name').locator('.ant-formily-item-label'), + ).toContainText('*name'); + + //select 为222,name 显示且非必填 + await page.getByLabel('block-item-CollectionField-general-form-general.select-select').click(); + await page.getByText('222').click(); + + await expect( + page.getByLabel('block-item-CollectionField-general-form-general.name-name').locator('.ant-formily-item-label'), + ).not.toContainText('*name'); + }); }); diff --git a/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/templatesOfBug.ts b/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/templatesOfBug.ts index a32120b71b..4b55d098c3 100644 --- a/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/templatesOfBug.ts +++ b/packages/core/client/src/modules/blocks/data-blocks/form/__e2e__/form-create/templatesOfBug.ts @@ -10875,3 +10875,311 @@ export const oneTableWithNestPopups = { 'x-async': true, }, }; + +export const T4891 = { + pageSchema: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Page', + 'x-app-version': '1.2.22-alpha', + properties: { + p7ec8csgn5m: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'page:addBlock', + 'x-app-version': '1.2.22-alpha', + properties: { + fipjk1s5va8: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.2.22-alpha', + properties: { + zlf19lb14hs: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.2.22-alpha', + properties: { + fjwbk9k41tb: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-acl-action-props': { + skipScopeCheck: true, + }, + 'x-acl-action': 'general:create', + 'x-decorator': 'FormBlockProvider', + 'x-use-decorator-props': 'useCreateFormBlockDecoratorProps', + 'x-decorator-props': { + dataSource: 'main', + collection: 'general', + }, + 'x-toolbar': 'BlockSchemaToolbar', + 'x-settings': 'blockSettings:createForm', + 'x-component': 'CardItem', + 'x-app-version': '1.2.22-alpha', + properties: { + xmabwei8v51: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'FormV2', + 'x-use-component-props': 'useCreateFormBlockProps', + 'x-app-version': '1.2.22-alpha', + properties: { + grid: { + 'x-uid': 'thwwiietx3c', + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid', + 'x-initializer': 'form:configureFields', + 'x-app-version': '1.2.22-alpha', + 'x-linkage-rules': [ + { + condition: { + $and: [ + { + select: { + $eq: '111', + }, + }, + ], + }, + actions: [ + { + targetFields: ['name'], + operator: 'none', + }, + ], + }, + { + condition: { + $and: [ + { + select: { + $ne: '222', + }, + }, + ], + }, + actions: [ + { + targetFields: ['name'], + operator: 'required', + }, + ], + }, + ], + properties: { + qz37m7j8p50: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.2.22-alpha', + properties: { + gfj2a86vjfz: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.2.22-alpha', + properties: { + select: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'string', + 'x-toolbar': 'FormItemSchemaToolbar', + 'x-settings': 'fieldSettings:FormItem', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-collection-field': 'general.select', + 'x-component-props': { + style: { + width: '100%', + }, + }, + 'x-app-version': '1.2.22-alpha', + 'x-uid': '4oktgb0hzag', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'wf3382k9190', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'zuvyztf2kr1', + 'x-async': false, + 'x-index': 1, + }, + '0oy12yg7t7s': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Row', + 'x-app-version': '1.2.22-alpha', + properties: { + d4payxmuozs: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-component': 'Grid.Col', + 'x-app-version': '1.2.22-alpha', + properties: { + name: { + _isJSONSchemaObject: true, + version: '2.0', + type: 'string', + 'x-toolbar': 'FormItemSchemaToolbar', + 'x-settings': 'fieldSettings:FormItem', + 'x-component': 'CollectionField', + 'x-decorator': 'FormItem', + 'x-collection-field': 'general.name', + 'x-component-props': {}, + 'x-app-version': '1.2.22-alpha', + 'x-uid': '36csihfic5y', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'iploqplmdrj', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '6efired3279', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-async': false, + 'x-index': 1, + }, + '0fcw5zex0ft': { + _isJSONSchemaObject: true, + version: '2.0', + type: 'void', + 'x-initializer': 'createForm:configureActions', + 'x-component': 'ActionBar', + 'x-component-props': { + layout: 'one-column', + }, + 'x-app-version': '1.2.22-alpha', + 'x-uid': 'qyuqi649spr', + 'x-async': false, + 'x-index': 2, + }, + }, + 'x-uid': 't4pse8uqnvk', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '0xlj9rl4vyk', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'w87k52l39o8', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'dit5svq4m9w', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': '1zwnhhnthf2', + 'x-async': false, + 'x-index': 1, + }, + }, + 'x-uid': 'fydci6wpqyj', + 'x-async': true, + 'x-index': 1, + }, + collections: [ + { + name: 'general', + title: 'general', + fields: [ + { + key: 'liht1h04a4d', + name: 'id', + type: 'bigInt', + interface: 'integer', + description: null, + collectionName: 'general', + parentKey: null, + reverseKey: null, + autoIncrement: true, + primaryKey: true, + allowNull: false, + uiSchema: { + type: 'number', + title: '{{t("ID")}}', + 'x-component': 'InputNumber', + 'x-read-pretty': true, + }, + }, + { + key: 'q0ciuu05rdr', + name: 'name', + type: 'string', + interface: 'input', + description: null, + collectionName: 'general', + parentKey: null, + reverseKey: null, + uiSchema: { + type: 'string', + 'x-component': 'Input', + title: 'name', + }, + }, + { + key: 'rfjxi2cwyjl', + name: 'select', + type: 'string', + interface: 'select', + description: null, + collectionName: 'general', + parentKey: null, + reverseKey: null, + uiSchema: { + enum: [ + { + value: '111', + label: '111', + }, + { + value: '222', + label: '222', + }, + { + value: '333', + label: '333', + }, + ], + type: 'string', + 'x-component': 'Select', + title: 'select', + }, + }, + ], + logging: true, + autoGenId: true, + filterTargetKey: 'id', + }, + ], +}; diff --git a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx index 71d3a9ae9d..394dfed681 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/Form.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/Form.tsx @@ -312,12 +312,16 @@ function getSubscriber( } } else { field[fieldName] = lastState?.value; + requestAnimationFrame(() => { + field.setState((state) => { + state[fieldName] = lastState?.value; + }); + }); //字段隐藏时清空数据 if (fieldName === 'display' && lastState?.value === 'none') { field.value = null; } } - // 在这里清空 field.stateOfLinkageRules，就可以保证：当条件再次改变时，如果该字段没有和任何条件匹配，则需要把对应的值恢复到初始值； field.stateOfLinkageRules[fieldName] = null; });