From b3d01a7b61f588b799f22f267e673f0189d0abb1 Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Wed, 28 Jun 2023 17:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../BookingCustomerLedger/detail/index.vue    |  76 ++-
 .../detail/style/mailingInfo.less             | 548 ++++++++++++++++++
 .../main/BookingCustomerLedger/list/index.vue |  26 +-
 .../detail/modules/mailingInfo.vue            |   4 +-
 4 files changed, 638 insertions(+), 16 deletions(-)

diff --git a/src/views/main/BookingCustomerLedger/detail/index.vue b/src/views/main/BookingCustomerLedger/detail/index.vue
index 69890c6..a1d975f 100644
--- a/src/views/main/BookingCustomerLedger/detail/index.vue
+++ b/src/views/main/BookingCustomerLedger/detail/index.vue
@@ -4,6 +4,7 @@
       <a-button type="primary" v-if="details.bsstatus=='' || !details.bsstatus || details.bsstatus == '已录入' || details.bsstatus == '已驳回'" @click="handleSave">保存</a-button>
       <a-button type="primary" @click="handleCopy">复制</a-button>
       <a-button type="primary">存为模板</a-button>
+      <a-button type="primary" v-if="details.bsstatus" @click="handleOpenStatus">状态历史</a-button>
       <a-button type="danger" v-if="details.bsstatus == '已录入'" @click="handleDelete">删除</a-button>
       <a-button
         type="primary"
@@ -719,6 +720,25 @@
         </div>
       </div>
     </a-modal>
+    <a-modal
+      title="状态历史"
+      :maskClosable="false"
+      :width="800"
+      :visible="statusFlag"
+      @cancel="statusFlag=false">
+      <div>
+        <vxe-table border ref="xTable" :data="statusList">
+          <vxe-column field="status" title="业务状态">
+          </vxe-column>
+          <vxe-column field="opTime" title="状态时间">
+          </vxe-column>
+          <vxe-column field="remark" title="备注">
+          </vxe-column>
+          <vxe-column field="createdUserName" title="创建者">
+          </vxe-column>
+        </vxe-table>
+      </div>
+    </a-modal>
   </div>
 </template>
 <script>
@@ -805,7 +825,7 @@ export default {
   },
   beforeRouteEnter(to, from, next) {
     next(vm => {
-      vm.getRouterHis()
+      vm.getRouterHisEnter()
     })
   },
   data() {
@@ -814,6 +834,7 @@ export default {
       fileList: [],
       modelconfirm: false,
       modelVisible: false,
+      statusFlag: false,
       textEntryModalVisible: false,
       textEntryModalTitle: '',
       historyData: {},
@@ -842,6 +863,7 @@ export default {
       notifypartyname: '',
       foreignAgentname: '',
       descriptionname: '',
+      statusList: [],
       isAdd: false,
       etdWeek: '',
       details: {
@@ -891,7 +913,6 @@ export default {
         this.id = this.$route.query.id
         this.isCopy = this.$route.query.isCopy
         const $data = JSON.parse(JSON.stringify(this.historyData[newId]))
-        console.log(this.historyData)
         this.fileList = $data.fileList
         if (this.isCopy && !$data.isCopy) {
           this.fileList = []
@@ -918,6 +939,46 @@ export default {
         this.init()
       }
     },
+    getRouterHisEnter() {
+      this.inChildLoading = true
+      const newId = this.$route.query.id ? this.$route.query.id.toString() : ''
+      if (Object.keys(this.historyData).includes(`copy-${newId}`) && this.$route.query.isCopy === 'true') {
+        const $data = JSON.parse(JSON.stringify(this.historyData[`copy-${newId}`]))
+        this.details = $data.bookingDetails
+        this.fileList = $data.fileList
+        this.id = this.$route.query.id
+        this.isCopy = this.$route.query.isCopy
+        this.$forceUpdate()
+      } else if (Object.keys(this.historyData).includes(newId)) {
+        this.id = this.$route.query.id
+        this.isCopy = this.$route.query.isCopy
+        const $data = JSON.parse(JSON.stringify(this.historyData[newId]))
+        this.fileList = $data.fileList
+        if (this.isCopy && !$data.isCopy) {
+          this.fileList = []
+          const copyData = {
+            id: 0,
+            bookingno: '',
+            files: {},
+            tempFileNames: [],
+            notifyparty: $data.bookingDetails.notifyparty,
+            consignee: $data.bookingDetails.consignee,
+            shipper: $data.bookingDetails.shipper,
+            ctnList: [],
+            serviceList: []
+          }
+          this.details = { ...JSON.parse(JSON.stringify(copyData)) }
+        } else {
+          this.init()
+        }
+        this.$forceUpdate()
+      } else {
+        this.id = this.$route.query.id
+        this.isCopy = this.$route.query.isCopy
+        this.$forceUpdate()
+        this.init()
+      }
+    },
     init() {
       this.options = this.$options.filters['dictData']('booking_service_item')
       this.options.forEach(item => {
@@ -939,6 +1000,9 @@ export default {
         this.fileList = []
       }
     },
+    handleOpenStatus() {
+      this.statusFlag = true
+    },
     handleCopy() {
       this.$router.push({
         name: 'BookingCustomerDetail',
@@ -995,6 +1059,14 @@ export default {
             })
             this.fileList = arr
           }
+          res.data.logList.forEach(item => {
+            const arr = item.status.split('，')
+            item.status = arr[0]
+            if (arr.length > 1) {
+              item.remark = arr[1].slice(5, arr[1].length)
+            }
+          })
+          this.statusList = res.data.logList
         } else {
           this.$message.error(res.message)
           this.loading = false
diff --git a/src/views/main/BookingCustomerLedger/detail/style/mailingInfo.less b/src/views/main/BookingCustomerLedger/detail/style/mailingInfo.less
index 460184c..897046f 100644
--- a/src/views/main/BookingCustomerLedger/detail/style/mailingInfo.less
+++ b/src/views/main/BookingCustomerLedger/detail/style/mailingInfo.less
@@ -525,3 +525,551 @@
       height: 36px!important;
       line-height: 36px!important;
   }
+
+  .right{
+    .title {
+    height: 42px;
+    line-height: 42px;
+    border-bottom: 1px solid #d9d9d9;
+    font-size: 14px;
+    color: #333;
+    font-weight: 600;
+    .iconfont {
+      font-size: 14px;
+      margin-right: 7px;
+      color: @primary-color;
+    }
+    .right {
+      float: right;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 47px;
+      color: @primary-color;
+      .iconfont {
+        color: @primary-color;
+        font-size: 16px;
+        line-height: 47px;
+        margin-right: 5px;
+        vertical-align: bottom;
+      }
+    }
+    .right:hover {
+      cursor: pointer;
+    }
+  }
+  .content {
+    max-height: 300px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    &::-webkit-scrollbar {
+      width: 0 !important;
+    }
+    .no-data {
+      text-align: center;
+      line-height: 20px;
+      display: block;
+      .iconfont {
+        font-size: 40px;
+        line-height: 70px;
+        display: block;
+        color: #999;
+      }
+      .text {
+        font-size: 13px;
+        color: #999;
+        span {
+          color: @primary-color;
+          cursor: pointer;
+        }
+      }
+    }
+    .tip {
+      width: 100%;
+      padding: 10px;
+      line-height: 22px;
+      font-size: 13px;
+      color: #666;
+      position: relative;
+      margin-top: 10px;
+      &::before {
+        width: 100%;
+        height: 100%;
+        content: '';
+        background: @primary-color;
+        opacity: 0.08;
+        position: absolute;
+        top: 0;
+        left: 0;
+        border-radius: 4px;
+      }
+      &.no-data {
+        text-align: center;
+        line-height: 20px;
+        .iconfont {
+          font-size: 40px;
+          line-height: 70px;
+          display: block;
+          color: #999;
+        }
+        .text {
+          font-size: 13px;
+          color: #999;
+  
+          .btn {
+            color: @primary-color;
+            cursor: pointer;
+            display: inline-block;
+          }
+        }
+      }
+    }
+    .items {
+      display: inline-block;
+      height: 28px;
+      line-height: 26px;
+      border: 1px dashed #ccc;
+      border-radius: 4px;
+      padding: 0 10px;
+      margin-top: 10px;
+      margin-right: 10px;
+      font-size: 13px;
+      cursor: pointer;
+      position: relative;
+      .edit{
+        width: 17px;
+        height: 17px;
+        border-radius: 0 3px 0 0;
+        background: #c9c9c9;
+        display: none;
+        position: absolute;
+        right: -1px;
+        top: -1px;
+        text-align: center;
+        line-height: 17px;
+      }
+      &:hover {
+
+        border: 1px dashed @primary-color;
+        position: relative;
+        &::before {
+          width: 100%;
+          height: 100%;
+          content: '';
+          background: @primary-color;
+          opacity: 0.08;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border-radius: 4px;
+        }
+        .edit{
+          display: block;
+        }
+      }
+      &.active {
+        background: @primary-color;
+        border: 1px dashed @primary-color;
+        color: #fff;
+      }
+    }
+    .remark {
+      padding-bottom: 8px;
+      display: flex;
+      .remark-main {
+        flex: 1;
+        .top {
+          font-size: 13px;
+          line-height: 24px;
+          color: #666;
+          font-weight: 600;
+          position: relative;
+          padding-left: 20px;
+          .iconfont {
+            margin-right: 4px;
+            color: @primary-color;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
+        .bottom {
+          color: #999;
+          padding-left: 20px;
+          font-size: 12px;
+        }
+      }
+      .remark-btn {
+        width: 24px;
+        height: 100%;
+        line-height: 24px;
+        color: @primary-color;
+        cursor: pointer;
+      }
+    }
+    .booking-log {
+      // padding-bottom: 10px;
+      .log {
+        // min-height: 30px;
+        // line-height: 30px;
+        line-height: 15px;
+        font-size: 14px;
+        color: #666;
+        display: flex;
+        position: relative;
+        &::before {
+          content: '';
+          position: absolute;
+          width: 1px;
+          height: 120%;
+          /*background: #ccc;*/
+          border-right: 1px dashed #ccc;
+          top: 0;
+          left: 0;
+          // top: 22px;
+          // left: 76px;
+          left: 122px;
+        }
+        i:hover {
+          cursor: inherit !important;
+        }
+        // &:nth-last-child(1){
+        //   &::before{
+        //     display: none;
+        //   }
+        // }
+        .log-time {
+          // width: 65px;
+          // text-align: center;
+          // height: 50px;
+          // line-height: 15px;
+          // font-size: 12px;
+          // color: #999;
+          // // padding-top: 4px;
+          // margin-right: 30px;
+          width: 110px;
+          text-align: center;
+          height: 40px;
+          line-height: 15px;
+          font-size: 12px;
+          color: #999;
+          margin-right: 30px;
+        }
+        .icon {
+          width: 30px;
+          color: @primary-color;
+          font-size: 16px;
+          text-align: left;
+          cursor: pointer;
+          position: absolute;
+          top: 0;
+          // left: 69.5px;
+          left: 115px;
+        }
+        .log-name {
+          flex: 1;
+          .min-log {
+            font-size: 12px;
+            color: #999;
+            margin-left: 4px;
+          }
+        }
+      }
+      .child-log {
+        min-height: 15px;
+        line-height: 15px;
+        font-size: 14px;
+        color: #666;
+        display: flex;
+        position: relative;
+        margin-top: -10px;
+  
+        &::before {
+          content: '';
+          position: absolute;
+          width: 1px;
+          height: 120%;
+          // background: @primary-color;
+          // background: #ccc;
+          top: 0;
+          // left: 0;
+          // top: 22px;
+          // left: 77px;
+          // left: 76px;
+          left: 122px;
+          border-right: 1px dashed #ccc;
+        }
+        // &:nth-last-child(1){
+        //   &::before{
+        //     display: none;
+        //   }
+        // }
+        .log-time {
+          // width: 70px;
+          width: 110px;
+          text-align: left;
+          height: 35px;
+          line-height: 15px;
+          font-size: 12px;
+          color: #999;
+          // padding-top: 4px;
+          margin-right: 30px;
+        }
+        .icon {
+          width: 30px;
+          color: #999;
+          font-size: 16px;
+          text-align: left;
+          position: absolute;
+          top: 0;
+          // left: 68.5px;
+          left: 115px;
+        }
+        .log-name {
+          flex: 1;
+          display: flex;
+          .min-log {
+            font-size: 12px;
+            color: #999;
+            margin-left: 4px;
+            flex: 1;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+        }
+      }
+      .hideline {
+        &::before {
+          display: none;
+        }
+      }
+      &:nth-last-of-type(1) {
+        .child-list {
+          .child-log {
+            &:nth-last-of-type(1) {
+              &::before {
+                display: none;
+              }
+            }
+            &:nth-last-of-type(2) {
+              &::before {
+                height: 110%;
+                top: 10px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .file-btn {
+      margin-top: 10px;
+      color: #fff;
+    }
+    .file {
+      padding: 10px 0;
+      border-bottom: 1px solid #eee;
+      &:nth-last-child(1) {
+        border: none;
+      }
+      .top {
+        display: flex;
+        .left {
+          flex: 1;
+          font-size: 14px;
+          color: #666;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          i {
+            margin-right: 8px;
+          }
+          .icon-Excel {
+            color: #00cc99;
+          }
+          .icon-tupian {
+            color: #ff9900;
+          }
+          .icon-pdf {
+            color: #ff0033;
+          }
+          .icon-file-word {
+            color: #3366cc;
+          }
+        }
+        .right {
+          width: 40px;
+          i {
+            font-size: 14px;
+            // font-weight: 600;
+            color: @primary-color;
+            margin-right: 10px;
+            cursor: pointer;
+          }
+        }
+      }
+      .bottom {
+        font-size: 12px;
+        color: #999;
+        padding-top: 8px;
+        span {
+          margin-right: 4px;
+          margin-right: 6px;
+          i {
+            font-size: 12px;
+            margin-right: 6px;
+            color: #339999;
+          }
+        }
+      }
+    }
+    .no-data {
+      text-align: center;
+      color: #999;
+      padding: 20px 0;
+      line-height: 30px;
+      display: block;
+      .text {
+        display: inline-block;
+      }
+    }
+    .DataTime{
+      display: flex;
+      flex-direction: column;
+      >div{
+        display: flex;
+        margin-top: .5rem;
+        >span{
+          display: inline-block;
+          width: 2.5rem;
+          font-weight: bolder;
+          color: @primary-color;
+        }
+        >div{
+          flex: 1;
+          display: flex;
+          >p{
+            flex: 1;
+            span{
+              &:nth-child(1){
+                margin-right: .3rem;
+       
+                font-weight: 600;
+              }
+              &:nth-child(2){
+                // color: @primary-color;
+              }
+            }
+          }
+        }
+      }
+      // p{
+      //   margin: .5rem 0 0 1rem;
+      //   span{
+      //     &:nth-child(1){
+      //       display: inline-block;
+      //       width: 5rem;
+      //       font-weight: bold;
+      //     }
+      //   }
+      // }
+    }
+  }
+  .collapse-box {
+    background: #fff;
+    padding-top: 0;
+    padding-bottom: 0;
+    border: none;
+    .title {
+      border: none;
+    }
+    .cargo-info {
+      max-height: 1015px;
+      overflow-x: scroll;
+      .info-header {
+        display: flex;
+        background: #f4f4f4;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        span {
+          display: inline-block;
+          border: 1px solid #eee;
+          flex: 1;
+          &:nth-of-type(1) {
+            border-right: none;
+          }
+        }
+      }
+      .list {
+        display: flex;
+        background: #fff;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        .btn {
+          display: inline-block;
+          flex: 1;
+          border: 1px solid #eee;
+          border-top: none;
+          padding: 0 8px;
+          overflow: hidden;
+          &:nth-of-type(1) {
+            padding: 0 19px;
+            border-right: none;
+          }
+          &:nth-of-type(2) {
+            padding-right: 30px;
+            position: relative;
+          }
+        }
+        .more {
+          width: 30px;
+          text-align: center;
+          transition: 0.5s all;
+          position: absolute;
+          top: 0;
+          right: 4px;
+          color: #999;
+          &.show {
+            transform: rotate(180deg);
+          }
+        }
+      }
+      .more-detail {
+        border-left: 1px solid #eee;
+        border-right: 1px solid #eee;
+        border-bottom: 1px solid #eee;
+        background: #f4f4f4;
+        padding: 0 14px;
+        .detail-single {
+          border-bottom: 1px dashed #ccc;
+          font-size: 12px;
+          color: #999;
+          padding: 4px 0;
+          &:nth-last-of-type(1) {
+            border: none;
+          }
+          .old {
+            // height: 26px;
+            line-height: 26px;
+            color: #666;
+          }
+          .new {
+            // height: 26px;
+            line-height: 26px;
+            color: #f9a629;
+          }
+          .o-title {
+            font-size: 12px;
+            font-weight: 600;
+            margin-right: 8px;
+          }
+          .line {
+            height: 26px;
+            line-height: 26px;
+          }
+        }
+      }
+    }
+  }
+  }
diff --git a/src/views/main/BookingCustomerLedger/list/index.vue b/src/views/main/BookingCustomerLedger/list/index.vue
index 3f66f2d..cbd2b46 100644
--- a/src/views/main/BookingCustomerLedger/list/index.vue
+++ b/src/views/main/BookingCustomerLedger/list/index.vue
@@ -141,7 +141,7 @@
                   </div>
                 </template>
                 <template #bsstatusname="{ row }">
-                  <div @click="handleOpenStatus(row)" style="cursor: pointer;" class="mblno"> {{ row.bsstatus }}</div>
+                  <span @click="handleOpenStatus(row)" style="cursor: pointer;" class="mblno"> {{ row.bsstatus }}</span>
                 </template>
                 <template #vessel="{ row }">
                   <div class="vessel">{{ row.vessel }}</div>
@@ -343,16 +343,18 @@
         :visible="statusFlag"
         @cancel="statusFlag=false">
         <div>
-          <vxe-table border ref="xTable" :data="statusList">
-            <vxe-column field="status" title="业务状态">
-            </vxe-column>
-            <vxe-column field="opTime" title="状态时间">
-            </vxe-column>
-            <vxe-column field="remark" title="备注">
-            </vxe-column>
-            <vxe-column field="createdUserName" title="创建者">
-            </vxe-column>
-          </vxe-table>
+          <a-sping :sping="statusLoading">
+            <vxe-table border ref="xTable" :data="statusList">
+              <vxe-column field="status" title="业务状态">
+              </vxe-column>
+              <vxe-column field="opTime" title="状态时间">
+              </vxe-column>
+              <vxe-column field="remark" title="备注">
+              </vxe-column>
+              <vxe-column field="createdUserName" title="创建者">
+              </vxe-column>
+            </vxe-table>
+          </a-sping>
         </div>
       </a-modal>
 
@@ -1923,6 +1925,7 @@ export default {
         id: row.id
       }
       this.statusLoading = true
+      this.statusFlag = true
       BookingCustomerOrderGet(data).then(res => {
         if (res.success) {
           this.statusLoading = false
@@ -1934,7 +1937,6 @@ export default {
             }
           })
           this.statusList = res.data.logList
-          this.statusFlag = true
         } else {
           this.$message.error(res.message)
           this.statusLoading = false
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index c1ad617..6cd0118 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -729,13 +729,13 @@
                 <a-col :span="12">
                   <a-form-model-item prop="soremark">
                     <div class="tit" :class="{'required':rules['soremark'] && rules['soremark'][0].required}"><span class="iconfont icon-bianji"></span>订舱备注</div>
-                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.soremark" />
+                    <a-textarea style="height: 120px !important;line-height: 20px;" class="input-box" v-model="details.soremark" />
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="12">
                   <a-form-model-item prop="siremark">
                     <div class="tit" :class="{'required':rules['siremark'] && rules['siremark'][0].required}"><span class="iconfont icon-bianji"></span>截单备注</div>
-                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
+                    <a-textarea style="height: 120px !important;line-height: 20px;" class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
                   </a-form-model-item>
                 </a-col>
                 <!-- <a-col :span="12">