wkjp-list-page 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "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,11 +449,12 @@ 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: 16 },
+    /** 自动列宽：每字符宽度单位折算像素（12px 字号下，半角字符约8px，全角字符约16px） */
+    columnAutoWidthCharPx: { type: Number, default: 8 },
     /** 自动列宽：单元格左右内边距等额外宽度 */
     columnAutoWidthPadding: { type: Number, default: 32 },
     /** 自动列宽：未写 width / minWidth 时的默认最小宽度（px） */
@@ -459,7 +462,8 @@ export default {
   },
   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,75 @@ 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;
+    },
+    // 判断文本是否需要显示省略号
+    // 中文字符：超过20个字符宽度单位（约10个中文字）
+    // 英文字母/数字：超过40个字符宽度单位（约40个英文字母/数字）
+    shouldShowOverflowTooltip(text) {
+      var str = String(text == null ? "" : text);
+      var fullWidthCount = 0; // 全角字符计数
+      var halfWidthCount = 0; // 半角字符计数
+      
+      for (var i = 0; i < str.length; i++) {
+        var charCode = str.charCodeAt(i);
+        if (
+          (charCode >= 0x4E00 && charCode <= 0x9FFF) || // 中文
+          (charCode >= 0x3000 && charCode <= 0x303F) || // CJK符号和标点
+          (charCode >= 0xFF00 && charCode <= 0xFFEF)    // 全角字符
+        ) {
+          fullWidthCount++;
+        } else {
+          halfWidthCount++;
+        }
+      }
+      
+      // 计算总宽度单位：全角字符*2 + 半角字符*1
+      var totalWidth = fullWidthCount * 2 + halfWidthCount;
+      
+      // 如果包含全角字符，使用20个宽度单位的阈值
+      // 如果只有半角字符，使用40个宽度单位的阈值
+      var threshold = fullWidthCount > 0 ? 20 : 40;
+      
+      return totalWidth > threshold;
+    },
+    // 根据字符类型获取动态阈值
+    getDynamicThreshold(text) {
+      var str = String(text == null ? "" : text);
+      var fullWidthCount = 0; // 全角字符计数
+      
+      for (var i = 0; i < str.length; i++) {
+        var charCode = str.charCodeAt(i);
+        if (
+          (charCode >= 0x4E00 && charCode <= 0x9FFF) || // 中文
+          (charCode >= 0x3000 && charCode <= 0x303F) || // CJK符号和标点
+          (charCode >= 0xFF00 && charCode <= 0xFFEF)    // 全角字符
+        ) {
+          fullWidthCount++;
+        }
+      }
+      
+      // 如果包含全角字符，使用20个宽度单位的阈值
+      // 如果只有半角字符，使用40个宽度单位的阈值
+      return fullWidthCount > 0 ? 20 : 40;
     },
     columnOverflowThreshold() {
       var n = Number(this.columnOverflowTooltipChars);
@@ -756,6 +840,40 @@ export default {
       }
       return Math.max(labelLen, maxCell);
     },
+    /** 获取列中最长内容的字符串 */
+    getColumnMaxContentText(col) {
+      var labelText = (col && (col.label || col.prop || col.slot)) || "";
+      var maxText = labelText;
+      var maxLength = this.textDisplayLength(labelText);
+      
+      if (col && col.children && col.children.length) {
+        // 对于嵌套列，返回子列中最长的内容
+        for (var c = 0; c < col.children.length; c++) {
+          var childText = this.getColumnMaxContentText(col.children[c]);
+          var childLength = this.textDisplayLength(childText);
+          if (childLength > maxLength) {
+            maxText = childText;
+            maxLength = childLength;
+          }
+        }
+        return maxText;
+      }
+      
+      if (!col || col.type === "slot" || this.isBuiltinCellColumn(col)) {
+        return labelText;
+      }
+      
+      var rows = this.innerTableData || [];
+      for (var i = 0; i < rows.length; i++) {
+        var text = this.resolveCellText(col, rows[i], i);
+        var textLength = this.textDisplayLength(text);
+        if (textLength > maxLength) {
+          maxText = text;
+          maxLength = textLength;
+        }
+      }
+      return maxText;
+    },
     resolveAutoColumnLayout(col) {
       if (!col) return {};
       if (col.children && col.children.length) {
@@ -765,6 +883,36 @@ export default {
         return nestedLayout;
       }
       
+      // 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
+        // 对于 slot 列，我们只检查用户是否显式设置了 showOverflowTooltip
+        // 因为 slot 列的内容是自定义的，无法自动判断是否需要省略号
+        if (col.showOverflowTooltip === true) {
+          slotLayout.showOverflowTooltip = true;
+        }
+        return slotLayout;
+      }
+      
       // 获取表头和内容的最大字符长度
       var maxLen = this.getColumnMaxContentLength(col);
       var threshold = this.columnOverflowThreshold();
@@ -776,8 +924,14 @@ export default {
       if (!Number.isFinite(pad) || pad < 0) pad = 32;
       
       // 计算内容宽度（像素）
-      // 如果内容超过阈值，使用阈值计算宽度（显示省略号）
-      var widthChars = maxLen > threshold ? threshold : Math.max(maxLen, 1);
+      // 获取最长内容的字符串来判断应该使用哪个阈值
+      var maxContentText = this.getColumnMaxContentText(col);
+      var shouldShowTooltip = this.shouldShowOverflowTooltip(maxContentText);
+      
+      // 根据字符类型动态调整阈值
+      // 如果应该显示省略号，使用动态阈值计算宽度
+      var dynamicThreshold = this.getDynamicThreshold(maxContentText);
+      var widthChars = shouldShowTooltip ? dynamicThreshold : Math.max(maxLen, 1);
       var contentWidthPx = Math.ceil(widthChars * charPx + pad);
       
       // 获取用户设置的 minWidth（如果有）
@@ -806,9 +960,12 @@ export default {
       if (col.width != null && col.width !== "") {
         var userWidth = Number(col.width);
         if (Number.isFinite(userWidth) && userWidth > 0) {
+          // 获取最长内容的字符串来判断是否需要显示省略号
+          var maxContentText = this.getColumnMaxContentText(col);
+          var shouldShowTooltip = this.shouldShowOverflowTooltip(maxContentText) || col.showOverflowTooltip === true;
           return {
             width: userWidth,
-            showOverflowTooltip: maxLen > threshold || col.showOverflowTooltip === true
+            showOverflowTooltip: shouldShowTooltip
           };
         }
       }
@@ -818,7 +975,10 @@ export default {
       };
       
       // 判断是否需要显示 tooltip
-      if (maxLen > threshold || col.showOverflowTooltip === true) {
+      // 获取最长内容的字符串来判断是否需要显示省略号
+      var maxContentText = this.getColumnMaxContentText(col);
+      var shouldShowTooltip = this.shouldShowOverflowTooltip(maxContentText) || col.showOverflowTooltip === true;
+      if (shouldShowTooltip) {
         layout.showOverflowTooltip = true;
       }