订单页面添加导出功能

src/api/orders.ts

@@ -4,6 +4,10 @@ export function ordersList(params ?: any) {
     return request.get({ url: '/orders/list', params })
 }
 
+export function downloadOrders(params ?: any) {
+    return request.get({ url: '/orders/downloadList', params })
+}
+
 export function getOrdersCurrent(params ?: any) {
     return request.get({ url: '/orders/current', params })
 }
@@ -18,4 +22,4 @@ export function getOrderDetail(params ?: any) {
 //订单退款
 export function refundReq(params ?: any) {
     return request.get({ url: '/order/refund', params })
-}
+}

src/views/orders/list.vue

@@ -22,13 +22,14 @@
 <!--                    <el-date-picker v-model="createTime" @change="setCreateTime" type="datetimerange"-->
 <!--                        range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />-->
 <!--                </el-form-item>-->
-                <el-form-item label="下单时间" class="w-[280px]">
+                <el-form-item label="下单时间" class="w-[440px]">
                     <el-date-picker v-model="checkoutTime" @change="setCheckoutTime" type="datetimerange"
                         range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
                 </el-form-item>
                 <el-form-item class="w-[280px]">
                     <el-button type="primary" @click="resetPage">查询</el-button>
                     <el-button @click="resetParams">重置</el-button>
+                    <el-button type="success" @click="download">下载</el-button>
                 </el-form-item>
             </el-form>
         </el-card>
@@ -100,7 +101,7 @@
                         row.deskName ? row.deskName : row.mealCode
                     }}</template>
                 </el-table-column>
-                <el-table-column label="产品清单" prop="deskName" min-width="120">
+                <el-table-column label="产品清单" min-width="120">
                     <template #default="{ row }">
                         <div v-for="orderDish in row.orderDishes" :key="orderDish.id">
                             {{ orderDish.name }}<span style="margin: 0 15px 0 15px;">x</span>{{orderDish.number}}
@@ -164,7 +165,7 @@
 </template>
 
 <script setup lang="ts">
-    import { ordersList, getOrderDetail, refundReq } from '@/api/orders'
+    import { ordersList, getOrderDetail, refundReq, downloadOrders } from '@/api/orders'
     import { usePaging } from '@/hooks/usePaging'
     import { timeFormat } from '@/utils/util'
     import feedback from '@/utils/feedback'
@@ -178,10 +179,17 @@
         checkoutTime: '',
         createTime: ''
     })
-    const { pager, getLists, resetPage, resetParams } = usePaging({
+    const { pager, getLists, resetPage } = usePaging({
         fetchFun: ordersList,
         params: queryParams
     })
+    const resetParams = () => {
+      queryParams.type = ''
+      queryParams.status = ''
+      checkoutTime.value = []
+      queryParams.checkoutTime = ''
+      getLists()
+    }
     const setCreateTime = (v : any) => {
         queryParams.createTime =
             Math.round(v[0].getTime() / 1000).toString() +
@@ -296,6 +304,34 @@
     //         return Money.add(total, Money.multiply(dish.price, dish.count))
     //     }, 0)
     // }
+    const download = async () => {
+      const res = await downloadOrders(queryParams)
+      console.warn("***downloadOrders***",res)
+      if (res) {
+        // 生成带当前时间的文件名
+        const timestamp = new Date()
+        const year = timestamp.getFullYear()
+        const month = String(timestamp.getMonth() + 1).padStart(2, '0')
+        const day = String(timestamp.getDate()).padStart(2, '0')
+        const hours = String(timestamp.getHours()).padStart(2, '0')
+        const minutes = String(timestamp.getMinutes()).padStart(2, '0')
+        const seconds = String(timestamp.getSeconds()).padStart(2, '0')
+        const filename = `订单列表_${year}${month}${day}_${hours}${minutes}${seconds}.xlsx`
+
+        downloadFile(res, filename)
+      }
+    }
+
+    const downloadFile = (url: string, filename?: string) => {
+      const link = document.createElement('a');
+      link.href = url;
+      if (filename) {
+        link.download = filename; // 指定下载文件名
+      }
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    };
 
     getLists()
 </script>