fix: 修复弹窗下直接用 formitem 不包裹 form 的场景下弹窗提交数据不符合预期的问题 (#7913)

packages/amis-core/src/store/node.ts

@@ -60,7 +60,7 @@ export const StoreNode = types
         callback?.();
       } else if (!self.childrenIds.length) {
         const parent = self.parentStore;
-        parent?.onChildStoreDispose?.(self);
+        parent && isAlive(parent) && parent.onChildStoreDispose(self);
         destroy(self);
         callback?.();
         // destroy(self);

packages/amis/__tests__/event-action/__snapshots__/dialog.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EventAction:dialog 1`] = `
+exports[`1. EventAction:dialog args 1`] = `
 <div>
   <div
     class="cxd-Page"
@@ -118,7 +118,7 @@ exports[`EventAction:dialog 1`] = `
 </div>
 `;
 
-exports[`EventAction:dialog 2`] = `
+exports[`1. EventAction:dialog args 2`] = `
 <div>
   <div
     class="cxd-Page"
@@ -148,7 +148,7 @@ exports[`EventAction:dialog 2`] = `
 </div>
 `;
 
-exports[`EventAction:dialog 3`] = `
+exports[`1. EventAction:dialog args 3`] = `
 <div>
   <div
     class="cxd-Page"
@@ -178,7 +178,7 @@ exports[`EventAction:dialog 3`] = `
 </div>
 `;
 
-exports[`EventAction:dialog 4`] = `
+exports[`1. EventAction:dialog args 4`] = `
 <div>
   <div
     class="cxd-Page"
@@ -208,7 +208,7 @@ exports[`EventAction:dialog 4`] = `
 </div>
 `;
 
-exports[`EventAction:dialog 5`] = `
+exports[`1. EventAction:dialog args 5`] = `
 <div>
   <div
     class="cxd-Page"
@@ -238,7 +238,7 @@ exports[`EventAction:dialog 5`] = `
 </div>
 `;
 
-exports[`EventAction:dialog 6`] = `
+exports[`1. EventAction:dialog args 6`] = `
 <div>
   <div
     class="cxd-Page"
@@ -268,7 +268,7 @@ exports[`EventAction:dialog 6`] = `
 </div>
 `;
 
-exports[`EventAction:dialog 7`] = `
+exports[`1. EventAction:dialog args 7`] = `
 <div>
   <div
     class="cxd-Page"
@@ -298,7 +298,7 @@ exports[`EventAction:dialog 7`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 1`] = `
+exports[`2. EventAction:dialog 1`] = `
 <div>
   <div
     class="cxd-Page"
@@ -416,7 +416,7 @@ exports[`EventAction:dialog args 1`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 2`] = `
+exports[`2. EventAction:dialog 2`] = `
 <div>
   <div
     class="cxd-Page"
@@ -446,7 +446,7 @@ exports[`EventAction:dialog args 2`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 3`] = `
+exports[`2. EventAction:dialog 3`] = `
 <div>
   <div
     class="cxd-Page"
@@ -476,7 +476,7 @@ exports[`EventAction:dialog args 3`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 4`] = `
+exports[`2. EventAction:dialog 4`] = `
 <div>
   <div
     class="cxd-Page"
@@ -506,7 +506,7 @@ exports[`EventAction:dialog args 4`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 5`] = `
+exports[`2. EventAction:dialog 5`] = `
 <div>
   <div
     class="cxd-Page"
@@ -536,7 +536,7 @@ exports[`EventAction:dialog args 5`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 6`] = `
+exports[`2. EventAction:dialog 6`] = `
 <div>
   <div
     class="cxd-Page"
@@ -566,7 +566,7 @@ exports[`EventAction:dialog args 6`] = `
 </div>
 `;
 
-exports[`EventAction:dialog args 7`] = `
+exports[`2. EventAction:dialog 7`] = `
 <div>
   <div
     class="cxd-Page"

packages/amis/__tests__/event-action/dialog.test.tsx

@@ -3,7 +3,7 @@ import '../../src';
 import {render as amisRender} from '../../src';
 import {makeEnv, wait} from '../helper';
 
-test('EventAction:dialog args', async () => {
+test('1. EventAction:dialog args', async () => {
   const notify = jest.fn();
   const {getByText, container}: any = render(
     amisRender(
@@ -220,7 +220,7 @@ test('EventAction:dialog args', async () => {
   expect(container).toMatchSnapshot();
 }, 7000);
 
-test('EventAction:dialog', async () => {
+test('2. EventAction:dialog', async () => {
   const notify = jest.fn();
   const {getByText, container}: any = render(
     amisRender(
@@ -433,7 +433,7 @@ test('EventAction:dialog', async () => {
   expect(container).toMatchSnapshot();
 }, 7000);
 
-test('EventAction:dialog data', async () => {
+test('3. EventAction:dialog data', async () => {
   const {getByText, container}: any = render(
     amisRender(
       {
@@ -490,7 +490,7 @@ test('EventAction:dialog data', async () => {
   });
 }, 7000);
 
-test('EventAction:dialog data2', async () => {
+test('4. EventAction:dialog data2', async () => {
   const {getByText, container}: any = render(
     amisRender(
       {
@@ -639,3 +639,77 @@ test('EventAction:dialog data2', async () => {
 // //   );
 // //   expect(confirm.mock.calls[0][1]).toEqual('操作确认');
 // // });
+
+test('5. EventAction:dialog formitem without form', async () => {
+  const onAction = jest.fn();
+  const {getByText, container}: any = render(
+    amisRender(
+      {
+        type: 'page',
+        body: [
+          {
+            type: 'button',
+            label: 'Dialog',
+            onEvent: {
+              click: {
+                actions: [
+                  {
+                    actionType: 'dialog',
+                    dialog: {
+                      title: '表单页面',
+                      body: [
+                        {
+                          label: 'A',
+                          type: 'input-text',
+                          name: 'a'
+                        },
+                        {
+                          label: 'B',
+                          type: 'input-text',
+                          name: 'b'
+                        }
+                      ],
+                      onEvent: {
+                        confirm: {
+                          actions: [
+                            {
+                              actionType: 'custom',
+                              script: onAction
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            }
+          }
+        ]
+      },
+      {},
+      makeEnv({
+        getModalContainer: () => container
+      })
+    )
+  );
+
+  const button = getByText('Dialog');
+  fireEvent.click(button);
+  await wait(200);
+
+  fireEvent.change(container.querySelector('[name="a"]')!, {
+    target: {value: '1'}
+  });
+
+  await wait(200);
+  fireEvent.change(container.querySelector('[name="b"]')!, {
+    target: {value: '2'}
+  });
+
+  await wait(200);
+  fireEvent.click(getByText('确认'));
+  await wait(300);
+  expect(onAction).toHaveBeenCalled();
+  expect(onAction.mock.calls[0][2].data).toMatchObject({a: '1', b: '2'});
+});

packages/amis/src/renderers/Dialog.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
-import {ScopedContext, IScopedContext, filterTarget} from 'amis-core';
+import {
+  ScopedContext,
+  IScopedContext,
+  filterTarget,
+  setVariable
+} from 'amis-core';
 import {Renderer, RendererProps} from 'amis-core';
 import {SchemaNode, Schema, ActionObject} from 'amis-core';
 import {filter} from 'amis-core';
@@ -397,9 +402,11 @@ export default class Dialog extends React.Component<DialogProps> {
 
     // 如果 dialog 里面不放 form，而是直接放表单项就会进到这里来。
     if (typeof name === 'string') {
-      data = {
-        [name]: data
+      const mergedData = {
+        ...store.form
       };
+      setVariable(mergedData, name, data);
+      data = mergedData;
     }
 
     store.setFormData(data);