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 @@
-
+
{{ field.label }}: {{ formatTooltipValue(data, field) }} @@ -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; +} \ 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 @@ - + @@ -27,7 +27,7 @@ + :tooltipStyle="tooltipStyle" :columnCount="floatLayerColumnCount" />
@@ -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" /> - + @@ -83,10 +83,6 @@ 修正 - 导出 @@ -115,11 +111,10 @@ - + -