Merge branch 'master' of http://60.209.125.238:13080/whm/BookingHeChuanFront

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

@@ -184,6 +184,26 @@
                 </div>
               </template>
 
+              <template #goodsStatusList="{ row }">
+                <div class="goods-status">
+                  <div class="goods-status-left">
+                    <template v-for="(status, sindex) in row.goodsStatusList" >
+                      <a-popover placement="top" :key="sindex" v-show="status.finishTime || status.remark">
+                        <div slot="content">
+                          <div v-if="status.finishTime">时间：{{ status.finishTime }}</div>
+                          <div v-if="status.remark">备注：{{ status.remark }}</div>
+                        </div>
+                        <span class="goods-tip">{{ status.statusName }}</span>
+                      </a-popover>
+                    </template>
+                  </div>
+                  <!-- @mouseover="goodStatusHover($event, row)" @mouseleave="goodStatusLeave($event, row)" -->
+                  <div class="goods-status-right" @click="goodStatusclick($event, row)" v-if="row.hasGoods > 0">
+                    <i class="iconfont icon-zhankai2"></i>
+                  </div>
+                </div>
+              </template>
+
               <template #empty>
                 <span class="no-data">
                   <i class="iconfont icon-queshengye_zanwushuju"></i>
@@ -258,6 +278,24 @@
         <i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }}
       </div>
     </div>
+
+    <div class="goods-hovers-list" :style="{ top: `${goodStatusScreenY}px`, left: `${goodStatusScreenX}px` }" v-show="goodStatusShow">
+      <div class="title">货运动态</div>
+      <template v-for="(goodStatusItem, gindex) in goodStatusData" >
+        <template v-if="goodStatusItem.finishTime || goodStatusItem.remark">
+          <a-popover placement="top" :key="gindex">
+            <div slot="content">
+              <div v-if="goodStatusItem.finishTime">时间：{{ goodStatusItem.finishTime }}</div>
+              <div v-if="goodStatusItem.remark">备注：{{ goodStatusItem.remark }}</div>
+            </div>
+            <div class="goods-btn" :class="{ 'active': goodStatusItem.finishTime || goodStatusItem.remark }">{{ goodStatusItem.statusName }}</div>
+          </a-popover>
+        </template>
+        <template v-else>
+          <div class="goods-btn" :key="gindex" :class="{ 'active': goodStatusItem.finishTime || goodStatusItem.remark }">{{ goodStatusItem.statusName }}</div>
+        </template>
+      </template>
+    </div>
     <!-- 运踪弹窗 start -->
     <a-modal width="50vw" :maskClosable="false" v-model="traceModalVisible" title="运踪订阅">
       <div class="trace-box">
@@ -504,8 +542,8 @@ const formInitData = [
   { title: '主提单号', align: 'center', width: '90', label: 'MBLNO', type: 'input' },
   { title: '分提单号', align: 'center', width: '90', label: 'HBLNO', type: 'input' },
   { title: '订舱编号', align: 'center', width: '90', label: 'CUSTNO', type: 'input' },
-  { title: '开船日期', align: 'center', width: '90', label: 'ETD', type: 'date' },
+  { title: '开船日期', align: 'center', width: 160, label: 'ETD', type: 'dateRange', resLabel: ['BETD', 'EETD'] },
-  { title: '实际开船日期', align: 'center', width: '90', label: 'ATD', type: 'date' },
+  { title: '实际开船日期', align: 'center', width: 160, label: 'ATD', type: 'dateRange', resLabel: ['BATD', 'EATD'] },
   { title: '船名', align: 'center', width: '90', label: 'VESSEL', type: 'input' }
 ]
 export default {
@@ -592,6 +630,11 @@ export default {
       traceValue: [],
       addNum: 0,
       tableHeight: 0,
+      // 货运动态位置
+      goodStatusShow: false,
+      goodStatusScreenX: 0,
+      goodStatusScreenY: 0,
+      goodStatusData: null,
       // 批量编辑
       editingForm: this.$form.createForm(this),
       vesselData: [],
@@ -1239,6 +1282,13 @@ export default {
                 })
               }
               item.bookstatus = bookstatus
+              let hasGoods = 0
+              item.goodsStatusList.map((gitem, gindex) => {
+                if (gitem.finishTime || gitem.remark) {
+                  hasGoods++
+                }
+              })
+              item.hasGoods = hasGoods
               return item
             })
             this.$set(this.gridOptions.pagerConfig, 'columns', JSON.parse(JSON.stringify(initData.columns)))
@@ -1398,6 +1448,34 @@ export default {
       this.remarkShow = false
       this.remarkData = null
     },
+    goodStatusclick (e, data) {
+      if (!this.goodStatusShow) {
+        this.goodStatusHover(e, data)
+      } else {
+        this.goodStatusLeave(e, data)
+      }
+    },
+    goodStatusHover(e, data) {
+      const maxWidth = window.innerWidth
+      console.log(maxWidth, e.pageX, maxWidth - e.pageX)
+      if (maxWidth - e.pageX > 230) {
+        // this.goodStatusScreenX = e.pageX + 20
+        this.goodStatusScreenX = e.pageX - 139
+      } else {
+        // this.goodStatusScreenX = e.pageX - 300
+        this.goodStatusScreenX = e.pageX - 139
+      }
+      // this.goodStatusScreenY = e.pageY + 20
+      this.goodStatusScreenY = e.pageY + 25
+      this.goodStatusData = data.goodsStatusList
+      this.goodStatusShow = true
+      console.log('== 鼠标滑过 ==', this.goodStatusScreenX, this.goodStatusScreenY, this.goodStatusShow, this.goodStatusData)
+    },
+    goodStatusLeave(e, data) {
+      this.goodStatusShow = false
+      this.goodStatusData = null
+      console.log('== 鼠标离开 ==')
+    },
     openTraceModel() {
       const select = this.$refs.xGrid.getCheckboxRecords()
       if (select.length === 0) {
@@ -2151,6 +2229,41 @@ export default {
     cursor: pointer;
   }
 }
+
+// 货物状态
+.goods-status{
+  width: 100%;
+  display: flex;
+  height: 48px;
+  .goods-status-left{
+    flex: 1;
+    overflow: hidden;
+    height: 48px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    .goods-tip{
+      font-size: 12px;
+      margin: 0 4px;
+      cursor: pointer;
+      height: 48px;
+      line-height: 48px;
+      display: inline-block;
+      color: @primary-color;
+    }
+  }
+  .goods-status-right{
+    width: 30px;
+    text-align: center;
+    height: 48px;
+    i{
+      color: @primary-color;
+      cursor: pointer;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+}
+
 /deep/ .line-box:nth-last-of-type(-n + 5) {
   .book-remark-box {
     .bookremark {
@@ -2226,6 +2339,67 @@ export default {
     }
   }
 }
+.goods-hovers-list{
+  max-height: 400px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 300px;
+  background: #fff;
+  box-shadow: 0 0 50px #eee;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  padding: 5px 20px 10px 20px;
+  white-space: normal;
+  text-align: left;
+  z-index: 999 !important;
+  // overflow: auto;
+  &::before{
+    content: '';
+    float: left;
+    width: 0;
+    height: 0;
+    border-width: 8px;
+    border-style: solid;
+    border-color: transparent #fff transparent transparent;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    margin-left: -16px;
+  }
+  .title {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .goods-btn {
+    display:inline-block;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+    width:82px;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    margin-bottom: 6px;
+    text-align: center;
+    margin: 0 2px 8px;
+    cursor: pointer;
+    &.active{
+      color: @primary-color;
+      border: 1px solid @primary-color;
+    }
+    .icon {
+      margin-right: 4px;
+      color: @primary-color;
+    }
+  }
+}
 
 @media (min-width: 1192px) and (max-width: 1591px) {
   .booking-from-box {

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

@@ -101,7 +101,8 @@ export default {
     { field: 'pono', label: 'PONO', width: 120, title: 'PO NO', showHeaderOverflow: true, sortable: true },
     // 以下为新增字段
     { field: 'dzRemark', label: 'DZREMARK', width: 160, title: '单证备注', showHeaderOverflow: true, sortable: true },
-    { field: 'czRemark', label: 'CZREMARK', width: 160, title: '操作备注', showHeaderOverflow: true, sortable: true }
+    { field: 'czRemark', label: 'CZREMARK', width: 160, title: '操作备注', showHeaderOverflow: true, sortable: true },
+    { field: 'goodsStatusList', label: 'GOODSSTATUSLIST', minWidth: 160, title: '货物状态', showHeaderOverflow: true, slots: { default: 'goodsStatusList' } }
   ],
   // ==== 表单部分 ====
   condAllData: [