src/views/tirePartsMall/statisticAnalysis/red-packet/index.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="coupon-statistics">
         <el-card shadow="never">
+            <!-- 搜索表单区域 -->
             <el-form :model="searchForm" inline size="small" label-width="100px">
                 <el-form-item label="客户名称">
                     <el-input v-model="searchForm.storeName" placeholder="请输入客户名称" clearable />
@@ -17,13 +18,18 @@
                     />
                 </el-form-item>
 
+                <!-- 查询和重置按钮 -->
                 <el-form-item>
                     <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                     <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
                 </el-form-item>
             </el-form>
 
-            <!-- Data Table -->
+            <div class="action-bar">
+                <el-button type="warning" icon="el-icon-download" size="medium" @click="handleExport">导出</el-button>
+            </div>
+
+            <!-- 数据表格 -->
             <el-table
                 :data="tableData"
                 border
@@ -51,7 +57,6 @@
                 </el-table-column>
             </el-table>
 
-            <!-- Pagination -->
             <div class="pagination-wrapper" style="margin-top: 16px; text-align: right;">
                 <el-pagination
                     @size-change="handleSizeChange"
@@ -71,6 +76,7 @@
 <script>
 import { getCouponReportList } from "@/api/redPacket/index";
 import customerOrder from "@/views/tirePartsMall/statisticAnalysis/red-packet/customer-order.vue";
+import { getToken } from "@/util/auth";
 export default {
     name: 'CouponStatistics',
     components: {
@@ -142,6 +148,21 @@ export default {
             this.fetchData();
         },
 
+        // 导出方法
+        handleExport() {
+            const params = {
+                tenantId: 'x',
+                storeName: this.searchForm.storeName || undefined,
+                startDate: this.searchForm.dateRange ? this.searchForm.dateRange[0] : null,
+                endDate: this.searchForm.dateRange ? this.searchForm.dateRange[1] : null
+            };
+            const routeData = this.$router.resolve({
+                path: '/api/blade-sales-part/tire/coupon/exportCouponReportData',
+                query: params
+            })
+            window.open(routeData.href.slice(1, routeData.href.length) + '&' + `${this.website.tokenHeader}=${getToken()}`);
+        },
+
         handleSizeChange(val) {
             this.pagination.size = val;
             this.fetchData();
@@ -162,4 +183,8 @@ export default {
 .pagination-wrapper {
     margin-top: 16px;
 }
+.action-bar {
+    margin-bottom: 16px;
+    margin-top: 10px;
+}
 </style>