From 563ef7196697e43052877a662ef77f0f0776d910 Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Fri, 12 Jan 2024 10:08:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=88=B1=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/modular/main/BookingLedger.js         |   8 +
 src/views/main/BookingLedger/detail/index.vue |   6 +-
 .../detail/modules/operationArea.vue          | 539 +++++++---
 src/views/main/CabinInventory/index.vue       |  67 +-
 src/views/main/CabinManagement/details.vue    | 921 ++++++++++++------
 src/views/main/CabinManagement/index.vue      |  22 +-
 src/views/main/mail/mailAnalysis.vue          |   2 +-
 src/views/main/mail/mailExecute.vue           |   2 +-
 src/views/main/mail/mailRecord.vue            |   2 +-
 src/views/main/mail/mailSetting.vue           |   2 +-
 10 files changed, 1095 insertions(+), 476 deletions(-)

diff --git a/src/api/modular/main/BookingLedger.js b/src/api/modular/main/BookingLedger.js
index e39f645..3645046 100644
--- a/src/api/modular/main/BookingLedger.js
+++ b/src/api/modular/main/BookingLedger.js
@@ -1265,3 +1265,11 @@ export function PageDataNew(parameter) {
   })
 }
 
+export function BookingSlotGetAvailableSlots(parameter) {
+  return axios({
+    url: '/BookingSlot/getAvailableSlots',
+    method: 'get',
+    params: parameter
+  })
+}
+
diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
index f6bfcab..de3ccb0 100644
--- a/src/views/main/BookingLedger/detail/index.vue
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -24,6 +24,7 @@
                 @copy="copyBookingFun"
                 @addSedList="addSedList"
                 @removeOrder="removeOrderFun"
+                @handleSaveCtnList="handleSaveCtnList"
                 @frompre="frompre">
               </operationArea>
 
@@ -1294,7 +1295,10 @@ export default {
       }
       return true
     },
-
+    handleSaveCtnList(data) {
+      this.bookingDetails.ctnInputs = data
+      this.$refs.goodsTable.init()
+    },
     saveFun() {
       this.bookingOrderUpdate()
     },
diff --git a/src/views/main/BookingLedger/detail/modules/operationArea.vue b/src/views/main/BookingLedger/detail/modules/operationArea.vue
index e79ba5b..ca44e82 100644
--- a/src/views/main/BookingLedger/detail/modules/operationArea.vue
+++ b/src/views/main/BookingLedger/detail/modules/operationArea.vue
@@ -2,8 +2,7 @@
   <div class="operation-area">
     <a-card
       :bordered="false"
-      :bodyStyle="{ 'padding-top': ' 6px', 'padding-left': '5px', 'padding-bottom': '0px', 'margin-bottom': '4px' }"
-    >
+      :bodyStyle="{ 'padding-top': ' 6px', 'padding-left': '5px', 'padding-bottom': '0px', 'margin-bottom': '4px' }">
       <div class="btn-list more-view">
         <a-popconfirm
           placement="bottom"
@@ -11,8 +10,7 @@
           ok-text="是"
           cancel-text="否"
           @confirm="refreshPage"
-          @cancel="cancelRefresh"
-        >
+          @cancel="cancelRefresh">
           <button><span class="iconfont icon-shuaxin" :style="{ fontSize: '17px' }"></span>刷新</button>
         </a-popconfirm>
         <button @click="copyBooking"><span class="iconfont icon-fuzhi1"></span>复制</button>
@@ -34,9 +32,8 @@
           ok-text="是"
           cancel-text="否"
           @visibleChange="handleVisibleChange1"
-          @confirm="openModel('vgm')"
-        >
-          <button ><span class="iconfont icon-dingdan"></span>VGM</button>
+          @confirm="openModel('vgm')">
+          <button><span class="iconfont icon-dingdan"></span>VGM</button>
         </a-popconfirm>
         <button @click="openModel('trace')">
           <span class="iconfont icon-yunshu1" style="font-size:18px;"></span>运踪
@@ -47,9 +44,8 @@
           ok-text="是"
           cancel-text="否"
           @visibleChange="handleVisibleChange"
-          @confirm="openPreOrderFun"
-        >
-          <button >
+          @confirm="openPreOrderFun">
+          <button>
             <span class="iconfont icon-yunshu1" style="font-size:18px;"></span>舱单
           </button>
         </a-popconfirm>
@@ -67,19 +63,16 @@
         <button @click="openModel('vgmlink')"><span class="iconfont icon-lianjie"></span>VGM链接</button>
         <button @click="TxxpLink"><span class="iconfont icon-dayinxiaopiao"></span>提箱小票</button>
       </div>
-      <div class="btn-list single-view-4">
+      <div class="btn-list single-view-4" :style="{ width: '90px' }">
         <a-upload :file-list="fileList" :before-upload="beforeUpload" name="file" :customRequest="uploadFile">
           <button @click="ShowOCR"><span class="iconfont icon-OCR"></span>OCR</button>
         </a-upload>
+        <button @click="openModel('cabinSpace')">
+          引入舱位
+        </button>
       </div>
       <div class="btn-list single-view-1" :style="{ width: '110px' }">
-        <a-popconfirm
-          title="确定删除当前订舱？"
-          ok-text="是"
-          cancel-text="否"
-          @confirm="removeOrder"
-          @cancel="cancelRemove"
-        >
+        <a-popconfirm title="确定删除当前订舱？" ok-text="是" cancel-text="否" @confirm="removeOrder" @cancel="cancelRemove">
           <button><span class="iconfont icon-shanchu1"></span>删除</button>
         </a-popconfirm>
         <button @click="addChild()" v-if="!details.hbList || details.hbList.length === 0">
@@ -112,8 +105,7 @@
       :confirmLoading="bookingModelconfirm"
       :maskClosable="false"
       @ok="handleModelSubmit"
-      @cancel="handleModelCancel"
-    >
+      @cancel="handleModelCancel">
       <template v-if="['bookingSpace', 'cutOff'].includes(modelType)">
         <a-form>
           <a-row :gutter="16">
@@ -123,8 +115,7 @@
                 :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                 :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
                 has-feedback
-                class="ant-form-file"
-              >
+                class="ant-form-file">
                 <a-radio-group v-model="bookingModelFrom.fileRole">
                   <a-radio :style="radioStyle" :value="9"> 原始 </a-radio>
                   <a-radio :disabled="forwarderFlag" :style="radioStyle" :value="1"> 更新 </a-radio>
@@ -136,18 +127,10 @@
         </a-form>
         <template slot="footer">
           <a-button @click="handleModelCancel">关闭</a-button>
-          <a-button
-            type="primary"
-            @click="handleModelSubmit('save')"
-            :loading="EDISloading"
-          >保存 <template v-if="modelType === 'cutOff'">ESI</template><template v-else>EDI</template>文件</a-button
-          >
-          <a-button
-            type="primary"
-            @click="handleModelSubmit('send')"
-            :loading="EDIUloading"
-          >上传 <template v-if="modelType === 'cutOff'">ESI</template><template v-else>EDI</template></a-button
-          >
+          <a-button type="primary" @click="handleModelSubmit('save')" :loading="EDISloading">保存 <template
+            v-if="modelType === 'cutOff'">ESI</template><template v-else>EDI</template>文件</a-button>
+          <a-button type="primary" @click="handleModelSubmit('send')" :loading="EDIUloading">上传 <template
+            v-if="modelType === 'cutOff'">ESI</template><template v-else>EDI</template></a-button>
         </template>
       </template>
 
@@ -159,8 +142,7 @@
             type="primary"
             @click="removeModel"
             :loading="DelLoading"
-            v-if="['initCabin'].includes(modelType) || ['ladingBill'].includes(modelType)"
-          >
+            v-if="['initCabin'].includes(modelType) || ['ladingBill'].includes(modelType)">
             删除
           </a-button>
           <template v-if="modelType === 'initCabin' || modelType === 'ladingBill'">
@@ -177,13 +159,7 @@
               DOCX
             </a-button> -->
           </template>
-          <a-button
-            class="btn"
-            type="primary"
-            v-if="modelType == 'initCabin'"
-            @click="sendModel"
-            :loading="SendLoading"
-          >
+          <a-button class="btn" type="primary" v-if="modelType == 'initCabin'" @click="sendModel" :loading="SendLoading">
             发送
           </a-button>
           <a-button class="btn" type="primary" v-if="modelType == 'initCabin'" @click="handleOpenHis">
@@ -204,8 +180,7 @@
                     :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 21 } }"
                     has-feedback
-                    :style="{ marginLeft: '-18px' }"
-                  >
+                    :style="{ marginLeft: '-18px' }">
                     <a-input :allowClear="true" v-model="initCabinFrom.toName" />
                   </a-form-item>
                 </a-col>
@@ -214,8 +189,7 @@
                     label="打印格式"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <!-- <a-input :allowClear="true" v-model="initCabinFrom.attn" /> -->
                     <a-select :allowClear="true" v-model="initCabinFrom.templateId">
                       <a-select-option v-for="item in initCabinSendData" :value="item.id" :key="item.id">
@@ -231,8 +205,7 @@
                   label="ATTN"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.attn" />
                 </a-form-item>
               </a-col>
@@ -241,8 +214,7 @@
                   label="电话"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.attnTel" />
                 </a-form-item>
               </a-col>
@@ -251,8 +223,7 @@
                   label="邮箱"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.attnMail" />
                 </a-form-item>
               </a-col>
@@ -261,8 +232,7 @@
                   label="手机"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.attnPhone" />
                 </a-form-item>
               </a-col>
@@ -272,8 +242,7 @@
                   label="FROM"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.fromName" />
                 </a-form-item>
               </a-col>
@@ -282,8 +251,7 @@
                   label="电话"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.fromTel" />
                 </a-form-item>
               </a-col>
@@ -292,8 +260,7 @@
                   label="邮箱"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.fromMail" />
                 </a-form-item>
               </a-col>
@@ -302,8 +269,7 @@
                   label="手机"
                   :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                   :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                  has-feedback>
                   <a-input :allowClear="true" v-model="initCabinFrom.fromPhone" />
                 </a-form-item>
               </a-col>
@@ -315,8 +281,7 @@
                     label="提箱小票链接"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <div class="box-flex">
                       <a-input class="box-input" :allowClear="true" v-model="initCabinFrom.orderUrl.urlTxxp" />
                       <span @click="copyFun(initCabinFrom.orderUrl.urlTxxp)"><i class="iconfont icon-fuzhi2"></i></span>
@@ -328,8 +293,7 @@
                     label="VGM链接"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <div class="box-flex">
                       <a-input class="box-input" :allowClear="true" v-model="initCabinFrom.orderUrl.urlVgm" />
                       <span @click="copyFun(initCabinFrom.orderUrl.urlVgm)"><i class="iconfont icon-fuzhi2"></i></span>
@@ -341,14 +305,10 @@
                     label="SI&VGM链接"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <div class="box-flex">
                       <a-input class="box-input" :allowClear="true" v-model="initCabinFrom.orderUrl.urlVgmSi" />
-                      <span
-                        @click="copyFun(initCabinFrom.orderUrl.urlVgmSi)"
-                      ><i class="iconfont icon-fuzhi2"></i
-                      ></span>
+                      <span @click="copyFun(initCabinFrom.orderUrl.urlVgmSi)"><i class="iconfont icon-fuzhi2"></i></span>
                     </div>
                   </a-form-item>
                 </a-col>
@@ -359,8 +319,7 @@
                     label="场站"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <a-select
                       class="customer-input"
                       style="width:195px;"
@@ -369,8 +328,7 @@
                       @change="handleYardChange"
                       show-search
                       :filter-option="filterOption"
-                      :dropdownMatchSelectWidth="false"
-                    >
+                      :dropdownMatchSelectWidth="false">
                       <a-select-option v-for="(yard, yindex) in yardSelectData" :key="yindex" :value="yindex">
                         {{ yard.selectShowTab }}
                       </a-select-option>
@@ -382,14 +340,12 @@
                     label="联系人"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <a-input
                       class="box-input"
                       style="width:195px;"
                       :allowClear="true"
-                      v-model="initCabinFrom.yardcontract"
-                    />
+                      v-model="initCabinFrom.yardcontract" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="8">
@@ -397,14 +353,12 @@
                     label="电话"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <a-input
                       class="box-input"
                       style="width:195px;"
                       :allowClear="true"
-                      v-model="initCabinFrom.yardcontracttel"
-                    />
+                      v-model="initCabinFrom.yardcontracttel" />
                   </a-form-item>
                 </a-col>
                 <a-col :span="8">
@@ -412,16 +366,14 @@
                     label="截港时间"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <!-- {{ details.closingdate || '--' }} -->
                     <a-date-picker
                       :show-time="{ format: 'HH:00:00' }"
                       style="width:120px;"
                       format="YYYY-MM-DD HH:00:00"
                       v-model="initCabinFrom.closingTime"
-                      @change="closingdateChange"
-                    >
+                      @change="closingdateChange">
                       <a-icon slot="suffixIcon" type="time" style="display: none" />
                     </a-date-picker>
                   </a-form-item>
@@ -431,16 +383,14 @@
                     label="截单时间"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <!-- {{ details.closedocdate || '--' }} -->
                     <a-date-picker
                       style="width:120px;"
                       :show-time="{ format: 'HH:00:00' }"
                       format="YYYY-MM-DD HH:00:00"
                       v-model="initCabinFrom.closeDocTime"
-                      @change="closedocdateChange"
-                    >
+                      @change="closedocdateChange">
                       <a-icon slot="suffixIcon" type="time" style="display: none" />
                     </a-date-picker>
                   </a-form-item>
@@ -450,16 +400,14 @@
                     label="截VGM时间"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <!-- {{ details.closevgmdate || '--' }} -->
                     <a-date-picker
                       show-time
                       style="width:120px;"
                       format="YYYY-MM-DD HH:mm:ss"
                       v-model="initCabinFrom.vgmTime"
-                      @change="closevgmdateChange"
-                    >
+                      @change="closevgmdateChange">
                       <a-icon slot="suffixIcon" type="time" style="display: none" />
                     </a-date-picker>
                   </a-form-item>
@@ -471,16 +419,14 @@
                     label="备注"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <div class="box-flex">
                       <a-textarea
                         class="remark-input"
                         style="width:1000px !important; text-align: left;"
                         :allowClear="true"
                         :auto-size="{ minRows: 7, maxRows: 7 }"
-                        v-model="initCabinFrom.remark"
-                      />
+                        v-model="initCabinFrom.remark" />
                     </div>
                     <!-- <div class="box-flex">
                       <a-input
@@ -502,18 +448,13 @@
                     label="VGM提交地址"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <div class="box-flex">
                       <a-input
                         style="width:1000px !important; text-align: left;"
                         :allowClear="true"
-                        v-model="initCabinFrom.orderUrl.urlVgm"
-                      />
-                      <span
-                        style="margin-left:7px;"
-                      ><i class="iconfont icon-fuzhi2"><!--复制--></i></span
-                      >
+                        v-model="initCabinFrom.orderUrl.urlVgm" />
+                      <span style="margin-left:7px;"><i class="iconfont icon-fuzhi2"><!--复制--></i></span>
                     </div>
                   </a-form-item>
                 </a-col>
@@ -524,8 +465,7 @@
                     label="主提单号"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.mblno || '--' }}
                   </a-form-item>
                 </a-col>
@@ -534,8 +474,7 @@
                     label="分提单号"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.hblno || '--' }}
                   </a-form-item>
                 </a-col>
@@ -544,8 +483,7 @@
                     label="海关航次"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.voyno || '--' }}
                   </a-form-item>
                 </a-col>
@@ -554,8 +492,7 @@
                     label="开船日期"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.etd || '--' }}
                   </a-form-item>
                 </a-col>
@@ -564,8 +501,7 @@
                     label="截港时间"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.closingdate || '--' }}
                   </a-form-item>
                 </a-col>
@@ -574,8 +510,7 @@
                     label="截单时间"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.closedocdate || '--' }}
                   </a-form-item>
                 </a-col>
@@ -584,8 +519,7 @@
                     label="截VGM时间"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 4 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.closevgmdate || '--' }}
                   </a-form-item>
                 </a-col>
@@ -594,8 +528,7 @@
                     label="装货港"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.portload || '--' }}
                   </a-form-item>
                 </a-col>
@@ -604,8 +537,7 @@
                     label="卸货港"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.portdischarge || '--' }}
                   </a-form-item>
                 </a-col>
@@ -614,8 +546,7 @@
                     label="目的地"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.destination || '--' }}
                   </a-form-item>
                 </a-col>
@@ -624,8 +555,7 @@
                     label="件重尺"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     {{ details.pkgs || '--' }} / {{ details.kgs || '--' }} / {{ details.cbm || '--' }}
                   </a-form-item>
                 </a-col>
@@ -636,15 +566,13 @@
                     label="备注"
                     :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                    has-feedback
-                  >
+                    has-feedback>
                     <div class="box-flex">
                       <a-textarea
                         style="width:1000px !important; text-align: left;"
                         :allowClear="true"
                         :auto-size="{ minRows: 3, maxRows: 3 }"
-                        v-model="initCabinFrom.remark"
-                      />
+                        v-model="initCabinFrom.remark" />
                     </div>
                   </a-form-item>
                 </a-col>
@@ -694,8 +622,7 @@
               @click="FnCilckTemplateType(item.id)"
               class="items"
               :span="11"
-              :offset="index % 2 == 0 ? 0 : 1"
-            >
+              :offset="index % 2 == 0 ? 0 : 1">
               <span>·</span>{{ item.displayName }}
             </a-col>
           </a-row>
@@ -713,8 +640,7 @@
       placement="right"
       :visible="OcrVisible"
       @close="OcrOnClose"
-      class="OCRBox"
-    >
+      class="OCRBox">
       <a-row justify="end" :style="{ width: '100%', marginTop: '5px' }">
         <a-col :span="6" :offset="18">
           <span>缩放比例：</span>
@@ -736,8 +662,7 @@
         @mousedown="mousedown"
         @mouseup="mouseup"
         @mousemove="mousemove"
-        :style="{ backgroundImage: `url(${imgSrc})` }"
-      ></canvas>
+        :style="{ backgroundImage: `url(${imgSrc})` }"></canvas>
       <ul class="CvBox" v-if="CvBoxType" :style="{ left: `${Bx}px`, top: `${By}px` }">
         <li v-for="item in BCvData" :key="item.name" @click="FnClickCvBox(item)">{{ item.name }}</li>
       </ul>
@@ -755,15 +680,13 @@
                 label="请选择订阅内容"
                 :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
                 :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                has-feedback
-              >
+                has-feedback>
                 <a-checkbox-group
                   class="trace-check"
                   v-model="traceValue"
                   name="checkboxgroup"
                   :options="traceOptions"
-                  @change="onTraceChange"
-                />
+                  @change="onTraceChange" />
               </a-form-item>
             </a-col>
           </a-row>
@@ -794,8 +717,7 @@
                     :showLabel="['shortName']"
                     :openSearch="true"
                     :isCopy="false"
-                    @change="getSelectViewRes"
-                  ></selectView>
+                    @change="getSelectViewRes"></selectView>
                 </a-form-model-item>
               </a-col>
             </a-row>
@@ -831,8 +753,7 @@
           @change="tablePaginationChange"
           :pagination="pagination"
           :columns="columns"
-          :data-source="data"
-        >
+          :data-source="data">
           <a slot="action" slot-scope="text, record" @click="handleInto(record)">引入</a>
         </a-table>
       </a-spin>
@@ -845,8 +766,7 @@
           @change="tablePaginationChange"
           :pagination="pagination"
           :columns="hisColums"
-          :data-source="hisData"
-        >
+          :data-source="hisData">
         </a-table>
       </a-spin>
     </a-modal>
@@ -1096,12 +1016,7 @@
       </a-spin>
       <template slot="footer">
         <a-spin :spinning="voltaLoading">
-          <a-popconfirm
-            title="确认发送?"
-            ok-text="是"
-            cancel-text="否"
-            @confirm="handleSend"
-          >
+          <a-popconfirm title="确认发送?" ok-text="是" cancel-text="否" @confirm="handleSend">
             <a-button type="primary">发送</a-button>
           </a-popconfirm>
 
@@ -1111,6 +1026,98 @@
       </template>
     </a-modal>
 
+    <a-modal @ok="handleSaveCabin" @cancel="cabinSpaceFlag = false" width="1300px" v-model="cabinSpaceFlag" title="引入舱位">
+      <a-form :model="cabinQueryForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+        <a-row>
+          <a-col :span="6">
+            <a-form-item label="装货港">
+              <a-input v-model="cabinQueryForm.PORTLOAD" allow-clear placeholder="请输入船名" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="卸货港">
+              <a-input v-model="cabinQueryForm.PORTDISCHARGE" allow-clear placeholder="请输入航次" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="船名">
+              <a-input v-model="cabinQueryForm.VESSEL" allow-clear placeholder="请输入航次" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="航次">
+              <a-input v-model="cabinQueryForm.VOYNO" allow-clear placeholder="请输入航次" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <a-row>
+          <a-col :span="6">
+            <a-form-item label="承运模式">
+              <a-select v-model="cabinQueryForm.CARRIAGE_TYPE">
+                <a-select-option value="DIRECT_SHIP">
+                  直达
+                </a-select-option>
+                <a-select-option value="TRANSFER_SHIP">
+                  中转
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="订舱方式">
+              <a-select v-model="cabinQueryForm.BOOKING_SLOT_TYPE">
+                <a-select-option value="CONTRACT_ORDER">
+                  合约订舱
+                </a-select-option>
+                <a-select-option value="SPOT_ORDER">
+                  SPOT订舱
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <a-form-item label="箱型箱量">
+              <a-input v-model="cabinQueryForm.CTN_STAT" allow-clear placeholder="请输入航次" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="6">
+            <div class="model-btn-list" style="margin-bottom: 0px;margin-left: 38px;margin-top: 3px;">
+              <a-button class="btn" type="primary">查询</a-button>
+              <a-button class="btn" style="margin-left: 8px">重置</a-button>
+            </div>
+          </a-col>
+        </a-row>
+      </a-form>
+      <a-table
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :scroll="{ x: 1200 }"
+        size="small"
+        :pagination="false"
+        :columns="cabinColums"
+        :data-source="cabinList">
+        <div slot="vessel" slot-scope="text,record">{{ record.vessel }}/{{ record.voyno }}</div>
+        <div
+          slot="opera"
+          slot-scope="text,record,index"
+          @click="handleOpentear(record, index)"
+          style="cursor: pointer;color: rgb(11, 124, 199);">选择</div>
+      </a-table>
+    </a-modal>
+
+    <a-modal @cancel="tearFlag = false" width="700px" @ok="handleSaveTear" v-model="tearFlag">
+      <div>订舱提单号:{{ editTear.sloT_BOOKING_NO }}</div>
+      <div class="tear-list">
+        <div class="item" v-for="item in editTear.ctnList" :key="item.gid">
+          <span class="item-left">{{ item.ctnall }}</span>
+          <a-input-number style="width:50px;" v-model="item.ctnnum" :min="0" :max="item.maxNum"> </a-input-number>
+        </div>
+      </div>
+      <div>
+        <span style="color:rgb(114, 184, 9);">已选箱型：{{ boxTotal }}</span>
+        剩余箱型：{{ boxRemaining }}
+      </div>
+    </a-modal>
+
     <pre-order ref="preOrder" :details="details" @frompre="frompre" />
   </div>
 </template>
@@ -1140,7 +1147,8 @@ import {
   LetterYardHis,
   CheckAndInitVOLTAEdi,
   DownloadVOLTAEdiSI,
-  SendVOLTAEdiSI
+  SendVOLTAEdiSI,
+  BookingSlotGetAvailableSlots
 } from '@/api/modular/main/BookingLedger'
 import { BookingTruckGetTruckListByBooking } from '@/api/modular/main/SendCar'
 import { mapGetters } from 'vuex'
@@ -1175,6 +1183,12 @@ export default {
       id: this.$route.query.id,
       labelCol: { span: 6 },
       voltaData: [],
+      boxRemaining: '',
+      boxTotal: '',
+      selectedRowKeys: [],
+      tearFlag: false,
+      editTear: {},
+      cabinQueryForm: {},
       visible1: false,
       voltaColumns: [
         {
@@ -1232,6 +1246,94 @@ export default {
       hisLoading: false,
       voltaFlag: false,
       modelType: '',
+      cabinColums: [
+        {
+          dataIndex: 'sloT_BOOKING_NO',
+          key: 'sloT_BOOKING_NO',
+          title: '舱位提单号',
+          width: 150
+        },
+        {
+          dataIndex: 'contracT_NO',
+          key: 'contracT_NO',
+          title: '合约号',
+          width: 100
+        },
+        {
+          dataIndex: 'carrier',
+          key: 'carrier',
+          title: '船公司',
+          width: 100,
+          ellipsis: true
+        },
+        {
+          title: '订舱抬头',
+          dataIndex: 'bookinG_PARTY',
+          key: 'bookinG_PARTY',
+          width: 100
+        },
+        {
+          title: '订舱方式',
+          dataIndex: 'bookinG_SLOT_TYPE_NAME',
+          key: 'bookinG_SLOT_TYPE_NAME',
+          width: 80
+        },
+        {
+          title: '承运模式',
+          key: 'carriagE_TYPE_NAME',
+          dataIndex: 'carriagE_TYPE_NAME',
+          width: 80
+        },
+        {
+          title: '船名/航次',
+          key: 'vessel',
+          dataIndex: 'vessel',
+          scopedSlots: { customRender: 'vessel' },
+          width: 120,
+          ellipsis: true
+        },
+        {
+          title: '装货港',
+          key: 'portload',
+          dataIndex: 'portload',
+          width: 100,
+          ellipsis: true
+        },
+        {
+          title: '卸货港',
+          key: 'portdischarge',
+          dataIndex: 'portdischarge',
+          width: 100,
+          ellipsis: true
+        },
+        {
+          title: '箱型箱量（余量）',
+          key: 'ctN_STAT',
+          dataIndex: 'ctN_STAT',
+          width: 200,
+          ellipsis: true
+        },
+        {
+          title: 'ETD',
+          key: 'etd',
+          dataIndex: 'etd',
+          width: 180
+        },
+        {
+          title: 'ETA',
+          key: 'eta',
+          dataIndex: 'eta',
+          width: 180
+        },
+        {
+          title: '操作',
+          key: 'opera',
+          dataIndex: 'opera',
+          scopedSlots: { customRender: 'opera' },
+          width: 60,
+          fixed: 'right'
+        }
+      ],
       voltaLoading: false,
       voltaForm: {
         notifyAddr: '',
@@ -1513,6 +1615,7 @@ export default {
       SaveLoading: false,
       SendLoading: false,
       DelLoading: false,
+      cabinSpaceFlag: false,
       PrintModalVisible: false,
       OcrVisible: false,
       fileList: [],
@@ -1557,9 +1660,11 @@ export default {
       ],
       traceValue: [],
       traceModalVisible: false,
+      tearIndex: 0,
       visible: false,
       cateCode: '',
       spinning: false,
+      cabinList: [],
       yardSelectData: null,
       initCabinSendData: [],
       serviceItem: []
@@ -1571,6 +1676,7 @@ export default {
     this.$bus.$on('bookingServiceItem', val => {
       this.serviceItem = val
     })
+    this.getCabinList()
   },
   watch: {
     scale() {
@@ -1593,12 +1699,74 @@ export default {
       if (printType != print) {
         this.GetPrintData(this.cateCode, printType)
       }
+    },
+    editTear: {
+      handler(nval, oval) {
+        if (nval.ctnList && nval.ctnList.length > 0) {
+          let str = ''
+          let str1 = ''
+          nval.ctnList.forEach(item => {
+            if (item.ctnnum > 0) {
+              str += item.ctnall + '*' + ' ' + item.ctnnum + ' '
+            }
+          })
+          nval.ctnListCopy.forEach(ite => {
+            nval.ctnList.forEach(item => {
+              if (item.ctnall === ite.ctnall) {
+                if (item.ctnnum < ite.ctnnum) {
+                  const num = ite.ctnnum - item.ctnnum
+                  str1 += item.ctnall + '*' + ' ' + num + ' '
+                }
+              }
+            })
+          })
+          this.boxTotal = str
+          this.boxRemaining = str1
+        } else {
+          this.boxTotal = ''
+          this.boxRemaining = ''
+        }
+      },
+      deep: true,
+      immediate: true
     }
   },
   methods: {
     frompre(data) {
       this.$emit('frompre', data)
     },
+    handleSaveTear() {
+      this.$set(this.cabinList, this.tearIndex, this.editTear)
+      this.$forceUpdate()
+      this.tearFlag = false
+    },
+    handleOpentear(row, index) {
+      this.editTear = JSON.parse(JSON.stringify(row))
+      this.tearFlag = true
+      this.tearIndex = index
+    },
+    getCabinList() {
+      BookingSlotGetAvailableSlots().then(res => {
+        if (res.success) {
+          res.data.forEach(item => {
+            item.ctN_STAT = ''
+            if (item.ctnList) {
+              item.ctnListCopy = JSON.parse(JSON.stringify(item.ctnList))
+            }
+            item.ctnList.forEach(ite => {
+              item.ctN_STAT += ite.ctncode + '*' + ite.ctnnum + ' '
+              ite.maxNum = JSON.parse(JSON.stringify(ite.ctnnum))
+            })
+          })
+          this.cabinList = res.data
+        } else {
+          this.$message.error(res.data.message)
+        }
+      })
+    },
+    onSelectChange(selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys;
+    },
     handleDownBW() {
       this.$refs.voltaForm.validate(valid => {
         if (valid) {
@@ -1910,6 +2078,30 @@ export default {
     beforeUpload(file) {
       // this.$bus.$emit('WebTest001', { upFileList: file, attachCode: 'other', attachName: '其他' })
     },
+    handleSaveCabin() {
+      const arr = []
+      this.cabinList.forEach((item, index) => {
+        this.selectedRowKeys.forEach(ite => {
+          if (index == ite) {
+            arr.push(item.ctnList)
+          }
+        })
+      })
+      const arr2 = arr.reduce((a, b) => { return a.concat(b) });
+      const newArr = []
+      arr2.forEach(el => {
+            const res = newArr.findIndex(ol => {
+                return el.ctnall === ol.ctnall;
+            });
+            if (res !== -1) {
+                newArr[res].ctnnum = newArr[res].ctnnum + el.ctnnum
+            } else {
+                newArr.push(el);
+            }
+        })
+      console.log(newArr)
+      this.$emit('handleSaveCtnList', newArr)
+    },
     uploadFile(file) {
       const formData = new FormData()
       formData.append('file', file.file)
@@ -2088,6 +2280,8 @@ export default {
         this.sampleBillPdf()
       } else if (type === 'vgmlink') {
         this.getVgmLink()
+      } else if (type === 'cabinSpace') {
+        this.cabinSpaceFlag = true
       }
     },
     emnuHeader(type) {
@@ -2253,7 +2447,7 @@ export default {
             _this.sendXHZ()
           }
         },
-        onCancel() {},
+        onCancel() { },
         class: 'test'
       })
     },
@@ -2700,4 +2894,31 @@ export default {
   }
 
 }
+
+.tear-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 15px 0;
+
+  .item {
+    margin-right: 20px;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: flex-start;
+
+    .item-left {
+      background: #f59a23;
+      color: white;
+      text-align: center;
+      height: 31px;
+      line-height: 31px;
+      display: inline-block;
+      padding: 0 5px;
+    }
+  }
+}
+
+/deep/ .ant-input-number-handler-wrap {
+  opacity: 1;
+}
 </style>
diff --git a/src/views/main/CabinInventory/index.vue b/src/views/main/CabinInventory/index.vue
index d34e128..cc98c12 100644
--- a/src/views/main/CabinInventory/index.vue
+++ b/src/views/main/CabinInventory/index.vue
@@ -34,7 +34,14 @@
             </a-col>
             <a-col :span="8">
               <a-form-item label="箱型箱量">
-                <a-input v-model="form.ctN_STAT" allow-clear placeholder="请输入箱型箱量" />
+                <a-select
+                  mode="multiple"
+                  v-model="form.ctN_STAT"
+                  style="width: 100%"
+                  placeholder="请选择箱型箱量"
+                >
+                  <a-select-option v-for="(item,index) in ctnallList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
+                </a-select>
               </a-form-item>
             </a-col>
             <a-col :span="7">
@@ -95,12 +102,17 @@ import {
   BookingSlotPageStock,
   BookingSlotRefreshStock
 } from '@/api/modular/main/CompanySiteaccount'
-
+import { mapGetters } from 'vuex'
 import columnSetting from '@/components/tableColumnSetting'
 export default {
   components: {
     columnSetting
   },
+  computed: {
+    ...mapGetters([
+      'ctnallList'
+    ])
+  },
   data() {
     return {
       TypeData: [],
@@ -125,46 +137,45 @@ export default {
           fixed: 'left'
         },
         {
-          title: '总库存',
+          title: '订舱抬头',
           align: 'center',
-          width: '100',
-          dataIndex: 'totaL_ORDERS',
+          width: '160',
+          dataIndex: 'bookinG_PARTY',
           fixed: 'left'
         },
         {
-          title: '剩余库存',
+          title: '合约号',
           align: 'center',
-          width: '100',
-          dataIndex: 'remaiN_CTNS_NUM',
+          width: '160',
+          dataIndex: 'contracT_NO',
           fixed: 'left'
         },
         {
-          title: '直达',
+          title: '订舱方式',
           align: 'center',
-          width: '100',
-          dataIndex: 'contracT_NO',
+          width: '160',
+          dataIndex: 'bookinG_SLOT_TYPE_NAME',
           fixed: 'left'
         },
         {
-          title: '中转',
+          title: '总库存',
           align: 'center',
           width: '100',
-          dataIndex: 'carriagE_TYPE_NAME',
+          dataIndex: 'totaL_ORDERS',
           fixed: 'left'
         },
         {
-          title: '合约订舱',
+          title: '剩余库存',
           align: 'center',
           width: '100',
-          dataIndex: 'bookinG_SLOT_TYPE_NAME',
+          dataIndex: 'remaiN_CTNS_NUM',
           fixed: 'left'
         },
         {
-          title: 'SPOT订舱',
+          title: '取消库存',
           align: 'center',
-          width: '150',
-          dataIndex: '123',
-          fixed: 'left'
+          width: '100',
+          dataIndex: 'portdischarge'
         },
         {
           title: 'WEEK',
@@ -185,18 +196,7 @@ export default {
           width: '100',
           dataIndex: 'ctN_STAT'
         },
-        {
-          title: '合计库存',
-          align: 'center',
-          width: '100',
-          dataIndex: 'portload'
-        },
-        {
-          title: '取消库存',
-          align: 'center',
-          width: '100',
-          dataIndex: 'portdischarge'
-        },
+
         {
           title: 'ETD',
           align: 'center',
@@ -242,7 +242,7 @@ export default {
       this.form = {}
     },
     handlePageChange({ currentPage, pageSize }) {
-      this.queryParam.pageNo = currentPage
+      this.queryParam.currentPage = currentPage
       this.queryParam.pageSize = pageSize
       this.FnGetData()
     },
@@ -258,6 +258,9 @@ export default {
         this.form.etD_START = this.form.etd[0]
         this.form.etD_END = this.form.etd[1]
       }
+      if (this.form.ctN_STAT) {
+        this.form.ctN_STAT = this.form.ctN_STAT.join(',')
+      }
       BookingSlotPageStock(this.form).then(res => {
         if (res.success) {
           this.loadData = res.data.rows
diff --git a/src/views/main/CabinManagement/details.vue b/src/views/main/CabinManagement/details.vue
index d962106..099bb54 100644
--- a/src/views/main/CabinManagement/details.vue
+++ b/src/views/main/CabinManagement/details.vue
@@ -1,288 +1,362 @@
 <template>
-  <div class="main">
-    <a-spin :spinning="loading">
-      <div class="title">{{ type === 'Add' ? '舱位新增' : '舱位修改' }}</div>
-      <div style="margin-bottom: 20px;">
-        <a-button type="primary" @click="handleSave">保存</a-button>
-        <a-button v-if="type === 'Edit'" style="margin: 0 10px;" type="primary">提交</a-button>
-        <a-button v-if="type === 'Edit'" type="primary">审核</a-button>
-        <a-button v-if="type === 'Edit'" style="margin: 0 10px;" type="primary">提交审核</a-button>
-        <a-popconfirm title="确认删除吗？" ok-text="是" cancel-text="否" @confirm="handleDelete">
-          <a-button v-if="type === 'Edit'" type="danger">作废</a-button>
-        </a-popconfirm>
-      </div>
-      <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
-        <a-row>
-          <a-col :span="6">
-            <a-form-model-item label="订舱编号">
-              <a-input v-model="form.sloT_BOOKING_NO" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="船名">
-              <auto-complete
-                v-model="form.vessel"
-                @search="onSearch"
-                style="width: 100%"
-                optionLabelProp="label"
-                :dropdown-match-select-width="false"
-                :defaultActiveFirstOption="false"
-                :backfill="false">
-                <template slot="dataSource">
-                  <a-select-option
-                    v-for="(item, index) in dataSource"
-                    :key="index"
-                    :value="item.vessel"
-                    :label="item.vessel">
-                    <div class="vessel-label">
-                      <div class="title">{{ item.vessel }}</div>
-                      <div class="voyno">
-                        航次： <span>{{ item.voyno || '--' }}</span>
-                      </div>
-                      <div class="etd">
-                        ETD: <span>{{ item.etd || '--' }}</span>
+  <a-spin :spinning="loading">
+    <div class="main">
+      <div style="width: 80%;margin-right: 20px;background: white;padding: 10px;">
+        <div class="title">{{ type === 'Add' ? '舱位新增' : '舱位修改' }}</div>
+        <div style="margin-bottom: 20px;">
+          <a-button type="primary" @click="handleSave">保存</a-button>
+          <a-button v-if="type === 'Edit'" style="margin: 0 10px;" type="primary">提交</a-button>
+          <a-button v-if="type === 'Edit'" type="primary">审核</a-button>
+          <a-button v-if="type === 'Edit'" style="margin: 0 10px;" type="primary">提交审核</a-button>
+          <a-popconfirm title="确认删除吗？" ok-text="是" cancel-text="否" @confirm="handleDelete">
+            <a-button v-if="type === 'Edit'" type="danger">作废</a-button>
+          </a-popconfirm>
+        </div>
+        <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+          <a-row>
+            <a-col :span="6">
+              <a-form-model-item label="订舱编号">
+                <a-input v-model="form.sloT_BOOKING_NO" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="船名">
+                <auto-complete
+                  v-model="form.vessel"
+                  @search="onSearch"
+                  style="width: 100%"
+                  optionLabelProp="label"
+                  :dropdown-match-select-width="false"
+                  :defaultActiveFirstOption="false"
+                  :backfill="false">
+                  <template slot="dataSource">
+                    <a-select-option
+                      v-for="(item, index) in dataSource"
+                      :key="index"
+                      :value="item.vessel"
+                      :label="item.vessel">
+                      <div class="vessel-label">
+                        <div class="title">{{ item.vessel }}</div>
+                        <div class="voyno">
+                          航次： <span>{{ item.voyno || '--' }}</span>
+                        </div>
+                        <div class="etd">
+                          ETD: <span>{{ item.etd || '--' }}</span>
+                        </div>
                       </div>
-                    </div>
+                    </a-select-option>
+                  </template>
+                </auto-complete>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="航次">
+                <a-input v-model="form.voyno" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="订舱方式">
+                <a-select v-model="form.bookinG_SLOT_TYPE">
+                  <a-select-option value="CONTRACT_ORDER">
+                    合约订舱
                   </a-select-option>
-                </template>
-              </auto-complete>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="航次">
-              <a-input v-model="form.voyno" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="订舱方式">
-              <a-select v-model="form.bookinG_SLOT_TYPE">
-                <a-select-option value="CONTRACT_ORDER">
-                  合约订舱
-                </a-select-option>
-                <a-select-option value="SPOT_ORDER">
-                  SPOT订舱
-                </a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="6">
-            <a-form-model-item label="ETA">
-              <a-date-picker
-                valueFormat="YYYY-MM-DD 00:00:00"
-                v-model="form.eta"
-                style="width: 100%;"
-                format="YYYY-MM-DD" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="ETD">
-              <a-date-picker
-                valueFormat="YYYY-MM-DD 00:00:00"
-                style="width: 75%;"
-                v-model="form.etd"
-                format="YYYY-MM-DD" />
-              <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="合约号">
-              <a-input v-model="form.contracT_NO" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="装货港">
-              <a-input v-model="form.portload" />
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="6">
-            <a-form-model-item label="卸货港">
-              <a-input v-model="form.portdischarge" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="船公司">
-              <a-select v-model="form.carrierid" show-search :filter-option="filterOption">
-                <a-select-option v-for="(item, index) in carrierList" :key="index" :value="item.code">{{ item.cnName
-                }}</a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="中转港1">
-              <a-input v-model="form.transfeR_PORT_1" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="中转港2">
-              <a-input v-model="form.transfeR_PORT_2" />
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="6">
-            <a-form-model-item label="承运模式">
-              <a-select v-model="form.carriagE_TYPE">
-                <a-select-option value="DIRECT_SHIP">
-                  直达
-                </a-select-option>
-                <a-select-option value="TRANSFER_SHIP">
-                  中转
-                </a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="航线">
-              <a-select v-model="form.lanename" show-search :filter-option="filterOption">
-                <a-select-option v-for="(item, index) in lineList" :key="index" :value="item.name">{{ item.name
-                }}</a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="签单方式">
-              <a-select v-model="form.issuetype" show-search :filter-option="filterOption">
-                <a-select-option v-for="(item, index) in issuetypeList" :key="index" :value="item.enName">{{ item.cnName
-                }}</a-select-option>
-              </a-select>
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="6">
-            <a-form-model-item label="箱使天数">
-              <a-input style="width: 70%;" v-model="form.detensioN_FREE_DAYS" />
-              <span style="margin: 0 10px;">天</span>
-              <a-icon @click="handleOpenBox" style="cursor: pointer;color: rgb(32, 184, 204);" type="form" />
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <div class="title">截止时间</div>
-        <a-row>
-          <a-col :span="8">
-            <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="样单截止时间">
-              <a-date-picker v-model="form.sI_CUT_DATE" format="YYYY-MM-DD HH:mm:ss" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="截港时间">
-              <a-date-picker v-model="form.cY_CUT_DATE" format="YYYY-MM-DD HH:mm:ss" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="舱单-入港清单截止时间">
-              <a-date-picker v-model="form.manifesT_CUT_DATE" format="YYYY-MM-DD HH:mm:ss" />
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-        <a-row>
-          <a-col :span="8">
-            <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="MDGF截止时间">
-              <a-date-picker v-model="form.mdgF_CUT_DATE" format="YYYY-MM-DD HH:mm:ss" />
-            </a-form-model-item>
-          </a-col>
-          <a-col :span="8">
-            <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="VGM截止时间">
-              <a-date-picker v-model="form.vgM_SUBMISSION_CUT_DATE" format="YYYY-MM-DD HH:mm:ss" />
-            </a-form-model-item>
-          </a-col>
-        </a-row>
-      </a-form-model>
-      <div class="title">
-        <span>箱型箱量</span>
-        <span
-          style="color: rgb(30, 221, 221);font-size: 12px;margin-left: 20px;cursor: pointer;"
-          @click="handleOpenBoxList">添加</span>
-        <span style="font-size: 12px;margin-left: 20px;" @click="boxFlag = true">合计:{{ boxTotal }}</span>
+                  <a-select-option value="SPOT_ORDER">
+                    SPOT订舱
+                  </a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="6">
+              <a-form-model-item label="ETA">
+                <a-date-picker
+                  valueFormat="YYYY-MM-DD 00:00:00"
+                  v-model="form.eta"
+                  style="width: 100%;"
+                  format="YYYY-MM-DD" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="ETD">
+                <a-date-picker
+                  valueFormat="YYYY-MM-DD 00:00:00"
+                  style="width: 75%;"
+                  v-model="form.etd"
+                  format="YYYY-MM-DD" />
+                <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="合约号">
+                <a-input v-model="form.contracT_NO" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="装货港">
+                <a-input v-model="form.portload" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="6">
+              <a-form-model-item label="卸货港">
+                <a-input v-model="form.portdischarge" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="船公司">
+                <a-select v-model="form.carrierid" show-search :filter-option="filterOption">
+                  <a-select-option v-for="(item, index) in carrierList" :key="index" :value="item.code">{{ item.cnName
+                  }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="中转港1">
+                <a-input v-model="form.transfeR_PORT_1" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="中转港2">
+                <a-input v-model="form.transfeR_PORT_2" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="6">
+              <a-form-model-item label="承运模式">
+                <a-select v-model="form.carriagE_TYPE">
+                  <a-select-option value="DIRECT_SHIP">
+                    直达
+                  </a-select-option>
+                  <a-select-option value="TRANSFER_SHIP">
+                    中转
+                  </a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="航线">
+                <a-select v-model="form.lanename" show-search :filter-option="filterOption">
+                  <a-select-option v-for="(item, index) in lineList" :key="index" :value="item.name">{{ item.name
+                  }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="签单方式">
+                <a-select v-model="form.issuetype" show-search :filter-option="filterOption">
+                  <a-select-option v-for="(item, index) in issuetypeList" :key="index" :value="item.enName">{{ item.cnName
+                  }}</a-select-option>
+                </a-select>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-model-item label="箱使天数">
+                <a-input style="width: 90%;" v-model="form.detensioN_FREE_DAYS" />
+                <span style="margin-left: 10px;">天</span>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="6">
+              <a-form-model-item label="订舱抬头">
+                <a-input v-model="form.bookinG_PARTY" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <div class="title">截止时间</div>
+          <a-row>
+            <a-col :span="8">
+              <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="样单截止时间">
+                <a-date-picker v-model="form.sI_CUT_DATE" format="YYYY-MM-DD HH:00" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="截港时间">
+                <a-date-picker v-model="form.cY_CUT_DATE" format="YYYY-MM-DD HH:00" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-model-item :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }" label="舱单-入港清单截止时间">
+                <a-date-picker v-model="form.manifesT_CUT_DATE" format="YYYY-MM-DD HH:00" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row>
+            <a-col :span="8">
+              <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="MDGF截止时间">
+                <a-date-picker v-model="form.mdgF_CUT_DATE" format="YYYY-MM-DD HH:00" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-model-item :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" label="VGM截止时间">
+                <a-date-picker v-model="form.vgM_SUBMISSION_CUT_DATE" format="YYYY-MM-DD HH:00" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+        <div class="title">
+          <span>箱型箱量</span>
+          <span
+            style="color: rgb(30, 221, 221);font-size: 12px;margin-left: 20px;cursor: pointer;"
+            @click="handleOpenBoxList">添加</span>
+          <span style="font-size: 12px;margin-left: 20px;" @click="boxFlag = true">合计:{{ boxTotal }}</span>
 
-      </div>
-      <div class="list">
-        <div class="item" v-for="item in form.ctnList" :key="item.gid">
-          <span class="item-left">{{ item.ctnall }}</span>
-          <a-input-number v-model="item.ctnnum" :min="1" :max="1000"> </a-input-number>
         </div>
-      </div>
-      <div class="title">费用</div>
-      <div class="cost">
-        <vxe-table
-          :data="loadData"
-          stripe
-          resizable
-          round
-          empty-text="没有更多数据了！">
-          <vxe-column type="seq" width="40" fixed="left"></vxe-column>
-          <vxe-column
-            v-for="item in columns"
-            :key="`${item.dataIndex}3`"
-            :field="item.dataIndex"
-            :min-width="item.width"
-            :title="item.title"
-            :fixed="item.fixed"
-            :align="item.align">
-            <template #default="{ row }" v-if="item.dataIndex == 'vessel'">
-              <span>{{ row.vessel }}/{{ row.voyno }}</span>
-            </template>
-          </vxe-column>
-          <vxe-column title="操作" fixed="right" width="120" align="center">
-            <template #default="{ row }">
-              <vxe-button type="text" @click="handleEdit(row.id)">
-                <a-icon type="form" :style="{ color: '#13c2c2' }" />
-              </vxe-button>
-              <a-popconfirm
-                title="请确认删除?"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="e => {
-                  confirm(e, row)
-                }
-                ">
-                <vxe-button type="text">
-                  <a-icon type="delete" :style="{ color: '#13c2c2' }" />
+        <div class="list">
+          <div class="item" v-for="item in form.ctnList" :key="item.gid">
+            <span class="item-left">{{ item.ctnall }}</span>
+            <a-input-number v-model="item.ctnnum" :min="1" :max="1000"> </a-input-number>
+          </div>
+        </div>
+        <div class="title">费用</div>
+        <div class="cost">
+          <vxe-table :data="loadData" stripe resizable round empty-text="没有更多数据了！">
+            <vxe-column type="seq" width="40" fixed="left"></vxe-column>
+            <vxe-column
+              v-for="item in columns"
+              :key="`${item.dataIndex}3`"
+              :field="item.dataIndex"
+              :min-width="item.width"
+              :title="item.title"
+              :fixed="item.fixed"
+              :align="item.align">
+              <template #default="{ row }" v-if="item.dataIndex == 'vessel'">
+                <span>{{ row.vessel }}/{{ row.voyno }}</span>
+              </template>
+            </vxe-column>
+            <vxe-column title="操作" fixed="right" width="120" align="center">
+              <template #default="{ row }">
+                <vxe-button type="text" @click="handleEdit(row.id)">
+                  <a-icon type="form" :style="{ color: '#13c2c2' }" />
                 </vxe-button>
-              </a-popconfirm>
-            </template>
-          </vxe-column>
-        </vxe-table>
-        <vxe-pager
-          :current-page="queryParam.currentPage"
-          :page-size="queryParam.pageSize"
-          :total="queryParam.totalResult"
-          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
-          @page-change="handlePageChange">
-        </vxe-pager>
+                <a-popconfirm
+                  title="请确认删除?"
+                  ok-text="是"
+                  cancel-text="否"
+                  @confirm="e => {
+                    confirm(e, row)
+                  }
+                  ">
+                  <vxe-button type="text">
+                    <a-icon type="delete" :style="{ color: '#13c2c2' }" />
+                  </vxe-button>
+                </a-popconfirm>
+              </template>
+            </vxe-column>
+          </vxe-table>
+          <vxe-pager
+            :current-page="queryParam.currentPage"
+            :page-size="queryParam.pageSize"
+            :total="queryParam.totalResult"
+            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+            @page-change="handlePageChange">
+          </vxe-pager>
+        </div>
       </div>
-
-    </a-spin>
-
-    <a-modal :footer="null" title="请选择箱型" width="600px" @cancel="boxFlag = false" :visible="boxFlag">
-      <div class="boxList">
-        <div
-          class="boxItem"
-          :class="{ 'active': item.flag }"
-          @click="handleClick(item)"
-          v-for="item in boxList"
-          :key="item.gid">{{ item.name }}</div>
+      <div style="background: white;padding: 10px;width: 19%;">
+        <a-card :bodyStyle="tstyle" :bordered="false">
+          <div class="right-title"><i class="iconfont icon-fujian-wenjian"></i><span>附件</span></div>
+          <div class="content">
+            <div class="file" v-for="(file, findex) in fileList" :key="findex">
+              <div class="top">
+                <span class="left">
+                  <i class="iconfont icon-Excel" v-if="['xls', 'xlsx'].includes(getFileType(file.fileName))"></i>
+                  <i
+                    class="iconfont icon-tupian"
+                    v-else-if="['jpg', 'jpeg', 'png'].includes(getFileType(file.fileName))"></i>
+                  <i class="iconfont icon-pdf" v-else-if="['pdf'].includes(getFileType(file.fileName))"></i>
+                  <i class="iconfont icon-file-word" v-else></i>
+                  {{ file.fileName }}
+                </span>
+                <span class="right"><i class="iconfont icon-yulan" @click="getFileFun(file)"></i><i
+                  class="iconfont icon-arrow-"></i></span>
+              </div>
+              <div class="bottom">
+                <span><i class="iconfont icon-leixing"></i>{{ file.typeName }}</span>
+                <span><i class="iconfont icon-yonghu-yuan"></i>{{ file.createdUserName }}</span>
+                <span><i class="iconfont icon-shijian1"></i>{{ file.createdTime }}</span>
+              </div>
+            </div>
+            <div class="no-data" v-if="fileList.length === 0">
+              <i class="iconfont icon-wushuju"></i>
+              <div class="text">暂无附件</div>
+            </div>
+          </div>
+        </a-card>
+        <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey">
+          <a-collapse-panel key="1">
+            <template slot="header">
+              <div class="title"><i class="iconfont icon-rizhi" style="margin-right: 10px;"></i><span>日志</span></div>
+            </template>
+            <div class="cargo-info">
+              <div class="info-header">
+                <span>修改人</span>
+                <span>修改时间</span>
+              </div>
+              <div v-for="(log, lindex) in form.logList" :key="lindex">
+                <div class="list">
+                  <span class="btn">{{ log.createdUserName }}</span>
+                  <span class="btn">
+                    {{ log.createdTime }}
+                    <!-- <span class="more"> -->
+                    <i
+                      class="iconfont icon-xia more"
+                      v-if="log.details.length > 0"
+                      :class="!log.showMore ? 'hide' : 'show'"
+                      @click="showLogMore(lindex)"></i>
+                    <!-- </span> -->
+                  </span>
+                </div>
+                <div class="more-detail" v-if="log.details.length > 0 && log.showMore">
+                  <div class="detail-single" v-for="(child, cindex) in log.details" :key="cindex">
+                    <template v-if="log.type != 'Trace'">
+                      <div class="old">
+                        <span class="o-title">{{ child.field || '字段' }} :</span>
+                        <span class="content">{{ child.oldValue }}</span>
+                      </div>
+                      <div class="line">改为：</div>
+                    </template>
+                    <div class="new">
+                      <span class="o-title" v-if="log.type != 'Trace'">{{ child.field || '字段' }}:</span>
+                      <span class="content">{{ child.newValue }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a-collapse-panel>
+        </a-collapse>
       </div>
-    </a-modal>
-    <a-modal :footer="null" width="600px" @cancel="boxOpenFlag = false" :visible="boxOpenFlag">
-      <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="船公司免箱使">
-        <a-input v-model="form.transfeR_PORT_2" />
-      </a-form-model-item>
-      <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="申请免箱使">
-        <a-input v-model="form.transfeR_PORT_2" />
-      </a-form-model-item>
-    </a-modal>
-
-  </div>
+      <a-modal :footer="null" title="请选择箱型" width="600px" @cancel="boxFlag = false" :visible="boxFlag">
+        <div class="boxList">
+          <div
+            class="boxItem"
+            :class="{ 'active': item.flag }"
+            @click="handleClick(item)"
+            v-for="item in boxList"
+            :key="item.gid">{{ item.name }}</div>
+        </div>
+      </a-modal>
+      <a-modal :footer="null" width="600px" @cancel="boxOpenFlag = false" :visible="boxOpenFlag">
+        <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="船公司免箱使">
+          <a-input v-model="form.transfeR_PORT_2" />
+        </a-form-model-item>
+        <a-form-model-item :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" label="申请免箱使">
+          <a-input v-model="form.transfeR_PORT_2" />
+        </a-form-model-item>
+      </a-modal>
+    </div>
+  </a-spin>
 </template>
 <script>
 import { mapGetters } from 'vuex'
 import events from '@/components/MultiTab/events'
 import { AutoComplete } from 'ant-design-vue'
 import {
-  getVesselInfoService
+  getVesselInfoService, BookingOrderDownload
 } from '@/api/modular/main/BookingLedger'
 import {
   BookingSlotSave, BookingSlotDetail, BookingSlotDelete
@@ -297,10 +371,18 @@ export default {
         ctnList: []
       },
       boxOpenFlag: false,
-      loadData:[],
-      queryParam:{},
+      loadData: [],
+      showKey: false,
+      log: [],
+      queryParam: {
+        pageSize: 10,
+        currentPage: 1,
+        totalResult: 0
+      },
       labelCol: { span: 6 },
+      fileList: [],
       wrapperCol: { span: 18 },
+      tstyle: { padding: '0 15px 15px', 'margin-bottom': '10px', background: '#fff' },
       etdWeek: '',
       boxTotal: '',
       loading: false,
@@ -486,6 +568,9 @@ export default {
           if (this.type === 'Edit') {
             this.getDetail()
           }
+          if (this.type === 'Add') {
+            this.form = { ctnList: [] }
+          }
         }
       }
     }
@@ -498,6 +583,25 @@ export default {
     }
   },
   methods: {
+    getFileType(val) {
+      if (val) {
+        return val.substr(val.lastIndexOf('.') + 1)
+      } else {
+        return ''
+      }
+    },
+    getFileFun(data) {
+      this.$message.success(`下载打印文件 ${data.fileName} 中...`)
+      BookingOrderDownload({ id: data.id }).then(res => {
+        this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: 'application/pdf;charset=utf-8' }))
+        const fname = data.fileName // 下载文件的名字
+        const link = document.createElement('a')
+        link.href = this.pdfUrl
+        link.setAttribute('download', fname)
+        document.body.appendChild(link)
+        link.click()
+      })
+    },
     filterOption(input, option) {
       return (
         option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
@@ -508,6 +612,9 @@ export default {
     },
     handleOpenBox() {
       this.boxOpenFlag = true
+    },
+    handlePageChange() {
+
     },
     getDetail() {
       this.loading = true
@@ -618,9 +725,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .main {
-  margin-left: 20px;
-  padding: 10px;
-  background: white;
+  display: flex;
 }
 
 .title {
@@ -710,4 +815,266 @@ export default {
     color: #999;
   }
 }
-</style>
+
+.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;
+      }
+    }
+  }
+
+  .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;
+        }
+      }
+    }
+  }
+
+}
+
+.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;
+        }
+      }
+    }
+  }
+}</style>
diff --git a/src/views/main/CabinManagement/index.vue b/src/views/main/CabinManagement/index.vue
index df3e4f3..2c2e63f 100644
--- a/src/views/main/CabinManagement/index.vue
+++ b/src/views/main/CabinManagement/index.vue
@@ -100,7 +100,15 @@
             </a-col>
             <a-col :span="4">
               <a-form-item label="箱型箱量">
-                <a-input v-model="form.CTN_STAT" allow-clear placeholder="请输入箱型箱量" />
+                <a-select
+                  mode="multiple"
+                  allowClear
+                  v-model="form.ctN_STAT"
+                  style="width: 100%"
+                  placeholder="请选择箱型箱量"
+                >
+                  <a-select-option v-for="(item,index) in ctnallList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
+                </a-select>
               </a-form-item>
             </a-col>
             <a-col :span="4">
@@ -199,12 +207,17 @@ import {
   BookingSlotPage,
   BookingSlotDelete
 } from '@/api/modular/main/CompanySiteaccount'
-
+import { mapGetters } from 'vuex'
 import columnSetting from '@/components/tableColumnSetting'
 export default {
   components: {
     columnSetting
   },
+  computed: {
+    ...mapGetters([
+      'ctnallList'
+    ])
+  },
   data() {
     return {
       TypeData: [],
@@ -465,7 +478,7 @@ export default {
       this.form = {}
     },
     handlePageChange({ currentPage, pageSize }) {
-      this.queryParam.pageNo = currentPage
+      this.queryParam.currentPage = currentPage
       this.queryParam.pageSize = pageSize
       this.FnGetData()
     },
@@ -481,6 +494,9 @@ export default {
         this.form.ETD_START = this.form.etd[0]
         this.form.ETD_END = this.form.etd[1]
       }
+      if (this.form.ctN_STAT) {
+        this.form.ctN_STAT = this.form.ctN_STAT.join(',')
+      }
       BookingSlotPage(this.form).then(res => {
         if (res.success) {
           this.loadData = res.data.rows
diff --git a/src/views/main/mail/mailAnalysis.vue b/src/views/main/mail/mailAnalysis.vue
index 07b15b4..b4ad410 100644
--- a/src/views/main/mail/mailAnalysis.vue
+++ b/src/views/main/mail/mailAnalysis.vue
@@ -146,7 +146,7 @@
       </vxe-table>
       <vxe-pager
         :loading="loading"
-        :current-page="queryParam.currentPage"
+        :current-page="queryParam.pageNo"
         :page-size="queryParam.pageSize"
         :total="queryParam.totalResult"
         :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
diff --git a/src/views/main/mail/mailExecute.vue b/src/views/main/mail/mailExecute.vue
index da4f74d..6757eef 100644
--- a/src/views/main/mail/mailExecute.vue
+++ b/src/views/main/mail/mailExecute.vue
@@ -129,7 +129,7 @@
       </vxe-table>
       <vxe-pager
         :loading="loading"
-        :current-page="queryParam.currentPage"
+        :current-page="queryParam.pageNo"
         :page-size="queryParam.pageSize"
         :total="queryParam.totalResult"
         :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
diff --git a/src/views/main/mail/mailRecord.vue b/src/views/main/mail/mailRecord.vue
index adaf743..7b3f1e9 100644
--- a/src/views/main/mail/mailRecord.vue
+++ b/src/views/main/mail/mailRecord.vue
@@ -162,7 +162,7 @@
       </vxe-table>
       <vxe-pager
         :loading="loading"
-        :current-page="queryParam.currentPage"
+        :current-page="queryParam.pageNo"
         :page-size="queryParam.pageSize"
         :total="queryParam.totalResult"
         :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
diff --git a/src/views/main/mail/mailSetting.vue b/src/views/main/mail/mailSetting.vue
index f301e1c..52bcad8 100644
--- a/src/views/main/mail/mailSetting.vue
+++ b/src/views/main/mail/mailSetting.vue
@@ -136,7 +136,7 @@
       </vxe-table>
       <vxe-pager
         :loading="loading"
-        :current-page="queryParam.currentPage"
+        :current-page="queryParam.pageNo"
         :page-size="queryParam.pageSize"
         :total="queryParam.totalResult"
         :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"