From 2ba13b5c1219615cac163d29c5441dbc7efb1857 Mon Sep 17 00:00:00 2001
From: zhangrenyuan <18990852002@163.com>
Date: Thu, 16 Oct 2025 13:46:35 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=87=91=E5=B8=81=E5=85=85=E5=80=BC?=
 =?UTF-8?q?=E3=80=81=E9=80=80=E6=AC=BE=E5=AE=A1=E6=A0=B8=E9=87=91=E8=B1=86?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8=E7=9A=84=E3=80=8A=E9=80=9A=E8=BF=87=E3=80=8B?=
 =?UTF-8?q?=E5=AF=B9=E8=AF=9D=E6=A1=86=E5=B7=B2=E6=9B=B4=E6=96=B0=E5=AE=8C?=
 =?UTF-8?q?=E6=AF=95=EF=BC=8Ctodo=E9=A9=B3=E5=9B=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dialogs/ConfirmDialog.vue |  6 ++-
 src/views/audit/bean/beanAudit.vue       | 61 +++++++++++++++++-------
 src/views/audit/gold/refundAudit.vue     | 82 ++++++++++++++++++++------------
 3 files changed, 98 insertions(+), 51 deletions(-)

diff --git a/src/components/dialogs/ConfirmDialog.vue b/src/components/dialogs/ConfirmDialog.vue
index fe92690..a099cfe 100644
--- a/src/components/dialogs/ConfirmDialog.vue
+++ b/src/components/dialogs/ConfirmDialog.vue
@@ -87,6 +87,8 @@ const handleClose = () => {
 </script>
 
 <style scoped>
+
+/* 将要**的样式 */
 .confirm-content {
   text-align: center;
   font-size: 40px;
@@ -100,7 +102,7 @@ const handleClose = () => {
   transform: translate(-50%, -50%);
   width: 100%;
 }
-
+/* 确认取消按钮组样式 */
 .dialog-footer-button {
   display: flex;
   justify-content: center;
@@ -115,7 +117,7 @@ const handleClose = () => {
   top: 70%;
   left: 30%;
 }
-
+/* 确认取消按钮样式 */
 .custom-large-button {
   font-size: 20px !important;
   height: 40px !important;
diff --git a/src/views/audit/bean/beanAudit.vue b/src/views/audit/bean/beanAudit.vue
index 8b64fd8..687d448 100644
--- a/src/views/audit/bean/beanAudit.vue
+++ b/src/views/audit/bean/beanAudit.vue
@@ -59,8 +59,7 @@
       免费金豆：{{ format3(stats.freeBean) }}金豆
     </div>
 
-    <el-table :data="tableData" height="55vh" @sort-change="handleSortChange"
-    :row-style="{ height: '50px' }">
+    <el-table :data="tableData" height="55vh" @sort-change="handleSortChange" :row-style="{ height: '50px' }">
       <el-table-column type="index" label="序号" width="80">
         <template #default="scope">
           {{ scope.$index + 1 + (pagination.pageNum - 1) * pagination.pageSize }}
@@ -89,20 +88,11 @@
         prop="operation" label="操作" width="400px">
         <template #default="scope">
           <div class="operation">
-            <el-popconfirm  title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
-              <template #reference>
-                <el-link :underline="false" class="pass-btn" v-if="hasbeanWaitThough"
-                  :disabled="clicked || cancelClicked" type="primary">
-                  通过
-                </el-link>
-              </template>
-              <template #actions="{ confirm, cancel }">
-                <el-button size="small" @click="cancel">取消</el-button>
-                <el-button type="primary" size="small" :disabled="clicked" @click="confirm">
-                  确认
-                </el-button>
-              </template>
-            </el-popconfirm>
+
+            <el-link :underline="false" class="pass-btn" v-if="hasbeanWaitThough" :disabled="clicked || cancelClicked"
+              type="primary" @click="showApproveDialog(scope.row)">
+              通过
+            </el-link>
             <el-link :underline="false" class="reject-btn" v-if="hasbeanWaitReject" :disabled="clicked || cancelClicked"
               type="primary" @click="showRejectDialog(scope.row)">
               驳回
@@ -129,6 +119,16 @@
       </span>
     </template>
   </el-dialog>
+
+  <ConfirmDialog 
+    v-model="approveDialogVisible"
+    message="通过该记录!"
+    @confirm="handleApproveConfirm"
+    @cancel="handleApproveCancel"
+    @close="handleApproveClose"
+  />
+
+
 </template>
 <script setup>
 import { onMounted, ref } from 'vue'
@@ -139,6 +139,7 @@ import { useAdminStore } from "@/store/index.js";
 import { storeToRefs } from "pinia";
 import _ from 'lodash'
 import { permissionMapping, hasMenuPermission } from "@/utils/menuTreePermission.js"
+import ConfirmDialog from '@/components/dialogs/ConfirmDialog.vue';
 
 const defaultTime = [
   new Date(2000, 1, 1, 0, 0, 0),
@@ -180,6 +181,9 @@ const initPermissions = async () => {
   hasbeanWaitThough.value = hasMenuPermission(menuTree.value, permissionMapping.beanWaitThough);
   hasbeanWaitReject.value = hasMenuPermission(menuTree.value, permissionMapping.beanWaitReject);
 };
+
+// 设置对话框可见性
+const approveDialogVisible = ref(false)
 const clicked = ref(false)
 // 状态常量
 const STATUS = {
@@ -315,8 +319,19 @@ const getStats = async () => {
     console.log('请求失败', error)
   }
 }
+// 显示通过对话框
+const showApproveDialog = (row) => {
+  if (!hasbeanWaitThough) {
+    ElMessage.error('暂无权限')
+    return
+  }
+  approveDialogVisible.value = true
+}
+
 // 处理通过操作
-const handleApprove = async (row) => {
+// 为什么使用handleApproveConfirm页面就加载不出来，使用handleApprove就可以，
+// （发现问题：加了防抖，名称为handleApprove，修改名称一致即可）
+const handleApproveConfirm = async (row) => {
   if (!hasbeanWaitThough) {
     ElMessage.error('暂无权限')
     return
@@ -329,6 +344,7 @@ const handleApprove = async (row) => {
     }
     await API({ url: '/beanAudit/status1', data: params })
     ElMessage.success('审核通过成功')
+    approveDialogVisible.value = false
     await get()
     clicked.value = false
     await getStats()
@@ -337,6 +353,14 @@ const handleApprove = async (row) => {
     ElMessage.error('操作失败')
   }
 }
+// 处理通过取消操作
+const handleApproveCancel = () => {
+  approveDialogVisible.value = false
+}
+// 处理通过关闭操作
+const handleApproveClose = () => {
+  approveDialogVisible.value = false
+}
 // 处理驳回操作
 const handleReject = async () => {
   if (!hasbeanWaitReject) {
@@ -483,7 +507,8 @@ const format3 = (num) => {
   // 每三位添加逗号
   return num.toLocaleString('en-US')
 }
-const throttledHandleApprove = _.throttle(handleApprove, 5000, {
+// 这个防抖好像还不能放在定义之前（handleApproveConfirm）
+const throttledHandleApprove = _.throttle(handleApproveConfirm, 5000, {
   trailing: false
 })
 const showRejectDialog = (row) => {
diff --git a/src/views/audit/gold/refundAudit.vue b/src/views/audit/gold/refundAudit.vue
index fab2199..d54a870 100644
--- a/src/views/audit/gold/refundAudit.vue
+++ b/src/views/audit/gold/refundAudit.vue
@@ -70,7 +70,7 @@
         format3((stats.permanentGolds + stats.freeGolds + stats.taskGolds).toFixed(2))
       }}金币&nbsp;&nbsp;&nbsp;&nbsp;
       永久金币：{{ format3(stats.permanentGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
-      免费金币：{{ format3(stats.freeGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
+免费金币：{{ format3(stats.freeGolds.toFixed(2)) }}金币&nbsp;&nbsp;&nbsp;&nbsp;
       任务金币：{{ format3(stats.taskGolds.toFixed(2)) }}金币
     </div>
 
@@ -82,7 +82,7 @@
       <el-table-column prop="market" label="所属地区" width="120" />
       <el-table-column prop="orderCode" label="订单号" width="260px" show-overflow-tooltip />
 
-      <el-table-column prop="refundType" label="退款类型" width="120" />
+<el-table-column prop="refundType" label="退款类型" width="120" />
       <el-table-column prop="refundModel" label="退款方式" width="120">
         <template #default="{ row }">
           {{ row.refundModel === 0 ? '全部退款' : '部分退款' }}
@@ -129,26 +129,19 @@
           {{ row.auditTime ? moment(row.auditTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
         </template>
       </el-table-column>
-      <el-table-column v-if="checkTab === 'pending' && (hasrefundWaitThough || hasrefundWaitReject) && hasrefundWaitShow"
-        fixed="right" prop="operation" label="操作" width="150px">
+      <el-table-column
+        v-if="checkTab === 'pending' && (hasrefundWaitThough || hasrefundWaitReject) && hasrefundWaitShow" fixed="right"
+        prop="operation" label="操作" width="150px">
         <template #default="scope">
           <div class="operation">
-            <el-popconfirm title="确定要通过此条记录吗？" @confirm="handleApprove(scope.row)">
-              <template #reference>
-                <el-link :underline="false" class="pass-btn" v-if="hasrefundWaitThough"
-                  :disabled="clicked || cancelClicked" type="primary">
-                  通过
-                </el-link>
-              </template>
-              <template #actions="{ confirm, cancel }">
-                <el-button size="small" @click="cancel">取消</el-button>
-                <el-button type="primary" size="small" :disabled="clicked" @click="confirm">
-                  确认
-                </el-button>
-              </template>
-            </el-popconfirm>
-            <el-link :underline="false" class="reject-btn" v-if="hasrefundWaitReject"
-              :disabled="clicked || cancelClicked" type="primary" @click="showRejectDialog(scope.row)">
+            <el-link  :underline="false" class="pass-btn" v-if="hasrefundWaitThough" 
+                      :disabled="clicked || cancelClicked"type="primary" 
+                      @click="showApproveDialog(scope.row)">
+              通过
+            </el-link>
+            <el-link  :underline="false" class="reject-btn" v-if="hasrefundWaitReject"
+                      :disabled="clicked || cancelClicked" type="primary" 
+                      @click="showRejectDialog(scope.row)">
               驳回
             </el-link>
           </div>
@@ -174,6 +167,16 @@
       </span>
     </template>
   </el-dialog>
+
+  <!-- 新增：使用ConfirmDialog组件 -->
+  <ConfirmDialog 
+    v-model="approveDialogVisible"
+    message="通过该记录!"
+    @confirm="handleApproveConfirm"
+    @cancel="handleApproveCancel"
+    @close="handleApproveClose"
+  />
+
 </template>
 
 <script setup>
@@ -185,6 +188,7 @@ import { useAdminStore } from "@/store/index.js";
 import { storeToRefs } from "pinia";
 import dayjs from "dayjs";
 import { permissionMapping, hasMenuPermission } from "@/utils/menuTreePermission.js"
+import ConfirmDialog from '@/components/dialogs/ConfirmDialog.vue';
 
 const adminStore = useAdminStore();
 const { adminData, menuTree } = storeToRefs(adminStore);
@@ -194,9 +198,11 @@ const defaultTime = [
 ]
 // 当前激活的时间按钮
 const activeTimeRange = ref('')
-const scopeValue = ref(null) // 当前行
+const currentRecord = ref(null) // 当前行信息
 const rejectDialogVisible = ref(false)
 const rejectReason = ref('')
+
+const approveDialogVisible = ref(false)
 // 状态常量
 const STATUS = {
   PENDING: 0, // 待审核
@@ -296,7 +302,7 @@ const showRejectDialog = (row) => {
     ElMessage.error('暂无权限')
     return
   }
-  scopeValue.value = row
+  currentRecord.value = row
   rejectReason.value = ''
   rejectDialogVisible.value = true
 }
@@ -361,22 +367,28 @@ const get = async function (val) {
   }
 }
 const clicked = ref(false);
-// 通过
-const handleApprove = async (row) => {
-  if (!hasrefundWaitThough) {
-    ElMessage.error('暂无权限')
-    return
-  }
+// 显示通过确认对话框
+const showApproveDialog = (row) => {
+  if(!hasrefundWaitThough){
+      ElMessage.error('暂无权限')
+      return
+    }
+  currentRecord.value = row
+  approveDialogVisible.value = true
+}
+// 使用handleApproveConfirm函数代替handleApprove
+const handleApproveConfirm = async () => {
   clicked.value = true
   try {
     const params = {
-      orderCode: row.orderCode,
+      orderCode: currentRecord.value.orderCode,
       auditId: adminData.value.id,
       action: 1,// action的1是通过,2是驳回
       rejectReason: ''
     }
     await API({ url: '/audit/audit', data: params })
     ElMessage.success('审核通过成功')
+    approveDialogVisible.value = false
     await get()
     clicked.value = false
     await getStats()
@@ -384,8 +396,16 @@ const handleApprove = async (row) => {
     console.error('审核通过失败', error)
     ElMessage.error('操作失败')
   }
-
 }
+// 处理通过取消操作
+const handleApproveCancel = () => {
+  approveDialogVisible.value = false
+}
+// 处理通过关闭操作
+const handleApproveClose = () => {
+  approveDialogVisible.value = false
+}
+
 //控制驳回确认按钮禁用状态
 const cancelClicked = ref(false)
 // 处理驳回操作
@@ -402,7 +422,7 @@ const handleReject = async () => {
   }
   try {
     const params = {
-      orderCode: scopeValue.value.orderCode,
+      orderCode: currentRecord.value.orderCode,
       auditId: adminData.value.id,
       action: 2,
       rejectReason: rejectReason.value