From 58ca70684654046584be1ad727af7acab2b11ef1 Mon Sep 17 00:00:00 2001
From: liaohui <276557421@qq.com>
Date: Tue, 3 Sep 2024 11:38:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=BB=84=E4=BB=B6ReDrawer=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=8C=89=E9=92=AEloading=E7=AD=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReDrawer/index.vue | 25 ++++++++++++++++++++++---
 src/components/ReDrawer/type.ts   |  8 +++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/ReDrawer/index.vue b/src/components/ReDrawer/index.vue
index 1b0565b2cb..950bb046da 100644
--- a/src/components/ReDrawer/index.vue
+++ b/src/components/ReDrawer/index.vue
@@ -6,12 +6,14 @@ import {
   closeDrawer,
   drawerStore
 } from "./index";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { isFunction } from "@pureadmin/utils";
 defineOptions({
   name: "ReDrawer"
 });
 
+const sureBtnMap = ref({});
+
 const footerButtons = computed(() => {
   return (options: DrawerOptions) => {
     return options?.footerButtons?.length > 0
@@ -38,10 +40,26 @@ const footerButtons = computed(() => {
             bg: true,
             popConfirm: options?.popConfirm,
             btnClick: ({ drawer: { options, index } }) => {
-              const done = () =>
+              if (options?.sureBtnLoading) {
+                sureBtnMap.value[index] = Object.assign(
+                  {},
+                  sureBtnMap.value[index],
+                  {
+                    loading: true
+                  }
+                );
+              }
+              const closeLoading = () => {
+                if (options?.sureBtnLoading) {
+                  sureBtnMap.value[index].loading = false;
+                }
+              };
+              const done = () => {
+                closeLoading();
                 closeDrawer(options, index, { command: "sure" });
+              };
               if (options?.beforeSure && isFunction(options?.beforeSure)) {
-                options.beforeSure(done, { options, index });
+                options.beforeSure(done, { options, index, closeLoading });
               } else {
                 done();
               }
@@ -131,6 +149,7 @@ function handleClose(
           <el-button
             v-else
             v-bind="btn"
+            :loading="key === 1 && sureBtnMap[index]?.loading"
             @click="
               btn.btnClick({
                 drawer: { options, index },
diff --git a/src/components/ReDrawer/type.ts b/src/components/ReDrawer/type.ts
index df57535a19..f724bc087a 100644
--- a/src/components/ReDrawer/type.ts
+++ b/src/components/ReDrawer/type.ts
@@ -30,6 +30,8 @@ type DrawerProps = {
   closeOnClickModal?: boolean;
   /** 是否可以通过按下 ESC 关闭 Drawer ，默认 `true` */
   closeOnPressEscape?: boolean;
+  /** 是否显示关闭按钮，默认 `true` */
+  showClose?: boolean;
   /** `Drawer` 打开的延时时间，单位毫秒，默认 `0` */
   openDelay?: number;
   /** `Drawer` 关闭的延时时间，单位毫秒，默认 `0` */
@@ -153,6 +155,8 @@ interface DrawerOptions extends DrawerProps {
   hideFooter?: boolean;
   /** 确认按钮的 `PopConfirm` 气泡确认框相关配置 */
   popConfirm?: PopConfirm;
+  /** 点击确定按钮后是否开启 `loading` 加载动画 */
+  sureBtnLoading?: boolean;
   /**
    * @description 自定义抽屉标题的内容渲染器
    * @see {@link https://element-plus.org/zh-CN/component/drawer.html#%E6%8F%92%E6%A7%BD}
@@ -243,10 +247,12 @@ interface DrawerOptions extends DrawerProps {
     done: Function,
     {
       options,
-      index
+      index,
+      closeLoading
     }: {
       options: DrawerOptions;
       index: number;
+      closeLoading: Function;
     }
   ) => void;
 }