aegon-gen 1.0.0

package/src/components/Export/ExcelExport.vue

@@ -0,0 +1,592 @@
+<template>
+  <div class="export-container">
+    <!-- 导出按钮 -->
+    <el-button type="primary" @click="exportExcel"
+      >导出Excel（Vue3+TS）----- 1</el-button
+    >
+    <!-- 导出状态提示 -->
+    <p v-if="isExporting">正在导出...</p>
+    <p v-if="exportSuccess" style="color: green">导出成功！</p>
+    <p v-if="exportError" style="color: red">导出失败！</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import ExcelJS from "exceljs";
+import type { CellValue, Worksheet, Row, Cell } from "exceljs";
+import { ElMessage } from "element-plus";
+
+// 导出状态
+const isExporting = ref(false);
+const exportSuccess = ref(false);
+const exportError = ref(false);
+
+/**
+ * Mock数据（与落库字段匹配）
+ */
+// 表头数据
+const tableHeaders = [
+  "档案编号",
+  "档案日期",
+  "会计日",
+  "控制行号",
+  "客户CIN",
+  "客户经理号",
+  "客户英文名称",
+  "客户中文名称",
+  "账号",
+  "产品(大项)",
+  "产品(细项)",
+  "余额(HKD)",
+  "额度(HKD)",
+  "授信资产风险评级 YBD",
+  "逾期天数",
+  "逾期原因",
+  "补充说明",
+  "催理情况",
+  "补充说明",
+  "Status",
+];
+
+// 表格数据（已简化为示例数据）
+const tableData = [
+  [
+    "012-C3-20250226-106",
+    "11/19/2025",
+    "11/20/2025",
+    "307",
+    "72050XXXXXX",
+    "8880169",
+    "FXXXX LIMITED",
+    "一XXXXXX集团有限公司",
+    "1288740XXXXXXX",
+    "特定放款计划",
+    "HKMC中小企融资担保计划 (SPGS)-定放/定押放/循环贷款/租购放款",
+    "1481082.78",
+    "4000000.00",
+    "S2M",
+    "10",
+    "",
+    "",
+    "",
+    "",
+    "",
+  ],
+  [
+    "012-C3-20250226-106",
+    "11/19/2025",
+    "11/20/2025",
+    "307",
+    "72050XXXXXX",
+    "8880169",
+    "FXXXX LIMITED",
+    "一XXXXXX集团有限公司",
+    "1288740XXXXXXX",
+    "特定放款计划",
+    "HKMC中小企融资担保计划 (SPGS)-定放/定押放/循环贷款/租购放款",
+    "265501.56",
+    "4000000.00",
+    "S2M",
+    "21",
+    "已联络客户",
+    "",
+    "客户已平帐",
+    "",
+    "已完成催收流程",
+  ],
+  [
+    "012-C3-20250226-106",
+    "11/19/2025",
+    "11/20/2025",
+    "307",
+    "72050XXXXXX",
+    "8880169",
+    "FXXXX LIMITED",
+    "一XXXXXX集团有限公司",
+    "1288740XXXXXXX",
+    "特定放款计划",
+    "HKMC中小企融资担保计划 (SPGS)-定放/定押放/循环贷款/租购放款",
+    "265501.56",
+    "1000000.00",
+    "P3M",
+    "",
+    "21",
+    "已联络客户",
+    "客户已平帐",
+    "",
+    "已完成催收流程",
+  ],
+  [
+    "012-C3-20250226-107",
+    "12/10/2025",
+    "12/9/2025",
+    "307",
+    "72050XXXXXX",
+    "8880169",
+    "FXXXX LIMITED",
+    "一XXXXXX集团有限公司",
+    "1288740XXXXXXX",
+    "特定放款计划",
+    "HKMC中小企融资担保计划 (SPGS)-定放/定押放/循环贷款/租购放款",
+    "265501.56",
+    "4000000.00",
+    "S2M",
+    "7",
+    "已联络客户",
+    "",
+    "客户已平帐",
+    "",
+    "已完成催收流程",
+  ],
+  [
+    "012-C3-20250226-107",
+    "12/10/2025",
+    "12/9/2025",
+    "307",
+    "72050XXXXXX",
+    "8880169",
+    "FXXXX LIMITED",
+    "一XXXXXX集团有限公司",
+    "1288740XXXXXXX",
+    "特定放款计划",
+    "HKMC中小企融资担保计划 (SPGS)-定放/定押放/循环贷款/租购放款",
+    "265501.56",
+    "4000000.00",
+    "S2M",
+    "7",
+    "已联络客户",
+    "",
+    "客户已平帐",
+    "",
+    "已完成催收流程",
+  ],
+];
+
+/**
+ * 工具函数：安全获取单元格值的长度
+ * @param cellValue Excel单元格值
+ * @returns 单元格值的字符长度（数字转字符串，空值返回0）
+ */
+const getCellValueLength = (
+  cellValue: CellValue | undefined | null
+): number => {
+  if (cellValue === null || cellValue === undefined) return 0;
+  // 处理不同类型的CellValue，统一转为字符串后计算长度
+  let strValue = "";
+  if (typeof cellValue === "string") {
+    strValue = cellValue;
+  } else if (typeof cellValue === "number" || typeof cellValue === "boolean") {
+    strValue = cellValue.toString();
+  } else if (cellValue instanceof Date) {
+    strValue = cellValue.toISOString();
+  } else {
+    // 处理富文本、公式等特殊类型，转为字符串
+    strValue = String(cellValue);
+  }
+  return strValue.length;
+};
+
+/**
+ * 判断是否为数字的辅助函数
+ * @param value 单元格值
+ * @returns 是否为数字（包括带小数点的数字字符串）
+ */
+const isNumberValue = (value: any): boolean => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === "number") return true;
+  if (typeof value !== "string") return false;
+
+  // 移除千分位逗号
+  const cleanedValue = value.replace(/,/g, "");
+
+  // 检查是否为数字（包括负数、小数）
+  return /^-?\d+(\.\d+)?$/.test(cleanedValue);
+};
+
+/**
+ * 数据分组函数：根据档案编号分组数据
+ * @param data 原始数据数组（不包含表头）
+ * @returns 分组后的数据，包含每个组的起始行和结束行索引
+ */
+const groupDataByFileNumber = (data: any[][]) => {
+  const groups: Array<{
+    fileNumber: string;
+    startRow: number; // 起始行索引（基于0，不包含表头）
+    endRow: number; // 结束行索引（基于0，不包含表头）
+    rows: any[][]; // 该组的所有行数据
+  }> = [];
+
+  let currentGroup: {
+    fileNumber: string;
+    startRow: number;
+    endRow: number;
+    rows: any[][];
+  } | null = null;
+
+  data.forEach((row, index) => {
+    const fileNumber = row[0]; // 档案编号在第一列
+
+    if (!currentGroup || currentGroup.fileNumber !== fileNumber) {
+      // 开始新的分组
+      if (currentGroup) {
+        currentGroup.endRow = index - 1;
+        groups.push(currentGroup);
+      }
+      currentGroup = {
+        fileNumber,
+        startRow: index,
+        endRow: index,
+        rows: [row],
+      };
+    } else {
+      // 继续当前分组
+      currentGroup.endRow = index;
+      currentGroup.rows.push(row);
+    }
+  });
+
+  // 添加最后一个分组
+  if (currentGroup) {
+    groups.push(currentGroup);
+  }
+
+  return groups;
+};
+
+/**
+ * 获取指定列的所有索引（用于处理重复列名）
+ * @param columnName 列名
+ * @returns 列索引数组（从0开始）
+ */
+const getColumnIndexes = (columnName: string): number[] => {
+  const indexes: number[] = [];
+  tableHeaders.forEach((header, index) => {
+    if (header === columnName) {
+      indexes.push(index);
+    }
+  });
+  return indexes;
+};
+
+/**
+ * 需要特殊处理对齐方式的列（垂直水平居中）
+ */
+const getCenterAlignedColumns = () => [
+  "逾期原因",
+  "补充说明",
+  "催理情况",
+  "Status",
+];
+
+/**
+ * 获取需要右对齐的列（主要是数字列）
+ */
+const getRightAlignedColumns = () => ["余额(HKD)", "额度(HKD)", "逾期天数"];
+
+/**
+ * 合并相同档案编号的数据
+ * @param worksheet Excel工作表对象
+ * @param data 原始数据（不包含表头）
+ */
+const mergeCellsForSameFileNumber = (worksheet: Worksheet, data: any[][]) => {
+  const groups = groupDataByFileNumber(data);
+
+  // 需要合并的列名（注意：有两个"补充说明"列）
+  const columnsToMerge = [
+    "逾期原因",
+    "补充说明", // 第一个补充说明（第17列）
+    "催理情况",
+    "补充说明", // 第二个补充说明（第19列）
+    "Status",
+  ];
+
+  // 存储已经合并过的单元格范围，避免重复合并
+  const mergedRanges = new Set<string>();
+
+  groups.forEach((group) => {
+    // 如果组内只有一行数据，不需要合并
+    if (group.startRow === group.endRow) {
+      return;
+    }
+
+    // 处理所有需要合并的列
+    columnsToMerge.forEach((columnName) => {
+      // 获取该列名的所有索引（处理重复列名）
+      const columnIndexes = getColumnIndexes(columnName);
+
+      columnIndexes.forEach((columnIndex) => {
+        if (columnIndex === -1) return;
+
+        // Excel行号从1开始，加上表头行
+        const startRow = group.startRow + 2; // +2是因为Excel行从1开始，表头占第1行
+        const endRow = group.endRow + 2;
+
+        // 创建唯一标识符来避免重复合并
+        const rangeKey = `${startRow}-${endRow}-${columnIndex + 1}`;
+
+        // 检查是否已经合并过这个范围
+        if (mergedRanges.has(rangeKey)) {
+          return;
+        }
+
+        try {
+          // 合并单元格
+          worksheet.mergeCells(
+            startRow,
+            columnIndex + 1,
+            endRow,
+            columnIndex + 1
+          );
+          mergedRanges.add(rangeKey);
+
+          // 获取合并后的单元格值（取第一个非空值）
+          let mergedValue = "";
+
+          // 修复：确保rows存在且非空
+          if (group.rows && group.rows.length > 0) {
+            for (let i = 0; i < group.rows.length; i++) {
+              const rowData = group.rows[i];
+              if (rowData && rowData[columnIndex] !== undefined) {
+                const value = rowData[columnIndex];
+                if (
+                  value !== null &&
+                  value !== undefined &&
+                  String(value).trim() !== ""
+                ) {
+                  mergedValue = String(value);
+                  break;
+                }
+              }
+            }
+          }
+
+          // 设置合并后单元格的值
+          const cell = worksheet.getCell(startRow, columnIndex + 1);
+          cell.value = mergedValue;
+        } catch (error: any) {
+          console.warn(`合并单元格失败: ${error.message}`, {
+            startRow,
+            columnIndex: columnIndex + 1,
+            endRow,
+            columnName,
+            fileNumber: group.fileNumber,
+          });
+        }
+      });
+    });
+  });
+};
+
+/**
+ * 行业数据Excel导出函数（TS严格模式适配版）
+ * @param worksheetData Excel工作表数据（二维数组）
+ * @param sheetName 工作表名称
+ * @param excelName 导出文件名（不含.xlsx后缀）
+ */
+async function industryExportToExcel(
+  worksheetData: any[][],
+  sheetName: string,
+  excelName: string
+): Promise<void> {
+  const workbook = new ExcelJS.Workbook();
+  const worksheet = workbook.addWorksheet(sheetName);
+
+  // 1. 写入数据（保留原始文本格式）
+  worksheet.addRows(worksheetData);
+
+  // 2. 合并相同档案编号的单元格
+  const dataWithoutHeader = worksheetData.slice(1); // 去掉表头
+  mergeCellsForSameFileNumber(worksheet, dataWithoutHeader);
+
+  // 3. 配置表头样式（无特殊颜色和背景，仅加粗）
+  const headerRow = worksheet.getRow(1);
+  if (headerRow) {
+    headerRow.eachCell((cell: Cell) => {
+      // 表头字体：仅加粗，无特殊颜色
+      cell.font = {
+        name: "Calibri",
+        size: 11,
+        bold: true,
+        color: { argb: "FF000000" }, // 黑色文本
+      };
+      // 表头无特殊背景
+      cell.fill = {
+        type: "pattern",
+        pattern: "solid",
+        fgColor: { argb: "FFFFFFFF" }, // 白色背景
+      };
+      // 表头文本左对齐（垂直居中）
+      cell.alignment = {
+        vertical: "middle",
+        horizontal: "left", // 左对齐
+        wrapText: true, // 自动换行
+      };
+      // 表头黑色边框
+      cell.border = {
+        top: { style: "thin", color: { argb: "FF000000" } },
+        left: { style: "thin", color: { argb: "FF000000" } },
+        bottom: { style: "thin", color: { argb: "FF000000" } },
+        right: { style: "thin", color: { argb: "FF000000" } },
+      };
+    });
+  }
+
+  // 4. 配置数据行样式
+  worksheet.eachRow((row: Row, rowIndex: number) => {
+    // 显式指定类型
+    if (rowIndex === 1) return; // 跳过表头行
+
+    row.eachCell((cell: Cell, cellNumber: number) => {
+      // 基础字体设置
+      cell.font = {
+        name: "Calibri",
+        size: 11,
+        color: { argb: "FF000000" }, // 黑色文本
+      };
+
+      // 获取列名
+      const columnIndex = cellNumber - 1;
+      const columnName: any = tableHeaders[columnIndex];
+
+      // 特殊列处理：垂直水平居中（包括所有补充说明列）
+      const centerAlignedColumns = getCenterAlignedColumns();
+      if (centerAlignedColumns.includes(columnName)) {
+        cell.alignment = {
+          vertical: "middle",
+          horizontal: "center", // 水平居中
+          wrapText: true,
+        };
+      }
+      // 数字列处理：右对齐
+      else if (
+        getRightAlignedColumns().includes(columnName) ||
+        isNumberValue(cell.value)
+      ) {
+        cell.alignment = {
+          vertical: "middle",
+          horizontal: "right", // 右对齐
+          wrapText: true,
+        };
+      }
+      // 其他列：左对齐
+      else {
+        cell.alignment = {
+          vertical: "middle",
+          horizontal: "left", // 左对齐
+          wrapText: true,
+        };
+      }
+
+      // 数据行黑色边框
+      cell.border = {
+        top: { style: "thin", color: { argb: "FF000000" } },
+        left: { style: "thin", color: { argb: "FF000000" } },
+        bottom: { style: "thin", color: { argb: "FF000000" } },
+        right: { style: "thin", color: { argb: "FF000000" } },
+      };
+    });
+  });
+
+  // 5. 列宽自适应
+  worksheet.columns?.forEach((column, _index) => {
+    // 初始化默认宽度
+    let maxWidth = 10;
+
+    // 安全处理column.values（空值判断）
+    if (column.values && column.values.length > 0) {
+      // 明确指定reduce的返回类型为number
+      maxWidth = column.values.reduce<number>(
+        (w: number, cellValue: CellValue) => {
+          // 安全获取单元格值长度（处理所有CellValue类型）
+          const cellLength = getCellValueLength(cellValue);
+          return Math.max(w, cellLength);
+        },
+        10
+      ); // 初始值设为数字10
+    }
+
+    // 确保maxWidth是数字后再计算
+    column.width = Math.min(maxWidth + 2, 50); // 限制最大宽度为50
+  });
+
+  // 6. 导出 Excel
+  try {
+    const buffer = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([buffer], {
+      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${excelName}.xlsx`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+/**
+ * 导出Excel主函数
+ */
+const exportExcel = async () => {
+  // 重置状态
+  exportSuccess.value = false;
+  exportError.value = false;
+  isExporting.value = true;
+
+  try {
+    // 准备导出数据：表头 + 数据行
+    const exportData = [tableHeaders, ...tableData];
+
+    // 调用导出函数
+    await industryExportToExcel(exportData, "档案数据", "档案数据导出");
+
+    // 导出成功
+    exportSuccess.value = true;
+    isExporting.value = false;
+
+    // 显示成功提示
+    ElMessage.success("Excel导出成功！");
+
+    // 3秒后自动清除成功提示
+    setTimeout(() => {
+      exportSuccess.value = false;
+    }, 3000);
+  } catch (error) {
+    console.error("导出失败:", error);
+
+    // 导出失败
+    exportError.value = true;
+    isExporting.value = false;
+
+    // 显示错误提示
+    ElMessage.error("Excel导出失败，请重试！");
+
+    // 3秒后自动清除错误提示
+    setTimeout(() => {
+      exportError.value = false;
+    }, 3000);
+  }
+};
+</script>
+
+<style scoped>
+.export-container {
+  padding: 20px;
+  text-align: center;
+  margin-top: 50px;
+}
+.el-button {
+  font-size: 16px;
+  padding: 10px 20px;
+}
+p {
+  margin-top: 20px;
+  font-size: 14px;
+}
+</style>