feat(审批模块): 新增支付方式和审批时间字段，优化退货和审核图片展示

在审批模块中新增了支付方式和审批时间字段，支持微信支付和余额支付两种支付方式。同时，将退货图片和审核图片的展示方式从数组改为逗号分隔的字符串，优化了图片的预览功能。此外，还新增了批量导出订单的功能，并调整了审批详情弹窗的布局。

src/api/shop/approval.ts

@@ -5,6 +5,13 @@ export interface SearchReturnApprovalQuery extends BasePageQuery {
   orderId?: number;
   goodsId?: number;
   status?: number;
+  approvalTime?: string;
+  /** 
+ * 支付方式
+ * @remarks 
+ * wechat-微信支付 | balance-余额支付
+ */
+  paymentMethod?: string;
 }
 
 /** 退货审批DTO */
@@ -22,10 +29,10 @@ export interface ReturnApprovalDTO {
   goodsPrice: number;
   /** 退还金额 */
   returnAmount: number;
-  /** 归还图片路径数组 */
+  /** 归还图片路径（逗号分隔） */
-  returnImages: string[];
+  returnImages: string;
-  /** 审核图片路径数组 */
+  /** 审核图片路径（逗号分隔） */
-  auditImages: string[];
+  auditImages: string;
   /** 归还说明 */
   returnRemark?: string;
   /** 审核说明 */
@@ -37,6 +44,17 @@ export interface ReturnApprovalDTO {
   createTime?: Date;
   updaterId?: number;
   updateTime?: Date;
+  approvalTime?: Date;
+  goodsName?: string;
+  coverImg?: string;
+  mobile?: string;
+  name?: string;
+  /**
+ * 支付方式
+ * @remarks 
+ * wechat-微信支付 | balance-余额支付
+ */
+  paymentMethod?: string;
 }
 
 export interface AddReturnApprovalCommand {
@@ -46,8 +64,8 @@ export interface AddReturnApprovalCommand {
   goodsId: number;
   /** 归还数量 */
   returnQuantity: number;
-  /** 归还图片路径数组 */
+  /** 归还图片路径（逗号分隔） */
-  returnImages: string[];
+  returnImages: string;
   /** 归还说明 */
   returnRemark?: string;
 }
@@ -57,8 +75,8 @@ export interface UpdateReturnApprovalCommand {
   approvalId: number;
   /** 归还数量 */
   returnQuantity: number;
-  /** 审核图片路径数组 */
+  /** 审核图片路径（逗号分隔） */
-  auditImages: string[];
+  auditImages: string;
   /** 审核说明 */
   auditRemark?: string;
   /** 审批状态(1待审核 2已通过 3已驳回) */
@@ -73,6 +91,15 @@ export const getReturnApprovalListApi = (params?: SearchReturnApprovalQuery) =>
     { params }
   );
 };
+/** 批量导出订单 */
+export const exportOrderExcelApi = (params: SearchReturnApprovalQuery, fileName: string) => {
+  return http.download("/shop/returnApproval/excel", fileName, {
+    params: {
+      ...params,
+      approvalTime: params?.approvalTime ? params.approvalTime : undefined
+    }
+  });
+};
 
 /** 新增退货审批 */
 export const addReturnApprovalApi = (data: AddReturnApprovalCommand) => {

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 } from "@/api/shop/approval";
+import { getReturnApprovalListApi, deleteReturnApprovalApi, 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";
@@ -17,11 +17,13 @@ const formRef = ref();
 const tableRef = ref();
 
 // 搜索表单
-const searchFormParams = ref({
+const searchFormParams = ref<SearchReturnApprovalQuery>({
   approvalId: null,
   orderId: null,
   goodsId: null,
-  status: null
+  status: null,
+  approvalTime: null,
+  paymentMethod: null
 });
 
 // 分页参数
@@ -48,7 +50,8 @@ const getList = async () => {
     });
     dataList.value = data.rows.map(item => ({
       ...item,
-      statusStr: { 1: '待审核', 2: '已通过', 3: '已驳回' }[item.status]
+      statusStr: { 1: '待审核', 2: '已通过', 3: '已驳回' }[item.status],
+      auditImages: item.status === 2 ? item.auditImages : ''
     }));
     pagination.value.total = data.total;
   } finally {
@@ -104,6 +107,10 @@ getList();
   <div class="main">
     <el-form ref="formRef" :inline="true" :model="searchFormParams"
       class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]">
+      <el-form-item label="审批时间：">
+        <el-date-picker v-model="searchFormParams.approvalTime" type="date" placeholder="选择审批时间"
+          value-format="YYYY-MM-DD HH:mm:ss" class="!w-[200px]" />
+      </el-form-item>
       <el-form-item label="审批ID：" prop="approvalId">
         <el-input v-model.number="searchFormParams.approvalId" placeholder="请输入审批ID" clearable class="!w-[180px]" />
       </el-form-item>
@@ -120,6 +127,12 @@ getList();
           <el-option label="已驳回" :value="3" />
         </el-select>
       </el-form-item>
+      <el-form-item label="支付方式：" prop="paymentMethod">
+        <el-select v-model="searchFormParams.paymentMethod" placeholder="请选择支付方式" clearable class="!w-[180px]">
+          <el-option label="微信支付" value="wechat" />
+          <el-option label="余额支付" value="balance" />
+        </el-select>
+      </el-form-item>
       <el-form-item>
         <el-button type="primary" :icon="useRenderIcon(Search)" @click="onSearch">
           搜索
@@ -139,31 +152,71 @@ 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 type="selection" width="55" />
+        <el-table-column label="审批ID" prop="approvalId" width="50" />
-        <el-table-column label="审批ID" prop="approvalId" width="120" />
+        <el-table-column label="订单ID" prop="orderId" width="50" />
-        <el-table-column label="订单ID" prop="orderId" width="120" />
+        <el-table-column label="商品ID" prop="goodsId" width="50" />
-        <el-table-column label="商品ID" prop="goodsId" width="120" />
+        <el-table-column label="用户姓名" prop="name" width="100" />
-        <el-table-column label="退货数量" prop="returnQuantity" width="100" />
+        <el-table-column label="手机号" prop="mobile" width="120" />
-        <el-table-column label="状态" prop="status" width="100">
+        <el-table-column label="商品名称" prop="goodsName" width="120" />
+        <el-table-column label="商品封面" width="100">
+          <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" />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品价格" prop="goodsPrice" width="50">
+          <template #default="{ row }">{{ row.goodsPrice }}元</template>
+        </el-table-column>
+        <el-table-column label="支付方式" prop="paymentMethod" width="100">
+          <template #default="{ row }">
+            {{ { 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">
+          <template #default="{ row }">{{ row.returnAmount }}元</template>
+        </el-table-column>
+        <el-table-column label="提交时间" prop="createTime" width="180">
+          <template #default="{ row }">
+            {{ row.createTime ? new Date(row.createTime).toLocaleString() : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="状态" prop="status" width="80">
           <template #default="{ row }">
             <el-tag :type="{ 1: 'warning', 2: 'success', 3: 'danger' }[row.status]">
               {{ row.statusStr }}
             </el-tag>
           </template>
         </el-table-column>
+        <el-table-column label="审批时间" prop="approvalTime" width="180">
+          <template #default="{ row }">
+            {{ row.approvalTime ? new Date(row.approvalTime).toLocaleString() : '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="退货图片" width="140">
+          <template #default="{ row }">
+            <div v-if="row.returnImages" class="flex gap-2">
+              <el-image v-for="(img, index) in row.returnImages.split(',')" :key="index" :src="img"
+                :preview-src-list="row.returnImages.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="操作" width="120" fixed="right">
           <template #default="{ row }">
             <el-button type="primary" link :icon="useRenderIcon(View)" @click="showDetail(row)">
               详情
             </el-button>
-            <el-popconfirm :title="`确认删除审批记录#${row.approvalId}？`"
+            <!-- <el-popconfirm :title="`确认删除审批记录#${row.approvalId}？`"
               @confirm="() => deleteReturnApprovalApi([row.approvalId])">
               <template #reference>
                 <el-button type="danger" link :icon="useRenderIcon(Delete)">
                   删除
                 </el-button>
               </template>
-            </el-popconfirm>
+    </el-popconfirm> -->
           </template>
         </el-table-column>
       </el-table>
@@ -175,22 +228,21 @@ getList();
     <!-- 详情弹窗 -->
     <el-dialog v-model="detailVisible" title="审批详情" width="50%">
       <el-descriptions :column="2" border>
-        <el-descriptions-item label="退货图片">
-          <div class="flex flex-wrap gap-2">
-            <el-image v-for="(img, index) in currentDetail?.returnImages" :key="index" :src="img"
-              :preview-src-list="currentDetail?.returnImages" :initial-index="index" fit="cover"
-              class="w-20 h-20 rounded" />
-          </div>
-        </el-descriptions-item>
-        <el-descriptions-item label="审核图片">
-          <div class="flex flex-wrap gap-2">
-            <el-image v-for="(img, index) in currentDetail?.auditImages" :key="index" :src="img"
-              :preview-src-list="currentDetail?.auditImages" :initial-index="index" fit="cover"
-              class="w-20 h-20 rounded" />
-          </div>
-        </el-descriptions-item>
         <el-descriptions-item label="退货说明">{{ currentDetail?.returnRemark || '无' }}</el-descriptions-item>
         <el-descriptions-item label="审核说明">{{ currentDetail?.auditRemark || '无' }}</el-descriptions-item>
+        <el-descriptions-item label="退货图片" :span="2">
+          <div class="flex flex-wrap gap-2">
+            <el-image v-for="(img, index) in currentDetail?.returnImages?.split(',')" :key="index" :src="img"
+              :preview-src-list="currentDetail?.returnImages?.split(',')" :initial-index="index" fit="cover"
+              class="w-20 h-20 rounded" />
+          </div>
+        </el-descriptions-item>
+        <el-descriptions-item label="审核图片" :span="2" v-if="currentDetail?.auditImages?.length">
+          <div class="flex flex-wrap gap-2">
+            <el-image v-for="(img, index) in currentDetail?.auditImages?.split(',')" :key="index" :src="img"
+              :preview-src-list="currentDetail?.auditImages?.split(',')" fit="cover" class="w-20 h-20 rounded" />
+          </div>
+        </el-descriptions-item>
       </el-descriptions>
     </el-dialog>
   </div>