bl-common-vue3 3.8.118 → 3.8.119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.118",
+  "version": "3.8.119",
   "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/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"
@@ -1615,14 +1616,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 +1929,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 +1965,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 +2032,7 @@ export default defineComponent({
     };
 
     const isAutoTableHeightSafe = () => {
-      if (!props.autoTableHeight || props.tableHeight) {
+      if (!shouldUseAutoTableHeight.value) {
         return false;
       }
       const rootEl = tableWarpRef.value;
@@ -2080,13 +2108,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 +3068,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 +3077,7 @@ export default defineComponent({
               getTableTitleHeight() -
               getTableHeaderHeight() -
               getTablePaginationHeight() -
-              autoTableHeightBottomOffset;
+              props.autoTableHeightBottomOffset;
             tableScrollHeight = Math.max(
               autoTableHeightMinBody,
               Math.ceil(tableScrollHeight)
@@ -4044,22 +4049,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 +4063,8 @@ export default defineComponent({
       createColumnSlots();
       createButtonIconSlots();
       window.addEventListener("resize", handleResize);
+      window.addEventListener("setBLLang", handleLangChange);
+      window.addEventListener("setBLPreferences", handlePreferencesChange);
       handleResize();
       setupAutoTableHeightObserver();
       scheduleTableHeightRecalc();
@@ -4082,6 +4073,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 +4140,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 +4428,7 @@ export default defineComponent({
       shouldShowSecurityHeaderBtn,
       formatFilterTagValueShow,
       isFormatFilterTagValueShow,
+      resolvedSticky,
     };
   },
 });
@@ -4538,4 +4527,12 @@ export default defineComponent({
     text-align: right;
   }
 }
+
+.table-warp {
+  &.antd-pagination-no-mb {
+    :deep(.ant-table-pagination.ant-pagination) {
+      margin-bottom: 0 !important;
+    }
+  }
+}
 </style>