From 7c8066de5d45c9b01adaf3ed2163dcd1be0572a8 Mon Sep 17 00:00:00 2001
From: lilu <lilu@myshipping.net>
Date: Mon, 12 Dec 2022 18:02:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/components/sedOrder.vue            | 119 ++++++++++++-
 .../detail/modules/mailingInfo.vue            |   6 +
 src/views/main/BookingLedger/list/index.vue   | 163 +++++++++++++++++-
 .../BookingLedger/list/modules/initData.js    |   6 +-
 4 files changed, 285 insertions(+), 9 deletions(-)

diff --git a/src/views/main/BookingLedger/detail/components/sedOrder.vue b/src/views/main/BookingLedger/detail/components/sedOrder.vue
index 500a5cc..fe6fcbc 100644
--- a/src/views/main/BookingLedger/detail/components/sedOrder.vue
+++ b/src/views/main/BookingLedger/detail/components/sedOrder.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="booking-detail">
-    <a-row :gutter="24">
-      <a-col :span="5">
+    <a-row :gutter="24" :class="showSecNav ? 'show-content' : 'hide-content'">
+      <div class="nav-min-icon" v-if="!showSecNav" @click="openNav"><i class="iconfont icon-liebiao"></i></div>
+      <a-col :span="showSecNav ? 5 : 0" v-if="showSecNav">
         <div class="sed-order-list">
-          <div class="sed-order-title"><i class="iconfont icon-liebiao"></i> 分提单列表</div>
+          <div class="sed-order-title"><i class="iconfont icon-liebiao"></i><span class="tit">分提单列表</span><span class="right" @click="openNav">收起</span></div>
           <div class="sec-order">
             <div class="sed-order-label" v-for="(sedDetail, sindex) in sedOrderList" :key="sindex" :class="{'active': editIndex === sindex}" @click="changeOrder(sindex)">
               <i class="iconfont icon-dingdan"></i>
@@ -14,7 +15,7 @@
           </div>
         </div>
       </a-col>
-      <a-col :span="19">
+      <a-col :span="showSecNav ? 19 : 24">
         <template v-if="editDetails">
           <div class="order-title"><i class="iconfont icon-dingdan"></i> 当前分单号： <span>{{ editDetails.hblno }}</span></div>
           <sedOperationArea :details="editDetails" @save="saveFun" @copy="copyFun"></sedOperationArea>
@@ -105,6 +106,7 @@ export default {
       inPageLoading: false,
       editDetails: null,
       editIndex: 0,
+      showSecNav: true
     }
   },
   watch: {
@@ -291,8 +293,12 @@ export default {
       this.editDetails = _data
       this.editIndex = this.sedOrderList.length
       this.sedOrderList.push(_data)
+    },
+
+    openNav () {
+      this.showSecNav = !this.showSecNav
     }
-  },
+  }
 }
 </script>
   <style lang="less">
@@ -324,6 +330,27 @@ export default {
   min-height: 200px;
   // background: #ffffff;
 }
+.show-content{
+}
+.hide-content{
+  padding-left: 60px;
+  position: relative;
+}
+.nav-min-icon{
+  width: 50px;
+  height: 50px;
+  text-align: center;
+  font-size: 24px;
+  line-height: 45px;
+  background: #fff;
+  box-shadow: 0 0 10px #eee;
+  margin-left: 10px;
+  font-weight: 600;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: pointer;
+}
 .sed-order-list{
 	background: #fff;
 	box-shadow: 0 0 10px #eee;
@@ -333,6 +360,73 @@ export default {
   display: flex;
   flex-direction: column;
   padding-top: 0px;
+  transition: .5s all;
+  border-radius: 4px;
+  &.show-nav{
+    width: 100%;
+    animation-name: showNav 0.6s;
+    animation-fill-mode:forwards;
+    .tit{
+      display:  inline-block;
+      animation-name: showText 0.6s;
+      animation-fill-mode:forwards;
+    }
+    .sec-order{
+      display: block;
+      animation-name: showText 0.6s;
+      animation-fill-mode:forwards;
+    }
+    @keyframes showNav {
+      0% {
+        width: 58%;
+      }
+      100% {
+        width: 100%;
+      }
+    }
+    @keyframes showText {
+      0% {
+        opacity: 0;
+      }
+      75% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  }
+  &.hide-nav{
+    width: 58px;
+    animation-name: hideNav 0.6s;
+    animation-fill-mode:forwards;
+    .tit{
+      display: none;
+      animation-name: hideText 0.6s;
+      animation-fill-mode:forwards;
+    }
+    .sec-order{
+      display: none;
+      animation-name: hideText 0.6s;
+      animation-fill-mode:forwards;
+    }
+    @keyframes hideNav {
+      0% {
+        width: 100%;
+      }
+      100% {
+        width: 58px;
+      }
+    }
+    @keyframes hideText {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
   .sed-order-title{
     height: 50px;
     line-height: 50px;
@@ -349,6 +443,12 @@ export default {
       vertical-align: top;
       margin-right: 6px;
     }
+    .right{
+      float: right;
+      font-weight: 500;
+      color: #999;
+      cursor: pointer;
+    }
   }
 	.sed-order-label{
 		height: 40px;
@@ -455,4 +555,11 @@ export default {
   font-size: 12px;
   color: #ff6646;
 }
-</style>
+
+// @media (max-width: 1300px) {
+//   /deep/ .feeself{
+//     top: 21px;
+//     right: -26px;
+//   }
+// }
+</style>
\ No newline at end of file
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index eb53b9c..537f3a3 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -1534,4 +1534,10 @@ export default {
   border-bottom: none;
 }
 
+@media (max-width: 1300px) {
+  .feeself{
+    top: 21px;
+    right: -26px;
+  }
+}
 </style>
diff --git a/src/views/main/BookingLedger/list/index.vue b/src/views/main/BookingLedger/list/index.vue
index a5458f7..98952a8 100644
--- a/src/views/main/BookingLedger/list/index.vue
+++ b/src/views/main/BookingLedger/list/index.vue
@@ -88,6 +88,21 @@
               <template #operate="{ row }">
                 <vxe-button class="operate-btn" type="text" icon="vxe-icon-edit" @click="editColumns(row)"></vxe-button>
               </template>
+              <!-- <template #bookstatus="{ row }">
+                <span class="book-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex"> {{ enmuBookingBtn(btn.staCode) }}<i>/</i></span>
+              </template> -->
+              <template #bookstatus="{ row, column }">
+                <div class="billtrace-box" :class=" column.resizeWidth > 240 ? 'normal-box' : 'flex-box'">
+                  <div class="billtrace-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex">
+                    <a-popover placement="topLeft" v-if="btn.staTime">
+                      <div slot="content">{{ btn.staTime }}</div>
+                      <span :class="{'active': btn.isChecked}">{{ enmuBookingBtn(btn.staCode) }}</span>
+                    </a-popover>
+                    <span :class="{'active': btn.isChecked}" v-else>{{ enmuBookingBtn(btn.staCode) }}</span>
+                    <i class="iconfont icon-right-1-copy" :class="{'hide': bindex===row.bookstatus.length-1}"></i>
+                  </div>
+                </div>
+              </template>
             </vxe-grid>
           </div>
         </x-card>
@@ -507,13 +522,32 @@ export default {
       BookingOrderPage(query)
         .then(res => {
           if (res.success) {
-            const _data = res.data.rows.map((item, index) => {
+            const _data = res.data.items.map((item, index) => {
               item.index = (currentPage - 1) * pageSize + index
+              const bookstatus = [
+                { staCode: 'sta_cangdan', isChecked: false },
+                { staCode: 'sta_haifang', isChecked: false },
+                { staCode: 'sta_zhuangzai', isChecked: false },
+                { staCode: 'sta_mafang', isChecked: false },
+                { staCode: 'sta_zhuangchuan', isChecked: false },
+                { staCode: 'sta_atd', isChecked: false },
+              ]
+              if (item.bookstatus.length > 0) {
+                bookstatus.map((book, bindex) => {
+                  item.bookstatus.map((item, index) => {
+                    if (item.staCode === book.staCode) {
+                      bookstatus[bindex] = item
+                      bookstatus[bindex].isChecked = true
+                    }
+                  })
+                })
+              }
+              item.bookstatus = bookstatus
               return item
             })
             this.$set(this.gridOptions.pagerConfig, 'columns', JSON.parse(JSON.stringify(initData.columns)))
             this.$set(this.gridOptions, 'data', [..._data])
-            this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalRows)
+            this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalCount)
             this.$set(this.gridOptions, 'loading', false)
             const bookingList = {}
             this.gridOptions.data.map(($item, $index) => {
@@ -608,6 +642,32 @@ export default {
       this.tableOrderLabel = property || ''
       this.tableOrderType = order || ''
       this.getList(this.formRes)
+    },
+    enmuBookingBtn (val) {
+      switch (val) {
+        case 'sta_cangdan':
+          return '舱单'
+        case 'sta_haifang':
+          return '海放'
+        case 'sta_zhuangzai':
+          return '装载'
+        case 'sta_mafang':
+          return '码放'
+        case 'sta_zhuangchuan':
+          return '装船'
+        case 'sta_atd':
+          return '离港'
+        case 'sta_so':
+          return '已订舱'
+        case 'sta_bc':
+          return '订舱确认'
+        case 'sta_letter_yard':
+          return '放舱'
+        case 'sta_xhz':
+          return '下货纸'
+        default:
+          return '--'
+      }
     }
   }
 }
@@ -905,4 +965,103 @@ export default {
   color: @primary-color !important;
   opacity: 0.7;
 }
+.book-btn{
+  display: inline-block;
+  padding: 0 10px;
+  height: 24px;
+  margin-right: 8px;
+  border: 1px solid #eee;
+  color:#999;
+  font-size: 12px;
+  line-height: 24px;
+  i{
+    display: none;
+  }
+  &.sta_so{
+    color: #8BC34A;
+    border: 1px solid #8BC34A;
+  }
+  &.sta_bc{
+    color: #FBC02D;
+    border: 1px solid #FBC02D;
+  }
+  &.sta_letter_yard{
+    color: #00BCD4;
+    border: 1px solid #00BCD4;
+  }
+  &.sta_xhz{
+    color: #E64A19;
+    border: 1px solid #E64A19;
+  }
+}
+.billtrace-box{
+  width:100%;
+  // display: flex;
+  // height: 48px;
+  // flex-wrap:wrap;
+  // padding:3px 0;
+  // text-align: center;
+  .billtrace-btn{
+    display: inline-block;
+    font-size:12px;
+    height: 16px;
+    // width:30%;
+    // display: flex;
+    span{
+      // flex: 1;
+      text-align: right;
+      color: #999;
+    }
+    i{
+      font-size: 12px;
+      color: #ccc;
+      // flex: 1;
+      text-align: center;
+      &.hide{
+        opacity: 0;
+      }
+    }
+    .active{
+      cursor: pointer;
+      color: @primary-color;
+    }
+  }
+}
+.normal-box{
+  .billtrace-btn{
+    display: inline-block;
+  }
+}
+.flex-box{
+  display: flex;
+  height: 48px;
+  flex-wrap:wrap;
+  padding:3px 0;
+  text-align: center;
+  justify-content:center;
+  .billtrace-btn{
+    font-size:12px;
+    height: 16px;
+    width:30%;
+    display: flex;
+    span{
+      flex: 1;
+      text-align: right;
+      color: #999;
+    }
+    i{
+      font-size: 12px;
+      color: #ccc;
+      flex: 1;
+      text-align: center;
+      &.hide{
+        opacity: 0;
+      }
+    }
+    .active{
+      cursor: pointer;
+      color: @primary-color;
+    }
+  }
+}
 </style>
diff --git a/src/views/main/BookingLedger/list/modules/initData.js b/src/views/main/BookingLedger/list/modules/initData.js
index 9f5c1f4..8a7088a 100644
--- a/src/views/main/BookingLedger/list/modules/initData.js
+++ b/src/views/main/BookingLedger/list/modules/initData.js
@@ -89,7 +89,11 @@ export default {
     { field: 'notifyparty', label: 'NOTIFYPARTY', width: 120, title: '通知人', showHeaderOverflow: true, sortable: true },
     { field: 'op', label: 'OP', width: 120, title: '操作人', showHeaderOverflow: true, sortable: true },
     { field: 'payableat', label: 'PAYABLEAT', width: 120, title: '到付地点', showHeaderOverflow: true, sortable: true },
-    { field: 'placedelivery', label: 'PLACEDELIVERY', width: 120, title: '交货地', showHeaderOverflow: true, sortable: true }
+    { field: 'placedelivery', label: 'PLACEDELIVERY', width: 120, title: '交货地', showHeaderOverflow: true, sortable: true },
+    { field: 'bookstatus', label: 'BOOKSTATUS', minWidth: 140, title: '海关码头', showHeaderOverflow: true, slots: { default: 'bookstatus' } }
+    // { field: 'book_sta_cate_billtrace', label: 'book_sta_cate_billtrace', width: 120, title: '运踪状态', showHeaderOverflow: true, sortable: true },
+    // { field: 'book_sta_cate_vgm', label: 'book_sta_cate_vgm', width: 120, title: 'VGM状态', showHeaderOverflow: true, sortable: true },
+    // { field: 'book_sta_cate_si', label: 'book_sta_cate_si', width: 120, title: '提单状态', showHeaderOverflow: true, sortable: true },
   ],
   condAllData: [
     { title: '业务编号', align: 'center', width: 120, label: 'BSNO', type: 'input' },