wkjp-list-page 1.0.33 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "Vue2 + ElementUI CommonListPage component",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/components/CommonListPage.vue

@@ -93,13 +93,13 @@
           @change="(val) => handleDateFieldChange(item, val)"
         />
       </el-form-item>
-      <el-form-item v-if="searchCollapseActive && !searchExpanded" class="common-list-page__search-toggle">
-        <el-button type="text" class="common-list-page__search-toggle-btn" @click="searchExpanded = true">
+      <el-form-item v-if="searchCollapseActive && !internalSearchExpanded" class="common-list-page__search-toggle">
+        <el-button type="text" class="common-list-page__search-toggle-btn" @click="toggleSearchExpanded(true)">
           {{ expandSearchText }}
         </el-button>
       </el-form-item>
-      <el-form-item v-if="searchCollapseActive && searchExpanded" class="common-list-page__search-toggle">
-        <el-button type="text" class="common-list-page__search-toggle-btn" @click="searchExpanded = false">
+      <el-form-item v-if="searchCollapseActive && internalSearchExpanded" class="common-list-page__search-toggle">
+        <el-button type="text" class="common-list-page__search-toggle-btn" @click="toggleSearchExpanded(false)">
           {{ foldSearchText }}
         </el-button>
       </el-form-item>
@@ -426,8 +426,10 @@ export default {
     collapseSearch: { type: Boolean, default: undefined },
     /** 折叠时默认展示的查询项条数；未传时按 **6**；显式传 ≤0 表示不折叠 */
     searchVisibleMax: { type: Number, default: null },
+    /** 搜索区是否展开，支持 .sync 修饰符进行双向绑定，默认 true（展开状态） */
+    searchExpanded: { type: Boolean, default: true },
     expandSearchText: { type: String, default: "展开查询" },
-    foldSearchText: { type: String, default: "收起" },
+    foldSearchText: { type: String, default: "收起查询" },
     /** 为 true 且传入 `export-api` 时，在搜索区右侧显示内置导出按钮（基于 `exportFile`） */
     showExport: { type: Boolean, default: false },
     /**
@@ -447,19 +449,21 @@ export default {
     exportMaxLimit: { type: Number, default: null },
     /**
      * 未在列上写 `width` / `minWidth` 时，按表头与当前页单元格内容估算列宽；
-     * 内容最长超过该字符数则固定按该字数算宽并开启 `showOverflowTooltip`。
+     * 内容最长超过该字符宽度单位数则固定按该宽度算宽并开启 `showOverflowTooltip`。
+     * 注：中文字符宽度为2，英文字母和数字宽度为1。
      */
     columnOverflowTooltipChars: { type: Number, default: 20 },
-    /** 自动列宽：每字符折算像素（12px 字号下约 12～14） */
-    columnAutoWidthCharPx: { type: Number, default: 14 },
+    /** 自动列宽：每字符宽度单位折算像素（12px 字号下，半角字符约8px，全角字符约16px） */
+    columnAutoWidthCharPx: { type: Number, default: 8 },
     /** 自动列宽：单元格左右内边距等额外宽度 */
-    columnAutoWidthPadding: { type: Number, default: 24 },
+    columnAutoWidthPadding: { type: Number, default: 32 },
     /** 自动列宽：未写 width / minWidth 时的默认最小宽度（px） */
-    columnAutoMinWidth: { type: Number, default: 100 }
+    columnAutoMinWidth: { type: Number, default: 120 }
   },
   data() {
     return {
-      searchExpanded: false,
+      // searchExpanded 现在作为 prop 传入，这里只用于内部状态管理
+      internalSearchExpanded: this.searchExpanded,
       innerLoading: false,
       innerTableData: [],
       innerPagination: {
@@ -597,7 +601,7 @@ export default {
     displaySearchOption() {
       var max = this.effectiveSearchVisibleMax;
       var list = this.visibleSearchOptionList;
-      if (!this.searchCollapseActive || this.searchExpanded) {
+      if (!this.searchCollapseActive || this.internalSearchExpanded) {
         return list;
       }
       return list.slice(0, max);
@@ -660,16 +664,23 @@ export default {
         var len = Array.isArray(list) ? list.length : 0;
         var max = this.effectiveSearchVisibleMax;
         if (!this.searchCollapseEnabled || max == null || len <= max) {
-          this.searchExpanded = false;
+          this.toggleSearchExpanded(false);
         }
       },
       deep: true
     },
     searchVisibleMax() {
-      this.searchExpanded = false;
+      this.toggleSearchExpanded(false);
     },
     collapseSearch(val) {
-      if (val === false) this.searchExpanded = false;
+      if (val === false) this.toggleSearchExpanded(false);
+    },
+    // 监听 searchExpanded prop 的变化，同步到内部状态
+    searchExpanded: {
+      immediate: true,
+      handler(val) {
+        this.internalSearchExpanded = val;
+      }
     },
     columns: {
       immediate: true,
@@ -718,6 +729,11 @@ export default {
     forwardSelectionChange(selection) {
       this.$emit("selection-change", selection);
     },
+    toggleSearchExpanded(expanded) {
+      this.internalSearchExpanded = expanded;
+      // 使用 .sync 修饰符更新父组件的值
+      this.$emit("update:searchExpanded", expanded);
+    },
     isBuiltinCellColumn(col) {
       return col && ["selection", "index", "expand"].indexOf(col.type) !== -1;
     },
@@ -729,7 +745,25 @@ export default {
       return true;
     },
     textDisplayLength(text) {
-      return String(text == null ? "" : text).length;
+      var str = String(text == null ? "" : text);
+      var length = 0;
+      for (var i = 0; i < str.length; i++) {
+        var charCode = str.charCodeAt(i);
+        // 判断字符是否为全角字符（中文字符、日文、韩文等）
+        // 全角字符范围：0x4E00-0x9FFF（CJK统一表意文字）
+        // 0x3000-0x303F（CJK符号和标点）
+        // 0xFF00-0xFFEF（全角ASCII、全角标点等）
+        if (
+          (charCode >= 0x4E00 && charCode <= 0x9FFF) || // 中文
+          (charCode >= 0x3000 && charCode <= 0x303F) || // CJK符号和标点
+          (charCode >= 0xFF00 && charCode <= 0xFFEF)    // 全角字符
+        ) {
+          length += 2; // 全角字符宽度为2
+        } else {
+          length += 1; // 半角字符宽度为1
+        }
+      }
+      return length;
     },
     columnOverflowThreshold() {
       var n = Number(this.columnOverflowTooltipChars);
@@ -764,34 +798,92 @@ export default {
         if (col.minWidth != null && col.minWidth !== "") nestedLayout.minWidth = col.minWidth;
         return nestedLayout;
       }
-      var hasWidth = col.width != null && col.width !== "";
-      var hasMinWidth = col.minWidth != null && col.minWidth !== "";
-      if (hasWidth || hasMinWidth) {
-        if (col.showOverflowTooltip !== undefined && col.showOverflowTooltip !== null) {
-          return {};
+      
+      // slot 列不参与自动宽度计算，直接使用配置的宽度或最小宽度
+      if (col.type === "slot") {
+        var slotLayout = {};
+        if (col.width != null && col.width !== "") {
+          var userWidth = Number(col.width);
+          if (Number.isFinite(userWidth) && userWidth > 0) {
+            slotLayout.width = userWidth;
+          }
+        }
+        if (col.minWidth != null && col.minWidth !== "") {
+          var userMinWidth = Number(col.minWidth);
+          if (Number.isFinite(userMinWidth) && userMinWidth > 0) {
+            slotLayout.minWidth = userMinWidth;
+          }
+        }
+        // 如果既没有设置 width 也没有设置 minWidth，使用默认最小宽度
+        if (!slotLayout.width && !slotLayout.minWidth) {
+          var defaultMinW = Number(this.columnAutoMinWidth);
+          if (!Number.isFinite(defaultMinW) || defaultMinW <= 0) defaultMinW = 120;
+          slotLayout.minWidth = defaultMinW;
+        }
+        // slot 列可以设置 showOverflowTooltip
+        if (col.showOverflowTooltip === true) {
+          slotLayout.showOverflowTooltip = true;
         }
-        var maxLenExplicit = this.getColumnMaxContentLength(col);
-        return maxLenExplicit > this.columnOverflowThreshold()
-          ? { showOverflowTooltip: true }
-          : {};
+        return slotLayout;
       }
+      
+      // 获取表头和内容的最大字符长度
       var maxLen = this.getColumnMaxContentLength(col);
       var threshold = this.columnOverflowThreshold();
-      var widthChars = maxLen > threshold ? threshold : Math.max(maxLen, 1);
+      
+      // 计算基于内容的宽度（字符数转像素）
       var charPx = Number(this.columnAutoWidthCharPx);
       var pad = Number(this.columnAutoWidthPadding);
-      if (!Number.isFinite(charPx) || charPx <= 0) charPx = 14;
-      if (!Number.isFinite(pad) || pad < 0) pad = 24;
-      var minW = Number(this.columnAutoMinWidth);
-      if (!Number.isFinite(minW) || minW <= 0) minW = 100;
+      if (!Number.isFinite(charPx) || charPx <= 0) charPx = 16;
+      if (!Number.isFinite(pad) || pad < 0) pad = 32;
+      
+      // 计算内容宽度（像素）
+      // 如果内容超过阈值，使用阈值计算宽度（显示省略号）
+      var widthChars = maxLen > threshold ? threshold : Math.max(maxLen, 1);
+      var contentWidthPx = Math.ceil(widthChars * charPx + pad);
+      
+      // 获取用户设置的 minWidth（如果有）
+      var userMinWidth = null;
+      if (col.minWidth != null && col.minWidth !== "") {
+        userMinWidth = Number(col.minWidth);
+        if (!Number.isFinite(userMinWidth) || userMinWidth <= 0) {
+          userMinWidth = null;
+        }
+      }
+      
+      // 获取默认的最小宽度
+      var defaultMinW = Number(this.columnAutoMinWidth);
+      if (!Number.isFinite(defaultMinW) || defaultMinW <= 0) defaultMinW = 120;
+      
+      // 计算最终的最小宽度：max(用户设置的minWidth, 默认minWidth, 内容宽度)
+      var finalMinWidth = Math.max(
+        defaultMinW,
+        contentWidthPx
+      );
+      if (userMinWidth !== null) {
+        finalMinWidth = Math.max(finalMinWidth, userMinWidth);
+      }
+      
+      // 如果用户设置了 width，则使用 width（优先级最高）
+      if (col.width != null && col.width !== "") {
+        var userWidth = Number(col.width);
+        if (Number.isFinite(userWidth) && userWidth > 0) {
+          return {
+            width: userWidth,
+            showOverflowTooltip: maxLen > threshold || col.showOverflowTooltip === true
+          };
+        }
+      }
+      
       var layout = {
-        minWidth: Math.max(minW, Math.ceil(widthChars * charPx + pad))
+        minWidth: finalMinWidth
       };
-      if (maxLen > threshold) {
-        layout.showOverflowTooltip = true;
-      } else if (col.showOverflowTooltip === true) {
+      
+      // 判断是否需要显示 tooltip
+      if (maxLen > threshold || col.showOverflowTooltip === true) {
         layout.showOverflowTooltip = true;
       }
+      
       return layout;
     },
     tableColumnBind(col) {
@@ -1962,7 +2054,9 @@ export default {
   line-height: 1.5;
   padding-left: 10px !important;
   padding-right: 10px !important;
-  word-break: break-word;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* 操作列：多个文字按钮拉开间距（详情 / 推送 / 删除 等） */