From e0bdcaee0d1b2b28850e0ef779bd8daaeea6ac71 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Mon, 28 Apr 2025 11:05:44 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E5=AE=A1=E6=89=B9):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E9=80=80=E8=B4=A7=E5=AE=A1=E6=89=B9=E5=88=97=E8=A1=A8=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=E5=8A=9F=E8=83=BD=E5=B9=B6=E8=B0=83=E6=95=B4=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E5=88=97=E5=AE=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在审批页面中增加了导出Excel的功能，允许用户导出退货审批列表。同时调整了表格列的宽度以改善显示效果。
---
 src/api/shop/approval.ts          | 10 +++++--
 src/views/shop/approval/index.vue | 50 ++++++++++++++++++++++++-------
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/src/api/shop/approval.ts b/src/api/shop/approval.ts
index 37c3c48..b48e054 100644
--- a/src/api/shop/approval.ts
+++ b/src/api/shop/approval.ts
@@ -87,12 +87,16 @@ export interface UpdateReturnApprovalCommand {
 export const getReturnApprovalListApi = (params?: SearchReturnApprovalQuery) => {
   return http.request<ResponseData<PageDTO<ReturnApprovalDTO>>>(
     'get',
-    '/shop/returnApproval',
-    { params }
+    '/shop/returnApproval', {
+    params: {
+      ...params,
+      approvalTime: params?.approvalTime ? params.approvalTime : undefined
+    }
+  }
   );
 };
 /** 批量导出订单 */
-export const exportOrderExcelApi = (params: SearchReturnApprovalQuery, fileName: string) => {
+export const exportReturnApprovalExcelApi = (params: SearchReturnApprovalQuery, fileName: string) => {
   return http.download("/shop/returnApproval/excel", fileName, {
     params: {
       ...params,
diff --git a/src/views/shop/approval/index.vue b/src/views/shop/approval/index.vue
index 9b6acfe..23fdb7a 100644
--- a/src/views/shop/approval/index.vue
+++ b/src/views/shop/approval/index.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { getReturnApprovalListApi, deleteReturnApprovalApi, ReturnApprovalDTO, SearchReturnApprovalQuery } from "@/api/shop/approval";
+import { getReturnApprovalListApi, deleteReturnApprovalApi, exportReturnApprovalExcelApi, ReturnApprovalDTO, SearchReturnApprovalQuery } from "@/api/shop/approval";
 import Delete from "@iconify-icons/ep/delete";
 import Search from "@iconify-icons/ep/search";
 import Refresh from "@iconify-icons/ep/refresh";
@@ -34,6 +34,7 @@ const pagination = ref({
 });
 
 const loading = ref(false);
+const exportLoading = ref(false);
 const dataList = ref<ReturnApprovalDTO[]>([]);
 const multipleSelection = ref<number[]>([]);
 const detailVisible = ref(false);
@@ -75,6 +76,26 @@ const resetForm = () => {
 const handlePaginationChange = () => getList();
 
 // 批量删除
+const handleExport = async () => {
+  try {
+    exportLoading.value = true;
+    const dateSuffix = searchFormParams.value.approvalTime
+      ? `_${searchFormParams.value.approvalTime.split(' ')[0].replace(/-/g, '')}`
+      : '';
+    const fileName = `退货审批列表${dateSuffix}.xlsx`;
+    await exportReturnApprovalExcelApi({
+      ...searchFormParams.value,
+      pageSize: pagination.value.pageSize,
+      pageNum: pagination.value.currentPage
+    }, fileName);
+    ElMessage.success('导出任务已开始，请稍后查看下载文件');
+  } catch (e) {
+    ElMessage.error('导出失败');
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
 const handleBulkDelete = async () => {
   if (multipleSelection.value.length === 0) return;
 
@@ -140,6 +161,10 @@ getList();
         <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
           重置
         </el-button>
+        <el-button type="success" :loading="exportLoading" :icon="useRenderIcon('vscode-icons:file-type-excel2')"
+          @click="handleExport">
+          导出Excel
+        </el-button>
       </el-form-item>
     </el-form>
 
@@ -152,20 +177,23 @@ getList();
       </template>
       <el-table ref="tableRef" v-loading="loading" :data="dataList" row-key="approvalId"
         @selection-change="rows => multipleSelection = rows.map(r => r.approvalId)" border>
-        <el-table-column label="审批ID" prop="approvalId" width="50" />
-        <el-table-column label="订单ID" prop="orderId" width="50" />
-        <el-table-column label="商品ID" prop="goodsId" width="50" />
+        <el-table-column label="审批ID" prop="approvalId" width="80" />
+        <el-table-column label="订单ID" prop="orderId" width="80" />
+        <el-table-column label="商品ID" prop="goodsId" width="80" />
         <el-table-column label="用户姓名" prop="name" width="100" />
         <el-table-column label="手机号" prop="mobile" width="120" />
         <el-table-column label="商品名称" prop="goodsName" width="120" />
-        <el-table-column label="商品封面" width="100">
+        <el-table-column label="商品封面" width="120">
           <template #default="{ row }">
-            <el-image v-if="row.coverImg" :src="row.coverImg" :preview-src-list="[row.coverImg]" fit="cover"
-              class="rounded" width="40" height="40" />
+            <div v-if="row.coverImg" class="flex gap-2">
+              <el-image v-for="(img, index) in row.coverImg.split(',')" :key="index" :src="img"
+                :preview-src-list="row.coverImg.split(',')" :z-index="9999" :preview-teleported="true"
+                :hide-on-click-modal="true" fit="cover" class="rounded" width="40" height="40" />
+            </div>
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="商品价格" prop="goodsPrice" width="50">
+        <el-table-column label="商品价格" prop="goodsPrice" width="90">
           <template #default="{ row }">{{ row.goodsPrice }}元</template>
         </el-table-column>
         <el-table-column label="支付方式" prop="paymentMethod" width="100">
@@ -173,8 +201,8 @@ getList();
             {{ { wechat: '微信支付', balance: '余额支付' }[row.paymentMethod] || row.paymentMethod }}
           </template>
         </el-table-column>
-        <el-table-column label="退货数量" prop="returnQuantity" width="50" />
-        <el-table-column label="退款金额" prop="returnAmount" width="50">
+        <el-table-column label="退货数量" prop="returnQuantity" width="90" />
+        <el-table-column label="退款金额" prop="returnAmount" width="90">
           <template #default="{ row }">{{ row.returnAmount }}元</template>
         </el-table-column>
         <el-table-column label="提交时间" prop="createTime" width="180">
@@ -182,7 +210,7 @@ getList();
             {{ row.createTime ? new Date(row.createTime).toLocaleString() : '-' }}
           </template>
         </el-table-column>
-        <el-table-column label="状态" prop="status" width="80">
+        <el-table-column label="状态" prop="status" width="100">
           <template #default="{ row }">
             <el-tag :type="{ 1: 'warning', 2: 'success', 3: 'danger' }[row.status]">
               {{ row.statusStr }}