fix: 修复弹窗关闭上层弹窗不生效的问题并补充文档

docs/zh-CN/components/dialog.md

@@ -327,7 +327,7 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
 }
 ```
 
-## 行为后关闭弹框
+## 动作后关闭弹框
 
 在弹框中配置行为按钮，可以在按钮上配置`"close": true`，在行为完成后，关闭当前弹框。
 
@@ -357,9 +357,49 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
 }
 ```
 
+以上例子是关闭当前弹窗，如果希望关闭上层弹窗，则需要给目标弹窗设置 `name` 属性，然后配置按钮 `close` 属性为目标 `name` 属性如：
+
+```schema: scope="body"
+{
+    "type": "button",
+    "label": "多级弹框",
+    "actionType": "dialog",
+    "dialog": {
+        "title": "提示",
+        "body": "这是个简单的弹框",
+        "name": "dialog_1",
+        "actions": [
+            {
+                "type": "button",
+                "actionType": "confirm",
+                "label": "确认",
+                "primary": true
+            },
+            {
+                "type": "button",
+                "actionType": "dialog",
+                "label": "再弹一个",
+                "dialog": {
+                    "title": "弹框中的弹框",
+                    "body": "关闭当前弹窗的时候把外层的弹窗一起关了",
+                    "actions": [
+                        {
+                            "type": "button",
+                            "label": "关闭所有",
+                            "level": "info",
+                            "close": "dialog_1"
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+```
+
 ## 配置弹窗的按钮
 
-可以通过设置 `actions` 来控制弹窗中的按钮。
+默认弹窗会自动生成两个按钮，一个取消，一个确认。如果通过 `actions` 来自定义配置，则以配置的为准。
 
 ```schema: scope="body"
 {

docs/zh-CN/components/drawer.md

@@ -279,6 +279,164 @@ order: 43
 }
 ```
 
+## 多级弹框
+
+```schema: scope="body"
+{
+    "type": "button",
+    "label": "多级弹框",
+    "actionType": "drawer",
+    "drawer": {
+        "title": "提示",
+        "body": "这是个简单的弹框",
+        "actions": [
+            {
+                "type": "button",
+                "actionType": "confirm",
+                "label": "确认",
+                "primary": true
+            },
+            {
+                "type": "button",
+                "actionType": "drawer",
+                "label": "再弹一个",
+                "drawer": {
+                    "title": "弹框中的弹框",
+                    "body": "如果你想，可以无限弹下去",
+                    "actions": [
+                        {
+                            "type": "button",
+                            "actionType": "drawer",
+                            "label": "来吧",
+                            "level": "info",
+                            "drawer": {
+                                "title": "弹框中的弹框",
+                                "body": "如果你想，可以无限弹下去",
+                                "actions": [
+                                    {
+                                        "type": "button",
+                                        "actionType": "confirm",
+                                        "label": "不弹了",
+                                        "primary": true
+                                    }
+                                ]
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+```
+
+## 动作后关闭弹框
+
+在弹框中配置行为按钮，可以在按钮上配置`"close": true`，在行为完成后，关闭当前弹框。
+
+```schema: scope="body"
+{
+    "type": "button",
+    "label": "弹个框",
+    "actionType": "drawer",
+    "drawer": {
+        "title": "弹框",
+        "body": [
+          {
+            "type": "button",
+            "label": "默认的 ajax 请求",
+            "actionType": "ajax",
+            "api": "/api/mock2/form/saveForm?waitSeconds=1"
+          },
+          {
+            "type": "button",
+            "label": "ajax 请求成功后关闭弹框",
+            "actionType": "ajax",
+            "api": "/api/mock2/form/saveForm?waitSeconds=1",
+            "close": true
+          }
+        ]
+    }
+}
+```
+
+以上例子是关闭当前弹窗，如果希望关闭上层弹窗，则需要给目标弹窗设置 `name` 属性，然后配置按钮 `close` 属性为目标 `name` 属性如：
+
+```schema: scope="body"
+{
+    "type": "button",
+    "label": "多级弹框",
+    "actionType": "drawer",
+    "drawer": {
+        "title": "提示",
+        "body": "这是个简单的弹框",
+        "name": "drawer_1",
+        "actions": [
+            {
+                "type": "button",
+                "actionType": "confirm",
+                "label": "确认",
+                "primary": true
+            },
+            {
+                "type": "button",
+                "actionType": "drawer",
+                "label": "再弹一个",
+                "drawer": {
+                    "title": "弹框中的弹框",
+                    "body": "关闭当前弹窗的时候把外层的弹窗一起关了",
+                    "actions": [
+                        {
+                            "type": "button",
+                            "label": "关闭所有",
+                            "level": "info",
+                            "close": "drawer_1"
+                        }
+                    ]
+                }
+            }
+        ]
+    }
+}
+```
+
+## 配置弹窗的按钮
+
+默认弹窗会自动生成两个按钮，一个取消，一个确认。如果通过 `actions` 来自定义配置，则以配置的为准。
+
+```schema: scope="body"
+{
+    "type": "button-toolbar",
+    "buttons": [
+        {
+            "type": "button",
+            "label": "无按钮",
+            "actionType": "dialog",
+            "dialog": {
+                "title": "提示",
+                "actions": [],
+                "body": "无按钮的弹框"
+            }
+        },
+        {
+            "type": "button",
+            "label": "只有一个确认按钮",
+            "actionType": "dialog",
+            "dialog": {
+                "title": "提示",
+                "actions": [{
+                  "type": "button",
+                  "actionType": "confirm",
+                  "label": "OK",
+                  "primary": true
+                }],
+                "body": "只有一个 OK 的弹框"
+            }
+        }
+    ]
+}
+```
+
 ## 属性表
 
 | 属性名          | 类型                                      | 默认值             | 说明                                                                                              |

packages/amis/src/renderers/Dialog.tsx

@@ -829,7 +829,11 @@ export class DialogRenderer extends Dialog {
       // clear error
       store.updateMessage();
       onClose();
-      action.close && this.closeTarget(action.close);
+      if (action.close) {
+        action.close === true
+          ? this.handleSelfClose()
+          : this.closeTarget(action.close);
+      }
     } else if (action.actionType === 'confirm') {
       const rendererEvent = await dispatchEvent(
         'confirm',
@@ -880,6 +884,8 @@ export class DialogRenderer extends Dialog {
       action.target && scoped.reload(action.target, data);
       if (action.close || action.type === 'submit') {
         this.handleSelfClose(undefined, action.type === 'submit');
+        action.close &&
+          typeof action.close === 'string' &&
           this.closeTarget(action.close);
       }
     } else if (this.tryChildrenToHandle(action, data)) {
@@ -902,8 +908,9 @@ export class DialogRenderer extends Dialog {
           action.reload &&
             this.reloadTarget(filter(action.reload, store.data), store.data);
           if (action.close) {
-            this.handleSelfClose();
+            action.close === true
-            this.closeTarget(action.close);
+              ? this.handleSelfClose()
+              : this.closeTarget(action.close);
           }
         })
         .catch(e => {
@@ -912,7 +919,7 @@ export class DialogRenderer extends Dialog {
           }
         });
     } else if (onAction) {
-      let ret = onAction(
+      await onAction(
         e,
         {
           ...action,
@@ -922,10 +929,12 @@ export class DialogRenderer extends Dialog {
         throwErrors,
         delegate || this.context
       );
-      action.close &&
+
-        (ret && ret.then
+      if (action.close) {
-          ? ret.then(this.handleSelfClose)
+        action.close === true
-          : setTimeout(this.handleSelfClose, 200));
+          ? this.handleSelfClose()
+          : this.closeTarget(action.close);
+      }
     }
   }
 

packages/amis/src/renderers/Drawer.tsx

@@ -811,7 +811,11 @@ export class DrawerRenderer extends Drawer {
       }
       store.setCurrentAction(action);
       onClose();
-      action.close && this.closeTarget(action.close);
+      if (action.close) {
+        action.close === true
+          ? this.handleSelfClose()
+          : this.closeTarget(action.close);
+      }
     } else if (action.actionType === 'confirm') {
       const rendererEvent = await dispatchEvent(
         'confirm',
@@ -831,9 +835,11 @@ export class DrawerRenderer extends Drawer {
     } else if (action.actionType === 'reload') {
       store.setCurrentAction(action);
       action.target && scoped.reload(action.target, data);
+
       if (action.close) {
-        this.handleSelfClose();
+        action.close === true
-        this.closeTarget(action.close);
+          ? this.handleSelfClose()
+          : this.closeTarget(action.close);
       }
     } else if (this.tryChildrenToHandle(action, data)) {
       // do nothing
@@ -854,9 +860,11 @@ export class DrawerRenderer extends Drawer {
           redirect && env.jumpTo(redirect, action);
           action.reload &&
             this.reloadTarget(filter(action.reload, store.data), store.data);
+
           if (action.close) {
-            this.handleSelfClose();
+            action.close === true
-            this.closeTarget(action.close);
+              ? this.handleSelfClose()
+              : this.closeTarget(action.close);
           }
         })
         .catch(e => {
@@ -865,17 +873,13 @@ export class DrawerRenderer extends Drawer {
           }
         });
     } else if (onAction) {
-      let ret = onAction(
+      await onAction(e, action, data, throwErrors, delegate || this.context);
-        e,
+
-        action,
+      if (action.close) {
-        data,
+        action.close === true
-        throwErrors,
+          ? this.handleSelfClose()
-        delegate || this.context
+          : this.closeTarget(action.close);
-      );
+      }
-      action.close &&
-        (ret && ret.then
-          ? ret.then(this.handleSelfClose)
-          : setTimeout(this.handleSelfClose, 200));
     }
   }