n20-common-lib 2.20.26 → 2.20.28

package/package.json

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

package/src/components/TablePro/index.vue

@@ -47,6 +47,7 @@
       @sort-change="(val) => customSortMethod(val)"
       @filter-change="filterChange"
       @checkbox-change="handleSelectionChange"
+      @cell-click="handleCellClick"
     >
       <template v-for="(item, i) in _columns">
         <slot v-if="item.slotName" :name="item.slotName" :column="item"></slot>
@@ -325,6 +326,56 @@ export default {
       const val1 = this.$refs.vxeTable.getCheckboxReserveRecords()
       this.$emit('selection-change-method', [...val, ...val1], row)
     },
+    // 点击行勾选/取消勾选
+    handleCellClick({ row, column, $event }) {
+      this.$emit('cell-click', { row, column, $event })
+      // 如果点击的是 checkbox 列，不处理（由原生的 checkbox 处理）
+      if (column.type === 'checkbox') {
+        return
+      }
+
+      // 检查点击的目标元素是否是按钮或链接
+      // 需要检测多种按钮类型：
+      // - button: 原生按钮标签
+      // - .el-button: Element UI 按钮组件
+      // - .n20-button: n20 项目按钮组件
+      // - [class*="button"]: 包含 button 类名的元素
+      // - [class*="el-link--inner"]: Element UI 链接组件内部元素
+      // - a[href]: 链接标签
+      const target = $event.target
+      const clickedButton = target.closest(
+        'button, .el-button, .n20-button, [class*="button"], [class*="el-link--inner"], a[href]'
+      )
+
+      // 如果点击的是按钮或链接，不触发行勾选
+      if (clickedButton) {
+        return
+      }
+
+      // 如果 closest 没找到，检查父元素的类名是否包含操作相关的关键词
+      if (!clickedButton && target.parentElement) {
+        const parentClass = target.parentElement.className || ''
+        // 检测父元素是否包含：operate(操作)、btn(按钮)、button(按钮) 等关键词
+        if (parentClass.includes('operate') || parentClass.includes('btn') || parentClass.includes('button')) {
+          return
+        }
+      }
+
+      // 检查该行是否可以被勾选
+      let canCheck = true
+      if (typeof this.forbidSelect === 'function') {
+        const forbidResult = this.forbidSelect({ row })
+        // 只有当 forbidSelect 明确返回 true 时，才禁止勾选
+        canCheck = forbidResult !== true
+      }
+
+      if (canCheck) {
+        // 切换该行的勾选状态
+        this.$refs.vxeTable.toggleCheckboxRow(row)
+        this.key++ // 强制刷新 checkbox 显示
+        this.handleSelectionChange(row)
+      }
+    },
     sizeUp(size) {
       this.sizeC = size
       this.$emit('update:size', size)
@@ -340,20 +391,25 @@ export default {
           _width_: 0
         }
       })
-      const wrapperEl = document.querySelector('div#app')
+
+      // 优先使用表格容器的宽度，如果没有则使用app容器宽度
+      let wrapperEl = this.$refs.vxeTable?.$el
+      if (!wrapperEl) {
+        wrapperEl = document.querySelector('div#app')
+      }
       if (!wrapperEl) {
         return columns
       }
       const { width: windowWidth } = wrapperEl.getBoundingClientRect()
-
+      console.log(windowWidth, 'windowWidth')
       // 定义每个字符的平均宽度（像素）
       const CHAR_WIDTH = 20 // 根据实际字体大小调整
       const PADDING = 20 // 左右padding
 
       function calc(columns) {
-        let columnsWidth = 0
+        // 计算所有列的基础宽度总和
+        let totalBaseWidth = 0
 
-        // 先计算每列的基础宽度
         columns.forEach((column) => {
           if (column.static && column.label === $lc('操作') && !column.width && !column.minWidth) {
             column.width = 80
@@ -368,29 +424,36 @@ export default {
             column.minWidth = Math.ceil(textLength * CHAR_WIDTH + PADDING)
           }
 
-          // 优先使用width，如果width不存在才使用minWidth
-          const width = column.width || column.minWidth
-          column['_width_'] = column['_width_'] || parseInt(width)
-          columnsWidth += column['_width_']
+          // 计算基础宽度：有width的用width，没有的用minWidth
+          const widthValue = column.width || column.minWidth || 0
+          // 处理不同格式的宽度：数字、"100"、"100px"
+          let baseWidth = 0
+          if (typeof widthValue === 'number') {
+            baseWidth = widthValue
+          } else if (typeof widthValue === 'string') {
+            // 提取字符串中的数字部分
+            baseWidth = parseInt(widthValue) || 0
+          }
+          column['_baseWidth_'] = baseWidth
+          totalBaseWidth += baseWidth
         })
 
-        // 如果总宽度超过容器宽度，直接返回
-        if (columnsWidth >= windowWidth) {
+        // 如果所有列的基础宽度总和 >= 容器宽度，不做处理
+        if (totalBaseWidth >= windowWidth) {
           return columns
         }
 
-        // 否则按比例分配剩余空间
-        return columns.map((column) => {
-          if (!column.type) {
-            const rate = column['_width_'] / columnsWidth
-            // 如果column有width，则保持原width不变；如果没有width，则计算新宽度但不小于minWidth
-            if (!column.width) {
-              column['width'] = Math.max(windowWidth * rate, column.minWidth)
-            }
-            return column
+        // 否则，所有列都按比例扩展以撑满容器
+        const scaleRate = windowWidth / totalBaseWidth
+
+        columns.forEach((column) => {
+          if (!column.type && !column.isResize) {
+            // 按比例扩展列宽，向上取整避免小数宽度
+            column.width = Math.ceil(column['_baseWidth_'] * scaleRate)
           }
-          return column
         })
+
+        return columns
       }
 
       return calc(columns)

package/src/components/TableProOperateColumn/index.vue

@@ -1,6 +1,6 @@
 <template>
   <vxe-column :field="$attrs.prop" :title="$attrs.label" v-bind="$attrs">
-    <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="c => $emit(c, row, $index)" />
+    <OperateBtns slot-scope="{ row, $index }" :btn-list="btnList" :row="row" @command="(c) => $emit(c, row, $index)" />
   </vxe-column>
 </template>
 <script>