From 9bacc793e3d03bdb85866c26b9add7faf37cf511 Mon Sep 17 00:00:00 2001
From: hb0730 <1278032416@qq.com>
Date: Mon, 1 Apr 2024 11:09:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=87=BD=E6=95=B0=E5=BC=8F=E5=BC=B9?=
 =?UTF-8?q?=E5=87=BA=E6=A1=86=E6=96=B0=E5=A2=9E=E7=A1=AE=E8=AE=A4=E6=A1=86?=
 =?UTF-8?q?`ElPopconfirm`=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ReDialog/index.vue     | 41 ++++++++++++++++++---------
 src/components/ReDialog/type.ts       |  4 +++
 src/views/components/dialog/index.vue | 41 ++++++++++++++++++++++++++-
 3 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/src/components/ReDialog/index.vue b/src/components/ReDialog/index.vue
index e7fb2f108..1ca02d6e5 100644
--- a/src/components/ReDialog/index.vue
+++ b/src/components/ReDialog/index.vue
@@ -149,19 +149,34 @@ function handleClose(
         <component :is="options?.footerRenderer({ options, index })" />
       </template>
       <span v-else>
-        <el-button
-          v-for="(btn, key) in footerButtons(options)"
-          :key="key"
-          v-bind="btn"
-          @click="
-            btn.btnClick({
-              dialog: { options, index },
-              button: { btn, index: key }
-            })
-          "
-        >
-          {{ btn?.label }}
-        </el-button>
+        <template v-for="(btn, key) in footerButtons(options)" :key="key">
+          <el-popconfirm
+            v-if="btn.popconfirm"
+            :title="btn?.tips"
+            @confirm="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            <template #reference>
+              <el-button v-bind="btn">{{ btn?.label }}</el-button>
+            </template>
+          </el-popconfirm>
+          <el-button
+            v-else
+            v-bind="btn"
+            @click="
+              btn.btnClick({
+                dialog: { options, index },
+                button: { btn, index: key }
+              })
+            "
+          >
+            {{ btn?.label }}
+          </el-button>
+        </template>
       </span>
     </template>
   </el-dialog>
diff --git a/src/components/ReDialog/type.ts b/src/components/ReDialog/type.ts
index 827e8c7df..04203f758 100644
--- a/src/components/ReDialog/type.ts
+++ b/src/components/ReDialog/type.ts
@@ -78,6 +78,10 @@ type ButtonProps = {
   plain?: boolean;
   /** 是否为文字按钮，默认 `false` */
   text?: boolean;
+  /** 是否使用`Popconfirm 气泡确认框`进行确认button，默认 `false` */
+  popconfirm?: boolean;
+  /** `Popconfirm`确认框提示信息 */
+  tips?: string;
   /** 是否显示文字按钮背景颜色，默认 `false` */
   bg?: boolean;
   /** 是否为链接按钮，默认 `false` */
diff --git a/src/views/components/dialog/index.vue b/src/views/components/dialog/index.vue
index 1a3be82b1..9d85ea7ed 100644
--- a/src/views/components/dialog/index.vue
+++ b/src/views/components/dialog/index.vue
@@ -4,7 +4,7 @@ import { h, createVNode, ref } from "vue";
 import { message } from "@/utils/message";
 import formPrimitive from "./formPrimitive.vue";
 import forms, { type FormProps } from "./form.vue";
-import { cloneDeep, debounce } from "@pureadmin/utils";
+import { cloneDeep, debounce, isFunction } from "@pureadmin/utils";
 import {
   addDialog,
   closeDialog,
@@ -280,6 +280,44 @@ function onUpdateClick() {
   });
 }
 
+// popconfirm 确认框
+function onPopconfirmClick() {
+  addDialog({
+    width: "30%",
+    title: "popconfirm确认框示例",
+    footerButtons: [
+      {
+        label: "取消",
+        bg: true,
+        btnClick: ({ dialog: { options, index } }) => {
+          const done = () => closeDialog(options, index, { command: "cancel" });
+          if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
+            options.beforeCancel(done, { options, index });
+          } else {
+            done();
+          }
+        }
+      },
+      {
+        label: "确认",
+        type: "primary",
+        bg: true,
+        popconfirm: true,
+        tips: `是否确认修改当前数据`,
+        btnClick: ({ dialog: { options, index } }) => {
+          const done = () => closeDialog(options, index, { command: "sure" });
+          if (options?.beforeSure && isFunction(options?.beforeSure)) {
+            options.beforeSure(done, { options, index });
+          } else {
+            done();
+          }
+        }
+      }
+    ],
+    contentRenderer: () => <p>这是`Popconfirm`确认框示例</p>
+  });
+}
+
 // 结合Form表单（第一种方式，弹框关闭立刻恢复初始值）通过 props 属性接收子组件的 prop 并赋值
 function onFormOneClick() {
   addDialog({
@@ -496,6 +534,7 @@ function onBeforeSureClick() {
       <el-button @click="onCloseCallBackClick"> 关闭后的回调 </el-button>
       <el-button @click="onNestingClick"> 嵌套的弹框 </el-button>
       <el-button @click="onUpdateClick"> 更改弹框自身属性值 </el-button>
+      <el-button @click="onPopconfirmClick">popconfirm确认框</el-button>
     </el-space>
     <el-divider />
     <el-space wrap>