From 2625a38e1437f710d72d2d963ec7d18f2f69ed52 Mon Sep 17 00:00:00 2001 From: 2betop <2betop.cn@gmail.com> Date: Fri, 5 May 2023 11:03:30 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=BC=B9=E7=AA=97?= =?UTF-8?q?=E5=85=B3=E9=97=AD=E4=B8=8A=E5=B1=82=E5=BC=B9=E7=AA=97=E4=B8=8D?= =?UTF-8?q?=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE=E9=A2=98=E5=B9=B6=E8=A1=A5?= =?UTF-8?q?=E5=85=85=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/zh-CN/components/dialog.md | 44 ++++++- docs/zh-CN/components/drawer.md | 158 +++++++++++++++++++++++++ packages/amis/src/renderers/Dialog.tsx | 27 +++-- packages/amis/src/renderers/Drawer.tsx | 36 +++--- 4 files changed, 238 insertions(+), 27 deletions(-) diff --git a/docs/zh-CN/components/dialog.md b/docs/zh-CN/components/dialog.md index 18e9cdb4e..0e7b10a0c 100755 --- a/docs/zh-CN/components/dialog.md +++ b/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" { diff --git a/docs/zh-CN/components/drawer.md b/docs/zh-CN/components/drawer.md index 1ead219fb..57074be39 100755 --- a/docs/zh-CN/components/drawer.md +++ b/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 的弹框" + } + } + ] +} +``` + ## 属性表 | 属性名 | 类型 | 默认值 | 说明 | diff --git a/packages/amis/src/renderers/Dialog.tsx b/packages/amis/src/renderers/Dialog.tsx index 58acbacf7..e45c0b23e 100644 --- a/packages/amis/src/renderers/Dialog.tsx +++ b/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,7 +884,9 @@ export class DialogRenderer extends Dialog { action.target && scoped.reload(action.target, data); if (action.close || action.type === 'submit') { this.handleSelfClose(undefined, action.type === 'submit'); - this.closeTarget(action.close); + action.close && + typeof action.close === 'string' && + this.closeTarget(action.close); } } else if (this.tryChildrenToHandle(action, data)) { // do nothing @@ -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(); - this.closeTarget(action.close); + action.close === true + ? 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 - ? ret.then(this.handleSelfClose) - : setTimeout(this.handleSelfClose, 200)); + + if (action.close) { + action.close === true + ? this.handleSelfClose() + : this.closeTarget(action.close); + } } } diff --git a/packages/amis/src/renderers/Drawer.tsx b/packages/amis/src/renderers/Drawer.tsx index 27669fe63..f30ea4130 100644 --- a/packages/amis/src/renderers/Drawer.tsx +++ b/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(); - this.closeTarget(action.close); + action.close === true + ? 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(); - this.closeTarget(action.close); + action.close === true + ? this.handleSelfClose() + : this.closeTarget(action.close); } }) .catch(e => { @@ -865,17 +873,13 @@ export class DrawerRenderer extends Drawer { } }); } else if (onAction) { - let ret = onAction( - e, - action, - data, - throwErrors, - delegate || this.context - ); - action.close && - (ret && ret.then - ? ret.then(this.handleSelfClose) - : setTimeout(this.handleSelfClose, 200)); + await onAction(e, action, data, throwErrors, delegate || this.context); + + if (action.close) { + action.close === true + ? this.handleSelfClose() + : this.closeTarget(action.close); + } } }