基本配置修改 优化

src/views/canteenreport/index.vue

@@ -134,12 +134,16 @@
         当前{{ detailType }}消费金额：<span style="color: #409eff;">{{ Math.abs(detailAmount) }}</span> 元
       </div>
       <el-table
-        :data="detailData"
+        :data="displayDetailData"
         border
         style="width: 100%"
          height="600px"
         :header-cell-style="tableHeaderStyle"
         :cell-style="tableCellStyle"
+        v-loading="detailLoading"
+        element-loading-text="数据加载中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(255, 255, 255, 0.8)"
       >
         <el-table-column
           label="序号"
@@ -188,7 +192,7 @@
         :total="detailTotal"
         :page.sync="detailParams.pageNum"
         :limit.sync="detailParams.pageSize"
-        @pagination="getDetailList"
+        @pagination="handleDetailPagination"
       />
 
       <span slot="footer" class="dialog-footer">
@@ -214,7 +218,6 @@ export default {
         orgId: null,
       },
       detailType: "",
-      detailAmount: "",
       loading: false,
       detailAmount: 0,  // 当前点击行的消费金额
       total: 0,
@@ -222,11 +225,13 @@ export default {
       detailVisible: false,
       detail: {},
       detailData: [],
+      allDetailData: [], // 存储所有详情数据
       detailTotal: 0,
       detailParams: {
         pageNum: 1,
         pageSize: 20,
       },
+      detailLoading: false, // 详情加载状态
       dateRange: [],
       pickerOptions: {
         shortcuts: [
@@ -275,6 +280,15 @@ export default {
       });
       totals.total = totals.reserve + totals.canteen + totals.super + totals.h5 + totals.deduction+totals.teabreak ;
       return totals;
+    },
+    // 前端分页：只显示当前页的数据，避免一次性渲染大量数据导致崩溃
+    displayDetailData() {
+      if (!this.allDetailData || this.allDetailData.length === 0) {
+        return [];
+      }
+      const start = (this.detailParams.pageNum - 1) * this.detailParams.pageSize;
+      const end = start + this.detailParams.pageSize;
+      return this.allDetailData.slice(start, end);
     }
   },
   methods: {
@@ -373,7 +387,7 @@ export default {
 
      /** 导出详情表格 */
      exportDetailExcel() {
-       if (!this.detailData || this.detailData.length === 0) {
+       if (!this.allDetailData || this.allDetailData.length === 0) {
          this.$message.warning("暂无详情数据可导出");
          return;
        }
@@ -385,8 +399,8 @@ export default {
        const header = ["所属组织", "人员姓名", "消费金额", "消费类型","钱包类型", "下单时间"];
        sheet.addRow(header);
 
-       // 数据行
-       this.detailData.forEach(item => {
+       // 数据行 - 导出所有数据
+       this.allDetailData.forEach(item => {
          // 消费类型处理
          let flowTypeLabel = item.flow_type_name || "";
          if (!flowTypeLabel) {
@@ -521,6 +535,8 @@ export default {
       this.detail = row;
       this.detailAmount = this.getAmountByStatus(row, status); // 取对应消费金额
       this.detailParams.pageNum = 1;
+      this.allDetailData = []; // 清空之前的数据
+      this.detailTotal = 0;
       this.detailVisible = true;
        if (status === 1) {
           this.detailType = "预订餐";
@@ -553,8 +569,73 @@ export default {
         default: return 0;
       }
     },
+    /** 详情分页处理（前端分页，不重新请求数据） */
+    handleDetailPagination() {
+      // 前端分页，只需要更新 pageNum 和 pageSize
+      // 数据会通过 displayDetailData 计算属性自动更新
+    },
+    /** 序号计算方法（考虑分页） */
+    indexMethod(index) {
+      return (this.detailParams.pageNum - 1) * this.detailParams.pageSize + index + 1;
+    },
+    /** 分批获取所有详情数据 */
+    fetchAllDetailData(status, startTime, endTime, total, firstPageData) {
+      const allData = [...firstPageData];
+      const pageSize = 1000; // 每页获取1000条
+      const totalPages = Math.ceil(total / pageSize);
+
+      // 如果只有一页，直接返回
+      if (totalPages <= 1) {
+        this.allDetailData = allData;
+        this.detailTotal = total;
+        this.detailParams.pageNum = 1;
+        this.detailLoading = false;
+        return;
+      }
+
+      // 分批获取剩余数据
+      const promises = [];
+      for (let page = 2; page <= totalPages; page++) {
+        const params = {
+          conSource: status,
+          orgName: this.detail.orgName,
+          pageNum: page,
+          pageSize: pageSize,
+          startPayTime: startTime,
+          endPayTime: endTime,
+        };
+        promises.push(getDetailList(params));
+      }
+
+      // 等待所有请求完成
+      Promise.all(promises).then((results) => {
+        results.forEach((res) => {
+          let pageData = [];
+          if (Array.isArray(res)) {
+            pageData = res;
+          } else if (res && res.data) {
+            pageData = res.data || [];
+          } else if (res && res.list) {
+            pageData = res.list || [];
+          }
+          allData.push(...pageData);
+        });
+
+        this.allDetailData = allData;
+        this.detailTotal = total;
+        this.detailParams.pageNum = 1;
+        this.detailLoading = false;
+      }).catch(() => {
+        // 即使部分失败，也使用已获取的数据
+        this.allDetailData = allData;
+        this.detailTotal = allData.length;
+        this.detailParams.pageNum = 1;
+        this.detailLoading = false;
+      });
+    },
     /** 获取详情分页数据 */
     getDetailList(status) {
+      this.detailLoading = true;
       // 处理日期范围
       let startTime = '';
       let endTime = '';
@@ -570,17 +651,55 @@ export default {
         ).padStart(2, "0")} 23:59:59`;
       }
 
-      const params = {
+      // 先尝试获取第一页数据，判断后端返回格式
+      const firstPageParams = {
         conSource: status,
         orgName: this.detail.orgName,
-        pageNum: this.detailParams.pageNum,
-        pageSize: this.detailParams.pageSize,
+        pageNum: 1,
+        pageSize: 1000, // 先尝试获取1000条
         startPayTime: startTime,
         endPayTime: endTime,
       };
-      getDetailList(params).then((res) => {
-        this.detailData = res || [];
-        this.detailTotal = res.total || 0;
+
+      getDetailList(firstPageParams).then((res) => {
+        // 处理返回的数据格式：可能是数组，也可能是 { data: [], total: 0 } 格式
+        let firstPageData = [];
+        let total = 0;
+        let isPaginated = false;
+
+        if (Array.isArray(res)) {
+          firstPageData = res;
+          total = res.length;
+          isPaginated = false; // 数组格式，可能是一次性返回所有数据
+        } else if (res && res.data) {
+          firstPageData = res.data || [];
+          total = res.total || 0;
+          isPaginated = total > firstPageData.length; // 如果total大于返回的数据量，说明是分页数据
+        } else if (res && res.list) {
+          firstPageData = res.list || [];
+          total = res.total || 0;
+          isPaginated = total > firstPageData.length;
+        } else {
+          firstPageData = [];
+          total = 0;
+          isPaginated = false;
+        }
+
+        // 如果数据量不大，直接使用；如果数据量大且是分页数据，需要分批获取
+        if (!isPaginated || firstPageData.length >= total) {
+          // 一次性获取完成，或者已经是所有数据
+          this.allDetailData = firstPageData;
+          this.detailTotal = total || firstPageData.length;
+          this.detailParams.pageNum = 1;
+          this.detailLoading = false;
+        } else {
+          // 需要分批获取所有数据
+          this.fetchAllDetailData(status, startTime, endTime, total, firstPageData);
+        }
+      }).catch(() => {
+        this.detailLoading = false;
+        this.allDetailData = [];
+        this.detailTotal = 0;
       });
     },
   },