tracking

src/views/modules/sampleTracking/projectProofTracking.vue

@@ -86,15 +86,9 @@
             <div
               v-else
               class="process-content"
-              @mouseenter="loadProcessHistory(scope.row, item, false)"
-            >
-              <el-tooltip
-                effect="dark"
-                :content="getProcessTooltip(scope.row, item)"
-                popper-class="process-date-tooltip"
-                placement="top"
-                :open-delay="180"
-                :disabled="!hasProcessHistory(scope.row, item)"
+              @mouseenter="handleProcessTooltipMouseEnter(scope.row, item, $event)"
+              @mousemove="handleProcessTooltipMouseMove($event)"
+              @mouseleave="handleProcessTooltipMouseLeave"
             >
               <el-date-picker
                 v-model="scope.row[item.actualField]"
@@ -105,7 +99,6 @@
                 style="width: 122px"
                 @change="handleProcessDateChange(scope.row, item, $event)"
               />
-              </el-tooltip>
               <el-button
                 class="process-complete-btn"
                 type="success"
@@ -167,6 +160,15 @@
       style="margin-top: 12px; text-align: right"
     />
 
+    <div
+      v-show="processTooltip.visible"
+      class="process-history-tooltip"
+      :style="{
+        left: `${processTooltip.left}px`,
+        top: `${processTooltip.top}px`
+      }"
+    >{{ processTooltip.content }}</div>
+
     <el-dialog title="一键创建项目/物料" :visible.sync="oneKeyDialogVisible" :close-on-click-modal="false" width="1100px">
       <el-form :model="oneKeyForm" label-position="top" class="one-key-grid-form">
         <el-row :gutter="16">
@@ -866,6 +868,13 @@ export default {
       selectionRows: [],
       batchEditMode: false,
       processHistoryMap: {},
+      processTooltipHoverKey: '',
+      processTooltip: {
+        visible: false,
+        content: '',
+        left: 0,
+        top: 0
+      },
       processHistoryRows: [],
       commentsEditingTrackingId: null,
       commentsDraft: '',
@@ -1203,6 +1212,7 @@ export default {
       this.dataListLoading = true
       searchProofTracking(inData).then(({ data }) => {
         this.dataListLoading = false
+        this.resetProcessTooltip()
         if (data && data.code === 0) {
           this.dataList = (data.page && data.page.list) || []
           this.totalPage = (data.page && data.page.totalCount) || 0
@@ -1222,6 +1232,7 @@ export default {
         }
       }).catch(() => {
         this.dataListLoading = false
+        this.resetProcessTooltip()
         this.$message.error('查询异常')
       })
     },
@@ -1701,6 +1712,75 @@ export default {
       }
       return `${row.trackingId}_${processCol.code}`
     },
+    resetProcessTooltip () {
+      this.processTooltipHoverKey = ''
+      this.processTooltip.visible = false
+      this.processTooltip.content = ''
+    },
+    hideProcessTooltip () {
+      this.processTooltip.visible = false
+      this.processTooltip.content = ''
+    },
+    updateProcessTooltipPosition (event) {
+      if (!event) {
+        return
+      }
+      const offsetX = 12
+      const offsetY = 16
+      let left = event.clientX + offsetX
+      let top = event.clientY + offsetY
+      const maxWidth = 220
+      const maxHeight = 120
+      if (left + maxWidth > window.innerWidth - 8) {
+        left = window.innerWidth - maxWidth - 8
+      }
+      if (top + maxHeight > window.innerHeight - 8) {
+        top = event.clientY - maxHeight - 8
+      }
+      this.processTooltip.left = Math.max(8, left)
+      this.processTooltip.top = Math.max(8, top)
+    },
+    handleProcessTooltipMouseMove (event) {
+      if (!this.processTooltip.visible) {
+        return
+      }
+      this.updateProcessTooltipPosition(event)
+    },
+    handleProcessTooltipMouseLeave () {
+      this.processTooltipHoverKey = ''
+      this.hideProcessTooltip()
+    },
+    handleProcessTooltipMouseEnter (row, processCol, event) {
+      const cacheKey = this.getProcessCacheKey(row, processCol)
+      if (!cacheKey) {
+        return
+      }
+      this.processTooltipHoverKey = cacheKey
+      this.updateProcessTooltipPosition(event)
+      const showTooltip = () => {
+        if (this.processTooltipHoverKey !== cacheKey) {
+          return
+        }
+        if (!this.hasProcessHistory(row, processCol)) {
+          this.hideProcessTooltip()
+          return
+        }
+        const content = this.getProcessTooltip(row, processCol)
+        if (!content) {
+          this.hideProcessTooltip()
+          return
+        }
+        this.processTooltip.content = content
+        this.processTooltip.visible = true
+      }
+      if (Object.prototype.hasOwnProperty.call(this.processHistoryMap, cacheKey)) {
+        showTooltip()
+        return
+      }
+      this.loadProcessHistory(row, processCol, false).then(() => {
+        showTooltip()
+      })
+    },
     loadProcessHistory (row, processCol, refreshDialog) {
       if (!row || !row.trackingId) {
         return Promise.resolve([])
@@ -1940,6 +2020,20 @@ export default {
   white-space: pre-line;
 }
 
+.process-history-tooltip {
+  position: fixed;
+  z-index: 3000;
+  max-width: 220px;
+  padding: 10px 12px;
+  border-radius: 4px;
+  background: rgba(48, 49, 51, 0.95);
+  color: #fff;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre-line;
+  pointer-events: none;
+}
+
 .link-date {
   color: #0c4dbb;
   text-decoration: none;