From 9476acfedfb2b55b397425d9da0a01b8ffbbf79f Mon Sep 17 00:00:00 2001
From: lizhenhua <1075222162@qq.com>
Date: Mon, 29 Sep 2025 13:17:39 +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/views/canteenreport/otherplace.vue | 478 +++++++++++++++++++++++++
 1 file changed, 478 insertions(+)
 create mode 100644 src/views/canteenreport/otherplace.vue

diff --git a/src/views/canteenreport/otherplace.vue b/src/views/canteenreport/otherplace.vue
new file mode 100644
index 00000000..947e7ed5
--- /dev/null
+++ b/src/views/canteenreport/otherplace.vue
@@ -0,0 +1,478 @@
+<template>
+    <div class="app-container">
+      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="日期时间">
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                align="right"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                format="yyyy-MM-dd" style="width: 340px"
+                :default-time="['00:00:00', '23:59:59']"
+                :picker-options="pickerOptions" >
+            </el-date-picker>
+        </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: 200px;"
+               >
+               </el-cascader>
+             </el-form-item>
+        <el-form-item label="工作地">
+               <el-cascader
+                 v-model="gzselectedOrg"
+                 :options="gzorgOptions"
+                 :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>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+          <el-button type="success" @click="newexportExcel">导出列表</el-button>
+        </el-form-item>
+      </el-form>
+
+      <el-table v-loading="loading" :data="tableListData" >
+        <el-table-column
+          label="序号"
+          align="center"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">合计</span>
+            <span v-else>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户账号" align="center" prop="custNum" :show-overflow-tooltip="true" width="120">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.custNum }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户姓名" align="center" prop="custName" :show-overflow-tooltip="true" width="120">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.custName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="用户手机号" align="center" prop="mobile" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.mobile }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属组织" align="center" prop="orgFullName" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.orgFullName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="订单类型" align="center" prop="orderType" :show-overflow-tooltip="true" width="120">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.orderType }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="交易次数" align="center" prop="tradeNum" :show-overflow-tooltip="true" width="120">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary" style="font-weight: bold; color: #409EFF;">{{ scope.row.tradeNum }}</span>
+            <span v-else>{{ scope.row.tradeNum }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="交易余额" align="center" prop="realAmount" :show-overflow-tooltip="true" width="120">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary" style="font-weight: bold; color: #409EFF;">{{ (scope.row.realAmount/100).toFixed(2) }}</span>
+            <span v-else>{{ (scope.row.realAmount/100).toFixed(2) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="消费地" align="center" prop="areaName" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.areaName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="工作地" align="center" prop="workAreaName" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            <span v-if="scope.$index === tableListData.length - 1 && showSummary">-</span>
+            <span v-else>{{ scope.row.workAreaName }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getplaceList"
+      />
+    </div>
+  </template>
+
+  <script>
+  import { getTreeArea, getplaceList, getplaceListApi } from "@/api/canteen/canteenRecord";
+  export default {
+    name: "",
+    dicts: [],
+    data() {
+      return {
+        orgOptions:[],
+        selectedOrg: [], // 消费地选择
+        gzorgOptions:[], // 工作地选项
+        gzselectedOrg: [], // 工作地选择
+        // 遮罩层
+        loading: true,
+        // 选中数组
+        ids: [],
+        // 非单个禁用
+        single: true,
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        // 总条数
+        total: 0,
+        //表格数据
+        tableListData: [],
+        // 是否显示合计行
+        showSummary: false,
+        // 合计数据
+        summaryData: {
+          tradeNum: 0,
+          payableAmount: 0
+        },
+        //下拉选数据
+        deptOptions:[],
+        // 查询参数
+        queryParams: {
+          startTime: '',   // 后端参数
+          endTime: '',     // 后端参数
+          pageNum: 1,
+          pageSize: 10,
+          deptIdList:[],
+          searchValue:null,
+          userType:null,
+          selectedOrg: [], // 消费地组织ID
+          gzselectedOrg: [] // 工作地组织ID
+        },
+        dateRange:this.defaultDateRange(),
+        pickerOptions: {
+          shortcuts: [{
+            text: '最近一周',
+            onClick(picker) {
+              const end = new Date(new Date().toLocaleDateString());
+              end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
+              const start = new Date((new Date().toLocaleDateString()));
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近一个月',
+            onClick(picker) {
+              const end = new Date(new Date().toLocaleDateString());
+              end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
+              const start = new Date((new Date().toLocaleDateString()));
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+            }
+          }, {
+            text: '最近三个月',
+            onClick(picker) {
+              const end = new Date(new Date().toLocaleDateString());
+              end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
+              const start = new Date((new Date().toLocaleDateString()));
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              picker.$emit('pick', [start, end]);
+            }
+          }]
+        },
+      };
+    },
+    created() {
+       this.getTree();
+       this.getplaceList();
+    },
+    methods: {
+      // 自定义合计方法
+      getSummaries(param) {
+        const { columns, data } = param;
+        const sums = [];
+        columns.forEach((column, index) => {
+          if (index === 0) {
+            sums[index] = '合计';
+            return;
+          }
+
+          switch (column.property) {
+            case 'tradeNum':
+              sums[index] = this.summaryData.tradeNum;
+              break;
+            case 'payableAmount':
+              sums[index] = (this.summaryData.payableAmount / 100).toFixed(2);
+              break;
+            default:
+              sums[index] = '-';
+          }
+        });
+        return sums;
+      },
+
+      indexMethod(index) {
+        return (this.queryParams.pageNum - 1) * queryParams.pageSize + index + 1;
+      },
+
+      /** 查询部门下拉树结构 */
+      getTree(){
+        getTreeArea().then(res => {
+          this.orgOptions = res;
+          this.gzorgOptions = JSON.parse(JSON.stringify(res)); // 深拷贝，避免引用问题
+        });
+      },
+
+      // 递归获取节点及子节点的所有 orgId
+      getAllChildIds(node, options) {
+        let ids = [node.orgId]; // 当前节点
+        if (node.children && node.children.length > 0) {
+          node.children.forEach(child => {
+            ids = ids.concat(this.getAllChildIds(child, options)); // 递归获取子节点
+          });
+        }
+        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);
+          if (!node) break;
+          stack = node.children || [];
+        }
+
+        if (node) {
+          return this.getAllChildIds(node, this.orgOptions);
+        }
+        return [lastValue];
+      },
+
+      // 根据 cascader 的选中路径获取所有要传的 orgId（工作地）
+      getGzSelectedOrgIds() {
+        if (!this.gzselectedOrg || this.gzselectedOrg.length === 0) return [];
+        const lastValue = this.gzselectedOrg[this.gzselectedOrg.length - 1];
+        // 找到对应节点
+        let stack = [...this.gzorgOptions];
+        let node = null;
+        for (let val of this.gzselectedOrg) {
+          node = stack.find(item => item.orgId === val);
+          if (!node) break;
+          stack = node.children || [];
+        }
+
+        if (node) {
+          return this.getAllChildIds(node, this.gzorgOptions);
+        }
+        return [lastValue];
+      },
+
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1;
+        this.getplaceList();
+      },
+
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.dateRange = this.defaultDateRange();
+        this.selectedOrg = [];
+        this.gzselectedOrg = [];
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,
+          selectedOrg: [],
+          gzselectedOrg: []
+        };
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+
+      /** 查询列表 */
+      getplaceList() {
+        this.loading = true;
+        // 拆分日期范围
+        if (this.dateRange && this.dateRange.length === 2) {
+          const start = this.dateRange[0];
+          const end = this.dateRange[1];
+
+          const formatDate = d => {
+            const date = new Date(d);
+            const y = date.getFullYear();
+            const m = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${y}-${m}-${day}`;
+          };
+
+          this.queryParams.startTime = formatDate(start) + ' 00:00:00';
+          this.queryParams.endTime = formatDate(end) + ' 23:59:59';
+        }
+
+        this.queryParams.selectedOrg = this.getSelectedOrgIds();
+        this.queryParams.gzselectedOrg = this.getGzSelectedOrgIds();
+
+        let param = {
+          "pageNum": this.queryParams.pageNum,
+          "pageSize": this.queryParams.pageSize,
+          "selectedOrg": this.queryParams.selectedOrg,
+          "gzselectedOrg": this.queryParams.gzselectedOrg,
+          "userType": this.queryParams.userType,
+          "startTime": this.queryParams.startTime,
+          "endTime": this.queryParams.endTime
+        };
+
+        getplaceList(param).then(response => {
+          this.tableListData = response.rows || [];
+          this.total = Number(response.total) || 0;
+
+          // 计算当前页的合计
+          this.calculateCurrentPageSummary();
+
+          this.loading = false;
+        }).catch(error => {
+          console.error('获取数据失败:', error);
+          this.loading = false;
+        });
+      },
+      newexportExcel() {
+        // 拆分日期范围
+        if (this.dateRange && this.dateRange.length === 2) {
+          const start = this.dateRange[0];
+          const end = this.dateRange[1];
+
+          const formatDate = d => {
+            const date = new Date(d);
+            const y = date.getFullYear();
+            const m = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${y}-${m}-${day}`;
+          };
+
+          this.queryParams.startTime = formatDate(start) + ' 00:00:00';
+          this.queryParams.endTime = formatDate(end) + ' 23:59:59';
+        }
+
+        this.queryParams.selectedOrg = this.getSelectedOrgIds();
+        this.queryParams.gzselectedOrg = this.getGzSelectedOrgIds();
+
+        let param = {
+          "pageNum": this.queryParams.pageNum,
+          "pageSize": this.queryParams.pageSize,
+          "selectedOrg": this.queryParams.selectedOrg,
+          "gzselectedOrg": this.queryParams.gzselectedOrg,
+          "userType": this.queryParams.userType,
+          "startTime": this.queryParams.startTime,
+          "endTime": this.queryParams.endTime
+        };
+        if (param.custName) {
+          param.custName = encodeURIComponent(params.custName); // 中文名编码
+        }
+        // 调用下载方法
+        this.download(
+          '/smart-canteen/api/v2/report/consume/placeexportExcel',
+          param,
+          `异地消费报表_${Date.now()}.xlsx`
+        );
+      },
+      // 计算当前页的合计
+      calculateCurrentPageSummary() {
+        let tradeNumTotal = 0;
+        let payableAmountTotal = 0;
+
+        this.tableListData.forEach(item => {
+          tradeNumTotal += (item.tradeNum || 0);
+          payableAmountTotal += (item.payableAmount || 0);
+        });
+
+        this.summaryData = {
+          tradeNum: tradeNumTotal,
+          payableAmount: payableAmountTotal
+        };
+
+        this.showSummary = this.tableListData.length > 0;
+      },
+
+      defaultDateRange() {
+        const end = new Date(new Date().toLocaleDateString());
+        end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
+        const start = new Date((new Date().toLocaleDateString()));
+        start.setTime(start.getTime());
+
+        this.start = parseInt(start.getTime() / 1000);
+        this.end = parseInt(end.getTime() / 1000);
+        return [start, end];
+      },
+
+      //日期时间
+      formatDateTime(date) {
+        // 格式化为 YYYY-MM-DD
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+        const day = String(date.getDate()).padStart(2, '0');
+        const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+        const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+        const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      },
+
+      //日期
+      formatDate(date) {
+        // 格式化为 YYYY-MM-DD
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      }
+    }
+  };
+  </script>
+
+  <style scoped>
+  /* 为合计行添加特殊样式 */
+  .el-table ::v-deep .el-table__footer-wrapper tbody td {
+    background-color: #f5f7fa;
+    font-weight: bold;
+    color: #409EFF;
+  }
+  </style>