bl-common-vue3 3.8.118 → 3.8.120

package/package.json

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

package/src/common/utils/util.js

@@ -18,6 +18,7 @@ const utils = {
   basicConfigI18n: {}, // config 接口返回的i18n 配置信息
   dictData: {}, // 字典
   dictMenuData: {}, // 菜单字典
+  preferences: {}, // 用户使用偏好
   /**
    *  表单验证为数字
    */
@@ -91,6 +92,12 @@ const utils = {
     }else {
       localData[key] = value;
     }
+    if (key == 'preferences') {
+      utils.preferences = localData[key];
+      let setBLPreferences = new Event('setBLPreferences');
+      setBLPreferences.newValue = utils.preferences;
+      window.dispatchEvent(setBLPreferences);
+    }
     localStorage.setItem(utils.blCommonKey, JSON.stringify(localData));
     if (key && key.includes('locale_')) {
       // 修改的语言

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",

package/src/components/CustomTable/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="tableWarpRef" class="table-warp">
+    <div ref="tableWarpRef" class="table-warp" :class="{'antd-pagination-no-mb': useUserPreferences}">
     <template v-if="displayTitleCollapsed && filterList?.length">
       <div
         ref="titleHeaderRef"
@@ -659,6 +659,7 @@
           ? { x: 'max-content', y: tableScrollHeight }
           : { x: 'max-content' },
         ...$attrs,
+        sticky: resolvedSticky,
       }"
       :dataSource="newDataSource"
       :size="$attrs?.size || isInDrawer ? 'small' : tableConfig?.size"
@@ -1344,6 +1345,8 @@
       :params="listParams"
       :limit="exportLimit"
       :columnstitle="exportColumnsTitle"
+      :merge_options="exportMergeOptions"
+      :style_options="exportStyleOptions"
       :custom_result="exportResultData"
       :custom_data="dictionaryFilling"
       @customDataFunc="handleExportData"
@@ -1576,6 +1579,16 @@ export default defineComponent({
       type: Number,
       default: 500,
     },
+    /* 导出表格纵向合并配置 */
+    exportMergeOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    /* 导出表格样式配置 */
+    exportStyleOptions: {
+      type: Object,
+      default: () => ({}),
+    },
     /* 自定义导出的方法 */
     customImport: {
       type: [Function, undefined],
@@ -1615,14 +1628,14 @@ export default defineComponent({
         };
       },
     },
-    tableHeight: {
-      type: Number,
-      default: 0,
-    },
-    autoTableHeight: {
+    useUserPreferences: {
       type: Boolean,
       default: false,
     },
+    autoTableHeightBottomOffset: {
+      type: Number,
+      default: 11,
+    },
     maximized: {
       type: Boolean,
       default: false,
@@ -1928,9 +1941,25 @@ export default defineComponent({
     const autoTableHeightRaf = ref(0);
     const tableHeightTimer = ref(0);
     const autoTableHeightObserver = ref(null);
-    const autoTableHeightBottomOffset = 11;
     const autoTableHeightMinBody = 80;
     const showTableMaximizedButton = computed(() => props.showMaximizeButton);
+    const getUserTableHeightMode = () => {
+      return (
+        utils.preferences?.table?.heightMode ||
+        utils.getCommonLocal("preferences")?.table?.heightMode ||
+        ""
+      );
+    };
+    const userTableHeightMode = ref(getUserTableHeightMode());
+    const shouldUseAutoTableHeight = computed(() => {
+      return props.useUserPreferences && userTableHeightMode.value === "fixed";
+    });
+    const resolvedSticky = computed(() => {
+      if (props.useUserPreferences && userTableHeightMode.value !== "fixed") {
+        return true;
+      }
+      return attrs.sticky;
+    });
     const tableMaximizedText = computed(() =>
       isTableMaximized.value
         ? t("CustomTable.index.074786-34")
@@ -1948,6 +1977,17 @@ export default defineComponent({
         scheduleTableHeightRecalc();
       });
     };
+    const handleLangChange = (event) => {
+      const newLang = event.newValue;
+      loadLanguageAsync(newLang);
+    };
+    const handlePreferencesChange = () => {
+      userTableHeightMode.value = getUserTableHeightMode();
+      nextTick(() => {
+        setupAutoTableHeightObserver();
+        scheduleTableHeightRecalc();
+      });
+    };
 
     const isVisibleFlowElement = (el) => {
       if (!el || el.nodeType !== 1) {
@@ -2004,7 +2044,7 @@ export default defineComponent({
     };
 
     const isAutoTableHeightSafe = () => {
-      if (!props.autoTableHeight || props.tableHeight) {
+      if (!shouldUseAutoTableHeight.value) {
         return false;
       }
       const rootEl = tableWarpRef.value;
@@ -2080,13 +2120,17 @@ export default defineComponent({
     };
 
     const getTablePaginationHeight = () => {
-      let pagHeight =
-        tableRef.value?.$el.getElementsByClassName("ant-pagination")[0]
-          ?.offsetHeight || 0;
-      if (pagHeight) {
-        pagHeight += 32;
+      const paginationEl =
+        tableRef.value?.$el.getElementsByClassName("ant-pagination")[0];
+      if (!paginationEl) {
+        return 0;
       }
-      return pagHeight;
+      const style = window.getComputedStyle(paginationEl);
+      return (
+        paginationEl.offsetHeight +
+        parseFloat(style.marginTop || 0) +
+        parseFloat(style.marginBottom || 0)
+      );
     };
 
     const getFilterHeight = () => {
@@ -3036,34 +3080,7 @@ export default defineComponent({
           if (!tableEl) {
             return;
           }
-          if (props.tableHeight) {
-            let tTitleHeight = getTableTitleHeight();
-            let tHeaderHeight = getTableHeaderHeight();
-            let tPagHeight = getTablePaginationHeight();
-            let filterHeight = getFilterHeight();
-            if (utils.isEnv()) {
-              console.log(
-                props.tableHeight,
-                tTitleHeight,
-                tHeaderHeight,
-                tPagHeight,
-                tableEl.getElementsByClassName("ant-table-thead")[0],
-                "0000000000000000000"
-              );
-            }
-            let tableScrollHeight =
-              props.tableHeight -
-              tTitleHeight -
-              tHeaderHeight -
-              tPagHeight -
-              filterHeight;
-            tableScrollHeight = Math.max(0, Math.floor(tableScrollHeight));
-            if (state.tableScrollHeight !== tableScrollHeight) {
-              state.tableScrollHeight = tableScrollHeight;
-            }
-            return;
-          }
-          if (props.autoTableHeight && isAutoTableHeightSafe()) {
+          if (shouldUseAutoTableHeight.value && isAutoTableHeightSafe()) {
             const tableTop = tableEl.getBoundingClientRect()?.top || 0;
             const boundaryBottom = getAutoTableHeightBoundaryBottom(tableEl);
             let tableScrollHeight =
@@ -3072,7 +3089,7 @@ export default defineComponent({
               getTableTitleHeight() -
               getTableHeaderHeight() -
               getTablePaginationHeight() -
-              autoTableHeightBottomOffset;
+              props.autoTableHeightBottomOffset;
             tableScrollHeight = Math.max(
               autoTableHeightMinBody,
               Math.ceil(tableScrollHeight)
@@ -4044,22 +4061,6 @@ export default defineComponent({
       return utils.i18nMapShow;
     });
 
-    watch(
-      () => props.tableHeight,
-      () => {
-        setupAutoTableHeightObserver();
-        getTableHeight();
-      }
-    );
-
-    watch(
-      () => props.autoTableHeight,
-      () => {
-        setupAutoTableHeightObserver();
-        scheduleTableHeightRecalc();
-      }
-    );
-
     watch(
       () => [state.filterList.length, isTitleCollapsed.value],
       () => {
@@ -4074,6 +4075,8 @@ export default defineComponent({
       createColumnSlots();
       createButtonIconSlots();
       window.addEventListener("resize", handleResize);
+      window.addEventListener("setBLLang", handleLangChange);
+      window.addEventListener("setBLPreferences", handlePreferencesChange);
       handleResize();
       setupAutoTableHeightObserver();
       scheduleTableHeightRecalc();
@@ -4082,6 +4085,8 @@ export default defineComponent({
 
     onBeforeUnmount(() => {
       window.removeEventListener("resize", handleResize);
+      window.removeEventListener("setBLLang", handleLangChange);
+      window.removeEventListener("setBLPreferences", handlePreferencesChange);
       clearAutoTableHeightObserver();
       if (autoTableHeightRaf.value) {
         cancelAnimationFrame(autoTableHeightRaf.value);
@@ -4147,11 +4152,6 @@ export default defineComponent({
     };*/
     loadLanguageAsync(utils.getLang());
 
-    window.addEventListener("setBLLang", (event) => {
-      const newLang = event.newValue; // 获取新的语言值
-      loadLanguageAsync(newLang);
-    });
-
     const checkOverflow = (e) => {
       const ev = window.event || e;
       const textContent = ev.target;
@@ -4440,6 +4440,7 @@ export default defineComponent({
       shouldShowSecurityHeaderBtn,
       formatFilterTagValueShow,
       isFormatFilterTagValueShow,
+      resolvedSticky,
     };
   },
 });
@@ -4538,4 +4539,12 @@ export default defineComponent({
     text-align: right;
   }
 }
+
+.table-warp {
+  &.antd-pagination-no-mb {
+    :deep(.ant-table-pagination.ant-pagination) {
+      margin-bottom: 0 !important;
+    }
+  }
+}
 </style>