订舱台账备注

src/views/main/BookingLedger/list/index.vue

@@ -141,16 +141,12 @@
                 </div>
               </template>
               <template #bookremark="{ row }">
-                <div class="bookremark">
+                <div class="bookremark" @mouseover="remarkhover($event, row)" @mouseleave="remarkLeave($event, row)">
                   <span class="reamrk-label">
                     <template v-for="remark in row.bookremark">
                       {{ remark.remark }}
                     </template>
                   </span>
-                  <div class="reamrk-list" v-if="row.bookremark.length > 0">
-                    <div class="title">备注内容：</div>
-                    <div class="list" v-for="(remarkItem, rindex) in row.bookremark" :key="rindex"> <i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }} </div>
-                  </div>
                 </div>
               </template>
             </vxe-grid>
@@ -217,6 +213,11 @@
       @ok="submitTableForm"
       v-if="formMoreTableData"
     ></setFormModel>
+
+    <div class="hovers-list" :style="{ top:`${remarkScreenY}px`, left: `${remarkScreenX}px` }" v-if="remarkShow">
+      <div class="title">备注内容：</div>
+      <div class="list" v-for="(remarkItem, rindex) in remarkData" :key="rindex"> <i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }}</div>
+    </div>
   </div>
 </template>
 <script>
@@ -304,7 +305,12 @@ export default {
       // 表头排序参数
       tableOrderLabel: '',
       tableOrderType: '',
-      screenWidth: document.body.clientWidth
+      screenWidth: document.body.clientWidth,
+      // 备注位置
+      remarkShow: false,
+      remarkScreenX: 0,
+      remarkScreenY: 0,
+      remarkData: null
     }
   },
   created() {
@@ -754,6 +760,18 @@ export default {
     },
     pressEnterFun () {
       this.tableRefresh()
+    },
+    remarkhover (e, data) {
+      if (data.bookremark.length > 0) {
+        this.remarkScreenX = e.pageX + 20
+        this.remarkScreenY = e.pageY + 20
+        this.remarkData = data.bookremark
+        this.remarkShow = true
+      }
+    },
+    remarkLeave (e, data) {
+      this.remarkShow = false
+      this.remarkData = null
     }
   }
 }
@@ -1218,46 +1236,7 @@ export default {
     text-overflow: ellipsis;
     overflow: hidden;
     display: block;
-  }
-  .reamrk-list{
-    position: absolute;
-    top:26px; left: 0;
-    width: 300px;
-    background: #fff;
-    box-shadow: 0 0 10px #eee;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    padding:5px 20px 10px 20px;
-    z-index: 999;
-    white-space: normal;
-    text-align: left;
-    display: none;
-    z-index: 999 !important;
-    .title{
-      height: 30px;
-      line-height: 30px;
-      font-size: 12px;
-      font-weight: 600;
-    }
-    .list{
-      border-bottom: 1px solid #eee;
-      padding: 6px 0;
-      line-height: 18px;
-      font-size: 12px;
-      color: #666;
-      &:nth-last-of-type(1){
-        border: none;
-      }
-      .icon{
-        margin-right: 4px;
-        color: @primary-color;
-      }
-    }
-  }
-  &:hover{
-    .reamrk-list{
-      display: block;
-    }
+    cursor: pointer;
   }
 }
 /deep/ .line-box:nth-last-of-type(-n+5){
@@ -1271,12 +1250,6 @@ export default {
   }
 }
 
-// /deep/ .vxe-body--row.row--stripe::nth-of-type(1){
-//   .reamrk-list{
-//     display: block;
-//   }
-// }
-
 /deep/.line-box:nth-of-type(2n){
   position: relative;
   background: #fff;
@@ -1293,7 +1266,6 @@ export default {
     z-index: 0;
     background: @primary-color;
     opacity: 0.04;
-    z-index: 0;
   }
   .book-remark-box{
     .bookremark{
@@ -1305,4 +1277,39 @@ export default {
   }
 }
 
+.hovers-list{
+  max-height: 400px;
+  position: fixed;
+  top:0; left: 0;
+  z-index:999;
+  width: 300px;
+  background: #fff;
+  box-shadow: 0 0 10px #eee;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  padding:5px 20px 10px 20px;
+  white-space: normal;
+  text-align: left;
+  z-index: 999 !important;
+  .title{
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .list{
+    border-bottom: 1px solid #eee;
+    padding: 6px 0;
+    line-height: 18px;
+    font-size: 12px;
+    color: #666;
+    &:nth-last-of-type(1){
+      border: none;
+    }
+    .icon{
+      margin-right: 4px;
+      color: @primary-color;
+    }
+  }
+}
 </style>