From dd27069b4c76a443f07d716c7a27d4620b681b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <2178503051@qq.com>
Date: Sat, 18 Apr 2026 10:23:24 +0800
Subject: [PATCH] =?UTF-8?q?feat(KLPTable):=20=E5=A2=9E=E5=BC=BA=E6=B5=AE?=
 =?UTF-8?q?=E5=B1=82=E7=BB=84=E4=BB=B6=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E8=A1=A8=E6=A0=BC=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为浮层组件添加列数配置和排除列功能
- 优化浮层位置计算逻辑，防止超出视窗边界
- 调整表格列显示，移除不必要列并添加净重列
- 更新浮层样式，支持网格布局和响应式显示
- 扩展浮层配置项，支持更多自定义选项
---
 .../KLPUI/KLPTable/FloatLayer/index.vue       | 62 ++++++++++++++++---
 .../src/components/KLPUI/KLPTable/index.vue   | 24 +++++--
 klp-ui/src/views/wms/coil/panels/base.vue     | 29 ++++-----
 3 files changed, 87 insertions(+), 28 deletions(-)

diff --git a/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue b/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue
index 7f58ca9a..893e7c90 100644
--- a/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPTable/FloatLayer/index.vue
@@ -2,7 +2,7 @@
   <transition name="el-fade-in-linear">
     <div v-if="tooltipVisible && data" class="row-tooltip" :style="adjustedTooltipStyle" ref="rowTooltip">
       <slot>
-        <div class="tooltip-list">
+        <div class="tooltip-list" :style="{ gridTemplateColumns: `repeat(${columnCount}, 1fr)` }">
           <div class="tooltip-item" v-for="field in visibleColumns" :key="field.prop">
             <span class="label">{{ field.label }}：</span>
             <span class="value">{{ formatTooltipValue(data, field) }}</span>
@@ -21,6 +21,10 @@ export default {
       type: Array,
       default: () => []
     },
+    columnCount: {
+      type: Number,
+      default: 2
+    },
     data: {
       type: Object,
       default: () => ({})
@@ -45,15 +49,34 @@ export default {
       const tooltipRect = this.$refs.rowTooltip?.getBoundingClientRect();
       if (!tooltipRect) return this.tooltipStyle;
 
-      // 检查是否超出底部边界
-      if (parseInt(top) + tooltipRect.height > window.innerHeight) {
-        return { ...this.tooltipStyle, top: `${window.innerHeight - tooltipRect.height - 12}px` };
+      let adjustedTop = parseInt(top);
+      let adjustedLeft = parseInt(left);
+      const offset = 16;
+
+      // 检查是否超出底部边界 - 如果超出，将浮层显示在鼠标上方
+      if (adjustedTop + tooltipRect.height > window.innerHeight) {
+        adjustedTop = adjustedTop - tooltipRect.height - offset;
       }
-      // 检查是否超出右侧边界
-      if (parseInt(left) + tooltipRect.width > window.innerWidth) {
-        return { ...this.tooltipStyle, left: `${window.innerWidth - tooltipRect.width - 16}px` };
+
+      // 检查是否超出右侧边界 - 如果超出，将浮层显示在鼠标左侧
+      if (adjustedLeft + tooltipRect.width > window.innerWidth) {
+        adjustedLeft = adjustedLeft - tooltipRect.width - offset;
       }
-      return this.tooltipStyle;
+
+      // 检查是否超出顶部边界
+      if (adjustedTop < 0) {
+        adjustedTop = offset;
+      }
+
+      // 检查是否超出左侧边界
+      if (adjustedLeft < 0) {
+        adjustedLeft = offset;
+      }
+
+      return {
+        top: `${adjustedTop}px`,
+        left: `${adjustedLeft}px`
+      };
     }
   },
   methods: {
@@ -98,9 +121,28 @@ export default {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   padding: 12px 14px;
   pointer-events: none;
-  z-index: 5;
-  /* max-height: 70%; */
+  z-index: 9999;
   overflow: auto;
   transition: all 0.3s ease-in-out;
 }
+
+.tooltip-list {
+  display: grid;
+  gap: 8px;
+}
+
+.tooltip-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.tooltip-item .label {
+  flex-shrink: 0;
+  color: #666;
+}
+
+.tooltip-item .value {
+  color: #333;
+  word-break: break-word;
+}
 </style>
\ No newline at end of file
diff --git a/klp-ui/src/components/KLPUI/KLPTable/index.vue b/klp-ui/src/components/KLPUI/KLPTable/index.vue
index 180f77cd..c2e8d59d 100644
--- a/klp-ui/src/components/KLPUI/KLPTable/index.vue
+++ b/klp-ui/src/components/KLPUI/KLPTable/index.vue
@@ -18,7 +18,7 @@
           <slot name="append" v-bind="scope"></slot>
         </template>
 
-        <!-- 3. 透传“自定义列”插槽（直接接收<el-table-column> 嵌套的情况） -->
+        <!-- 3. 透传"自定义列"插槽（直接接收<el-table-column> 嵌套的情况） -->
         <slot v-bind:tableRef="tableRef"></slot>
 
         <el-table-column v-if="selectionColumn" type="selection" width="55" align="center"></el-table-column>
@@ -27,7 +27,7 @@
       </el-table>
       <!-- 浮层组件 -->
       <KLPTableFloatLayer v-if="floatLayer" :columns="floatLayerColumns" :data="hoveredRow" :tooltipVisible="tooltipVisible"
-        :tooltipStyle="tooltipStyle" />
+        :tooltipStyle="tooltipStyle" :columnCount="floatLayerColumnCount" />
     </div>
     <!-- 扩展层：可后续统一添加分页（如与 MyPagination 组件联动） -->
     <slot name="pagination"></slot>
@@ -78,7 +78,9 @@ export default {
       type: Object,
       default: () => ({
         columns: [],
-        title: '详细信息'
+        title: '详细信息',
+        columnCount: 2,
+        excludeColumns: ['action']
       })
     },
     height: {
@@ -101,11 +103,16 @@ export default {
   },
   computed: {
     floatLayerColumns() {
-      console.log(this.floatLayerConfig?.columns?.length > 1)
       if (this.floatLayerConfig?.columns?.length > 1) {
         return this.floatLayerConfig.columns
       }
       return this.columns;
+    },
+    floatLayerColumnCount() {
+      return this.floatLayerConfig?.columnCount || 2;
+    },
+    excludeColumns() {
+      return this.floatLayerConfig?.excludeColumns || ['action'];
     }
   },
   methods: {
@@ -157,6 +164,15 @@ export default {
     // 浮层相关
     handleCellEnter(row, column, cell, event) {
       if (!row || !event) return
+      
+      // 检查是否是排除的列（操作列等）
+      const excludeColumns = this.excludeColumns
+      if (excludeColumns.includes(column.property)) {
+        this.tooltipVisible = false
+        this.hoveredRow = null
+        return
+      }
+      
       this.hoveredRow = row
       this.tooltipVisible = true
       this.updateTooltipPosition(event)
diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue
index ed8f5826..ee0fc92d 100644
--- a/klp-ui/src/views/wms/coil/panels/base.vue
+++ b/klp-ui/src/views/wms/coil/panels/base.vue
@@ -45,8 +45,8 @@
           clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
 
-      <MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
-        :multiple="true" />
+      <!-- <MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
+        :multiple="true" /> -->
 
       <el-form-item v-if="showWaybill" label="发货状态">
         <el-select v-model="queryParams.status" placeholder="请选择发货状态" clearable>
@@ -83,10 +83,6 @@
         <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
           @click="handleCheck">修正</el-button>
       </el-col>
-      <!-- <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
-          @click="handleDelete">删除</el-button>
-      </el-col> -->
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExportAll">导出</el-button>
       </el-col>
@@ -115,11 +111,10 @@
           <current-coil-no :current-coil-no="scope.row.currentCoilNo"></current-coil-no>
         </template>
       </el-table-column>
-      <!-- <el-table-column label="厂家卷号" align="center" prop="supplierCoilNo" /> -->
+      <el-table-column label="净重" align="center" prop="netWeight" v-if="!hideWarehouseQuery" />
       <el-table-column label="逻辑库位" align="center" prop="warehouseName" v-if="!hideWarehouseQuery" />
       <el-table-column label="实际库区" align="center" prop="actualWarehouseName"
         v-if="!hideWarehouseQuery && !showExportTime" />
-      <!-- <el-table-column label="物料类型" align="center" prop="materialType" /> -->
       <el-table-column label="产品类型" align="center" width="180">
         <template slot-scope="scope">
           <ProductInfo v-if="scope.row.itemType == 'product'" :product="scope.row" />
@@ -128,7 +123,6 @@
       </el-table-column>
       <el-table-column v-if="showAbnormal" label="异常数量" align="center" prop="abnormalCount"></el-table-column>
       <el-table-column label="长度 (米)" align="center" prop="length" v-if="showLength" />
-      <el-table-column label="更新时间" v-if="!showExportTime" align="center" prop="updateTime" />
       <el-table-column label="发货时间" v-if="showExportTime" align="center" prop="exportTime" width="205">
         <template slot-scope="scope">
           <el-date-picker @change="handleExportTimeChange(scope.row)" v-if="canEditExportTime" style="width: 100%"
@@ -144,8 +138,7 @@
           </el-select>
         </template>
       </el-table-column>
-      <el-table-column label="更新人" v-if="!showExportTime" align="center" prop="updateByName" />
-      <el-table-column label="关联信息" align="center" :show-overflow-tooltip="true">
+      <!-- <el-table-column label="关联信息" align="center" :show-overflow-tooltip="true">
         <template slot-scope="scope">
           <span v-if="scope.row.parentCoilNos && scope.row.hasMergeSplit === 1 && scope.row.dataType === 1">
             <el-tag type="warning" size="mini">来自母卷：{{ scope.row.parentCoilNos }}</el-tag>
@@ -158,7 +151,7 @@
           </span>
           <span v-else>—</span>
         </template>
-      </el-table-column>
+      </el-table-column> -->
 
       <el-table-column v-if="showGrade" label="质量状态" align="center" prop="qualityStatus">
         <template slot-scope="scope">
@@ -280,7 +273,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column prop="action" label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button size="mini" type="text" icon="el-icon-view" @click="handlePreviewLabel(scope.row)">
             预览标签
@@ -812,11 +805,19 @@ export default {
           { label: '净重', prop: 'netWeight' },
           { label: '毛重', prop: 'grossWeight' },
           { label: '备注', prop: 'remark' },
+          { label: '创建人', prop: 'createBy' },
+          { label: '创建时间', prop: 'createTime' },
+          { label: '更新人', prop: 'updateBy' },
+          { label: '更新时间', prop: 'updateTime' },
           { label: '质量状态', prop: 'qualityStatus' },
           { label: '原料材质', prop: 'packingStatus' },
           { label: '切边要求', prop: 'edgeRequirement' },
           { label: '包装要求', prop: 'packagingRequirement' },
-          { label: '厂家', prop: 'itemManufacturer' },
+          { label: '物料名称', prop: 'itemName' },
+          { label: '材质', prop: 'material' },
+          { label: '规格', prop: 'specification' },
+          { label: '镀层质量', prop: 'zincLayer' },
+          { label: '厂家', prop: 'manufacturer' },
           { label: '调制度', prop: 'temperGrade' },
           { label: '镀层种类', prop: 'coatingType' },
           { label: '实测长度(m)', prop: 'actualLength' },