n20-common-lib 3.0.29 → 3.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "n20-common-lib",
-  "version": "3.0.29",
+  "version": "3.0.31",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/TablePro/index.vue

@@ -57,6 +57,7 @@
       @cell-mouseenter="handleCellMouseEnter"
       @cell-mouseleave="handleCellMouseLeave"
       @scroll="handleTableScroll"
+      @toggle-tree-expand="syncExpandState"
     >
       <template v-for="(item, i) in _columns">
         <slot v-if="item.slotName" :name="item.slotName" :column="item"></slot>
@@ -196,24 +197,34 @@
           </template>
         </vxe-column>
       </template>
-      <vxe-column
-        fixed="right"
-        header-class-name="fixed-column__static"
-        :min-width="showColumn && showSetsize ? 80 : 50"
-      >
-        <div slot="header">
-          <i
-            v-if="showColumn"
-            v-title="$lc('设置显示列')"
-            class="v3-icon-system-solution pointer"
-            @click="$emit('visible-column')"
-          ></i>
-          <tableSetSize v-if="showSetsize" :size="sizeC" v-bind="$attrs" @update:size="sizeUp" @resize="sizeSet" />
-        </div>
+      <vxe-column fixed="right" header-class-name="fixed-column__static" :min-width="clacStaticColumnWidth">
+        <template #header>
+          <div class="flex-box flex-v flex-c">
+            <i
+              v-if="showColumn"
+              v-title="$lc('设置显示列')"
+              class="v3-icon-system-solution pointer"
+              :class="hoverIconKey === 'showColumn' ? 'color-primary' : ''"
+              @mouseenter="hoverIconKey = 'showColumn'"
+              @mouseleave="hoverIconKey = null"
+              @click="$emit('visible-column')"
+            ></i>
+            <tableSetSize v-if="showSetsize" :size="sizeC" v-bind="$attrs" @update:size="sizeUp" @resize="sizeSet" />
+            <i
+              v-if="$attrs.treeConfig || $attrs['tree-config']"
+              v-title="!isExpand ? $lc('展开分组') : $lc('折叠分组')"
+              class="pointer"
+              :class="[isExpand ? 'v3-icon-group-collapse' : 'v3-icon-group-expand', hoverIconKey === 'toggleExpand' ? 'color-primary' : '']"
+              @mouseenter="hoverIconKey = 'toggleExpand'"
+              @mouseleave="hoverIconKey = null"
+              @click="toggleExpand"
+            ></i>
+          </div>
+        </template>
       </vxe-column>
       <template #empty>
         <slot name="empty">
-          <empty type="empty" :content="$lc('暂无数据')" :height="200" :width="200" />
+          <empty type="noData" :content="$lc('暂无数据')" :height="200" :width="200" />
         </slot>
       </template>
     </vxe-table>
@@ -429,7 +440,9 @@ export default {
       hoverHideTimer: null, // 隐藏延迟定时器
       isHoverOnBtnGroup: false, // 鼠标是否在按钮组上
       isDropdownVisible: false, // "更多"下拉菜单是否展开
-      hoverHeaderProp: null // 当前悬停表头列的 prop
+      hoverHeaderProp: null, // 当前悬停表头列的 prop
+      hoverIconKey: null, // 当前悬停的静态列头图标标识
+      isExpand: false
     }
   },
   computed: {
@@ -474,6 +487,12 @@ export default {
         right: 0, // 固定在右侧设置列按钮左边
         height: `${this.hoverBtnsPosition.height}px`
       }
+    },
+    // 计算列宽
+    clacStaticColumnWidth() {
+      const hasExpand = this.$attrs.expandConfig || this.$attrs['expand-config']
+      const activeCount = [this.showColumn, this.showSetsize, hasExpand].filter(Boolean).length
+      return activeCount === 3 ? 100 : activeCount === 2 ? 80 : 50
     }
   },
   watch: {
@@ -499,6 +518,38 @@ export default {
     this.clearHoverTimers()
   },
   methods: {
+    /**
+     * 一键展开/折叠表格树形行（仅处理第一层级数据行）
+     * 通过 vxe-table 的 setTreeExpand API 批量设置顶层行的展开状态，
+     * await Promise 完成后再同步 isExpand 状态，保证图标与实际展开状态一致
+     * 不直接操作 DOM，不影响排序、筛选等原有逻辑
+     * @returns {Promise<void>}
+     */
+    async toggleExpand() {
+      const $table = this.$refs.vxeTable
+      if (!$table) return
+      // 仅取顶层数据行（data prop 中的第一层，不包含子级）
+      const topLevelRows = this.data || []
+      if (topLevelRows.length === 0) return
+      // 切换展开状态：当前已展开则折叠，当前已折叠则展开
+      const nextExpand = !this.isExpand
+      // setTreeExpand 返回 Promise，await 确保展开动作完成后再更新图标状态
+      await $table.setTreeExpand(topLevelRows, nextExpand)
+      this.isExpand = nextExpand
+    },
+    /**
+     * 同步单行手动展开/折叠后的图标状态
+     * 监听 vxe-table toggle-tree-expand 事件，根据当前所有顶层行展开情况更新 isExpand
+     * @param {Object} expandRecords - vxe-table 当前所有已展开的行记录
+     * @returns {void}
+     */
+    syncExpandState({ expandRecords }) {
+      const topLevelRows = this.data || []
+      if (topLevelRows.length === 0) return
+      // 若顶层行全部处于展开状态则认为是"已展开"，否则为"未全部展开"
+      const expandSet = new Set(expandRecords)
+      this.isExpand = topLevelRows.every((row) => expandSet.has(row))
+    },
     // 锁定列：将该列 fixed 设为 'left'，直接修改 prop 对象并刷新表格
     lockColumn(item) {
       if (item.fixed || item.static) return

package/src/components/TableSetSize/index.vue

@@ -1,6 +1,12 @@
 <template>
   <el-dropdown @command="setSize">
-    <i v-title="$lc('行高')" class="v3-icon-line-height pointer"></i>
+    <i
+      v-title="$lc('行高')"
+      class="v3-icon-line-height pointer"
+      :class="hoverIconKey === 'height' ? 'color-primary' : ''"
+      @mouseenter="hoverIconKey = 'height'"
+      @mouseleave="hoverIconKey = null"
+    ></i>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="small">{{ _lang === 'zh' ? '默认' : 'small' }}</el-dropdown-item>
       <el-dropdown-item command="mini">{{ _lang === 'zh' ? '紧凑' : 'mini' }}</el-dropdown-item>
@@ -36,7 +42,8 @@ export default {
   data() {
     let _this = this
     return {
-      sizeC: localStorage.getItem('table-size') || _this.size
+      sizeC: localStorage.getItem('table-size') || _this.size,
+      hoverIconKey: null
     }
   },
   watch: {