From a9f150c44694a43ee3d945a2579890015ca07c94 Mon Sep 17 00:00:00 2001
From: lizhenhua <1075222162@qq.com>
Date: Mon, 8 Sep 2025 10:53:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9F=BA=E6=9C=AC=E9=85=8D=E7=BD=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/canteen/canteenRecord.js   |  45 +++
 src/views/canteenreport/index.vue  | 515 +++++++++++++++++++++++++++++
 src/views/canteenreport/people.vue | 411 +++++++++++++++++++++++
 3 files changed, 971 insertions(+)
 create mode 100644 src/api/canteen/canteenRecord.js
 create mode 100644 src/views/canteenreport/index.vue
 create mode 100644 src/views/canteenreport/people.vue

diff --git a/src/api/canteen/canteenRecord.js b/src/api/canteen/canteenRecord.js
new file mode 100644
index 00000000..9d3907c4
--- /dev/null
+++ b/src/api/canteen/canteenRecord.js
@@ -0,0 +1,45 @@
+import request from '@/utils/request'
+
+// 查询食堂支付记录列表
+export function listCanteenRecord(query) {
+  return request({
+    url: '/smart-canteen/api/v2/report/consume/list',
+    method: 'post',
+    data: query
+  })
+}
+//人员报表信息查询
+export function peoplelistRecord(query) {
+  return request({
+    url: '/smart-canteen/api/v2/report/consume/peoplelist',
+    method: 'get',
+    params: query
+  })
+}
+//获取组织树
+export function getTree(query) {
+  return request({
+    url: '/smart-canteen/api/v2/report/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询详情列表
+export function getDetailList(query) {
+  return request({
+    url: '/smart-canteen/api/v2/report/consume/listByArea',
+    method: 'post',
+    data: query
+  })
+}
+
+// 若依内置了 download 工具，页面里直接用 this.download 更方便（见下）
+export function download(query) {
+  return request({
+    url: '/smart-canteen/api/v2/report/consume/exportExcel',
+    method: 'post',
+    data: query,
+    responseType: 'blob'
+  })
+}
diff --git a/src/views/canteenreport/index.vue b/src/views/canteenreport/index.vue
new file mode 100644
index 00000000..9f5dbc01
--- /dev/null
+++ b/src/views/canteenreport/index.vue
@@ -0,0 +1,515 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件 -->
+    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="display: flex; align-items: center; flex-wrap: wrap;">
+      <el-form-item label="支付开始时间">
+        <el-date-picker
+          v-model="queryParams.startPayTime"
+          type="datetime"
+          placeholder="选择开始时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="支付结束时间">
+        <el-date-picker
+          v-model="queryParams.endPayTime"
+          type="datetime"
+          placeholder="选择结束时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          clearable
+        />
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <el-button type="success" @click="exportExcel" style="margin-left: 8px;">导出</el-button>
+      </el-form-item>
+      <!-- 查询按钮和合计在同一行 -->
+      <el-form-item style="margin-left: auto;">
+       <div style="display: inline-block; margin-left: 20px; font-size: 20px; color: #606266;">
+         合计：<b style="color: #67C23A;">{{ pageTotals.total.toFixed(2) }}</b> 元
+       </div>
+      </el-form-item>
+    </el-form>
+
+    <!-- 主表格 -->
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      :header-cell-style="tableHeaderStyle"
+      :cell-style="tableCellStyle"
+       v-loading="loading"
+        element-loading-text="数据加载中..."
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(255, 255, 255, 0.8)"
+    >
+      <el-table-column label="食堂名称" prop="orgName" align="center" />
+      <el-table-column label="预订餐消费" prop="reserveAmount" align="center">
+        <template slot-scope="scope">
+          <span class="clickable" @click="handleDetail(scope.row,1)">
+            {{ Math.abs(scope.row.reserveAmount) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="食堂消费" prop="canteenAmount" align="center">
+        <template slot-scope="scope">
+          <span class="clickable" @click="handleDetail(scope.row,3)">
+            {{ Math.abs(scope.row.canteenAmount) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="超市消费" prop="superAmount" align="center">
+        <template slot-scope="scope">
+          <span class="clickable" @click="handleDetail(scope.row,4)">
+            {{ Math.abs(scope.row.superAmount) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="驿站消费" prop="h5Amount" align="center">
+        <template slot-scope="scope">
+          <span class="clickable" @click="handleDetail(scope.row,2)">
+            {{ Math.abs(scope.row.h5Amount) }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column label="消费补扣" prop="deductionAmount" align="center">
+        <template slot-scope="scope">
+          <span class="clickable" @click="handleDetail(scope.row,5)">
+            {{ Math.abs(scope.row.deductionAmount) }}
+          </span>
+        </template>
+      </el-table-column>
+     <el-table-column label="总和" align="center">
+       <template slot-scope="scope">
+         <span
+           style="color: #67c23a; font-weight: bold;"
+         >
+          {{
+            (
+              Math.abs(scope.row.reserveAmount || 0) +
+              Math.abs(scope.row.canteenAmount || 0) +
+              Math.abs(scope.row.superAmount || 0) +
+              Math.abs(scope.row.deductionAmount || 0) +
+              Math.abs(scope.row.h5Amount || 0)
+            ).toFixed(2)
+          }}
+
+         </span>
+       </template>
+     </el-table-column>
+
+    </el-table>
+
+    <!-- 主表分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      :visible.sync="detailVisible"
+      :title="detail.orgName + ' - 消费详情'"
+      width="1400px"
+      class="detail-dialog"
+    >
+        <!-- 导出按钮 -->
+          <el-button
+            type="success"
+            size="small"
+            style="margin-bottom: 10px;"
+            @click="exportDetailExcel"
+          >
+            导出详情
+          </el-button>
+      <!-- 消费金额展示 -->
+      <div style="margin-bottom: 10px; font-weight: bold; font-size: 16px;">
+        当前{{ detailType }}消费金额：<span style="color: #409eff;">{{ Math.abs(detailAmount) }}</span> 元
+      </div>
+      <el-table
+        :data="detailData"
+        border
+        style="width: 100%"
+         height="600px"
+        :header-cell-style="tableHeaderStyle"
+        :cell-style="tableCellStyle"
+      >
+        <el-table-column
+          label="序号"
+          align="center"
+          type="index"
+          :index="indexMethod"
+          width="80"
+        />
+        <el-table-column label="所属组织" prop="orgFullName" align="center" />
+        <el-table-column label="人员姓名" prop="custName" align="center" />
+        <el-table-column label="消费金额" prop="amount" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.amount }}
+          </template>
+        </el-table-column>
+        <el-table-column label="消费类型" prop="canteenAmount" align="center">
+          <template slot-scope="scope">
+            <span class="clickable" @click="handleDetail(scope.row)">
+                  <span :style="{ color: getConsumeTypeColor(scope.row) }">
+                    {{ getConsumeTypeLabel(scope.row) }}
+                  </span>
+
+                </span>
+          </template>
+        </el-table-column>
+        <el-table-column label="支付时间" prop="payTime" align="center" />
+      </el-table>
+      <!-- 详情分页 -->
+      <pagination
+        v-show="detailTotal > 0"
+        :total="detailTotal"
+        :page.sync="detailParams.pageNum"
+        :limit.sync="detailParams.pageSize"
+        @pagination="getDetailList"
+      />
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listCanteenRecord, getDetailList } from "@/api/canteen/canteenRecord";
+import ExcelJS from "exceljs";
+import { saveAs } from "file-saver";
+export default {
+  name: "CanteenRecord",
+  data() {
+     const today = new Date();
+        const startOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(
+          today.getDate()
+        ).padStart(2, "0")} 00:00:00`;
+        const endOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(
+          today.getDate()
+        ).padStart(2, "0")} 23:59:59`;
+    return {
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        startPayTime: startOfDay,
+        endPayTime: endOfDay,
+        orgId: null,
+      },
+      detailType: "",
+      detailAmount: "",
+      loading: false,
+      detailAmount: 0,  // 当前点击行的消费金额
+      total: 0,
+      tableData: [],
+      detailVisible: false,
+      detail: {},
+      detailData: [],
+      detailTotal: 0,
+      detailParams: {
+        pageNum: 1,
+        pageSize: 20,
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  computed: {
+    pageTotals() {
+      const totals = { reserve: 0, canteen: 0, super: 0, h5: 0, deduction: 0, total: 0 };
+      (this.tableData || []).forEach(row => {
+        const reserve = Math.abs(Number(row.reserveAmount) || 0);
+        const canteen = Math.abs(Number(row.canteenAmount) || 0);
+        const sup = Math.abs(Number(row.superAmount) || 0);
+        const h5 = Math.abs(Number(row.h5Amount) || 0);
+        const deduction = Math.abs(Number(row.deductionAmount) || 0);
+
+        totals.reserve += reserve;
+        totals.canteen += canteen;
+        totals.super += sup;
+        totals.h5 += h5;
+        totals.deduction += deduction;
+      });
+      totals.total = totals.reserve + totals.canteen + totals.super + totals.h5 + totals.deduction;
+      return totals;
+    }
+  },
+  methods: {
+       exportExcel() {
+         if (!this.tableData || this.tableData.length === 0) {
+           this.$message.warning("暂无数据可导出");
+           return;
+         }
+
+         // 创建工作簿和表
+         const workbook = new ExcelJS.Workbook();
+         const sheet = workbook.addWorksheet("消费统计");
+
+         // 表头
+         const header = ["食堂名称", "预订餐消费", "食堂消费", "超市消费", "驿站消费","消费补扣","总和"];
+         sheet.addRow(header);
+
+         // 数据行
+         this.tableData.forEach(item => {
+           sheet.addRow([
+             item.orgName,
+             Math.abs(item.reserveAmount || 0),
+             Math.abs(item.canteenAmount || 0),
+             Math.abs(item.superAmount || 0),
+             Math.abs(item.h5Amount || 0),
+             Math.abs(item.deductionAmount || 0),
+             (
+               Math.abs(item.reserveAmount || 0) +
+               Math.abs(item.canteenAmount || 0) +
+               Math.abs(item.superAmount || 0) +
+                Math.abs(item.deductionAmount || 0) +
+               Math.abs(item.h5Amount || 0)
+             ).toFixed(2)
+           ]);
+         });
+
+         // 设置列宽 + 居中
+        sheet.columns = [
+          { header: "所属组织", key: "orgFullName", width: 40 },
+          { header: "人员姓名", key: "custName", width: 10 },
+          { header: "消费金额", key: "amount", width: 10 },
+          { header: "消费类型", key: "flow_type_name", width: 10 },
+          { header: "支付时间", key: "payTime", width: 30 },
+        ];
+
+
+         // 表头样式
+         sheet.getRow(1).eachCell(cell => {
+           cell.font = { bold: true, size: 12, color: { argb: "FF000000" } };
+           cell.alignment = { vertical: "middle", horizontal: "center" };
+           cell.fill = {
+             type: "pattern",
+             pattern: "solid",
+             fgColor: { argb: "FFEAEAEA" } // 灰色底
+           };
+           cell.border = {
+             top: { style: "thin" },
+             left: { style: "thin" },
+             bottom: { style: "thin" },
+             right: { style: "thin" }
+           };
+         });
+
+         // 数据行样式（居中 + 边框）
+         sheet.eachRow((row, rowNumber) => {
+           if (rowNumber !== 1) {
+             row.eachCell(cell => {
+               cell.alignment = { vertical: "middle", horizontal: "center" };
+               cell.border = {
+                 top: { style: "thin", color: { argb: "FFCCCCCC" } },
+                 left: { style: "thin", color: { argb: "FFCCCCCC" } },
+                 bottom: { style: "thin", color: { argb: "FFCCCCCC" } },
+                 right: { style: "thin", color: { argb: "FFCCCCCC" } }
+               };
+             });
+           }
+         });
+
+         // 导出文件
+         workbook.xlsx.writeBuffer().then(buffer => {
+           const fileName = `消费统计_${new Date().toLocaleDateString().replace(/\//g, "-")}.xlsx`;
+           saveAs(new Blob([buffer], { type: "application/octet-stream" }), fileName);
+         });
+        },
+
+     /** 导出详情表格 */
+     exportDetailExcel() {
+       if (!this.detailData || this.detailData.length === 0) {
+         this.$message.warning("暂无详情数据可导出");
+         return;
+       }
+
+       const workbook = new ExcelJS.Workbook();
+       const sheet = workbook.addWorksheet("消费详情");
+
+       // 表头
+       const header = ["所属组织", "人员姓名", "消费金额", "消费类型", "支付时间"];
+       sheet.addRow(header);
+
+       // 数据行
+       this.detailData.forEach(item => {
+         // 消费类型处理
+         let flowTypeLabel = item.flow_type_name || "";
+         if (!flowTypeLabel) {
+           const ft = Number(item.flowType ?? item.flow_type);
+           if (ft === 110) flowTypeLabel = "消费";
+           else if (ft === 130) flowTypeLabel = "退款";
+           else if (ft === 120) flowTypeLabel = "补扣";
+           else flowTypeLabel = "其他";
+         }
+      // 简单处理金额负数
+        const ft = Number(item.flowType ?? item.flow_type);
+        if (ft === 110 || ft === 120) {
+          item.amount = -Math.abs(item.amount); // 消费和补扣为负
+        } else if (ft === 130) {
+          item.amount = Math.abs(item.amount);  // 退款为正
+        }
+         sheet.addRow([
+           item.orgFullName || "",
+           item.custName || "",
+           item.amount,
+           flowTypeLabel,
+           item.payTime || ""
+         ]);
+       });
+
+       // 设置列宽 + 居中
+       sheet.columns.forEach(col => {
+         col.width = 18;
+         col.alignment = { vertical: "middle", horizontal: "center" };
+       });
+
+       // 表头样式
+       sheet.getRow(1).eachCell(cell => {
+         cell.font = { bold: true, size: 12, color: { argb: "FF000000" } };
+         cell.alignment = { vertical: "middle", horizontal: "center" };
+         cell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "FFEAEAEA" } };
+         cell.border = {
+           top: { style: "thin" },
+           left: { style: "thin" },
+           bottom: { style: "thin" },
+           right: { style: "thin" }
+         };
+       });
+
+       // 数据行样式（居中 + 边框）
+       sheet.eachRow((row, rowNumber) => {
+         if (rowNumber !== 1) {
+           row.eachCell(cell => {
+             cell.alignment = { vertical: "middle", horizontal: "center" };
+             cell.border = {
+               top: { style: "thin", color: { argb: "FFCCCCCC" } },
+               left: { style: "thin", color: { argb: "FFCCCCCC" } },
+               bottom: { style: "thin", color: { argb: "FFCCCCCC" } },
+               right: { style: "thin", color: { argb: "FFCCCCCC" } }
+             };
+           });
+         }
+       });
+
+       // 导出文件
+       workbook.xlsx.writeBuffer().then(buffer => {
+         const fileName = `消费详情_${this.detail.orgName}_${new Date().toLocaleDateString().replace(/\//g, "-")}.xlsx`;
+         saveAs(new Blob([buffer], { type: "application/octet-stream" }), fileName);
+       });
+     },
+   getConsumeTypeLabel(row) {
+     if(row.flowType ==110){
+       return '消费'
+     }else if(row.flowType == 130){
+       return '退款'
+     }else if(row.flowType ==120){
+       return '补扣'
+     }
+   },
+      getConsumeTypeColor(row,type) {
+        let amount = Number(row.amount || 0)
+        return amount >= 0 ? 'green' : 'red'
+      },
+    tableHeaderStyle() {
+      return { background: "#f5f7fa", fontWeight: "bold", textAlign: "center" };
+    },
+    tableCellStyle() {
+      return { textAlign: "center" };
+    },
+    /** 查询主表 */
+    getList() {
+      this.loading = true; // 开启加载
+      listCanteenRecord(this.queryParams).then((res) => {
+        this.tableData = res|| [];
+         this.loading = false;
+      });
+    },
+    handleQuery() {
+      if (
+        this.queryParams.startPayTime &&
+        this.queryParams.endPayTime &&
+        this.queryParams.endPayTime < this.queryParams.startPayTime
+      ) {
+        this.$message.error("结束时间不能早于开始时间");
+        return;
+      }
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    resetQuery() {
+      this.queryParams = { pageNum: 1, pageSize: 10, startPayTime: null, endPayTime: null, orgId: null };
+      this.getList();
+    },
+    /** 查看详情 */
+    handleDetail(row,status) {
+      this.detail = row;
+      this.detailAmount = this.getAmountByStatus(row, status); // 取对应消费金额
+      this.detailParams.pageNum = 1;
+      this.detailVisible = true;
+       if (status === 1) {
+          this.detailType = "预订餐";
+          this.detailAmount = row.reserveAmount;
+        } else if (status === 3) {
+          this.detailType = "食堂";
+          this.detailAmount = row.canteenAmount;
+        } else if (status === 4) {
+          this.detailType = "超市";
+          this.detailAmount = row.superAmount;
+        } else if (status === 2) {
+          this.detailType = "驿站";
+          this.detailAmount = row.h5Amount;
+        }else if (status === 5) {
+          this.detailType = "补扣";
+          this.detailAmount = row.deductionAmount;
+        }
+      this.getDetailList(status);
+    },
+    // 新增一个方法，获取对应金额
+    getAmountByStatus(row, status) {
+      switch (status) {
+        case 1: return row.reserveAmount;
+        case 2: return row.h5Amount;
+        case 3: return row.canteenAmount;
+        case 4: return row.superAmount;
+        default: return 0;
+      }
+    },
+    /** 获取详情分页数据 */
+    getDetailList(status) {
+      const params = {
+        conSource: status,
+        orgName: this.detail.orgName,
+        pageNum: this.detailParams.pageNum,
+        pageSize: this.detailParams.pageSize,
+        startPayTime: this.queryParams.startPayTime,
+        endPayTime: this.queryParams.endPayTime,
+      };
+      getDetailList(params).then((res) => {
+        this.detailData = res || [];
+        this.detailTotal = res.total || 0;
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.clickable {
+  color: #409eff;
+  cursor: pointer;
+  font-weight: 500;
+}
+.clickable:hover {
+  text-decoration: underline;
+}
+.detail-dialog ::v-deep .el-table th {
+  background: #f5f7fa;
+  font-weight: 600;
+}
+</style>
diff --git a/src/views/canteenreport/people.vue b/src/views/canteenreport/people.vue
new file mode 100644
index 00000000..1e444d85
--- /dev/null
+++ b/src/views/canteenreport/people.vue
@@ -0,0 +1,411 @@
+<template>
+  <div class="app-container">
+    <!-- 查询条件 -->
+    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
+
+     <!-- <el-form-item label="所属组织">
+        <el-input v-model="queryParams.orgName" placeholder="请输入组织名称" clearable />
+      </el-form-item> -->
+       <el-form-item label="所属组织">
+              <el-cascader
+                v-model="selectedOrg"
+                :options="orgOptions"
+                :show-all-levels="false"
+                clearable
+                filterable
+                placeholder="请选择所属组织"
+                :props="{
+                      checkStrictly: true,
+                      expandTrigger: 'hover',
+                      value: 'orgId',
+                      label: 'orgName',
+                      children: 'children'
+                    }"
+                style="width: 260px;"
+              >
+              </el-cascader>
+            </el-form-item>
+      <el-form-item label="用户姓名">
+        <el-input v-model="queryParams.custName" placeholder="请输入组织名称" clearable />
+      </el-form-item>
+      <el-form-item label="支付开始时间">
+        <el-date-picker
+          v-model="queryParams.startPayTime"
+          type="datetime"
+          placeholder="选择开始时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item label="支付结束时间">
+        <el-date-picker
+          v-model="queryParams.endPayTime"
+          type="datetime"
+          placeholder="选择结束时间"
+          value-format="yyyy-MM-dd HH:mm:ss"
+          clearable
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleQuery">查询</el-button>
+        <el-button type="success" @click="newexportExcel">导出列表</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 主表格 -->
+    <el-table
+      :data="tableData.slice((pageNum-1)*pageSize,pageNum*pageSize)"
+      border
+      style="width: 100%"
+      :header-cell-style="tableHeaderStyle"
+      :cell-style="tableCellStyle"
+      v-loading="loading"
+      element-loading-text="数据加载中..."
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(255, 255, 255, 0.8)"
+    >
+      <!-- 序号列：连续分页序号 -->
+      <el-table-column
+        label="序号"
+        align="center"
+        type="index"
+        :index="indexMethod"
+        width="80"
+      />
+      <el-table-column
+        label="所属组织"
+        prop="orgFullName"
+        align="center"
+        :show-overflow-tooltip="true"
+      />
+
+      <el-table-column label="用户姓名" prop="custName" align="center" />
+      <el-table-column label="用户编号" prop="custId" align="center" />
+     <el-table-column label="订单类型" prop="flowType" align="center">
+       <template #default="scope">
+         <span :style="{ color: getFlowTypeColor(scope.row.flowType), fontWeight: 'bold' }">
+           {{ getFlowTypeLabel(scope.row.flowType) }}
+         </span>
+       </template>
+     </el-table-column>
+
+     <el-table-column label="订单金额" align="center">
+       <template v-slot="scope">
+         {{ (Math.abs(scope.row.amount) / 100).toFixed(2) }}
+       </template>
+     </el-table-column>
+
+      <el-table-column label="用户手机号" prop="phone" align="center" />
+      <el-table-column label="下单时间" prop="ordTime" align="center" />
+      <el-table-column label="备注" prop="remark" align="center" />
+    </el-table>
+
+    <!-- 主表分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 详情弹窗 -->
+    <el-dialog
+      :visible.sync="detailVisible"
+      :title="detail.orgName + ' - 消费详情'"
+      width="1400px"
+      class="detail-dialog"
+    >
+      <el-button
+        type="success"
+        size="small"
+        style="margin-bottom: 10px;"
+        @click="exportDetailExcel"
+      >
+        导出详情
+      </el-button>
+
+      <el-table
+        :data="detailData"
+        border
+        style="width: 100%"
+        height="600px"
+        :header-cell-style="tableHeaderStyle"
+        :cell-style="tableCellStyle"
+      >
+        <el-table-column label="用户姓名" prop="custName" align="center" />
+        <el-table-column label="用户编号" prop="custId" align="center" />
+        <el-table-column label="所属组织" prop="orgFullName" align="center" />
+        <el-table-column label="订单类型" prop="consumeSource" align="center" />
+        <el-table-column label="订单金额" prop="amount" align="center">
+          <template slot-scope="scope">
+            {{ (scope.row.amount / 100).toFixed(2) }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="用户手机号" prop="phone" align="center" />
+        <el-table-column label="下单时间" prop="ordTime" align="center" />
+        <el-table-column label="备注" prop="remark" align="center" />
+      </el-table>
+
+      <!-- 详情分页 -->
+     <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
+
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="detailVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {getTree, peoplelistRecord,download} from "@/api/canteen/canteenRecord";
+import ExcelJS from "exceljs";
+import { saveAs } from "file-saver";
+export default {
+  data() {
+    const today = new Date();
+    const startOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2,"0")} 00:00:00`;
+    const endOfDay = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2,"0")}-${String(today.getDate()).padStart(2,"0")} 23:59:59`;
+    return {
+      selectedOrg: [], // 支持多选
+      orgOptions:[],
+      queryParams: {
+      pageNum: 1,
+      pageSize: 10,
+      startPayTime: startOfDay,
+      endPayTime: endOfDay,
+      orgName: "",
+      },
+      detailVisible: false,
+      detail: {},
+      tableData: [],
+      total: 0,
+      detailData: [],
+      detailTotal: 0,
+      detailParams: { pageNum: 1, pageSize: 20 },
+      loading: false,
+      pageNum: 1,
+      pageSize: 10,
+    };
+  },
+  created() {
+    this.getList();
+    this.getTree();
+  },
+  methods: {
+    getTree(){
+      getTree().then(res => {
+         this.orgOptions = res;
+      });
+    },
+      // 递归获取节点及子节点的所有 orgId
+      getAllChildIds(node) {
+        let ids = [node.orgId]; // 当前节点
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(child => {
+            ids = ids.concat(this.getAllChildIds(child)); // 递归获取子节点
+          });
+        }
+        return ids;
+      },
+
+      // 根据 cascader 的选中路径获取所有要传的 orgId
+      getSelectedOrgIds() {
+        if (!this.selectedOrg || this.selectedOrg.length === 0) return [];
+
+        const lastValue = this.selectedOrg[this.selectedOrg.length - 1];
+
+        // 找到对应节点
+        let stack = [...this.orgOptions];
+        let node = null;
+        for (let val of this.selectedOrg) {
+          node = stack.find(item => item.orgId === val); // ⚠️ 改成 orgId
+          if (!node) break;
+          stack = node.children || [];
+        }
+
+        if (node) {
+          return this.getAllChildIds(node); // 找到则递归所有子节点 orgId
+        }
+        return [lastValue]; // 没找到就只返回最后一级
+      },
+      indexMethod(index) {
+        return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
+      },
+     // 返回文字标签
+      getFlowTypeLabel(flowType) {
+          flowType = Number(flowType || 0);
+        if (flowType === 110) return "消费";
+        if (flowType === 130) return "退款";
+        if (flowType === 120) return "消费补扣";
+        return "其他";
+      },
+      // 返回颜色
+      getFlowTypeColor(flowType) {
+        flowType = Number(flowType || 0);
+        if (flowType === 110) return "red";   // 消费红色
+        if (flowType === 130) return "green"; // 退款绿色
+        return "black";
+      },
+    tableHeaderStyle() { return { background: "#f5f7fa", fontWeight: "bold", textAlign: "center" }; },
+    tableCellStyle() { return { textAlign: "center" }; },
+
+    handleQuery() {
+      if(this.queryParams.startPayTime && this.queryParams.endPayTime && this.queryParams.endPayTime < this.queryParams.startPayTime){
+        this.$message.error("结束时间不能早于开始时间");
+        return;
+      }
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    getList() {
+      this.loading = true;
+          // 取最后一级 orgId
+          this.queryParams.selectedOrg = this.getSelectedOrgIds(); // 二级或三级下的所有 id
+          console.log("11111"+ this.queryParams.selectedOrg)
+         // queryParams.orgPath = this.selectedOrg.join(',');
+      peoplelistRecord(this.queryParams).then(res => {
+        this.tableData = res.rows || [];
+        this.total = Number(res.total) || 0; // 转成数字
+        this.loading = false;
+      });
+    },
+   /** 导出主表 */
+    newexportExcel(){
+      this.queryParams.selectedOrg = this.getSelectedOrgIds(); // 二级或三级下的所有 id
+      this.download('/smart-canteen/api/v2/report/consume/exportExcel', { ...this.queryParams }, `人员信息报表_${Date.now()}.xlsx`)
+    },
+    handleDetail(row) {
+      this.detail = row;
+      this.detailVisible = true;
+      this.detailParams.pageNum = 1;
+      this.getDetailList();
+    },
+
+    getDetailList() {
+      const params = {
+        orgName: this.detail.orgName,
+        pageNum: 1,
+        pageSize: 10,
+        startPayTime: this.queryParams.startPayTime,
+        endPayTime: this.queryParams.endPayTime,
+      };
+      getDetailList(params).then(res => {
+        this.detailData = res.list || [];
+        this.detailTotal = res.total || 0;
+      });
+    },
+
+    exportExcel() {
+      if(!this.tableData || this.tableData.length === 0) {
+        this.$message.warning("暂无数据可导出");
+        return;
+      }
+      const workbook = new ExcelJS.Workbook();
+      const sheet = workbook.addWorksheet("消费统计");
+
+      sheet.columns = [
+        { header: "用户姓名", key: "custName", width: 15 },
+        { header: "用户编号", key: "custId", width: 20 },
+        { header: "所属组织", key: "orgFullName", width: 30 },
+        { header: "订单类型", key: "consumeSource", width: 15 },
+        { header: "订单金额", key: "amount", width: 15 },
+        { header: "用户手机号", key: "phone", width: 15 },
+        { header: "下单时间", key: "ordTime", width: 20 },
+        { header: "备注", key: "remark", width: 25 },
+      ];
+
+      this.tableData.forEach(item => sheet.addRow({
+        custName: item.custName || "",
+        custId: item.custId || "",
+        orgFullName: item.orgFullName || "",
+        flow_type_name: item.flow_type_name || "",
+        consumeSource: item.consumeSource || "",
+        ordDate: item.ordDate || "",
+        amount: item.amount || 0,
+        phone: item.phone || "",
+        ordTime: item.ordTime || "",
+        remark: item.remark || "",
+      }));
+
+      sheet.eachRow((row,rowNumber)=>{
+        row.eachCell(cell=>{
+          cell.alignment={vertical:"middle",horizontal:"center"};
+          cell.border={
+            top:{style:"thin",color:{argb:"FFCCCCCC"}},
+            left:{style:"thin",color:{argb:"FFCCCCCC"}},
+            bottom:{style:"thin",color:{argb:"FFCCCCCC"}},
+            right:{style:"thin",color:{argb:"FFCCCCCC"}}
+          };
+          if(rowNumber===1) cell.fill={type:"pattern",pattern:"solid",fgColor:{argb:"FFEAEAEA"}};
+        });
+      });
+
+      workbook.xlsx.writeBuffer().then(buffer=>{
+        saveAs(new Blob([buffer],{type:"application/octet-stream"}), `消费统计_${new Date().toLocaleDateString().replace(/\//g,"-")}.xlsx`);
+      });
+    },
+
+    /** 导出详情 */
+    exportDetailExcel() {
+      if(!this.detailData || this.detailData.length===0){
+        this.$message.warning("暂无详情数据可导出");
+        return;
+      }
+      const workbook = new ExcelJS.Workbook();
+      const sheet = workbook.addWorksheet("消费详情");
+
+      sheet.columns = [
+        { header: "用户姓名", key: "custName", width: 15 },
+        { header: "用户编号", key: "custId", width: 20 },
+        { header: "所属组织", key: "orgFullName", width: 30 },
+        { header: "订单类型", key: "consumeSource", width: 15 },
+        { header: "就餐日期", key: "ordDate", width: 18 },
+        { header: "订单金额", key: "amount", width: 15 },
+        { header: "用户手机号", key: "phone", width: 15 },
+        { header: "下单时间", key: "ordTime", width: 20 },
+        { header: "备注", key: "remark", width: 25 },
+      ];
+
+      this.detailData.forEach(item=>sheet.addRow({
+        custName: item.custName || "",
+        custId: item.custId || "",
+        orgFullName: item.orgFullName || "",
+        flow_type_name: item.flow_type_name || "",
+        consumeSource: item.consumeSource || "",
+        ordDate: item.ordDate || "",
+        amount: item.amount || 0,
+        phone: item.phone || "",
+        ordTime: item.ordTime || "",
+        remark: item.remark || "",
+      }));
+
+      sheet.eachRow((row,rowNumber)=>{
+        row.eachCell(cell=>{
+          cell.alignment={vertical:"middle",horizontal:"center"};
+          cell.border={
+            top:{style:"thin",color:{argb:"FFCCCCCC"}},
+            left:{style:"thin",color:{argb:"FFCCCCCC"}},
+            bottom:{style:"thin",color:{argb:"FFCCCCCC"}},
+            right:{style:"thin",color:{argb:"FFCCCCCC"}}
+          };
+          if(rowNumber===1) cell.fill={type:"pattern",pattern:"solid",fgColor:{argb:"FFEAEAEA"}};
+        });
+      });
+
+      workbook.xlsx.writeBuffer().then(buffer=>{
+        saveAs(new Blob([buffer],{type:"application/octet-stream"}), `消费详情_${this.detail.orgName}_${new Date().toLocaleDateString().replace(/\//g,"-")}.xlsx`);
+      });
+    }
+
+  }
+};
+</script>
+
+<style scoped>
+.clickable { color:#409eff; cursor:pointer; font-weight:500; }
+.clickable:hover { text-decoration: underline; }
+.detail-dialog ::v-deep .el-table th { background: #f5f7fa; font-weight: 600; }
+</style>