diff --git a/src/api/modular/main/BookingLedger.js b/src/api/modular/main/BookingLedger.js
index 1c04b83..1b566f4 100644
--- a/src/api/modular/main/BookingLedger.js
+++ b/src/api/modular/main/BookingLedger.js
@@ -664,4 +664,4 @@ export function getGoodsname(parameter) {
     method: 'get',
     params: parameter
   })
-}
\ No newline at end of file
+}
diff --git a/src/api/modular/main/BookingLedger_new.js b/src/api/modular/main/BookingLedger_new.js
new file mode 100644
index 0000000..3dff643
--- /dev/null
+++ b/src/api/modular/main/BookingLedger_new.js
@@ -0,0 +1,674 @@
+import { axios } from '@/utils/request'
+
+/**
+ * 分页查询订舱主表
+ * @params PageSize
+ * @params PageNo
+ */
+export function BookingOrderPage(parameter) {
+  return axios({
+    url: '/BookingOrder/page',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取订舱明细
+ * @params Id
+ */
+export function BookingOrderGet(parameter) {
+  return axios({
+    url: '/BookingOrder/get',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取分页查询客户
+ * @params ShortName
+ */
+export function DjyCustomerpage(parameter) {
+  return axios({
+    url: '/DjyCustomer/page',
+    method: 'get',
+    params: parameter
+  })
+}
+/**
+ * 获取分页查询客户
+ * @params keyword
+ */
+export function DjyCustomerSuggest(parameter) {
+  return axios({
+    url: '/DjyCustomer/Suggest',
+    method: 'get',
+    params: parameter
+  })
+}
+/**
+ * 获取船公司
+ * @params CnName
+ */
+export function GetCarrierlist(parameter) {
+  return axios({
+    url: '/commondb/carrierlist',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取船名
+ * @params Name
+ */
+export function GetVessellist(parameter) {
+  return axios({
+    url: '/commondb/vessellist',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 用户查询
+ * @params Name
+ */
+export function GetSysUserPage(parameter) {
+  return axios({
+    url: '/sysUser/GetTenantUser',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 订舱模板查询
+ * @params Type : 10, 20, 30, 40
+ * @params SearchValue
+ */
+export function BookingTemplate(parameter) {
+  return axios({
+    url: '/BookingTemplate/page',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 场站
+ * @params SearchValue
+ */
+export function GetYardlist(parameter) {
+  return axios({
+    url: '/commondb/yardlist',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 起始港
+ * @params Name
+ */
+export function GetPortloadlist(parameter) {
+  return axios({
+    url: '/commondb/portloadlist',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 目的港
+ * @params Name
+ */
+export function GetPortlist(parameter) {
+  return axios({
+    url: '/commondb/portlist',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 包装
+ * @params Name
+ */
+export function GetPackage(parameter) {
+  return axios({
+    url: '/commondb/package',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 付费方式
+ * @params Name
+ */
+export function GetFrt(parameter) {
+  return axios({
+    url: '/commondb/frt',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 付费方式
+ * @params Name
+ */
+export function GetService(parameter) {
+  return axios({
+    url: '/commondb/service',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 备注
+ * @params id
+ */
+export function GetRemark(parameter) {
+  return axios({
+    url: '/BookingOrder/getRemark',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 新增备注
+ * @params {
+  "pId": 0,
+  "remark": "string"
+  }
+ */
+export function AddRemark(parameter) {
+  return axios({
+    url: '/BookingOrder/addRemark',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 附件
+ * @params id
+ */
+export function GetFile(parameter) {
+  return axios({
+    url: '/BookingOrder/getFile',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 新增附件
+ * @params {
+  "BookingId": 0,
+  "TypeCode": "string"
+  "TypeName": "string"
+  "file": "string"
+  }
+ */
+
+export function AddFile(params) {
+  console.log(params)
+  return axios({
+    url: '/BookingOrder/addFile',
+    method: 'post',
+    data: params,
+    headers: {
+      'X-Requested-With': 'XMLHttpRequest',
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+/**
+ * 获取货运动态
+ * @params id
+ */
+export function GetBookingLog(parameter) {
+  return axios({
+    url: `/BookingOrder/GetStatusLog`,
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 日志明细
+ * @params id
+ */
+export function GetLog(parameter) {
+  return axios({
+    url: '/BookingOrder/getLog',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取箱型
+ * @params id
+ */
+export function GetCtn(parameter) {
+  return axios({
+    url: '/commondb/ctn',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 增加订舱模板
+ */
+export function BookingTemplateAdd(parameter) {
+  return axios({
+    url: '/BookingTemplate/add',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 签单方式
+ * @params name
+ */
+export function Codeissuetypelist(parameter) {
+  return axios({
+    url: '/commondb/codeissuetypelist',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 引入场站数据
+ * @params bookingId
+ * @params isWeb
+ */
+export function GetYardData(parameter) {
+  return axios({
+    url: '/BookingOrder/GetYardData',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 发送订舱、截单EDI
+ */
+export function SendBookingOrClosingEDI(parameter) {
+  return axios({
+    url: '/BookingOrder/SendBookingOrClosingEDI',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 下载订舱、截单EDI
+ */
+export function DownloadBookingOrClosingEDI(parameter) {
+  return axios({
+    url: '/BookingOrder/DownloadBookingOrClosingEDI',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 发送下货纸
+ */
+export function SendXHZ(parameter) {
+  return axios({
+    url: '/BookingOrder/SendXHZ?bookingId=' + parameter,
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 直发VGM
+ */
+export function VgmSend(parameter) {
+  return axios({
+    url: '/BookingOrder/VgmSend?bookingId=' + parameter,
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 获取放舱信息
+ */
+export function LetterYard(parameter) {
+  return axios({
+    url: '/BookingOrder/LetterYard?bookingId=' + parameter,
+    method: 'get'
+  })
+}
+
+/**
+ * 保存（新增或修改）放舱
+ */
+export function SaveBookingLetteryard(parameter) {
+  return axios({
+    url: '/BookingLetteryard/Save',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 放舱发送
+ */
+export function SendLetterYard(parameter) {
+  return axios({
+    url: '/BookingLetteryard/SendLetterYard?bookingId=' + parameter,
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 删除放舱
+ */
+export function DeleteLetterYard(parameter) {
+  return axios({
+    url: '/BookingLetteryard/LetterYardDelete',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 样单
+ */
+export function SampleBill(parameter) {
+  return axios({
+    url: '/BookingOrder/SampleBill?bookingId=' + parameter,
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 保存（新增或修改）样单
+ */
+export function SaveBookingSampleBill(parameter) {
+  return axios({
+    url: '/BookingSampleBill/Save',
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 获取VGM、VGM SI链接
+ */
+export function VgmLink(parameter) {
+  return axios({
+    url: '/BookingOrder/VgmLink?bookingId=' + parameter,
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取样单pdf
+ */
+export function SampleBillPdf(parameter) {
+  return axios({
+    url: '/BookingOrder/SampleBillPdf?bookingId=' + parameter,
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 获取提箱小票链接
+ */
+export function TxxpLink(parameter) {
+  return axios({
+    url: '/BookingOrder/TxxpLink?bookingId=' + parameter,
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 校验
+ */
+export function ExcuteRulesOceanBooking(parameter) {
+  return axios({
+    url: '/RulesEngineClient/ExcuteRulesOceanBooking?bookingId=' + parameter,
+    method: 'get'
+  })
+}
+
+/**
+ * 付费方式
+ * @params Name
+ */
+export function GetForwarderlist(parameter) {
+  return axios({
+    url: '/commondb/forwarderlist',
+    method: 'get',
+    params: parameter
+  })
+}
+/**
+ * 打印
+ * @params Name
+ */
+export function BookingOrderPrintOrder(parameter) {
+  return axios({
+    url: '/BookingOrder/PrintOrder',
+    method: 'get',
+    params: parameter
+  })
+}
+/**
+ * 打印下载
+ * @params Name
+ */
+export function BookingOrderDownloadPrint(parameter) {
+  return axios({
+    url: '/BookingOrder/downloadPrint',
+    method: 'get',
+    responseType: 'arraybuffer',
+    params: parameter
+  })
+}
+/**
+ * 获取客户
+ * @params Name
+ */
+export function DjyCustomerdetail(parameter) {
+  return axios({
+    url: '/DjyCustomer/detail',
+    method: 'get',
+    params: parameter
+  })
+}
+/**
+ * 批量保存关系人（同时新增、删除、修改）
+ * @params Name
+ */
+export function BookingOrderContactSavebatch(id, parameter) {
+  return axios({
+    url: `/BookingOrderContact/savebatch?bookingId=${id}`,
+    method: 'post',
+    data: parameter
+  })
+}
+/**
+ * 分页查询订舱关系人
+ * @params Name
+ */
+export function BookingOrderContactPage(parameter) {
+  return axios({
+    url: '/BookingOrderContact/page',
+    method: 'get',
+    params: parameter
+  })
+}
+
+/**
+ * 下载附件
+ * @params id
+ */
+export function BookingOrderGetFile(parameter) {
+  return axios({
+    url: '/BookingOrder/GetFile',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function BookingOrderDownload(parameter) {
+  return axios({
+    url: '/BookingOrder/Download',
+    method: 'get',
+    params: parameter,
+    responseType: 'arraybuffer'
+  })
+}
+
+// 上传ocr文件
+export function BookingOrderOcrUpFile(data) {
+  return axios({
+    url: '/BookingOrder/OcrUpFile',
+    method: 'post',
+    data: data.data,
+    params: data.parameter
+  })
+}
+
+/**
+ * 更新订舱
+ */
+export function BookingOrderUpdate(parameter) {
+  return axios({
+    url: '/BookingOrder/Update',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 获取图片
+export function BookingOrderOcrGetImg(parameter) {
+  return axios({
+    url: '/BookingOrder/OcrGetImg',
+    method: 'post',
+    params: parameter,
+    responseType: 'arraybuffer'
+  })
+}
+// 获取文字
+export function BookingOrderOcrGetText(parameter) {
+  return axios({
+    url: '/BookingOrder/OcrGetText',
+    method: 'post',
+    params: parameter
+  })
+}
+
+/**
+ * 新增订舱
+ */
+export function BookingOrderAdd(parameter) {
+  return axios({
+    url: '/BookingOrder/Add',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function BookingOrderAddOrUpdate(parameter) {
+  return axios({
+    url: '/BookingOrder/AddOrUpdate',
+    method: 'post',
+    data: parameter
+  })
+}
+export function BookingOrderPrintTemplateList(parameter) {
+  return axios({
+    url: '/BookingOrder/PrintTemplateList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function BookingOrderPrintTemplateWithHistoryList(parameter) {
+  return axios({
+    url: '/BookingOrder/PrintTemplateWithHistoryList',
+    method: 'get',
+    params: parameter
+  })
+}
+export function LetterYardPdf(parameter) {
+  return axios({
+    url: '/BookingOrder/LetterYardPdf',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function SendTrace(parameter) {
+  return axios({
+    url: '/BookingOrder/SendTrace',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getDjyTenantConfig(parameter) {
+  return axios({
+    url: '/DjyTenantConfig/get',
+    method: 'get',
+    params: parameter
+  })
+}
+// 批量编辑
+export function BookingOrderBachUpdate(parameter) {
+  return axios({
+    url: '/BookingOrder/BachUpdate',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 根据船名航次，获取海关航次等信息
+export function getVesselInfoService(parameter) {
+  return axios({
+    url: '/DjyVesselInfoService/GetList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 获取约号
+export function getContractno(parameter) {
+  return axios({
+    url: '/Para/QuerytParaContractNoInfo',
+    method: 'get',
+    params: parameter
+  })
+}
+
+// 获取品名
+export function getGoodsname(parameter) {
+  return axios({
+    url: '/Para/QueryParaGoodsInfo',
+    method: 'get',
+    params: parameter
+  })
+}
diff --git a/src/views/main/BookingLedger/detail/modules/operationArea.vue b/src/views/main/BookingLedger/detail/modules/operationArea.vue
index 555ff22..f601d6c 100644
--- a/src/views/main/BookingLedger/detail/modules/operationArea.vue
+++ b/src/views/main/BookingLedger/detail/modules/operationArea.vue
@@ -306,7 +306,12 @@
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
                     has-feedback
                   >
-                    <a-input class="box-input" style="width:195px;" :allowClear="true" v-model="initCabinFrom.yardcontract" />
+                    <a-input
+                      class="box-input"
+                      style="width:195px;"
+                      :allowClear="true"
+                      v-model="initCabinFrom.yardcontract"
+                    />
                   </a-form-item>
                 </a-col>
                 <a-col :span="8">
@@ -316,7 +321,12 @@
                     :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
                     has-feedback
                   >
-                    <a-input class="box-input" style="width:195px;" :allowClear="true" v-model="initCabinFrom.yardcontracttel" />
+                    <a-input
+                      class="box-input"
+                      style="width:195px;"
+                      :allowClear="true"
+                      v-model="initCabinFrom.yardcontracttel"
+                    />
                   </a-form-item>
                 </a-col>
                 <a-col :span="8">
@@ -1376,16 +1386,16 @@ export default {
     saveBookingLetteryard() {
       console.log('=== 放舱 ===', this.initCabinFrom)
       // if (!this.id) {
-        // this.initCabinFrom = {
-        //   ...this.initCabinFrom,
-        //   ...{
-        //     closeDocTime: this.details.closedocdate,
-        //     closingTime: this.details.closingdate,
-        //     vgmTime: this.details.closevgmdate,
-        //     yardcontract: this.details.yardcontract,
-        //     yardcontracttel: this.details.yardcontracttel
-        //   }
-        // }
+      // this.initCabinFrom = {
+      //   ...this.initCabinFrom,
+      //   ...{
+      //     closeDocTime: this.details.closedocdate,
+      //     closingTime: this.details.closingdate,
+      //     vgmTime: this.details.closevgmdate,
+      //     yardcontract: this.details.yardcontract,
+      //     yardcontracttel: this.details.yardcontracttel
+      //   }
+      // }
       // }
       debugger
       SaveBookingLetteryard(this.initCabinFrom)
@@ -1606,13 +1616,13 @@ export default {
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
     },
-    closingdateChange (date, dateString) {
+    closingdateChange(date, dateString) {
       this.initCabinFrom.closingTime = dateString
     },
-    closevgmdateChange (date, dateString) {
+    closevgmdateChange(date, dateString) {
       this.initCabinFrom.vgmTime = dateString
     },
-    closedocdateChange (date, dateString) {
+    closedocdateChange(date, dateString) {
       this.initCabinFrom.closeDocTime = dateString
     }
   }
@@ -1871,7 +1881,7 @@ export default {
     opacity: 0.04;
   }
 }
-/deep/ .ant-select-selection{
+/deep/ .ant-select-selection {
   position: relative;
   z-index: 1;
   &::after {
@@ -1886,7 +1896,7 @@ export default {
     opacity: 0.04;
   }
 }
-/deep/ .ant-calendar-picker{
+/deep/ .ant-calendar-picker {
   position: relative;
   z-index: 1;
   &::after {
@@ -1901,7 +1911,8 @@ export default {
     opacity: 0.04;
   }
 }
-/deep/ .ant-input-affix-wrapper, .ant-input-affix-wrapper-textarea-with-clear-btn{
+/deep/ .ant-input-affix-wrapper,
+.ant-input-affix-wrapper-textarea-with-clear-btn {
   position: relative;
   z-index: 1;
   &::after {
@@ -1916,7 +1927,7 @@ export default {
     opacity: 0.04;
   }
 }
-.remark-input{
+.remark-input {
   position: relative;
   z-index: 1;
   &::after {
diff --git a/src/views/main/BookingLedger/detail/modules/operationArea_new.vue b/src/views/main/BookingLedger/detail/modules/operationArea_new.vue
new file mode 100644
index 0000000..dd4836b
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/operationArea_new.vue
@@ -0,0 +1,2055 @@
+<template>
+  <div class="operation-area">
+    <a-card
+      :bordered="false"
+      :bodyStyle="{ 'padding-top': ' 15px', 'padding-left': '5px', 'padding-bottom': '0px', 'margin-bottom': '10px' }"
+    >
+      <div class="btn-list more-view">
+        <a-popconfirm
+          placement="bottom"
+          title="刷新页面将丢失未保存数据，是否继续？"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="refreshPage"
+          @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>
+        <button @click="saveFun">
+          <span class="iconfont icon-icon_baocun" :style="{ fontSize: '15px', marginLeft: '2px' }"></span>保存
+        </button>
+        <button @click="FSnhowPrintModal">
+          <span class="iconfont icon-printing" :style="{ fontSize: '14px' }"></span>打印
+        </button>
+      </div>
+      <div class="btn-list more-view-1">
+        <button @click="openModel('bookingSpace')"><span class="iconfont icon-chuanbo"></span>订舱</button>
+        <button @click="openModel('cutOff')" :style="{ marginLeft: '4px' }">
+          <span class="iconfont icon-daibanshixiang"></span>截单
+        </button>
+        <button :style="{ marginLeft: '14px' }"><span class="iconfont icon-xiugai"></span>更改及退舱</button>
+        <button @click="openModel('vgm')"><span class="iconfont icon-dingdan"></span>VGM</button>
+        <button @click="openModel('paper')">
+          <span class="iconfont icon-zhizhishu" style="font-size:18px;"></span>下货纸
+        </button>
+        <button @click="openModel('trace')">
+          <span class="iconfont icon-yunshu1" style="font-size:18px;"></span>运踪订阅
+        </button>
+      </div>
+      <div class="btn-list more-view-2">
+        <button @click="openModel('initCabin')">
+          <span class="iconfont icon-chuanfanguanli-chuanfanshenqing"></span>放舱
+        </button>
+        <button @click="openModel('ladingBill')" :style="{ marginLeft: '32px' }">
+          <span class="iconfont icon-zhcc_tidan"></span>提单确认
+        </button>
+        <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">
+        <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="checkFun"><span class="iconfont icon-jinggao"></span>校验</button>
+      </div>
+      <div class="btn-list single-view-1">
+        <button @click="changePage('prev')"><span class="iconfont icon-shang"></span>上一票</button>
+        <button @click="changePage('next')">
+          <span class="iconfont icon-xia" :style="{ fontSize: '17px' }"></span>下一票
+        </button>
+      </div>
+      <div
+        v-if="!details.hbList || details.hbList.length === 0"
+        class="btn-list single-view-1"
+        :style="{ width: '150px' }"
+      >
+        <button @click="addChild()"><span class="iconfont icon-zhizhishu"></span>添加分单</button>
+        <!-- <button><span class="iconfont icon-electronic-signature"></span>自定义必填项</button> -->
+      </div>
+    </a-card>
+
+    <!-- 弹窗部分 start -->
+    <a-modal
+      :title="emnuHeader(modelType)"
+      :width="['bookingSpace', 'cutOff'].includes(modelType) ? 600 : 1200"
+      :visible="bookingModelvisible"
+      :confirmLoading="bookingModelconfirm"
+      :maskClosable="false"
+      @ok="handleModelSubmit"
+      @cancel="handleModelCancel"
+    >
+      <template v-if="['bookingSpace', 'cutOff'].includes(modelType)">
+        <a-form>
+          <a-row :gutter="16">
+            <a-col :span="24" class="book-model-box">
+              <a-checkbox class="book-check" @change="bookingCheckChange" />
+              <a-form-item
+                label="使用货代代码"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+              >
+                <a-input :allowClear="true" v-model="bookingModelFrom.forwarderCode" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item
+                label="货代称呼"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+              >
+                <a-input :allowClear="true" v-model="bookingModelFrom.forwarderName" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item
+                label="文件功能"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                class="ant-form-file"
+              >
+                <a-radio-group v-model="bookingModelFrom.fileRole">
+                  <a-radio :style="radioStyle" :value="9"> 原始 </a-radio>
+                  <a-radio :style="radioStyle" :value="1"> 更新 </a-radio>
+                  <a-radio :style="radioStyle" :value="5"> 退舱 </a-radio>
+                </a-radio-group>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+        <template slot="footer">
+          <a-button @click="handleModelCancel">关闭</a-button>
+          <a-button type="primary" @click="handleModelSubmit('save')" :loading="EDISloading">保存EDI文件</a-button>
+          <a-button type="primary" @click="handleModelSubmit('send')" :loading="EDIUloading">上传EDI</a-button>
+        </template>
+      </template>
+
+      <template v-else-if="['initCabin', 'ladingBill', 'vgmlink'].includes(modelType)">
+        <div class="model-btn-list" v-if="modelType === 'initCabin' || modelType === 'ladingBill'">
+          <a-button class="btn" @click="saveModel" :loading="SaveLoading">保存</a-button>
+          <!-- <a-button class="btn" type="primary" @click="sendModel" :loading="SendLoading">发送</a-button> -->
+          <a-button
+            class="btn"
+            type="primary"
+            @click="removeModel"
+            :loading="DelLoading"
+            v-if="['initCabin'].includes(modelType) || ['ladingBill'].includes(modelType)"
+          >
+            删除
+          </a-button>
+          <template v-if="modelType === 'initCabin' || modelType === 'ladingBill'">
+            <a-button class="btn" type="primary" @click="downLoadFile">
+              打印
+            </a-button>
+            <!-- <a-button class="btn" type="primary" @click="downLoadFile(2, 'EXCEL')" :loading="downLoadEXCELLoading">
+              EXCEL
+            </a-button>
+            <a-button class="btn" type="primary" @click="downLoadFile(1, 'PDF')" :loading="downLoadPDFLoading">
+              PDF
+            </a-button>
+            <a-button class="btn" type="primary" @click="downLoadFile(3, 'DOCX')" :loading="downLoadDOCXLoading">
+              DOCX
+            </a-button> -->
+          </template>
+        </div>
+        <a-form>
+          <a-row :gutter="16">
+            <div class="item-box to-box" :style="{ paddingTop: '0px' }">
+              <!-- to -->
+              <a-col :span="24">
+                <a-form-item
+                  label="TO"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                  :style="{ marginLeft: '-18px' }"
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.toName" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item
+                  label="ATTN"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.attn" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item
+                  label="电话"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.attnTel" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item
+                  label="邮箱"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.attnMail" />
+                </a-form-item>
+              </a-col>
+              <!-- from -->
+              <a-col :span="8">
+                <a-form-item
+                  label="FROM"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.fromName" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item
+                  label="电话"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.fromTel" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item
+                  label="邮箱"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-input :allowClear="true" v-model="initCabinFrom.fromMail" />
+                </a-form-item>
+              </a-col>
+            </div>
+            <template v-if="modelType === 'initCabin'">
+              <div class="item-box cabin-box" :style="{ paddingTop: '0px' }">
+                <a-col :span="24">
+                  <a-form-item
+                    label="提箱小票链接"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    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>
+                    </div>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                  <a-form-item
+                    label="VGM链接"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    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>
+                    </div>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                  <a-form-item
+                    label="SI&VGM链接"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    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>
+                    </div>
+                  </a-form-item>
+                </a-col>
+              </div>
+              <div class="item-box vgm-info">
+                <a-col :span="8">
+                  <a-form-item
+                    label="场站"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <!-- {{ details.yard || '--' }} -->
+                    <a-select
+                      class="customer-input"
+                      style="width:195px;"
+                      :default-value="initCabinFrom.yard"
+                      v-model="initCabinFrom.yard"
+                      @change="handleYardChange"
+                      show-search
+                      :filter-option="filterOption"
+                      :dropdownMatchSelectWidth="false"
+                    >
+                      <a-select-option v-for="(yard, yindex) in yardSelectData" :key="yindex" :value="yindex">
+                        {{ yard.selectShowTab }}
+                      </a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-item
+                    label="联系人"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <a-input
+                      class="box-input"
+                      style="width:195px;"
+                      :allowClear="true"
+                      v-model="initCabinFrom.yardcontract"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-item
+                    label="电话"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <a-input
+                      class="box-input"
+                      style="width:195px;"
+                      :allowClear="true"
+                      v-model="initCabinFrom.yardcontracttel"
+                    />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-item
+                    label="截港时间"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <!-- {{ details.closingdate || '--' }} -->
+                    <a-date-picker
+                      show-time
+                      style="width:120px;"
+                      format="YYYY-MM-DD HH:mm:ss"
+                      v-model="initCabinFrom.closingTime"
+                      @change="closingdateChange"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-item
+                    label="截单时间"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <!-- {{ details.closedocdate || '--' }} -->
+                    <a-date-picker
+                      show-time
+                      style="width:120px;"
+                      format="YYYY-MM-DD HH:mm:ss"
+                      v-model="initCabinFrom.closeDocTime"
+                      @change="closedocdateChange"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker>
+                  </a-form-item>
+                </a-col>
+                <a-col :span="8">
+                  <a-form-item
+                    label="截VGM时间"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    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"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker>
+                  </a-form-item>
+                </a-col>
+              </div>
+              <div class="item-box vgm-remarks" style="padding-top:0px;padding-bottom:0px;">
+                <a-col :span="24">
+                  <a-form-item
+                    label="备注"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <div class="box-flex">
+                      <a-input
+                        class="remark-input"
+                        style="width:1000px !important; text-align: left;"
+                        :allowClear="true"
+                        v-model="initCabinFrom.remark"
+                      />
+                    </div>
+                  </a-form-item>
+                </a-col>
+              </div>
+            </template>
+            <template v-if="modelType === 'vgmlink'">
+              <div class="item-box" style="padding-top:0px;padding-bottom:0px;">
+                <a-col :span="24">
+                  <a-form-item
+                    label="VGM提交地址"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    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
+                      >
+                    </div>
+                  </a-form-item>
+                </a-col>
+              </div>
+              <div class="item-box vgm-info">
+                <a-col :span="6">
+                  <a-form-item
+                    label="主提单号"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.mblno || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="分提单号"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.hblno || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="海关航次"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.voyno || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="开船日期"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.etd || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="截港时间"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.closingdate || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="截单时间"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.closedocdate || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-item
+                    label="截VGM时间"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 4 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.closevgmdate || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="装货港"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.portload || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="卸货港"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.portdischarge || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="目的地"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.destination || '--' }}
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-item
+                    label="件重尺"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 8 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    {{ details.pkgs || '--' }} / {{ details.kgs || '--' }} / {{ details.cbm || '--' }}
+                  </a-form-item>
+                </a-col>
+              </div>
+              <div class="item-box vgm-remarks" style="padding-top:0px;padding-bottom:0px;">
+                <a-col :span="24">
+                  <a-form-item
+                    label="备注"
+                    :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                    has-feedback
+                  >
+                    <div class="box-flex">
+                      <a-input
+                        style="width:1000px !important; text-align: left;"
+                        :allowClear="true"
+                        v-model="initCabinFrom.remark"
+                      />
+                    </div>
+                  </a-form-item>
+                </a-col>
+              </div>
+            </template>
+            <!-- ==== -->
+            <!-- <template v-if="modelType === 'ladingBill'">
+              <iframe class="pdf-view" src="billPdf" width="100%" height="100%" v-if="hsaBillPdf"></iframe>
+              <div class="no-pdf" v-else>{{ billPdfTip }}</div>
+            </template> -->
+          </a-row>
+        </a-form>
+        <template slot="footer">
+          <!-- <template v-if="['initCabin'].includes(modelType)"> -->
+          <a-button @click="handleModelCancel">关闭</a-button>
+          <!-- </template> -->
+          <!-- <template v-else>
+            <a-button @click="saveModel" :loading="SaveLoading">保存</a-button>
+            <a-button type="primary" @click="sendModel" :loading="SendLoading">发送</a-button>
+          </template> -->
+        </template>
+      </template>
+    </a-modal>
+    <!-- 弹窗部分 end -->
+    <!-- 打印弹窗 start -->
+    <a-modal width="50vw" :maskClosable="false" v-model="PrintModalVisible" title="打印">
+      <template slot="footer"> <span></span> </template>
+      <div class="PrintMain">
+        <div class="PrintTitle">
+          <p>默认打印格式为<span>pdf</span>,如需其他格式请选择</p>
+          <p>
+            打印格式：
+            <a-radio-group v-model="PrintType" @change="FnChangePrintType" name="radioGroup">
+              <a-radio value="1">pdf</a-radio>
+              <a-radio value="2">xlsx</a-radio>
+              <a-radio value="3">docx</a-radio>
+              <a-radio value="4">精确打印</a-radio>
+            </a-radio-group>
+          </p>
+        </div>
+        <a-row class="PrintMainBox">
+          <a-col
+            v-for="(item, index) in templateType"
+            :key="item.typeCode"
+            @click="FnCilckTemplateType(item.id)"
+            class="items"
+            :span="11"
+            :offset="index % 2 == 0 ? 0 : 1"
+          >
+            <span>·</span>{{ item.displayName }}
+          </a-col>
+        </a-row>
+      </div>
+    </a-modal>
+    <!-- 打印弹窗 end -->
+
+    <!-- OCR抽屉 start -->
+    <a-drawer
+      title="OCR"
+      width="45vw"
+      :destroyOnClose="true"
+      :mask="false"
+      placement="right"
+      :visible="OcrVisible"
+      @close="OcrOnClose"
+      class="OCRBox"
+    >
+      <a-row justify="end" :style="{ width: '100%', marginTop: '5px' }">
+        <a-col :span="6" :offset="18">
+          <span>缩放比例：</span>
+          <a-select size="small" v-model="scale" style="width: 120px">
+            <a-select-option value="1.0">100%</a-select-option>
+            <a-select-option value="1.2">120%</a-select-option>
+            <a-select-option value="1.5">150%</a-select-option>
+            <a-select-option value="2.0">200%</a-select-option>
+          </a-select>
+        </a-col>
+      </a-row>
+
+      <canvas
+        class="CV"
+        id="myCanvas"
+        ref="myCanvas"
+        width="893"
+        height="1262"
+        @mousedown="mousedown"
+        @mouseup="mouseup"
+        @mousemove="mousemove"
+        :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>
+    </a-drawer>
+
+    <!-- OCR抽屉 end -->
+
+    <!-- 运踪弹窗 start -->
+    <a-modal width="50vw" :maskClosable="false" v-model="traceModalVisible" title="运踪订阅">
+      <div class="trace-box">
+        <a-form>
+          <a-row :gutter="16">
+            <a-col :span="24" class="book-model-box">
+              <a-form-item
+                label="请选择订阅内容"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+              >
+                <a-checkbox-group
+                  class="trace-check"
+                  v-model="traceValue"
+                  name="checkboxgroup"
+                  :options="traceOptions"
+                  @change="onTraceChange"
+                />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+      <template slot="footer">
+        <a-button type="primary" @click="traceSend">订阅</a-button>
+      </template>
+    </a-modal>
+    <!-- 运踪弹窗 end -->
+  </div>
+</template>
+<script>
+import {
+  SendBookingOrClosingEDI,
+  SendXHZ,
+  VgmSend,
+  LetterYard,
+  SampleBill,
+  VgmLink,
+  SendLetterYard,
+  SaveBookingLetteryard,
+  SaveBookingSampleBill,
+  SampleBillPdf,
+  TxxpLink,
+  ExcuteRulesOceanBooking,
+  BookingOrderPrintOrder,
+  BookingOrderDownloadPrint,
+  BookingOrderOcrUpFile,
+  BookingOrderOcrGetImg,
+  BookingOrderOcrGetText,
+  BookingOrderPrintTemplateList,
+  BookingOrderPrintTemplateWithHistoryList,
+  DownloadBookingOrClosingEDI,
+  DeleteLetterYard,
+  LetterYardPdf,
+  SendTrace,
+  GetYardlist
+} from '@/api/modular/main/BookingLedger'
+
+export default {
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      id: this.$route.query.id,
+      modelType: '',
+      bookingModelvisible: false,
+      bookingModelconfirm: false,
+      // 订舱等表单
+      bookingModelFrom: {
+        id: this.$route.query.id,
+        orderNo: this.details.mblno,
+        useForwarderCode: false,
+        forwarderCode: '',
+        forwarderName: '',
+        fileRole: 9,
+        sendType: 'B',
+        send: false
+      },
+      radioStyle: {
+        display: 'block',
+        height: '30px',
+        lineHeight: '30px'
+      },
+      // 放舱表单
+      initCabinFrom: {
+        toName: '',
+        attn: '',
+        attnTel: '',
+        attnMail: '',
+        fromName: '',
+        fromTel: '',
+        fromMail: '',
+        orderUrl: {
+          urlTxxp: '',
+          urlVgm: '',
+          urlVgmSi: ''
+        },
+        remark: ''
+      },
+      // 样单
+      hsaBillPdf: false,
+      billPdf: '',
+      billPdfTip: '',
+      templateType: [],
+      EDISloading: false,
+      EDIUloading: false,
+      SaveLoading: false,
+      SendLoading: false,
+      DelLoading: false,
+      PrintModalVisible: false,
+      OcrVisible: false,
+      fileList: [],
+      fileName: '',
+      flag: false,
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      Bx: 0,
+      By: 0,
+      CvBoxType: false,
+      imgSrc: '',
+      CvData: [
+        { name: '发货人', code: 'shipper' },
+        { name: '收货人', code: 'consignee' },
+        { name: '装货港', code: 'portload' },
+        { name: '目的地', code: 'destination' },
+        { name: '唛头', code: 'marks' },
+        { name: '货物描述', code: 'description' },
+        { name: '包装', code: 'kindpkgs' },
+        { name: '件数', code: 'pkgs' },
+        { name: '尺寸', code: 'cbm' },
+        { name: '毛重', code: 'kgs' },
+        { name: '卸货港', code: 'portdischarge' },
+        { name: '通知人', code: 'notifyparty' }
+      ],
+      BCvData: [],
+      Rdata: '',
+      scale: '1.5',
+      PrintType: '1',
+      downLoadEXCELLoading: false,
+      downLoadPDFLoading: false,
+      downLoadDOCXLoading: false,
+      traceOptions: [
+        { label: '起运港', value: '1' },
+        { label: '目的港', value: '2' }
+      ],
+      traceValue: [],
+      traceModalVisible: false,
+      cateCode: ''
+    }
+  },
+  mounted() {
+    this.BCvData = [...this.CvData]
+    this.getYardlist()
+  },
+  watch: {
+    scale() {
+      if (this.fileName) {
+        BookingOrderOcrGetImg({ fileName: this.fileName, scale: this.scale }).then(res => {
+          this.imgSrc = window.URL.createObjectURL(new Blob([res]))
+        })
+      }
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+      }
+    }
+  },
+  methods: {
+    // ========== OCR ==========
+    FnClickCvBox(data) {
+      let Arr = ['pkgs', 'cbm', 'kgs', 'portdischarge', 'destination', 'kindpkgs']
+      let Type = false
+      Arr.forEach(item => {
+        if (data.code == item) {
+          Type = true
+        }
+      })
+      if (Type) {
+        if (data.code == 'pkgs' || data.code == 'cbm' || data.code == 'kgs') {
+          this.details[data.code] = parseFloat(this.Rdata)
+        } else {
+          this.details[data.code] = this.Rdata
+        }
+      } else {
+        this.details[data.code] = this.details[data.code] + this.Rdata
+      }
+      console.log(data)
+      console.log(data.code)
+      console.log(this.details)
+      console.log(this.details[data.code])
+      console.log(this.Rdata)
+      // this.details[data.code] = this.details[data.code] + this.Rdata
+      this.CvBoxType = false
+      this.BCvData.forEach((item, index) => {
+        if (item.code == data.code) {
+          this.BCvData.splice(index, 1)
+          this.BCvData.push(item)
+        }
+      })
+    },
+    drawRect(e) {
+      if (this.flag) {
+        const canvas = this.$refs.myCanvas
+        var ctx = canvas.getContext('2d')
+        let x = this.x
+        let y = this.y
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height)
+        ctx.beginPath()
+
+        //设置线条颜色，必须放在绘制之前
+        ctx.strokeStyle = '#e1271d'
+        // 线宽设置，必须放在绘制之前
+        ctx.lineWidth = 1
+        this.width = e.offsetX - x
+        this.height = e.offsetY - y
+
+        ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y)
+      }
+    },
+    mousemove(e) {
+      if (this.imgSrc) {
+        this.drawRect(e)
+      }
+    },
+    mousedown(e) {
+      this.$refs.myCanvas.getContext('2d').clearRect(0, 0, this.$refs.myCanvas.width, this.$refs.myCanvas.height)
+      if (this.imgSrc) {
+        this.flag = true
+        this.x = e.offsetX // 鼠标落下时的X
+        this.y = e.offsetY // 鼠标落下时的Y
+        this.CvBoxType = false
+        this.width = 0
+        this.height = 0
+      }
+    },
+    mouseup(e) {
+      // console.log(this.width, this.flag, this.imgSrc)
+      this.flag = false
+      if (this.imgSrc && this.width != 0 && this.height != 0) {
+        BookingOrderOcrGetText({
+          fileName: this.fileName,
+          x: this.x,
+          y: this.y,
+          w: this.width,
+          h: this.height,
+          scale: this.scale
+        }).then(res => {
+          this.Rdata = res.data
+          this.Bx = this.x + this.width
+          this.By = this.y + this.height
+          this.CvBoxType = true
+        })
+      }
+    },
+    beforeUpload(file) {
+      console.log(this.details, 'this.details')
+      // this.$bus.$emit('WebTest001', { upFileList: file, attachCode: 'other', attachName: '其他' })
+    },
+    uploadFile(file) {
+      const formData = new FormData()
+      formData.append('file', file.file)
+      // formData.append('bookingId', this.id)
+      const type = file.file.type
+      console.log(type)
+      BookingOrderOcrUpFile({ data: formData, parameter: { bookingId: this.id } }).then(res => {
+        this.fileName = res.data
+        BookingOrderOcrGetImg({ fileName: this.fileName, scale: this.scale }).then(res => {
+          this.imgSrc = window.URL.createObjectURL(new Blob([res], { type: `${type};chartset=UTF-8` }))
+        })
+      })
+    },
+    ShowOCR() {
+      if (this.OcrVisible) {
+        this.OcrOnClose()
+      } else {
+        this.OcrVisible = true
+      }
+    },
+    OcrOnClose() {
+      this.imgSrc = ''
+      this.OcrVisible = false
+      this.CvBoxType = false
+    },
+    // ========== 订舱打印 ==========
+    FnChangePrintType(e) {
+      let printType = ''
+      if (e.target.value == 4) {
+        printType = 20
+      } else {
+        printType = 10
+      }
+      this.GetPrintData(this.cateCode, printType)
+    },
+    GetPrintData(cateCode, printType) {
+      let Data = {
+        cateCode,
+        printType
+      }
+      BookingOrderPrintTemplateWithHistoryList(Data).then(res => {
+        this.templateType = res.data
+        this.PrintModalVisible = true
+      })
+    },
+    FSnhowPrintModal() {
+      BookingOrderPrintTemplateList().then(res => {
+        console.log(res.data)
+        this.templateType = []
+        res.data.forEach(item => {
+          if (item.isMain) {
+            this.templateType.push(item)
+          }
+        })
+      })
+      this.PrintModalVisible = true
+    },
+    FnCilckTemplateType(templateId) {
+      this.$message.success(`搜索文件中...`)
+      let printType = this.PrintType == 4 ? 20 : 10
+      BookingOrderPrintOrder({ templateId, bookingId: this.id, type: this.PrintType, printType })
+        .then(res => {
+          if (!res.success) {
+            this.$message.error(res.message)
+          } else {
+            this.$message.success(res.data)
+            // this.$message.success(`预览打印文件 ${res.data} 中...`)
+            // let PrintType = 'pdf'
+            // switch (this.PrintType) {
+            //   case '1':
+            //     PrintType = 'pdf'
+            //     break
+            //   case '2':
+            //     PrintType = 'xlsx'
+            //     break
+            //   default:
+            //     PrintType = 'docx'
+            //     break
+            // }
+            // BookingOrderDownloadPrint({ fileName: res.data }).then(res2 => {
+            //   const blob = new Blob([res2], { type: `application/${PrintType};chartset=UTF-8` })
+            //   if (this.PrintType == '1') {
+            //     window.open(URL.createObjectURL(blob), '_blank')
+            //   } else {
+            //     const link = document.createElement('a')
+            //     link.style.display = 'none'
+            //     link.href = URL.createObjectURL(blob)
+            //     link.download = res.data
+            //     document.body.appendChild(link)
+            //     link.click()
+            //     URL.revokeObjectURL(link.href) // 释放URL对象
+            //     document.body.removeChild(link)
+            //   }
+            // })
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    refreshPage() {
+      this.$emit('refresh')
+    },
+    cancelRefresh() {
+      return false
+    },
+    openModel(type) {
+      // debugger
+      if (['initCabin', 'ladingBill', 'vgmlink'].includes(type)) {
+        if (!this.$route.query.id) {
+          this.$message.error('请保存主单后，进行操作')
+          return false
+        }
+      }
+      if (type == 'ladingBill') {
+        this.cateCode = 'tidan'
+        // let a = {
+        //   zhudan_print: '主单打印',
+        //   fendan_print: '分单打印',
+        //   fangcang: '放舱',
+        //   tidan: '提单'
+        // }
+      }
+      if (['bookingSpace', 'cutOff', 'initCabin', 'ladingBill', 'vgmlink'].includes(type)) {
+        // 订舱 / 截单
+        this.modelType = type
+        this.bookingModelvisible = true
+      } else if (['vgm', 'paper'].includes(type)) {
+        this.openDialog(type)
+      } else if (type === 'trace') {
+        this.traceModalVisible = true
+      }
+      if (['initCabin', 'ladingBill', 'vgmlink'].includes(type)) {
+        this.initCabinFrom = {
+          toName: '',
+          attn: '',
+          attnTel: '',
+          attnMail: '',
+          fromName: '',
+          fromTel: '',
+          fromMail: '',
+          orderUrl: {
+            urlTxxp: '',
+            urlVgm: '',
+            urlVgmSi: ''
+          },
+          remark: '',
+          yard: this.details.yard,
+          yardid: this.details.yardid,
+          closeDocTime: this.details.closedocdate,
+          closingTime: this.details.closingdate,
+          vgmTime: this.details.closevgmdate,
+          yardcontract: this.details.yardcontract,
+          yardcontracttel: this.details.yardcontracttel
+        }
+      }
+      if (type === 'initCabin') {
+        this.getLetterYard()
+      } else if (type === 'ladingBill') {
+        this.getSampleBill()
+        this.sampleBillPdf()
+      } else if (type === 'vgmlink') {
+        this.getVgmLink()
+      }
+    },
+    emnuHeader(type) {
+      let title = ''
+      switch (type) {
+        case 'bookingSpace':
+          title = '订舱'
+          break
+        case 'cutOff':
+          title = '截单'
+          break
+        case 'initCabin':
+          title = '放舱'
+          break
+        case 'ladingBill':
+          title = '样单'
+          break
+        case 'vgmlink':
+          title = 'vgm链接'
+          break
+      }
+      return title
+    },
+    // 订舱 / 截单
+    handleModelSubmit(type) {
+      if (this.modelType === 'bookingSpace') {
+        this.bookingModelFrom.sendType = 'B'
+      } else if (this.modelType === 'cutOff') {
+        this.bookingModelFrom.sendType = 'E'
+      }
+      this.bookingModelFrom.send = type === 'send'
+      this.bookingModelFrom.orderNo = this.details.mblno
+      if (type == 'save') {
+        this.EDISloading = true
+        this.downloadBookingOrEDI(type)
+      } else {
+        this.EDIUloading = true
+        this.sendBookingOrEDI(type)
+      }
+    },
+    sendBookingOrEDI(type) {
+      SendBookingOrClosingEDI(this.bookingModelFrom)
+        .then(res => {
+          this.EDISloading = false
+          this.EDIUloading = false
+          // 未完成
+          if (res.success) {
+            this.$message.success('发送成功')
+            this.handleModelCancel()
+          } else {
+            const h = this.$createElement
+            this.$message.error({
+              content: () =>
+                h(
+                  'p',
+                  {
+                    style: {
+                      whiteSpace: 'pre-wrap'
+                    }
+                  },
+                  res.message
+                )
+            })
+            // this.$message.error(res.message)
+          }
+        })
+        .catch(() => {
+          this.EDISloading = false
+          this.EDIUloading = false
+        })
+    },
+    downloadBookingOrEDI(type) {
+      DownloadBookingOrClosingEDI(this.bookingModelFrom)
+        .then(res => {
+          this.EDISloading = false
+          this.EDIUloading = false
+          if (res.message) {
+            // this.$message.error(res.message)
+            const h = this.$createElement
+            this.$message.error({
+              content: () =>
+                h(
+                  'p',
+                  {
+                    style: {
+                      whiteSpace: 'pre-wrap'
+                    }
+                  },
+                  res.message
+                )
+            })
+            return false
+          } else {
+            const pdfUrl = window.URL.createObjectURL(new Blob([res], { type: 'text/plain;charset=utf-8' }))
+            const fname = `${this.details.mblno} - ${this.modelType === 'bookingSpace' ? '订舱' : '截单'}Edi` // 下载文件的名字
+            const link = document.createElement('a')
+            link.href = pdfUrl
+            link.setAttribute('download', fname)
+            document.body.appendChild(link)
+            link.click()
+            this.handleModelCancel()
+          }
+        })
+        .catch(() => {
+          this.EDISloading = false
+          this.EDIUloading = false
+        })
+    },
+    handleModelCancel() {
+      this.modelType = ''
+      this.bookingModelvisible = false
+      this.EDISloading = false
+      this.EDIUloading = false
+      this.bookingModelFrom = {
+        id: this.$route.query.id,
+        orderNo: this.details.mblno,
+        useForwarderCode: false,
+        forwarderCode: '',
+        forwarderName: '',
+        fileRole: 9,
+        sendType: 'B',
+        send: false
+      }
+    },
+    // vgm / 下货纸
+    openDialog(type) {
+      let content = null
+      const _this = this
+      if (type === 'vgm') {
+        content = h => <div>确认发送VGM吗?</div>
+      } else if (type === 'paper') {
+        content = h => <div>确认发送下货纸吗?</div>
+      }
+      this.$confirm({
+        title: '温馨提示',
+        content: content,
+        onOk() {
+          if (type === 'vgm') {
+            _this.vgmSend()
+          } else if (type === 'paper') {
+            _this.sendXHZ()
+          }
+        },
+        onCancel() {
+          console.log('Cancel')
+        },
+        class: 'test'
+      })
+    },
+
+    sendXHZ() {
+      const hide = this.$message.loading('发送中..', 0)
+      SendXHZ(this.id)
+        .then(res => {
+          hide()
+          if (res.success) {
+            this.$message.success(`下货纸发送成功`)
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    vgmSend() {
+      const hide = this.$message.loading('发送中..', 0)
+      VgmSend(this.id)
+        .then(res => {
+          hide()
+          if (res.success) {
+            this.$message.success(`VGM发送成功`)
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    // 获取放舱信息
+    getLetterYard() {
+      LetterYard(this.id)
+        .then(res => {
+          if (res.success) {
+            this.initCabinFrom = { ...this.initCabinFrom, ...res.data }
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    // 获取样单信息
+    getSampleBill() {
+      SampleBill(this.id)
+        .then(res => {
+          if (res.success) {
+            this.initCabinFrom = res.data
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    // 获取VGM信息
+    getVgmLink() {
+      LetterYard(this.id)
+        .then(res => {
+          if (res.success) {
+            this.initCabinFrom = { ...this.initCabinFrom, ...res.data }
+            // VgmLink(this.id)
+            // .then(oRes => {
+            //   if (oRes.success) {
+            //   } else {
+            //     this.$message.error(oRes.message)
+            //   }
+            // })
+            // .catch(oErr => {
+            //   console.log(oErr)
+            // })
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    sampleBillPdf() {
+      SampleBillPdf(this.id)
+        .then(res => {
+          if (res.success) {
+            this.hsaBillPdf = true
+            this.billPdf = res.data.description
+          } else {
+            this.hsaBillPdf = false
+            this.billPdfTip = res.message
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    copyFun(data) {
+      const copyInput = document.createElement('input')
+      document.body.appendChild(copyInput)
+      copyInput.setAttribute('value', data)
+      copyInput.select()
+      document.execCommand('Copy', false, null)
+      this.$message.success('复制成功')
+      copyInput.remove()
+    },
+
+    // 主页打开TAB
+    openTab(type) {
+      this.$emit('openTab', { type: type })
+    },
+
+    // 保存
+    saveFun() {
+      this.$emit('save')
+    },
+    bookingCheckChange(e) {
+      this.bookingModelFrom.useForwarderCode = e.target.checked
+    },
+
+    // 放舱 vgm 等保存按钮
+    saveModel() {
+      this.SaveLoading = true
+      // 手机号/ 邮箱 验证未加
+      if (this.modelType === 'initCabin') {
+        // 放舱
+        this.saveBookingLetteryard()
+      } else if (this.modelType === 'vgmlink') {
+        // VGM 链接
+        console.log('暂无接口')
+      } else {
+        // 样单
+        this.saveBookingSampleBill()
+      }
+    },
+
+    sendModel() {
+      this.SendLoading = true
+      if (this.modelType === 'initCabin') {
+        // 放舱
+        this.sendLetterYard()
+      } else if (this.modelType === 'vgmlink') {
+        // VGM 链接
+        console.log('暂无接口')
+      } else {
+        // 样单
+        console.log('暂无接口')
+      }
+    },
+
+    removeModel() {
+      if (this.modelType === 'initCabin') {
+        // 放舱
+        debugger
+        this.DelLoading = true
+        DeleteLetterYard(this.id)
+          .then(res => {
+            if (res.success) {
+              this.$message.success('删除成功')
+              this.handleModelCancel()
+            } else {
+              this.$message.error(res.message)
+            }
+            this.DelLoading = false
+          })
+          .catch(() => {
+            this.DelLoading = false
+          })
+      } else if (this.modelType === 'vgmlink') {
+        // VGM 链接
+        console.log('暂无接口')
+      }
+    },
+
+    // 保存放舱
+    saveBookingLetteryard() {
+      console.log('=== 放舱 ===', this.initCabinFrom)
+      // if (!this.id) {
+      // this.initCabinFrom = {
+      //   ...this.initCabinFrom,
+      //   ...{
+      //     closeDocTime: this.details.closedocdate,
+      //     closingTime: this.details.closingdate,
+      //     vgmTime: this.details.closevgmdate,
+      //     yardcontract: this.details.yardcontract,
+      //     yardcontracttel: this.details.yardcontracttel
+      //   }
+      // }
+      // }
+      debugger
+      SaveBookingLetteryard(this.initCabinFrom)
+        .then(res => {
+          if (res.success) {
+            this.$message.success('保存成功')
+            // this.initCabinFrom = res.data
+          } else {
+            this.$message.error(res.message)
+          }
+          this.getLetterYard()
+          this.SaveLoading = false
+        })
+        .catch(() => {
+          this.SaveLoading = false
+        })
+    },
+
+    // 保存 / 发送 样单
+    saveBookingSampleBill() {
+      SaveBookingSampleBill(this.initCabinFrom)
+        .then(res => {
+          if (res.success) {
+            this.$message.success('保存成功')
+          } else {
+            this.$message.error(res.message)
+          }
+          this.SaveLoading = false
+        })
+        .catch(() => {
+          this.SaveLoading = false
+        })
+    },
+
+    // 发送放舱
+    sendLetterYard() {
+      SendLetterYard(this.id)
+        .then(res => {
+          if (res.success) {
+            this.$message.success('发送成功')
+          } else {
+            this.$message.error(res.message)
+          }
+          this.SendLoading = false
+        })
+        .catch(() => {
+          this.SendLoading = false
+        })
+    },
+
+    TxxpLink() {
+      TxxpLink(this.id)
+        .then(res => {
+          if (res.success) {
+            this.copyFun(res.data)
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    checkFun() {
+      this.$message.loading({ content: '校验中...' })
+      ExcuteRulesOceanBooking(this.id)
+        .then(res => {
+          if (res.success) {
+            this.$message.destroy()
+            if (!res.data.succ) {
+              this.$message.error(res.data.msg)
+            } else {
+              this.$message.success({ content: '校验完成' })
+            }
+            this.$emit('rules', {
+              rows: res.data.rows,
+              type: res.data.succ ? 'success' : 'fail'
+            })
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(() => {
+          this.$message.destroy()
+          this.$message.success({ content: '校验失败' })
+        })
+    },
+
+    changePage(type) {
+      if (!this.$route.query.id) {
+        this.$message.error('请先保存订单')
+        return false
+      }
+      this.$emit('changePage', type)
+    },
+    copyBooking() {
+      this.$emit('copy')
+    },
+    addChild() {
+      this.$emit('addSedList')
+    },
+    downLoadFile(type, type2) {
+      let _this = this
+      if (!this.id || !this.initCabinFrom.id) {
+        this.$message.error('请先保存数据')
+        return false
+      }
+      let printType = ''
+      if (this.PrintType == 4) {
+        printType = 20
+      } else {
+        printType = 10
+      }
+      this.GetPrintData(this.cateCode, printType)
+
+      // this[`downLoad${type2}Loading`] = true
+      // LetterYardPdf({
+      //   bookingId: this.id,
+      //   type: type
+      // })
+      //   .then(res => {
+      //     // eslint-disable-next-line no-use-before-define
+      //     _this[`downLoad${type2}Loading`] = false
+      //     let fileType = ''
+      //     if (type === 1) {
+      //       fileType = 'application/pdf'
+      //     } else if (type === 2) {
+      //       fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      //     } else if (type === 3) {
+      //       fileType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      //     }
+      //     this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: `${fileType};charset=utf-8` }))
+      //     const fname = `入货通知--${this.details.mblno}` // 下载文件的名字
+      //     const link = document.createElement('a')
+      //     link.href = this.pdfUrl
+      //     link.setAttribute('download', fname)
+      //     document.body.appendChild(link)
+      //     link.click()
+      //     if (res.message) {
+      //       this.$message.error(res.message)
+      //     }
+      //   })
+      //   .catch(() => {
+      //     this[`downLoad${type2}Loading`] = false
+      //     this.$message.destroy()
+      //     this.$message.success({ content: '下载失败' })
+      //   })
+    },
+    onTraceChange(values) {
+      console.log(this.traceValue)
+    },
+    traceSend() {
+      if (!this.traceValue) {
+        this.$message.error('请选择订阅内容')
+        return false
+      }
+      if (this.traceValue.includes('1') && (!this.details.yard || !this.details.yardid)) {
+        this.$message.error('请选择场站')
+        return false
+      }
+      if (this.traceValue.includes('2') && (!this.details.carrierid || !this.details.carrier)) {
+        this.$message.error('请选择船公司')
+        return false
+      }
+      const query = {
+        businessId: this.$route.query.id,
+        mblno: this.details.mblno,
+        yard: this.traceValue.includes('1') ? this.details.yard : '',
+        yardCode: this.traceValue.includes('1') ? this.details.yardid : '',
+        carrierid: this.traceValue.includes('2') ? this.details.carrierid : '',
+        carrier: this.traceValue.includes('2') ? this.details.carrier : '',
+        isBook: !!this.traceValue.includes('2')
+      }
+      SendTrace([query])
+        .then(res => {
+          if (res.success) {
+            const tip = `订阅成功`
+            this.$message.success(tip)
+            this.traceModalVisible = false
+            this.traceValue = []
+          } else {
+            this.$message.success(res.message)
+            this.traceModalVisible = false
+            this.traceValue = []
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    getYardlist(name = '') {
+      GetYardlist({
+        keyword: name
+      })
+        .then(res => {
+          if (res.code === 200) {
+            this.yardData = res.data
+            const arr = []
+            res.data.map((item, index) => {
+              arr.push({
+                ...{ selectShowTab: item.name + ' / ' + item.code },
+                ...item
+              })
+            })
+            this.yardSelectData = arr
+            this.$forceUpdate()
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    yardSelect(value) {
+      this.details.yard = value
+      const index = this.yardDataArr.indexOf(value)
+      this.details.yardid = this.yardData[index].code
+    },
+    yardChange(value) {
+      // this.getYardlist(value)
+    },
+    handleYardChange(index) {
+      this.initCabinFrom.yard = this.yardSelectData[index].name
+      this.initCabinFrom.yardid = this.yardSelectData[index].code
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    closingdateChange(date, dateString) {
+      this.initCabinFrom.closingTime = dateString
+    },
+    closevgmdateChange(date, dateString) {
+      this.initCabinFrom.vgmTime = dateString
+    },
+    closedocdateChange(date, dateString) {
+      this.initCabinFrom.closeDocTime = dateString
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.vgm-info {
+  padding-top: 0px;
+  .ant-form-item {
+    margin-bottom: 0px;
+  }
+}
+.OCRBox {
+  /deep/.ant-drawer-body {
+    position: relative;
+    padding: 0 !important;
+  }
+}
+.CvBox {
+  position: absolute;
+  width: 100px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
+  padding: 0;
+  background: #ffffff;
+  li {
+    width: 100%;
+    text-align: center;
+    list-style-type: none;
+    padding: 3px 0;
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+}
+.CV {
+  // width: 100%;
+  // height: auto;
+  // background-repeat: no-repeat;
+}
+@import url('../index.less');
+.operation-area {
+  width: 100%;
+  text-align: left;
+  .btn-list {
+    padding: 0 10px;
+    box-sizing: border-box;
+    display: inline-block;
+    vertical-align: top;
+    text-align: left;
+    height: 48px;
+    margin-bottom: 20px;
+    position: relative;
+    background: #fff;
+    &::before {
+      content: '';
+      position: absolute;
+      top: 10px;
+      right: 0;
+      width: 1px;
+      height: 35px;
+      background: #ccc;
+    }
+    &:nth-last-of-type(1) {
+      &::before {
+        display: none;
+      }
+    }
+    button {
+      border: none;
+      font-size: 14px;
+      color: #666;
+      cursor: pointer;
+      background: #fff;
+      .iconfont {
+        font-size: 16px;
+        margin-right: 6px;
+        font-weight: 400;
+      }
+    }
+  }
+  .more-view {
+    width: 150px;
+    .iconfont {
+      color: #2095f2;
+    }
+  }
+  .more-view-1 {
+    width: 270px;
+    .iconfont {
+      color: #26b578;
+    }
+  }
+  .more-view-2 {
+    width: 205px;
+    .iconfont {
+      color: #ff9702;
+    }
+  }
+  .more-view-3 {
+    width: 160px;
+    .iconfont {
+      color: #f36f48;
+    }
+  }
+  .single-view {
+    width: 80px;
+    .iconfont {
+      color: #fcd017;
+    }
+  }
+  .single-view-1 {
+    width: 100px;
+    .iconfont {
+      color: #3455b6;
+    }
+    button:hover {
+      color: @primary-color;
+    }
+  }
+  .single-view-4 {
+    width: 85px;
+    //  padding-top: 10px;
+    .iconfont {
+      color: #1e7ece;
+    }
+  }
+}
+.box-flex {
+  display: flex;
+  padding-top: 8px;
+  .box-input {
+    flex: 1;
+    text-align: left;
+  }
+  span {
+    display: inline-block;
+    width: 25px;
+    text-align: right;
+    height: 32px;
+    line-height: 32px;
+    font-size: 13px;
+    cursor: pointer;
+    i {
+      color: @primary-color;
+    }
+  }
+}
+.item-box {
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  overflow: hidden;
+  border-bottom: 1px dashed #ccc;
+  &:nth-last-of-type(1) {
+    border: none;
+    margin-bottom: 0;
+  }
+}
+.cabin-box,
+.to-box {
+  .ant-row {
+    margin-bottom: 10px;
+  }
+}
+.book-model-box {
+  position: relative;
+  padding-left: 50px;
+  .book-check {
+    position: absolute;
+    width: 50px;
+    height: 40px;
+    line-height: 40px;
+    top: 0;
+    left: 17px;
+  }
+}
+.pdf-view {
+  height: 400px;
+}
+.no-pdf {
+  text-align: center;
+  margin: 20px 0;
+}
+.Citems {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.PrintMain {
+  display: flex;
+  flex-wrap: wrap;
+
+  .PrintTitle {
+    width: 100%;
+    display: flex;
+    padding: 20px;
+    box-sizing: border-box;
+    background: #f7f8fe;
+    border: 1px dashed #cdcdcd;
+    p {
+      margin: 0;
+      &:nth-child(2) {
+        margin-left: 35px;
+      }
+      span {
+        color: #ff6646;
+      }
+    }
+  }
+  .PrintMainBox {
+    width: 100%;
+    max-height: 50vh;
+    overflow-y: auto;
+    margin-top: 5px;
+    .items {
+      padding-left: 1rem;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      border-bottom: 1px solid #ebebeb;
+      cursor: pointer;
+      &:hover {
+        color: #2f54eb;
+      }
+      span {
+        font-weight: bolder;
+        margin-right: 0.6rem;
+      }
+    }
+  }
+}
+/*订舱弹窗文件功能对齐 */
+/deep/ .ant-form-file {
+  .ant-form-item-label {
+    margin-top: -5px;
+    margin-right: 12px;
+  }
+}
+/*弹窗按钮颜色修改 */
+/deep/ .ant-modal-footer .ant-btn.ant-btn-primary span {
+  color: #fff;
+}
+/*弹窗文本框背景颜色修改 */
+/deep/ .ant-modal-body .ant-input-affix-wrapper {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: @primary-color !important;
+    opacity: 0.04;
+  }
+}
+/deep/ .ant-select-selection {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: @primary-color !important;
+    opacity: 0.04;
+  }
+}
+/deep/ .ant-calendar-picker {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: @primary-color !important;
+    opacity: 0.04;
+  }
+}
+/deep/ .ant-input-affix-wrapper,
+.ant-input-affix-wrapper-textarea-with-clear-btn {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: @primary-color !important;
+    opacity: 0.04;
+  }
+}
+.remark-input {
+  position: relative;
+  z-index: 1;
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: @primary-color !important;
+    opacity: 0.04;
+  }
+}
+/deep/ .ant-modal-body .ant-input {
+  background: none;
+}
+.PrintRadio {
+  width: 100%;
+  padding-left: 1rem;
+  margin-bottom: 0.8rem;
+}
+
+.PrintMain {
+  display: flex;
+  flex-wrap: wrap;
+
+  .PrintTitle {
+    width: 100%;
+    display: flex;
+    padding: 20px;
+    box-sizing: border-box;
+    background: #f7f8fe;
+    border: 1px dashed #cdcdcd;
+    p {
+      margin: 0;
+      &:nth-child(2) {
+        margin-left: 35px;
+      }
+      span {
+        color: #ff6646;
+      }
+    }
+  }
+  .PrintMainBox {
+    width: 100%;
+    max-height: 50vh;
+    overflow-y: auto;
+    margin-top: 5px;
+    .items {
+      padding-left: 1rem;
+      height: 2.5rem;
+      line-height: 2.5rem;
+      border-bottom: 1px solid #ebebeb;
+      cursor: pointer;
+      &:hover {
+        color: #2f54eb;
+      }
+      span {
+        font-weight: bolder;
+        margin-right: 0.6rem;
+      }
+    }
+  }
+}
+.trace-box {
+  padding: 20px 0;
+}
+.trace-check {
+  margin-left: 10px;
+}
+.model-btn-list {
+  margin-bottom: 15px;
+  .btn {
+    margin-right: 6px;
+    &.ant-btn-primary {
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/main/PrinttemplateRight/editForm.vue b/src/views/main/PrinttemplateRight/editForm.vue
index 5d7db12..b813212 100644
--- a/src/views/main/PrinttemplateRight/editForm.vue
+++ b/src/views/main/PrinttemplateRight/editForm.vue
@@ -69,7 +69,9 @@ export default {
       },
       visible: false,
       confirmLoading: false,
-      form: this.$form.createForm(this)
+      form: this.$form.createForm(this),
+      TemplateList: [],
+      UserList: []
     }
   },
   mounted() {
diff --git a/src/views/main/PrinttemplateRight/index.vue b/src/views/main/PrinttemplateRight/index.vue
index 37444e2..d888589 100644
--- a/src/views/main/PrinttemplateRight/index.vue
+++ b/src/views/main/PrinttemplateRight/index.vue
@@ -69,7 +69,7 @@
 import {
   BookingTemplateGetPrinttemplateRightList,
   BookingPrintTemplateDeletePrinttemplateRight,
-  SysUserPage
+  SysUserGetTenantUser
 } from '@/api/modular/main/PrinttemplateRight'
 import addForm from './addForm.vue'
 import editForm from './editForm.vue'
@@ -140,8 +140,8 @@ export default {
       Object.assign(this.$data, this.$options.data())
       this.ColumnsQuery = this.columns
       this.FnGetData()
-      SysUserPage().then(res => {
-        this.UserList = res.data.rows
+      SysUserGetTenantUser().then(res => {
+        this.UserList = res.data
       })
     },
     FnGetData() {
diff --git a/src/views/main/PrinttemplateRightNew/addForm.vue b/src/views/main/PrinttemplateRightNew/addForm.vue
index c08c9b8..627db62 100644
--- a/src/views/main/PrinttemplateRightNew/addForm.vue
+++ b/src/views/main/PrinttemplateRightNew/addForm.vue
@@ -27,7 +27,14 @@
               <a-select
                 placeholder="请选择打印模板"
                 mode="multiple"
-                v-decorator="['printTemplateId', { rules: [{ required: true, message: '请选择用户！' }] }]"
+                show-search
+                :default-active-first-option="false"
+                :show-arrow="false"
+                :filter-option="false"
+                :not-found-content="null"
+                @search="handleSearch"
+                @change="handleChange"
+                v-decorator="['printTemplateId', { rules: [{ required: true, message: '请选择打印模板！' }] }]"
               >
                 <a-select-option v-for="item in TemplateList" :key="item.id" :value="item.id">
                   {{ item.typeName }}
@@ -71,21 +78,41 @@ export default {
       confirmLoading: false,
       form: this.$form.createForm(this),
       UserList: [],
-      TemplateList: []
+      TemplateList: [],
+      TemplateList2: []
     }
   },
   mounted() {
     SysUserGetTenantUser().then(res => {
       this.UserList = res.data
     })
-    BookingPrintTemplateGetPrintTemplateList().then(res => {
-      this.TemplateList = res.data.rows
-    })
   },
   methods: {
+    handleSearch(value) {
+      console.log(value)
+      let Rdata = []
+      if (value) {
+        this.TemplateList2.forEach(item => {
+          if (item.typeName && item.typeName.indexOf(value) > -1) {
+            Rdata.push(item)
+          }
+        })
+      } else {
+        Rdata = this.TemplateList2
+      }
+      this.TemplateList = Rdata
+      console.log(this.TemplateList)
+    },
+    handleChange(value) {
+      this.form.printTemplateId = value
+    },
     // 初始化方法
     add(record) {
       this.visible = true
+      BookingPrintTemplateGetPrintTemplateList().then(res => {
+        this.TemplateList = res.data
+        this.TemplateList2 = res.data
+      })
     },
     /**
      * 提交表单
diff --git a/src/views/main/PrinttemplateRightNew/editForm.vue b/src/views/main/PrinttemplateRightNew/editForm.vue
index 6c98ccb..7413024 100644
--- a/src/views/main/PrinttemplateRightNew/editForm.vue
+++ b/src/views/main/PrinttemplateRightNew/editForm.vue
@@ -27,7 +27,14 @@
               <a-select
                 placeholder="请选择打印模板"
                 mode="multiple"
-                v-decorator="['printTemplateId', { rules: [{ required: true, message: '请选择用户！' }] }]"
+                show-search
+                :default-active-first-option="false"
+                :show-arrow="false"
+                :filter-option="false"
+                :not-found-content="null"
+                @search="handleSearch"
+                @change="handleChange"
+                v-decorator="['printTemplateId', { rules: [{ required: true, message: '请选择打印模板！' }] }]"
               >
                 <a-select-option v-for="item in TemplateList" :key="item.id" :value="item.id">
                   {{ item.typeName }}
@@ -70,24 +77,44 @@ export default {
       visible: false,
       confirmLoading: false,
       form: this.$form.createForm(this),
+      UserList: [],
       TemplateList: [],
-      UserList: []
+      TemplateList2: []
     }
   },
   mounted() {
     SysUserGetTenantUser().then(res => {
       this.UserList = res.data
     })
-    BookingPrintTemplateGetPrintTemplateList().then(res => {
-      this.TemplateList = res.data.rows
-    })
   },
   methods: {
+    handleSearch(value) {
+      console.log(value)
+      let Rdata = []
+      if (value) {
+        this.TemplateList2.forEach(item => {
+          if (item.typeName && item.typeName.indexOf(value) > -1) {
+            Rdata.push(item)
+          }
+        })
+      } else {
+        Rdata = this.TemplateList2
+      }
+      this.TemplateList = Rdata
+      console.log(this.TemplateList)
+    },
+    handleChange(value) {
+      this.form.printTemplateId = value
+    },
     // 初始化方法
     edit(record) {
       this.data = record
       console.log(record)
       this.visible = true
+      BookingPrintTemplateGetPrintTemplateList().then(res => {
+        this.TemplateList = res.data
+        this.TemplateList2 = res.data
+      })
       setTimeout(() => {
         this.form.setFieldsValue({
           sysUserId: record.sysUserId,