aegon-gen 1.0.0

package/src/components/Export/ExcelExport2.vue

@@ -0,0 +1,494 @@
+<template>
+  <div class="export-container">
+    <!-- 导出按钮 -->
+    <el-button type="primary" @click="exportExcel"
+      >导出Excel（Vue3+TS）</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);
+
+// 提取的表格数据（表头+数据行）
+const complexLoanData = [
+  // 表头行
+  [
+    "會計日",
+    "控制行號",
+    "客戶CIN",
+    "客戶經理號",
+    "客戶經理名稱",
+    "客戶英文名",
+    "客戶中文名",
+    "帳號",
+    "產品(大項)",
+    "產品(細項)",
+    "餘額(HKD)",
+    "額度(HKD)",
+    "授信資產風險評級YBD",
+    "逾期天數",
+  ],
+  // 数据行1
+  [
+    "2025-12-12",
+    "307",
+    "72050XXXXXX",
+    "8812345",
+    "陳XX",
+    "FXXXX LIMITED",
+    "朝XXXXXX有限公司",
+    "1288740XXXXXX",
+    "特定放款計劃",
+    "HKMC中小企融資擔保計劃(SFGS)-定放/定押放/循環貸款/租購放款",
+    "1,481,082.78",
+    "4,000,000.00 S2M",
+    "",
+    "11",
+  ],
+  // 数据行2
+  [
+    "2025-12-11",
+    "307",
+    "72050XXXXXX",
+    "8812345",
+    "陳XX",
+    "FXXXX LIMITED",
+    "朝XXXXXX有限公司",
+    "1288741XXXXXX",
+    "特定放款計劃",
+    "HKMC中小企融資擔保計劃(SFGS)-定放/定押放/循環貸款/租購放款",
+    "3,481,082.78",
+    "6,000,000.00 S2M",
+    "",
+    "1",
+  ],
+  // 添加更多测试数据（不同日期）
+  [
+    "2025-12-12",
+    "308",
+    "72051XXXXXX",
+    "8812346",
+    "李XX",
+    "GXXXX LIMITED",
+    "廣XXXXXX有限公司",
+    "1288742XXXXXX",
+    "特定放款計劃",
+    "HKMC中小企融資擔保計劃(SFGS)-定放/定押放/循環貸款/租購放款",
+    "2,481,082.78",
+    "5,000,000.00 S2M",
+    "",
+    "5",
+  ],
+  [
+    "2025-12-10",
+    "309",
+    "72052XXXXXX",
+    "8812347",
+    "王XX",
+    "HXXXX LIMITED",
+    "華XXXXXX有限公司",
+    "1288743XXXXXX",
+    "特定放款計劃",
+    "HKMC中小企融資擔保計劃(SFGS)-定放/定押放/循環貸款/租購放款",
+    "4,481,082.78",
+    "7,000,000.00 S2M",
+    "",
+    "15",
+  ],
+];
+
+/**
+ * 工具函数：安全获取单元格值的长度
+ * @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, "").replace(/\s/g, "");
+
+  // 检查是否为数字（包括负数、小数、带单位的数字）
+  return /^-?\d+(\.\d+)?/.test(cleanedValue);
+};
+
+/**
+ * 按日期分组数据
+ * @param data 原始数据（包含表头）
+ * @returns 按日期分组的对象，键为日期，值为该日期的数据数组
+ */
+const groupDataByDate = (data: string[][]): Record<string, string[][]> => {
+  if (data.length <= 1) return {}; // 只有表头或空数据
+
+  const header: string[] = data[0] || [];
+  const dateGroups: Record<string, string[][]> = {};
+
+  // 安全检查：确保header存在
+  if (!header || !Array.isArray(header)) {
+    dateGroups["全部数据"] = data;
+    return dateGroups;
+  }
+
+  const dateColumnIndex = header.indexOf("會計日"); // 根据实际情况调整列名
+
+  if (dateColumnIndex === -1) {
+    // 如果没有找到日期列，将所有数据放在一个分组中
+    dateGroups["全部数据"] = data;
+    return dateGroups;
+  }
+
+  // 遍历数据行（跳过表头）
+  for (let i = 1; i < data.length; i++) {
+    const row: string[] = data[i] || [];
+    const date = row[dateColumnIndex];
+
+    if (!date) continue;
+
+    if (!dateGroups[date]) {
+      // 为新日期创建分组，包含表头
+      dateGroups[date] = [header];
+    }
+
+    // 添加数据行到对应日期的分组
+    dateGroups[date].push(row);
+  }
+
+  return dateGroups;
+};
+
+/**
+ * 配置工作表的样式
+ * @param worksheet Excel工作表对象
+ * @param header 表头数组
+ */
+const configureWorksheetStyle = (worksheet: Worksheet, header: string[]) => {
+  if (!header || !Array.isArray(header)) {
+    return;
+  }
+
+  // 1. 配置表头样式（无特殊颜色和背景，仅加粗）
+  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" } },
+      };
+    });
+  }
+
+  // 2. 配置数据行样式
+  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 = columnIndex < header.length ? header[columnIndex] : "";
+
+      // 数字列处理：右对齐
+      const rightAlignedColumns = ["餘額(HKD)", "額度(HKD)", "逾期天數"];
+      if (
+        (columnName && rightAlignedColumns.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" } },
+      };
+    });
+  });
+
+  // 3. 列宽自适应
+  worksheet.columns?.forEach((column) => {
+    // 初始化默认宽度
+    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
+  });
+};
+
+/**
+ * 行业数据Excel导出函数（支持多工作表，按日期分组）
+ * @param worksheetData Excel工作表数据（二维数组）
+ * @param excelName 导出文件名（不含.xlsx后缀）
+ * @param dateRange 日期范围字符串，可选
+ */
+async function industryExportToExcel(
+  worksheetData: string[][],
+  excelName: string,
+  dateRange?: string
+): Promise<void> {
+  const workbook = new ExcelJS.Workbook();
+
+  // 1. 按日期分组数据
+  const dateGroups = groupDataByDate(worksheetData);
+
+  // 2. 如果没有数据，只创建一个空的工作表
+  if (Object.keys(dateGroups).length === 0) {
+    const worksheet = workbook.addWorksheet("数据");
+    const header = worksheetData[0] || [];
+    worksheet.addRows(worksheetData.length > 0 ? worksheetData : [header]);
+    configureWorksheetStyle(worksheet, header);
+  } else {
+    // 3. 为每个日期创建独立的工作表
+    Object.keys(dateGroups).forEach((date) => {
+      const dateData: string[][] = dateGroups[date] || [];
+
+      // 创建工作表，工作表名称为日期
+      // Excel工作表名称不能包含特定字符，需要处理
+      let sheetName = date;
+      if (sheetName === "全部数据") {
+        sheetName = "汇总";
+      } else {
+        // 移除可能影响工作表名称的字符
+        sheetName = sheetName.replace(/[\/\\\*\?\[\]:]/g, "-");
+        // 限制工作表名称长度（Excel限制31个字符）
+        if (sheetName.length > 31) {
+          sheetName = sheetName.substring(0, 31);
+        }
+      }
+
+      const worksheet = workbook.addWorksheet(sheetName);
+
+      // 4. 写入数据
+      if (dateData.length > 0) {
+        worksheet.addRows(dateData);
+
+        // 5. 配置工作表样式
+        const header = dateData[0] || [];
+        configureWorksheetStyle(worksheet, header);
+      }
+    });
+  }
+
+  // 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");
+
+    // 构建文件名
+    let fileName = excelName;
+    if (dateRange) {
+      fileName = `${excelName}_${dateRange}`;
+    }
+
+    a.href = url;
+    a.download = `${fileName}.xlsx`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    return Promise.resolve();
+  } catch (error) {
+    return Promise.reject(error);
+  }
+}
+
+/**
+ * 获取日期范围字符串
+ * @param data 数据数组
+ * @returns 日期范围字符串，如 "2025-12-10~2025-12-12"
+ */
+const getDateRangeString = (data: string[][]): string => {
+  if (data.length <= 1) return "";
+
+  const header: string[] = data[0] || [];
+  const dateColumnIndex = header.indexOf("會計日");
+
+  if (dateColumnIndex === -1) return "";
+
+  const dates: string[] = [];
+
+  // 收集所有日期
+  for (let i = 1; i < data.length; i++) {
+    const row: string[] = data[i] || [];
+    const date = row[dateColumnIndex];
+    if (date && !dates.includes(date)) {
+      dates.push(date);
+    }
+  }
+
+  if (dates.length === 0) return "";
+
+  // 排序日期
+  dates.sort();
+
+  if (dates.length === 1) {
+    return dates[0] as any;
+  } else {
+    return `${dates[0]}~${dates[dates.length - 1]}`;
+  }
+};
+
+/**
+ * 导出Excel主函数
+ */
+const exportExcel = async () => {
+  // 重置状态
+  exportSuccess.value = false;
+  exportError.value = false;
+  isExporting.value = true;
+
+  try {
+    // 准备导出数据
+    const exportData = complexLoanData;
+
+    // 获取日期范围
+    const dateRange = getDateRangeString(exportData);
+
+    // 构建文件名
+    const excelName = "贷款数据报表";
+
+    // 调用导出函数
+    await industryExportToExcel(exportData, excelName, dateRange);
+
+    // 导出成功
+    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>