bl-common-vue3 3.8.108 → 3.8.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.108",
+  "version": "3.8.110",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",
@@ -41,7 +41,9 @@
     "file-saver": "^2.0.5",
     "style-resources-loader": "^1.5.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "xlsx-js-style": "^1.2.0"
+  },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.13",
     "@vue/cli-plugin-eslint": "~4.5.13",

package/src/common/utils/xlsx.js

@@ -1,8 +1,193 @@
-import fs from "file-saver";
-import * as XLSX from "kj-xlsx";
-export function xlsx(json, fields, filename = ".xlsx") {
-  //导出xlsx
-  json.forEach((item) => {
+import fs from "file-saver";
+import * as LegacyXLSX from "kj-xlsx";
+
+const DEFAULT_COLUMN_WIDTH = 16;
+const MAX_COLUMN_WIDTH = 36;
+const HEADER_ROW_HEIGHT = 30;
+const DATA_ROW_HEIGHT = 24;
+
+const createBorder = (color) => ({
+  top: { style: "thin", color: { rgb: color } },
+  bottom: { style: "thin", color: { rgb: color } },
+  left: { style: "thin", color: { rgb: color } },
+  right: { style: "thin", color: { rgb: color } },
+});
+
+const getStyledExportOptions = (options = {}) => {
+  // 公共导出默认使用统一基础样式，特殊旧模板仍可通过 enabled: false 关闭。
+  const {
+    enabled = true,
+    detailFields = [],
+    fieldAlignments = {},
+    columnWidths = {},
+  } = options;
+
+  return {
+    enabled,
+    detailFields: Array.isArray(detailFields) ? detailFields : [],
+    fieldAlignments:
+      fieldAlignments && typeof fieldAlignments === "object"
+        ? fieldAlignments
+        : {},
+    columnWidths:
+      columnWidths && typeof columnWidths === "object" ? columnWidths : {},
+  };
+};
+
+export function getVerticalMergeCells(json, fields, options = {}) {
+  const { groupField, mergeFields = [] } = options;
+  if (!groupField || !Array.isArray(mergeFields) || !mergeFields.length) {
+    return [];
+  }
+
+  const fieldKeys = Object.keys(fields);
+  const mergeColumnIndexes = mergeFields
+    .map((field) => fieldKeys.indexOf(field))
+    .filter((columnIndex) => columnIndex >= 0);
+  if (!mergeColumnIndexes.length) {
+    return [];
+  }
+
+  const merges = [];
+  let groupStartIndex = 0;
+
+  const appendGroupMerges = (groupEndIndex) => {
+    const groupValue = json[groupStartIndex]?.[groupField];
+    if (
+      groupEndIndex <= groupStartIndex ||
+      groupValue === undefined ||
+      groupValue === null ||
+      groupValue === ""
+    ) {
+      return;
+    }
+
+    mergeColumnIndexes.forEach((columnIndex) => {
+      merges.push({
+        // 工作表第 0 行是表头，数据行需要整体向下偏移一行。
+        s: { r: groupStartIndex + 1, c: columnIndex },
+        e: { r: groupEndIndex + 1, c: columnIndex },
+      });
+    });
+  };
+
+  for (let rowIndex = 1; rowIndex <= json.length; rowIndex++) {
+    const groupChanged =
+      rowIndex === json.length ||
+      json[rowIndex]?.[groupField] !== json[groupStartIndex]?.[groupField];
+    if (!groupChanged) {
+      continue;
+    }
+
+    appendGroupMerges(rowIndex - 1);
+    groupStartIndex = rowIndex;
+  }
+
+  return merges;
+}
+
+const getAutoColumnWidths = (json, fields, columnWidths = {}) => {
+  return Object.entries(fields).map(([field, title]) => {
+    const configuredWidth = Number(columnWidths[field]);
+    if (configuredWidth > 0) {
+      return { wch: configuredWidth };
+    }
+
+    const contentWidth = json.reduce((width, item) => {
+      const valueLength = String(item?.[field] ?? "").length;
+      return Math.max(width, valueLength);
+    }, String(title ?? "").length);
+
+    return {
+      wch: Math.min(MAX_COLUMN_WIDTH, Math.max(DEFAULT_COLUMN_WIDTH, contentWidth + 2)),
+    };
+  });
+};
+
+const applyStyledExport = (XLSX, ws, json, fields, options) => {
+  const fieldKeys = Object.keys(fields);
+  const detailFieldSet = new Set(options.detailFields);
+  const headerBorder = createBorder("FFB4C7E7");
+  const bodyBorder = createBorder("FFD9E2F3");
+
+  fieldKeys.forEach((field, columnIndex) => {
+    const headerCell = ws[XLSX.utils.encode_cell({ r: 0, c: columnIndex })];
+    if (headerCell) {
+      const isDetailField = detailFieldSet.has(field);
+      headerCell.s = {
+        font: {
+          name: "Microsoft YaHei",
+          sz: 11,
+          bold: true,
+          color: { rgb: isDetailField ? "FF1F4E78" : "FFFFFFFF" },
+        },
+        fill: {
+          patternType: "solid",
+          fgColor: { rgb: isDetailField ? "FFDCE6F1" : "FF4472C4" },
+        },
+        alignment: {
+          horizontal: "center",
+          vertical: "center",
+          wrapText: true,
+        },
+        border: headerBorder,
+      };
+    }
+
+    json.forEach((item, dataIndex) => {
+      const cell = ws[
+        XLSX.utils.encode_cell({ r: dataIndex + 1, c: columnIndex })
+      ];
+      if (!cell) {
+        return;
+      }
+
+      const isDetailField = detailFieldSet.has(field);
+      cell.s = {
+        font: {
+          name: "Microsoft YaHei",
+          sz: 10,
+          color: { rgb: "FF333333" },
+        },
+        fill: {
+          patternType: "solid",
+          fgColor: { rgb: isDetailField ? "FFF7FAFD" : "FFFFFFFF" },
+        },
+        alignment: {
+          horizontal: options.fieldAlignments[field] || "left",
+          vertical: "center",
+          wrapText: true,
+        },
+        border: bodyBorder,
+      };
+    });
+  });
+
+  ws["!cols"] = getAutoColumnWidths(json, fields, options.columnWidths);
+  ws["!rows"] = [
+    { hpt: HEADER_ROW_HEIGHT },
+    ...json.map(() => ({ hpt: DATA_ROW_HEIGHT })),
+  ];
+};
+
+// 暴露工作簿构建方法，便于对合并区域和样式做真实 xlsx 回归检查。
+export async function createWorkbook(
+  json,
+  fields,
+  mergeOptions = {},
+  styleOptions = {}
+) {
+  const merges = getVerticalMergeCells(json, fields, mergeOptions);
+  const styledExportOptions = getStyledExportOptions(styleOptions);
+  const styledXLSXModule = styledExportOptions.enabled
+    ? await import("xlsx-js-style")
+    : null;
+  const XLSX = styledXLSXModule?.default || styledXLSXModule || LegacyXLSX;
+  const sourceJson = styledExportOptions.enabled
+    ? json.map((item) => ({ ...item }))
+    : null;
+  //导出xlsx
+  json.forEach((item) => {
     for (let i in item) {
       // eslint-disable-next-line no-prototype-builtins
       if (fields.hasOwnProperty(i)) {
@@ -11,11 +196,33 @@ export function xlsx(json, fields, filename = ".xlsx") {
       delete item[i]; //删除原先的对象属性
     }
   });
-  let sheetName = filename.replace(/[\\/?*[\]:]/g, "").slice(0, 31) || "Sheet1"; //excel的文件名称
-  let wb = XLSX.utils.book_new(); //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
-  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }); //将JS对象数组转换为工作表。
-  wb.SheetNames.push(sheetName);
-  wb.Sheets[sheetName] = ws;
+  let wb = XLSX.utils.book_new(); //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
+  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }); //将JS对象数组转换为工作表。
+  if (merges.length) {
+    ws["!merges"] = merges;
+  }
+  if (styledExportOptions.enabled) {
+    applyStyledExport(XLSX, ws, sourceJson, fields, styledExportOptions);
+  }
+  return { XLSX, wb, ws };
+}
+
+export async function xlsx(
+  json,
+  fields,
+  filename = ".xlsx",
+  mergeOptions = {},
+  styleOptions = {}
+) {
+  const { XLSX, wb, ws } = await createWorkbook(
+    json,
+    fields,
+    mergeOptions,
+    styleOptions
+  );
+  const sheetName = filename.replace(/[\\/?*[\]:]/g, "").slice(0, 31) || "Sheet1"; //excel的文件名称
+  wb.SheetNames.push(sheetName);
+  wb.Sheets[sheetName] = ws;
   const defaultCellStyle = {
     font: { name: "Verdana", sz: 13, color: "FF00FF88" },
     fill: { fgColor: { rgb: "FFFFAA00" } },

package/src/components/ExportComponents/index.vue

@@ -67,6 +67,14 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    merge_options: {    //导出表格纵向合并配置
+      type: Object,
+      default: () => ({})
+    },
+    style_options: {    //导出表格样式配置
+      type: Object,
+      default: () => ({})
+    },
     custom_result: {    //导出表格头部
       type: Object,
       // eslint-disable-next-line vue/require-valid-default-prop
@@ -121,9 +129,9 @@ export default defineComponent({
                 context.emit("customDataFunc" , state.ExportList)
               }else {
                 console.log('导出文档')
-                setTimeout(() => {
-                  let list = utils.deepClone(state.ExportList);
-                  xlsx(list, removeUndefined(props.columnstitle), props.title);
+                setTimeout(async () => {
+                  let list = utils.deepClone(state.ExportList);
+                  await xlsx(list, removeUndefined(props.columnstitle), props.title, props.merge_options, props.style_options);
                   context.emit("success", t('ExportComponents.index.921182-2'));
                   closeModal()
                 }, 200);
@@ -138,9 +146,9 @@ export default defineComponent({
                 context.emit("customDataFunc" , state.ExportList)
               }else {
                 console.log('导出文档')
-                setTimeout(() => {
-                  let list = utils.deepClone(state.ExportList);
-                  xlsx(list, removeUndefined(props.columnstitle), props.title);
+                setTimeout(async () => {
+                  let list = utils.deepClone(state.ExportList);
+                  await xlsx(list, removeUndefined(props.columnstitle), props.title, props.merge_options, props.style_options);
                   context.emit("success", t('ExportComponents.index.921182-2'));
                   closeModal()
                 }, 200);
@@ -158,9 +166,9 @@ export default defineComponent({
     watch(
         () => props.custom_result,
         (val) => {
-          setTimeout(() => {
-            let list = utils.deepClone(val);
-            xlsx(list, removeUndefined(props.columnstitle), props.title);
+          setTimeout(async () => {
+            let list = utils.deepClone(val);
+            await xlsx(list, removeUndefined(props.columnstitle), props.title, props.merge_options, props.style_options);
             context.emit("success", t('ExportComponents.index.921182-2'));
             closeModal()
           }, 200);