bl-common-vue3 3.8.119 → 3.8.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.119",
+  "version": "3.8.121",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/common/utils/xlsx.js

@@ -5,6 +5,7 @@ const DEFAULT_COLUMN_WIDTH = 16;
 const MAX_COLUMN_WIDTH = 36;
 const HEADER_ROW_HEIGHT = 30;
 const DATA_ROW_HEIGHT = 24;
+const DEFAULT_BODY_FONT_COLOR = "FF333333";
 const XLSX_MIME_TYPE =
   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8";
 const INVALID_FILE_NAME_REG = /[\\/:*?"<>|]/g;
@@ -68,6 +69,8 @@ const getStyledExportOptions = (options = {}) => {
     detailFields = [],
     fieldAlignments = {},
     columnWidths = {},
+    fieldStyles = {},
+    fieldValueColors = {},
   } = options;
 
   return {
@@ -79,9 +82,78 @@ const getStyledExportOptions = (options = {}) => {
         : {},
     columnWidths:
       columnWidths && typeof columnWidths === "object" ? columnWidths : {},
+    fieldStyles:
+      fieldStyles && typeof fieldStyles === "object" ? fieldStyles : {},
+    fieldValueColors:
+      fieldValueColors && typeof fieldValueColors === "object"
+        ? fieldValueColors
+        : {},
   };
 };
 
+const normalizeArgbColor = (color, fallbackColor = DEFAULT_BODY_FONT_COLOR) => {
+  const normalizedColor = String(color || "")
+    .replace(/^#/, "")
+    .toUpperCase();
+  if (/^[0-9A-F]{8}$/.test(normalizedColor)) {
+    return normalizedColor;
+  }
+  if (/^[0-9A-F]{6}$/.test(normalizedColor)) {
+    return `FF${normalizedColor}`;
+  }
+  return fallbackColor;
+};
+
+const getFieldValueFontColor = (
+  item,
+  field,
+  fieldValueColors,
+  defaultColor
+) => {
+  const colorConfig = fieldValueColors[field];
+  if (!colorConfig || typeof colorConfig !== "object") {
+    return defaultColor;
+  }
+
+  const sourceField = colorConfig.sourceField || field;
+  const valueColors = colorConfig.colors;
+  if (!valueColors || typeof valueColors !== "object") {
+    return defaultColor;
+  }
+
+  return normalizeArgbColor(
+    valueColors[String(item?.[sourceField] ?? "")],
+    defaultColor
+  );
+};
+
+const getFieldStyle = (field, isDetailField, fieldStyles) => {
+  const defaultStyle = isDetailField
+    ? {
+        headerFontColor: "FF1F4E78",
+        headerFillColor: "FFDCE6F1",
+        bodyFontColor: DEFAULT_BODY_FONT_COLOR,
+        bodyFillColor: "FFF7FAFD",
+      }
+    : {
+        headerFontColor: "FFFFFFFF",
+        headerFillColor: "FF4472C4",
+        bodyFontColor: DEFAULT_BODY_FONT_COLOR,
+        bodyFillColor: "FFFFFFFF",
+      };
+  const configuredStyle = fieldStyles[field];
+  if (!configuredStyle || typeof configuredStyle !== "object") {
+    return defaultStyle;
+  }
+
+  return Object.fromEntries(
+    Object.entries(defaultStyle).map(([key, defaultColor]) => [
+      key,
+      normalizeArgbColor(configuredStyle[key], defaultColor),
+    ])
+  );
+};
+
 export function getVerticalMergeCells(json, fields, options = {}) {
   const { groupField, mergeFields = [] } = options;
   if (!groupField || !Array.isArray(mergeFields) || !mergeFields.length) {
@@ -160,18 +232,23 @@ const applyStyledExport = (XLSX, ws, json, fields, options) => {
 
   fieldKeys.forEach((field, columnIndex) => {
     const headerCell = ws[XLSX.utils.encode_cell({ r: 0, c: columnIndex })];
+    const isDetailField = detailFieldSet.has(field);
+    const fieldStyle = getFieldStyle(
+      field,
+      isDetailField,
+      options.fieldStyles
+    );
     if (headerCell) {
-      const isDetailField = detailFieldSet.has(field);
       headerCell.s = {
         font: {
           name: "Microsoft YaHei",
           sz: 11,
           bold: true,
-          color: { rgb: isDetailField ? "FF1F4E78" : "FFFFFFFF" },
+          color: { rgb: fieldStyle.headerFontColor },
         },
         fill: {
           patternType: "solid",
-          fgColor: { rgb: isDetailField ? "FFDCE6F1" : "FF4472C4" },
+          fgColor: { rgb: fieldStyle.headerFillColor },
         },
         alignment: {
           horizontal: "center",
@@ -190,16 +267,21 @@ const applyStyledExport = (XLSX, ws, json, fields, options) => {
         return;
       }
 
-      const isDetailField = detailFieldSet.has(field);
+      const fontColor = getFieldValueFontColor(
+        item,
+        field,
+        options.fieldValueColors,
+        fieldStyle.bodyFontColor
+      );
       cell.s = {
         font: {
           name: "Microsoft YaHei",
           sz: 10,
-          color: { rgb: "FF333333" },
+          color: { rgb: fontColor },
         },
         fill: {
           patternType: "solid",
-          fgColor: { rgb: isDetailField ? "FFF7FAFD" : "FFFFFFFF" },
+          fgColor: { rgb: fieldStyle.bodyFillColor },
         },
         alignment: {
           horizontal: options.fieldAlignments[field] || "left",
@@ -234,18 +316,14 @@ export async function createWorkbook(
   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)) {
-        item[fields[i]] = item[i];
-      }
-      delete item[i]; //删除原先的对象属性
-    }
-  });
+  const fieldKeys = Object.keys(fields);
+  // 字段 key 必须保留到取值阶段；不同字段允许使用相同表头，不能用表头文案作为对象 key，否则后写入的同名列会丢失。
+  const sheetRows = [
+    Object.values(fields),
+    ...json.map((item) => fieldKeys.map((field) => item?.[field])),
+  ];
   let wb = XLSX.utils.book_new(); //工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。XLSX.utils.book_new实用函数创建一个新的工作簿对象。
-  let ws = XLSX.utils.json_to_sheet(json, { header: Object.values(fields) }); //将JS对象数组转换为工作表。
+  let ws = XLSX.utils.aoa_to_sheet(sheetRows); //按列顺序写入，允许不同字段展示相同的表头文案。
   if (merges.length) {
     ws["!merges"] = merges;
   }

package/src/components/CustomTable/index.vue

@@ -1345,6 +1345,8 @@
       :params="listParams"
       :limit="exportLimit"
       :columnstitle="exportColumnsTitle"
+      :merge_options="exportMergeOptions"
+      :style_options="exportStyleOptions"
       :custom_result="exportResultData"
       :custom_data="dictionaryFilling"
       @customDataFunc="handleExportData"
@@ -1577,6 +1579,16 @@ export default defineComponent({
       type: Number,
       default: 500,
     },
+    /* 导出表格纵向合并配置 */
+    exportMergeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    /* 导出表格样式配置 */
+    exportStyleOptions: {
+      type: Object,
+      default: () => ({}),
+    },
     /* 自定义导出的方法 */
     customImport: {
       type: [Function, undefined],