n20-common-lib 3.0.78 → 3.0.79

package/src/components/v3/TablePro/index.vue

@@ -263,6 +263,25 @@
           </template>
         </vxe-column>
       </template>
+      <!-- 固定操作列 -->
+      <vxe-column
+        v-if="isOperateFixed && btnList && btnList.length > 0"
+        :title="$lc('操作')"
+        field="__operate__"
+        :width="operateColumnWidth"
+        fixed="right"
+        align="center"
+      >
+        <template #header>
+          <div class="flex-box flex-v flex-c">
+            {{ $lc('操作') }}
+            <i class="v3-icon-unlock vxe-table--column__icon m-l-ss pointer" @click.stop="unfixOperateColumn"></i>
+          </div>
+        </template>
+        <template #default="{ row, $rowIndex }">
+          <OperateBtns :btn-list="btnList" :row="row" @command="(c) => handleOperateCommand(c, row, $rowIndex)" />
+        </template>
+      </vxe-column>
       <template #empty>
         <slot name="empty">
           <empty type="noData" :content="$lc('暂无数据')" :height="100" :width="100" />
@@ -273,17 +292,20 @@
     <tableOperate
       :show-column="showColumn"
       :show-setsize="showSetsize"
+      :show-pin-btn="btnList && btnList.length > 0"
+      :is-operate-fixed="isOperateFixed"
       :size="sizeC"
       v-bind="$attrs"
       @update:size="sizeUp"
       @resize="sizeSet"
       @toggle-expand="toggleExpand"
+      @toggle-operate-fixed="handleToggleOperateFixed"
       @visible-column="dialogVisible = !dialogVisible"
     />
     <!-- 操作列的悬浮按钮组 -->
     <transition name="hover-btns-fade">
       <div
-        v-if="showHoverBtns && visibleHoverBtns.length > 0"
+        v-if="showHoverBtns && visibleHoverBtns.length > 0 && !isOperateFixed"
         class="table-hover-btns"
         :style="hoverBtnsStyle"
         @mouseenter="handleBtnGroupEnter"
@@ -350,6 +372,7 @@
 import empty from '../../Empty'
 import tableOperate from '../../TableOperate/index.vue'
 import tableShowColumn from '../../ShowColumn/index.vue'
+import OperateBtns from '../../TableProOperateColumn/OperateBtns.vue'
 
 import { $lc } from '../../../utils/i18n/index.js'
 
@@ -373,7 +396,8 @@ export default {
     tableOperate,
     tableShowColumn,
     empty,
-    renderer
+    renderer,
+    OperateBtns
   },
   props: {
     scrollY: {
@@ -541,6 +565,7 @@ export default {
       hoverHideTimer: null, // 隐藏延迟定时器
       isHoverOnBtnGroup: false, // 鼠标是否在按钮组上
       isDropdownVisible: false, // "更多"下拉菜单是否展开
+      isOperateFixed: true, // 操作按钮是否固定为列模式
       hoverHeaderProp: null, // 当前悬停表头列的 prop
       hoverIconKey: null, // 当前悬停的静态列头图标标识
       isExpand: false,
@@ -597,6 +622,10 @@ export default {
       const hasExpand = this.$attrs.treeConfig || this.$attrs['tree-config']
       const activeCount = [this.showColumn, this.showSetsize, hasExpand].filter(Boolean).length
       return activeCount === 3 ? 112 : 76
+    },
+    // 固定操作列宽度
+    operateColumnWidth() {
+      return 180
     }
   },
   watch: {
@@ -704,6 +733,32 @@ export default {
       // 手动触发 colsKey 刷新，让 vxe-table 重新渲染列配置
       this.colsKey = this.colsKey + 1
     },
+    // 固定操作列为内联列
+    fixOperateColumn() {
+      this.isOperateFixed = true
+      this.hideHoverBtns()
+      this.colsKey = this.colsKey + 1
+      this.$emit('operate-fixed-change', true)
+    },
+    // 取消固定，切换回悬浮按钮组
+    unfixOperateColumn() {
+      this.isOperateFixed = false
+      this.colsKey = this.colsKey + 1
+      this.$emit('operate-fixed-change', false)
+    },
+    // 处理固定操作列的按钮事件
+    handleOperateCommand(command, row, rowIndex) {
+      this.$emit(command, row, rowIndex)
+      this.$emit('hover-btn-click', { btn: { command }, row, rowIndex })
+    },
+    // 处理 tableOperate 固定/取消固定切换
+    handleToggleOperateFixed(fixed) {
+      if (fixed) {
+        this.fixOperateColumn()
+      } else {
+        this.unfixOperateColumn()
+      }
+    },
     // 判断按鈕是否显示
     hasBtn(isHas, row) {
       if (isHas === undefined || isHas === null) {
@@ -955,8 +1010,8 @@ export default {
     },
     // 鼠标进入单元格事件（防抖处理）
     handleCellMouseEnter({ row, rowIndex, $rowIndex, $event }) {
-      // 如果没有配置悬浮按钮，不处理
-      if (!this.btnList || this.btnList.length === 0) {
+      // 如果没有配置悬浮按钮，或已固定为列模式，不处理
+      if (!this.btnList || this.btnList.length === 0 || this.isOperateFixed) {
         return
       }
       // 清理隐藏定时器
@@ -979,8 +1034,8 @@ export default {
     },
     // 鼠标离开单元格事件（防抖处理）
     handleCellMouseLeave({ row, rowIndex, $event }) {
-      // 如果没有配置悬浮按钮，不处理
-      if (!this.btnList || this.btnList.length === 0) {
+      // 如果没有配置悬浮按钮，或已固定为列模式，不处理
+      if (!this.btnList || this.btnList.length === 0 || this.isOperateFixed) {
         return
       }
       // 清理显示定时器
@@ -1176,8 +1231,8 @@ export default {
         return column
       })
 
-      // 悬浮按钮：给最后一列预留按钮组空间
-      if (this.btnList?.length && calcColumns.length > 0) {
+      // 悬浮按钮：给最后一列预留按钮组空间（固定模式下不需要）
+      if (!this.isOperateFixed && this.btnList?.length && calcColumns.length > 0) {
         const lastColumn = calcColumns[calcColumns.length - 1]
         const baseWidth = lastColumn._baseWidth_ || 0
         if (baseWidth <= HOVER_BTNS_WIDTH) {