diff --git a/src/views/modules/sampleTracking/projectProofTracking.vue b/src/views/modules/sampleTracking/projectProofTracking.vue index 81f3a5b..41ab016 100644 --- a/src/views/modules/sampleTracking/projectProofTracking.vue +++ b/src/views/modules/sampleTracking/projectProofTracking.vue @@ -86,26 +86,19 @@
- - - + +
{{ processTooltip.content }}
+ @@ -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;