wkjp-list-page 1.0.34 → 1.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wkjp-list-page",
-  "version": "1.0.34",
+  "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,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,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);
@@ -765,6 +799,34 @@ 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
+        if (col.showOverflowTooltip === true) {
+          slotLayout.showOverflowTooltip = true;
+        }
+        return slotLayout;
+      }
+      
       // 获取表头和内容的最大字符长度
       var maxLen = this.getColumnMaxContentLength(col);
       var threshold = this.columnOverflowThreshold();