当鼠标移到行上显示气泡行上加旗袍

src/views/threeSystems/safetyOperationRegulations/components/list.vue

@@ -37,8 +37,9 @@
       tooltip-effect="dark"
       border
       fit
-      highlight-current-row>
+      highlight-current-row
-      >
+      @cell-mouse-enter="enterSelectionRows"
+      @cell-mouse-leave="leaveSelectionRows">
       <el-table-column
         :reserve-selection="true"
         type="selection"
@@ -473,6 +474,53 @@ export default {
       }).catch((e) => {
         this.$message.success('添加失败')
       })
+    },
+    enterSelectionRows(row, column, cell, event) {
+      console.log(row, 'row')
+      if (row.ISTOPTIME) {
+        this.createTips(event, row, '数据已置顶')
+      }
+    },
+    leaveSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.removeTips(row)
+      }
+    },
+    createTips(el, row, value) {
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${el.clientY + 5}px;
+        left: ${el.clientX}px;
+        padding:5px 10px;
+        overflow: auto;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #595959;
+        background: #fff;
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #ccc;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      // 将浮层插入到body中
+      document.body.appendChild(tooltipDom)
+    },
+    removeTips(row) {
+      console.log(row, 'row')
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          document.body.removeChild(dom)
+        })
+      }
     }
   }
 }

src/views/threeSystems/safetyOperationRegulations/components/listEm.vue

@@ -37,13 +37,15 @@
       tooltip-effect="dark"
       border
       fit
-      highlight-current-row>
+      highlight-current-row
-      >
+      @cell-mouse-enter="enterSelectionRows"
+      @cell-mouse-leave="leaveSelectionRows">
       <el-table-column
         :reserve-selection="true"
         type="selection"
         width="55"
-        align="center"/>
+        align="center"
+      />
       <el-table-column type="index" label="序号" width="50" align="center" />
       <el-table-column align="center" prop="REMARKS" label="安全操作规程名称" />
       <el-table-column align="center" prop="TYPES" label="类型" >
@@ -449,6 +451,53 @@ export default {
         })
         this.listLoading = false
       })
+    },
+    enterSelectionRows(row, column, cell, event) {
+      console.log('row', row)
+      if (row.ISTOPTIME) {
+        this.createTips(event, row, '数据已置顶')
+      }
+    },
+    leaveSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.removeTips(row)
+      }
+    },
+    createTips(el, row, value) {
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${el.clientY + 5}px;
+        left: ${el.clientX}px;
+        padding:5px 10px;
+        overflow: auto;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #595959;
+        background: #fff;
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #ccc;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      // 将浮层插入到body中
+      document.body.appendChild(tooltipDom)
+    },
+    removeTips(row) {
+      console.log(row, 'row')
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          document.body.removeChild(dom)
+        })
+      }
     }
   }
 }

src/views/threeSystems/safetyProductionManagementSystem/components/list.vue

@@ -37,13 +37,15 @@
       tooltip-effect="dark"
       border
       fit
-      highlight-current-row>
+      highlight-current-row
-      >
+      @cell-mouse-enter="enterSelectionRows"
+      @cell-mouse-leave="leaveSelectionRows">
       <el-table-column
         :reserve-selection="true"
         type="selection"
         width="55"
-        align="center"/>
+        align="center"
+      />
       <el-table-column type="index" label="序号" width="50" align="center" />
       <el-table-column align="center" prop="REMARKS" label="安全生产管理制度名称" />
       <el-table-column align="center" prop="TYPES" label="类型" >
@@ -472,6 +474,52 @@ export default {
       }).catch((e) => {
         this.$message.success('添加失败')
       })
+    },
+    enterSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.createTips(event, row, '数据已置顶')
+      }
+    },
+    leaveSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.removeTips(row)
+      }
+    },
+    createTips(el, row, value) {
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${el.clientY + 5}px;
+        left: ${el.clientX}px;
+        padding:5px 10px;
+        overflow: auto;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #595959;
+        background: #fff;
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #ccc;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      // 将浮层插入到body中
+      document.body.appendChild(tooltipDom)
+    },
+    removeTips(row) {
+      console.log(row, 'row')
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          document.body.removeChild(dom)
+        })
+      }
     }
   }
 }

src/views/threeSystems/safetyProductionManagementSystem/components/listEm.vue

@@ -37,13 +37,15 @@
       tooltip-effect="dark"
       border
       fit
-      highlight-current-row>
+      highlight-current-row
-      >
+      @cell-mouse-enter="enterSelectionRows"
+      @cell-mouse-leave="leaveSelectionRows">
       <el-table-column
         :reserve-selection="true"
         type="selection"
         width="55"
-        align="center"/>
+        align="center"
+      />
       <el-table-column type="index" label="序号" width="50" align="center" />
       <el-table-column align="center" prop="REMARKS" label="安全生产管理制度名称" />
       <el-table-column align="center" prop="TYPES" label="类型" >
@@ -449,6 +451,52 @@ export default {
         })
         this.listLoading = false
       })
+    },
+    enterSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.createTips(event, row, '数据已置顶')
+      }
+    },
+    leaveSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.removeTips(row)
+      }
+    },
+    createTips(el, row, value) {
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${el.clientY + 5}px;
+        left: ${el.clientX}px;
+        padding:5px 10px;
+        overflow: auto;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #595959;
+        background: #fff;
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #ccc;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      // 将浮层插入到body中
+      document.body.appendChild(tooltipDom)
+    },
+    removeTips(row) {
+      console.log(row, 'row')
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          document.body.removeChild(dom)
+        })
+      }
     }
   }
 }

src/views/threeSystems/safetyProductionResponsibilitySystem/components/list.vue

@@ -37,13 +37,15 @@
       tooltip-effect="dark"
       border
       fit
-      highlight-current-row>
+      highlight-current-row
-      >
+      @cell-mouse-enter="enterSelectionRows"
+      @cell-mouse-leave="leaveSelectionRows">
       <el-table-column
         :reserve-selection="true"
         type="selection"
         width="55"
-        align="center"/>
+        align="center"
+      />
       <el-table-column type="index" label="序号" width="50" align="center" />
       <el-table-column align="center" prop="REMARKS" label="安全生产责任制名称" />
       <el-table-column align="center" prop="TYPES" label="类型" >
@@ -472,6 +474,52 @@ export default {
       }).catch((e) => {
         this.$message.success('添加失败')
       })
+    },
+    enterSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.createTips(event, row, '数据已置顶')
+      }
+    },
+    leaveSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.removeTips(row)
+      }
+    },
+    createTips(el, row, value) {
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${el.clientY + 5}px;
+        left: ${el.clientX}px;
+        padding:5px 10px;
+        overflow: auto;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #595959;
+        background: #fff;
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #ccc;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      // 将浮层插入到body中
+      document.body.appendChild(tooltipDom)
+    },
+    removeTips(row) {
+      console.log(row, 'row')
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          document.body.removeChild(dom)
+        })
+      }
     }
   }
 }

src/views/threeSystems/safetyProductionResponsibilitySystem/components/listEm.vue

@@ -37,13 +37,15 @@
       tooltip-effect="dark"
       border
       fit
-      highlight-current-row>
+      highlight-current-row
-      >
+      @cell-mouse-enter="enterSelectionRows"
+      @cell-mouse-leave="leaveSelectionRows">
       <el-table-column
         :reserve-selection="true"
         type="selection"
         width="55"
-        align="center"/>
+        align="center"
+      />
       <el-table-column type="index" label="序号" width="50" align="center" />
       <el-table-column align="center" prop="REMARKS" label="安全生产管理制度名称" />
       <el-table-column align="center" prop="TYPES" label="类型" >
@@ -449,6 +451,52 @@ export default {
         })
         this.listLoading = false
       })
+    },
+    enterSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.createTips(event, row, '数据已置顶')
+      }
+    },
+    leaveSelectionRows(row, column, cell, event) {
+      if (row.ISTOPTIME) {
+        this.removeTips(row)
+      }
+    },
+    createTips(el, row, value) {
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDom = document.createElement('div')
+      tooltipDom.style.cssText = `
+        display: inline-block;
+        max-width: 400px;
+        max-height: 400px;
+        position: absolute;
+        top: ${el.clientY + 5}px;
+        left: ${el.clientX}px;
+        padding:5px 10px;
+        overflow: auto;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #595959;
+        background: #fff;
+        border-radius: 5px;
+        z-index: 19999;
+        box-shadow: 0 4px 12px 1px #ccc;
+      `
+      tooltipDom.innerHTML = value
+      tooltipDom.setAttribute('id', `tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      // 将浮层插入到body中
+      document.body.appendChild(tooltipDom)
+    },
+    removeTips(row) {
+      console.log(row, 'row')
+      const { BUS_TEXT_LIBRARY_ID } = row
+      const tooltipDomLeave = document.querySelectorAll(`#tooltip-${BUS_TEXT_LIBRARY_ID}`)
+      if (tooltipDomLeave.length) {
+        tooltipDomLeave.forEach(dom => {
+          document.body.removeChild(dom)
+        })
+      }
     }
   }
 }