leisure-core 1.0.2 → 1.0.4

package/le-report/src/main.vue

@@ -0,0 +1,1747 @@
+<template>
+  <div class="page-container" v-watermark>
+    <div class="title-container">
+      <span class="title-tag">{{ tag }}</span>
+      <div class="title-main">
+        <h2>{{ title }}</h2>
+        <div v-if="displaySubtitle" class="subtitle">
+          {{ displaySubtitle + "&nbsp;&nbsp;&nbsp;" + unit }}
+        </div>
+      </div>
+    </div>
+    <el-card shadow="never">
+      <el-form :inline="true">
+        <div class="query-param-area">
+          <slot name="paramSlot"></slot>
+          <el-form-item>
+            <el-button type="primary" @click="onClickQuery">查询</el-button>
+            <el-button type="success" v-if="isUsedExport" @click="handleExport"
+              >导出Excel</el-button
+            >
+            <slot name="topBtns"></slot>
+          </el-form-item>
+        </div>
+      </el-form>
+    </el-card>
+    <!-- 表格区域 -->
+    <vxe-table
+      ref="eltablemain"
+      :data="displayData"
+      :loading="isLoading"
+      border
+      :row-config="{ keyField: rowId }"
+      :column-config="{ resizable: true }"
+      :header-row-class-name="headerRowClassName"
+      :cell-class-name="cellClassName"
+      stripe
+      :merge-cells="mergeCells"
+      :header-cell-class-name="headerCellClassName"
+      show-header
+      auto-resize
+      :height="elTableMaxHeight"
+      :scroll-x="{ gt: 0 }"
+      :scroll-y="{ gt: 0 }"
+      :show-footer="showSummary && summaryPosition === 'bottom'"
+      :footer-method="summaryPosition === 'bottom' ? footerMethod : null"
+    >
+      <!-- 加载状态插槽 -->
+      <template #loading>
+        <div v-if="isLoading" class="vxe-loading-mask">
+          <div class="vxe-loading-content">
+            <i class="el-icon-loading vxe-loading-icon"></i>
+            <span class="vxe-loading-text">加载中，请稍候...</span>
+          </div>
+        </div>
+      </template>
+
+      <!-- 序号列 -->
+      <vxe-column
+        title="序号"
+        width="70"
+        fixed="left"
+        v-if="showIndex"
+        show-overflow-tooltip
+      >
+        <template #default="{ row, rowIndex }">
+          <span v-if="row._isSummary"></span>
+          <span v-else>{{
+            (searchData.pageNo - 1) * searchData.pageSize + rowIndex
+          }}</span>
+        </template>
+      </vxe-column>
+
+      <template v-for="(column, index) in complexHeaderColumns">
+        <vxe-column
+          v-if="!column.children"
+          :key="`column-${getUniqueKey(column, index)}`"
+          :field="column.prop"
+          :title="column.label"
+          :width="column.width"
+          show-overflow-tooltip
+        >
+          <template #default="{ row }">
+            <component
+              :is="renderColumnContent(column)"
+              v-bind="getComponentProps(column, row)"
+            ></component>
+          </template>
+        </vxe-column>
+
+        <!-- 分组列 -->
+        <vxe-colgroup
+          v-else
+          :key="`colgroup-${getUniqueKey(column, index)}`"
+          :title="column.label"
+          :width="column.width"
+        >
+          <template v-for="(child, childIndex) in column.children">
+            <vxe-colgroup
+              v-if="child.children"
+              :key="`sub-colgroup-${getUniqueKey(child, childIndex)}`"
+              :title="child.label"
+              :width="child.width"
+            >
+              <vxe-column
+                v-for="(grandChild, grandChildIndex) in child.children"
+                :key="`grand-column-${getUniqueKey(
+                  grandChild,
+                  grandChildIndex,
+                )}`"
+                :field="grandChild.prop"
+                :title="grandChild.label"
+                :width="grandChild.width"
+                show-overflow-tooltip
+              >
+                <template #default="{ row }">
+                  <component
+                    :is="renderColumnContent(grandChild)"
+                    v-bind="getComponentProps(grandChild, row)"
+                  ></component>
+                </template>
+              </vxe-column>
+            </vxe-colgroup>
+            <vxe-column
+              v-else
+              :key="`sub-column-${getUniqueKey(child, childIndex)}`"
+              :field="child.prop"
+              :title="child.label"
+              :width="child.width"
+              show-overflow-tooltip
+            >
+              <template #default="{ row }">
+                <component
+                  :is="renderColumnContent(child)"
+                  v-bind="getComponentProps(child, row)"
+                ></component>
+              </template>
+            </vxe-column>
+          </template>
+        </vxe-colgroup>
+      </template>
+
+      <!-- 扩展列插槽 -->
+      <slot name="extColumn"></slot>
+    </vxe-table>
+
+    <!-- 分页组件 -->
+    <div style="text-align: center; margin-top: 30px">
+      <el-pagination
+        background
+        layout="prev, pager, next, jumper,sizes, total"
+        :current-page="searchData.pageNo"
+        :total="searchData.total"
+        :page-size="searchData.pageSize"
+        @current-change="current_change"
+        @size-change="size_change"
+        :page-sizes="[10, 20, 30, 40, 50, 100]"
+      >
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import rMixins from "./rmixins.js";
+import ExcelJS from "exceljs";
+import FileSaver from "file-saver";
+
+export default {
+  name: "le-report",
+  mixins: [rMixins],
+  props: {
+    showIndex: {
+      type: Boolean,
+      default: true,
+    },
+    title: {
+      type: String,
+      default: "",
+    },
+    unit: {
+      type: String,
+      default: "单位:万元",
+    },
+    subtitle: {
+      type: String,
+      default: "",
+    },
+    tag: {
+      type: String,
+      default: "",
+    },
+    tableData: {
+      type: Array,
+      default: () => [],
+    },
+    totalData: {
+      type: Number,
+      default: 1,
+    },
+    tableColumns: {
+      type: Array,
+      default: () => [],
+    },
+    searchParam: {
+      type: Object,
+      default: () => ({}),
+    },
+    rowId: {
+      type: String,
+      default: "id",
+    },
+    complexHeaderConfig: {
+      type: Array,
+      default: () => [],
+    },
+    // loading: {
+    //   type: Boolean,
+    //   default: false,
+    // },
+    // 是否显示合计行
+    showSummary: {
+      type: Boolean,
+      default: false,
+    },
+    // 合计行位置配置：'top' 或 'bottom'
+    summaryPosition: {
+      type: String,
+      default: "bottom",
+      validator: (value) => ["top", "bottom"].includes(value),
+    },
+    // 自定义数值字段配置
+    numericFields: {
+      type: Array,
+      default: () => [],
+    },
+    summaryData: {
+      //后台合计数据
+      type: Object,
+      default: null,
+    },
+    // 合计行标签字段
+    summaryLabelField: {
+      type: String,
+      default: "area",
+    },
+    isUsedExport: {
+      // 是否启用导出功能
+      type: Boolean,
+      default: true,
+    },
+    exportFileName: {
+      type: String,
+      default: "",
+    },
+    exportType: {
+      type: String,
+      default: "xlsx",
+    },
+    // 新增：仅导出时使用的数值字段（不影响页面显示）
+    exportOnlyNumericFields: {
+      type: Array,
+      default: () => [], // 仅导出Excel时使用
+    },
+    // 新增：导出时数值字段的Excel格式映射
+    exportNumericFormats: {
+      type: Object,
+      default: () => ({
+        currency: "#,##0.00",
+        percent: "0.00%",
+        number: "#,##0.00",
+        integer: "#,##0",
+        decimal: "0.00",
+      }),
+    },
+    autoDetectNumericFields: {
+      type: Boolean,
+      default: true, // 默认自动检测
+    },
+    autoDetectTypes: {
+      type: Array,
+      default: () => ["currency", "number", "percent"],
+    },
+  },
+  watch: {
+    searchParam: {
+      handler(val) {
+        this.searchData = Object.assign({}, this.searchData, val);
+      },
+      deep: true,
+      immediate: true,
+    },
+    totalData: {
+      handler(val) {
+        this.searchData.total = val;
+      },
+    },
+    complexHeaderConfig: {
+      handler(val) {
+        if (val && val.length > 0) {
+          this.complexHeaderColumns = val;
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    tableData: {
+      handler() {
+        if (this.isLoading) {
+          this.isLoading = false; // 关闭
+        }
+        this.updateDisplayData();
+      },
+      deep: true,
+    },
+    showSummary: {
+      handler() {
+        this.updateDisplayData();
+      },
+    },
+    summaryPosition: {
+      handler() {
+        this.updateDisplayData();
+      },
+    },
+  },
+  data() {
+    return {
+      searchData: {
+        pageNo: 1,
+        total: 1,
+        pageSize: 20,
+      },
+      componentMap: {
+        url: {
+          component: "le-url",
+          prop: "value",
+        },
+        text: {
+          component: "le-span",
+          prop: "value",
+        },
+      },
+      // 合并单元格配置
+      mergeCells: [],
+      // 复杂表头配置
+      complexHeaderColumns: [],
+      displayData: [],
+      isLoading: false,
+    };
+  },
+  computed: {
+    computedNumericFields() {
+      if (this.numericFields && this.numericFields.length > 0) {
+        return this.numericFields;
+      }
+
+      const numericFields = [];
+      const traverseColumns = (columns) => {
+        columns.forEach((column) => {
+          if (column.children) {
+            traverseColumns(column.children);
+          } else {
+            if (
+              (column.type === "currency" || column.type === "percent") &&
+              column.prop
+            ) {
+              numericFields.push(column.prop);
+            }
+          }
+        });
+      };
+
+      if (this.complexHeaderColumns && this.complexHeaderColumns.length > 0) {
+        traverseColumns(this.complexHeaderColumns);
+      }
+
+      return numericFields;
+    },
+    displaySubtitle() {
+      return this.subtitle || this.initDate();
+    },
+    computedExportNumericFields() {
+      // 获取用户明确指定的字段
+      const userDefined = this.exportOnlyNumericFields || [];
+
+      // 获取自动检测的字段
+      const autoDetected = this.getAutoDetectedNumericFields();
+
+      // 合并并去重
+      const allFields = [...new Set([...userDefined, ...autoDetected])];
+
+      return allFields;
+    },
+    // 列类型映射（用于导出时判断格式）
+    columnTypeMap() {
+      const map = {};
+      const traverse = (columns) => {
+        columns.forEach((col) => {
+          if (col.children) {
+            traverse(col.children);
+          } else if (col.prop) {
+            // 记录列类型
+            map[col.prop] = col.type || "text";
+            // 如果是currency或number类型，自动添加到数值字段列表中（用于显示合计行等）
+            if (
+              col.type === "currency" ||
+              col.type === "number" ||
+              col.type === "percent"
+            ) {
+              if (!this.computedExportNumericFields.includes(col.prop)) {
+                // 注意：这里不能直接修改prop，需要记录到临时变量或使用计算属性
+                // 我们将在isExportNumericField方法中动态判断
+              }
+            }
+          }
+        });
+      };
+
+      if (this.complexHeaderColumns && this.complexHeaderColumns.length > 0) {
+        traverse(this.complexHeaderColumns);
+      }
+
+      return map;
+    },
+  },
+  mounted() {
+    this.isLoading = true;
+    this.getList();
+    this.updateDisplayData();
+  },
+
+  methods: {
+    getUniqueKey(column, index) {
+      return `${column.prop || "column"}-${index}-${Date.now()}`;
+    },
+    // 新增：判断是否为导出数值字段
+    isExportNumericField(field) {
+      if (this.computedExportNumericFields.includes(field)) {
+        return true;
+      }
+      // 2. 如果字段类型是currency或number，自动视为数值字段
+      const columnType = this.columnTypeMap[field];
+      const numericTypes = ["currency", "number", "percent"];
+
+      if (numericTypes.includes(columnType)) {
+        return true;
+      }
+
+      return false;
+    },
+
+    // 更新显示数据
+    updateDisplayData() {
+      if (this.showSummary && this.summaryPosition === "top") {
+        // 在顶部添加合计行
+        const summaryRow = this.createSummaryRow();
+        summaryRow.id = "summary_" + Date.now();
+        this.displayData = [summaryRow, ...this.tableData];
+      } else {
+        // 不显示合计行或合计行在底部
+        this.displayData = this.tableData;
+      }
+      this.changeHeight();
+    },
+
+    createSummaryRow() {
+      let summaryRow = {
+        _isSummary: true,
+        id: "summary",
+        seq: "合计",
+      };
+
+      // 如果有后台提供的合计数据，优先使用
+      if (this.summaryData && Object.keys(this.summaryData).length > 0) {
+        Object.keys(this.summaryData).forEach((key) => {
+          summaryRow[key] = this.summaryData[key];
+        });
+
+        if (this.summaryLabelField && !summaryRow[this.summaryLabelField]) {
+          summaryRow[this.summaryLabelField] = "合计";
+        }
+      } else {
+        // 前端计算合计
+        const leafColumns = this.getLeafColumns();
+
+        leafColumns.forEach((column) => {
+          if (column.prop && this.isNumericField(column.prop)) {
+            const sum = this.tableData.reduce((total, row) => {
+              const value = parseFloat(row[column.prop]) || 0;
+              return total + value;
+            }, 0);
+            summaryRow[column.prop] = this.isZeroValue(sum) ? "" : sum;
+          }
+        });
+
+        if (this.summaryLabelField) {
+          summaryRow[this.summaryLabelField] = "合计";
+        }
+      }
+
+      this.computedNumericFields.forEach((field) => {
+        if (this.isZeroValue(summaryRow[field])) {
+          summaryRow[field] = "";
+        }
+      });
+
+      return summaryRow;
+    },
+
+    footerMethod({ columns, data }) {
+      let summaryColumnIndex = columns.findIndex(
+        (column) => column.property === this.summaryLabelField,
+      );
+
+      if (summaryColumnIndex === -1) {
+        summaryColumnIndex = 1;
+      }
+
+      const footerData = [
+        columns.map((column, columnIndex) => {
+          if (columnIndex === summaryColumnIndex) {
+            return "合计";
+          }
+
+          const field = column.property;
+
+          if (this.summaryData && this.computedNumericFields.includes(field)) {
+            const value = this.summaryData[field];
+            if (this.isZeroValue(value)) {
+              return "";
+            }
+            return this.format("currency", value);
+          }
+
+          if (this.computedNumericFields.includes(field)) {
+            const sum = data.reduce((total, row) => {
+              const value = parseFloat(row[field]) || 0;
+              return total + value;
+            }, 0);
+            if (this.isZeroValue(sum)) {
+              return "";
+            }
+            return this.format("currency", sum);
+          }
+
+          return "";
+        }),
+      ];
+
+      return footerData;
+    },
+
+    // 单元格样式
+    cellClassName({ row }) {
+      if (row._isSummary) {
+        return "summary-row text-center";
+      }
+      return "text-center";
+    },
+
+    // 表头行样式
+    headerRowClassName() {
+      return "header-row";
+    },
+
+    // 表头单元格样式
+    headerCellClassName() {
+      return "text-center header-cell";
+    },
+
+    renderColumnContent(column) {
+      return this.componentMap[column.type]?.component || "le-span";
+    },
+
+    getComponentProps(column, row) {
+      // 如果是合计行，特殊处理
+      if (row._isSummary) {
+        const value = row[column.prop];
+
+        // 如果是序号列
+        if (column.type === "seq" || column.prop === "seq") {
+          return { value: "合计" };
+        }
+
+        // 如果是合计标签字段
+        if (column.prop === this.summaryLabelField) {
+          return { value: "合计" };
+        }
+
+        // 对数值字段进行格式化
+        if (this.isNumericField(column.prop)) {
+          if (this.isZeroValue(value)) {
+            return { value: "" };
+          }
+          const formattedValue = this.format(column.type || "currency", value);
+          return { value: formattedValue };
+        }
+
+        // 其他字段正常显示
+        return { value: value || "" };
+      }
+
+      // 普通行的处理保持不变
+      let value = row[column.prop];
+
+      // 格式化处理
+      if (column.formatter) {
+        value = column.formatter(row, column, value);
+      }
+      if (column.type) {
+        value = this.format(column.type, value, column.spec);
+      }
+
+      const ctype = this.componentMap[column.type];
+      const prop = ctype?.prop || "value";
+      const param = {};
+      param[prop] = value || "";
+
+      if (ctype?.style) {
+        param.style = ctype.style;
+      }
+      return param;
+    },
+
+    // 判断是否为数值字段
+    isNumericField(field) {
+      return this.computedNumericFields.includes(field);
+    },
+
+    onClickQuery() {
+      this.isLoading = true;
+      this.searchData.pageNo = 1;
+      this.getList();
+    },
+
+    async getList() {
+      await this.$emit("getList", this.searchData);
+    },
+
+    size_change(item) {
+      this.isLoading = true;
+      this.searchData.pageSize = item;
+      this.getList();
+    },
+
+    current_change(currentPage) {
+      this.isLoading = true;
+      this.searchData.pageNo = currentPage;
+      this.getList();
+    },
+
+    format(type, value, spec) {
+      if (type === undefined || value === undefined) return value;
+
+      switch (type) {
+        case "bool":
+          return value === 1 || value === "1" || value === true ? "是" : "否";
+        case "date":
+          if (!value) return "";
+          try {
+            return spec ? this.parseTime(value, spec) : this.parseTime(value);
+          } catch {
+            return value;
+          }
+        case "currency":
+          if (value == null || value === "") return "";
+          const num = parseFloat(value);
+          if (isNaN(num)) return value;
+
+          return new Intl.NumberFormat("zh-CN", {
+            style: "decimal",
+            currency: "CNY",
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 2,
+          }).format(num);
+        case "percent":
+          if (value == null || value === "") return "";
+          const percentNum = parseFloat(value);
+          if (isNaN(percentNum)) return value;
+          return percentNum.toFixed(2) + "%";
+
+        default:
+          return value;
+      }
+    },
+
+    // 设置合并单元格
+    setMergeCells(mergeRules) {
+      this.mergeCells = mergeRules;
+    },
+
+    // 获取当前合并规则
+    getMergeCells() {
+      return this.mergeCells;
+    },
+
+    resetClick() {
+      this.$emit("resetParams");
+    },
+
+    isZeroValue(value) {
+      if (value === null || value === undefined || value === "") {
+        return true;
+      }
+
+      const num = parseFloat(value);
+      return !isNaN(num) && num === 0;
+    },
+
+    async handleExport() {
+      try {
+        await this.exportUsingExcelJS();
+      } catch (error) {
+        console.error("导出失败:", error);
+        this.$message.error("导出失败: " + (error.message || "未知错误"));
+      }
+    },
+
+    handleExportMore() {
+      this.$emit("exportMore");
+    },
+
+    // 使用ExcelJS导出Excel
+    async exportUsingExcelJS() {
+      try {
+        const workbook = new ExcelJS.Workbook();
+        const worksheet = workbook.addWorksheet("Sheet1");
+
+        // 构建数据行
+        const dataRows = this.buildExcelJSDataRows();
+
+        // 添加数据行到工作表
+        dataRows.forEach((rowData, rowIndex) => {
+          // 提取单元格值（兼容对象数组和普通数组）
+          const rowValues = rowData.map((cell) => {
+            if (cell && typeof cell === "object" && cell.value !== undefined) {
+              return cell.value;
+            }
+            return cell;
+          });
+
+          const worksheetRow = worksheet.addRow(rowValues);
+
+          // 设置行高
+          this.setExcelJSRowHeight(worksheetRow, rowIndex, dataRows.length);
+
+          // 设置单元格样式 - 传入行数据
+          this.setExcelJSCellStyles(
+            worksheet,
+            worksheetRow,
+            rowIndex,
+            dataRows.length,
+            rowData, // 传入完整行数据
+          );
+        });
+
+        // 设置列宽
+        this.setExcelJSColumnWidths(worksheet);
+
+        // 合并单元格
+        this.setExcelJSMerges(worksheet);
+
+        // 写入到缓冲区
+        const buffer = await workbook.xlsx.writeBuffer();
+
+        // 保存文件
+        const blob = new Blob([buffer], {
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        });
+
+        FileSaver.saveAs(blob, `${this.getExportFileName()}.xlsx`);
+        this.$message.success("导出成功");
+      } catch (error) {
+        console.error("ExcelJS导出失败:", error);
+        this.$message.error("导出失败: " + (error.message || "未知错误"));
+      }
+    },
+
+    buildExcelJSDataRow(rowData, index, allData) {
+      const row = [];
+      const leafColumns = this.getLeafColumns();
+
+      // 计算序号
+      if (rowData._isSummary) {
+        row.push({ value: "合计", type: "string" });
+      } else {
+        // ... 序号计算逻辑保持不变 ...
+        row.push({ value: actualIndex, type: "number" });
+      }
+
+      // 填充数据列
+      leafColumns.forEach((col) => {
+        if (col.prop) {
+          let value = rowData[col.prop];
+          let cellType = "string";
+          const isExportNumeric = this.isExportNumericField(col.prop);
+          const columnType = this.columnTypeMap[col.prop] || col.type;
+          const isCurrencyOrNumber =
+            columnType === "currency" || columnType === "number";
+          const isPercent = columnType === "percent";
+
+          // 处理合计行
+          if (rowData._isSummary) {
+            if (col.prop === this.summaryLabelField) {
+              row.push({ value: "合计", type: "string" });
+              return;
+            }
+          }
+
+          // 智能判断是否为数值字段
+          if (isExportNumeric || isCurrencyOrNumber || isPercent) {
+            // 使用原始值进行数值解析
+            const rawValue = rowData[col.prop]; // 使用原始值，而不是格式化后的值
+            const numericValue = this.parseExportValue(rawValue, columnType);
+
+            if (numericValue !== null) {
+              value = numericValue;
+
+              // 设置单元格类型
+              if (isPercent) {
+                cellType = "percent";
+              } else if (isCurrencyOrNumber || isExportNumeric) {
+                cellType = "number";
+              }
+            } else {
+              // 如果无法转换为数字，使用格式化后的值
+              if (col.formatter) {
+                value = col.formatter(rowData, col, rawValue);
+              }
+              if (columnType) {
+                value = this.format(columnType, rawValue, col.spec);
+              }
+              cellType = "string";
+            }
+          } else {
+            // 非数值字段，使用页面显示格式
+            if (col.formatter) {
+              value = col.formatter(rowData, col, value);
+            }
+            if (columnType) {
+              value = this.format(columnType, value, col.spec);
+            }
+            cellType = "string";
+          }
+
+          row.push({
+            value: value !== null && value !== undefined ? value : "",
+            type: cellType,
+            isExportNumeric: isExportNumeric || isCurrencyOrNumber || isPercent,
+            columnType: columnType,
+            columnProp: col.prop,
+            _isSummary: rowData._isSummary,
+          });
+        } else {
+          row.push({ value: "", type: "string" });
+        }
+      });
+
+      return row;
+    },
+
+    // 获取导出数据 - 确保合计行位置正确
+    getExportData() {
+      // 深拷贝displayData，避免影响原始数据
+      const data = JSON.parse(JSON.stringify(this.displayData));
+
+      // 移除Vue内部属性
+      return data.map((item) => {
+        const newItem = { ...item };
+        delete newItem._XID;
+        delete newItem._X_ROW_KEY;
+        return newItem;
+      });
+    },
+
+    buildExcelJSDataRows() {
+      const dataRows = [];
+
+      // 1. 标题行（第1行）
+      const titleRow = new Array(this.getTotalColumnCount()).fill("");
+      titleRow[0] = this.title;
+      dataRows.push(titleRow);
+
+      // 2. 副标题行（第2行）
+      const subtitleRow = new Array(this.getTotalColumnCount()).fill("");
+      let subtitleText = "";
+      if (this.displaySubtitle) subtitleText += this.displaySubtitle;
+      if (this.displaySubtitle && this.unit) subtitleText += "   ";
+      if (this.unit) subtitleText += this.unit;
+      subtitleRow[0] = subtitleText.trim();
+      dataRows.push(subtitleRow);
+
+      // 3. 表头行（根据complexHeaderColumns动态生成）
+      const headerRows = this.buildExcelJSHeaderRows();
+      headerRows.forEach((row) => dataRows.push(row));
+
+      const exportData = this.getExportData();
+      exportData.forEach((row, index) => {
+        const dataRow = this.buildExcelJSDataRow(row, index, exportData);
+        dataRows.push(dataRow);
+      });
+
+      return dataRows;
+    },
+
+    // 构建ExcelJS表头行的优化版本
+    buildExcelJSHeaderRows() {
+      const leafColumns = this.getLeafColumns();
+      const maxDepth = this.getHeaderDepth();
+
+      // 初始化表头行数组
+      const headerRows = Array.from(
+        { length: maxDepth },
+        () => new Array(leafColumns.length + 1).fill(""), // +1 为序号列
+      );
+
+      // 设置序号列的表头
+      headerRows[0][0] = "序号";
+      for (let i = 1; i < maxDepth; i++) {
+        headerRows[i][0] = ""; // 序号列在表头深度>1时，下方行留空
+      }
+
+      // 填充表头数据
+      this.fillExcelJSHeaderData(this.complexHeaderColumns, headerRows, 0, 1);
+
+      // 确保单层表头列的空白单元格被正确设置
+      this.ensureSingleLevelHeaderCells(headerRows);
+
+      return headerRows;
+    },
+
+    // 确保单层表头列的单元格被正确填充
+    ensureSingleLevelHeaderCells(headerRows) {
+      const maxDepth = headerRows.length;
+      const totalCols = headerRows[0].length;
+
+      // 遍历每一行和每一列
+      for (let row = 0; row < maxDepth; row++) {
+        for (let col = 1; col < totalCols; col++) {
+          // 从第1列开始（第0列是序号）
+          const cellValue = headerRows[row][col];
+
+          // 如果当前单元格为空，检查上方是否有值需要继承
+          if (cellValue === "" && row > 0) {
+            // 检查上方单元格是否有值
+            const aboveValue = headerRows[row - 1][col];
+            if (aboveValue !== "" && headerRows[row - 1][col] !== "") {
+              // 如果上方有值，且当前行不是最后一行，设置为空字符串（保持为空）
+              headerRows[row][col] = "";
+            }
+          }
+        }
+      }
+    },
+
+    // 优化填充表头数据方法
+    fillExcelJSHeaderData(columns, headerRows, currentDepth, startCol) {
+      let currentCol = startCol;
+
+      columns.forEach((column) => {
+        if (column.children && column.children.length > 0) {
+          // 分组列
+          const leafCount = this.countLeafColumns(column.children);
+
+          // 设置分组标题
+          headerRows[currentDepth][currentCol] = column.label;
+
+          // 对于单层表头，需要将标签向下填充到所有行
+          if (leafCount === 1) {
+            // 如果只有一个子列，这个子列就是单层表头
+            // 我们需要确保标签在当前深度设置，下面的行保持为空
+            // 留空处理，让合并单元格逻辑来处理
+          }
+
+          // 递归处理子列
+          const nextStartCol = this.fillExcelJSHeaderData(
+            column.children,
+            headerRows,
+            currentDepth + 1,
+            currentCol,
+          );
+
+          currentCol = nextStartCol;
+        } else {
+          // 单层表头列（叶子列）
+          // 只在当前深度设置标签，下面的行留空（会在合并单元格时处理）
+          headerRows[currentDepth][currentCol] = column.label;
+
+          // 确保下面的行留空（用于垂直合并）
+          for (let d = currentDepth + 1; d < headerRows.length; d++) {
+            headerRows[d][currentCol] = "";
+          }
+
+          currentCol++;
+        }
+      });
+
+      return currentCol;
+    },
+
+    // 优化构建数据行方法，正确处理合计行
+    buildExcelJSDataRow(rowData, index, allData) {
+      const row = [];
+      const leafColumns = this.getLeafColumns();
+
+      // 计算序号
+      if (rowData._isSummary) {
+        row.push({ value: "合计", type: "string" });
+      } else {
+        let actualIndex = index + 1;
+
+        // 如果合计行在顶部，需要调整序号
+        if (this.showSummary && this.summaryPosition === "top") {
+          // 找到当前行在非合计行中的位置
+          const dataWithoutSummary = allData.filter((item) => !item._isSummary);
+          const dataIndex = dataWithoutSummary.findIndex(
+            (item) => item.id === rowData.id,
+          );
+          if (dataIndex !== -1) {
+            actualIndex = dataIndex + 1;
+          }
+        } else if (this.showSummary && this.summaryPosition === "bottom") {
+          // 如果合计行在底部，正常计算序号
+          const dataWithoutSummary = allData.filter((item) => !item._isSummary);
+          const dataIndex = dataWithoutSummary.findIndex(
+            (item) => item.id === rowData.id,
+          );
+          if (dataIndex !== -1) {
+            actualIndex = dataIndex + 1;
+          }
+        }
+        row.push({ value: actualIndex, type: "number" });
+      }
+
+      // 填充数据列
+      leafColumns.forEach((col) => {
+        if (col.prop) {
+          let value = rowData[col.prop];
+          let cellType = "string";
+          let isExportNumeric = this.isExportNumericField(col.prop);
+          let columnType = this.columnTypeMap[col.prop];
+
+          // 处理合计行
+          if (rowData._isSummary) {
+            if (col.prop === this.summaryLabelField) {
+              row.push({ value: "合计", type: "string" });
+              return;
+            }
+          }
+
+          // 导出数值字段的特殊处理
+          if (isExportNumeric) {
+            const numericValue = this.parseExportValue(value, columnType);
+
+            if (numericValue !== null) {
+              value = numericValue;
+
+              // 根据列类型设置单元格类型
+              if (columnType === "percent") {
+                cellType = "percent";
+              } else {
+                cellType = "number";
+              }
+            } else {
+              // 如果无法转换为数字，保持原样
+              cellType = "string";
+            }
+          } else {
+            // 非导出数值字段，保持页面显示格式
+            // 直接使用页面显示的格式化值
+            if (col.formatter) {
+              value = col.formatter(rowData, col, value);
+            }
+            if (columnType) {
+              value = this.format(columnType, value, col.spec);
+            }
+            cellType = "string";
+          }
+
+          row.push({
+            value: value !== null && value !== undefined ? value : "",
+            type: cellType,
+            isExportNumeric: isExportNumeric,
+            columnType: columnType,
+            _isSummary: rowData._isSummary,
+          });
+        } else {
+          row.push({ value: "", type: "string" });
+        }
+      });
+
+      return row;
+    },
+
+    // 优化：解析导出数值，支持更多数值类型
+    parseExportValue(value, columnType) {
+      if (value === null || value === undefined || value === "") {
+        return null;
+      }
+
+      // 如果已经是数字类型，直接返回
+      if (typeof value === "number") {
+        // 百分比类型特殊处理
+        if (columnType === "percent") {
+          // 如果数值大于1（如12.34），转换为小数形式（0.1234）
+          return value > 1 ? value / 100 : value;
+        }
+        return value;
+      }
+
+      const strValue = String(value).trim();
+
+      // 空字符串
+      if (strValue === "") {
+        return null;
+      }
+
+      // 特殊处理：如果字符串包含非数字字符（除了负号、小数点、千分位分隔符）
+      const cleanValue = strValue
+        .replace(/[¥$,，\s]/g, "") // 移除货币符号和千分位分隔符
+        .replace(/%/g, ""); // 移除百分比符号
+
+      // 检查是否为合法数字（包括负数和小数）
+      const numericRegex = /^-?\d+(\.\d+)?$/;
+      if (!numericRegex.test(cleanValue)) {
+        return null; // 不是有效的数字格式
+      }
+
+      // 解析数字
+      const parsed = parseFloat(cleanValue);
+      if (isNaN(parsed)) {
+        return null;
+      }
+
+      // 根据列类型进行转换
+      if (columnType === "percent") {
+        // 百分比处理：原始值可能是12.34（表示12.34%），需要转换为0.1234
+        return parsed > 1 ? parsed / 100 : parsed;
+      }
+
+      return parsed;
+    },
+
+    // 设置ExcelJS行高
+    setExcelJSRowHeight(worksheetRow, rowIndex, totalRows) {
+      const headerDepth = this.getHeaderDepth();
+      const dataStartRow = 2 + headerDepth;
+
+      if (rowIndex === 0) {
+        // 标题行高度
+        worksheetRow.height = 38;
+      } else if (rowIndex === 1) {
+        // 副标题行高度
+        worksheetRow.height = 30;
+      } else if (rowIndex >= 2 && rowIndex < dataStartRow) {
+        // 表头行高度
+        worksheetRow.height = 38;
+      } else {
+        // 数据行高度
+        // const dataRowIndex = rowIndex - dataStartRow;
+        // const exportData = this.getExportData();
+        // const rowData = exportData[dataRowIndex];
+        // const isSummaryRow = rowData && rowData._isSummary;
+        // if (isSummaryRow) {
+        //   // 合计行稍高一些
+        //   worksheetRow.height = 28;
+        // } else {
+        //   worksheetRow.height = 25;
+        // }
+      }
+    },
+
+    // 添加一个辅助方法，用于在导出时处理列类型
+    getExportColumnType(columnProp) {
+      const column = this.findColumnByProp(columnProp);
+      return column ? column.type : null;
+    },
+
+    findColumnByProp(prop) {
+      let result = null;
+      const traverse = (columns) => {
+        for (const col of columns) {
+          if (col.prop === prop) {
+            result = col;
+            return true;
+          }
+          if (col.children) {
+            if (traverse(col.children)) {
+              return true;
+            }
+          }
+        }
+        return false;
+      };
+
+      if (this.complexHeaderColumns) {
+        traverse(this.complexHeaderColumns);
+      }
+      return result;
+    },
+
+    // 设置ExcelJS单元格样式
+    setExcelJSCellStyles(
+      worksheet,
+      worksheetRow,
+      rowIndex,
+      totalRows,
+      rowData,
+    ) {
+      const totalCols = this.getTotalColumnCount();
+      const headerDepth = this.getHeaderDepth();
+      const dataStartRow = 2 + headerDepth; // 标题行+副标题行+表头行
+
+      for (let col = 1; col <= totalCols; col++) {
+        const cell = worksheetRow.getCell(col);
+
+        // 安全地获取单元格信息
+        let cellInfo = {};
+        if (rowData && Array.isArray(rowData)) {
+          const rawCellData = rowData[col - 1];
+          if (rawCellData && typeof rawCellData === "object") {
+            // 如果是对象格式的单元格数据
+            cellInfo = {
+              ...rawCellData,
+              // 确保有必要的属性
+              value: rawCellData.value !== undefined ? rawCellData.value : "",
+              type: rawCellData.type || "string",
+              isExportNumeric: rawCellData.isExportNumeric || false,
+              columnType: rawCellData.columnType,
+              _isSummary: rawCellData._isSummary || false,
+            };
+          } else {
+            // 如果是简单值（标题行、副标题行、表头行）
+            cellInfo = {
+              value: rawCellData !== undefined ? rawCellData : "",
+              type: "string",
+              isExportNumeric: false,
+              _isSummary: false,
+            };
+          }
+        } else {
+          // 如果没有传入rowData，使用空对象
+          cellInfo = {
+            value: "",
+            type: "string",
+            isExportNumeric: false,
+            _isSummary: false,
+          };
+        }
+
+        // 设置基本对齐
+        cell.alignment = {
+          vertical: "middle",
+          horizontal: "center",
+          wrapText: true,
+        };
+
+        // 设置边框
+        if (rowIndex >= 2) {
+          cell.border = {
+            top: { style: "thin" },
+            left: { style: "thin" },
+            bottom: { style: "thin" },
+            right: { style: "thin" },
+          };
+        }
+
+        // 设置数值格式（仅对导出数值字段且是数据行）
+        const isDataRow = rowIndex >= dataStartRow;
+        if (isDataRow && cellInfo.isExportNumeric) {
+          if (cellInfo.type === "number") {
+            // 根据列类型获取格式
+            let excelFormat = this.exportNumericFormats.number;
+
+            if (cellInfo.columnType === "currency") {
+              excelFormat = this.exportNumericFormats.currency;
+            } else if (cellInfo.columnType === "percent") {
+              excelFormat = this.exportNumericFormats.percent;
+            }
+
+            cell.numFmt = excelFormat;
+
+            // 确保值是数字类型
+            if (typeof cellInfo.value === "string") {
+              const num = parseFloat(cellInfo.value);
+              cell.value = isNaN(num) ? cellInfo.value : num;
+            } else {
+              cell.value = cellInfo.value;
+            }
+          } else if (cellInfo.type === "percent") {
+            // 百分比类型
+            cell.numFmt = this.exportNumericFormats.percent;
+            cell.value = cellInfo.value;
+          } else {
+            // 其他类型
+            cell.value = cellInfo.value;
+          }
+        } else {
+          // 非数值字段或非数据行，直接设置值
+          cell.value = cellInfo.value;
+        }
+
+        // 设置字体和背景色
+        if (rowIndex === 0) {
+          // 标题行
+          cell.font = { bold: true, size: 16 };
+          cell.alignment.horizontal = "center";
+        } else if (rowIndex === 1) {
+          // 副标题行
+          cell.font = { size: 12, color: { argb: "FF666666" } };
+        } else if (rowIndex >= 2 && rowIndex < dataStartRow) {
+          // 表头行
+          cell.font = { bold: true };
+          cell.fill = {
+            type: "pattern",
+            pattern: "solid",
+            fgColor: { argb: "FFF5F7FA" },
+          };
+          cell.alignment.horizontal = "center";
+        } else {
+          // 数据行
+          cell.alignment.horizontal = "center";
+
+          if (cellInfo._isSummary) {
+            // 合计行样式
+            cell.font = { bold: true, color: { argb: "FF1890FF" } };
+            cell.fill = {
+              type: "pattern",
+              pattern: "solid",
+              fgColor: { argb: "FFF0F9FF" },
+            };
+          }
+        }
+      }
+    },
+
+    // 添加一个方法，自动检测哪些字段应该是数值类型
+    getAutoDetectedNumericFields() {
+      const numericFields = [];
+
+      // 遍历列配置，找出类型为currency或number的字段
+      const traverse = (columns) => {
+        columns.forEach((col) => {
+          if (col.children) {
+            traverse(col.children);
+          } else if (col.prop && col.type) {
+            if (
+              col.type === "currency" ||
+              col.type === "number" ||
+              col.type === "percent"
+            ) {
+              if (!numericFields.includes(col.prop)) {
+                numericFields.push(col.prop);
+              }
+            }
+          }
+        });
+      };
+
+      if (this.complexHeaderColumns && this.complexHeaderColumns.length > 0) {
+        traverse(this.complexHeaderColumns);
+      }
+
+      return numericFields;
+    },
+
+    // 计算最终的导出数值字段
+
+    // 设置ExcelJS列宽
+    setExcelJSColumnWidths(worksheet) {
+      const leafColumns = this.getLeafColumns();
+
+      // 序号列宽度
+      worksheet.getColumn(1).width = 10;
+
+      // 数据列宽度
+      leafColumns.forEach((col, index) => {
+        let width = 15;
+        if (col.width) {
+          width = Math.max(10, Math.min(30, Math.floor(col.width / 7)));
+        }
+        worksheet.getColumn(index + 2).width = width;
+      });
+    },
+
+    setExcelJSMerges(worksheet) {
+      const totalCols = this.getTotalColumnCount();
+
+      // 1. 合并标题行（第1行）
+      if (totalCols > 1) {
+        worksheet.mergeCells(1, 1, 1, totalCols);
+      }
+
+      // 2. 合并副标题行（第2行）
+      if (totalCols > 1) {
+        worksheet.mergeCells(2, 1, 2, totalCols);
+      }
+
+      // 表头起始行（第3行）
+      const headerStartRow = 3;
+      const maxDepth = this.getHeaderDepth();
+
+      // 3. 合并序号列（如果有多层表头）
+      if (maxDepth > 1) {
+        worksheet.mergeCells(
+          headerStartRow,
+          1,
+          headerStartRow + maxDepth - 1,
+          1,
+        );
+      }
+
+      // 4. 处理复杂表头合并
+      this.processExcelJSMerges(
+        worksheet,
+        this.complexHeaderColumns,
+        headerStartRow,
+        2, // 从第2列开始（第1列是序号列）
+        maxDepth,
+      );
+    },
+
+    processExcelJSMerges(
+      worksheet,
+      columns,
+      startRow,
+      startCol,
+      maxDepth,
+      currentDepth = 0,
+    ) {
+      let currentCol = startCol;
+
+      columns.forEach((column) => {
+        if (column.children && column.children.length > 0) {
+          // 分组列 - 计算子列数量
+          const leafCount = this.countLeafColumns(column.children);
+
+          // 水平合并分组标题
+          if (leafCount > 1) {
+            worksheet.mergeCells(
+              startRow + currentDepth,
+              currentCol,
+              startRow + currentDepth,
+              currentCol + leafCount - 1,
+            );
+          }
+
+          // 递归处理子列
+          const nextStartCol = this.processExcelJSMerges(
+            worksheet,
+            column.children,
+            startRow,
+            currentCol,
+            maxDepth,
+            currentDepth + 1,
+          );
+
+          currentCol = nextStartCol;
+        } else {
+          // 单层表头列（没有children）
+          // 如果有多层表头，需要垂直合并到最大深度
+          if (maxDepth > 1 && currentDepth < maxDepth - 1) {
+            // 垂直合并：从当前深度合并到最大深度
+            worksheet.mergeCells(
+              startRow + currentDepth,
+              currentCol,
+              startRow + maxDepth - 1,
+              currentCol,
+            );
+          }
+
+          currentCol++;
+        }
+      });
+
+      return currentCol;
+    },
+
+    // 获取所有叶子列
+    getLeafColumns() {
+      const leafColumns = [];
+
+      const traverse = (columns) => {
+        columns.forEach((col) => {
+          if (col.children && col.children.length > 0) {
+            traverse(col.children);
+          } else if (col.prop) {
+            leafColumns.push(col);
+          }
+        });
+      };
+
+      if (this.complexHeaderColumns && this.complexHeaderColumns.length > 0) {
+        traverse(this.complexHeaderColumns);
+      }
+
+      return leafColumns;
+    },
+
+    // 优化获取表头深度的方法
+    getHeaderDepth(columns = null, currentDepth = 1) {
+      const cols = columns || this.complexHeaderColumns;
+      if (!cols || cols.length === 0) return currentDepth;
+
+      let maxDepth = currentDepth;
+
+      cols.forEach((col) => {
+        if (col.children && col.children.length > 0) {
+          // 递归计算子列的深度
+          const childDepth = this.getHeaderDepth(
+            col.children,
+            currentDepth + 1,
+          );
+          maxDepth = Math.max(maxDepth, childDepth);
+        } else {
+          // 单层表头列，深度就是当前深度
+          maxDepth = Math.max(maxDepth, currentDepth);
+        }
+      });
+
+      return maxDepth;
+    },
+
+    // 计算叶子列数量
+    countLeafColumns(columns) {
+      if (!columns || columns.length === 0) return 0;
+
+      let count = 0;
+      columns.forEach((col) => {
+        if (col.children && col.children.length > 0) {
+          count += this.countLeafColumns(col.children);
+        } else if (col.prop) {
+          count++;
+        }
+      });
+
+      return count;
+    },
+
+    // 获取总列数
+    getTotalColumnCount() {
+      const leafColumns = this.getLeafColumns();
+      return leafColumns.length + 1; // +1 为序号列
+    },
+
+    getExportFileName() {
+      const now = new Date();
+      const year = now.getFullYear();
+      const month = String(now.getMonth() + 1).padStart(2, "0");
+      const day = String(now.getDate()).padStart(2, "0");
+      const hour = String(now.getHours()).padStart(2, "0");
+      const minute = String(now.getMinutes()).padStart(2, "0");
+      const second = String(now.getSeconds()).padStart(2, "0");
+
+      const timestamp = `${year}${month}${day}${hour}${minute}${second}`;
+      const fileName = this.exportFileName || this.title;
+      return `${fileName || "报表"}_${timestamp}`;
+    },
+
+    initDate(timestamp) {
+      let date;
+      if (!timestamp || timestamp === 0 || timestamp == null) {
+        date = new Date();
+      } else {
+        date = new Date(timestamp * 1000);
+      }
+
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+
+      let result = "截至" + `${year}年${month}月${day}日`;
+
+      return result;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+/* 样式部分保持不变 */
+.page-container {
+  width: 100%;
+}
+
+h2 {
+  text-align: center;
+  color: #333;
+}
+
+.title-container {
+  display: flex;
+  display: -webkit-flex;
+}
+
+.subtitle {
+  font-size: 14px;
+  color: #666;
+  margin-top: 8px;
+  line-height: 1.4;
+  font-weight: normal;
+  text-align: center;
+}
+
+.title-main {
+  flex: 1;
+  -webkit-flex: 1;
+  h2 {
+    margin-bottom: 4px;
+  }
+}
+
+.title-tag {
+  font-size: 12px;
+  color: #666;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.query-param-area {
+  display: -webkit-flex;
+  display: flex;
+}
+
+.vxe-loading-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  backdrop-filter: blur(2px); /* 毛玻璃效果，可选 */
+}
+
+.vxe-loading-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  padding: 24px 36px;
+  background: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.01);
+}
+
+.vxe-loading-icon {
+  font-size: 40px;
+  color: #409eff;
+  /* el-icon-loading 自带旋转动画，无需额外 keyframes */
+}
+
+.vxe-loading-text {
+  font-size: 14px;
+  color: #606266;
+  letter-spacing: 0.5px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
+
+<style>
+/* vxe-table 全局样式调整 */
+.header-row {
+  background-color: #f5f7fa !important;
+}
+
+.header-cell {
+  text-align: center !important;
+  font-weight: bold !important;
+  background-color: #f5f7fa !important;
+}
+
+.vxe-cell {
+  text-align: center !important;
+}
+
+.vxe-table--header {
+  background-color: #f5f7fa !important;
+}
+
+.vxe-header--column {
+  background-color: #f5f7fa !important;
+}
+
+/* 确保 vxe-table 有边框和圆角 */
+.vxe-table--render-wrapper {
+  border: 1px solid #e8eaec;
+  border-radius: 4px;
+}
+
+/* 优化 vxe-table 滚动条样式 */
+.vxe-table--body-wrapper::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.vxe-table--body-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+
+.vxe-table--body-wrapper::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+.vxe-table--body-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 修复固定列可能出现的样式问题 */
+.vxe-table--fixed-left-wrapper,
+.vxe-table--fixed-right-wrapper {
+  z-index: 4;
+}
+
+/* 合计行样式 */
+.summary-row {
+  background-color: #f0f9ff !important;
+  font-weight: bold !important;
+  color: #1890ff !important;
+}
+
+.vxe-table--footer-wrapper {
+  background-color: #f0f9ff !important;
+}
+
+.vxe-footer--column {
+  background-color: #f0f9ff !important;
+  font-weight: bold !important;
+  color: #1890ff !important;
+  text-align: center !important;
+}
+</style>