列表备注

src/views/main/BookingLedger/detail/modules/rightContent.vue

@@ -285,7 +285,8 @@ export default {
       bookingAttachType: [],
       attachName: '',
       attachCode: '',
-      locaService: []
+      locaService: [],
+      editRemarkVal: null
     }
   },
   created() {
@@ -373,12 +374,14 @@ export default {
     },
     handleModelSubmit() {
       AddRemark({
+        id: this.editRemarkVal ? this.editRemarkVal.id : 0,
         pId: this.id,
         remark: this.remarkVal
       })
         .then(res => {
           if (res.success) {
             this.$message.info('备注提交成功')
+            this.editRemarkVal = null
             this.handleModelCancel()
             this.getRemark()
           }
@@ -389,10 +392,13 @@ export default {
     },
     editRemark (data) {
       console.log('=== 暂无接口， 需要添加编辑备注 ===')
-      // 需要新增接口
+      this.remarkModelvisible = true
+      this.remarkVal = data.remark
+      this.editRemarkVal = data
     },
     handleModelCancel() {
       this.remarkModelvisible = false
+      this.editRemarkVal = null
     },
     // 备注 - end
 
@@ -589,6 +595,7 @@ export default {
   .no-data {
     text-align: center;
     line-height: 20px;
+    display: block;
     .iconfont {
       font-size: 40px;
       line-height: 70px;
@@ -899,6 +906,7 @@ export default {
     color: #999;
     padding: 20px 0;
     line-height: 30px;
+    display: block;
     .text {
       display: inline-block;
     }

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

@@ -103,6 +103,7 @@
             <vxe-grid
               ref="xGrid"
               v-bind="gridOptions"
+              row-class-name="line-box"
               @page-change="handlePageChange"
               @cell-dblclick="handledbclick"
               @resizable-change="resizableChange"
@@ -139,6 +140,19 @@
                   </div>
                 </div>
               </template>
+              <template #bookremark="{ row }">
+                <div class="bookremark">
+                  <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>
           </div>
         </x-card>
@@ -1011,24 +1025,24 @@ export default {
   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 /*列表双列背景色 */
-/deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
-  // background: #f5f9fe;
-  position: relative;
-  background: #fff;
-  z-index: 1;
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    background: @primary-color;
-    opacity: 0.04;
-    z-index: -1;
-  }
-}
+// /deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
+//   // background: #f5f9fe;
+//   position: relative;
+//   background: #fff;
+//   z-index: 1;
+//   &::after {
+//     content: '';
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     z-index: 0;
+//     background: @primary-color;
+//     opacity: 0.04;
+//     z-index: -1;
+//   }
+// }
 /*列表操作按钮颜色 */
 /deep/ .operate-btn {
   color: @primary-color;
@@ -1160,6 +1174,12 @@ export default {
   text-align: center;
   // background: #f99;
 }
+.reamrk-btns{
+  overflow: visible;
+}
+
+
+
 @media (min-width: 1200px) and (max-width:1600px){
   .from-label {
     padding-right: 0 !important;
@@ -1180,4 +1200,109 @@ export default {
     }
   }
 }
+
+/deep/ .book-remark-box {
+  >.vxe-cell {
+    overflow: visible !important;
+  }
+  /deep/ .vxe-cell {
+    overflow: visible !important;
+  }
+}
+
+.bookremark{
+  position: relative;
+  .reamrk-label{
+    width: 100%;
+    white-space: nowrap;
+    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;
+    }
+  }
+}
+/deep/ .line-box:nth-last-of-type(-n+5){
+  .book-remark-box{
+    .bookremark{
+      .reamrk-list{
+        top: inherit;
+        bottom: calc(100% + 8px)
+      }
+    }
+  }
+}
+
+// /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;
+  >*{
+    z-index: 1;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: @primary-color;
+    opacity: 0.04;
+    z-index: 0;
+  }
+  .book-remark-box{
+    .bookremark{
+      .reamrk-list{
+        top: inherit;
+        bottom: calc(100% + 8px)
+      }
+    }
+  }
+}
+
 </style>

src/views/main/BookingLedger/list/modules/initData.js

@@ -57,6 +57,7 @@ export default {
     },
     { field: 'etd', label: 'ETD', width: 110, title: '开船日期', showHeaderOverflow: true, sortable: true, slots: { default: 'etd' } },
     { field: 'voyno', label: 'VOYNO', width: 120, title: '海关航次', showHeaderOverflow: true },
+    { field: 'bookremark', label: 'BOOKREMARK', width: 120, title: '备注', className: 'book-remark-box', showOverflow: false, slots: { default: 'bookremark' } },
     { field: 'bookingStatus', label: 'BOOKINGSTATUS', width: 120, title: '订舱状态', showHeaderOverflow: true },
     { field: 'vgm', label: 'VGM', width: 120, title: 'VGM', showHeaderOverflow: true },
     { field: 'billStatus', label: 'BILLSTATUS', width: 120, title: '提单状态', showHeaderOverflow: true },