From e15477196936bb981df3de1eb54a7c47beeefdb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?= <963808678@qq.com>
Date: Mon, 25 Sep 2023 10:59:52 +0800
Subject: [PATCH] 9/25

---
 src/Views/BookingOrder/index.vue | 416 +++++++++++++++++++------------
 1 file changed, 251 insertions(+), 165 deletions(-)

diff --git a/src/Views/BookingOrder/index.vue b/src/Views/BookingOrder/index.vue
index a6ab349..9e8ebe7 100644
--- a/src/Views/BookingOrder/index.vue
+++ b/src/Views/BookingOrder/index.vue
@@ -24,285 +24,306 @@
     >
       <el-form :model="DialogForm" :label-width="100" disabled>
         <el-row>
-          <el-col :span="12">
+          <el-col :span="10">
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>基本信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="委托方">
                   <el-input v-model="DialogForm.weituo" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="三方付费">
                   <el-input v-model="DialogForm.thirdPay" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="PO号">
                   <el-input v-model="DialogForm.poNo" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="船公司">
                   <el-input v-model="DialogForm.carrier" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="是否占舱">
                   <el-input v-model="DialogForm.zhanCangFlag" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="订舱编号">
                   <el-input v-model="DialogForm.custno" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="主提单号">
                   <el-input v-model="DialogForm.mblNo" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="分提单号">
                   <el-input v-model="DialogForm.hblNo" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="订舱代理">
                   <el-input v-model="DialogForm.forwarder" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="合约号">
                   <el-input v-model="DialogForm.contractNo" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>EDI补充信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="是否SOC箱">
                   <el-input v-model="DialogForm.isContainerSoc" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="SCAC代码">
                   <el-input v-model="DialogForm.scacCode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="ITN编号">
                   <el-input v-model="DialogForm.itnCode" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>收货人信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="收货人">
                   <el-input v-model="DialogForm.consignee" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人地址1">
                   <el-input v-model="DialogForm.consigneeAddrOne" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人地址2">
                   <el-input v-model="DialogForm.consigneeAddrSecond" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人地址3">
                   <el-input v-model="DialogForm.consigneeAddrThird" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人联系人">
                   <el-input v-model="DialogForm.consigneeAttn" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人城市">
                   <el-input v-model="DialogForm.consigneeCity" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人代码">
                   <el-input v-model="DialogForm.consigneeCode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人国家">
                   <el-input v-model="DialogForm.consigneeCountry" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <!-- <el-col :span="8">
                 <el-form-item label="收货人DOOR地址">
                   <el-input v-model="DialogForm.consigneeDoorAddr" />
                 </el-form-item>
-              </el-col>
-              <el-col :span="6">
+              </el-col> -->
+              <el-col :span="8">
                 <el-form-item label="收货人名称">
                   <el-input v-model="DialogForm.consigneeName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人邮编">
                   <el-input v-model="DialogForm.consigneePostcode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人省份">
                   <el-input v-model="DialogForm.consigneeProvince" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货人电话">
                   <el-input v-model="DialogForm.consigneeTel" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>场站信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="场站代码">
                   <el-input v-model="DialogForm.yardCode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="场站联系人">
                   <el-input v-model="DialogForm.yardContract" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="场站联系邮箱">
                   <el-input v-model="DialogForm.yardContractEmail" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="场站联系电话">
                   <el-input v-model="DialogForm.yardContractTel" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="场站">
                   <el-input v-model="DialogForm.yardName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="场站备注">
                   <el-input v-model="DialogForm.yardRemark" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="费用自结">
                   <el-input v-model="DialogForm.feeSelf" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>其他信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="报关行">
                   <el-input v-model="DialogForm.customser" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="车队">
                   <el-input v-model="DialogForm.trucker" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="国外代理">
                   <el-input v-model="DialogForm.agentName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="仓库">
                   <el-input v-model="DialogForm.warehouse" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="装运方式">
                   <el-input v-model="DialogForm.shippingMethod" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="截港日期">
                   <el-input v-model="DialogForm.closingDate" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="截单日期">
                   <el-input v-model="DialogForm.closingDocDate" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="VGM时间">
                   <el-input v-model="DialogForm.closingVgmDate" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="收货地">
                   <el-input v-model="DialogForm.placeReceipt" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="起运港">
                   <el-input v-model="DialogForm.portLoading" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="中转港">
                   <el-input v-model="DialogForm.transport" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="卸货港">
                   <el-input v-model="DialogForm.portDischarge" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="目的地">
                   <el-input v-model="DialogForm.destination" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="交货地">
                   <el-input v-model="DialogForm.placeDelivery" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="件数">
                   <el-input v-model="DialogForm.pkgs" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="包装">
                   <el-input v-model="DialogForm.kindPkgs" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="毛重">
                   <el-input v-model="DialogForm.kgs" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="尺码">
                   <el-input v-model="DialogForm.cbm" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>备注</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="SO备注">
                   <el-input v-model="DialogForm.soRemark" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="SI备注">
                   <el-input v-model="DialogForm.siRemark" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
+              <el-col :span="24">
+                <p><span> </span>集装箱列表</p>
+              </el-col>
               <el-table :data="DialogForm.bookingCtnList" style="width: 100%">
                 <el-table-column prop="cntName" label="箱型" />
                 <el-table-column prop="ctnNum" label="箱量" />
@@ -319,545 +340,586 @@
               </el-table>
             </el-row>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="10">
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>基本信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="开船日期">
                   <el-input v-model="DialogForm.etd" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="船名">
                   <el-input v-model="DialogForm.vessel" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="内部航次">
                   <el-input v-model="DialogForm.voyNoInner" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="海关航次">
                   <el-input v-model="DialogForm.voyageNo" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="航线">
                   <el-input v-model="DialogForm.laneName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="销售">
                   <el-input v-model="DialogForm.sale" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="客服">
                   <el-input v-model="DialogForm.custService" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="操作">
                   <el-input v-model="DialogForm.op" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="单证">
                   <el-input v-model="DialogForm.doc" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="航线操作人">
                   <el-input v-model="DialogForm.route" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="航线管理">
                   <el-input v-model="DialogForm.lineManage" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="操作备注">
                   <el-input v-model="DialogForm.czRemark" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="单证备注">
                   <el-input v-model="DialogForm.dzRemark" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="申请箱使">
                   <el-input v-model="DialogForm.applyContainerUse" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>发货人信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="发货人">
                   <el-input v-model="DialogForm.shipper" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人地址1">
                   <el-input v-model="DialogForm.shipperAddrOne" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人地址2">
                   <el-input v-model="DialogForm.shipperAddrSecond" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人地址3">
                   <el-input v-model="DialogForm.shipperAddrThird" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人联系人">
                   <el-input v-model="DialogForm.shipperAttn" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人城市">
                   <el-input v-model="DialogForm.shipperCity" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人国家">
                   <el-input v-model="DialogForm.shipperCountry" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <!-- <el-col :span="8">
                 <el-form-item label="发货人DOOR地址">
                   <el-input v-model="DialogForm.shipperDoorAddr" />
                 </el-form-item>
-              </el-col>
-              <el-col :span="6">
+              </el-col> -->
+              <el-col :span="8">
                 <el-form-item label="发货人名称">
                   <el-input v-model="DialogForm.shipperName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人邮编">
                   <el-input v-model="DialogForm.shipperPostcode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人省份">
                   <el-input v-model="DialogForm.shipperProvince" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="发货人电话">
                   <el-input v-model="DialogForm.shipperTel" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>通知人信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="通知人">
                   <el-input v-model="DialogForm.notifyParty" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人地址1">
                   <el-input v-model="DialogForm.notifyPartyAddrOne" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人地址2">
                   <el-input v-model="DialogForm.notifyPartyAddrSecond" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人地址3">
                   <el-input v-model="DialogForm.notifyPartyAddrThird" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人联系人">
                   <el-input v-model="DialogForm.notifyPartyAttn" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人城市">
                   <el-input v-model="DialogForm.notifyPartyCity" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人代码">
                   <el-input v-model="DialogForm.notifyPartyCode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人国家">
                   <el-input v-model="DialogForm.notifyPartyCountry" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人名称">
                   <el-input v-model="DialogForm.notifyPartyName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人邮编">
                   <el-input v-model="DialogForm.notifyPartyPostcode" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人省份">
                   <el-input v-model="DialogForm.notifyPartyProvince" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="第二通知人">
                   <el-input v-model="DialogForm.notifyPartySecond" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="通知人电话">
                   <el-input v-model="DialogForm.notifyPartyTel" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>货物信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="唛头">
                   <el-input v-model="DialogForm.marks" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="货描">
                   <el-input v-model="DialogForm.goodsDescription" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="品名">
                   <el-input v-model="DialogForm.goodsName" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="货物标识">
                   <el-input v-model="DialogForm.cargoId" />
                 </el-form-item>
               </el-col>
             </el-row>
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>签单信息</p>
+              </el-col>
+              <el-col :span="8">
                 <el-form-item label="签单方式">
                   <el-input v-model="DialogForm.issueType" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="签单地点">
                   <el-input v-model="DialogForm.issuePlace" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="提单份数">
                   <el-input v-model="DialogForm.billNumber" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="副本提单份数">
                   <el-input v-model="DialogForm.copyBillNumber" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="预付地点">
                   <el-input v-model="DialogForm.prepardat" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="到付地点">
                   <el-input v-model="DialogForm.payableat" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="付费方式">
                   <el-input v-model="DialogForm.blFrt" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="第三付款地">
                   <el-input v-model="DialogForm.thirdpayAddr" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="运输条款">
                   <el-input v-model="DialogForm.transportClause" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="湿度">
                   <el-input v-model="DialogForm.humidity" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="危险品类别">
                   <el-input v-model="DialogForm.dangerClass" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="危险品标签">
                   <el-input v-model="DialogForm.dangerLable" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="危险品联系人">
                   <el-input v-model="DialogForm.dangerLinkMan" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="危险品页号">
                   <el-input v-model="DialogForm.dangerPage" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="危险品电话">
                   <el-input v-model="DialogForm.dangerTel" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="8">
                 <el-form-item label="危险品编号">
                   <el-input v-model="DialogForm.dangerUnNo" />
                 </el-form-item>
               </el-col>
             </el-row>
+          </el-col>
+          <el-col :span="4">
             <el-row class="UnitBox">
-              <el-col :span="6">
+              <el-col :span="24">
+                <p><span> </span>船舶动态</p>
+              </el-col>
+              <el-col :span="24">
                 <el-form-item label="预计到港日期">
                   <el-input v-model="DialogForm.eta" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="24">
                 <el-form-item label="实际到港">
                   <el-input v-model="DialogForm.ata" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="24">
                 <el-form-item label="中转预计离港">
                   <el-input v-model="DialogForm.middleEtd" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="24">
                 <el-form-item label="实际开船日期">
                   <el-input v-model="DialogForm.atd" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
-                <el-form-item label="起始港实际抵港">
+              <el-col :span="24">
+                <el-form-item label="起始港抵港">
                   <el-input v-model="DialogForm.startAta" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
-                <el-form-item label="起始港预抵日期">
+              <el-col :span="24">
+                <el-form-item label="起始港预抵">
                   <el-input v-model="DialogForm.startEta" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="24">
                 <el-form-item label="中转实际到港">
                   <el-input v-model="DialogForm.middleAta" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="24">
                 <el-form-item label="中转实际离港">
                   <el-input v-model="DialogForm.middleAtd" />
                 </el-form-item>
               </el-col>
-              <el-col :span="6">
+              <el-col :span="24">
                 <el-form-item label="中转预抵">
                   <el-input v-model="DialogForm.middleEta" />
                 </el-form-item>
               </el-col>
             </el-row>
+            <el-row class="UnitBox">
+              <el-col :span="24">
+                <p><span> </span>文件列表</p>
+              </el-col>
+              <span v-for="item in DialogForm.bookingFileList" :key="item.id">
+                {{ item.fileName }}
+              </span>
+            </el-row>
+            <el-row class="UnitBox">
+              <el-col :span="24">
+                <p><span> </span>货物状态列表</p>
+              </el-col>
+              <span
+                class="CsGoods"
+                :class="item.finishTime ? 'active' : ''"
+                v-for="item in DialogForm.goodsStatusList"
+                :key="item.id"
+              >
+                {{ item.statusName }}
+              </span>
+            </el-row>
           </el-col>
           <!-- ------------------------------------ -->
-          <!-- <el-col :span="6">
+          <!-- <el-col :span="8">
             <el-form-item label="集装箱">
               <el-input v-model="DialogForm.containerTotalInfo" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="客户合同号">
               <el-input v-model="DialogForm.customContractNo" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="客户">
               <el-input v-model="DialogForm.customerName" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="EP号">
               <el-input v-model="DialogForm.epCode" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="境外代理">
               <el-input v-model="DialogForm.foreignAgent" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="HS代码">
               <el-input v-model="DialogForm.hcCode" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="是否订阅运踪">
               <el-input v-model="DialogForm.isBookingYz" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="删除标志">
               <el-input v-model="DialogForm.isDeleted" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="签单日期">
               <el-input v-model="DialogForm.issueDate" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="毛重合计">
               <el-input v-model="DialogForm.kgsTotal" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="箱高">
               <el-input v-model="DialogForm.limitedContainerHeight" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="箱长">
               <el-input v-model="DialogForm.limitedContainerLength" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="箱宽">
               <el-input v-model="DialogForm.limitedContainerWidth" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="航线">
               <el-input v-model="DialogForm.lineName" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最后下货纸比对时间">
               <el-input v-model="DialogForm.lstShipOrderCompareDate" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最后下货纸比对批次号">
               <el-input v-model="DialogForm.lstShipOrderCompareId" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最后下货纸比对方式">
               <el-input v-model="DialogForm.lstShipOrderCompareMode" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最后下货纸比对状态">
               <el-input v-model="DialogForm.lstShipOrderCompareRlt" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最后下货纸比对状态名称">
               <el-input v-model="DialogForm.lstShipOrderCompareRltName" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最高温度">
               <el-input v-model="DialogForm.maxTemperature" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="最低温度">
               <el-input v-model="DialogForm.minTemperature" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="件数合计">
               <el-input v-model="DialogForm.pkgsTotal" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="船代">
               <el-input v-model="DialogForm.shipAgency" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="业务来源名称">
               <el-input v-model="DialogForm.sourceName" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="设置温度">
               <el-input v-model="DialogForm.temperature" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="温度单位">
               <el-input v-model="DialogForm.temperatureUnit" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="件数大写">
               <el-input v-model="DialogForm.totalNo" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="真提单号">
               <el-input v-model="DialogForm.trueMblNo" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="修改人名称">
               <el-input v-model="DialogForm.updateByName" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="修改时间">
               <el-input v-model="DialogForm.updateTime" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="通风度">
               <el-input v-model="DialogForm.ventilationRate" />
             </el-form-item>
           </el-col>
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="版本号">
               <el-input v-model="DialogForm.version" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="船舶呼号">
               <el-input v-model="DialogForm.vesselNo" />
             </el-form-item>
           </el-col>
 
-          <el-col :span="6">
+          <el-col :span="8">
             <el-form-item label="ETD">
               <el-input v-model="DialogForm.ygtEtd" />
             </el-form-item>
@@ -943,11 +1005,10 @@ export default {
       dialogFormVisible.value = true;
     };
     const ClickEdit = (e) => {
-      let R = [];
       console.log(e);
       bookingOrderInfo({ id: e.id }).then((res) => {
-        R = res.data;
         dialogFormVisible.value = true;
+        DialogForm.value = { ...e, ...res.data };
       });
 
       // e.type.split("[").forEach((a) => {
@@ -959,7 +1020,8 @@ export default {
       //     });
       //   }
       // });
-      return { ...e, type: R };
+      // console.log({ ...e, type: R });
+      // return ;
     };
     const TableData = reactive([
       { label: "订舱编号", prop: "billNo" },
@@ -984,7 +1046,7 @@ export default {
           {
             name: "查看",
             Fn: (e) => {
-              DialogForm.value = ClickEdit(e);
+              ClickEdit(e);
             },
           },
         ],
@@ -1064,6 +1126,17 @@ export default {
     border-radius: 10px;
     padding: 20px 20px 10px 20px;
     margin: 5px;
+    p {
+      margin-left: 20px;
+      margin-bottom: 10px;
+      span {
+        display: inline-block;
+        width: 3px;
+        height: 12px;
+        background: #409eff;
+        margin-right: 5px;
+      }
+    }
   }
 }
 .BookingMain {
@@ -1072,4 +1145,17 @@ export default {
   display: flex;
   flex-direction: column;
 }
+.CsGoods {
+  display: inline-block;
+  padding: 4px;
+  margin: 3px 2px;
+  border: 1px dashed #c9c9c9;
+  border-radius: 3px;
+  cursor: pointer;
+  &.active {
+    background: #409eff;
+    color: #fff;
+    border: 1px solid #409eff;
+  }
+}
 </style>