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

---
 .../detail/modules/basicInfo.vue              | 633 ++++++++----------
 .../detail/modules/mailingInfo.vue            | 536 ++++++++-------
 2 files changed, 576 insertions(+), 593 deletions(-)

diff --git a/src/views/main/BookingLedger/detail/modules/basicInfo.vue b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
index e62437d..7f046e5 100644
--- a/src/views/main/BookingLedger/detail/modules/basicInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
@@ -10,8 +10,8 @@
           :model="details"
           :rules="rules"
         >
-          <a-row class="from-box" :gutter="10">
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+          <a-row class="from-box" >
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
                 prop="customername"
@@ -41,19 +41,43 @@
                 </div>
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
-                label="提单号"
-                prop="mblno"
+                prop="thirdPay"
+                label="第三方"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
               >
-                <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange" />
+                <div class="customer-box" style="padding-right: 24px">
+                  <selectView
+                    type="thirdPay"
+                    :defaultVal="details.thirdPay"
+                    searchApi="DjyCustomerSuggest"
+                    :searchQuery="{ keyword: '', type: 'consignor' }"
+                    :showLabel="['shortName']"
+                    :openSearch="true"
+                    :isCopy="true"
+                    @change="getSelectViewRes"
+                    style="flex: 1; margin-top: -4px"
+                  ></selectView>
+                </div>
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="PO NO"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+                prop="pono"
+              >
+                <inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
                 label="船公司"
@@ -75,40 +99,52 @@
                 ></selectView>
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
-                label="订舱代理"
+                label="是否占舱"
+                :labelCol="{ xs: { span: 24 },
+                             sm: { span: 9 },
+                             md: { span: 9 }}"
+                :wrapperCol="{ xs: { span: 24 },
+                               sm: { span: 12 },
+                               md: { span: 12 }}"
+                has-feedback
+                prop="zhanCangFlag"
+              >
+                <div class="date-box">
+                  <a-radio-group size="small" v-model="details.zhanCangFlag">
+                    <a-radio size="small" value="是"> 是 </a-radio>
+                    <a-radio size="small" value="否"> 否 </a-radio>
+                  </a-radio-group>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="订舱编号"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
-                prop="forwarder"
+                prop="custno"
               >
-                <selectView
-                  type="forwarder"
-                  :defaultVal="details.forwarder"
-                  searchApi="DjyCustomerSuggest"
-                  :searchQuery="{ keyword: '', type: 'booking_agent' }"
-                  :showLabel="['shortName']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                  style="flex: 1; margin-top: -4px"
-                ></selectView>
+                <inputView type="custno" :parentVal="details.custno" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
-                label="PO NO"
+                label="提单号"
+                prop="mblno"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
-                prop="pono"
               >
-                <inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange" />
+                <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
                 label="分提单号"
@@ -120,34 +156,29 @@
                 <inputView type="hblno" :parentVal="details.hblno" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
               <a-form-model-item
                 class="from-label"
-                label="订舱编号"
+                label="订舱代理"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
-                prop="custno"
+                prop="forwarder"
               >
-                <inputView type="custno" :parentVal="details.custno" @getInputChange="inputChange" />
+                <selectView
+                  type="forwarder"
+                  :defaultVal="details.forwarder"
+                  searchApi="DjyCustomerSuggest"
+                  :searchQuery="{ keyword: '', type: 'booking_agent' }"
+                  :showLabel="['shortName']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                  style="flex: 1; margin-top: -4px"
+                ></selectView>
               </a-form-model-item>
             </a-col>
-            <template v-if="details.carrierid === 'ESL'">
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
-                <a-form-model-item
-                  class="from-label"
-                  label="EP号"
-                  :labelCol="labelCol2"
-                  :wrapperCol="wrapperCol2"
-                  has-feedback
-                  prop="epCode"
-                >
-                  <inputView type="epCode" :parentVal="details.epCode" @getInputChange="inputChange" />
-                </a-form-model-item>
-              </a-col>
-            </template>
-            <template v-else>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+            <template v-if="details.carrierid != 'ESL'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                 <a-form-model-item
                   class="from-label"
                   label="运费协议号"
@@ -173,32 +204,8 @@
                 </a-form-model-item>
               </a-col>
             </template>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
-              <a-form-model-item
-                class="from-label"
-                prop="thirdPay"
-                label="第三方"
-                :labelCol="labelCol2"
-                :wrapperCol="wrapperCol2"
-                has-feedback
-              >
-                <div class="customer-box" style="padding-right: 24px">
-                  <selectView
-                    type="thirdPay"
-                    :defaultVal="details.thirdPay"
-                    searchApi="DjyCustomerSuggest"
-                    :searchQuery="{ keyword: '', type: 'consignor' }"
-                    :showLabel="['shortName']"
-                    :openSearch="true"
-                    :isCopy="true"
-                    @change="getSelectViewRes"
-                    style="flex: 1; margin-top: -4px"
-                  ></selectView>
-                </div>
-              </a-form-model-item>
-            </a-col>
             <template v-if="details.carrierid === 'ESL'">
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="7">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                 <a-form-model-item
                   class="from-label"
                   label="运费协议号"
@@ -224,8 +231,22 @@
                 </a-form-model-item>
               </a-col>
             </template>
+            <template v-if="details.carrierid === 'ESL'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="EP号"
+                  :labelCol="labelCol2"
+                  :wrapperCol="wrapperCol2"
+                  has-feedback
+                  prop="epCode"
+                >
+                  <inputView type="epCode" :parentVal="details.epCode" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </template>
             <template v-if="['VOLTA', 'WHL', 'CSL', 'MSC'].includes(details.carrierid)">
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="7">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                 <a-form-model-item
                   class="from-label"
                   label="真提单号"
@@ -240,8 +261,34 @@
             </template>
           </a-row>
           <div class="from-box2">
-            <a-row :gutter="6">
-              <a-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
+            <a-row >
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="开船日期"
+                  :labelCol="{ xs: { span: 24 },
+                               sm: { span: 8 },
+                               md: { span: 8 }}"
+                  :wrapperCol="{ xs: { span: 24 },
+                                 sm: { span: 12 },
+                                 md: { span: 12 }}"
+                  has-feedback
+                  prop="etd"
+                >
+                  <div class="date-box">
+                    <datePickerView
+                      class="date-picker"
+                      :parentVal="details.etd"
+                      type="etd"
+                      format="YYYY-MM-DD"
+                      @dateChange="dateChangeFun"
+                      style="margin-top: -5px"
+                    ></datePickerView>
+                    <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                 <a-form-model-item
                   class="from-label"
                   label="船名"
@@ -274,7 +321,7 @@
                 </a-form-model-item>
               </a-col>
               <template v-if="details.carrierid === 'ESL'">
-                <a-col :xs="12" :sm="12" :md="8" :lg="5" :xl="4">
+                <a-col :xs="12" :sm="12" :md="8" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                   <a-form-model-item
                     class="from-label"
                     label="内部航次"
@@ -293,7 +340,7 @@
                 </a-col>
               </template>
               <template v-else>
-                <a-col :xs="12" :sm="12" :md="8" :lg="5" :xl="4">
+                <a-col :xs="12" :sm="12" :md="8" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                   <a-form-model-item
                     class="from-label"
                     label="内部航次"
@@ -312,7 +359,7 @@
                 </a-col>
               </template>
               <template v-if="details.carrierid === 'ESL'">
-                <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="4">
+                <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                   <a-form-model-item
                     class="from-label"
                     label="航次"
@@ -330,7 +377,7 @@
                 </a-col>
               </template>
               <template v-else>
-                <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="4">
+                <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                   <a-form-model-item
                     class="from-label"
                     label="海关航次"
@@ -347,121 +394,182 @@
                   </a-form-model-item>
                 </a-col>
               </template>
-              <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="5">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
                 <a-form-model-item
                   class="from-label"
-                  label="开船日期"
-                  :labelCol="{ xs: { span: 24 },
-                               sm: { span: 8 },
-                               md: { span: 8 }}"
-                  :wrapperCol="{ xs: { span: 24 },
-                                 sm: { span: 12 },
-                                 md: { span: 12 }}"
+                  label="船司航线"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
                   has-feedback
-                  prop="etd"
+                  prop="lanename"
                 >
-                  <div class="date-box">
-                    <datePickerView
-                      class="date-picker"
-                      :parentVal="details.etd"
-                      type="etd"
-                      format="YYYY-MM-DD"
-                      @dateChange="dateChangeFun"
-                      style="margin-top: -5px"
-                    ></datePickerView>
-                    <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
-                  </div>
+                  <!-- 航线暂无接口， 暂时改为输入框-->
+                  <inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange" />
                 </a-form-model-item>
               </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="5">
+            </a-row>
+            <a-row :gutter="10">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
                 <a-form-model-item
                   class="from-label"
-                  label="是否占舱"
-                  :labelCol="{ xs: { span: 24 },
-                               sm: { span: 9 },
-                               md: { span: 9 }}"
-                  :wrapperCol="{ xs: { span: 24 },
-                                 sm: { span: 12 },
-                                 md: { span: 12 }}"
+                  label="揽货人"
+                  :labelCol="userLabelCol"
+                  :wrapperCol="userWrapperCol"
                   has-feedback
-                  prop="zhanCangFlag"
+                  prop="sale"
                 >
-                  <!-- style="margin-left:10px;margin-top:-6px;" -->
-                  <div class="date-box">
-                    <!-- <a-checkbox size="small" v-model="details.zhanCangFlag">
-                      <template v-if="details.zhanCangFlag">是</template>
-                      <template v-else>否</template>
-                    </a-checkbox> -->
-                    <a-radio-group size="small" v-model="details.zhanCangFlag">
-                      <a-radio size="small" value="是"> 是 </a-radio>
-                      <a-radio size="small" value="否"> 否 </a-radio>
-                    </a-radio-group>
-                  </div>
+                  <selectView
+                    type="sale"
+                    :defaultVal="details.sale"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="客服"
+                  :labelCol="userLabelCol1"
+                  :wrapperCol="userWrapperCol1"
+                  has-feedback
+                  prop="custservice"
+                >
+                  <selectView
+                    type="custservice"
+                    :defaultVal="details.custservice"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="操作"
+                  :labelCol="userLabelCol1"
+                  :wrapperCol="userWrapperCol1"
+                  has-feedback
+                  prop="op"
+                >
+                  <selectView
+                    type="op"
+                    :defaultVal="details.op"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="单证"
+                  :labelCol="userLabelCol1"
+                  :wrapperCol="userWrapperCol1"
+                  has-feedback
+                  prop="doc"
+                >
+                  <selectView
+                    type="doc"
+                    :defaultVal="details.doc"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="航线操作"
+                  :labelCol="userLabelCol"
+                  :wrapperCol="userWrapperCol"
+                  has-feedback
+                  prop="route"
+                >
+                  <selectView
+                    type="route"
+                    :defaultVal="details.route"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    :isCopy="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="航线管理"
+                  :labelCol="userLabelCol"
+                  :wrapperCol="userWrapperCol"
+                  has-feedback
+                  prop="lineManage"
+                >
+                  <selectView
+                    type="lineManage"
+                    :defaultVal="details.lineManage"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
                 </a-form-model-item>
               </a-col>
-              <!-- <template v-if="details.carrierid === 'ESL'">
-                <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
-                  <a-form-model-item
-                    class="from-label"
-                    label="实际开船"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="atd"
-                  >
-                    <div class="date-box">
-                      <datePickerView
-                        class="date-picker"
-                        :parentVal="details.atd"
-                        type="atd"
-                        format="YYYY-MM-DD"
-                        @dateChange="dateChangeFun"
-                        style="margin-top: -5px;"
-                      ></datePickerView>
-                    </div>
-                  </a-form-model-item>
-                </a-col>
-              </template> -->
             </a-row>
-            <a-row :gutter="10">
-              <!-- <template>
-                <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
-                  <a-form-model-item
-                    class="from-label"
-                    label="实际开船"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="atd"
-                  >
-                    <div class="date-box">
-                      <datePickerView
-                        class="date-picker"
-                        :parentVal="details.atd"
-                        type="atd"
-                        format="YYYY-MM-DD"
-                        @dateChange="dateChangeFun"
-                        style="margin-top: -5px;"
-                      ></datePickerView>
-                    </div>
-                  </a-form-model-item>
-                </a-col>
-              </template> -->
-              <template>
-                <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="船司航线"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="lanename"
-                  >
-                    <!-- 航线暂无接口， 暂时改为输入框-->
-                    <inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange" />
-                  </a-form-model-item>
-                </a-col>
-              </template>
+            <a-row  :gutter="10">
+              <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="操作备注"
+                  :labelCol="labelCol3"
+                  :wrapperCol="wrapperCol3"
+                  has-feedback
+                  prop="czRemark"
+                >
+                  <inputView type="czRemark" :parentVal="details.czRemark" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="单证备注"
+                  :labelCol="labelCol3"
+                  :wrapperCol="wrapperCol3"
+                  has-feedback
+                  prop="dzRemark"
+                >
+                  <inputView type="dzRemark" :parentVal="details.dzRemark" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="6" :md="6" :lg="6" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="申请箱使"
+                  :labelCol="labelCol3"
+                  :wrapperCol="wrapperCol3"
+                  has-feedback
+                  prop="shenQingXiangShi"
+                >
+                  <inputView type="shenQingXiangShi" :parentVal="details.shenQingXiangShi" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+            <!-- <a-row :gutter="10">
               <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
                   class="from-label"
@@ -523,173 +631,11 @@
                   ></selectView>
                 </a-form-model-item>
               </a-col>
-            </a-row>
+            </a-row> -->
           </div>
-          <a-row class="from-box3" :gutter="10">
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-              <a-form-model-item
-                class="from-label"
-                label="揽货人"
-                :labelCol="userLabelCol"
-                :wrapperCol="userWrapperCol"
-                has-feedback
-                prop="sale"
-              >
-                <selectView
-                  type="sale"
-                  :defaultVal="details.sale"
-                  searchApi="GetSysUserPage"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-              <a-form-model-item
-                class="from-label"
-                label="操作"
-                :labelCol="userLabelCol1"
-                :wrapperCol="userWrapperCol1"
-                has-feedback
-                prop="op"
-              >
-                <selectView
-                  type="op"
-                  :defaultVal="details.op"
-                  searchApi="GetSysUserPage"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-              <a-form-model-item
-                class="from-label"
-                label="单证"
-                :labelCol="userLabelCol1"
-                :wrapperCol="userWrapperCol1"
-                has-feedback
-                prop="doc"
-              >
-                <selectView
-                  type="doc"
-                  :defaultVal="details.doc"
-                  searchApi="GetSysUserPage"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-              <a-form-model-item
-                class="from-label"
-                label="客服"
-                :labelCol="userLabelCol1"
-                :wrapperCol="userWrapperCol1"
-                has-feedback
-                prop="custservice"
-              >
-                <selectView
-                  type="custservice"
-                  :defaultVal="details.custservice"
-                  searchApi="GetSysUserPage"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-              <a-form-model-item
-                class="from-label"
-                label="航线操作"
-                :labelCol="userLabelCol"
-                :wrapperCol="userWrapperCol"
-                has-feedback
-                prop="route"
-              >
-                <selectView
-                  type="route"
-                  :defaultVal="details.route"
-                  searchApi="GetSysUserPage"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  :isCopy="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-              <a-form-model-item
-                class="from-label"
-                label="航线管理"
-                :labelCol="userLabelCol"
-                :wrapperCol="userWrapperCol"
-                has-feedback
-                prop="lineManage"
-              >
-                <selectView
-                  type="lineManage"
-                  :defaultVal="details.lineManage"
-                  searchApi="GetSysUserPage"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-          </a-row>
-          <a-row class="from-box4" :gutter="10">
-            <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9">
-              <a-form-model-item
-                class="from-label"
-                label="单证备注"
-                :labelCol="labelCol3"
-                :wrapperCol="wrapperCol3"
-                has-feedback
-                prop="dzRemark"
-              >
-                <inputView type="dzRemark" :parentVal="details.dzRemark" @getInputChange="inputChange" />
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9">
-              <a-form-model-item
-                class="from-label"
-                label="操作备注"
-                :labelCol="labelCol3"
-                :wrapperCol="wrapperCol3"
-                has-feedback
-                prop="czRemark"
-              >
-                <inputView type="czRemark" :parentVal="details.czRemark" @getInputChange="inputChange" />
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="申请箱使"
-                :labelCol="labelCol3"
-                :wrapperCol="wrapperCol3"
-                has-feedback
-                prop="shenQingXiangShi"
-              >
-                <inputView type="shenQingXiangShi" :parentVal="details.shenQingXiangShi" @getInputChange="inputChange" />
-              </a-form-model-item>
-            </a-col>
-          </a-row>
         </a-form-model>
       </div>
     </x-card>
-
     <a-modal
       :title="customerType === 'add' ? '添加委托单位' : '关系人'"
       :width="1200"
@@ -1352,4 +1298,7 @@ export default {
 <style lang="less" scoped>
 @import url('../index.less');
 @import url('../style/basicInfo.less');
+.ant-col-xl-4-8{
+  width: 20%;
+}
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index 40e1772..131f901 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -19,7 +19,7 @@
               :sm="24"
               :md="24"
               :lg="10"
-              :xl="11">
+              :xl="8">
               <a-form-model-item has-feedback prop="shipper" class="sender-label" style="overflow: hidden">
                 <div class="sender">
                   <a-tooltip v-if="details.carrierid === 'PIL'">
@@ -181,237 +181,14 @@
               :sm="24"
               :md="24"
               :lg="14"
-              :xl="13">
-              <a-row :gutter="16">
-                <div class="right-content-top">
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label yarn-label"
-                      label="场站"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      style="overflow: visible"
-                      prop="yard">
-                      <div class="yard-box" style="display: flex">
-                        <selectView
-                          type="yard"
-                          :defaultVal="details.yard"
-                          searchApi="GetYardlist"
-                          :searchQuery="{ keyword: '' }"
-                          :showLabel="['name', 'showCode']"
-                          :openSearch="false"
-                          @change="getSelectViewRes"
-                          style="flex: 1; margin-top: -4px"></selectView>
-                        <i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
-                        <i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
-                      </div>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="场站费自结"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="feeself">
-                      <a-radio-group size="small" v-model="details.feeself">
-                        <a-radio size="small" :value="true"> 是 </a-radio>
-                        <a-radio size="small" :value="false"> 否 </a-radio>
-                      </a-radio-group>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="报关行"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="customser">
-                      <selectView
-                        type="customser"
-                        :defaultVal="details.customser"
-                        searchApi="DjyCustomerpage"
-                        :searchQuery="{ SearchValue: '', PropString: 'customs_broker' }"
-                        :showLabel="['shortName']"
-                        :openSearch="true"
-                        @change="getSelectViewRes"></selectView>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="车队"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="trucker">
-                      <selectView
-                        type="trucker"
-                        :defaultVal="details.trucker"
-                        searchApi="DjyCustomerpage"
-                        :searchQuery="{ SearchValue: '', PropString: 'fleet' }"
-                        :showLabel="['shortName']"
-                        :openSearch="true"
-                        @change="getSelectViewRes"></selectView>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="国外代理"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="agentname">
-                      <div style="display: flex;align-items: center;">
-                        <selectView
-                          type="agentname"
-                          :defaultVal="details.agentname"
-                          searchApi="DjyCustomerpage"
-                          :searchQuery="{ SearchValue: '', PropString: 'out_agent' }"
-                          :showLabel="['shortName']"
-                          :openSearch="true"
-                          @change="getSelectViewRes"
-                          style="flex: 1;"></selectView>
-                        <a-icon
-                          v-if="ishd"
-                          @click="handleOpenFd"
-                          style="color: #13c2c2;cursor: pointer;"
-                          theme="filled"
-                          type="diff" />
-                      </div>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="仓库"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="warehouse">
-                      <selectView
-                        type="warehouse"
-                        :defaultVal="details.warehouse"
-                        searchApi="DjyCustomerpage"
-                        :searchQuery="{ SearchValue: '', PropString: 'warehouse' }"
-                        :showLabel="['shortName']"
-                        :openSearch="true"
-                        @change="getSelectViewRes"></selectView>
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="装运方式"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="shippingMethod">
-                      <selectView
-                        type="shippingMethod"
-                        :defaultVal="details.shippingMethod"
-                        searchApi="ShippingMethod"
-                        :searchQuery="{ name: '' }"
-                        :showLabel="['name']"
-                        :openSearch="false"
-                        :isCopy="true"
-                        @change="getSelectViewRes"></selectView>
-                    </a-form-model-item>
-                  </a-col>
-                </div>
-                <a-row>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="截港时间"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="closingdate">
-                      <datePickerView
-                        class="date-picker"
-                        style="min-width: 100px"
-                        :showTime="true"
-                        :parentVal="details.closingdate"
-                        type="closingdate"
-                        format="YYYY-MM-DD HH:00"
-                        @dateChange="dateChangeFun"></datePickerView>
-                      <!-- <a-date-picker
-                      style="min-width:100px"
-                      show-time
-                      format="YYYY-MM-DD HH:00"
-                      v-model="details.closingdate"
-                      @change="closingdateChange"
-                    >
-                      <a-icon slot="suffixIcon" type="time" style="display: none" />
-                    </a-date-picker> -->
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="截单时间"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="closedocdate">
-                      <datePickerView
-                        class="date-picker"
-                        style="min-width: 100px"
-                        :showTime="true"
-                        :parentVal="details.closedocdate"
-                        type="closedocdate"
-                        format="YYYY-MM-DD HH:00"
-                        @dateChange="dateChangeFun"></datePickerView>
-                      <!-- <a-date-picker
-                      style="min-width:100px"
-                      show-time
-                      format="YYYY-MM-DD HH:00"
-                      v-model="details.closedocdate"
-                      @change="closedocdateChange"
-                    >
-                      <a-icon slot="suffixIcon" type="time" style="display: none" />
-                    </a-date-picker> -->
-                    </a-form-model-item>
-                  </a-col>
-                  <a-col :span="12">
-                    <a-form-model-item
-                      class="from-label"
-                      label="VGM时间"
-                      :labelCol="labelCol"
-                      :wrapperCol="wrapperCol"
-                      has-feedback
-                      prop="closevgmdate">
-                      <datePickerView
-                        class="date-picker"
-                        style="min-width: 100px"
-                        :showTime="true"
-                        :parentVal="details.closevgmdate"
-                        type="closevgmdate"
-                        format="YYYY-MM-DD HH:00"
-                        @dateChange="dateChangeFun"></datePickerView>
-                      <!-- <a-date-picker
-                      style="min-width:100px"
-                      show-time
-                      format="YYYY-MM-DD HH:00"
-                      v-model="details.closevgmdate"
-                      @change="closevgmdateChange"
-                    >
-                      <a-icon slot="suffixIcon" type="time" style="display: none" />
-                    </a-date-picker> -->
-                    </a-form-model-item>
-                  </a-col>
-                </a-row>
-                <a-col :span="12">
+              :xl="16">
+              <a-row :gutter="4">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="收货地代码"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
                     has-feedback
                     prop="placereceiptid">
                     <selectView
@@ -424,7 +201,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="收货地"
@@ -439,13 +216,51 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
-                    class="from-label"
-                    label="装货港代码"
+                    class="from-label yarn-label"
+                    label="场站"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
+                    style="overflow: visible"
+                    prop="yard">
+                    <div class="yard-box" style="display: flex">
+                      <selectView
+                        type="yard"
+                        :defaultVal="details.yard"
+                        searchApi="GetYardlist"
+                        :searchQuery="{ keyword: '' }"
+                        :showLabel="['name', 'showCode']"
+                        :openSearch="false"
+                        @change="getSelectViewRes"
+                        style="flex: 1; margin-top: -4px"></selectView>
+                      <i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
+                      <i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="场站费自结"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="feeself">
+                    <a-radio-group size="small" v-model="details.feeself">
+                      <a-radio size="small" :value="true"> 是 </a-radio>
+                      <a-radio size="small" :value="false"> 否 </a-radio>
+                    </a-radio-group>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="装货港代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
                     prop="portloadid">
                     <selectView
                       type="portloadid"
@@ -458,7 +273,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="装货港"
@@ -469,13 +284,61 @@
                     <inputView type="portload" size="small" :parentVal="details.portload" @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
-                    label="中转港代码"
+                    label="截港时间"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
+                    prop="closingdate">
+                    <datePickerView
+                      class="date-picker"
+                      style="min-width: 100px"
+                      :showTime="true"
+                      :parentVal="details.closingdate"
+                      type="closingdate"
+                      format="YYYY-MM-DD HH:00"
+                      @dateChange="dateChangeFun"></datePickerView>
+                      <!-- <a-date-picker
+                      style="min-width:100px"
+                      show-time
+                      format="YYYY-MM-DD HH:00"
+                      v-model="details.closingdate"
+                      @change="closingdateChange"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker> -->
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6" >
+                  <a-form-model-item
+                    class="from-label"
+                    label="船代"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="shipagency"
+                  >
+                    <selectView
+                      ref="shipagency"
+                      type="shipagency"
+                      :defaultVal="details.shipagency"
+                      searchApi="GetForwarderlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['name', 'showCode']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="中转港代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
                     prop="transportid">
                     <selectView
                       type="transportid"
@@ -487,7 +350,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="中转港"
@@ -502,13 +365,49 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
-                    label="卸货港代码"
+                    label="截单时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="closedocdate">
+                    <datePickerView
+                      class="date-picker"
+                      style="min-width: 100px"
+                      :showTime="true"
+                      :parentVal="details.closedocdate"
+                      type="closedocdate"
+                      format="YYYY-MM-DD HH:00"
+                      @dateChange="dateChangeFun"></datePickerView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="报关行"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
+                    prop="customser">
+                    <selectView
+                      type="customser"
+                      :defaultVal="details.customser"
+                      searchApi="DjyCustomerpage"
+                      :searchQuery="{ SearchValue: '', PropString: 'customs_broker' }"
+                      :showLabel="['shortName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="卸货港代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
                     prop="portdischargeid">
                     <selectView
                       type="portdischargeid"
@@ -520,7 +419,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="卸货港"
@@ -535,13 +434,49 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
-                    label="目的地代码"
+                    label="VGM时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="closevgmdate">
+                    <datePickerView
+                      class="date-picker"
+                      style="min-width: 100px"
+                      :showTime="true"
+                      :parentVal="details.closevgmdate"
+                      type="closevgmdate"
+                      format="YYYY-MM-DD HH:00"
+                      @dateChange="dateChangeFun"></datePickerView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="车队"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
+                    prop="trucker">
+                    <selectView
+                      type="trucker"
+                      :defaultVal="details.trucker"
+                      searchApi="DjyCustomerpage"
+                      :searchQuery="{ SearchValue: '', PropString: 'fleet' }"
+                      :showLabel="['shortName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="目的地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
                     prop="destinationid">
                     <selectView
                       type="destinationid"
@@ -553,7 +488,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="目的地"
@@ -568,13 +503,60 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
-                    label="交货地代码"
+                    label="航线"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
+                    prop="lineName"
+                  >
+                    <selectView
+                      type="lineName"
+                      :defaultVal="details.lineName"
+                      searchApi="GetTenantLineList"
+                      :searchQuery="{ LineName: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="国外代理"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="agentname">
+                    <div style="display: flex;align-items: center;">
+                      <selectView
+                        type="agentname"
+                        :defaultVal="details.agentname"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'out_agent' }"
+                        :showLabel="['shortName']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"
+                        style="flex: 1;"></selectView>
+                      <a-icon
+                        v-if="ishd"
+                        @click="handleOpenFd"
+                        style="color: #13c2c2;cursor: pointer;"
+                        theme="filled"
+                        type="diff" />
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="交货地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
                     prop="placedeliveryid">
                     <selectView
                       type="placedeliveryid"
@@ -586,7 +568,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
                   <a-form-model-item
                     class="from-label"
                     label="交货地"
@@ -602,7 +584,45 @@
                     <!-- <a-input :allowClear="true" v-model="details.placedelivery" /> -->
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="12">
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="装运方式"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="shippingMethod">
+                    <selectView
+                      type="shippingMethod"
+                      :defaultVal="details.shippingMethod"
+                      searchApi="ShippingMethod"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      :isCopy="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="仓库"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="warehouse">
+                    <selectView
+                      type="warehouse"
+                      :defaultVal="details.warehouse"
+                      searchApi="DjyCustomerpage"
+                      :searchQuery="{ SearchValue: '', PropString: 'warehouse' }"
+                      :showLabel="['shortName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+
+                <!-- <a-col :span="12">
                   <a-form-model-item
                     class="from-label pkgs-line-box"
                     label="件数"
@@ -611,7 +631,6 @@
                     has-feedback
                     prop="pkgs">
                     <div class="line-box">
-                      <!-- <inputView type="pkgs" :parentVal="details.pkgs" inputType="number" @getInputChange="inputChange"/> -->
                       <a-input
                         :allowClear="true"
                         size="small"
@@ -650,7 +669,6 @@
                     has-feedback
                     prop="kgs">
                     <div class="line-box">
-                      <!-- <inputView type="kgs" :parentVal="details.kgs" @getInputChange="inputChange"/> -->
                       <a-input size="small" :allowClear="true" v-model="details.kgs" />
                       <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
                       <span class="unit">KGS</span>
@@ -666,13 +684,12 @@
                     has-feedback
                     prop="cbm">
                     <div class="line-box">
-                      <!-- <inputView type="cbm" :parentVal="details.cbm" @getInputChange="inputChange"/> -->
                       <a-input size="small" :allowClear="true" v-model="details.cbm" />
                       <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
                       <span class="unit">CBM</span>
                     </div>
                   </a-form-model-item>
-                </a-col>
+                </a-col> -->
               </a-row>
             </a-col>
           </a-row>
@@ -1002,6 +1019,16 @@ export default {
         sm: { span: 16 },
         md: { span: 16 }
       },
+      labelColCode: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 }
+      },
+      wrapperColCode: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 14 }
+      },
       YardlabelCol: {
         xs: { span: 24 },
         sm: { span: 1 },
@@ -1117,6 +1144,7 @@ export default {
         this.details.portload = 'QINGDAO,CHINA'
         this.details.placereceipt = 'QINGDAO,CHINA'
       }
+      this.$refs.shipagency.value = this.frompre[0].forwarder
     },
     debounce(func, wait, ...args) {
       if (timer) clearTimeout(timer)
@@ -1642,6 +1670,12 @@ export default {
         this.$emit('pkgsEnCapital', enCapitalRes)
       } else if (['shippingMethod'].includes(type)) {
         this.details.shippingMethod = res['name'] || ''
+      } else if (type === 'shipagency') {
+        this.details.shipagency = res.name || ''
+        this.details.shipagencyid = res.code || ''
+      } else if (type === 'lineName') {
+        this.details[type] = res.name || ''
+        this.$emit('editLineName', true)
       }
     },
     dateChangeFun({ type, value }) {

From 4cf59a3b703d5806b7c1250c31634bb864375053 Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Thu, 15 Jun 2023 11:34:48 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |   4 +-
 .env.development                              |   8 +-
 .env.preview                                  |   8 +-
 src/views/main/BookingLedger/detail/index.vue |  45 ++--
 .../BookingLedger/detail/modules/billInfo.vue | 222 ----------------
 .../detail/modules/mailingInfo.vue            | 250 +++++++++++++++++-
 src/views/main/BookingLedger/detail/rules.js  |  28 +-
 .../main/Taskmanage/TaskmanageList/index.vue  |   4 +-
 8 files changed, 298 insertions(+), 271 deletions(-)

diff --git a/.env b/.env
index eb69854..5da3296 100644
--- a/.env
+++ b/.env
@@ -2,5 +2,5 @@ NODE_ENV=production
 VUE_APP_PREVIEW=true
 //VUE_APP_API_BASE_URL=http://192.168.1.205:25800
 //VUE_APP_API_BASE_URL=http://127.0.0.1:5000
-VUE_APP_API_BASE_URL=http://60.209.125.238:25805
-# VUE_APP_API_BASE_URL=http://47.104.85.216:12345/api
\ No newline at end of file
+# VUE_APP_API_BASE_URL=http://60.209.125.238:25805
+VUE_APP_API_BASE_URL=http://47.104.85.216:12345/api
\ No newline at end of file
diff --git a/.env.development b/.env.development
index 0fc3239..8e28015 100644
--- a/.env.development
+++ b/.env.development
@@ -1,12 +1,12 @@
 NODE_ENV=development
 VUE_APP_PREVIEW=true
-VUE_APP_API_BASE_URL=http://60.209.125.238:25805
-VUE_APP_SOCKET_BASE_URL=http://60.209.125.238:25805
+# VUE_APP_API_BASE_URL=http://60.209.125.238:25805
+# VUE_APP_SOCKET_BASE_URL=http://60.209.125.238:25805
 
 # process.env.VUE_APP_API_BASE_URL
 
-# VUE_APP_API_BASE_URL=http://47.104.85.216:12345/api
-# VUE_APP_SOCKET_BASE_URL=http://47.104.85.216:12345/api
+VUE_APP_API_BASE_URL=http://47.104.85.216:12345/api
+VUE_APP_SOCKET_BASE_URL=http://47.104.85.216:12345/api
 
 //VUE_APP_API_BASE_URL=http://127.0.0.1:5000
 //VUE_APP_SOCKET_BASE_URL=http://127.0.0.1:5000
diff --git a/.env.preview b/.env.preview
index 029fbe5..28d87e4 100644
--- a/.env.preview
+++ b/.env.preview
@@ -1,7 +1,7 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=true
-VUE_APP_API_BASE_URL=http://60.209.125.238:25805
-VUE_APP_SOCKET_BASE_URL=http://60.209.125.238:25805
+# VUE_APP_API_BASE_URL=http://60.209.125.238:25805
+# VUE_APP_SOCKET_BASE_URL=http://60.209.125.238:25805
 
-# VUE_APP_API_BASE_URL=http://47.104.85.216:12345/api
-# VUE_APP_SOCKET_BASE_URL=http://47.104.85.216:12345/api
\ No newline at end of file
+VUE_APP_API_BASE_URL=http://47.104.85.216:12345/api
+VUE_APP_SOCKET_BASE_URL=http://47.104.85.216:12345/api
\ No newline at end of file
diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
index d60ef86..759cd00 100644
--- a/src/views/main/BookingLedger/detail/index.vue
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -46,7 +46,7 @@
                         :inPageLoading="inPageLoading"
                         isParent="parent"
                         @changeDetail="changeDetailFun"
-                        @editLineName="editLineNameFun"></basicInfo>
+                      ></basicInfo>
                       <mailingInfo
                         ref="mailingInfo"
                         :details="bookingDetails"
@@ -54,6 +54,7 @@
                         isParent="parent"
                         @changeDetail="changeDetailFun"
                         @spliceMore="spliceMorefun"
+                        @editLineName="editLineNameFun"
                         @pkgsEnCapital="pkgsEnCapitalFun">
                       </mailingInfo>
                       <cargoInfo
@@ -63,18 +64,18 @@
                         :moreStr="moreStr"
                         isParent="parent"
                         @changeDetail="changeDetailFun"></cargoInfo>
-                      <billInfo
+                      <!-- <billInfo
                         ref="billInfo"
                         :details="bookingDetails"
                         :rules="billRules"
                         isParent="parent"
-                        @changeDetail="changeDetailFun"></billInfo>
-                      <remarksInfo
+                        @changeDetail="changeDetailFun"></billInfo> -->
+                      <!-- <remarksInfo
                         ref="remarksInfo"
                         :details="bookingDetails"
                         :rules="remarksRules"
                         isParent="parent"
-                        @changeDetail="changeDetailFun"></remarksInfo>
+                        @changeDetail="changeDetailFun"></remarksInfo> -->
                       <goodsTable
                         ref="goodsTable"
                         :details="bookingDetails"
@@ -782,8 +783,8 @@ export default {
       this.$refs.basicInfo.$refs.basicFrom.clearValidate()
       this.$refs.mailingInfo.$refs.mailingFrom.clearValidate()
       this.$refs.cargoInfo.$refs.cargoFrom.clearValidate()
-      this.$refs.billInfo.$refs.billFrom.clearValidate()
-      this.$refs.remarksInfo.$refs.remarkFrom.clearValidate()
+      // this.$refs.billInfo.$refs.billFrom.clearValidate()
+      // this.$refs.remarksInfo.$refs.remarkFrom.clearValidate()
     },
     init() {
       this.bookingDetails = JSON.parse(JSON.stringify(initDetail))
@@ -985,11 +986,11 @@ export default {
               this.cargoRules[item][0].required = true
             }
           })
-          Object.keys(this.billRules).map((item, index) => {
-            if (this.checkFrom.includes(item)) {
-              this.billRules[item][0].required = true
-            }
-          })
+          // Object.keys(this.billRules).map((item, index) => {
+          //   if (this.checkFrom.includes(item)) {
+          //     this.billRules[item][0].required = true
+          //   }
+          // })
           Object.keys(this.remarksRules).map((item, index) => {
             if (this.checkFrom.includes(item)) {
               this.remarksRules[item][0].required = true
@@ -1224,22 +1225,22 @@ export default {
       this.$refs.cargoInfo.$refs.cargoFrom.validate(valid => {
         cargoFrom = valid
       })
-      let billFrom = true
-      this.$refs.billInfo.$refs.billFrom.validate(valid => {
-        billFrom = valid
-      })
-      let remarksFrom = true
-      this.$refs.remarksInfo.$refs.remarkFrom.validate(valid => {
-        remarksFrom = valid
-      })
-      if (!basicFrom && mailingFrom && cargoFrom && billFrom && remarksFrom) {
+      // let billFrom = true
+      // this.$refs.billInfo.$refs.billFrom.validate(valid => {
+      //   billFrom = valid
+      // })
+      // let remarksFrom = true
+      // this.$refs.remarksInfo.$refs.remarkFrom.validate(valid => {
+      //   remarksFrom = valid
+      // })
+      if (!basicFrom && mailingFrom && cargoFrom) {
         if (Object.keys(basicObject).length === 1 &&
         Object.keys(basicObject)[0] === 'zhanCangFlag') {
           this.$message.error('保存失败，是否占舱未填写')
           return false
         }
       }
-      if ((!basicFrom || !mailingFrom || !cargoFrom || !billFrom || !remarksFrom) &&
+      if ((!basicFrom || !mailingFrom || !cargoFrom) &&
       (Object.keys(basicObject)[0] !== 'zhanCangFlag' && Object.keys(basicObject).length !== 1)) {
         this.$message.error('保存失败，请检查必填项')
         return false
diff --git a/src/views/main/BookingLedger/detail/modules/billInfo.vue b/src/views/main/BookingLedger/detail/modules/billInfo.vue
index e9e83ca..e8959db 100644
--- a/src/views/main/BookingLedger/detail/modules/billInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/billInfo.vue
@@ -1,220 +1,9 @@
 <template>
   <a-collapse class="collapse-box bill-info-box" :bordered="false" v-model="showKey">
     <a-collapse-panel key="1" :showArrow="false">
-      <template slot="header">
-        <div class="base-tit"><i class="iconfont icon-electronic-signature"></i>签单信息 <span class="click-btn" @click.stop="tabStopFun"></span></div>
-      </template>
-      <template slot="extra">
-        <div class="tab-change"><i class="iconfont icon-xia" :class="{'active': !showKey.includes('1')}"></i></div>
-      </template>
       <div class="container bill-info">
         <a-form-model ref="billFrom" :model="details" :rules="rules">
           <a-row :gutter="10">
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="签单方式"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="issuetype"
-              >
-                <selectView
-                  type="issuetype"
-                  :defaultVal="details.issuetype"
-                  searchApi="Codeissuetypelist"
-                  :searchQuery="{ KeyWord: '' }"
-                  :showLabel="['enName', 'cnName']"
-                  :openSearch="false"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="签单日期"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="issuedate"
-              >
-                <datePickerView
-                  class="date-picker"
-                  :parentVal="details.issuedate"
-                  type="issuedate"
-                  format="YYYY-MM-DD"
-                  @dateChange="dateChangeFun"
-                ></datePickerView>
-                <!-- <a-date-picker size="small" v-model="details.issuedate" format="YYYY-MM-DD" /> -->
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="签单地点"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="issueplace"
-              >
-                <selectView
-                  type="issueplace"
-                  :defaultVal="details.issueplace"
-                  searchApi="GetPortloadlist"
-                  :searchQuery="{ KeyWord: '' }"
-                  :showLabel="['enName']"
-                  :openSearch="true"
-                  :isCopy="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="签单地代码"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="issueplaceid"
-              >
-                <inputView type="issueplaceid" size="small" :parentVal="details.issueplaceid" @getInputChange="inputChange"/>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="提单份数"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="nobill"
-              >
-                <selectView
-                  type="nobill"
-                  :defaultVal="details.nobill"
-                  searchApi="nobillData"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="false"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="副本份数"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="copynobill"
-              >
-                <selectView
-                  type="copynobill"
-                  :defaultVal="details.copynobill"
-                  searchApi="copynobilllData"
-                  :searchQuery="{ name: '' }"
-                  :showLabel="['name']"
-                  :openSearch="false"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="预付地点"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="prepardat"
-              >
-                <selectView
-                  type="prepardat"
-                  :defaultVal="details.prepardat"
-                  searchApi="GetPortloadlist"
-                  :searchQuery="{ KeyWord: '' }"
-                  :showLabel="['enName']"
-                  :openSearch="true"
-                  :isCopy="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="到付地点"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="payableat"
-              >
-                <selectView
-                  type="payableat"
-                  :defaultVal="details.payableat"
-                  searchApi="GetPortlist"
-                  :searchQuery="{ KeyWord: '' }"
-                  :showLabel="['enName']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="付费方式"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="blfrt"
-              >
-                <selectView
-                  type="blfrt"
-                  :defaultVal="details.blfrt"
-                  searchApi="GetFrt"
-                  :searchQuery="{ KeyWord: '' }"
-                  :showLabel="['enName']"
-                  :openSearch="false"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="第三付款地"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="thirdpayaddr"
-              >
-                <inputView type="thirdpayaddr" size="small" :parentVal="details.thirdpayaddr" @getInputChange="inputChange"/>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-              <a-form-model-item
-                class="from-label"
-                label="运输条款"
-                :labelCol="labelCol"
-                :wrapperCol="wrapperCol"
-                has-feedback
-                prop="service"
-              >
-                <selectView
-                  type="service"
-                  :defaultVal="details.service"
-                  searchApi="GetService"
-                  :searchQuery="{ KeyWord: '' }"
-                  :showLabel="['name']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                ></selectView>
-              </a-form-model-item>
-            </a-col>
             <template v-if="details.cargoid == 'R'">
               <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
@@ -433,12 +222,6 @@ export default {
         }
       });
     },
-    handleCopyNoChange(value) {
-      this.details.copynobill = value
-    },
-    handleNoChange(value) {
-      this.details.nobill = value
-    },
     getSelectViewRes({ type, res }) {
       if (['issuetype', 'blfrt'].includes(type)) {
         this.details[type] = res.enName || ''
@@ -466,11 +249,6 @@ export default {
     },
     dateChangeFun ({ type, value }) {
       this.details[type] = value || ''
-    },
-    tabStopFun () {
-      return false
-    },
-    tabChangeFun () {
     }
   }
 }
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index 131f901..62ace80 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -220,8 +220,12 @@
                   <a-form-model-item
                     class="from-label yarn-label"
                     label="场站"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
+                    :labelCol="{ xs: { span: 24 },
+                                 sm: { span: 5 },
+                                 md: { span: 5 }}"
+                    :wrapperCol="{ xs: { span: 24 },
+                                   sm: { span: 19 },
+                                   md: { span: 19 }}"
                     has-feedback
                     style="overflow: visible"
                     prop="yard">
@@ -621,7 +625,226 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-
+                <a-col :span="24">
+                  <div style="height: 1px;background: rgb(170 176 185);margin: 5px 0;"></div>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单方式"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="issuetype"
+                  >
+                    <selectView
+                      type="issuetype"
+                      :defaultVal="details.issuetype"
+                      searchApi="Codeissuetypelist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName', 'cnName']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单日期"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="issuedate"
+                  >
+                    <datePickerView
+                      class="date-picker"
+                      :parentVal="details.issuedate"
+                      type="issuedate"
+                      format="YYYY-MM-DD"
+                      @dateChange="dateChangeFun"
+                    ></datePickerView>
+                    <!-- <a-date-picker size="small" v-model="details.issuedate" format="YYYY-MM-DD" /> -->
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单地点"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="issueplace"
+                  >
+                    <selectView
+                      type="issueplace"
+                      :defaultVal="details.issueplace"
+                      searchApi="GetPortloadlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="true"
+                      :isCopy="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="issueplaceid"
+                  >
+                    <inputView type="issueplaceid" size="small" :parentVal="details.issueplaceid" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="付费方式"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="blfrt"
+                  >
+                    <selectView
+                      type="blfrt"
+                      :defaultVal="details.blfrt"
+                      searchApi="GetFrt"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="预付地点"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="prepardat"
+                  >
+                    <selectView
+                      type="prepardat"
+                      :defaultVal="details.prepardat"
+                      searchApi="GetPortloadlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="true"
+                      :isCopy="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="到付地点"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="payableat"
+                  >
+                    <selectView
+                      type="payableat"
+                      :defaultVal="details.payableat"
+                      searchApi="GetPortlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="第三付款地"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="thirdpayaddr"
+                  >
+                    <inputView type="thirdpayaddr" size="small" :parentVal="details.thirdpayaddr" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="运输条款"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="service"
+                  >
+                    <selectView
+                      type="service"
+                      :defaultVal="details.service"
+                      searchApi="GetService"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['name']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="提单份数"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="nobill"
+                  >
+                    <selectView
+                      type="nobill"
+                      :defaultVal="details.nobill"
+                      searchApi="nobillData"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="副本份数"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="copynobill"
+                  >
+                    <selectView
+                      type="copynobill"
+                      :defaultVal="details.copynobill"
+                      searchApi="copynobilllData"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item prop="soremark">
+                    <div class="tit" :class="{'required':rules['soremark'] && rules['soremark'][0].required}"><span class="iconfont icon-bianji"></span>订舱备注</div>
+                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.soremark" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item prop="siremark">
+                    <div class="tit" :class="{'required':rules['siremark'] && rules['siremark'][0].required}"><span class="iconfont icon-bianji"></span>截单备注</div>
+                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
+                  </a-form-model-item>
+                </a-col>
                 <!-- <a-col :span="12">
                   <a-form-model-item
                     class="from-label pkgs-line-box"
@@ -1676,6 +1899,24 @@ export default {
       } else if (type === 'lineName') {
         this.details[type] = res.name || ''
         this.$emit('editLineName', true)
+      } else if (['issuetype', 'blfrt'].includes(type)) {
+        this.details[type] = res.enName || ''
+        if (type === 'blfrt') {
+          if (this.details.blfrt === 'FREIGHT COLLECT') {
+            this.details.payableat = this.details.payableat ? this.details.payableat : this.details.portdischarge || ''
+            this.details.payableatid = this.details.payableatid ? this.details.payableatid : this.details.portdischargeid || ''
+          } else {
+            this.details.prepardat = this.details.prepardat ? this.details.prepardat : this.details.portload || ''
+            this.details.prepardatid = this.details.prepardatid ? this.details.prepardatid : this.details.portloadid || ''
+          }
+        }
+      } else if (['issueplace', 'prepardat', 'payableat'].includes(type)) {
+        this.details[type] = res.enName || ''
+        this.details[`${type}id`] = res.ediCode || ''
+      } else if (['service'].includes(type)) {
+        this.details[type] = res.name || ''
+      } else if (['nobill', 'copynobill'].includes(type)) {
+        this.details[type] = res.code || ''
       }
     },
     dateChangeFun({ type, value }) {
@@ -1705,4 +1946,7 @@ export default {
     color: @primary-color;
   }
 }
+.tit{
+  line-height: 36px;
+}
 </style>
diff --git a/src/views/main/BookingLedger/detail/rules.js b/src/views/main/BookingLedger/detail/rules.js
index 6320f8b..ee39ddd 100644
--- a/src/views/main/BookingLedger/detail/rules.js
+++ b/src/views/main/BookingLedger/detail/rules.js
@@ -59,16 +59,7 @@ export default {
     pkgs: [{ required: false, message: '请输入件数', trigger: 'change' }],
     kindpkgs: [{ required: false, message: '请输入包装', trigger: 'change' }],
     kgs: [{ required: false, message: '请输入毛重', trigger: 'change' }],
-    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }]
-  },
-  cargoRules: {
-    marks: [{ required: false, message: '请输入Seal No.  Marks & Nos', trigger: 'change' }],
-    cargoid: [{ required: false, message: '请选择货物标志', trigger: 'change' }],
-    hscode: [{ required: false, message: '请输入HS编码', trigger: 'change' }],
-    description: [{ required: false, message: '请输入包装种类与货名', trigger: 'change' }],
-    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }]
-  },
-  billRules: {
+    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }],
     issuetype: [{ required: false, message: '请选择签单方式', trigger: 'change' }],
     issuedate: [{ required: false, message: '请选择签单日期', trigger: 'change' }],
     issueplace: [{ required: false, message: '请选择签单地点', trigger: 'change' }],
@@ -90,11 +81,22 @@ export default {
     dunno: [{ required: false, message: '请输入危险品编号', trigger: 'change' }],
     dpage: [{ required: false, message: '请输入危险品页号', trigger: 'change' }],
     dlabel: [{ required: false, message: '请输入危险品标签', trigger: 'change' }],
-    linkman: [{ required: false, message: '请输入危险品联系人', trigger: 'change' }]
-  },
-  remarksRules: {
+    linkman: [{ required: false, message: '请输入危险品联系人', trigger: 'change' }],
     soremark: [{ required: false, message: '请输入订舱备注', trigger: 'change' }],
     siremark: [{ required: false, message: '请输入截单备注', trigger: 'change' }]
+  },
+  cargoRules: {
+    marks: [{ required: false, message: '请输入Seal No.  Marks & Nos', trigger: 'change' }],
+    cargoid: [{ required: false, message: '请选择货物标志', trigger: 'change' }],
+    hscode: [{ required: false, message: '请输入HS编码', trigger: 'change' }],
+    description: [{ required: false, message: '请输入包装种类与货名', trigger: 'change' }],
+    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }]
+  },
+  billRules: {
+ 
+  },
+  remarksRules: {
+
   },
   ediRules: {
     'bookingEDIExt.sendCode': [{ required: false, message: '请输入发送方EDI代码', trigger: 'change' }],
diff --git a/src/views/main/Taskmanage/TaskmanageList/index.vue b/src/views/main/Taskmanage/TaskmanageList/index.vue
index da8179a..f0b835c 100644
--- a/src/views/main/Taskmanage/TaskmanageList/index.vue
+++ b/src/views/main/Taskmanage/TaskmanageList/index.vue
@@ -237,7 +237,7 @@
               row-class-name="line-box"
               @page-change="handlePageChange"
               style="margin-top: 6px"
-              height="580px"
+              :height="tableHeight"
             >
               <template #status="{ row }">
                 <span>{{ selectStatus(row.status) }}</span>
@@ -478,6 +478,7 @@ export default {
   },
   data() {
     return {
+      tableHeight:0,
       templateType: [],
       bcFileFlag: false,
       bcFile: {},
@@ -587,6 +588,7 @@ export default {
   },
   created() {
     this.levelLoading = true
+    this.tableHeight = document.body.clientHeight - 230
     this.formAllData = JSON.parse(JSON.stringify(initData.condAllData))
     this.fromTableAllData = JSON.parse(JSON.stringify(initData.columnsAllData))
     this.getCurrentTotalStat()

From 69ff1fd811fdea71e6d1db8c423cb790d79cfccb Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Thu, 15 Jun 2023 16:27:08 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/main/BookingLedger/detail/index.vue |   3 +-
 .../detail/modules/basicInfo.vue              | 123 ++--
 .../BookingLedger/detail/modules/billInfo.vue |  70 ---
 .../detail/modules/cargoInfo.vue              | 536 +++++++++++++++++-
 .../detail/modules/mailingInfo.vue            |  16 +-
 src/views/main/BookingLedger/detail/rules.js  |  10 +-
 6 files changed, 589 insertions(+), 169 deletions(-)

diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
index 759cd00..f5f4854 100644
--- a/src/views/main/BookingLedger/detail/index.vue
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -55,7 +55,7 @@
                         @changeDetail="changeDetailFun"
                         @spliceMore="spliceMorefun"
                         @editLineName="editLineNameFun"
-                        @pkgsEnCapital="pkgsEnCapitalFun">
+                      >
                       </mailingInfo>
                       <cargoInfo
                         ref="cargoInfo"
@@ -63,6 +63,7 @@
                         :rules="cargoRules"
                         :moreStr="moreStr"
                         isParent="parent"
+                        @pkgsEnCapital="pkgsEnCapitalFun"
                         @changeDetail="changeDetailFun"></cargoInfo>
                       <!-- <billInfo
                         ref="billInfo"
diff --git a/src/views/main/BookingLedger/detail/modules/basicInfo.vue b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
index 7f046e5..4a34300 100644
--- a/src/views/main/BookingLedger/detail/modules/basicInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="basic-info">
-    <x-card style="padding-top: 15px">
-      <div slot="content" style="margin-top: -24px">
+    <x-card style="padding-top: 15px;">
+      <div slot="content" style="margin-top: -24px;">
         <a-form-model
           style="margin-bottom: 10px"
           size="small"
@@ -16,8 +16,8 @@
                 class="from-label"
                 prop="customername"
                 label="委托单位"
-                :labelCol="labelCol2"
-                :wrapperCol="wrapperCol2"
+                :labelCol="labelCol4"
+                :wrapperCol="wrapperCol4"
                 has-feedback
               >
                 <div class="customer-box" style="padding-right: 24px">
@@ -124,8 +124,8 @@
               <a-form-model-item
                 class="from-label"
                 label="订舱编号"
-                :labelCol="labelCol2"
-                :wrapperCol="wrapperCol2"
+                :labelCol="labelCol4"
+                :wrapperCol="wrapperCol4"
                 has-feedback
                 prop="custno"
               >
@@ -182,8 +182,16 @@
                 <a-form-model-item
                   class="from-label"
                   label="运费协议号"
-                  :labelCol="labelCol2"
-                  :wrapperCol="wrapperCol2"
+                  :labelCol="{
+                    xs: { span: 24 },
+                    sm: { span: 10 },
+                    md: { span: 10 }
+                  }"
+                  :wrapperCol="{
+                    xs: { span: 24 },
+                    sm: { span: 14 },
+                    md: { span: 14 }
+                  }"
                   has-feedback
                   prop="contractno"
                 >
@@ -209,8 +217,16 @@
                 <a-form-model-item
                   class="from-label"
                   label="运费协议号"
-                  :labelCol="labelCol2"
-                  :wrapperCol="wrapperCol2"
+                  :labelCol="{
+                    xs: { span: 24 },
+                    sm: { span: 12 },
+                    md: { span: 12 }
+                  }"
+                  :wrapperCol="{
+                    xs: { span: 24 },
+                    sm: { span: 12 },
+                    md: { span: 12 }
+                  }"
                   has-feedback
                   prop="contractno"
                 >
@@ -236,8 +252,8 @@
                 <a-form-model-item
                   class="from-label"
                   label="EP号"
-                  :labelCol="labelCol2"
-                  :wrapperCol="wrapperCol2"
+                  :labelCol="labelCol4"
+                  :wrapperCol="wrapperCol4"
                   has-feedback
                   prop="epCode"
                 >
@@ -250,8 +266,8 @@
                 <a-form-model-item
                   class="from-label"
                   label="真提单号"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
+                  :labelCol="labelCol4"
+                  :wrapperCol="wrapperCol4"
                   has-feedback
                   prop="tmblno"
                 >
@@ -531,7 +547,7 @@
                 </a-form-model-item>
               </a-col>
             </a-row>
-            <a-row  :gutter="10">
+            <a-row :gutter="10">
               <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
                 <a-form-model-item
                   class="from-label"
@@ -569,69 +585,6 @@
                 </a-form-model-item>
               </a-col>
             </a-row>
-            <!-- <a-row :gutter="10">
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="船代"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="shipagency"
-                >
-                  <selectView
-                    ref="shipagency"
-                    type="shipagency"
-                    :defaultVal="details.shipagency"
-                    searchApi="GetForwarderlist"
-                    :searchQuery="{ KeyWord: '' }"
-                    :showLabel="['name', 'showCode']"
-                    :openSearch="true"
-                    @change="getSelectViewRes"
-                  ></selectView>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="航线"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="lineName"
-                >
-                  <selectView
-                    type="lineName"
-                    :defaultVal="details.lineName"
-                    searchApi="GetTenantLineList"
-                    :searchQuery="{ LineName: '' }"
-                    :showLabel="['name']"
-                    :openSearch="false"
-                    @change="getSelectViewRes"
-                  ></selectView>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="业务来源"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="sourceName"
-                >
-                  <selectView
-                    type="sourceName"
-                    :defaultVal="details.sourceName"
-                    searchApi="BookingSourcePage"
-                    :searchQuery="{ SearchValue: '' }"
-                    :showLabel="['name']"
-                    :openSearch="false"
-                    @change="getSelectViewRes"
-                  ></selectView>
-                </a-form-model-item>
-              </a-col>
-            </a-row> -->
           </div>
         </a-form-model>
       </div>
@@ -764,6 +717,16 @@ export default {
         sm: { span: 19 },
         md: { span: 19 }
       },
+      labelCol4: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      wrapperCol4: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 16 }
+      },
       userLabelCol: {
         xs: { span: 24 },
         sm: { span: 8 },
@@ -784,6 +747,7 @@ export default {
         sm: { span: 16 },
         md: { span: 18 }
       },
+
       form: this.$form.createForm(this),
       customerType: '',
       customerVisible: false,
@@ -1301,4 +1265,7 @@ export default {
 .ant-col-xl-4-8{
   width: 20%;
 }
+/deep/ .ant-card-body{
+    padding-left: 10px !important;
+  }
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/billInfo.vue b/src/views/main/BookingLedger/detail/modules/billInfo.vue
index e8959db..09d49c6 100644
--- a/src/views/main/BookingLedger/detail/modules/billInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/billInfo.vue
@@ -4,76 +4,6 @@
       <div class="container bill-info">
         <a-form-model ref="billFrom" :model="details" :rules="rules">
           <a-row :gutter="10">
-            <template v-if="details.cargoid == 'R'">
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="冷藏通风量"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="reeferf"
-                >
-                  <inputView type="reeferf" size="small" :parentVal="details.reeferf" @getInputChange="inputChange"/>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="设置温度"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="tempset"
-                >
-                  <inputView type="tempset" size="small" :parentVal="details.tempset" @getInputChange="inputChange"/>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="温度单位"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="tempid"
-                >
-                  <a-select size="small" :default-value="details.tempid || 'C摄氏'" v-model="details.tempid">
-                    <a-select-option value="C"> C摄氏 </a-select-option>
-                    <a-select-option value="F"> F华氏 </a-select-option>
-                  </a-select>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="最低温度"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="tempmin"
-                >
-                  <inputView type="tempmin" size="small" :parentVal="details.tempmin" @getInputChange="inputChange"/>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item
-                  class="from-label"
-                  label="最高温度"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="tempmax"
-                >
-                  <inputView type="tempmax" size="small" :parentVal="details.tempmax" @getInputChange="inputChange"/>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
-                <a-form-model-item class="from-label" label="湿度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback prop="humidity">
-                  <inputView type="humidity" size="small" :parentVal="details.humidity" @getInputChange="inputChange"/>
-                </a-form-model-item>
-              </a-col>
-            </template>
             <template v-if="details.cargoid == 'D'">
               <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
diff --git a/src/views/main/BookingLedger/detail/modules/cargoInfo.vue b/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
index ff8275c..3bc7e7e 100644
--- a/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
@@ -11,8 +11,8 @@
       </template>
       <div class="container cargo-info">
         <a-form-model :selfUpdate="true" ref="cargoFrom" :model="details" :rules="rules">
-          <a-row :gutter="20">
-            <a-col :span="8">
+          <a-row :gutter="10">
+            <a-col :span="5">
               <div class="cargo-info-tit" :class="{ 'required': rules['marks'] && rules['marks'][0].required }">
                 <div>Seal No.(封志号)<span
                   @click="handleOpen(1)"
@@ -39,7 +39,7 @@
                 </div>
               </a-form-model-item>
             </a-col>
-            <a-col :span="16">
+            <a-col :span="10">
               <div class="line">
                 <div
                   class="left"
@@ -118,6 +118,222 @@
                 </div>
               </a-form-model-item>
             </a-col>
+            <a-col :span="9">
+              <a-col :span="12">
+                <a-form-model-item
+                  class="from-label pkgs-line-box"
+                  label="件数"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="pkgs">
+                  <div class="line-box">
+                    <a-input
+                      :allowClear="true"
+                      size="small"
+                      v-model="details.pkgs"
+                      type="number"
+                      @change="changePkgs" />
+                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('pkgs')"></i>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12" style="overflow: hidden">
+                <a-form-model-item
+                  class="from-label"
+                  label="包装"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="kindpkgs">
+                  <selectView
+                    type="kindpkgs"
+                    :defaultVal="details.kindpkgs"
+                    searchApi="GetPackage"
+                    :searchQuery="{ KeyWord: '' }"
+                    :showLabel="['name']"
+                    :openSearch="false"
+                    @change="getSelectViewRes">
+                  </selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12" style="overflow: hidden">
+                <a-form-model-item
+                  class="from-label kgs-line-box"
+                  label="毛重"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="kgs">
+                  <div class="line-box">
+                    <a-input size="small" :allowClear="true" v-model="details.kgs" />
+                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
+                    <span class="unit">KGS</span>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12" style="overflow: hidden">
+                <a-form-model-item
+                  class="from-label cbm-line-box"
+                  label="尺寸"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="cbm">
+                  <div class="line-box">
+                    <a-input size="small" :allowClear="true" v-model="details.cbm" />
+                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
+                    <span class="unit">CBM</span>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <template v-if="details.cargoid == 'R'">
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="冷藏通风量"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="reeferf"
+                  >
+                    <inputView type="reeferf" size="small" :parentVal="details.reeferf" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="设置温度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempset"
+                  >
+                    <inputView type="tempset" size="small" :parentVal="details.tempset" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="温度单位"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempid"
+                  >
+                    <a-select size="small" :default-value="details.tempid || 'C摄氏'" v-model="details.tempid">
+                      <a-select-option value="C"> C摄氏 </a-select-option>
+                      <a-select-option value="F"> F华氏 </a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="最低温度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempmin"
+                  >
+                    <inputView type="tempmin" size="small" :parentVal="details.tempmin" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="最高温度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempmax"
+                  >
+                    <inputView type="tempmax" size="small" :parentVal="details.tempmax" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="湿度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="humidity">
+                    <inputView type="humidity" size="small" :parentVal="details.humidity" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <template v-if="details.cargoid == 'D'">
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品等级"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dclass"
+                  >
+                    <inputView type="dclass" size="small" :parentVal="details.dclass" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品编号"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dunno"
+                  >
+                    <inputView type="dunno" size="small" :parentVal="details.dunno" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品页号"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dpage"
+                  >
+                    <inputView type="dpage" size="small" :parentVal="details.dpage" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品标签"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dlabel"
+                  >
+                    <inputView type="dlabel" size="small" :parentVal="details.dlabel" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品联系人"
+                    :labelCol="{
+                      xs: { span: 24 },
+                      sm: { span: 10 },
+                      md: { span: 12 }
+                    }"
+                    :wrapperCol="{
+                      xs: { span: 24 },
+                      sm: { span: 14 },
+                      md: { span: 12 }
+                    }"
+                    has-feedback
+                    prop="linkman"
+                  >
+                    <inputView type="linkman" size="small" :parentVal="details.linkman" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+              </template>
+            </a-col>
             <a-col class="num-box" :span="24">
               <span class="label">件数大写: </span>
               <a-input
@@ -169,6 +385,46 @@
 
         </div>
       </a-modal>
+      <a-modal width="500px" :maskClosable="false" v-model="textEntryModalVisible" :title="textEntryModalTitle">
+        <div class="text-entry-box">
+          <!-- 件数包装 -->
+          <a-form v-if="textEntryType === 'pkgs'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.pkgstotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="pkgsTextChange" />
+            </div>
+            <div class="total" v-if="pkgstotalRes">总计：{{ pkgstotalRes }}</div>
+          </a-form>
+          <!-- 毛重 -->
+          <a-form v-if="textEntryType === 'kgs'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.kgstotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="kgsTextChange" />
+            </div>
+            <div class="total" v-if="kgstotalRes">总计：{{ kgstotalRes }} / KGS</div>
+          </a-form>
+          <!-- 尺码 -->
+          <a-form v-if="textEntryType === 'cbm'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.cbmtotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="cbmTextChange" />
+            </div>
+            <div class="total" v-if="cbmtotalRes">总计：{{ cbmtotalRes }} / CBM</div>
+          </a-form>
+        </div>
+        <template slot="footer">
+          <a-button type="primary" @click="textEntryClose">确定</a-button>
+        </template>
+      </a-modal>
     </a-collapse-panel>
   </a-collapse>
 </template>
@@ -217,7 +473,48 @@ export default {
       showKey: ['1'],
       modelTitle: '',
       modelType: 0,
-      visible: false
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 16 }
+      },
+      labelColCode: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 }
+      },
+      wrapperColCode: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 14 }
+      },
+      shippername: '',
+      consigneename: '',
+      notifypartyname: '',
+      foreignAgentname: '',
+      notifypartY2name: '',
+      modelVisible: false,
+      modelconfirm: false,
+      modelName: '',
+      yardType: '',
+      yardVisible: false,
+      customerModelconfirm: false,
+      textEntryModalVisible: false,
+      textEntryType: '',
+      textEntryModalTitle: '',
+      pkgstotalRes: 0,
+      kgstotalRes: 0,
+      cbmtotalRes: 0,
+      portdischargeHasline: false,
+      destinationidHasline: false,
+      userHasLine: false
+
       // goodsnameData: []
     }
   },
@@ -263,8 +560,224 @@ export default {
         document.getElementById('description-scroll-right').scrollTop = descriptionScroll.scrollTop
       })
     }
+    setTimeout(() => {
+      this.changePkgs()
+    }, 2000)
   },
   methods: {
+    SetTOTALNO(SS) {
+      SS = SS.toString()
+      const i = SS.indexOf('\n')
+      let num = 0
+      let strKind = ''
+      let enCapital = ''
+      if (i > 0) {
+        const slist = SS.split('\n')
+        for (let i = 0; i < slist.length; i += 1) {
+          const member = slist[i]
+          const strNum = this.GetStringNum(member)
+          if (i == 0) {
+            strKind = member.substring(strNum.length)
+          }
+          num = parseFloat(num).add(parseFloat(strNum))
+        }
+        if (strKind !== '') {
+          enCapital = strKind
+        } else {
+          strKind = this.details.kindpkgs
+          enCapital = this.ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
+        }
+      } else {
+        const strNum = this.GetStringNum(SS)
+        strKind = SS.substring(strNum.length)
+        if (strKind !== '') {
+          console.log(strKind)
+          enCapital = strKind
+        } else {
+          strKind = this.details.kindpkgs
+          enCapital = 'SAY:' + this.ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
+        }
+      }
+      return enCapital
+    },
+    ToEn(a) {
+      // eslint-disable-next-line no-array-constructor
+      const arr1 = new Array('', ' thousand', ' million', ' billion')
+      const b = a.length
+      let f = null
+      let h = 0
+      let g = ''
+      const e = Math.ceil(b / 3)
+      const k = b - e * 3
+      g = ''
+      for (f = k; f < b; f += 3) {
+        ++h
+        // eslint-disable-next-line no-undef
+        const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
+        // eslint-disable-next-line no-undef
+        const strEng = this.English(num3)
+        // eslint-disable-next-line eqeqeq
+        if (strEng != '') {
+          // eslint-disable-next-line eqeqeq
+          if (g != '') g += ' '
+          g += this.English(num3) + arr1[e - h]
+        }
+      }
+      return g
+    },
+    English(a) {
+      // eslint-disable-next-line no-array-constructor
+      var arr1 = new Array('', ' thousand', ' million', ' billion')
+      // eslint-disable-next-line no-array-constructor
+      var arr2 = new Array('zero', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety')
+      // eslint-disable-next-line no-array-constructor
+      var arr3 = new Array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine')
+      // eslint-disable-next-line no-array-constructor
+      var arr4 = new Array(
+        'ten',
+        'eleven',
+        'twelve',
+        'thirteen',
+        'fourteen',
+        'fifteen',
+        'sixteen',
+        'seventeen',
+        'eighteen',
+        'nineteen'
+      )
+
+      let strRet = ''
+      // eslint-disable-next-line eqeqeq
+      if (a.length == 3 && a.substr(0, 3) != '000') {
+        if (a.substr(0, 1) != '0') {
+          strRet += arr3[a.substr(0, 1)] + ' hundred'
+          if (a.substr(1, 2) != '00') strRet += ' and '
+        } else {
+          strRet += ' and '
+        }
+        a = a.substring(1)
+      }
+      if (a.length == 2) {
+        if (a.substr(0, 1) == '0') a = a.substring(1)
+        else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
+        else {
+          strRet += arr2[a.substr(0, 1)]
+          if (a.substr(1, 1) != '0') strRet += '-'
+          a = a.substring(1)
+        }
+      }
+      if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
+      return strRet
+    },
+    editTextEntryModel(type) {
+      this.textEntryModalVisible = true
+      this.textEntryType = type
+      if (type === 'pkgs') {
+        this.textEntryModalTitle = '件数/包装'
+        if (this.details.pkgstotal) {
+          this.pkgsTextChange()
+        } else {
+          this.pkgstotalRes = 0
+        }
+      } else if (type === 'kgs') {
+        this.textEntryModalTitle = '毛重'
+        if (this.details.kgstotal) {
+          this.kgsTextChange()
+        } else {
+          this.kgstotalRes = 0
+        }
+      } else if (type === 'cbm') {
+        this.textEntryModalTitle = '尺码'
+        if (this.details.cbmtotal) {
+          this.cbmTextChange()
+        } else {
+          this.cbmtotalRes = 0
+        }
+      }
+    },
+    textEntryClose() {
+      this.textEntryModalVisible = false
+      this.textEntryModalTitle = ''
+      this.textEntryType = false
+    },
+    GetStringNum(str) {
+      var num = 0
+      if (str == null || str == '') return num
+      if (str.length == 0) return num
+      var if_find = false
+      var str_num = ''
+      for (var i = 0; i < str.length; i += 1) {
+        var member = str.substr(i, 1)
+        if (
+          member == '0' ||
+          member == '1' ||
+          member == '2' ||
+          member == '3' ||
+          member == '4' ||
+          member == '5' ||
+          member == '6' ||
+          member == '7' ||
+          member == '8' ||
+          member == '9' ||
+          member == '.' ||
+          member == '-'
+        ) {
+          if (!if_find) {
+            str_num = str_num + member
+          }
+        } else {
+          if_find = true
+        }
+      }
+      return str_num
+    },
+    pkgsTextChange() {
+      const pkgsTexyVal = this.details.pkgstotal
+      const arr = pkgsTexyVal.split(/\n|\r/g)
+      let pkgs = 0
+      let kindpkgs = ''
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          pkgs = (pkgs * 100 + num1 * 100) / 100
+        }
+        if (!kindpkgs && regexStr && /^[a-zA-Z]+$/.test(regexStr[1])) {
+          kindpkgs = regexStr[1]
+        }
+      })
+      this.details.pkgs = parseInt(pkgs)
+      this.details.kindpkgs = kindpkgs
+      this.pkgstotalRes = parseInt(pkgs)
+    },
+    kgsTextChange() {
+      const kgsTexyVal = this.details.kgstotal
+      const arr = kgsTexyVal.split(/\n|\r/g)
+      let kgs = 0
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          kgs = (kgs * 100 + num1 * 100) / 100
+        }
+      })
+      this.details.kgs = kgs
+      this.kgstotalRes = kgs
+    },
+    cbmTextChange() {
+      const cbmTexyVal = this.details.cbmtotal
+      const arr = cbmTexyVal.split(/\n|\r/g)
+      let cbm = 0
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          cbm = (cbm * 100 + num1 * 100) / 100
+        }
+      })
+      this.details.cbm = cbm
+      this.cbmtotalRes = cbm
+    },
     handleOpen(type) {
       this.modelType = type
       if (type === 1) {
@@ -304,10 +817,21 @@ export default {
         this.details.goodsname = res.goodsNameEN || ''
       } else if (type === 'cargoid') {
         this.details.cargoid = res.code || ''
+      } else if (['kindpkgs'].includes(type)) {
+        this.details.kindpkgs = res['name'] || ''
+        const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
+        this.$emit('pkgsEnCapital', enCapitalRes)
       }
     },
+    changePkgs() {
+      const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
+      this.$emit('pkgsEnCapital', enCapitalRes)
+    },
     inputChange({ type, value }) {
       this.details[type] = value
+      if (type === 'pkgs') {
+        this.changePkgs()
+      }
       this.$forceUpdate()
     },
     tabStopFun() {
@@ -337,4 +861,8 @@ export default {
 </style>
 <style lang="less" scoped>
 @import url('../style/cargoInfo.less');
+@import url('../style/mailingInfo.less');
+.cargo-info {
+    padding-bottom: 20px;
+}
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index 62ace80..497c891 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -10,7 +10,7 @@
       <template slot="extra">
         <div class="tab-change"><i class="iconfont icon-xia" :class="{ active: !showKey.includes('1') }"></i></div>
       </template>
-      <div class="mail-info">
+      <div class="mail-info" style="padding-bottom: 18px;">
         <a-form-model :selfUpdate="true" ref="mailingFrom" :model="details" :rules="rules">
           <a-row :gutter="10">
             <a-col
@@ -304,15 +304,6 @@
                       type="closingdate"
                       format="YYYY-MM-DD HH:00"
                       @dateChange="dateChangeFun"></datePickerView>
-                      <!-- <a-date-picker
-                      style="min-width:100px"
-                      show-time
-                      format="YYYY-MM-DD HH:00"
-                      v-model="details.closingdate"
-                      @change="closingdateChange"
-                    >
-                      <a-icon slot="suffixIcon" type="time" style="display: none" />
-                    </a-date-picker> -->
                   </a-form-model-item>
                 </a-col>
                 <a-col :span="6" >
@@ -833,6 +824,9 @@
                     ></selectView>
                   </a-form-model-item>
                 </a-col>
+                <a-col :span="24">
+                  <div style="height: 1px;background: rgb(170 176 185);margin: 5px 0;"></div>
+                </a-col>
                 <a-col :span="12">
                   <a-form-model-item prop="soremark">
                     <div class="tit" :class="{'required':rules['soremark'] && rules['soremark'][0].required}"><span class="iconfont icon-bianji"></span>订舱备注</div>
@@ -1947,6 +1941,6 @@ export default {
   }
 }
 .tit{
-  line-height: 36px;
+  line-height: 26px;
 }
 </style>
diff --git a/src/views/main/BookingLedger/detail/rules.js b/src/views/main/BookingLedger/detail/rules.js
index ee39ddd..2d3d83c 100644
--- a/src/views/main/BookingLedger/detail/rules.js
+++ b/src/views/main/BookingLedger/detail/rules.js
@@ -56,10 +56,6 @@ export default {
     destination: [{ required: false, message: '请选择目的地', trigger: 'change' }],
     placedeliveryid: [{ required: false, message: '请选择交货代码', trigger: 'change' }],
     placedelivery: [{ required: false, message: '请选择交货地', trigger: 'change' }],
-    pkgs: [{ required: false, message: '请输入件数', trigger: 'change' }],
-    kindpkgs: [{ required: false, message: '请输入包装', trigger: 'change' }],
-    kgs: [{ required: false, message: '请输入毛重', trigger: 'change' }],
-    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }],
     issuetype: [{ required: false, message: '请选择签单方式', trigger: 'change' }],
     issuedate: [{ required: false, message: '请选择签单日期', trigger: 'change' }],
     issueplace: [{ required: false, message: '请选择签单地点', trigger: 'change' }],
@@ -90,7 +86,11 @@ export default {
     cargoid: [{ required: false, message: '请选择货物标志', trigger: 'change' }],
     hscode: [{ required: false, message: '请输入HS编码', trigger: 'change' }],
     description: [{ required: false, message: '请输入包装种类与货名', trigger: 'change' }],
-    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }]
+    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }],
+    pkgs: [{ required: false, message: '请输入件数', trigger: 'change' }],
+    kindpkgs: [{ required: false, message: '请输入包装', trigger: 'change' }],
+    kgs: [{ required: false, message: '请输入毛重', trigger: 'change' }],
+    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }]
   },
   billRules: {
  

From 1d5fba185420c3e959dc52baafe9b1676d4629b1 Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Thu, 15 Jun 2023 16:36:13 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/generator-routers.js               |   12 +
 src/views/main/BookingLedger/detail/index.vue |   48 +-
 .../main/BookingLedger/detail/indexTest.vue   | 1761 +++++++++
 .../detail/modulesTest/basicInfo.vue          | 1271 +++++++
 .../detail/modulesTest/billInfo.vue           |  196 +
 .../detail/modulesTest/cargoInfo.vue          |  868 +++++
 .../detail/modulesTest/ediMore.vue            |  713 ++++
 .../detail/modulesTest/goodsTable.vue         | 1972 ++++++++++
 .../detail/modulesTest/mailingInfo.vue        | 1946 ++++++++++
 .../detail/modulesTest/operationArea.vue      | 1500 ++++++++
 .../detail/modulesTest/preOrder.vue           | 3108 +++++++++++++++
 .../detail/modulesTest/remarksInfo.vue        |  100 +
 .../detail/modulesTest/rightContent.vue       |  969 +++++
 .../detail/modulesTest/sedOperationArea.vue   |  180 +
 .../detail/modulesTest/sedOrder.vue           |  796 ++++
 src/views/main/BookingLedger/detail/rules.js  |   34 +-
 .../main/BookingLedger/detail/rulesTest.js    |  158 +
 .../main/BookingLedger/list/indexTest.vue     | 3355 +++++++++++++++++
 18 files changed, 18944 insertions(+), 43 deletions(-)
 create mode 100644 src/views/main/BookingLedger/detail/indexTest.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/basicInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/billInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/cargoInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/ediMore.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/goodsTable.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/mailingInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/operationArea.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/preOrder.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/remarksInfo.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/rightContent.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/sedOperationArea.vue
 create mode 100644 src/views/main/BookingLedger/detail/modulesTest/sedOrder.vue
 create mode 100644 src/views/main/BookingLedger/detail/rulesTest.js
 create mode 100644 src/views/main/BookingLedger/list/indexTest.vue

diff --git a/src/router/generator-routers.js b/src/router/generator-routers.js
index e04956c..4c2b4c8 100644
--- a/src/router/generator-routers.js
+++ b/src/router/generator-routers.js
@@ -26,6 +26,7 @@ const constantRouterComponents = {
   // 默认首页
   Console: () => import('@/views/system/index/welcome'),
   BookingDetail: () => import('@/views/main/BookingLedger/detail'),
+  BookingDetailTest: () => import('@/views/main/BookingLedger/detail/indexTest'),
   CustomerInformationManagementAdd: () => import('@/views/main/Customer/addForm'),
   CustomerInformationManagementEdit: () => import('@/views/main/Customer/editForm'),
   SendCarAdd: () => import('@/views/main/SendCar/addForm'),
@@ -253,6 +254,17 @@ const booking = [
     },
     component: 'BookingDetail'
   },
+  {
+    name: 'BookingDetailTest',
+    path: '/BookingDetailTest',
+    pid: 0,
+    id: 10031,
+    meta: {
+      title: '订舱详情',
+      show: false
+    },
+    component: 'BookingDetailTest'
+  },
   {
     name: 'CustomerInformationManagementAdd',
     path: '/CustomerInformationManagementAdd',
diff --git a/src/views/main/BookingLedger/detail/index.vue b/src/views/main/BookingLedger/detail/index.vue
index f5f4854..d60ef86 100644
--- a/src/views/main/BookingLedger/detail/index.vue
+++ b/src/views/main/BookingLedger/detail/index.vue
@@ -46,7 +46,7 @@
                         :inPageLoading="inPageLoading"
                         isParent="parent"
                         @changeDetail="changeDetailFun"
-                      ></basicInfo>
+                        @editLineName="editLineNameFun"></basicInfo>
                       <mailingInfo
                         ref="mailingInfo"
                         :details="bookingDetails"
@@ -54,8 +54,7 @@
                         isParent="parent"
                         @changeDetail="changeDetailFun"
                         @spliceMore="spliceMorefun"
-                        @editLineName="editLineNameFun"
-                      >
+                        @pkgsEnCapital="pkgsEnCapitalFun">
                       </mailingInfo>
                       <cargoInfo
                         ref="cargoInfo"
@@ -63,20 +62,19 @@
                         :rules="cargoRules"
                         :moreStr="moreStr"
                         isParent="parent"
-                        @pkgsEnCapital="pkgsEnCapitalFun"
                         @changeDetail="changeDetailFun"></cargoInfo>
-                      <!-- <billInfo
+                      <billInfo
                         ref="billInfo"
                         :details="bookingDetails"
                         :rules="billRules"
                         isParent="parent"
-                        @changeDetail="changeDetailFun"></billInfo> -->
-                      <!-- <remarksInfo
+                        @changeDetail="changeDetailFun"></billInfo>
+                      <remarksInfo
                         ref="remarksInfo"
                         :details="bookingDetails"
                         :rules="remarksRules"
                         isParent="parent"
-                        @changeDetail="changeDetailFun"></remarksInfo> -->
+                        @changeDetail="changeDetailFun"></remarksInfo>
                       <goodsTable
                         ref="goodsTable"
                         :details="bookingDetails"
@@ -784,8 +782,8 @@ export default {
       this.$refs.basicInfo.$refs.basicFrom.clearValidate()
       this.$refs.mailingInfo.$refs.mailingFrom.clearValidate()
       this.$refs.cargoInfo.$refs.cargoFrom.clearValidate()
-      // this.$refs.billInfo.$refs.billFrom.clearValidate()
-      // this.$refs.remarksInfo.$refs.remarkFrom.clearValidate()
+      this.$refs.billInfo.$refs.billFrom.clearValidate()
+      this.$refs.remarksInfo.$refs.remarkFrom.clearValidate()
     },
     init() {
       this.bookingDetails = JSON.parse(JSON.stringify(initDetail))
@@ -987,11 +985,11 @@ export default {
               this.cargoRules[item][0].required = true
             }
           })
-          // Object.keys(this.billRules).map((item, index) => {
-          //   if (this.checkFrom.includes(item)) {
-          //     this.billRules[item][0].required = true
-          //   }
-          // })
+          Object.keys(this.billRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.billRules[item][0].required = true
+            }
+          })
           Object.keys(this.remarksRules).map((item, index) => {
             if (this.checkFrom.includes(item)) {
               this.remarksRules[item][0].required = true
@@ -1226,22 +1224,22 @@ export default {
       this.$refs.cargoInfo.$refs.cargoFrom.validate(valid => {
         cargoFrom = valid
       })
-      // let billFrom = true
-      // this.$refs.billInfo.$refs.billFrom.validate(valid => {
-      //   billFrom = valid
-      // })
-      // let remarksFrom = true
-      // this.$refs.remarksInfo.$refs.remarkFrom.validate(valid => {
-      //   remarksFrom = valid
-      // })
-      if (!basicFrom && mailingFrom && cargoFrom) {
+      let billFrom = true
+      this.$refs.billInfo.$refs.billFrom.validate(valid => {
+        billFrom = valid
+      })
+      let remarksFrom = true
+      this.$refs.remarksInfo.$refs.remarkFrom.validate(valid => {
+        remarksFrom = valid
+      })
+      if (!basicFrom && mailingFrom && cargoFrom && billFrom && remarksFrom) {
         if (Object.keys(basicObject).length === 1 &&
         Object.keys(basicObject)[0] === 'zhanCangFlag') {
           this.$message.error('保存失败，是否占舱未填写')
           return false
         }
       }
-      if ((!basicFrom || !mailingFrom || !cargoFrom) &&
+      if ((!basicFrom || !mailingFrom || !cargoFrom || !billFrom || !remarksFrom) &&
       (Object.keys(basicObject)[0] !== 'zhanCangFlag' && Object.keys(basicObject).length !== 1)) {
         this.$message.error('保存失败，请检查必填项')
         return false
diff --git a/src/views/main/BookingLedger/detail/indexTest.vue b/src/views/main/BookingLedger/detail/indexTest.vue
new file mode 100644
index 0000000..42fc2f3
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/indexTest.vue
@@ -0,0 +1,1761 @@
+<template>
+  <div class="booking-detail">
+    <a-tabs
+      size="small"
+      :class="!Showtabs ? 'Showtabs' : ''"
+      :tabBarStyle="tabBarStyle"
+      :activeKey="tabActiveKey"
+      :animated="Object.keys($refs).includes('sedOrder') ? false : true"
+      @change="changeTab">
+      <a-tab-pane key="1" tab="主单信息" :forceRender="true">
+        <a-row :gutter="24">
+          <a-col :span="18" class="left-box" style="padding-right:0;">
+            <template>
+              <operationArea
+                :details="bookingDetails"
+                :inChildLoading="inChildLoading"
+                :class="scrollTop < 100 ? 'normal-nav' : 'fixed-nav'"
+                @refresh="refreshPage"
+                @save="saveFun"
+                @rules="getRules"
+                @changePage="changePageFun"
+                @copy="copyBookingFun"
+                @addSedList="addSedList"
+                @removeOrder="removeOrderFun"
+                @frompre="frompre"></operationArea>
+
+              <ul class="parent-tabs-box">
+                <div class="parents-tabs-top">
+                  <li @click="changeParentTabs('1-1')">
+                    <input type="radio" name="tabs" id="tab1" checked="true" />
+                    <label class="tabs-label" for="tab1">基础信息</label>
+                  </li>
+                  <li @click="changeParentTabs('2-2')">
+                    <input type="radio" name="tabs" id="tab2" checked="false" />
+                    <label class="tabs-label" for="tab2">EDI补充信息</label>
+                  </li>
+                </div>
+                <div class="parents-tabs-content">
+                  <div id="tab-content1" class="tab-content" v-show="mainOrderActiveKey === '1-1'">
+                    <div class="pane-box">
+                      <basicInfo
+                        ref="basicInfo"
+                        :type="type"
+                        :details="bookingDetails"
+                        :rules="basicRules"
+                        :inPageLoading="inPageLoading"
+                        isParent="parent"
+                        @changeDetail="changeDetailFun"
+                      ></basicInfo>
+                      <mailingInfo
+                        ref="mailingInfo"
+                        :details="bookingDetails"
+                        :rules="mailingRules"
+                        isParent="parent"
+                        @changeDetail="changeDetailFun"
+                        @spliceMore="spliceMorefun"
+                        @editLineName="editLineNameFun"
+                      >
+                      </mailingInfo>
+                      <cargoInfo
+                        ref="cargoInfo"
+                        :details="bookingDetails"
+                        :rules="cargoRules"
+                        :moreStr="moreStr"
+                        isParent="parent"
+                        @pkgsEnCapital="pkgsEnCapitalFun"
+                        @changeDetail="changeDetailFun"></cargoInfo>
+                      <!-- <billInfo
+                        ref="billInfo"
+                        :details="bookingDetails"
+                        :rules="billRules"
+                        isParent="parent"
+                        @changeDetail="changeDetailFun"></billInfo> -->
+                      <!-- <remarksInfo
+                        ref="remarksInfo"
+                        :details="bookingDetails"
+                        :rules="remarksRules"
+                        isParent="parent"
+                        @changeDetail="changeDetailFun"></remarksInfo> -->
+                      <goodsTable
+                        ref="goodsTable"
+                        :details="bookingDetails"
+                        :rules="tableRules"
+                        isParent="parent"
+                        @changeDetail="changeDetailFun"
+                        @changeTotal="changeTotalFun"
+                        @changeCtnInfo="changeCtnInfoFun">
+                      </goodsTable>
+                      <!-- v-if="!inPageLoading" -->
+                    </div>
+                  </div>
+                  <div id="tab-content2" class="tab-content" v-show="mainOrderActiveKey === '2-2'">
+                    <ediMore
+                      ref="ediMore"
+                      class="pane-box"
+                      :details="bookingDetails"
+                      :rules="ediRules"
+                      isParent="parent"
+                      @changeDetail="changeDetailFun"></ediMore>
+                  </div>
+                </div>
+              </ul>
+            </template>
+          </a-col>
+          <a-col :span="6" style="padding-left:8px;">
+            <rightContent
+              ref="rightContent"
+              :id="id"
+              :details="bookingDetails"
+              :excuteRules="excuteRules"
+              :excuteRulesType="excuteRulesType"
+              @changeDetail="changeDetailFun"
+              @rules="getRules"
+              @upDateRight="upDateRightFun"
+              @inGoodsSave="inGoodsSaveFun"
+              @handleRefsh="handleRefshRight"></rightContent>
+          </a-col>
+        </a-row>
+      </a-tab-pane>
+      <a-tab-pane
+        key="2"
+        tab="分单信息"
+        :forceRender="true"
+        v-show="bookingDetails.hbList && bookingDetails.hbList.length > 0">
+        <sedOrder
+          ref="sedOrder"
+          :details="bookingDetails"
+          :parSedOrderList="bookingDetails.hbList"
+          :isAdd="isAdd"
+          :checkFrom="checkFrom"
+          :scrollTop="scrollTop"
+          @changeHB="changeHBFun"
+          @sedOrderRemove="sedOrderRemoveFun">
+        </sedOrder>
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script>
+import operationArea from './modulesTest/operationArea'
+import basicInfo from './modulesTest/basicInfo'
+import mailingInfo from './modulesTest/mailingInfo'
+import cargoInfo from './modulesTest/cargoInfo'
+import billInfo from './modulesTest/billInfo'
+import remarksInfo from './modulesTest/remarksInfo'
+import goodsTable from './modulesTest/goodsTable'
+import rightContent from './modulesTest/rightContent'
+import ediMore from './modulesTest/ediMore'
+import sedOrder from './modulesTest/sedOrder'
+
+import {
+  BookingOrderGet,
+  BookingOrderSave,
+  getDjyTenantConfig,
+  GetAllData,
+  DeleteBookingOrder
+} from '@/api/modular/main/BookingLedger'
+import { mapActions, mapGetters } from 'vuex'
+import rules from './rulesTest'
+const initDetail = {
+  id: 0,
+  parentId: 0,
+  customername: '',
+  customerid: '',
+  carrier: 'CMA',
+  carrierid: 'CMA',
+  forwarder: '',
+  forwarderid: '',
+  pono: '',
+  mblno: '',
+  hblno: '',
+  epCode: '',
+  custno: '',
+  contractno: '',
+  vessel: '',
+  voyno: '',
+  voynoinner: '',
+  lanecode: '',
+  etd: '',
+  atd: '',
+  lanename: '',
+  shipagency: '',
+  shipagencyid: '',
+  lineName: '',
+  sale: '',
+  saleid: '',
+  op: '',
+  opid: '',
+  doc: '',
+  docid: '',
+  custservice: '',
+  custserviceid: '',
+  route: '',
+  routeid: '',
+  dzRemark: '',
+  czRemark: '',
+  shipper: '',
+  notifypartY2: '',
+  feeself: false,
+  consignee: '',
+  notifyparty: '',
+  yard: '',
+  yardid: '',
+  customser: '',
+  customserid: '',
+  trucker: '',
+  truckerid: '',
+  agentname: '',
+  agentid: '',
+  warehouse: '',
+  warehouseID: '',
+  eta: '',
+  closingdate: '',
+  closedocdate: '',
+  closevgmdate: '',
+  portload: '',
+  portloadid: '',
+  transport: '',
+  transportid: '',
+  portdischarge: '',
+  portdischargeid: '',
+  destination: '',
+  destinationid: '',
+  placedelivery: '',
+  placedeliveryid: '',
+  placereceipt: '',
+  placereceiptid: '',
+  pkgs: 0,
+  kindpkgs: '',
+  kgs: 0,
+  cbm: 0,
+  yardremark: '',
+  yardcontract: '',
+  yardcontracttel: '',
+  yardcontractemail: '',
+  pkgstotal: '',
+  kgstotal: '',
+  cbmtotal: '',
+  marks: '',
+  goodsname: '',
+  goodscode: '',
+  cargoid: '',
+  hscode: '',
+  description: '',
+  totalno: '',
+  issuetype: '',
+  issuedate: '',
+  issueplace: '',
+  issueplaceid: '',
+  nobill: '',
+  copynobill: '',
+  prepardat: '',
+  prepardatid: '',
+  payableat: '',
+  payableatid: '',
+  blfrt: '',
+  thirdpayaddr: '',
+  service: '',
+  reeferf: '',
+  tempset: '',
+  tempid: '',
+  tempmin: '',
+  tempmax: '',
+  humidity: '',
+  dclass: '',
+  dunno: '',
+  dpage: '',
+  dlabel: '',
+  linkman: '',
+  soremark: '',
+  siremark: '',
+  ctnInputs: [],
+  weituo: '',
+  freightpayer: '',
+  scaccode: '',
+  itncode: '',
+  iscontainersoc: 0,
+  bookingEDIExt: {
+    weiTuoFang: '',
+    ediAttn: '',
+    ediAttnTel: '',
+    ediAttnMail: '',
+    sendCode: '',
+    receiveCode: '',
+    amsConsignee: '',
+    amsNotifyParty: '',
+    opEName: '',
+    opTel: '',
+    opEmail: '',
+    goodsName: '',
+    orderRemark: '',
+    kingTareweight: '',
+    exRemark1: '',
+    exRemark2: '',
+    exRemark3: '',
+    exRemark4: '',
+    consigneeEdiCode: '',
+    shipperEdiCode: '',
+    notifyCdoe: '',
+    salerCode: '',
+    salerCodeName: '',
+    emanifestHbl: '',
+    masterBolIndicator: '',
+    masterBolIndicatorName: '',
+    s0CC0C: '',
+    ckhi: '',
+    cncm: '',
+    wncm: '',
+    acihbl: ''
+  },
+  hbList: [],
+  remark: [],
+  file: [],
+  log: [],
+  item: [],
+  statuslog: []
+}
+const bookingEDIExt = {
+  weiTuoFang: '',
+  ediAttn: '',
+  ediAttnTel: '',
+  ediAttnMail: '',
+  sendCode: '',
+  receiveCode: '',
+  amsConsignee: '',
+  amsNotifyParty: '',
+  opEName: '',
+  opTel: '',
+  opEmail: '',
+  goodsName: '',
+  orderRemark: '',
+  kingTareweight: '',
+  exRemark1: '',
+  exRemark2: '',
+  exRemark3: '',
+  exRemark4: '',
+  consigneeEdiCode: '',
+  shipperEdiCode: '',
+  notifyCdoe: '',
+  salerCode: '',
+  salerCodeName: '',
+  emanifestHbl: '',
+  masterBolIndicator: '',
+  masterBolIndicatorName: '',
+  s0CC0C: '',
+  ckhi: '',
+  cncm: '',
+  wncm: '',
+  acihbl: ''
+}
+export default {
+  name: 'BookingDetail',
+  inject: ['reload'],
+  components: {
+    operationArea,
+    basicInfo,
+    mailingInfo,
+    cargoInfo,
+    billInfo,
+    remarksInfo,
+    goodsTable,
+    rightContent,
+    ediMore,
+    sedOrder
+  },
+  data() {
+    return {
+      indexObject: {},
+      type: this.$route.query.type || 'CMA',
+      id: this.$route.query.id,
+      isCopy: this.$route.query.isCopy || false,
+      inPageLoading: false,
+      bookingDetails: JSON.parse(JSON.stringify(initDetail)),
+      tabBarStyle: {
+        background: '#fff',
+        padding: '0 20px',
+        marginBottom: '0'
+      },
+      tabBarStyle2: {
+        padding: '0'
+      },
+      excuteRules: [],
+      excuteRulesType: '',
+      isAdd: false,
+      moreStr: '',
+      tabActiveKey: '1',
+      historyData: {},
+      Showtabs: false,
+      inChildLoading: false,
+      scrollTop: 0,
+      checkFrom: [],
+      mainOrderActiveKey: '1-1',
+      basicRules: rules.basicRules,
+      mailingRules: rules.mailingRules,
+      cargoRules: rules.cargoRules,
+      billRules: rules.billRules,
+      remarksRules: rules.remarksRules,
+      ediRules: rules.ediRules,
+      hasEdiRules: false,
+      tableRules: rules.tableRules,
+      hasTableRules: false,
+      inAddSave: false,
+      hasHbList: false,
+      detailsLoadOver: false,
+      inGoodsSave: false,
+      ctnDefaultData: {},
+      defaultData: {}
+    }
+  },
+  watch: {
+    'mainOrderActiveKey': {
+      deep: true,
+      handler(nVal, oVal) {
+        if (nVal == '1-1') {
+          document.querySelector('#tab1').checked = true
+          document.querySelector('#tab2').checked = false
+        }
+        if (nVal == '2-2') {
+          document.querySelector('#tab2').checked = true
+          document.querySelector('#tab1').checked = false
+        }
+      }
+    },
+    '$route.query': {
+      deep: true,
+      handler(nVal, oVal) {
+        console.log(this.historyData)
+      }
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'bookingList',
+      'needSavePages',
+      'hasbookingDetail',
+      'bookingGridOptions',
+      'carrierList',
+      'yardList',
+      'packageList',
+      'issuetypeList',
+      'blfrtList',
+      'inBookingDetailsSave'
+    ])
+  },
+  created() {
+    this.init()
+  },
+  mounted() {
+    window.addEventListener(
+      'scroll',
+      () => {
+        this.scrollTop = document.getElementsByClassName('sidemenu')[0].scrollTop
+      },
+      true
+    )
+  },
+  beforeRouteUpdate(to, from, next) {
+    if (this.inAddSave) {
+      next()
+      return false
+    }
+    if (this.isCopy) {
+      const hisData = {
+        bookingDetails: this.bookingDetails,
+        excuteRules: this.excuteRules,
+        excuteRulesType: this.excuteRulesType,
+        isAdd: this.isAdd,
+        tabActiveKey: this.tabActiveKey,
+        mainOrderActiveKey: this.mainOrderActiveKey,
+        type: this.type,
+        isCopy: this.isCopy,
+        id: this.id
+      }
+      if (Object.keys(this.$refs).includes('sedOrder')) {
+        const secActive = this.$refs.sedOrder.$data.editIndex
+        hisData.secActive = secActive
+      }
+      this.$set(this.historyData, `copy-${this.id}`, hisData)
+    } else if (this.$route.query.addNum) {
+      const hisData = {
+        bookingDetails: this.bookingDetails,
+        excuteRules: this.excuteRules,
+        excuteRulesType: this.excuteRulesType,
+        isAdd: this.isAdd,
+        tabActiveKey: this.tabActiveKey,
+        mainOrderActiveKey: this.mainOrderActiveKey,
+        type: this.type,
+        isCopy: this.isCopy
+        // id: this.id
+      }
+      if (Object.keys(this.$refs).includes('sedOrder')) {
+        const secActive = this.$refs.sedOrder.$data.editIndex
+        hisData.secActive = secActive
+      }
+      this.$set(this.historyData, `add-${this.$route.query.addNum}`, hisData)
+    } else {
+      const hisData = {
+        bookingDetails: this.bookingDetails,
+        excuteRules: this.excuteRules,
+        excuteRulesType: this.excuteRulesType,
+        isAdd: this.isAdd,
+        tabActiveKey: this.tabActiveKey,
+        mainOrderActiveKey: this.mainOrderActiveKey,
+        type: this.type,
+        isCopy: this.isCopy,
+        id: this.id
+      }
+      if (Object.keys(this.$refs).includes('sedOrder')) {
+        const secActive = this.$refs.sedOrder.$data.editIndex
+        hisData.secActive = secActive
+      }
+      this.$set(this.historyData, this.id, hisData)
+    }
+    // this.mainOrderActiveKey = '1-1'
+    next()
+    setTimeout(() => {
+      this.getRouterHis()
+    }, 800)
+  },
+  beforeRouteLeave(to, from, next) {
+    this.inChildLoading = true
+    if (this.isCopy) {
+      const hisData = {
+        bookingDetails: this.bookingDetails,
+        excuteRules: this.excuteRules,
+        excuteRulesType: this.excuteRulesType,
+        isAdd: this.isAdd,
+        tabActiveKey: this.tabActiveKey,
+        mainOrderActiveKey: this.mainOrderActiveKey,
+        type: this.type,
+        isCopy: this.isCopy,
+        id: this.id
+      }
+      if (Object.keys(this.$refs).includes('sedOrder')) {
+        const secActive = this.$refs.sedOrder.$data.editIndex
+        hisData.secActive = secActive
+      }
+      this.$set(this.historyData, `copy-${this.id}`, hisData)
+    } else if (this.$route.query.addNum) {
+      const hisData = {
+        bookingDetails: this.bookingDetails,
+        excuteRules: this.excuteRules,
+        excuteRulesType: this.excuteRulesType,
+        isAdd: this.isAdd,
+        tabActiveKey: this.tabActiveKey,
+        mainOrderActiveKey: this.mainOrderActiveKey,
+        type: this.type,
+        isCopy: this.isCopy
+        // id: this.id
+      }
+      if (Object.keys(this.$refs).includes('sedOrder')) {
+        const secActive = this.$refs.sedOrder.$data.editIndex
+        hisData.secActive = secActive
+      }
+      this.$set(this.historyData, `add-${this.$route.query.addNum}`, hisData)
+    } else {
+      const hisData = {
+        bookingDetails: this.bookingDetails,
+        excuteRules: this.excuteRules,
+        excuteRulesType: this.excuteRulesType,
+        isAdd: this.isAdd,
+        tabActiveKey: this.tabActiveKey,
+        mainOrderActiveKey: this.mainOrderActiveKey,
+        type: this.type,
+        isCopy: this.isCopy,
+        id: this.id
+      }
+      if (Object.keys(this.$refs).includes('sedOrder')) {
+        const secActive = this.$refs.sedOrder.$data.editIndex
+        hisData.secActive = secActive
+      }
+      this.$set(this.historyData, this.id, hisData)
+    }
+    if (this.hasbookingDetail) {
+      this.bookingDetails = {}
+    }
+    next()
+    setTimeout(() => {
+      this.inChildLoading = false
+    }, 2000)
+  },
+  beforeRouteEnter(to, from, next) {
+    next(vm => {
+      vm.getRouterHis()
+    })
+  },
+  methods: {
+    frompre(data) {
+      console.log('到达index', data)
+      this.$refs.basicInfo._data.frompre = data.data1
+      this.$refs.basicInfo.refresh()
+      // this.$refs.goodsTable.tableData = data.data2
+    },
+    ...mapActions(['setNeedSavePages', 'setBookingList', 'setBookingGridOptions', 'setInBookingDetailsSave']),
+    getRouterHis() {
+      this.inChildLoading = true
+      const newId = this.$route.query.id ? this.$route.query.id.toString() : ''
+      if (Object.keys(this.historyData).includes(`copy-${newId}`) && this.$route.query.isCopy === 'true') {
+        if (!this.$route.query.copyId) {
+          const $data = JSON.parse(JSON.stringify(this.historyData[`copy-${newId}`]))
+          this.bookingDetails = $data.bookingDetails
+          this.excuteRules = $data.excuteRules
+          this.excuteRulesType = $data.excuteRulesType
+          this.isAdd = $data.isAdd
+          this.tabActiveKey = $data.tabActiveKey
+          this.mainOrderActiveKey = $data.mainOrderActiveKey
+        } else {
+          const $data = JSON.parse(JSON.stringify(this.historyData[`copyMore-${newId}`]))
+          this.bookingDetails = $data.bookingDetails
+          this.excuteRules = $data.excuteRules
+          this.excuteRulesType = $data.excuteRulesType
+          this.isAdd = $data.isAdd
+          this.tabActiveKey = $data.tabActiveKey
+          this.mainOrderActiveKey = $data.mainOrderActiveKey
+        }
+        this.id = this.$route.query.id
+        this.isCopy = this.$route.query.isCopy
+        this.inPageLoading = false
+        setTimeout(() => {
+          if (this.bookingDetails.hbList && this.bookingDetails.hbList.length > 0) {
+            this.Showtabs = true
+            if (Object.keys(this.$refs).includes('sedOrder')) {
+              this.$refs.sedOrder.init(this.bookingDetails.hbList)
+            }
+          } else {
+            this.Showtabs = false
+            if (Object.keys(this.$refs).includes('sedOrder')) {
+              this.$refs.sedOrder.init([])
+            }
+          }
+          if (Object.keys(this.$refs).includes('goodsTable')) {
+            this.$refs.goodsTable.init()
+          }
+        }, 200)
+        setTimeout(() => {
+          const key = this.$route.fullPath
+          const detailsChange = Object.keys(this.needSavePages).includes(key)
+            ? !!this.needSavePages[key].details
+            : false
+          this.checkSaveFun({ type: 'details', hasChange: detailsChange })
+
+          const hbListChange = !!this.needSavePages[key].hbList
+          this.checkSaveFun({ type: 'hbList', hasChange: hbListChange })
+          this.inChildLoading = false
+        }, 500)
+        this.$forceUpdate()
+      } else if (
+        Object.keys(this.historyData).includes(`add-${this.$route.query.addNum}`) &&
+        this.$route.query.addNum
+      ) {
+        const $data = JSON.parse(JSON.stringify(this.historyData[`add-${this.$route.query.addNum}`]))
+        this.bookingDetails = $data.bookingDetails
+        this.excuteRules = $data.excuteRules
+        this.excuteRulesType = $data.excuteRulesType
+        this.isAdd = $data.isAdd
+        this.tabActiveKey = $data.tabActiveKey
+        this.mainOrderActiveKey = $data.mainOrderActiveKey
+        this.isCopy = this.$route.query.isCopy
+        this.inPageLoading = false
+        console.log(this.bookingDetails, 12312323)
+        if (this.isCopy && !$data.isCopy) {
+          this.bookingDetails.mblno = ''
+        }
+        setTimeout(() => {
+          if (this.bookingDetails.hbList && this.bookingDetails.hbList.length > 0) {
+            this.Showtabs = true
+            if (Object.keys(this.$refs).includes('sedOrder')) {
+              this.$refs.sedOrder.init(this.bookingDetails.hbList)
+            }
+          } else {
+            this.Showtabs = false
+            if (Object.keys(this.$refs).includes('sedOrder')) {
+              this.$refs.sedOrder.init([])
+            }
+          }
+          if (Object.keys(this.$refs).includes('goodsTable')) {
+            this.$refs.goodsTable.init()
+          }
+        }, 200)
+        setTimeout(() => {
+          const key = this.$route.fullPath
+
+          const detailsChange = Object.keys(this.needSavePages).includes(key)
+            ? !!this.needSavePages[key].details
+            : false
+          this.checkSaveFun({ type: 'details', hasChange: detailsChange })
+
+          const hbListChange = !!this.needSavePages[key].hbList
+          this.checkSaveFun({ type: 'hbList', hasChange: hbListChange })
+          this.inChildLoading = false
+        }, 500)
+        this.$forceUpdate()
+      } else if (Object.keys(this.historyData).includes(newId)) {
+        this.id = !this.$route.query.isCopy ? this.$route.query.id : 0
+        const $data = JSON.parse(JSON.stringify(this.historyData[newId]))
+        this.isCopy = this.$route.query.isCopy
+        this.excuteRules = $data.excuteRules
+        this.excuteRulesType = $data.excuteRulesType
+        this.isAdd = $data.isAdd
+        this.tabActiveKey = $data.tabActiveKey
+        this.mainOrderActiveKey = $data.mainOrderActiveKey
+        this.inPageLoading = false
+        if ($data.bookingDetails.goodsStatus && this.isCopy) {
+          $data.bookingDetails.goodsStatus.forEach(item => {
+            delete item.isPublic
+            delete item.finishUserId
+            delete item.finishTime
+            delete item.finishUser
+            delete item.remark
+            delete item.extData
+          })
+        }
+        if (this.isCopy && !$data.isCopy) {
+          const copyData = {
+            customername: $data.bookingDetails.customername,
+            portloadid: $data.bookingDetails.portloadid,
+            carrierid: $data.bookingDetails.carrierid,
+            carrier: $data.bookingDetails.carrier,
+            portload: $data.bookingDetails.portload,
+            issueplace: $data.bookingDetails.issueplace,
+            prepardat: $data.bookingDetails.prepardat,
+            route: $data.bookingDetails.route,
+            shippingMethod: $data.bookingDetails.shippingMethod,
+            shipper: $data.bookingDetails.shipper,
+            consignee: $data.bookingDetails.consignee,
+            notifyparty: $data.bookingDetails.notifyparty,
+            goodsStatus: $data.bookingDetails.goodsStatus
+          }
+          this.bookingDetails = { ...JSON.parse(JSON.stringify(initDetail)), ...copyData }
+        } else {
+          this.bookingDetails = $data.bookingDetails
+          this.getRightAll()
+        }
+        setTimeout(() => {
+          if (this.bookingDetails.hbList && this.bookingDetails.hbList.length > 0) {
+            this.Showtabs = true
+            if (Object.keys(this.$refs).includes('sedOrder')) {
+              this.$refs.sedOrder.init(this.bookingDetails.hbList)
+            }
+          } else {
+            this.Showtabs = false
+            if (Object.keys(this.$refs).includes('sedOrder')) {
+              this.$refs.sedOrder.init([])
+            }
+          }
+          if (Object.keys(this.$refs).includes('goodsTable')) {
+            this.$refs.goodsTable.init()
+          }
+        }, 200)
+        setTimeout(() => {
+          const key = this.$route.fullPath
+
+          const detailsChange = Object.keys(this.needSavePages).includes(key)
+            ? !!this.needSavePages[key].details
+            : false
+          this.checkSaveFun({ type: 'details', hasChange: detailsChange })
+
+          const hbListChange = !!this.needSavePages[key].hbList
+          this.checkSaveFun({ type: 'hbList', hasChange: hbListChange })
+          this.inChildLoading = false
+        }, 500)
+        this.$forceUpdate()
+      } else {
+        this.id = this.$route.query.id
+        this.type = this.$route.query.type
+        this.isCopy = this.$route.query.isCopy || false
+        this.tabActiveKey = '1'
+        this.mainOrderActiveKey = '1-1'
+        this.$forceUpdate()
+        this.init()
+        setTimeout(() => {
+          const key = this.$route.fullPath
+
+          const detailsChange = Object.keys(this.needSavePages).includes(key)
+            ? !!this.needSavePages[key].details
+            : false
+          this.checkSaveFun({ type: 'details', hasChange: detailsChange })
+
+          const hbListChange = !!this.needSavePages[key].hbList
+          this.checkSaveFun({ type: 'hbList', hasChange: hbListChange })
+          this.inChildLoading = false
+        }, 500)
+      }
+      this.$refs.basicInfo.$refs.basicFrom.clearValidate()
+      this.$refs.mailingInfo.$refs.mailingFrom.clearValidate()
+      this.$refs.cargoInfo.$refs.cargoFrom.clearValidate()
+      // this.$refs.billInfo.$refs.billFrom.clearValidate()
+      // this.$refs.remarksInfo.$refs.remarkFrom.clearValidate()
+    },
+    init() {
+      this.bookingDetails = JSON.parse(JSON.stringify(initDetail))
+      this.excuteRules = []
+      this.excuteRulesType = ''
+      this.Showtabs = false
+      if (this.id) {
+        this.isAdd = false
+        this.getDetail()
+        this.getRightAll()
+      } else {
+        this.isAdd = true
+        this.detailsLoadOver = false
+        this.bookingDetails.carrierid = this.type
+        this.bookingDetails.carrier = this.type
+        this.getDefaultVal()
+        setTimeout(() => {
+          if (Object.keys(this.$refs).includes('sedOrder')) {
+            this.$refs.sedOrder.init([])
+          }
+          if (Object.keys(this.$refs).includes('goodsTable')) {
+            this.$refs.goodsTable.init()
+          }
+          this.detailsLoadOver = true
+        }, 200)
+      }
+      this.getDjyTenantConfig()
+    },
+
+    getDefaultVal() {
+      getDjyTenantConfig({
+        type: 'booking_default_value'
+      })
+        .then(res => {
+          const defaultData = JSON.parse(res.data.configJson)
+          this.defaultData = defaultData
+          const Fn = item => {
+            const field = item.field.split('.')
+            let label = field[1].toLowerCase()
+            if (field[0] === 'order') {
+              if (['EPCODE', 'DZREMARK', 'CZREMARK', 'Warehouse'].includes(field[1])) {
+                label = this.emnuDefaultLabel(field[1])
+              }
+              if (Object.keys(initDetail).includes(label)) {
+                initDetail[label] = item.code
+                this.bookingDetails[label] =
+                  this.bookingDetails[label] && this.bookingDetails[label] !== ''
+                    ? this.bookingDetails[label]
+                    : item.code
+              }
+            } else if (field[0] === 'ctn') {
+              if (
+                [
+                  'CTNALL',
+                  'CTNNUM',
+                  'CNTRNO',
+                  'SEALNO',
+                  'PKGS',
+                  'KINDPKGS',
+                  'KGS',
+                  'CBM',
+                  'TAREWEIGHT',
+                  'WEIGHTYPE',
+                  'WEIGHKGS'
+                ].includes(field[1])
+              ) {
+                this.ctnDefaultData[label] = item.code
+                this.bookingDetails.ctnInputs.map((citem, cindex) => {
+                  this.bookingDetails.ctnInputs[cindex][label] =
+                    citem[label] && citem[label] !== '' ? citem[label] : item.code
+                })
+              }
+            } else if (field[0] === 'edi') {
+              const typeArr1 = [
+                'WeiTuoFang',
+                'SendCode',
+                'ReceiveCode',
+                'NotifyCdoe',
+                'SalerCode',
+                'MasterBolIndicator',
+                'EmanifestHbl',
+                'ConsigneeEdiCode',
+                'ShipperEdiCode',
+                'OpEName',
+                'OpTel',
+                'OpEmail',
+                'GoodsName',
+                'MasterBolIndicatorName',
+                'SalerCodeName',
+                'OrderRemark',
+                'ExRemark1',
+                'ExRemark2',
+                'ExRemark3',
+                'ExRemark4',
+                'KingTareweight'
+              ]
+              const typeArr2 = ['EDIAttn', 'EDIAttnTel', 'EDIAttnMail', 'AMSConsignee', 'AMSNotifyParty', 'CNPTNo']
+              const typeArr3 = ['ACIHBL', 'CKHI', 'CNCM', 'WNCM']
+              const typeArr4 = ['S0CC0C']
+              if (typeArr1.includes(field[1])) {
+                label = field[1].substr(0, 1).toLowerCase() + field[1].substr(1, field[1].length - 1)
+              } else if (typeArr3.includes(field[1])) {
+                label = field[1].toLowerCase()
+              } else if (typeArr2.includes(field[1]) || typeArr4.includes(field[1])) {
+                label = this.emnuDefaultLabel(field[1])
+              }
+              if (label == 'orderRemark') {
+                console.log(label, item)
+              }
+              initDetail.bookingEDIExt[label] = item.code
+              bookingEDIExt[label] = item.code
+              console.log(
+                this.bookingDetails.bookingEDIExt[label] && this.bookingDetails.bookingEDIExt[label] !== '',
+                "this.bookingDetails.bookingEDIExt[label] && this.bookingDetails.bookingEDIExt[label] !== ''"
+              )
+              this.bookingDetails.bookingEDIExt[label] = item.code
+              console.log(label, item.code)
+              // this.bookingDetails.bookingEDIExt[label] =
+              //   this.bookingDetails.bookingEDIExt[label] && this.bookingDetails.bookingEDIExt[label] !== ''
+              //     ? this.bookingDetails.bookingEDIExt[label]
+              //     : item.code
+            }
+          }
+          defaultData.map((item, index) => {
+            if (item.Carrier) {
+              console.log(this.bookingDetails.carrierid, item.Carrier)
+              if (this.bookingDetails.carrierid == item.Carrier) {
+                Fn(item)
+              } else {
+                item.code = ''
+                Fn(item)
+              }
+            } else {
+              console.log(item, 908098908)
+              Fn(item)
+            }
+          })
+          // this.$forceUpdate()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    emnuDefaultLabel(field) {
+      switch (field) {
+        case 'EPCODE':
+          return 'epCode'
+        case 'DZREMARK':
+          return 'dzRemark'
+        case 'CZREMARK':
+          return 'czRemark'
+        case 'Warehouse':
+          return 'warehouse'
+        case 'S0CC0C':
+          return 's0CC0C'
+        case 'EDIAttn':
+          return 'ediAttn'
+        case 'EDIAttnTel':
+          return 'ediAttnTel'
+        case 'EDIAttnMail':
+          return 'ediAttnMail'
+        case 'AMSConsignee':
+          return 'amsConsignee'
+        case 'AMSNotifyParty':
+          return 'amsNotifyParty'
+        case 'CNPTNo':
+          return 'cnptNo'
+      }
+    },
+    handleRefshRight(data) {
+      this.bookingDetails.startETA = data.startETA
+      this.bookingDetails.startATA = data.startATA
+      this.bookingDetails.ygtETD = data.ygtETD
+      this.bookingDetails.atd = data.atd
+    },
+    getDjyTenantConfig() {
+      getDjyTenantConfig({
+        type: 'booking_form_col'
+      })
+        .then(res => {
+          if (res.data && JSON.parse(res.data.configJson).length) {
+            this.checkFrom = JSON.parse(res.data.configJson) || []
+          } else {
+            this.checkFrom = []
+          }
+          Object.keys(this.basicRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.basicRules[item][0].required = true
+            }
+          })
+          Object.keys(this.mailingRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.mailingRules[item][0].required = true
+            }
+          })
+          Object.keys(this.cargoRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.cargoRules[item][0].required = true
+            }
+          })
+          // Object.keys(this.billRules).map((item, index) => {
+          //   if (this.checkFrom.includes(item)) {
+          //     this.billRules[item][0].required = true
+          //   }
+          // })
+          Object.keys(this.remarksRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.remarksRules[item][0].required = true
+            }
+          })
+          Object.keys(this.ediRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.ediRules[item][0].required = true
+            }
+            if (this.checkFrom.includes('bookingEDIExt.scaccode')) {
+              this.ediRules['scaccode'][0].required = true
+            }
+            if (this.checkFrom.includes('bookingEDIExt.itncode')) {
+              this.ediRules['itncode'][0].required = true
+            }
+            if (this.checkFrom.includes('bookingEDIExt.freightpayer')) {
+              this.ediRules['freightpayer'][0].required = true
+            }
+          })
+          Object.keys(this.tableRules).map((item, index) => {
+            if (this.checkFrom.includes(item)) {
+              this.tableRules[item].required = true
+              this.hasTableRules = true
+            }
+          })
+          this.$forceUpdate()
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    enmuCarrier(type) {
+      switch (type) {
+        case 'CMA':
+          return '法国达飞'
+        case 'ONE':
+          return '网联船务'
+        case 'ESL':
+          return '阿联酋航运'
+        case 'MSC':
+          return '地中海航运'
+        case 'PIL':
+          return '太平'
+        case 'TSL':
+          return '德祥'
+        case 'YML':
+          return '阳明'
+        case 'SINOLINE':
+          return '中外运集装箱'
+        default:
+          return ''
+      }
+    },
+
+    getDetail() {
+      if (this.inPageLoading) {
+        return false
+      }
+      this.inPageLoading = true
+      this.inChildLoading = true
+      this.detailsLoadOver = false
+      this.$message.loading({ content: '加载中...' })
+      BookingOrderGet({
+        id: this.id
+      })
+        .then(res => {
+          this.$message.destroy()
+          this.setDeatilsFun(res)
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    setDeatilsFun(res, overSet = false) {
+      if (!res.data.bookingEDIExt) {
+        res.data.bookingEDIExt = bookingEDIExt
+      }
+      if (res.data.ctnInputs.length > 0) {
+        res.data.ctnInputs.map((item, index) => {
+          if (item.weightype === '累加') {
+            item.weighkgs = item.weighkgs
+              ? item.weighkgs
+              : this.calc(Number(item['kgs']), Number(item['tareweight']), '+')
+          }
+        })
+      }
+      if (res.data.ctnInputs.length > 0) {
+        res.data.ctnInputs.map((item, index) => {
+          item.pkgs = item.pkgs ? item.pkgs : ''
+          item.kgs = item.kgs ? item.kgs : ''
+          item.cbm = item.cbm ? item.cbm : ''
+          item.tareweight = item.tareweight ? item.tareweight : ''
+          item.weighkgs = item.weighkgs ? item.weighkgs : ''
+        })
+      }
+      if (res.data.hbList.length > 0) {
+        res.data.hbList.map((item, index) => {
+          const newBookingEDIExt = { ...JSON.parse(JSON.stringify(bookingEDIExt)), ...item.bookingEDIExt }
+          item = { ...JSON.parse(JSON.stringify(initDetail)), ...item, ...{ bookingEDIExt: newBookingEDIExt } }
+          if (item.ctnInputs.length > 0) {
+            item.ctnInputs.map((citem, cindex) => {
+              citem.pkgs = citem.pkgs ? citem.pkgs : ''
+              citem.kgs = citem.kgs ? citem.kgs : ''
+              citem.cbm = citem.cbm ? citem.cbm : ''
+              citem.tareweight = citem.tareweight ? citem.tareweight : ''
+              citem.weighkgs = citem.weighkgs ? citem.weighkgs : ''
+            })
+          }
+          res.data.hbList[index] = item
+        })
+      }
+      res.data.feeself = !!res.data.feeself
+      let newData = res.data
+      if (this.$route.query.isCopy && !overSet) {
+        delete res.data.id
+        const copyData = {
+          customername: res.data.customername,
+          portloadid: res.data.portloadid,
+          portload: res.data.portload,
+          issueplace: res.data.issueplace,
+          prepardat: res.data.prepardat,
+          route: res.data.route,
+          shippingMethod: res.data.shippingMethod,
+          shipper: res.data.shipper,
+          consignee: res.data.consignee,
+          notifyparty: res.data.notifyparty
+        }
+        newData = { ...JSON.parse(JSON.stringify(initDetail)), ...copyData }
+      }
+      const $BookingEDIExt = { ...JSON.parse(JSON.stringify(bookingEDIExt)), ...res.data.bookingEDIExt }
+      this.$set(this, 'bookingDetails', { ...this.bookingDetails, ...newData, ...{ bookingEDIExt: $BookingEDIExt } })
+      if (this.$route.query.isCopy && this.$route.query.copyId) {
+        const hisData = {
+          bookingDetails: this.bookingDetails,
+          excuteRules: this.excuteRules,
+          excuteRulesType: this.excuteRulesType,
+          isAdd: this.isAdd,
+          tabActiveKey: this.tabActiveKey,
+          mainOrderActiveKey: this.mainOrderActiveKey,
+          type: this.type,
+          isCopy: this.isCopy,
+          id: this.id
+        }
+        if (Object.keys(this.$refs).includes('sedOrder')) {
+          const secActive = this.$refs.sedOrder.$data.editIndex
+          hisData.secActive = secActive
+        }
+        this.$set(this.historyData, `copyMore-${this.id}`, hisData)
+      }
+      // this.getDefaultVal()
+      this.inPageLoading = false
+      setTimeout(() => {
+        setTimeout(() => {
+          this.checkSaveFun({ type: 'details', hasChange: false })
+        }, 600)
+        this.detailsLoadOver = true
+        this.inChildLoading = false
+        this.$message.success({ content: '加载完成' })
+        if (res.data.hbList && res.data.hbList.length > 0) {
+          this.Showtabs = true
+        }
+        if (!this.hasHbList && this.bookingDetails.hbList.length > 0) {
+          this.$refs.sedOrder.init(this.bookingDetails.hbList)
+          this.hasHbList = true
+        } else {
+          this.$refs.sedOrder.init([])
+        }
+        if (this.bookingDetails.ctnInputs.length > 0) {
+          this.$refs.goodsTable.init()
+        }
+      }, 1200)
+      this.$forceUpdate()
+    },
+
+    getRightAll() {
+      GetAllData({
+        bookingId: this.$route.query.id
+      })
+        .then(res => {
+          if (res.success) {
+            this.$set(this, 'bookingDetails', { ...this.bookingDetails, ...res.data })
+          } else {
+            console.log(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    upDateRightFun() {
+      this.getRightAll()
+    },
+
+    changeDetailFun(data) {
+      const { detail, type } = data
+      if (this.ifCompare(this.bookingDetails, detail) && !this.inChildLoading) {
+        this.checkSaveFun({ type: 'details', hasChange: true })
+      }
+      this.bookingDetails = detail
+    },
+
+    ifCompare(object1, object2) {
+      var o1keys = Object.keys(object1)
+      var o2keys = Object.keys(object2)
+      if (o2keys.length !== o1keys.length) return false
+      for (let i = 0; i <= o1keys.length - 1; i++) {
+        const key = o1keys[i]
+        if (!o2keys.includes(key)) return false
+        if (object2[key] !== object1[key]) return false
+      }
+      return true
+    },
+
+    saveFun() {
+      this.bookingOrderUpdate()
+    },
+    bookingOrderUpdate() {
+      let basicFrom = true
+      let basicObject = true
+      this.$refs.basicInfo.$refs.basicFrom.validate((valid, object) => {
+        basicFrom = valid
+        basicObject = object
+      })
+      let mailingFrom = true
+      this.$refs.mailingInfo.$refs.mailingFrom.validate(valid => {
+        mailingFrom = valid
+      })
+      let cargoFrom = true
+      this.$refs.cargoInfo.$refs.cargoFrom.validate(valid => {
+        cargoFrom = valid
+      })
+      // let billFrom = true
+      // this.$refs.billInfo.$refs.billFrom.validate(valid => {
+      //   billFrom = valid
+      // })
+      // let remarksFrom = true
+      // this.$refs.remarksInfo.$refs.remarkFrom.validate(valid => {
+      //   remarksFrom = valid
+      // })
+      if (!basicFrom && mailingFrom && cargoFrom) {
+        if (Object.keys(basicObject).length === 1 &&
+        Object.keys(basicObject)[0] === 'zhanCangFlag') {
+          this.$message.error('保存失败，是否占舱未填写')
+          return false
+        }
+      }
+      if ((!basicFrom || !mailingFrom || !cargoFrom) &&
+      (Object.keys(basicObject)[0] !== 'zhanCangFlag' && Object.keys(basicObject).length !== 1)) {
+        this.$message.error('保存失败，请检查必填项')
+        return false
+      }
+      if (this.$refs.ediMore) {
+        let ediFrom = true
+        this.$refs.ediMore.$refs.ediFrom.validate(valid => {
+          ediFrom = valid
+        })
+        if (!ediFrom) {
+          this.mainOrderActiveKey = '2-2'
+          this.$message.error('保存失败，请检查EDI必填项')
+          return false
+        }
+      } else {
+        Object.keys(this.ediRules).map((item, index) => {
+          if (this.checkFrom.includes(item) && !this.bookingDetails[item.split('.')[0]][item.split('.')[1]]) {
+            this.hasEdiRules = true
+          }
+        })
+        if (this.hasEdiRules) {
+          this.mainOrderActiveKey = '2-2'
+          this.$message.error('保存失败，请检查EDI必填项')
+          return false
+        }
+      }
+
+      if (this.hasTableRules && this.bookingDetails.shippingMethod !== '拼箱' && this.bookingDetails.carrierid !== 'GGPX') {
+        if (this.bookingDetails.ctnInputs.length === 0) {
+          this.$message.error('保存失败，箱信息未填写')
+          return false
+        }
+        let tableErrTip = ''
+        this.bookingDetails.ctnInputs.map((item, index) => {
+          Object.keys(item).map((label, lindex) => {
+            if (this.tableRules[label] && this.tableRules[label].required && !item[label]) {
+              tableErrTip = `${tableErrTip}  序号${index + 1}中${this.tableRules[label].title}未填写,`
+            }
+          })
+        })
+        if (tableErrTip !== '') {
+          this.$message.error(`保存失败， 箱信息错误： ${tableErrTip.substr(0, tableErrTip.length - 1)}`, 3)
+          return false
+        }
+      }
+      const FnOk = () => {
+        const _data = JSON.parse(JSON.stringify(that.bookingDetails))
+        delete _data.hbList
+        this.setInBookingDetailsSave(true)
+        console.log('=== 保存，当前订舱列表 ===', this.needSavePages)
+        if (this.isCopy) {
+          delete _data.bookingno
+          _data.ctnInputs.map((item, index) => {
+            delete item.id
+          })
+        }
+        this.$message.loading({ content: '保存中, 请勿切换页面...' })
+        console.log('== vuex 开始保存==', this.inBookingDetailsSave)
+        BookingOrderSave(_data)
+          .then(res => {
+            if (res.success) {
+              this.$message.destroy()
+              that.$message.success('保存成功')
+              if (that.isAdd || this.isCopy) {
+                this.isCopy = false
+                this.isAdd = false
+                this.inAddSave = true
+                this.id = res.data.id
+                const newBookingList = JSON.parse(JSON.stringify(this.bookingList))
+                const newBookingGridOptions = JSON.parse(JSON.stringify(this.bookingGridOptions))
+                newBookingGridOptions.data = [...[res.data], ...newBookingGridOptions.data]
+                this.$set(newBookingList, res.data.id, res.data)
+                this.setBookingList(newBookingList)
+                this.setBookingGridOptions(newBookingGridOptions)
+                that.$router.replace({
+                  name: 'BookingDetail',
+                  query: {
+                    id: res.data.id,
+                    type: res.data.carrierid,
+                    noOpenTab: true,
+                    mblno: res.data.mblno
+                  }
+                })
+                this.setDeatilsFun(res, true)
+                setTimeout(() => {
+                  this.inAddSave = false
+                  this.getRightAll()
+                  this.$refs.rightContent.init()
+                }, 2000)
+              } else if (that.$route.query.mblno === that.bookingDetails.mblno) {
+                that.isCopy = false
+                that.isAdd = false
+                this.setDeatilsFun(res, true)
+                that.checkSaveFun({ type: 'hbList', hasChange: false })
+                that.checkSaveFun({ type: 'details', hasChange: false })
+                const newBookingList = JSON.parse(JSON.stringify(this.bookingList))
+                const newBookingGridOptions = JSON.parse(JSON.stringify(this.bookingGridOptions))
+                this.$set(newBookingList, res.data.id, res.data)
+                const arr = newBookingGridOptions.data.map((item, index) => {
+                  return item.id
+                })
+                const index = arr.indexOf(res.data.id)
+                newBookingGridOptions.data.splice(index, 1, res.data)
+                this.setBookingList(newBookingList)
+                this.setBookingGridOptions(newBookingGridOptions)
+              } else {
+                that.isCopy = false
+                that.isAdd = false
+                this.inAddSave = true
+                this.id = res.data.id
+                this.setDeatilsFun(res, true)
+                const newBookingList = JSON.parse(JSON.stringify(this.bookingList))
+                const newBookingGridOptions = JSON.parse(JSON.stringify(this.bookingGridOptions))
+                this.$set(newBookingList, res.data.id, res.data)
+                const arr = newBookingGridOptions.data.map((item, index) => {
+                  return item.id
+                })
+                const index = arr.indexOf(res.data.id)
+                newBookingGridOptions.data.splice(index, 1, res.data)
+                this.setBookingList(newBookingList)
+                this.setBookingGridOptions(newBookingGridOptions)
+                that.$router.replace({
+                  name: 'BookingDetail',
+                  query: {
+                    id: res.data.id,
+                    type: res.data.carrierid,
+                    noOpenTab: true,
+                    mblno: res.data.mblno
+                  }
+                })
+              }
+              that.setInBookingDetailsSave(false)
+              console.log('== vuex 结束保存==', this.inBookingDetailsSave)
+              that.$forceUpdate()
+            } else {
+              that.setInBookingDetailsSave(false)
+              console.log('== vuex 结束保存==', this.inBookingDetailsSave)
+              if (typeof res.message === 'string') {
+                that.$message.error(res.message)
+              } else {
+                that.$message.error('保存失败')
+              }
+            }
+          })
+          .catch(err => {
+            console.log(err)
+          })
+      }
+      let pkgs = 0
+      let kgs = 0
+      let cbm = 0
+      let kindpkgs = ''
+      this.bookingDetails.ctnInputs.forEach(item => {
+        if (parseFloat(item.pkgs)) {
+          pkgs = pkgs + parseFloat(item.pkgs)
+        }
+        if (parseFloat(item.kgs)) {
+          kgs = kgs + parseFloat(item.kgs)
+        }
+        if (parseFloat(item.cbm)) {
+          cbm = cbm + parseFloat(item.cbm)
+        }
+        kindpkgs = item.kindpkgs
+      })
+      const that = this
+      const confirm = text => {
+        this.$confirm({
+          title: `${text}不一致，是否继续?`,
+          okText: '是',
+          okType: 'danger',
+          cancelText: '否',
+          onOk() {
+            FnOk()
+          },
+          onCancel() {
+            return false
+          },
+          class: 'test'
+        })
+      }
+      let WText = ''
+      if (parseFloat(pkgs) != parseFloat(this.bookingDetails.pkgs)) {
+        if (WText) {
+          WText = `${WText},件数`
+        } else {
+          WText = `件数`
+        }
+      }
+      if (parseFloat(kgs).toFixed(2) != parseFloat(this.bookingDetails.kgs).toFixed(2)) {
+        if (WText) {
+          WText = `${WText},重量`
+        } else {
+          WText = `重量`
+        }
+      }
+      if (parseFloat(cbm).toFixed(2) != parseFloat(this.bookingDetails.cbm).toFixed(2)) {
+        if (WText) {
+          WText = `${WText},尺码`
+        } else {
+          WText = `尺码`
+        }
+      }
+      if (kindpkgs !== this.bookingDetails.kindpkgs) {
+        if (WText) {
+          WText = `${WText},包装`
+        } else {
+          WText = `包装`
+        }
+      }
+      if (WText) {
+        confirm(WText)
+      } else {
+        FnOk()
+      }
+    },
+
+    spliceMorefun(str) {
+      this.moreStr = str
+    },
+
+    changeMainTab(e) {
+      this.mainOrderActiveKey = e
+    },
+
+    refreshPage() {
+      this.init()
+      this.$refs.rightContent.init()
+    },
+    getRules(data) {
+      const { rows, type } = data
+      this.excuteRules = rows
+      this.excuteRulesType = type
+    },
+    changePageFun(type) {
+      const _this = this
+      const key = this.$route.fullPath
+      if (
+        Object.keys(this.needSavePages).includes(key) &&
+        (this.needSavePages[key].details || this.needSavePages[key].hbList)
+      ) {
+        this.$confirm({
+          title: '请确认无未保存数据！',
+          content: '当点击确定按钮时，此页面 将会关闭。',
+          onOk() {
+            _this.changePage(type)
+            const $data = _this.needSavePages
+            delete $data[key]
+            _this.setNeedSavePages($data)
+          },
+          onCancel() { }
+        })
+      } else {
+        this.changePage(type)
+      }
+    },
+    changePage(type) {
+      const nowId = this.$route.query.id
+      const arr = Object.keys(this.bookingList)
+      const index = arr.indexOf(nowId.toString())
+      if (type === 'prev') {
+        if (index < 1) {
+          this.$message.error('当前已经是第一票')
+          return false
+        }
+        const prevId = arr[index - 1]
+        const prevType = this.bookingList[prevId].carrierid
+
+        const $data = this.needSavePages
+        delete $data[this.$route.fullPath]
+        this.setNeedSavePages($data)
+        this.$router.replace({
+          name: 'BookingDetail',
+          query: { id: prevId, type: prevType, mblno: this.bookingList[prevId].mblno, noOpenTab: true }
+        })
+      } else {
+        if (index === arr.length - 1) {
+          this.$message.error('当前已经是最后一票')
+          return false
+        }
+        const nextId = arr[index + 1]
+        const nextType = this.bookingList[nextId].carrierid
+        const $data = this.needSavePages
+        delete $data[this.$route.fullPath]
+        this.setNeedSavePages($data)
+        this.$router.replace({
+          name: 'BookingDetail',
+          query: { id: nextId, type: nextType, mblno: this.bookingList[nextId].mblno, noOpenTab: true }
+        })
+      }
+    },
+    handleReload() {
+      this.reload()
+    },
+    copyBookingFun() {
+      this.$router.push({
+        name: 'BookingDetail',
+        query: { id: this.id, isCopy: true, type: this.bookingDetails.carrierid }
+      })
+    },
+    changeTab(e) {
+      const _this = this
+      this.tabActiveKey = e
+      setTimeout(() => {
+        _this.$refs.sedOrder.init(_this.bookingDetails.hbList)
+      }, 100)
+    },
+    addSedList() {
+      if (this.isAdd) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      const data = JSON.parse(JSON.stringify(this.bookingDetails))
+      data.isNoSave = true
+      data.hblno = ''
+      data.shipper = ''
+      data.consignee = ''
+      data.notifyparty = ''
+      data.issuetype = ''
+      data.blfrt = ''
+      if (data.ctnInputs.length > 0) {
+        data.ctnInputs.map((item, index) => {
+          delete item.id
+        })
+      }
+
+      this.bookingDetails.hbList = [data]
+      this.tabActiveKey = '2'
+      this.Showtabs = true
+      setTimeout(() => {
+        this.$refs.sedOrder.init(this.bookingDetails.hbList)
+      }, 200)
+    },
+    changeHBFun(data) {
+      const arr = []
+      data.map((item, index) => {
+        arr.push(item.isNoSave)
+      })
+      if (arr.includes(true)) {
+        this.$set(this.bookingDetails, 'hbList', data)
+        this.checkSaveFun({ type: 'hbList', hasChange: true })
+      } else {
+        this.checkSaveFun({ type: 'hbList', hasChange: false })
+      }
+    },
+    checkSaveFun(data) {
+      if (this.inGoodsSave) {
+        return false
+      }
+      const key = this.$route.fullPath
+      const lastPages = this.needSavePages
+      const $data = this.needSavePages[key] || {}
+      if (!this.detailsLoadOver) {
+        data.hasChange = false
+      }
+      if (data.type === 'details') {
+        this.$set($data, 'details', data.hasChange)
+      } else if (data.type === 'hbList') {
+        this.$set($data, 'hbList', data.hasChange)
+      }
+      this.$set(lastPages, key, $data)
+      this.setNeedSavePages(lastPages)
+    },
+    inGoodsSaveFun(data) {
+      this.inGoodsSave = data
+    },
+
+    calc(num1, num2, calcStr) {
+      var str1 // 转换为字符串的数字
+      var str2
+      var ws1 = 0 // ws1，ws2 用来存储传入的num的小数点后的数字的位数
+      var ws2 = 0 // 赋默认值，解决当整数和小数运算时倍数计算错误导致的结果误差
+      var bigger // bigger和smaller用于加，减，除法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题；乘法需要将结果除两个数字的倍数之和
+      var smaller // 例如：加减除法中1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误；乘法中1.12*1.1会放大为112*11，所以结果需要除以1000才会是正确的结果，112*11/1000=1.232
+      var zeroCount // 需要补充0的个数
+      var isExistDot1 // 传入的数字是否存在小数点
+      var isExistDot2
+      var sum
+      var beishu = 1
+      // 将数字转换为字符串
+      str1 = num1.toString()
+      str2 = num2.toString()
+      // 是否存在小数点（判断需要计算的数字是不是包含小数）
+      isExistDot1 = str1.indexOf('.') != -1
+      isExistDot2 = str2.indexOf('.') != -1
+      // 取小数点后面的位数
+      if (isExistDot1) {
+        ws1 = str1.split('.')[1].length
+      }
+
+      if (isExistDot2) {
+        ws2 = str2.split('.')[1].length
+      }
+      // 如ws1 和 ws2 无默认值，如果num1 或 num2 不是小数的话则 ws1 或 ws2 的值将为 undefined
+      // bigger 和 smaller 的值会和预期不符
+      bigger = ws1 > ws2 ? ws1 : ws2
+      smaller = ws1 < ws2 ? ws1 : ws2
+
+      switch (calcStr) {
+        // 加减法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题
+        // 例如：1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误
+        case '+':
+        case '-':
+        case '/':
+          zeroCount = bigger - smaller
+          for (var i = 0; i < zeroCount; i++) {
+            if (ws1 == smaller) {
+              str1 += '0'
+            } else {
+              str2 += '0'
+            }
+          }
+          break
+        case '*':
+          // 乘法需要将结果除两个数字的倍数之和
+          bigger = bigger + smaller
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+          break
+      }
+
+      // 去除数字中的小数点
+      str1 = str1.replace('.', '')
+      str2 = str2.replace('.', '')
+
+      // 计算倍数，例如：1.001小数点后有三位，则需要乘 1000 变成 1001，变成整数后精度丢失问题则不会存在
+      for (var i = 0; i < bigger; i++) {
+        beishu *= 10 // 等价于beishu = beishu * 10;
+      }
+      num1 = parseInt(str1)
+      num2 = parseInt(str2)
+      // 进行最终计算并除相应倍数
+      switch (calcStr) {
+        case '+':
+          sum = (num1 + num2) / beishu
+          break
+        case '-':
+          sum = (num1 - num2) / beishu
+          break
+        case '*':
+          sum = (num1 * num2) / beishu
+          break
+        case '/':
+          sum = num1 / num2
+          /* 除数与被除数同时放大一定倍数，不影响结果，
+      所以对数字进行放大对应倍数并进行补0操作后不用另对倍数做处理 */
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+      }
+
+      return sum
+    },
+    changeTotalFun(data) {
+      const { type, val } = data
+      if (type === 'totalKgs') {
+        this.bookingDetails.kgs = val || this.bookingDetails.kgs
+      } else if (type === 'totalPkgs') {
+        this.bookingDetails.pkgs = val || this.bookingDetails.pkgs
+      } else if (type === 'totalCbm') {
+        this.bookingDetails.cbm = val || this.bookingDetails.cbm
+      }
+    },
+    pkgsEnCapitalFun(data) {
+      this.bookingDetails.totalno = data
+    },
+    changeParentTabs(type) {
+      this.mainOrderActiveKey = type
+    },
+    editLineNameFun(type) {
+      if (type) {
+        this.$refs.mailingInfo.$data.userHasLine = !!this.bookingDetails.lineName
+      }
+    },
+    sedOrderRemoveFun(sedData) {
+      this.$set(this.bookingDetails, 'hbList', sedData)
+      if (sedData.length === 0) {
+        this.Showtabs = false
+        this.tabActiveKey = '1'
+      }
+    },
+    changeCtnInfoFun({ type, val }) {
+      if (type === 'kindpkgs') {
+        this.bookingDetails.kindpkgs = val
+      }
+    },
+    removeOrderFun() {
+      DeleteBookingOrder([this.bookingDetails.id].toString())
+        .then(res => {
+          if (res.success) {
+            this.$message.success('删除成功')
+            const $data = this.needSavePages
+            delete $data[this.$route.fullPath]
+            this.setNeedSavePages($data)
+            const removeIcon = document.getElementsByClassName('ant-tabs-tab-active')[0].getElementsByTagName('i')[0]
+            removeIcon.click()
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('./style/index.less');
+
+.Showtabs {
+  /deep/ .ant-tabs-top-bar {
+    display: none !important;
+  }
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/basicInfo.vue b/src/views/main/BookingLedger/detail/modulesTest/basicInfo.vue
new file mode 100644
index 0000000..4a34300
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/basicInfo.vue
@@ -0,0 +1,1271 @@
+<template>
+  <div class="basic-info">
+    <x-card style="padding-top: 15px;">
+      <div slot="content" style="margin-top: -24px;">
+        <a-form-model
+          style="margin-bottom: 10px"
+          size="small"
+          ref="basicFrom"
+          :selfUpdate="true"
+          :model="details"
+          :rules="rules"
+        >
+          <a-row class="from-box" >
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                prop="customername"
+                label="委托单位"
+                :labelCol="labelCol4"
+                :wrapperCol="wrapperCol4"
+                has-feedback
+              >
+                <div class="customer-box" style="padding-right: 24px">
+                  <selectView
+                    type="customername"
+                    :defaultVal="details.customername"
+                    searchApi="DjyCustomerSuggest"
+                    :searchQuery="{ keyword: '', type: 'consignor' }"
+                    :showLabel="['shortName']"
+                    :openSearch="true"
+                    :isCopy="true"
+                    @change="getSelectViewRes"
+                    style="flex: 1; margin-top: -4px"
+                  ></selectView>
+                  <span
+                    class="customer-btn iconfont icon-touxiang"
+                    @click.stop="changeCustomer('select')"
+                    :style="{ paddingRight: '0px' }"
+                  ></span>
+                  <span class="customer-btn iconfont icon-jiahao2fill" @click.stop="changeCustomer('add')"></span>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                prop="thirdPay"
+                label="第三方"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+              >
+                <div class="customer-box" style="padding-right: 24px">
+                  <selectView
+                    type="thirdPay"
+                    :defaultVal="details.thirdPay"
+                    searchApi="DjyCustomerSuggest"
+                    :searchQuery="{ keyword: '', type: 'consignor' }"
+                    :showLabel="['shortName']"
+                    :openSearch="true"
+                    :isCopy="true"
+                    @change="getSelectViewRes"
+                    style="flex: 1; margin-top: -4px"
+                  ></selectView>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="PO NO"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+                prop="pono"
+              >
+                <inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="船公司"
+                prop="carrierid"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+              >
+                <selectView
+                  ref="carrierid"
+                  type="carrierid"
+                  :defaultVal="details.carrierid"
+                  searchApi="GetCarrierlist"
+                  :searchQuery="{ keyword: '', type: 'consignor' }"
+                  :showLabel="['cnName', 'code']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                  style="flex: 1; margin-top: -4px"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="是否占舱"
+                :labelCol="{ xs: { span: 24 },
+                             sm: { span: 9 },
+                             md: { span: 9 }}"
+                :wrapperCol="{ xs: { span: 24 },
+                               sm: { span: 12 },
+                               md: { span: 12 }}"
+                has-feedback
+                prop="zhanCangFlag"
+              >
+                <div class="date-box">
+                  <a-radio-group size="small" v-model="details.zhanCangFlag">
+                    <a-radio size="small" value="是"> 是 </a-radio>
+                    <a-radio size="small" value="否"> 否 </a-radio>
+                  </a-radio-group>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="订舱编号"
+                :labelCol="labelCol4"
+                :wrapperCol="wrapperCol4"
+                has-feedback
+                prop="custno"
+              >
+                <inputView type="custno" :parentVal="details.custno" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="提单号"
+                prop="mblno"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+              >
+                <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="分提单号"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+                prop="hblno"
+              >
+                <inputView type="hblno" :parentVal="details.hblno" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-form-model-item
+                class="from-label"
+                label="订舱代理"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+                prop="forwarder"
+              >
+                <selectView
+                  type="forwarder"
+                  :defaultVal="details.forwarder"
+                  searchApi="DjyCustomerSuggest"
+                  :searchQuery="{ keyword: '', type: 'booking_agent' }"
+                  :showLabel="['shortName']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                  style="flex: 1; margin-top: -4px"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <template v-if="details.carrierid != 'ESL'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="运费协议号"
+                  :labelCol="{
+                    xs: { span: 24 },
+                    sm: { span: 10 },
+                    md: { span: 10 }
+                  }"
+                  :wrapperCol="{
+                    xs: { span: 24 },
+                    sm: { span: 14 },
+                    md: { span: 14 }
+                  }"
+                  has-feedback
+                  prop="contractno"
+                >
+                  <div class="copy-box">
+                    <template >
+                      <autoView
+                        class="copy-input"
+                        type="contractno"
+                        :defaultVal="details.contractno"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="getContractno"
+                        :searchQuery="{ queryItem: '', top: 50, laneCName: this.details.lineName,carrier: this.details.carrierid,pod: this.details.destinationid }"
+                        :showLabel="['contractNo']"
+                        @select="getAutoViewRes"
+                      ></autoView>
+                    </template>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+            </template>
+            <template v-if="details.carrierid === 'ESL'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="运费协议号"
+                  :labelCol="{
+                    xs: { span: 24 },
+                    sm: { span: 12 },
+                    md: { span: 12 }
+                  }"
+                  :wrapperCol="{
+                    xs: { span: 24 },
+                    sm: { span: 12 },
+                    md: { span: 12 }
+                  }"
+                  has-feedback
+                  prop="contractno"
+                >
+                  <div class="copy-box">
+                    <template >
+                      <autoView
+                        class="copy-input"
+                        type="contractno"
+                        :defaultVal="details.contractno"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="getContractno"
+                        :searchQuery="{ queryItem: '', top: 50, laneCName: this.details.lineName,carrier: this.details.carrierid,pod: this.details.destinationid }"
+                        :showLabel="['contractNo']"
+                        @select="getAutoViewRes"
+                      ></autoView>
+                    </template>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+            </template>
+            <template v-if="details.carrierid === 'ESL'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="EP号"
+                  :labelCol="labelCol4"
+                  :wrapperCol="wrapperCol4"
+                  has-feedback
+                  prop="epCode"
+                >
+                  <inputView type="epCode" :parentVal="details.epCode" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </template>
+            <template v-if="['VOLTA', 'WHL', 'CSL', 'MSC'].includes(details.carrierid)">
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="真提单号"
+                  :labelCol="labelCol4"
+                  :wrapperCol="wrapperCol4"
+                  has-feedback
+                  prop="tmblno"
+                >
+                  <inputView type="tmblno" :parentVal="details.tmblno" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </template>
+          </a-row>
+          <div class="from-box2">
+            <a-row >
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="开船日期"
+                  :labelCol="{ xs: { span: 24 },
+                               sm: { span: 8 },
+                               md: { span: 8 }}"
+                  :wrapperCol="{ xs: { span: 24 },
+                                 sm: { span: 12 },
+                                 md: { span: 12 }}"
+                  has-feedback
+                  prop="etd"
+                >
+                  <div class="date-box">
+                    <datePickerView
+                      class="date-picker"
+                      :parentVal="details.etd"
+                      type="etd"
+                      format="YYYY-MM-DD"
+                      @dateChange="dateChangeFun"
+                      style="margin-top: -5px"
+                    ></datePickerView>
+                    <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="船名"
+                  :labelCol="{ xs: { span: 24 },
+                               sm: { span: 4 },
+                               md: { span: 4 }}"
+                  :wrapperCol="{ xs: { span: 24 },
+                                 sm: { span: 18 },
+                                 md: { span: 18 }}"
+                  has-feedback
+                  prop="vessel"
+                >
+                  <div class="copy-box">
+                    <selectView
+                      class="copy-input"
+                      ref="vesselView"
+                      type="vessel"
+                      :defaultVal="details.vessel"
+                      searchApi="getVesselInfoService"
+                      :searchQuery="{
+                        KeyWord: '',
+                        CarrierID: this.details.carrierid || 'CMA',
+                        ETD: this.details.etd || ''
+                      }"
+                      :showLabel="['vessel']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <template v-if="details.carrierid === 'ESL'">
+                <a-col :xs="12" :sm="12" :md="8" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                  <a-form-model-item
+                    class="from-label"
+                    label="内部航次"
+                    :labelCol="{ xs: { span: 24 },
+                                 sm: { span: 8 },
+                                 md: { span: 8 }}"
+                    :wrapperCol="{ xs: { span: 24 },
+                                   sm: { span: 12 },
+                                   md: { span: 12 }}"
+                    has-feedback
+                    prop="voynoinner"
+                  >
+                    <!-- 内部航次暂无接口， 暂时改为输入框 -->
+                    <inputView type="voynoinner" :parentVal="details.voynoinner" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <template v-else>
+                <a-col :xs="12" :sm="12" :md="8" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                  <a-form-model-item
+                    class="from-label"
+                    label="内部航次"
+                    :labelCol="{ xs: { span: 24 },
+                                 sm: { span: 6 },
+                                 md: { span: 8 }}"
+                    :wrapperCol="{ xs: { span: 24 },
+                                   sm: { span: 12 },
+                                   md: { span: 12 }}"
+                    has-feedback
+                    prop="voynoinner"
+                  >
+                    <!-- 内部航次暂无接口， 暂时改为输入框 -->
+                    <inputView type="voynoinner" :parentVal="details.voynoinner" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <template v-if="details.carrierid === 'ESL'">
+                <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                  <a-form-model-item
+                    class="from-label"
+                    label="航次"
+                    :labelCol="{ xs: { span: 24 },
+                                 sm: { span: 8 },
+                                 md: { span: 8 }}"
+                    :wrapperCol="{ xs: { span: 24 },
+                                   sm: { span: 12 },
+                                   md: { span: 12 }}"
+                    has-feedback
+                    prop="voyno"
+                  >
+                    <inputView type="voyno" :parentVal="details.voyno" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <template v-else>
+                <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                  <a-form-model-item
+                    class="from-label"
+                    label="海关航次"
+                    :labelCol="{ xs: { span: 24 },
+                                 sm: { span: 8 },
+                                 md: { span: 8 }}"
+                    :wrapperCol="{ xs: { span: 24 },
+                                   sm: { span: 12 },
+                                   md: { span: 12 }}"
+                    has-feedback
+                    prop="voyno"
+                  >
+                    <inputView ref="voyno" type="voyno" :parentVal="details.voyno" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-form-model-item
+                  class="from-label"
+                  label="船司航线"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="lanename"
+                >
+                  <!-- 航线暂无接口， 暂时改为输入框-->
+                  <inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="10">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="揽货人"
+                  :labelCol="userLabelCol"
+                  :wrapperCol="userWrapperCol"
+                  has-feedback
+                  prop="sale"
+                >
+                  <selectView
+                    type="sale"
+                    :defaultVal="details.sale"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="客服"
+                  :labelCol="userLabelCol1"
+                  :wrapperCol="userWrapperCol1"
+                  has-feedback
+                  prop="custservice"
+                >
+                  <selectView
+                    type="custservice"
+                    :defaultVal="details.custservice"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="操作"
+                  :labelCol="userLabelCol1"
+                  :wrapperCol="userWrapperCol1"
+                  has-feedback
+                  prop="op"
+                >
+                  <selectView
+                    type="op"
+                    :defaultVal="details.op"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="单证"
+                  :labelCol="userLabelCol1"
+                  :wrapperCol="userWrapperCol1"
+                  has-feedback
+                  prop="doc"
+                >
+                  <selectView
+                    type="doc"
+                    :defaultVal="details.doc"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="航线操作"
+                  :labelCol="userLabelCol"
+                  :wrapperCol="userWrapperCol"
+                  has-feedback
+                  prop="route"
+                >
+                  <selectView
+                    type="route"
+                    :defaultVal="details.route"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    :isCopy="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                <a-form-model-item
+                  class="from-label"
+                  label="航线管理"
+                  :labelCol="userLabelCol"
+                  :wrapperCol="userWrapperCol"
+                  has-feedback
+                  prop="lineManage"
+                >
+                  <selectView
+                    type="lineManage"
+                    :defaultVal="details.lineManage"
+                    searchApi="GetSysUserPage"
+                    :searchQuery="{ name: '' }"
+                    :showLabel="['name']"
+                    :openSearch="true"
+                    @change="getSelectViewRes"
+                  ></selectView>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+            <a-row :gutter="10">
+              <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="操作备注"
+                  :labelCol="labelCol3"
+                  :wrapperCol="wrapperCol3"
+                  has-feedback
+                  prop="czRemark"
+                >
+                  <inputView type="czRemark" :parentVal="details.czRemark" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="单证备注"
+                  :labelCol="labelCol3"
+                  :wrapperCol="wrapperCol3"
+                  has-feedback
+                  prop="dzRemark"
+                >
+                  <inputView type="dzRemark" :parentVal="details.dzRemark" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="6" :md="6" :lg="6" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="申请箱使"
+                  :labelCol="labelCol3"
+                  :wrapperCol="wrapperCol3"
+                  has-feedback
+                  prop="shenQingXiangShi"
+                >
+                  <inputView type="shenQingXiangShi" :parentVal="details.shenQingXiangShi" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </div>
+        </a-form-model>
+      </div>
+    </x-card>
+    <a-modal
+      :title="customerType === 'add' ? '添加委托单位' : '关系人'"
+      :width="1200"
+      :visible="customerVisible"
+      :confirmLoading="customerModelconfirm"
+      :maskClosable="false"
+      @ok="handleModelSubmit"
+      @cancel="handleModelCancel"
+    >
+      <template slot="footer">
+        <a-button key="back" @click="handleModelCancel"> 关闭 </a-button>
+      </template>
+      <template v-if="customerType === 'select'">
+        <div class="select-customer">
+          <vxe-toolbar>
+            <template #buttons>
+              <vxe-button status="success" icon="vxe-icon-square-plus" @click="insertEvent()">新增</vxe-button>
+              <vxe-button status="danger" icon="vxe-icon-delete" @click="removeLine"> 删除选中 </vxe-button>
+              <vxe-button status="primary" icon="vxe-icon-save" @click="saveEvent">保存</vxe-button>
+            </template>
+          </vxe-toolbar>
+
+          <ve-table
+            borderY
+            :columns="columns"
+            :table-data="tableData"
+            :cell-autofill-option="cellAutofillOption"
+            :editOption="editOption"
+            rowKeyFieldName="rowKey"
+            :rowStyleOption="rowStyleOption"
+            :checkbox-option="checkboxOption"
+            :clipboard-option="clipboardOption"
+          />
+          <div class="table-no-data" v-if="tableData.length == 0">暂无数据</div>
+        </div>
+      </template>
+    </a-modal>
+  </div>
+</template>
+<script>
+import { XCard } from '@/components'
+import inputView from '../components/inputView'
+import selectView from '../components/selectView'
+import datePickerView from '../components/datePickerView'
+import autoView from '../components/autoView'
+
+import {
+  DjyCustomerdetail,
+  BookingOrderContactSavebatch,
+  BookingOrderContactPage,
+  DjyCustomerContacts
+} from '@/api/modular/main/BookingLedger'
+
+let timer
+export default {
+  name: 'BookingDetail',
+  components: {
+    XCard,
+    inputView,
+    selectView,
+    datePickerView,
+    autoView
+  },
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    ishd: {
+      type: Boolean,
+      default: false
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inPageLoading: {
+      type: Boolean,
+      default: false
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    isParent: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      frompre: {},
+      type: this.$route.query.type,
+      basicDetails: JSON.parse(JSON.stringify(this.details)),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 9 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 15 }
+      },
+      labelCol2: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 7 }
+      },
+      wrapperCol2: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 16 }
+      },
+      labelCol3: {
+        xs: { span: 24 },
+        sm: { span: 5 },
+        md: { span: 5 }
+      },
+      wrapperCol3: {
+        xs: { span: 24 },
+        sm: { span: 19 },
+        md: { span: 19 }
+      },
+      labelCol4: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      wrapperCol4: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 16 }
+      },
+      userLabelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      userWrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 16 }
+      },
+      userLabelCol1: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 6 }
+      },
+      userWrapperCol1: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 18 }
+      },
+
+      form: this.$form.createForm(this),
+      customerType: '',
+      customerVisible: false,
+      customerModelconfirm: false,
+      rowStyleOption: {
+        clickHighlight: false,
+        hoverHighlight: false
+      },
+      cellAutofillOption: true,
+      editOption: {
+        cellValueChange: ({ row, column }) => {}
+      },
+      checkboxOption: {
+        hideSelectAll: false,
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          this.selectArr = selectedRowKeys
+        },
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          if (isSelected) {
+            this.selectArr = selectedRowKeys
+          } else {
+            this.selectArr = []
+          }
+        }
+      },
+      clipboardOption: {
+        copy: true,
+        paste: true,
+        cut: true,
+        delete: true,
+        beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforeCopy')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterCopy')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforePaste')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterPaste')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforeCut')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterCut')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('beforeDelete')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          console.log('afterDelete')
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        }
+      },
+      columns: [
+        {
+          field: '',
+          key: 'checkbox',
+          type: 'checkbox',
+          title: '',
+          width: 50,
+          operationColumn: true,
+          align: 'center'
+        },
+        {
+          field: 'name',
+          key: 'name',
+          title: '联系人',
+          edit: false,
+          width: 260,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                value={row['name']}
+                option-filter-prop="children"
+                style="width: 240px"
+                placeholder="请选择"
+                on-change={(val) => {
+                  row['name'] = this.customerContacts[val].name
+                  row['email'] = this.customerContacts[val].email
+                  row['tel'] = this.customerContacts[val].tel
+                  row['remark'] = this.customerContacts[val].remark
+                }}
+              >
+                {this.customerContacts.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          }
+        },
+        { field: 'email', key: 'email', title: '邮箱', edit: true },
+        { field: 'tel', key: 'tel', title: '电话', edit: true },
+        { field: 'remark', key: 'remark', title: '备注', edit: true },
+        {
+          field: 'roleCode',
+          key: 'roleCode',
+          title: '角色',
+          edit: false,
+          width: 260,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                mode="multiple"
+                value={row['roleCode']}
+                option-filter-prop="children"
+                style="width: 240px"
+                placeholder="请选择角色"
+                on-change={(val) => {
+                  row['roleCode'] = val
+                  console.log(row['roleCode'])
+                }}
+              >
+                {this.ContactType.map((item, index) => {
+                  return <a-select-option value={item.name}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          }
+        }
+      ],
+      tableData: [],
+      etdWeek: '',
+      selectArr: [],
+      customerContacts: [],
+      customerContactsData: [],
+      ContactType: [],
+      customerContactsDataList: []
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        if (!this.inSave) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'baseInfo'
+          })
+        }
+        if (nval.etd) {
+          this.etdWeek = this.getWeek(nval.etd)
+        } else {
+          this.etdWeek = ''
+        }
+      },
+      deep: true
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+        if (this.$route.name === 'BookingDetail') {
+          this.init()
+        }
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    refresh() {
+      this.$forceUpdate()
+      this.$refs.vesselView.value = this.frompre[0].vessel
+      this.$refs.shipagency.value = this.frompre[0].forwarder
+      this.$refs.carrierid.value = this.frompre[0].carrier
+      this.$refs.voyno.value = this.frompre[0].voyno
+    },
+    debounce(func, wait, ...args) {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        func.apply(this, args)
+      }, wait)
+    },
+    checkbasic() {
+      return new Promise((resolve, reject) => {
+        this.$refs.basicFrom.validate((valid) => {
+          if (valid) {
+            resolve(true)
+          } else {
+            // eslint-disable-next-line prefer-promise-reject-errors
+            reject(false)
+          }
+        })
+      })
+    },
+    // ========== 关系人弹窗 ==========
+    focusEvent2(data) {
+      const Arr = data
+        ? this.customerContactsData.filter((item) => item.name.indexOf(data) > -1)
+        : this.customerContactsData
+      if (Arr.length) {
+        this.$refs.xDown2.showPanel()
+      }
+    },
+    keyupEvent2(data) {
+      this.customerContactsDataList = data
+        ? this.customerContactsData.filter((item) => item.name.indexOf(data) > -1)
+        : this.customerContactsData
+      if (this.customerContactsDataList.length) {
+        this.$refs.xDown2.showPanel()
+      } else {
+        this.$refs.xDown2.hidePanel()
+      }
+      this.$forceUpdate()
+    },
+    selectEvent2(e, data) {
+      e.name = data.name
+      e.email = data.email
+      e.tel = data.email
+      e.remark = data.email
+      this.$refs.xDown2.hidePanel().then(() => {
+        this.customerContactsDataList = this.customerContactsData
+      })
+    },
+
+    // ---------- 新增 ----------
+    async insertEvent(row) {
+      const data = {
+        email: '',
+        name: '',
+        remark: '',
+        roleCode: [],
+        tel: '',
+        rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+      }
+      this.tableData.push(data)
+    },
+    // ---------- 保存 ----------
+    saveEvent() {
+      const fullData = this.tableData
+      fullData.forEach((item) => {
+        item.WroleCode = ''
+        item.bookingId = this.$route.query.id
+        if (item.roleCode) {
+          item.roleCode.forEach((e) => {
+            this.ContactType.forEach((item2) => {
+              if (e == item2.name) {
+                if (item.WroleCode) {
+                  item.WroleCode = `${item.WroleCode}[${item2.code}]`
+                } else {
+                  item.WroleCode = `[${item2.code}]`
+                }
+              }
+            })
+          })
+        }
+      })
+      const data = JSON.parse(JSON.stringify(fullData))
+      data.forEach((item) => {
+        item.roleCode = item.WroleCode
+        delete item.rowKey
+      })
+      BookingOrderContactSavebatch(this.$route.query.id, data).then((res) => {
+        if (res.success) {
+          this.$message.success('保存成功')
+        } else {
+          this.$message.error('保存失败：' + res.message)
+        }
+      })
+    },
+
+    init() {
+      if (this.details.etd) {
+        this.etdWeek = this.getWeek(this.details.etd)
+      } else {
+        this.etdWeek = ''
+      }
+      this.ContactType = this.$options.filters['dictData']('booking_contact_type')
+    },
+
+    changeCustomer(type) {
+      if (type == 'add') {
+        this.$router.push({ name: 'CustomerInformationManagementAdd' })
+        localStorage.setItem('CustomerInformationManagementAdd', 'new')
+      } else {
+        if (this.details.customerid) {
+          this.customerType = type
+          this.customerVisible = true
+          DjyCustomerdetail({ id: this.details.customerid }).then((res) => {
+            this.customerContactsData = res.data.contacts
+          })
+          this.djyCustomerContacts()
+          BookingOrderContactPage({ id: this.details.customerid, BookingId: this.$route.query.id, pageSize: 999 }).then(
+            (res) => {
+              res.data.rows.forEach((item) => {
+                const WroleCode = []
+                if (item.roleCode) {
+                  item.roleCode.split(']').forEach((e) => {
+                    if (e) {
+                      e.split('[').forEach((i) => {
+                        if (i) {
+                          this.ContactType.forEach((item2) => {
+                            if (item2.code == i) {
+                              WroleCode.push(item2.name)
+                            }
+                          })
+                        }
+                      })
+                    }
+                  })
+                }
+                item.roleCode = WroleCode
+              })
+              res.data.rows.map((item, index) => {
+                item.rowKey = index
+              })
+              this.tableData = res.data.rows
+            }
+          )
+        } else {
+          this.$message.warning('请先选择委托单位！')
+        }
+      }
+    },
+    handleModelSubmit() {
+      this.handleModelCancel()
+    },
+    handleModelCancel() {
+      this.customerType = ''
+      this.customerVisible = false
+    },
+    removeLine() {
+      this.selectArr.map((item, index) => {
+        this.tableData.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            this.tableData.splice(oindex, 1)
+          }
+        })
+      })
+    },
+    djyCustomerContacts() {
+      DjyCustomerContacts({
+        customerId: this.details.customerid
+      })
+        .then((res) => {
+          const arr = []
+          res.data.map((item, index) => {
+            if (item.name) {
+              arr.push(item)
+            }
+          })
+          this.customerContacts = res.data
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    changeEtd(date, dateString) {
+      if (!dateString) {
+        this.details.etd = null
+      } else {
+        this.details.etd = dateString
+      }
+      this.etdWeek = this.getWeek(dateString)
+    },
+    getWeek(dateTime) {
+      // eslint-disable-next-line camelcase
+      const temp_ms = new Date(dateTime).getTime()
+      const temptTime = new Date(temp_ms)
+      const weekday = temptTime.getDay() & 7
+      temptTime.setDate(temptTime.getDate() - weekday + 1 + 5)
+      let firstDay = new Date(temptTime.getFullYear(), 0, 1)
+      const dayOfWeek = firstDay.getDay()
+      let spendDay = 1
+      if (dayOfWeek !== 0) {
+        spendDay = 7 - dayOfWeek + 1
+      }
+      const yearOfW = temptTime.getFullYear()
+      firstDay = new Date(yearOfW, 0, 1 + spendDay)
+      const d = Math.ceil((temptTime.valueOf() - firstDay.valueOf()) / 86400000)
+      const res = Math.ceil(d / 7) + 1
+      const weekOfNow = res.toString()
+      return weekOfNow
+    },
+    processX(xdata) {
+      if (xdata.length === 5) {
+        xdata = xdata.slice(0, 4) + '0' + xdata.slice(4)
+      }
+      return xdata
+    },
+    inputChange({ type, value }) {
+      this.details[type] = value
+      // debugger
+      // if (type === 'voyno' && this.details.carrierid === 'ESL') {
+      //   this.details.voynoinner = this.details[type]
+      // }
+      if (type === 'voyno' && value !== '') {
+        this.details.voynoinner = this.details[type]
+      }
+      if (type === 'epCode' && this.details.carrierid === 'ESL') {
+        this.details.tmblno = this.details[type]
+      }
+      this.$forceUpdate()
+    },
+    getSelectViewRes({ type, res }) {
+      if (type === 'customername') {
+        this.details.customername = res.shortName || ''
+        this.details.customerid = Number(res.id) || ''
+        if (res.op) {
+          this.details.op = res.op
+          this.details.opid = res.opid
+        }
+        if (res.sale) {
+          this.details.sale = res.sale
+          this.details.saleid = res.saleid
+        }
+        if (res.doc) {
+          this.details.doc = res.doc
+          this.details.docid = res.docid
+        }
+        if (res.custservice) {
+          this.details.custservice = res.custservice
+          this.details.custserviceid = res.custserviceid
+        }
+        if (res.serviceItem) {
+          const WserviceItem = []
+          if (res.serviceItem) {
+            res.serviceItem.split(']').forEach((item) => {
+              if (item.split('[')[1]) {
+                WserviceItem.push(item.split('[')[1])
+              }
+            })
+          }
+          const data = []
+          this.$options.filters['dictData']('booking_service_item').forEach((item) => {
+            WserviceItem.forEach((item2) => {
+              if (item.code == item2) {
+                data.push(item)
+              }
+            })
+          })
+          this.details.item = data
+        } else {
+          this.details.item = []
+        }
+      } else if (type === 'carrierid') {
+        this.details.carrier = res.enName || ''
+        this.details.carrierid = res.code || ''
+        setTimeout(() => {
+          this.$refs.vesselView.handleSearch('')
+        }, 600)
+      } else if (type === 'forwarder') {
+        this.details.forwarder = res.shortName || ''
+        this.details.forwarderid = res.codeName || ''
+      } else if (type === 'contractno') {
+        this.details.contractno = res.contractNo || ''
+      } else if (type === 'vessel') {
+        this.details.vessel = res.vessel || ''
+        this.details.atd = res.atd || ''
+        this.details.etd = res.etd || ''
+        this.details.voyno = res.voyno || ''
+        this.details.voynoinner = res.voynoInside || ''
+      } else if (type === 'shipagency') {
+        this.details.shipagency = res.name || ''
+        this.details.shipagencyid = res.code || ''
+      } else if (['sale', 'op', 'doc', 'custservice', 'route', 'lineManage'].includes(type)) {
+        this.details[type] = res.name || ''
+        if (type == 'lineManage') {
+          this.details.lineManage = res.name || ''
+          this.details.lineManageID = res.id || ''
+        } else {
+          this.details[`${type}id`] = res.id || ''
+        }
+      } else if (type === 'lineName') {
+        this.details[type] = res.name || ''
+        console.log(res)
+        this.$emit('editLineName', true)
+      } else if (type === 'sourceName') {
+        this.details[type] = res.name || ''
+        this.details['sourceCode'] = res.code || ''
+      } else if (type === 'thirdPay') {
+        this.details.thirdPay = res.shortName || ''
+        this.details.thirdPaytode = Number(res.id) || ''
+      }
+    },
+    dateChangeFun({ type, value }) {
+      this.details[type] = value || ''
+      if (type === 'etd') {
+        this.etdWeek = this.getWeek(value)
+        setTimeout(() => {
+          this.$refs.vesselView.handleSearch('')
+        }, 600)
+      }
+    },
+    getAutoViewRes({ type, res }) {
+      if (type === 'contractno') {
+        this.details.contractno = res.contractNo || ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .ant-form-explain {
+  display: none !important;
+}
+/deep/ .ant-form-item-children-icon .anticon-check-circle {
+  display: none;
+}
+</style>
+<style lang="less" scoped>
+@import url('../index.less');
+@import url('../style/basicInfo.less');
+.ant-col-xl-4-8{
+  width: 20%;
+}
+/deep/ .ant-card-body{
+    padding-left: 10px !important;
+  }
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/billInfo.vue b/src/views/main/BookingLedger/detail/modulesTest/billInfo.vue
new file mode 100644
index 0000000..09d49c6
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/billInfo.vue
@@ -0,0 +1,196 @@
+<template>
+  <a-collapse class="collapse-box bill-info-box" :bordered="false" v-model="showKey">
+    <a-collapse-panel key="1" :showArrow="false">
+      <div class="container bill-info">
+        <a-form-model ref="billFrom" :model="details" :rules="rules">
+          <a-row :gutter="10">
+            <template v-if="details.cargoid == 'D'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="危险品等级"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="dclass"
+                >
+                  <inputView type="dclass" size="small" :parentVal="details.dclass" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="危险品编号"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="dunno"
+                >
+                  <inputView type="dunno" size="small" :parentVal="details.dunno" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="危险品页号"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="dpage"
+                >
+                  <inputView type="dpage" size="small" :parentVal="details.dpage" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="危险品标签"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="dlabel"
+                >
+                  <inputView type="dlabel" size="small" :parentVal="details.dlabel" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="危险品联系人"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="linkman"
+                >
+                  <inputView type="linkman" size="small" :parentVal="details.linkman" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+            </template>
+          </a-row>
+        </a-form-model>
+      </div>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+<script>
+import inputView from '../components/inputView'
+import selectView from '../components/selectView'
+import datePickerView from '../components/datePickerView'
+
+export default {
+  name: '',
+  components: {
+    selectView,
+    inputView,
+    datePickerView
+  },
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    isParent: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 13 }
+      },
+      showKey: ['1']
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        if (!this.inSave) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'billInfo'
+          })
+        }
+        this.$forceUpdate()
+      },
+      deep: true
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+      }
+    }
+  },
+  created() { },
+  methods: {
+    checkbasic () {
+      this.$refs.billFrom.validate(valid => {
+        if (valid) {
+          return true;
+        } else {
+          return false;
+        }
+      });
+    },
+    getSelectViewRes({ type, res }) {
+      if (['issuetype', 'blfrt'].includes(type)) {
+        this.details[type] = res.enName || ''
+        if (type === 'blfrt') {
+          if (this.details.blfrt === 'FREIGHT COLLECT') {
+            this.details.payableat = this.details.payableat ? this.details.payableat : this.details.portdischarge || ''
+            this.details.payableatid = this.details.payableatid ? this.details.payableatid : this.details.portdischargeid || ''
+          } else {
+            this.details.prepardat = this.details.prepardat ? this.details.prepardat : this.details.portload || ''
+            this.details.prepardatid = this.details.prepardatid ? this.details.prepardatid : this.details.portloadid || ''
+          }
+        }
+      } else if (['issueplace', 'prepardat', 'payableat'].includes(type)) {
+        this.details[type] = res.enName || ''
+        this.details[`${type}id`] = res.ediCode || ''
+      } else if (['service'].includes(type)) {
+        this.details[type] = res.name || ''
+      } else if (['nobill', 'copynobill'].includes(type)) {
+        this.details[type] = res.code || ''
+      }
+    },
+    inputChange({ type, value }) {
+      this.details[type] = value
+      this.$forceUpdate()
+    },
+    dateChangeFun ({ type, value }) {
+      this.details[type] = value || ''
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .ant-form-explain{
+  display: none !important;
+}
+/deep/ .ant-form-item-children-icon .anticon-check-circle{
+  display: none;
+}
+</style>
+<style lang="less" scoped>
+@import url('../style/billInfo.less');
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/cargoInfo.vue b/src/views/main/BookingLedger/detail/modulesTest/cargoInfo.vue
new file mode 100644
index 0000000..3bc7e7e
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/cargoInfo.vue
@@ -0,0 +1,868 @@
+<template>
+  <a-collapse class="collapse-box" :bordered="false" v-model="showKey">
+    <a-collapse-panel key="1" :showArrow="false">
+      <template slot="header">
+        <div class="base-tit"><i class="iconfont icon-goods"></i>货物信息 <span
+          class="click-btn"
+          @click.stop="tabStopFun"></span></div>
+      </template>
+      <template slot="extra">
+        <div class="tab-change"><i class="iconfont icon-xia" :class="{ 'active': !showKey.includes('1') }"></i></div>
+      </template>
+      <div class="container cargo-info">
+        <a-form-model :selfUpdate="true" ref="cargoFrom" :model="details" :rules="rules">
+          <a-row :gutter="10">
+            <a-col :span="5">
+              <div class="cargo-info-tit" :class="{ 'required': rules['marks'] && rules['marks'][0].required }">
+                <div>Seal No.(封志号)<span
+                  @click="handleOpen(1)"
+                  style="cursor: pointer;"
+                  class="copy-btn iconfont icon-bianji"></span></div>
+                <div>Marks & Nos.(标记与号码)</div>
+              </div>
+              <a-form-model-item has-feedback prop="marks" class="textarea-label" label="">
+                <div class="bottom">
+                  <textareaView
+                    class="input-box"
+                    id="marks-scroll"
+                    :parentVal="details.marks"
+                    type="marks"
+                    :height="100"
+                    :openToCDB="true"
+                    @getTextareaChange="getTextareaChange" />
+                  <div
+                    class="line-count"
+                    id="marks-scroll-right"
+                    v-if="Object.keys(details).length > 1 && details.marks.length > 1">
+                    <div v-for="(num, index) in details.marks.split('\n')" :key="index">{{ num.length }}</div>
+                  </div>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="10">
+              <div class="line">
+                <div
+                  class="left"
+                  :class="{ 'required': rules['description'] && rules['description'][0].required }"
+                  v-if="details.carrierid !== 'PIL'">
+                  <div>Description of Goods</div>
+                  <div>(包装种类与货名)<span
+                    @click="handleOpen(2)"
+                    style="cursor: pointer;"
+                    class="copy-btn iconfont icon-bianji"></span></div>
+                </div>
+                <div class="left" v-else>
+                  <div class="title" :class="{ 'required': rules['description'] && rules['description'][0].required }">
+                    Description of Goods (包装种类与货名)<span
+                      @click="handleOpen(2)"
+                      style="cursor: pointer;color: black;"
+                      class="copy-btn iconfont icon-bianji"></span></div>
+                  <a-form-model-item
+                    has-feedback
+                    prop="goodsname"
+                    label=""
+                    :class="{ 'goods-name-box': rules['goodsname'] && rules['goodsname'][0].required }">
+                    <i
+                      class="icon required goods-required"
+                      v-if="rules['goodsname'] && rules['goodsname'][0].required"></i>
+                    <!-- :showLabel="['goodsNameEN', 'goodsCode']" -->
+                    <selectView
+                      type="goodsname"
+                      :defaultVal="details.goodsname"
+                      searchApi="getGoodsname"
+                      :searchQuery="{ queryItem: '', top: 50 }"
+                      :showLabel="['goodsNameEN', 'goodsCode']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                      style="width: 75%;max-width:210px;"></selectView>
+                  </a-form-model-item>
+                </div>
+                <div class="cargo-mark">
+                  <div :class="{ 'required': rules['cargoid'] && rules['cargoid'][0].required }" class="tit">货物标志</div>
+                  <a-form-model-item class="cargoid" has-feedback prop="cargoid" label="" style="margin-top:-6px;">
+                    <selectView
+                      type="cargoid"
+                      :defaultVal="details.cargoid"
+                      searchApi="cargoData"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                      style="width: 120px;margin-top:7px;"></selectView>
+                  </a-form-model-item>
+                </div>
+                <div class="input">
+                  <div :class="{ 'required': rules['hscode'] && rules['hscode'][0].required }" calss="tit">HS编码</div>
+                  <a-form-model-item class="cargoid" has-feedback prop="hscode" label="" style="margin-top:-2px;">
+                    <!-- <a-input size="small" :allowClear="true" v-model="details.hscode" /> -->
+                    <inputView type="hscode" size="small" :parentVal="details.hscode" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </div>
+              </div>
+              <a-form-model-item has-feedback prop="description" class="textarea-label" label="">
+                <div class="bottom">
+                  <textareaView
+                    id="description-scroll"
+                    class="input-box"
+                    :parentVal="details.description"
+                    type="description"
+                    :height="100"
+                    :openToCDB="true"
+                    @getTextareaChange="getTextareaChange" />
+                  <div
+                    class="line-count"
+                    id="description-scroll-right"
+                    v-if="Object.keys(details).length > 1 && details.description.length > 1">
+                    <div v-for="(num, index) in details.description.split('\n')" :key="index">{{ num.length }}</div>
+                  </div>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="9">
+              <a-col :span="12">
+                <a-form-model-item
+                  class="from-label pkgs-line-box"
+                  label="件数"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="pkgs">
+                  <div class="line-box">
+                    <a-input
+                      :allowClear="true"
+                      size="small"
+                      v-model="details.pkgs"
+                      type="number"
+                      @change="changePkgs" />
+                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('pkgs')"></i>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12" style="overflow: hidden">
+                <a-form-model-item
+                  class="from-label"
+                  label="包装"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="kindpkgs">
+                  <selectView
+                    type="kindpkgs"
+                    :defaultVal="details.kindpkgs"
+                    searchApi="GetPackage"
+                    :searchQuery="{ KeyWord: '' }"
+                    :showLabel="['name']"
+                    :openSearch="false"
+                    @change="getSelectViewRes">
+                  </selectView>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12" style="overflow: hidden">
+                <a-form-model-item
+                  class="from-label kgs-line-box"
+                  label="毛重"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="kgs">
+                  <div class="line-box">
+                    <a-input size="small" :allowClear="true" v-model="details.kgs" />
+                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
+                    <span class="unit">KGS</span>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12" style="overflow: hidden">
+                <a-form-model-item
+                  class="from-label cbm-line-box"
+                  label="尺寸"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="cbm">
+                  <div class="line-box">
+                    <a-input size="small" :allowClear="true" v-model="details.cbm" />
+                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
+                    <span class="unit">CBM</span>
+                  </div>
+                </a-form-model-item>
+              </a-col>
+              <template v-if="details.cargoid == 'R'">
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="冷藏通风量"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="reeferf"
+                  >
+                    <inputView type="reeferf" size="small" :parentVal="details.reeferf" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="设置温度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempset"
+                  >
+                    <inputView type="tempset" size="small" :parentVal="details.tempset" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="温度单位"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempid"
+                  >
+                    <a-select size="small" :default-value="details.tempid || 'C摄氏'" v-model="details.tempid">
+                      <a-select-option value="C"> C摄氏 </a-select-option>
+                      <a-select-option value="F"> F华氏 </a-select-option>
+                    </a-select>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="最低温度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempmin"
+                  >
+                    <inputView type="tempmin" size="small" :parentVal="details.tempmin" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="最高温度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="tempmax"
+                  >
+                    <inputView type="tempmax" size="small" :parentVal="details.tempmax" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="湿度"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="humidity">
+                    <inputView type="humidity" size="small" :parentVal="details.humidity" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <template v-if="details.cargoid == 'D'">
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品等级"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dclass"
+                  >
+                    <inputView type="dclass" size="small" :parentVal="details.dclass" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品编号"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dunno"
+                  >
+                    <inputView type="dunno" size="small" :parentVal="details.dunno" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品页号"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dpage"
+                  >
+                    <inputView type="dpage" size="small" :parentVal="details.dpage" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品标签"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="dlabel"
+                  >
+                    <inputView type="dlabel" size="small" :parentVal="details.dlabel" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label"
+                    label="危险品联系人"
+                    :labelCol="{
+                      xs: { span: 24 },
+                      sm: { span: 10 },
+                      md: { span: 12 }
+                    }"
+                    :wrapperCol="{
+                      xs: { span: 24 },
+                      sm: { span: 14 },
+                      md: { span: 12 }
+                    }"
+                    has-feedback
+                    prop="linkman"
+                  >
+                    <inputView type="linkman" size="small" :parentVal="details.linkman" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+              </template>
+            </a-col>
+            <a-col class="num-box" :span="24">
+              <span class="label">件数大写: </span>
+              <a-input
+                :allowClear="true"
+                class="input-val num-box-right"
+                v-model="details.totalno"
+                disabled
+                placeholder="自动生成" />
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+      <a-modal :title="modelTitle" :width="900" :visible="visible" @ok="visible = false" @cancel="visible = false">
+        <div>
+          <div v-if="modelType === 1" style="display: flex;">
+            <textareaView
+              class="input-box"
+              id="marks-scroll"
+              :parentVal="details.marks"
+              type="marks"
+              :height="500"
+              style="font-size:20px;margin-right: 10px;"
+              :openToCDB="true"
+              @getTextareaChange="getTextareaChange" />
+            <div
+              class="line-count"
+              id="marks-scroll-right"
+              v-if="Object.keys(details).length > 1 && details.marks.length > 1">
+              <div v-for="(num, index) in details.marks.split('\n')" :key="index">{{ num.length }}</div>
+            </div>
+          </div>
+          <div v-if="modelType === 2" style="display: flex;">
+            <textareaView
+              id="description-scroll"
+              class="input-box"
+              :parentVal="details.description"
+              type="description"
+              :height="500"
+              style="font-size:20px;margin-right: 10px;"
+              :openToCDB="true"
+              @getTextareaChange="getTextareaChange" />
+            <div
+              class="line-count"
+              id="description-scroll-right"
+              v-if="Object.keys(details).length > 1 && details.description.length > 1">
+              <div v-for="(num, index) in details.description.split('\n')" :key="index">{{ num.length }}</div>
+            </div>
+          </div>
+
+        </div>
+      </a-modal>
+      <a-modal width="500px" :maskClosable="false" v-model="textEntryModalVisible" :title="textEntryModalTitle">
+        <div class="text-entry-box">
+          <!-- 件数包装 -->
+          <a-form v-if="textEntryType === 'pkgs'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.pkgstotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="pkgsTextChange" />
+            </div>
+            <div class="total" v-if="pkgstotalRes">总计：{{ pkgstotalRes }}</div>
+          </a-form>
+          <!-- 毛重 -->
+          <a-form v-if="textEntryType === 'kgs'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.kgstotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="kgsTextChange" />
+            </div>
+            <div class="total" v-if="kgstotalRes">总计：{{ kgstotalRes }} / KGS</div>
+          </a-form>
+          <!-- 尺码 -->
+          <a-form v-if="textEntryType === 'cbm'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.cbmtotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="cbmTextChange" />
+            </div>
+            <div class="total" v-if="cbmtotalRes">总计：{{ cbmtotalRes }} / CBM</div>
+          </a-form>
+        </div>
+        <template slot="footer">
+          <a-button type="primary" @click="textEntryClose">确定</a-button>
+        </template>
+      </a-modal>
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+<script>
+
+import textareaView from '../components/textareaView'
+import selectView from '../components/selectView'
+import inputView from '../components/inputView'
+
+let timer;
+export default {
+  name: '',
+  components: {
+    textareaView,
+    selectView,
+    inputView
+  },
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    moreStr: {
+      type: String,
+      default: ''
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    isParent: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      showKey: ['1'],
+      modelTitle: '',
+      modelType: 0,
+      visible: false,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 16 }
+      },
+      labelColCode: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 }
+      },
+      wrapperColCode: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 14 }
+      },
+      shippername: '',
+      consigneename: '',
+      notifypartyname: '',
+      foreignAgentname: '',
+      notifypartY2name: '',
+      modelVisible: false,
+      modelconfirm: false,
+      modelName: '',
+      yardType: '',
+      yardVisible: false,
+      customerModelconfirm: false,
+      textEntryModalVisible: false,
+      textEntryType: '',
+      textEntryModalTitle: '',
+      pkgstotalRes: 0,
+      kgstotalRes: 0,
+      cbmtotalRes: 0,
+      portdischargeHasline: false,
+      destinationidHasline: false,
+      userHasLine: false
+
+      // goodsnameData: []
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        if (!this.inSave) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'cargoInfo'
+          })
+        }
+      },
+      deep: true
+    },
+    moreStr(nval, oval) {
+      if (nval !== oval) {
+        let str = this.details.description
+        if (str.length > 0) {
+          str += '\n'
+        }
+        this.details.description = str + nval
+      }
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+      }
+    }
+  },
+  created() { },
+  mounted() {
+    const marksScroll = document.getElementById('marks-scroll')
+    if (marksScroll) {
+      marksScroll.addEventListener('scroll', () => {
+        document.getElementById('marks-scroll-right').scrollTop = marksScroll.scrollTop
+      })
+    }
+    const descriptionScroll = document.getElementById('description-scroll')
+    if (descriptionScroll) {
+      descriptionScroll.addEventListener('scroll', () => {
+        document.getElementById('description-scroll-right').scrollTop = descriptionScroll.scrollTop
+      })
+    }
+    setTimeout(() => {
+      this.changePkgs()
+    }, 2000)
+  },
+  methods: {
+    SetTOTALNO(SS) {
+      SS = SS.toString()
+      const i = SS.indexOf('\n')
+      let num = 0
+      let strKind = ''
+      let enCapital = ''
+      if (i > 0) {
+        const slist = SS.split('\n')
+        for (let i = 0; i < slist.length; i += 1) {
+          const member = slist[i]
+          const strNum = this.GetStringNum(member)
+          if (i == 0) {
+            strKind = member.substring(strNum.length)
+          }
+          num = parseFloat(num).add(parseFloat(strNum))
+        }
+        if (strKind !== '') {
+          enCapital = strKind
+        } else {
+          strKind = this.details.kindpkgs
+          enCapital = this.ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
+        }
+      } else {
+        const strNum = this.GetStringNum(SS)
+        strKind = SS.substring(strNum.length)
+        if (strKind !== '') {
+          console.log(strKind)
+          enCapital = strKind
+        } else {
+          strKind = this.details.kindpkgs
+          enCapital = 'SAY:' + this.ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
+        }
+      }
+      return enCapital
+    },
+    ToEn(a) {
+      // eslint-disable-next-line no-array-constructor
+      const arr1 = new Array('', ' thousand', ' million', ' billion')
+      const b = a.length
+      let f = null
+      let h = 0
+      let g = ''
+      const e = Math.ceil(b / 3)
+      const k = b - e * 3
+      g = ''
+      for (f = k; f < b; f += 3) {
+        ++h
+        // eslint-disable-next-line no-undef
+        const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
+        // eslint-disable-next-line no-undef
+        const strEng = this.English(num3)
+        // eslint-disable-next-line eqeqeq
+        if (strEng != '') {
+          // eslint-disable-next-line eqeqeq
+          if (g != '') g += ' '
+          g += this.English(num3) + arr1[e - h]
+        }
+      }
+      return g
+    },
+    English(a) {
+      // eslint-disable-next-line no-array-constructor
+      var arr1 = new Array('', ' thousand', ' million', ' billion')
+      // eslint-disable-next-line no-array-constructor
+      var arr2 = new Array('zero', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety')
+      // eslint-disable-next-line no-array-constructor
+      var arr3 = new Array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine')
+      // eslint-disable-next-line no-array-constructor
+      var arr4 = new Array(
+        'ten',
+        'eleven',
+        'twelve',
+        'thirteen',
+        'fourteen',
+        'fifteen',
+        'sixteen',
+        'seventeen',
+        'eighteen',
+        'nineteen'
+      )
+
+      let strRet = ''
+      // eslint-disable-next-line eqeqeq
+      if (a.length == 3 && a.substr(0, 3) != '000') {
+        if (a.substr(0, 1) != '0') {
+          strRet += arr3[a.substr(0, 1)] + ' hundred'
+          if (a.substr(1, 2) != '00') strRet += ' and '
+        } else {
+          strRet += ' and '
+        }
+        a = a.substring(1)
+      }
+      if (a.length == 2) {
+        if (a.substr(0, 1) == '0') a = a.substring(1)
+        else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
+        else {
+          strRet += arr2[a.substr(0, 1)]
+          if (a.substr(1, 1) != '0') strRet += '-'
+          a = a.substring(1)
+        }
+      }
+      if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
+      return strRet
+    },
+    editTextEntryModel(type) {
+      this.textEntryModalVisible = true
+      this.textEntryType = type
+      if (type === 'pkgs') {
+        this.textEntryModalTitle = '件数/包装'
+        if (this.details.pkgstotal) {
+          this.pkgsTextChange()
+        } else {
+          this.pkgstotalRes = 0
+        }
+      } else if (type === 'kgs') {
+        this.textEntryModalTitle = '毛重'
+        if (this.details.kgstotal) {
+          this.kgsTextChange()
+        } else {
+          this.kgstotalRes = 0
+        }
+      } else if (type === 'cbm') {
+        this.textEntryModalTitle = '尺码'
+        if (this.details.cbmtotal) {
+          this.cbmTextChange()
+        } else {
+          this.cbmtotalRes = 0
+        }
+      }
+    },
+    textEntryClose() {
+      this.textEntryModalVisible = false
+      this.textEntryModalTitle = ''
+      this.textEntryType = false
+    },
+    GetStringNum(str) {
+      var num = 0
+      if (str == null || str == '') return num
+      if (str.length == 0) return num
+      var if_find = false
+      var str_num = ''
+      for (var i = 0; i < str.length; i += 1) {
+        var member = str.substr(i, 1)
+        if (
+          member == '0' ||
+          member == '1' ||
+          member == '2' ||
+          member == '3' ||
+          member == '4' ||
+          member == '5' ||
+          member == '6' ||
+          member == '7' ||
+          member == '8' ||
+          member == '9' ||
+          member == '.' ||
+          member == '-'
+        ) {
+          if (!if_find) {
+            str_num = str_num + member
+          }
+        } else {
+          if_find = true
+        }
+      }
+      return str_num
+    },
+    pkgsTextChange() {
+      const pkgsTexyVal = this.details.pkgstotal
+      const arr = pkgsTexyVal.split(/\n|\r/g)
+      let pkgs = 0
+      let kindpkgs = ''
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          pkgs = (pkgs * 100 + num1 * 100) / 100
+        }
+        if (!kindpkgs && regexStr && /^[a-zA-Z]+$/.test(regexStr[1])) {
+          kindpkgs = regexStr[1]
+        }
+      })
+      this.details.pkgs = parseInt(pkgs)
+      this.details.kindpkgs = kindpkgs
+      this.pkgstotalRes = parseInt(pkgs)
+    },
+    kgsTextChange() {
+      const kgsTexyVal = this.details.kgstotal
+      const arr = kgsTexyVal.split(/\n|\r/g)
+      let kgs = 0
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          kgs = (kgs * 100 + num1 * 100) / 100
+        }
+      })
+      this.details.kgs = kgs
+      this.kgstotalRes = kgs
+    },
+    cbmTextChange() {
+      const cbmTexyVal = this.details.cbmtotal
+      const arr = cbmTexyVal.split(/\n|\r/g)
+      let cbm = 0
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          cbm = (cbm * 100 + num1 * 100) / 100
+        }
+      })
+      this.details.cbm = cbm
+      this.cbmtotalRes = cbm
+    },
+    handleOpen(type) {
+      this.modelType = type
+      if (type === 1) {
+        this.modelTitle = '唛头'
+      } else {
+        this.modelTitle = '货物描述'
+      }
+      this.visible = true
+    },
+    debounce(func, wait, ...args) {
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        func.apply(this, args);
+      }, wait);
+    },
+    checkbasic() {
+      this.$refs.cargoFrom.validate(valid => {
+        if (valid) {
+          console.log('验证成功!');
+          return true;
+        } else {
+          console.log('验证失败!');
+          return false;
+        }
+      });
+    },
+    handleChange(value) {
+      this.details.cargoid = value
+    },
+    getTextareaChange({ type, value }) {
+      this.details[type] = value
+      this.$forceUpdate()
+    },
+    getSelectViewRes({ type, res }) {
+      if (type === 'goodsname') {
+        this.details.goodscode = res.goodsCode || ''
+        this.details.goodsname = res.goodsNameEN || ''
+      } else if (type === 'cargoid') {
+        this.details.cargoid = res.code || ''
+      } else if (['kindpkgs'].includes(type)) {
+        this.details.kindpkgs = res['name'] || ''
+        const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
+        this.$emit('pkgsEnCapital', enCapitalRes)
+      }
+    },
+    changePkgs() {
+      const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
+      this.$emit('pkgsEnCapital', enCapitalRes)
+    },
+    inputChange({ type, value }) {
+      this.details[type] = value
+      if (type === 'pkgs') {
+        this.changePkgs()
+      }
+      this.$forceUpdate()
+    },
+    tabStopFun() {
+      return false
+    },
+    tabChangeFun() {
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.copy-btn {
+  margin-left: 10px;
+
+  &:hover {
+    color: @primary-color !important;
+  }
+}
+
+/deep/ .ant-form-explain {
+  display: none !important;
+}
+
+/deep/ .ant-form-item-children-icon .anticon-check-circle {
+  display: none;
+}
+</style>
+<style lang="less" scoped>
+@import url('../style/cargoInfo.less');
+@import url('../style/mailingInfo.less');
+.cargo-info {
+    padding-bottom: 20px;
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/ediMore.vue b/src/views/main/BookingLedger/detail/modulesTest/ediMore.vue
new file mode 100644
index 0000000..0ba81eb
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/ediMore.vue
@@ -0,0 +1,713 @@
+<template>
+  <div class="more-edi" :style="{ paddingTop: '20px', paddingBottom: '10px' }">
+    <a-form-model ref="ediFrom" :model="details" :rules="rules" v-if="details">
+      <div class="normal">
+        <a-row :gutter="16">
+          <a-col :span="8">
+            <a-form-model-item
+              label="发送方EDI代码"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.sendCode"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.sendCode" /> -->
+              <inputView type="sendCode" :parentVal="details.bookingEDIExt.sendCode" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="接收方EDI代码"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.receiveCode"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.receiveCode" /> -->
+              <inputView
+                type="receiveCode"
+                :parentVal="details.bookingEDIExt.receiveCode"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="EDI联系人名称"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.ediAttn"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttn" /> -->
+              <inputView type="ediAttn" :parentVal="details.bookingEDIExt.ediAttn" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="EDI联系人电话"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.ediAttnTel"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttnTel" /> -->
+              <inputView
+                type="ediAttnTel"
+                :parentVal="details.bookingEDIExt.ediAttnTel"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="EDI联系人邮箱"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.ediAttnMail"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.ediAttnMail" /> -->
+              <inputView
+                type="ediAttnMail"
+                :parentVal="details.bookingEDIExt.ediAttnMail"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="AMS收货人"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.amsConsignee"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.amsConsignee" /> -->
+              <inputView
+                type="amsConsignee"
+                :parentVal="details.bookingEDIExt.amsConsignee"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="AMS通知人"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.amsNotifyParty"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.amsNotifyParty" /> -->
+              <inputView
+                type="amsNotifyParty"
+                :parentVal="details.bookingEDIExt.amsNotifyParty"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="操作英文名称"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.opEName"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.opEName" /> -->
+              <inputView type="opEName" :parentVal="details.bookingEDIExt.opEName" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="操作电话"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.opTel"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.opTel" /> -->
+              <inputView type="opTel" :parentVal="details.bookingEDIExt.opTel" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="操作邮箱"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.opEmail"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.opEmail" /> -->
+              <inputView type="opEmail" :parentVal="details.bookingEDIExt.opEmail" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="商品名称"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.goodsName"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.goodsName" /> -->
+              <inputView type="goodsName" :parentVal="details.bookingEDIExt.goodsName" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="SOC箱"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="iscontainersoc"
+            >
+              <a-select size="small" :default-value="iscontainersoc" style="width: 120px" v-model="iscontainersoc">
+                <a-select-option value="1"> 是 </a-select-option>
+                <a-select-option value="0"> 否 </a-select-option>
+              </a-select>
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="SCAC代码"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="scaccode"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.scaccode" /> -->
+              <inputView type="scaccode" :parentVal="details.scaccode" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="ITN编号"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="itncode"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.itncode" /> -->
+              <inputView type="itncode" :parentVal="details.itncode" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="订舱人说明"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.orderRemark"
+            >
+              <!-- <a-input v-model="details.bookingEDIExt.orderRemark" /> -->
+              <inputView
+                type="orderRemark"
+                :placeholder="'订舱人说明或ESL BP CODE'"
+                :parentVal="details.bookingEDIExt.orderRemark"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="付款方"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="freightpayer"
+            >
+              <!-- <a-input :allowClear="true" v-model="details.freightpayer" /> -->
+              <inputView type="freightpayer" :parentVal="details.freightpayer" @getInputChange="inputChange" />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="第一层包装皮重"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.kingTareweight"
+            >
+              <inputView
+                type="kingTareweight"
+                :parentVal="details.bookingEDIExt.kingTareweight"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="8">
+            <a-form-model-item
+              label="指定业务员"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.xmcywy"
+            >
+              <inputView
+                type="xmcywy"
+                :parentVal="details.bookingEDIExt.xmcywy"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col v-if="details.carrierid == 'EMC'" :span="8">
+            <a-form-model-item
+              label="Name accout"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+              has-feedback
+              prop="bookingEDIExt.emcNameAccount"
+            >
+              <inputView
+                type="emcNameAccount"
+                :parentVal="details.bookingEDIExt.emcNameAccount"
+                @getInputChange="inputChange"
+              />
+            </a-form-model-item>
+          </a-col>
+          <a-col :span="23">
+            <a-form-model-item
+              label="委托方"
+              :labelCol="{ xs: { span: 24 }, sm: { span: 3 } }"
+              :wrapperCol="{ xs: { span: 24 }, sm: { span: 21 } }"
+              has-feedback
+              prop="bookingEDIExt.weiTuoFang"
+              style="margin-top:4px;"
+            >
+              <a-textarea
+                size="small"
+                v-model="details.bookingEDIExt.weiTuoFang"
+                :auto-size="{ minRows: 2, maxRows: 5 }"
+              />
+            </a-form-model-item>
+          </a-col>
+        </a-row>
+      </div>
+      <div class="ex-remark">
+        <div class="title">
+          <span class="line left"></span>
+          <span class="text">业务备注</span>
+          <span class="line right"></span>
+        </div>
+        <div class="ex-remark-content">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-model-item
+                label="辅助字段1"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 17 } }"
+                has-feedback
+                prop="bookingEDIExt.exRemark1"
+              >
+                <a-textarea
+                  size="small"
+                  :allowClear="true"
+                  v-model="details.bookingEDIExt.exRemark1"
+                  :auto-size="{ minRows: 2, maxRows: 5 }"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="辅助字段2"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 17 } }"
+                has-feedback
+                prop="bookingEDIExt.exRemark2"
+              >
+                <a-textarea
+                  size="small"
+                  :allowClear="true"
+                  v-model="details.bookingEDIExt.exRemark2"
+                  :auto-size="{ minRows: 2, maxRows: 5 }"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="辅助字段3"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 17 } }"
+                has-feedback
+                prop="bookingEDIExt.exRemark3"
+              >
+                <a-textarea
+                  size="small"
+                  :allowClear="true"
+                  v-model="details.bookingEDIExt.exRemark3"
+                  :auto-size="{ minRows: 2, maxRows: 5 }"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="辅助字段4"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 17 } }"
+                has-feedback
+                prop="bookingEDIExt.exRemark4"
+              >
+                <a-textarea
+                  size="small"
+                  :allowClear="true"
+                  v-model="details.bookingEDIExt.exRemark4"
+                  :auto-size="{ minRows: 2, maxRows: 5 }"
+                />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+      </div>
+      <!-- === 太平添加 start === -->
+      <template v-if="details.carrierid == 'PIL'">
+        <div class="taiping">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-model-item
+                label="收货人EDI代码"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.consigneeEdiCode"
+              >
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.consigneeEdiCode" /> -->
+                <inputView
+                  type="consigneeEdiCode"
+                  :parentVal="details.bookingEDIExt.consigneeEdiCode"
+                  @getInputChange="inputChange"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="发货人EDI代码"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.shipperEdiCode"
+              >
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.shipperEdiCode" /> -->
+                <inputView
+                  type="shipperEdiCode"
+                  :parentVal="details.bookingEDIExt.shipperEdiCode"
+                  @getInputChange="inputChange"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="通知方EDI代码"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.notifyCdoe"
+              >
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.notifyCdoe" /> -->
+                <inputView
+                  type="notifyCdoe"
+                  :parentVal="details.bookingEDIExt.notifyCdoe"
+                  @getInputChange="inputChange"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="太平销售EDI代码"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.salerCode"
+              >
+                <selectView
+                  type="salerCode"
+                  :defaultVal="details.bookingEDIExt.salerCode"
+                  searchApi="salerCode"
+                  :searchQuery="{ NAME: '' }"
+                  :showLabel="['NAME']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                ></selectView>
+                <!-- <a-select size="small" default-value="CN087 | GRACE SUN" v-model="details.bookingEDIExt.salerCode" @change="handleSaleChange">
+                  <a-select-option v-for="(sales, sindex) in StoreSalesRepCode" :value="sales.NAME" :key="sindex">
+                    {{ sales.NAME }}
+                  </a-select-option>
+                </a-select> -->
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="EMANIFEST HBL"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.emanifestHbl"
+              >
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.emanifestHbl" /> -->
+                <inputView
+                  type="emanifestHbl"
+                  :parentVal="details.bookingEDIExt.emanifestHbl"
+                  @getInputChange="inputChange"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="Master Bol Indicator"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.masterBolIndicator"
+              >
+                <selectView
+                  type="masterBolIndicator"
+                  :defaultVal="details.bookingEDIExt.masterBolIndicatorName"
+                  searchApi="StoreMasterBOLIndicator"
+                  :searchQuery="{ NAME: '' }"
+                  :showLabel="['NAME']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                ></selectView>
+                <!-- <a-select size="small" v-model="details.bookingEDIExt.masterBolIndicator" @change="handleMasterBolChange" optionLabelProp="label">
+                  <a-select-option v-for="(master, mindex) in StoreMasterBOLIndicator" :value="mindex" :key="mindex">
+                    {{ master.NAME }}
+                  </a-select-option>
+                </a-select> -->
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="S0C C0C:"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.s0CC0C"
+                style="margin-top:4px;"
+              >
+                <a-textarea
+                  size="small"
+                  :allowClear="true"
+                  v-model="details.bookingEDIExt.s0CC0C"
+                  :auto-size="{ minRows: 2, maxRows: 5 }"
+                />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="欧盟港口、伊朗港口、KHI"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.ckhi"
+                style="margin-top:4px;"
+              >
+                <a-textarea size="small" v-model="details.bookingEDIExt.ckhi" :auto-size="{ minRows: 2, maxRows: 5 }" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+        <div class="taiping-2">
+          <a-row :gutter="16">
+            <a-col :span="12">
+              <a-form-model-item
+                label="南美东"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.cncm"
+              >
+                <a-textarea size="small" v-model="details.bookingEDIExt.cncm" :auto-size="{ minRows: 2, maxRows: 5 }" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="巴西线木质包装情况"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.wncm"
+              >
+                <a-textarea size="small" v-model="details.bookingEDIExt.wncm" :auto-size="{ minRows: 2, maxRows: 5 }" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="ACI HBL:"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.acihbl"
+              >
+                <!-- <a-input :allowClear="true" v-model="details.bookingEDIExt.acihbl" /> -->
+                <inputView type="acihbl" :parentVal="details.bookingEDIExt.acihbl" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-model-item
+                label="CNPT No:"
+                :labelCol="{ xs: { span: 24 }, sm: { span: 9 } }"
+                :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                has-feedback
+                prop="bookingEDIExt.cnptNo"
+              >
+                <inputView type="CNPTNo" :parentVal="details.bookingEDIExt.cnptNo" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+        </div>
+      </template>
+      <!-- === 太平添加 END === -->
+    </a-form-model>
+  </div>
+</template>
+<script>
+import inputView from '../components/inputView'
+import selectView from '../components/selectView'
+let timer
+export default {
+  components: {
+    inputView,
+    selectView
+  },
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    isParent: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      iscontainersoc: '',
+      StoreSalesRepCode: [
+        { ID: 'CN087', NAME: 'CN087 | GRACE SUN' },
+        { ID: 'CN096', NAME: 'CN096 | LEON LIANG' },
+        { ID: 'CN097', NAME: 'CN097 | CHARLES GAO' },
+        { ID: 'CN098', NAME: 'CN098 | TERESA LIU SHAN' },
+        { ID: 'CN106', NAME: 'CN106 | HOKI YU' },
+        { ID: 'CN107', NAME: 'CN107 | WILLIAM YANG JING YU' },
+        { ID: 'CN099', NAME: 'CN099 | HELEN ZHANG' },
+        { ID: 'CN100', NAME: 'CN100 | LEOREN' }
+      ],
+      StoreMasterBOLIndicator: [
+        { ID: '1', NAME: 'Carrier filing HBL | 船公司发HBL' },
+        { ID: '2', NAME: 'Self filing HBL | 自己发' },
+        { ID: '3', NAME: 'Not Applicable/Straight bl | 无HBL' }
+      ]
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        if (!this.inSave) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'ediMore'
+          })
+        }
+      },
+      deep: true
+    },
+    iscontainersoc(nval, oval) {
+      this.details.iscontainersoc = nval !== '0'
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        if (this.$route.name === 'BookingDetail') {
+          this.id = this.$route.query.id
+        }
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    this.iscontainersoc = this.details.iscontainersoc ? '1' : '0'
+  },
+  methods: {
+    debounce(func, wait, ...args) {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        func.apply(this, args)
+      }, wait)
+    },
+    checkbasic() {
+      this.$refs.ediFrom.validate(valid => {
+        if (valid) {
+          return true
+        } else {
+          return false
+        }
+      })
+    },
+    inputChange({ type, value }) {
+      const bookingEDIExtArr = [
+        'sendCode',
+        'receiveCode',
+        'ediAttn',
+        'ediAttnTel',
+        'ediAttnMail',
+        'amsConsignee',
+        'amsNotifyParty',
+        'opEName',
+        'opTel',
+        'opEmail',
+        'goodsName',
+        'orderRemark',
+        'consigneeEdiCode',
+        'shipperEdiCode',
+        'notifyCdoe',
+        'emanifestHbl',
+        'acihbl',
+        'CNPTNo',
+        'kingTareweight',
+        'xmcywy',
+        'emcNameAccount'
+      ]
+      if (bookingEDIExtArr.includes(type)) {
+        this.details.bookingEDIExt[type] = value
+      } else {
+        this.details[type] = value
+      }
+      this.$forceUpdate()
+    },
+    getSelectViewRes({ type, res }) {
+      if (type === 'masterBolIndicator') {
+        this.details.bookingEDIExt.masterBolIndicator = res.ID || ''
+        this.details.bookingEDIExt.masterBolIndicatorName = res.NAME || ''
+      } else if (type === 'salerCode') {
+        this.details.bookingEDIExt.salerCode = res.ID
+        this.details.bookingEDIExt.salerCodeName = res.NAME
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .ant-form-explain {
+  display: none !important;
+}
+
+/deep/ .ant-form-item-children-icon .anticon-check-circle {
+  display: none;
+}
+</style>
+<style lang="less" scoped>
+@import url('../style/ediMore.less');
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/goodsTable.vue b/src/views/main/BookingLedger/detail/modulesTest/goodsTable.vue
new file mode 100644
index 0000000..20f88c4
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/goodsTable.vue
@@ -0,0 +1,1972 @@
+<template>
+  <div class="goods-table">
+    <a-card :bordered="false" :bodyStyle="{ padding: '10px 20px' }">
+      <div class="from-line">
+        <div class="left">
+          <a-button class="btn btn-add" type="primary" @click="addboxLine">添加</a-button>
+          <a-button class="btn btn-delete" @click="removeLine" :style="{ marginRight: '20px' }">删除</a-button>
+          <a-button class="btn btn-more-name" type="primary" @click="openDialog" :disabled="tableData.length === 0">
+            <a-icon type="appstore" />多品名
+          </a-button>
+          <a-button class="btn btn-import-station" type="primary" @click="importYarn" :loading="YarnLoading">
+            <a-icon type="import" />引入场站数据
+          </a-button>
+          <a-button class="btn btn-import-station" type="primary" @click="importsealno" :loading="sealnoLoading">
+            <a-icon type="import" />引入场站箱封号
+          </a-button>
+          <a-button class="btn btn-weight" type="primary" @click="importWeight" :loading="WeightLoading">
+            <a-icon type="import" />引入箱皮重
+          </a-button>
+          <a-button class="btn btn-weight" type="primary" @click="arrowsWeight">
+            <a-icon type="arrows-alt" />展开箱量
+          </a-button>
+        </div>
+        <div class="table-right">
+          <!-- <span>合计: {{ totalCtnall }}</span> -->
+          <span>件数: {{ totalPkgs }} {{ tableData.length > 0 ? tableData[0].kindpkgs : "" }}</span>
+          <span>重量: {{ totalKgs }} KGS</span>
+          <span>尺码: {{ totalCbm }} CBM</span>
+          <span>箱量: {{ details.cntrtotal }}</span>
+        </div>
+      </div>
+      <div v-if="tableLoaded">
+        <!-- rowKeyFieldName="rowKey" -->
+        <ve-table
+          :columns="columns"
+          :table-data="tableData"
+          borderY
+          ref="tableRef"
+          style="min-width: 970"
+          :cell-autofill-option="cellAutofillOption"
+          :editOption="editOption"
+          :rowKeyFieldName="rowKeyName"
+          :rowStyleOption="rowStyleOption"
+          :checkbox-option="checkboxOption"
+          :clipboard-option="clipboardOption"
+          :cellSelectionOption="cellSelectionOption" />
+        <div class="table-no-data" v-if="tableData.length === 0">暂无数据</div>
+      </div>
+      <div class="loading" v-else>加载中 ...</div>
+    </a-card>
+
+    <a-modal
+      title="多品名维护"
+      width="80%"
+      :visible="moreVisible"
+      :confirmLoading="moreModelconfirm"
+      :maskClosable="false"
+      @cancel="handleModelCancel">
+      <div class="model-content">
+        <ve-table
+          style="width: 100%"
+          :columns="modelColumns"
+          :table-data="tableData"
+          :radio-option="radioOption"
+          row-key-field-name="rowKey" />
+        <div class="model-botton-box">
+          <a-button class="btn" type="primary" @click="addChildData">新增</a-button>
+          <a-button class="btn btn-delete" @click="removeChildData">删除</a-button>
+          <a-button class="btn" type="primary" @click="saveChildData">保存</a-button>
+        </div>
+        <div class="model-child-table">
+          <ve-table
+            :columns="childColumns"
+            :table-data="childTableData"
+            borderY
+            :cell-autofill-option="cellAutofillOption"
+            :editOption="editChildOption"
+            rowKeyFieldName="rowKey"
+            :rowStyleOption="rowStyleOption"
+            :checkbox-option="checkChildboxOption"
+            :clipboard-option="clipboardChildOption" />
+          <div class="table-no-data" v-if="childTableData.length === 0">暂无数据</div>
+        </div>
+      </div>
+      <template slot="footer">
+        <a-button @click="handleModelCancel">关闭</a-button>
+      </template>
+    </a-modal>
+  </div>
+</template>
+<script>
+import { GetYardData } from '@/api/modular/main/BookingLedger'
+import { mapGetters } from 'vuex'
+export default {
+  name: '',
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    pType: {
+      type: String,
+      default: 'normal'
+    }
+  },
+  data() {
+    return {
+      id: this.$route.query.id,
+      rowKeyName: 'rowKey',
+      cellSelectionOption: {
+        // disble cell selection
+        enable: true
+      },
+      columns: [
+        {
+          field: '',
+          key: 'checkbox',
+          type: 'checkbox',
+          title: '',
+          width: 40,
+          operationColumn: true,
+          align: 'center'
+        },
+        {
+          field: '',
+          key: 'a',
+          title: '序号',
+          width: 50,
+          align: 'center',
+          operationColumn: true,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return ++rowIndex
+          }
+        },
+        {
+          field: 'ctnall',
+          key: 'ctnall',
+          title: '箱型',
+          align: 'left',
+          width: 80,
+          edit: false,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            this.openEdit = true
+            return (
+              <a-select
+                size="small"
+                value={row['ctnall']}
+                showSearch
+                ref="ctnallView"
+                class="ctnallView"
+                allow-clear={true}
+                style="width: 90px"
+                filter-option={this.filterOption1}
+                on-change={(val) => {
+                  // console.log('== 箱型内部监听change ==')
+                  if (val !== undefined) {
+                    const data = this.ctnallList[val]
+                    this.tableData[rowIndex].ctnall = data.name
+                    this.tableData[rowIndex].ctncode = data.code
+                    row['ctnall'] = data.name
+                    this.$forceUpdate()
+                  } else {
+                    row['ctnall'] = ''
+                    this.tableData[rowIndex].ctnall = ''
+                    this.tableData[rowIndex].ctncode = ''
+                  }
+                }}
+                on-focus={(val) => {
+                  // console.log('== 箱型内部监听focus ==')
+                  this.ctnallViewIndex = rowIndex
+                  this.cellSelectionOption.enable = false
+                }}
+                on-blur={(val) => {
+                  // 箱信息 下拉框自动弹出部分 - 测试中
+                  // console.log('== 箱型内部监听blur ==', this.ctnallViewIndex, rowIndex)
+                  this.cellSelectionOption.enable = true
+                  this.ctnallViewIndex = null
+                }}
+                on-select={(val) => {
+                  this.cellSelectionOption.enable = true
+                  this.setCellSelection(rowIndex, 'ctnall')
+                }}
+              >
+                {this.ctnallList.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnall.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'ctnnum',
+          key: 'ctnnum',
+          title: '箱量',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnnum.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'cntrno',
+          key: 'cntrno',
+          title: '箱号',
+          align: 'left',
+          width: 130,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.cntrno.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'sealno',
+          key: 'sealno',
+          title: '封号',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.sealno.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.pkgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          edit: false,
+          width: 130,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            this.openEdit = true
+            return (
+              <a-select
+                size="small"
+                allow-clear={true}
+                showSearch
+                value={row['kindpkgs']}
+                option-filter-prop="children"
+                filter-option={this.filterOption}
+                style="width: 120px"
+                class="kindpkgsView"
+                on-change={(val) => {
+                  if (val !== undefined) {
+                    const data = this.packageList[val]
+                    this.tableData[rowIndex].kindpkgs = data.name
+                    row['kindpkgs'] = data.name
+                    setTimeout(() => {
+                      this.tableData.map((item, index) => {
+                        item.kindpkgs = this.packageList[val].name || ''
+                      })
+                    }, 300)
+                    this.$forceUpdate()
+                  } else {
+                    row['kindpkgs'] = ''
+                    this.tableData[rowIndex].kindpkgs = ''
+                    this.tableData.map((item, index) => {
+                      if (index !== rowIndex) {
+                        item.kindpkgs = ''
+                        document
+                          .getElementsByClassName('kindpkgsView')
+                        [index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML = ''
+                      }
+                    })
+                  }
+                  this.$emit('changeCtnInfo', { type: 'kindpkgs', val: row['kindpkgs'] })
+                }}
+                on-focus={(val) => {
+                  this.kindpkgsViewIndex = rowIndex
+                  this.cellSelectionOption.enable = false
+                  // console.log('=获取焦点=', rowIndex, this.kindpkgsViewIndex)
+                }}
+                on-blur={(val) => {
+                  // 箱信息 下拉框自动弹出部分 - 测试中
+                  this.cellSelectionOption.enable = true
+                  this.kindpkgsViewIndex = null
+                }}
+                on-input={(val) => {
+                  // console.log('== input - 修改内容==', val)
+                }}
+                on-select={(val) => {
+                  this.cellSelectionOption.enable = true
+                  this.setCellSelection(rowIndex, 'kindpkgs')
+                }}
+              >
+                {this.packageList.map((item, index) => {
+                  return <a-select-option value={index}>{item.code}</a-select-option>
+                })}
+              </a-select>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.kindpkgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'kgs',
+          key: 'kgs',
+          title: '重量',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.kgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.cbm.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'tareweight',
+          key: 'tareweight',
+          title: '箱皮重',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.tareweight.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'weightype',
+          key: 'weightype',
+          title: '称重方式',
+          align: 'left',
+          width: 120,
+          edit: false,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                size="small"
+                show-search
+                value={row['weightype']}
+                option-filter-prop="children"
+                style="width: 80px"
+                on-change={(val) => {
+                  this.tableData[rowIndex].weightype = val
+                  row['weightype'] = val
+                  if (row['weightype'] === '累加') {
+                    row['weighkgs'] = this.calc(Number(row['kgs']), Number(row['tareweight']), '+')
+                  } else {
+                    row['weighkgs'] = ''
+                  }
+                  this.$forceUpdate()
+                }}
+                on-blur={(val) => {
+                  // 箱信息 下拉框自动弹出部分 - 测试中
+                  this.cellSelectionOption.enable = true
+                }}
+                on-focus={(val) => {
+                  this.cellSelectionOption.enable = false
+                }}
+              >
+                <a-select-option value="累加">累加</a-select-option>
+                <a-select-option value="总重">总重</a-select-option>
+              </a-select>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.weightype.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'weighkgs',
+          key: 'weighkgs',
+          title: '称重重量',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.weighkgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        {
+          field: 'weighdate',
+          key: 'weighdate',
+          title: '称重日期',
+          align: 'left',
+          width: 120,
+          edit: false,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-date-picker
+                value={row['weighdate']}
+                on-change={(date, dateString) => {
+                  // console.log('== 选择日期 ==', dateString)
+                  this.tableData[rowIndex].weighdate = dateString
+                  row['weighdate'] = dateString
+                }}
+              />
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.weightype.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        }
+      ],
+      modelColumns: [
+        {
+          field: '',
+          key: 'radio',
+          type: 'radio',
+          title: '',
+          width: 40,
+          operationColumn: true,
+          align: 'center'
+        },
+        {
+          field: 'ctnall',
+          key: 'ctnall',
+          title: '箱型',
+          align: 'left',
+          width: 80
+        },
+        {
+          field: 'ctnnum',
+          key: 'ctnnum ',
+          title: '箱量',
+          align: 'left'
+        },
+        {
+          field: 'cntrno',
+          key: 'cntrno',
+          title: '箱号',
+          align: 'left',
+          width: 240
+        },
+        {
+          field: 'sealno',
+          key: 'sealno',
+          title: '封号',
+          align: 'left'
+        },
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left'
+        },
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          width: 130
+        },
+        {
+          field: 'kgs',
+          key: 'kgs',
+          title: '毛重',
+          align: 'left'
+        },
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left'
+        }
+      ],
+      childColumns: [
+        {
+          field: '',
+          key: 'checkbox',
+          type: 'checkbox',
+          title: '',
+          width: 40,
+          operationColumn: true,
+          align: 'center'
+        },
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left',
+          edit: true
+        },
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          edit: false,
+          width: 130,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                show-search
+                value={row['kindpkgs']}
+                option-filter-prop="children"
+                style="width: 120px"
+                on-change={(val) => {
+                  const data = this.packageList[val]
+                  row['kindpkgs'] = data.name
+                  this.childTableData[rowIndex].kindpkgs = data.name
+                  this.$forceUpdate()
+                }}
+              >
+                {this.packageList.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          }
+        },
+        {
+          field: 'kgs',
+          key: 'kgs',
+          title: '毛重',
+          align: 'left',
+          edit: true
+        },
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left',
+          edit: true
+        },
+        {
+          field: 'hscode',
+          key: 'hscode',
+          title: 'HS代码',
+          align: 'left',
+          edit: true
+        },
+        {
+          field: 'marks',
+          key: 'marks',
+          title: '唛头',
+          align: 'left',
+          edit: true
+        },
+        {
+          field: 'description',
+          key: 'description',
+          title: '货描',
+          align: 'left',
+          width: '25%',
+          edit: true
+        }
+      ],
+      tableData: [],
+      editOption: {
+        beforeCellValueChange: ({ row, column, changeValue }) => {
+          if (this.inTableLoad) {
+            return false
+          }
+          if (
+            ['pkgs', 'kgs', 'cbm', 'tareweight'].includes(column.field) &&
+            !new RegExp(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(changeValue)
+          ) {
+            const height = document.body.clientHeight - 100
+            this.$message.config({
+              top: `${height}px`,
+              duration: 2,
+              maxCount: 3
+            })
+            this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
+            setTimeout(() => {
+              this.$message.destroy()
+              this.$message.config({
+                top: `100px`,
+                duration: 2,
+                maxCount: 3
+              })
+            }, 2000)
+            return false
+          }
+          if (column.field === 'cntrno') {
+            const res = this.checkCntrno(changeValue)
+            if (res !== '') {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error(res)
+              // row['cntrno'] = ''
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            }
+          }
+        },
+        afterCellValueChange: ({ row, column, changeValue }) => {
+          if (this.inTableLoad) {
+            return false
+          }
+          if (['kgs', 'cbm', 'tareweight', 'weighkgs'].includes(column.field)) {
+            changeValue = changeValue + ''
+            const valIndex = changeValue.includes('.') ? changeValue.indexOf('.') + 1 : false
+            const valCount = changeValue.length - valIndex
+            if (valIndex && valCount > 5) {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('仅支持小数点后五位')
+              row[column.field] = changeValue.substr(0, valIndex + 5)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            } else {
+              const arrayNum = changeValue.split('.')
+              if (!/\./.test(changeValue)) {
+                row[column.field] = changeValue + '.00'
+              } else if (arrayNum[1].length < 2) {
+                row[column.field] = changeValue + '0'
+              }
+            }
+          }
+          if (column.field === 'pkgs') {
+            if (!/(^[1-9]\d*$)/.test(changeValue)) {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('件数请输入整数')
+              const cNum = changeValue.indexOf('.')
+              row[column.field] = changeValue.substr(0, cNum)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            } else {
+            }
+            let num = 0
+            this.tableData.map((item, index) => {
+              if (item.pkgs) {
+                num += Number(item.pkgs)
+              }
+            })
+            this.totalPkgs = num
+          }
+          if (column.field === 'kgs') {
+            let num = 0
+            this.tableData.map((item, index) => {
+              num = (num * 10000 + Number(item.kgs) * 10000) / 10000
+              // num += Number(item.kgs)
+            })
+            num += ''
+            const pNum = num.split('.')
+            if (!/\./.test(num)) {
+              this.totalKgs = num + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalKgs = num + '0'
+            } else {
+              this.totalKgs = Number(pNum[0] + '.' + pNum[1].substr(0, 5))
+              // this.totalKgs = num
+            }
+          }
+          if (column.field === 'cbm') {
+            let num = 0
+            this.tableData.map((item, index) => {
+              // num += Number(item.cbm)
+              num = (num * 10000 + Number(item.cbm) * 10000) / 10000
+            })
+            num += ''
+            const pNum = num.split('.')
+            if (!/\./.test(num)) {
+              this.totalCbm = num + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalCbm = num + '0'
+            } else {
+              // this.totalCbm = num
+              this.totalCbm = Number(pNum[0] + '.' + pNum[1].substr(0, 5))
+            }
+          }
+          if (column.field === 'kgs' || column.field === 'tareweight') {
+            // let nowIndex = 0
+            // this.tableData.map((item, index) => {
+            //   if (item.rowKey === row.rowKey) {
+            //     nowIndex = index
+            //   }
+            // })
+            // this.tableData[nowIndex]['weighkgs'] = Number(this.tableData[nowIndex].kgs) + Number(this.tableData[nowIndex].tareweight)
+            // row['weighkgs'] = Number(row['kgs']) + Number(row['tareweight'])
+            // debugger
+            row['weighkgs'] = this.calc(Number(row['kgs']), Number(row['tareweight']), '+')
+            const kgsVal = row['weighkgs'] + ''
+            const kgsIndex = kgsVal.includes('.') ? kgsVal.indexOf('.') + 1 : false
+            const kgsCount = kgsVal.includes('.') ? kgsVal.length - kgsIndex : false
+            if (kgsCount > 4) {
+              row['weighkgs'] = kgsVal.substr(0, kgsIndex + 5)
+            } else if (!kgsIndex) {
+              row['weighkgs'] = kgsVal + '.00'
+            } else {
+              const arrayNum = kgsVal.split('.')
+              if (!/\./.test(kgsVal)) {
+                row['weighkgs'] = kgsVal + '.00'
+              } else if (arrayNum[1].length < 2) {
+                row['weighkgs'] = kgsVal + '0'
+              }
+            }
+          }
+        },
+        cellValueChange: ({ row, column }) => { }
+      },
+      editChildOption: {
+        beforeCellValueChange: ({ row, column, changeValue }) => {
+          if (
+            ['pkgs', 'kgs', 'cbm'].includes(column.field) &&
+            !new RegExp(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(changeValue)
+          ) {
+            // const height = document.body.clientHeight - 100
+            // this.$message.config({
+            //   top: `${height}px`,
+            //   duration: 2,
+            //   maxCount: 3,
+            // })
+            this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
+            row['cntrno'] = ''
+            setTimeout(() => {
+              this.$message.destroy()
+              this.$message.config({
+                top: `100px`,
+                duration: 2,
+                maxCount: 3
+              })
+            }, 2000)
+            return false
+          }
+        },
+        afterCellValueChange: ({ row, column, changeValue }) => {
+          let num = null
+          this.childTableData.map((item, index) => {
+            if (row.rowKey === item.rowKey) {
+              // eslint-disable-next-line no-const-assign
+              num = index
+            }
+          })
+          this.childTableData[num][column.field] = changeValue
+          // 暂时屏蔽 - 根据需求放开
+          // this.details.ctnInputs[this.childModelSelectIndex].ctnDetailInputs[num][column.field] = changeValue
+          this.$forceUpdate()
+        },
+        cellValueChange: ({ row, column }) => { }
+      },
+      // 可控单元格编辑
+      rowStyleOption: {
+        clickHighlight: false,
+        hoverHighlight: false
+      },
+      cellAutofillOption: true,
+      checkboxOption: {
+        hideSelectAll: false,
+        // 可控属性
+        selectedRowKeys: [],
+        // 行选择改变事件
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          this.changeSelectedRowKeys(selectedRowKeys)
+          // this.selectArr = selectedRowKeys
+        },
+        // 全选改变事件
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          if (isSelected) {
+            this.changeSelectedRowKeys(selectedRowKeys)
+            // this.selectArr = selectedRowKeys
+          } else {
+            this.selectArr = []
+          }
+        }
+      },
+      checkChildboxOption: {
+        hideSelectAll: false,
+        // 行选择改变事件
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          console.log(row, isSelected, selectedRowKeys)
+          this.selectChildArr = selectedRowKeys
+        },
+        // 全选改变事件
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          if (isSelected) {
+            this.selectChildArr = selectedRowKeys
+          } else {
+            this.selectChildArr = []
+          }
+        }
+      },
+      // 单元格复制
+      clipboardOption: {
+        copy: true,
+        paste: true,
+        cut: true,
+        delete: true,
+        beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        }
+      },
+      clipboardChildOption: {
+        copy: true,
+        paste: true,
+        cut: true,
+        delete: true,
+        beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        }
+      },
+      tableLoaded: false,
+      // ctnList: [],
+      // packageList: [],
+      selectArr: [],
+      totalCtnall: '',
+      totalPkgs: 0,
+      totalKgs: 0,
+      totalCbm: 0,
+      moreVisible: false,
+      moreModelconfirm: false,
+      radioOption: {
+        // 行选择改变事件
+        selectedRowChange: ({ row }) => {
+          this.childModelSelect = row
+          this.tableData.map((item, index) => {
+            if (item.rowKey === row.rowKey) {
+              this.childModelSelectIndex = index
+            }
+          })
+          if (this.tableData[this.childModelSelectIndex].ctnDetailInputs) {
+            this.tableData[this.childModelSelectIndex].ctnDetailInputs.map((item, index) => {
+              item.rowKey = index
+            })
+            this.childTableData = this.tableData[this.childModelSelectIndex].ctnDetailInputs
+          } else {
+            this.childTableData = []
+          }
+        }
+      },
+      childTableData: [],
+      childModelSelect: null,
+      childModelSelectIndex: null,
+      selectChildArr: [],
+      YarnLoading: false,
+      sealnoLoading: false,
+      WeightLoading: false,
+      ctnallViewIndex: null,
+      kindpkgsViewIndex: null,
+      inTableLoad: false,
+      openEdit: false
+    }
+  },
+  computed: {
+    ...mapGetters(['packageList', 'ctnallList'])
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        // console.log('=== 修改table内容 ===', nval.ctnInputs, this.pType, this.inTableLoad)
+        if (!this.inSave && !this.inTableLoad) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'goodsTable'
+          })
+          // if (this.pType === 'secOrder' && !this.inTableLoad && this.$route.name === 'BookingDetail') {
+          //   this.init()
+          // }
+        }
+      },
+      deep: true
+    },
+    tableData: {
+      handler(nval, oval) {
+        this.details.ctnInputs = nval
+      },
+      deep: true
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        if (this.$route.query.isCopy) {
+          this.id = ''
+        } else {
+          this.id = this.$route.query.id
+        }
+
+        // if (this.$route.name === 'BookingDetail') {
+        //   // this.init()
+        // }
+      }
+    },
+    totalKgs() {
+      this.$emit('changeTotal', {
+        type: 'totalKgs',
+        val: this.totalKgs
+      })
+    },
+    totalPkgs() {
+      this.$emit('changeTotal', {
+        type: 'totalPkgs',
+        val: this.totalPkgs
+      })
+    },
+    totalCbm() {
+      this.$emit('changeTotal', {
+        type: 'totalCbm',
+        val: this.totalCbm
+      })
+    },
+    openEdit(nval, oval) {
+
+    }
+  },
+  created() {
+    this.init()
+  },
+  mounted() {
+    const editDom = document.getElementsByClassName('ve-table-body-tr')
+    document.onkeydown = (event) => {
+      editDom.forEach((item, index) => {
+        item.children.forEach(ite => {
+          if (ite.classList.contains('ve-table-cell-selection')) {
+            this.kindpkgsViewIndex = index
+          }
+        })
+      })
+      if (event.key === 'Backspace' && this.kindpkgsViewIndex !== null) {
+        const val = document
+          .getElementsByClassName('kindpkgsView')
+        [this.kindpkgsViewIndex].getElementsByTagName('input')[0].value
+        document
+          .getElementsByClassName('kindpkgsView')
+        [this.kindpkgsViewIndex].getElementsByTagName('input')[0].value = val.substr(0, val.length - 1)
+        var evt = document.createEvent('HTMLEvents');
+        evt.initEvent('input', true, false);
+        document.getElementsByClassName('kindpkgsView')[this.kindpkgsViewIndex].getElementsByTagName('input')[0].dispatchEvent(evt);
+      }
+      if (event.key === 'Backspace' && this.kindpkgsViewIndex !== null) {
+        const val = document
+          .getElementsByClassName('ctnallView')
+        [this.kindpkgsViewIndex].getElementsByTagName('input')[0].value
+        document
+          .getElementsByClassName('ctnallView')
+        [this.kindpkgsViewIndex].getElementsByTagName('input')[0].value = val.substr(0, val.length - 1)
+        var evt = document.createEvent('HTMLEvents');
+        evt.initEvent('input', true, false);
+        document.getElementsByClassName('ctnallView')[this.kindpkgsViewIndex].getElementsByTagName('input')[0].dispatchEvent(evt);
+      }
+      const arr = []
+      if (document.getElementsByClassName('ant-select-dropdown').length > 0) {
+        document.getElementsByClassName('ant-select-dropdown').forEach((item) => {
+          const style = item.style
+          if (style.display !== 'none') {
+            arr.push(1)
+          }
+        })
+      }
+      if (arr.length === 0) {
+        this.cellSelectionOption.enable = true
+        if ([37, 38, 39, 40, 9].includes(event.keyCode)) {
+          if (arr.length === 0) {
+            setTimeout(() => {
+              const activeDom = document.getElementsByClassName('ve-table-cell-selection')[0].firstChild
+              if (this.isDOM(activeDom)) {
+                activeDom.click()
+              }
+            }, 200)
+          }
+        }
+      } else {
+        this.cellSelectionOption.enable = false
+      }
+    }
+  },
+  methods: {
+    keydown(e) {
+      console.log(e)
+    },
+    isDOM(item) {
+      // 首先判断是否支持HTMLELement，如果支持，使用HTMLElement，如果不支持，通过判断DOM的特征，如果拥有这些特征说明就是ODM节点，特征使用的越多越准确
+      return typeof HTMLElement === 'function'
+        ? item instanceof HTMLElement
+        : item && typeof item === 'object' && item.nodeType === 1 && typeof item.nodeName === 'string'
+    },
+    // 给可控属性重新赋值
+    changeSelectedRowKeys(keys) {
+      this.selectArr = keys
+      this.checkboxOption.selectedRowKeys = keys
+    },
+    startEditingCell(rowKey, colKey, defaultValue) {
+      this.$refs['tableRef'].startEditingCell({ rowKey, colKey, defaultValue })
+    },
+    setCellSelection(rowKey, colKey) {
+      this.$refs['tableRef'].setCellSelection({ rowKey, colKey })
+    },
+    init() {
+      this.inTableLoad = true
+      if (Object.keys(this.details).length > 0) {
+        const arr = []
+        const totalCtnall = {}
+        this.totalPkgs = 0
+        this.totalKgs = 0
+        this.totalCbm = 0
+        this.details.ctnInputs.map((item, index) => {
+          arr.push({
+            ...{ rowKey: index },
+            ...item
+          })
+          if (!Object.keys(totalCtnall).includes(item.ctnall)) {
+            const cData = {
+              type: 'ctnall',
+              num: item.ctnnum
+            }
+            this.$set(totalCtnall, item.ctnall, cData)
+          }
+          if (item.pkgs) {
+            this.totalPkgs = (this.totalPkgs * 100 + Number(item.pkgs) * 100) / 100
+          }
+          if (item.kgs) {
+            let onum = (this.totalKgs * 10000 + Number(item.kgs) * 10000) / 10000
+            onum += ''
+            const pNum = onum.split('.')
+            if (!/\./.test(onum)) {
+              this.totalKgs = onum + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalKgs = onum + '0'
+            } else {
+              this.totalKgs = Number(pNum[0] + '.' + pNum[1].substr(0, 5))
+            }
+          }
+          if (item.cbm) {
+            let onum = (this.totalCbm * 10000 + Number(item.cbm) * 10000) / 10000
+            onum += ''
+            const pNum = onum.split('.')
+            if (!/\./.test(onum)) {
+              this.totalCbm = onum + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalCbm = onum + '0'
+            } else {
+              this.totalCbm = Number(pNum[0] + '.' + pNum[1].substr(0, 5))
+            }
+          }
+        })
+        this.tableData = arr
+        this.tableLoaded = true
+        this.totalCtnall = ''
+      } else {
+        this.tableData = []
+        this.tableLoaded = true
+        this.totalCtnall = ''
+        this.totalPkgs = 0
+        this.totalKgs = 0
+        this.totalCbm = 0
+      }
+      setTimeout(() => {
+        this.inTableLoad = false
+      }, 1200)
+    },
+    filterOption1(input, option) {
+      return (
+        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      );
+    },
+    filterOption(input, option) {
+      const search = option.componentOptions.children[0].text.toLowerCase()
+      const inputStr = input.toLowerCase()
+      const arr = []
+      for (let i = 0; i < inputStr.length; i++) {
+        if (inputStr[i] === search[i]) {
+          arr.push(1)
+        }
+      }
+      if (arr.length === inputStr.length) {
+        return true
+      }
+    },
+    enmuErrorLabel(val) {
+      switch (val) {
+        case 'cntrno':
+          return '箱型'
+        case 'pkgs':
+          return '件数'
+        case 'kgs':
+          return '重量'
+        case 'cbm':
+          return '尺码'
+        case 'tareweight':
+          return '箱皮重'
+        default:
+          return '内容'
+      }
+    },
+    addboxLine() {
+      const data = {
+        ctnall: '',
+        ctnnum: '1',
+        cntrno: '',
+        sealno: '',
+        pkgs: '',
+        kindpkgs: this.tableData.length > 0 ? this.tableData[0].kindpkgs : '',
+        kgs: '',
+        cbm: '',
+        tareweight: '',
+        weightype: '累加',
+        weighkgs: '',
+        weighdate: '',
+        rowKey: this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+      }
+      this.tableData.push(data)
+    },
+    removeLine() {
+      this.selectArr.map((item, index) => {
+        this.tableData.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            this.tableData.splice(oindex, 1)
+          }
+        })
+      })
+      let kgs = 0
+      this.tableData.map((item, index) => {
+        kgs += Number(item.kgs)
+      })
+      this.totalKgs = kgs
+
+      let cbm = 0
+      this.tableData.map((item, index) => {
+        cbm += Number(item.cbm)
+      })
+      this.totalCbm = cbm
+
+      let pkgs = 0
+      this.tableData.map((item, index) => {
+        pkgs += Number(item.pkgs)
+      })
+      this.totalPkgs = pkgs
+      this.checkboxOption.selectedRowKeys = []
+      this.selectArr = []
+      this.tableData.forEach((item, index) => {
+        item.rowKey = index
+      })
+    },
+    developboxLine() {
+      const arr = []
+      let key = 0
+      this.tableData.map((item, index) => {
+        const num = Number(item.ctnnum)
+        if (num > 1) {
+          let surplusPkgs = item.pkgs
+          let surpluskgs = item.kgs * 100000
+          let surpluscbm = item.cbm * 100000
+          for (let i = 0; i < num; i++) {
+            // eslint-disable-next-line prefer-const
+            let sunData = JSON.parse(JSON.stringify(item))
+            sunData.ctnnum = 1
+            sunData.rowKey = key
+            key++
+            if (!/(^[1-9]\d*$)/.test(sunData.pkgs / num)) {
+              if (i !== num - 1) {
+                const averagePkgs = sunData.pkgs / num + ''
+                const cNum = averagePkgs.indexOf('.')
+                sunData.pkgs = Number(averagePkgs.substr(0, cNum))
+                surplusPkgs = surplusPkgs - sunData.pkgs
+              } else {
+                sunData.pkgs = surplusPkgs
+              }
+            } else {
+              sunData.pkgs = sunData.pkgs / num
+            }
+
+            if (!/(^[1-9]\d*$)/.test((sunData.kgs * 100000) / num)) {
+              if (i !== num - 1) {
+                const averagekgs = (sunData.kgs * 100000) / num + ''
+                const cNum = averagekgs.indexOf('.')
+                sunData.kgs = Number(averagekgs.substr(0, cNum)) / 100000
+                surpluskgs = surpluskgs - Number(averagekgs.substr(0, cNum))
+              } else {
+                sunData.kgs = surpluskgs / 100000
+              }
+            } else {
+              sunData.kgs = (sunData.kgs * 100000) / num / 100000
+            }
+
+            if (!/(^[1-9]\d*$)/.test((sunData.cbm * 100000) / num)) {
+              if (i !== num - 1) {
+                const averagecbm = (sunData.cbm * 100000) / num + ''
+                const cNum = averagecbm.indexOf('.')
+                sunData.cbm = Number(averagecbm.substr(0, cNum)) / 100000
+                surpluscbm = surpluscbm - Number(averagecbm.substr(0, cNum))
+              } else {
+                sunData.cbm = surpluscbm / 100000
+              }
+            } else {
+              sunData.cbm = (sunData.cbm * 100000) / num / 100000
+            }
+            if (sunData.weightype === '累加') {
+              sunData['weighkgs'] = this.calc(Number(sunData['kgs']), Number(sunData['tareweight']), '+')
+            }
+            arr.push(sunData)
+          }
+        } else {
+          item.rowKey = key
+          key++
+          arr.push(item)
+        }
+      })
+      this.tableData = arr
+    },
+    openDialog() {
+      if (this.tableData.length === 0) {
+        return false
+      }
+      this.moreVisible = true
+    },
+    handleModelSubmit() { },
+    handleModelCancel() {
+      this.moreVisible = false
+    },
+    addChildData() {
+      if (!this.childModelSelect) {
+        this.$message.error('请选择数据')
+        return false
+      }
+      let $pkgs = 0
+      let $kgs = 0
+      let $cbm = 0
+      this.childTableData.map((item, index) => {
+        $pkgs += Number(item.pkgs)
+        $kgs += Number(item.kgs)
+        $cbm += Number(item.cbm)
+      })
+      const data = {
+        rowKey:
+          this.childTableData.length > 0 ? Number(this.childTableData[this.childTableData.length - 1].rowKey) + 1 : 0,
+        pkgs: Number(this.childModelSelect.pkgs) - $pkgs > 0 ? Number(this.childModelSelect.pkgs) - $pkgs : 0,
+        kindpkgs: '',
+        kgs: Number(this.childModelSelect.kgs) - $kgs > 0 ? Number(this.childModelSelect.kgs) - $kgs : 0,
+        cbm: Number(this.childModelSelect.cbm) - $cbm > 0 ? Number(this.childModelSelect.cbm) - $cbm : 0,
+        hscode: this.details.hscode,
+        marks: this.details.marks,
+        description: this.details.description
+      }
+      this.childTableData.push(data)
+    },
+    removeChildData() {
+      this.selectChildArr.map((item, index) => {
+        this.childTableData.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            this.childTableData.splice(oindex, 1)
+          }
+        })
+      })
+    },
+    saveChildData() {
+      if (!this.childModelSelect) {
+        this.$message.error('请选择数据')
+        return false
+      }
+      let $pkgs = 0
+      let $kgs = 0
+      let $cbm = 0
+      this.childTableData.map((item, index) => {
+        $pkgs += Number(item.pkgs)
+        $kgs += Number(item.kgs)
+        $cbm += Number(item.cbm)
+      })
+      if (Number(this.childModelSelect.pkgs) < $pkgs) {
+        this.$message.error('件数输入错误')
+        return false
+      }
+      if (Number(this.childModelSelect.kgs) < $kgs) {
+        this.$message.error('毛重输入错误')
+        return false
+      }
+      if (Number(this.childModelSelect.cbm) < $cbm) {
+        this.$message.error('尺码输入错误')
+        return false
+      }
+      this.details.ctnInputs[this.childModelSelectIndex].ctnDetailInputs = this.childTableData
+      this.$message.success('已保存')
+    },
+    importsealno() {
+      this.sealnoLoading = true
+      GetYardData({
+        bookingId: this.id,
+        isWeb: false
+      })
+        .then((res) => {
+          if (res.success) {
+            let type = true
+            this.tableData.forEach((item) => {
+              if (item.sealno || item.cntrno) {
+                this.$message.error('请清空所有箱封号后再引入')
+                type = false
+              }
+            })
+            if (type) {
+              const data = JSON.parse(res.data)
+              if (data.length == this.tableData.length) {
+                console.log(this.tableData, data)
+                data.forEach((item, index) => {
+                  this.tableData[index].sealno = item.SEALNO
+                  this.tableData[index].cntrno = item.CNTRNO
+                })
+              } else {
+                this.$message.error('箱量与场站不一致')
+              }
+            }
+
+            {
+              /* const addTable = []
+            const cntrnoArr = []
+            this.tableData.map((item, index) => {
+              if (!item.cntrno) {
+                this.tableData.splice(index, 1)
+              } else {
+                cntrnoArr.push(item.cntrno)
+              }
+            })
+            const lastNum = this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+            data.map((item, index) => {
+              if (cntrnoArr.includes(item.CNTRNO)) {
+                this.tableData[cntrnoArr.indexOf(item.CNTRNO)] = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  ctnnum: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnnum,
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  pkgs: item.PKGS,
+                  kindpkgs: item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weightype,
+                  weighkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weighkgs,
+                  weighdate: item.WEIGHDATE
+                }
+              } else {
+                const _data = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  ctnnum: '1',
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  pkgs: item.PKGS,
+                  kindpkgs: item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: '',
+                  weighkgs: '',
+                  weighdate: item.WEIGHDATE
+                }
+                addTable.push(_data)
+              }
+            })
+
+            this.tableData = [...this.tableData, ...addTable]
+            this.$forceUpdate() */
+            }
+          } else {
+            this.$message.error(res.message)
+          }
+          this.sealnoLoading = false
+        })
+        .catch((err) => {
+          console.log(err)
+          this.sealnoLoading = false
+        })
+    },
+    importYarn() {
+      if (!this.id) {
+        this.$message.error('请先保存订舱信息')
+        return false
+      }
+      this.YarnLoading = true
+      GetYardData({
+        bookingId: this.id,
+        isWeb: false
+      })
+        .then((res) => {
+          if (res.success) {
+            const data = JSON.parse(res.data)
+            const addTable = []
+            const cntrnoArr = []
+            let kindpkgsOld = ''
+            for (let i = this.tableData.length - 1; i >= 0; i--) {
+              if (!this.tableData[i].cntrno) {
+                this.tableData.splice(i, 1)
+              } else {
+                cntrnoArr.push(this.tableData[i].cntrno)
+              }
+              if (this.tableData[i] && this.tableData[i].kindpkgs !== '') {
+                kindpkgsOld = this.tableData[i].kindpkgs
+              }
+            }
+            const lastNum = this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+            data.map((item, index) => {
+              if (cntrnoArr.includes(item.CNTRNO)) {
+                this.tableData[cntrnoArr.indexOf(item.CNTRNO)] = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  CtnCode: item.CtnCode,
+                  ctnnum: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnnum,
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  pkgs: item.PKGS,
+                  kindpkgs: kindpkgsOld || item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weightype,
+                  weighkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weighkgs,
+                  weighdate: item.WEIGHDATE
+                }
+              } else {
+                const _data = {
+                  rowKey: lastNum + index,
+                  ctnall: item.CTNALL,
+                  ctnnum: '1',
+                  cntrno: item.CNTRNO,
+                  sealno: item.SEALNO,
+                  CtnCode: item.CtnCode,
+                  pkgs: item.PKGS,
+                  kindpkgs: kindpkgsOld || item.KINDPKGS,
+                  kgs: item.KGS,
+                  cbm: item.CBM,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: '',
+                  weighkgs: '',
+                  weighdate: item.WEIGHDATE
+                }
+                addTable.push(_data)
+              }
+            })
+
+            this.tableData = [...this.tableData, ...addTable]
+            console.log(this.tableData)
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+          this.YarnLoading = false
+        })
+        .catch((err) => {
+          console.log(err)
+          this.YarnLoading = false
+        })
+    },
+    arrowsWeight() {
+      console.log(`选中${this.selectArr}`)
+      if (this.selectArr.length != 1) {
+        this.$message.error('请选择一条数据')
+      } else {
+        console.log(this.tableData, this.selectArr[0])
+        console.log(this.tableData[this.selectArr[0]])
+        if (this.tableData[this.selectArr[0]].ctnnum > 1) {
+          console.log(
+            parseFloat(this.tableData[this.selectArr[0]].ctnnum),
+            parseFloat(this.tableData[this.selectArr[0]].pkgs)
+          )
+          if (
+            (parseFloat(this.tableData[this.selectArr[0]].ctnnum) <= parseFloat(this.tableData[this.selectArr[0]].pkgs) || !this.tableData[this.selectArr[0]].pkgs)
+          ) {
+            const tableData = this.tableData
+            const data = []
+            let num = 0
+            let totalPkgs = 0
+            let totalKgs = 0
+            let totalCbm = 0
+            tableData.forEach((item, index) => {
+              parseFloat(item.pkgs) ? (totalPkgs = totalPkgs + parseFloat(item.pkgs)) : ''
+              parseFloat(item.kgs) ? (totalKgs = totalKgs + parseFloat(item.kgs)) : ''
+              parseFloat(item.cbm) ? (totalCbm = totalCbm + parseFloat(item.cbm)) : ''
+              if (index == this.selectArr[0]) {
+                for (let index = 0; index < item.ctnnum; index++) {
+                  let pkgs = 0
+                  let kgs = 0
+                  let cbm = 0
+                  if (index == item.ctnnum - 1) {
+                    pkgs =
+                      parseInt(item.pkgs / item.ctnnum) +
+                      parseInt(item.pkgs) -
+                      parseInt(parseInt(item.pkgs / item.ctnnum) * item.ctnnum)
+                    kgs = (
+                      parseFloat((item.kgs / item.ctnnum).toFixed(2)) +
+                      parseFloat(item.kgs) -
+                      parseFloat(parseFloat((item.kgs / item.ctnnum).toFixed(2)) * item.ctnnum)
+                    ).toFixed(2)
+                    cbm = (
+                      parseFloat((item.cbm / item.ctnnum).toFixed(2)) +
+                      parseFloat(item.cbm) -
+                      parseFloat(parseFloat((item.cbm / item.ctnnum).toFixed(2)) * item.ctnnum)
+                    ).toFixed(2)
+                  } else {
+                    pkgs = parseInt(item.pkgs / item.ctnnum)
+                    kgs = parseFloat((item.kgs / item.ctnnum).toFixed(2))
+                    cbm = parseFloat((item.cbm / item.ctnnum).toFixed(2))
+                  }
+                  num = num + 1
+                  data.push({
+                    ...item,
+                    ctnnum: 1,
+                    rowKey: num,
+                    id: '',
+                    pkgs: pkgs,
+                    kgs: kgs,
+                    cbm: cbm
+                  })
+                }
+              } else {
+                num = num + 1
+                data.push({ ...item, rowKey: num })
+              }
+            })
+            this.totalPkgs = totalPkgs
+            this.totalKgs = totalKgs.toFixed(2)
+            this.totalCbm = totalCbm.toFixed(2)
+              data.forEach(item => {
+                if (!this.tableData[this.selectArr[0]].pkgs) {
+                  item.pkgs = ''
+                }
+                if (!this.tableData[this.selectArr[0]].kgs) {
+                  item.kgs = ''
+                }
+                if (!this.tableData[this.selectArr[0]].cbm) {
+                  item.cbm = ''
+                }
+              })
+            this.tableData = data
+            this.$forceUpdate()
+          } else {
+            this.$message.error('所选数据的件数应大于等于箱量')
+          }
+        } else {
+          this.$message.error('所选数据的箱量应大于1')
+        }
+      }
+    },
+    importWeight() {
+      if (!this.id) {
+        this.$message.error('请先保存订舱信息')
+        return false
+      }
+      this.WeightLoading = true
+      GetYardData({
+        bookingId: this.id,
+        isWeb: false
+      })
+        .then((res) => {
+          if (res.success) {
+            const data = JSON.parse(res.data)
+            const addTable = []
+            const cntrnoArr = []
+            this.tableData.map((item, index) => {
+              if (!item.cntrno) {
+                // delete this.tableData[index]
+                this.tableData.splice(index, 1)
+              } else {
+                cntrnoArr.push(item.cntrno)
+              }
+            })
+            const lastNum = this.tableData.length > 0 ? Number(this.tableData[this.tableData.length - 1].rowKey) + 1 : 0
+            data.map((item, index) => {
+              if (cntrnoArr.includes(item.CNTRNO)) {
+                const setWeighkgs = this.calc(
+                  Number(this.tableData[cntrnoArr.indexOf(item.CNTRNO)].kgs),
+                  Number(item.TAREWEIGHT),
+                  '+'
+                )
+                this.tableData[cntrnoArr.indexOf(item.CNTRNO)] = {
+                  rowKey: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].rowKey,
+                  ctnall: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnall,
+                  ctnnum: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].ctnnum,
+                  cntrno: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].cntrno,
+                  sealno: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].sealno,
+                  pkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].pkgs,
+                  kindpkgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].kindpkgs,
+                  kgs: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].kgs,
+                  cbm: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].cbm,
+                  tareweight: item.TAREWEIGHT,
+                  weightype: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weightype,
+                  weighkgs: setWeighkgs,
+                  weighdate: this.tableData[cntrnoArr.indexOf(item.CNTRNO)].weighdate
+                }
+              } else {
+                const _data = {
+                  rowKey: lastNum + index,
+                  ctnall: '',
+                  ctnnum: '1',
+                  cntrno: '',
+                  sealno: '',
+                  pkgs: '',
+                  kindpkgs: '',
+                  kgs: '',
+                  cbm: '',
+                  tareweight: item.TAREWEIGHT,
+                  weightype: '',
+                  weighkgs: '',
+                  weighdate: ''
+                }
+                addTable.push(_data)
+              }
+            })
+            this.tableData = [...this.tableData, ...addTable]
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+          this.WeightLoading = false
+        })
+        .catch((err) => {
+          console.log(err)
+          this.WeightLoading = false
+        })
+    },
+    log({ data, selectionRangeIndexes, selectionRangeKeys }) {
+      // console.log('data::', data)
+      // console.log('selectionRangeIndexes::', selectionRangeIndexes)
+      // console.log('selectionRangeKeys::', selectionRangeKeys)
+    },
+    calc(num1, num2, calcStr) {
+      var str1 // 转换为字符串的数字
+      var str2
+      var ws1 = 0 // ws1，ws2 用来存储传入的num的小数点后的数字的位数
+      var ws2 = 0 // 赋默认值，解决当整数和小数运算时倍数计算错误导致的结果误差
+      var bigger // bigger和smaller用于加，减，除法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题；乘法需要将结果除两个数字的倍数之和
+      var smaller // 例如：加减除法中1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误；乘法中1.12*1.1会放大为112*11，所以结果需要除以1000才会是正确的结果，112*11/1000=1.232
+      var zeroCount // 需要补充0的个数
+      var isExistDot1 // 传入的数字是否存在小数点
+      var isExistDot2
+      var sum
+      var beishu = 1
+      // 将数字转换为字符串
+      str1 = num1.toString()
+      str2 = num2.toString()
+      // 是否存在小数点（判断需要计算的数字是不是包含小数）
+      isExistDot1 = str1.indexOf('.') != -1
+      isExistDot2 = str2.indexOf('.') != -1
+      // 取小数点后面的位数
+      if (isExistDot1) {
+        ws1 = str1.split('.')[1].length
+      }
+
+      if (isExistDot2) {
+        ws2 = str2.split('.')[1].length
+      }
+      // 如ws1 和 ws2 无默认值，如果num1 或 num2 不是小数的话则 ws1 或 ws2 的值将为 undefined
+      // bigger 和 smaller 的值会和预期不符
+      bigger = ws1 > ws2 ? ws1 : ws2
+      smaller = ws1 < ws2 ? ws1 : ws2
+
+      switch (calcStr) {
+        // 加减法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题
+        // 例如：1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误
+        case '+':
+        case '-':
+        case '/':
+          zeroCount = bigger - smaller
+          for (var i = 0; i < zeroCount; i++) {
+            if (ws1 == smaller) {
+              str1 += '0'
+            } else {
+              str2 += '0'
+            }
+          }
+          break
+        case '*':
+          // 乘法需要将结果除两个数字的倍数之和
+          bigger = bigger + smaller
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+          break
+      }
+
+      // 去除数字中的小数点
+      str1 = str1.replace('.', '')
+      str2 = str2.replace('.', '')
+
+      // 计算倍数，例如：1.001小数点后有三位，则需要乘 1000 变成 1001，变成整数后精度丢失问题则不会存在
+      for (var i = 0; i < bigger; i++) {
+        beishu *= 10 // 等价于beishu = beishu * 10;
+      }
+      num1 = parseInt(str1)
+      num2 = parseInt(str2)
+      // 进行最终计算并除相应倍数
+      switch (calcStr) {
+        case '+':
+          sum = (num1 + num2) / beishu
+          break
+        case '-':
+          sum = (num1 - num2) / beishu
+          break
+        case '*':
+          sum = (num1 * num2) / beishu
+          break
+        case '/':
+          sum = num1 / num2
+          /* 除数与被除数同时放大一定倍数，不影响结果，
+      所以对数字进行放大对应倍数并进行补0操作后不用另对倍数做处理 */
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+      }
+
+      return sum
+    },
+    checkCntrno(val) {
+      let str = ''
+      if (val.length !== 11) {
+        str = '箱号长度不符合规则'
+      } else if (val.split('')[3] !== 'U' && val.split('')[3] !== 'u') {
+        str = '输入的箱号不符合规则'
+      }
+      val.split('').map((item, index) => {
+        if (index < 3 && !new RegExp(/^[a-zA-Z]+$/).test(item)) {
+          str = '输入的箱号不符合规则'
+        } else if (index > 4 && !new RegExp(/^[0-9]+$/).test(item)) {
+          str = '输入的箱号不符合规则'
+        }
+      })
+      return str
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.from-line {
+  margin: 0 0 10px 0;
+  overflow: hidden;
+
+  .left {
+    text-align: left;
+    width: 660px;
+    float: left;
+
+    .btn {
+      margin-right: 10px;
+      font-size: 14px;
+      padding: 0 4px;
+      line-height: 25px;
+      height: 28px;
+    }
+
+    .btn-delete {
+      border: 1px solid #ff6646;
+      background: #fdf2f0;
+      color: #ff6646;
+
+      &:hover {
+        border: 1px solid #ff6646 !important;
+        background: #fdf2f0 !important;
+        color: #ff6646 !important;
+        opacity: 0.7;
+      }
+    }
+
+    .btn-more-name,
+    .btn-import-station,
+    .btn-weight {
+      position: relative;
+      border: 1px solid @primary-color;
+      color: @primary-color;
+      background: none;
+
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        background-color: @primary-color !important;
+        opacity: 0.04;
+      }
+
+      &:hover {
+        opacity: 0.7;
+      }
+    }
+  }
+
+  .table-right {
+    line-height: 28px;
+    font-size: 14px;
+    min-width: 260px;
+    float: right;
+
+    span {
+      margin-left: 10px;
+      color: #666;
+      font-weight: 600;
+    }
+  }
+}
+
+.model-content {
+  .model-botton-box {
+    margin: 40px 0 20px;
+
+    .btn {
+      margin-right: 10px;
+    }
+
+    .btn-delete {
+      border: 1px solid #ff6646;
+      background: #fdf2f0;
+      color: #ff6646;
+
+      &:hover {
+        border: 1px solid #ff6646 !important;
+        background: #fdf2f0 !important;
+        color: #ff6646 !important;
+        opacity: 0.7;
+      }
+    }
+  }
+}
+
+.table-no-data {
+  width: 100%;
+  text-align: center;
+  line-height: 60px;
+}
+
+.text-bold {
+  text-align: center;
+  width: 100%;
+  display: block;
+}
+
+.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td,
+.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.ve-table-body-td {
+  padding: 0 5px;
+}
+
+// /deep/ .ve-table-container{
+//   height: auto !important;
+// }
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/mailingInfo.vue b/src/views/main/BookingLedger/detail/modulesTest/mailingInfo.vue
new file mode 100644
index 0000000..497c891
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/mailingInfo.vue
@@ -0,0 +1,1946 @@
+<template>
+  <a-collapse class="collapse-box" :bordered="false" v-model="showKey">
+    <a-collapse-panel key="1" :showArrow="false">
+      <template slot="header">
+        <div class="base-tit">
+          <i class="iconfont icon-a-fahuodaifahuo"></i>收发通信息
+          <span class="click-btn" @click.stop="tabStopFun"></span>
+        </div>
+      </template>
+      <template slot="extra">
+        <div class="tab-change"><i class="iconfont icon-xia" :class="{ active: !showKey.includes('1') }"></i></div>
+      </template>
+      <div class="mail-info" style="padding-bottom: 18px;">
+        <a-form-model :selfUpdate="true" ref="mailingFrom" :model="details" :rules="rules">
+          <a-row :gutter="10">
+            <a-col
+              class="left-sender-box"
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="10"
+              :xl="8">
+              <a-form-model-item has-feedback prop="shipper" class="sender-label" style="overflow: hidden">
+                <div class="sender">
+                  <a-tooltip v-if="details.carrierid === 'PIL'">
+                    <template slot="title">
+                      <p>PIL要求 EDI和ESI报文只允许所有报文中的每个record中的ascii代码，必须小于0x7E，大于等于0x20, 每个Record必须250字节,必填项为数值类型的，不足位数用0补齐。
+                      </p>
+                      <p>1、发货人Rec16，收货人Rec21，通知人Rec26: 公司抬头两行，地址三行，每行35字节；</p>
+                      <p>2、第1/2行是公司抬头栏（字段23-92），总共70字节，不足70字节请留空占位；</p>
+                      <p>3、第3/4/5行是地址栏（字段93-197），总共105字节，超过105字节，通过星号*链接去rec47品名栏显示；</p>
+                      <p>4、极个别情况下，公司抬头可能超过70字节，超出部分放在第三行；</p>
+                      <p> 5、无论什么情况，报文里地址信息都不放在在第1/2两行，即不占23-92字段。</p>
+                    </template>
+                    <div class="move-btn"><a-icon type="info-circle" /></div>
+                  </a-tooltip>
+                  <div class="top" :class="{ required: rules['shipper'] && rules['shipper'][0].required }">
+                    <div class="name"><span
+                      @click="handleOpen(1)"
+                      style="cursor: pointer;"
+                      class="copy-btn iconfont icon-bianji"></span>发货人</div>
+                    <selectView
+                      type="shippername"
+                      ref="shippernameInput"
+                      :defaultVal="shippername"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ TemplateName: '', Type: this.enmuType('shipper') }"
+                      :showLabel="['title']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                      style="flex: 1"></selectView>
+                    <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('shipper')">
+                      保存
+                    </a-button>
+                    <div class="right">
+                      <span class="btn-circle" @click="spliceMore('shipper')" :style="{ fontSize: '14px' }">*</span>
+                      <span class="btn" @click="changeCode(35, 'shipper')">35</span>
+                      <span class="btn" @click="changeCode(40, 'shipper')">40</span>
+                      <span class="btn" @click="changeCode(50, 'shipper')">50</span>
+                    </div>
+                  </div>
+                  <div class="bottom">
+                    <textareaView
+                      id="shipper-scroll"
+                      :parentVal="details.shipper"
+                      type="shipper"
+                      :openToCDB="true"
+                      @getTextareaChange="getTextareaChange" />
+                    <div
+                      class="line-count"
+                      id="shipper-scroll-right"
+                      v-if="Object.keys(details).length > 1 && details.shipper.length > 0">
+                      <div v-for="(num, index) in details.shipper.split('\n')" :key="index">{{ num.length }}</div>
+                    </div>
+                  </div>
+                </div>
+              </a-form-model-item>
+              <a-form-model-item has-feedback prop="consignee" class="sender-label" style="overflow: hidden">
+                <div class="consignee">
+                  <div class="top" :class="{ required: rules['consignee'] && rules['consignee'][0].required }">
+                    <div class="name"><span
+                      @click="handleOpen(2)"
+                      style="cursor: pointer;"
+                      class="copy-btn iconfont icon-bianji"></span>收货人</div>
+                    <selectView
+                      type="consigneename"
+                      ref="consigneenameInput"
+                      :defaultVal="consigneename"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ TemplateName: '', Type: this.enmuType('consignee') }"
+                      :showLabel="['title']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                      style="flex: 1"></selectView>
+                    <a-button
+                      class="save-btn"
+                      type="link"
+                      size="small"
+                      icon="save"
+                      @click="saveModel('consignee')">保存</a-button>
+                    <div class="right">
+                      <span class="btn-circle" @click="spliceMore('consignee')" :style="{ fontSize: '14px' }">*</span>
+                      <span class="btn" @click="changeCode(35, 'consignee')">35</span>
+                      <span class="btn" @click="changeCode(40, 'consignee')">40</span>
+                      <span class="btn" @click="changeCode(50, 'consignee')">50</span>
+                    </div>
+                  </div>
+                  <div class="bottom">
+                    <textareaView
+                      id="consignee-scroll"
+                      :parentVal="details.consignee"
+                      type="consignee"
+                      :openToCDB="true"
+                      @getTextareaChange="getTextareaChange" />
+                    <div
+                      class="line-count"
+                      id="consignee-scroll-right"
+                      v-if="Object.keys(details).length > 1 && details.consignee.length > 0">
+                      <div v-for="(num, index) in details.consignee.split('\n')" :key="index">{{ num.length }}</div>
+                    </div>
+                  </div>
+                </div>
+              </a-form-model-item>
+              <a-form-model-item has-feedback prop="notifyparty" class="sender-label" style="overflow: hidden">
+                <div class="notifier">
+                  <a-tooltip>
+                    <template slot="title"> 收货人复制到通知人 </template>
+                    <div class="move-btn" @click="toNotifyparty"><i class="iconfont icon-jiantouxia"></i></div>
+                  </a-tooltip>
+                  <div class="top" :class="{ required: rules['notifyparty'] && rules['notifyparty'][0].required }">
+                    <div class="name">
+                      <span
+                        @click="handleOpen(3)"
+                        style="cursor: pointer;"
+                        class="copy-btn iconfont icon-bianji"></span>通知人
+                      <span style="cursor: pointer;" @click="visibleTwo = true">第二</span>
+                    </div>
+                    <selectView
+                      type="notifypartyname"
+                      ref="notifypartynameInput"
+                      :defaultVal="notifypartyname"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ TemplateName: '', Type: this.enmuType('notifyparty') }"
+                      :showLabel="['title']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                      style="flex: 1"></selectView>
+                    <a-button
+                      class="save-btn"
+                      type="link"
+                      size="small"
+                      icon="save"
+                      @click="saveModel('notifyparty')">保存</a-button>
+                    <div class="right">
+                      <span class="btn-circle" @click="spliceMore('notifyparty')" :style="{ fontSize: '14px' }">*</span>
+                      <span class="btn" @click="changeCode(35, 'notifyparty')">35</span>
+                      <span class="btn" @click="changeCode(40, 'notifyparty')">40</span>
+                      <span class="btn" @click="changeCode(50, 'notifyparty')">50</span>
+                    </div>
+                  </div>
+                  <div class="bottom">
+                    <textareaView
+                      id="notifyparty-scroll"
+                      :parentVal="details.notifyparty"
+                      type="notifyparty"
+                      :openToCDB="true"
+                      @getTextareaChange="getTextareaChange" />
+                    <div
+                      class="line-count"
+                      id="notifyparty-scroll-right"
+                      v-if="Object.keys(details).length > 1 && details.notifyparty.length > 0">
+                      <div v-for="(num, index) in details.notifyparty.split('\n')" :key="index">{{ num.length }}</div>
+                    </div>
+                  </div>
+                </div>
+              </a-form-model-item>
+            </a-col>
+            <a-col
+              class="right-content"
+              :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="14"
+              :xl="16">
+              <a-row :gutter="4">
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="收货地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="placereceiptid">
+                    <selectView
+                      type="placereceiptid"
+                      :defaultVal="details.placereceiptid"
+                      searchApi="GetPortloadlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['ediCode', 'enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="收货地"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="placereceipt">
+                    <inputView
+                      type="placereceipt"
+                      size="small"
+                      :parentVal="details.placereceipt"
+                      @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label yarn-label"
+                    label="场站"
+                    :labelCol="{ xs: { span: 24 },
+                                 sm: { span: 5 },
+                                 md: { span: 5 }}"
+                    :wrapperCol="{ xs: { span: 24 },
+                                   sm: { span: 19 },
+                                   md: { span: 19 }}"
+                    has-feedback
+                    style="overflow: visible"
+                    prop="yard">
+                    <div class="yard-box" style="display: flex">
+                      <selectView
+                        type="yard"
+                        :defaultVal="details.yard"
+                        searchApi="GetYardlist"
+                        :searchQuery="{ keyword: '' }"
+                        :showLabel="['name', 'showCode']"
+                        :openSearch="false"
+                        @change="getSelectViewRes"
+                        style="flex: 1; margin-top: -4px"></selectView>
+                      <i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
+                      <i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="场站费自结"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="feeself">
+                    <a-radio-group size="small" v-model="details.feeself">
+                      <a-radio size="small" :value="true"> 是 </a-radio>
+                      <a-radio size="small" :value="false"> 否 </a-radio>
+                    </a-radio-group>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="装货港代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="portloadid">
+                    <selectView
+                      type="portloadid"
+                      :defaultVal="details.portloadid"
+                      searchApi="GetPortloadlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['ediCode', 'enName']"
+                      :openSearch="true"
+                      :isCopy="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="装货港"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="portload">
+                    <inputView type="portload" size="small" :parentVal="details.portload" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="截港时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="closingdate">
+                    <datePickerView
+                      class="date-picker"
+                      style="min-width: 100px"
+                      :showTime="true"
+                      :parentVal="details.closingdate"
+                      type="closingdate"
+                      format="YYYY-MM-DD HH:00"
+                      @dateChange="dateChangeFun"></datePickerView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6" >
+                  <a-form-model-item
+                    class="from-label"
+                    label="船代"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="shipagency"
+                  >
+                    <selectView
+                      ref="shipagency"
+                      type="shipagency"
+                      :defaultVal="details.shipagency"
+                      searchApi="GetForwarderlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['name', 'showCode']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="中转港代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="transportid">
+                    <selectView
+                      type="transportid"
+                      :defaultVal="details.transportid"
+                      searchApi="GetPortlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['ediCode', 'enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="中转港"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="transport">
+                    <inputView
+                      type="transport"
+                      size="small"
+                      :parentVal="details.transport"
+                      @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="截单时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="closedocdate">
+                    <datePickerView
+                      class="date-picker"
+                      style="min-width: 100px"
+                      :showTime="true"
+                      :parentVal="details.closedocdate"
+                      type="closedocdate"
+                      format="YYYY-MM-DD HH:00"
+                      @dateChange="dateChangeFun"></datePickerView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="报关行"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="customser">
+                    <selectView
+                      type="customser"
+                      :defaultVal="details.customser"
+                      searchApi="DjyCustomerpage"
+                      :searchQuery="{ SearchValue: '', PropString: 'customs_broker' }"
+                      :showLabel="['shortName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="卸货港代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="portdischargeid">
+                    <selectView
+                      type="portdischargeid"
+                      :defaultVal="details.portdischargeid"
+                      searchApi="GetPortlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['ediCode', 'enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="卸货港"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="portdischarge">
+                    <inputView
+                      type="portdischarge"
+                      size="small"
+                      :parentVal="details.portdischarge"
+                      @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="VGM时间"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="closevgmdate">
+                    <datePickerView
+                      class="date-picker"
+                      style="min-width: 100px"
+                      :showTime="true"
+                      :parentVal="details.closevgmdate"
+                      type="closevgmdate"
+                      format="YYYY-MM-DD HH:00"
+                      @dateChange="dateChangeFun"></datePickerView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="车队"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="trucker">
+                    <selectView
+                      type="trucker"
+                      :defaultVal="details.trucker"
+                      searchApi="DjyCustomerpage"
+                      :searchQuery="{ SearchValue: '', PropString: 'fleet' }"
+                      :showLabel="['shortName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="目的地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="destinationid">
+                    <selectView
+                      type="destinationid"
+                      :defaultVal="details.destinationid"
+                      searchApi="GetPortlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['ediCode', 'enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="目的地"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="destination">
+                    <inputView
+                      type="destination"
+                      size="small"
+                      :parentVal="details.destination"
+                      @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="航线"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="lineName"
+                  >
+                    <selectView
+                      type="lineName"
+                      :defaultVal="details.lineName"
+                      searchApi="GetTenantLineList"
+                      :searchQuery="{ LineName: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="国外代理"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="agentname">
+                    <div style="display: flex;align-items: center;">
+                      <selectView
+                        type="agentname"
+                        :defaultVal="details.agentname"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'out_agent' }"
+                        :showLabel="['shortName']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"
+                        style="flex: 1;"></selectView>
+                      <a-icon
+                        v-if="ishd"
+                        @click="handleOpenFd"
+                        style="color: #13c2c2;cursor: pointer;"
+                        theme="filled"
+                        type="diff" />
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="交货地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="placedeliveryid">
+                    <selectView
+                      type="placedeliveryid"
+                      :defaultVal="details.placedeliveryid"
+                      searchApi="GetPortlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['ediCode', 'enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="交货地"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="placedelivery">
+                    <inputView
+                      type="placedelivery"
+                      size="small"
+                      :parentVal="details.placedelivery"
+                      @getInputChange="inputChange" />
+                    <!-- <a-input :allowClear="true" v-model="details.placedelivery" /> -->
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="装运方式"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="shippingMethod">
+                    <selectView
+                      type="shippingMethod"
+                      :defaultVal="details.shippingMethod"
+                      searchApi="ShippingMethod"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      :isCopy="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="仓库"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="warehouse">
+                    <selectView
+                      type="warehouse"
+                      :defaultVal="details.warehouse"
+                      searchApi="DjyCustomerpage"
+                      :searchQuery="{ SearchValue: '', PropString: 'warehouse' }"
+                      :showLabel="['shortName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="24">
+                  <div style="height: 1px;background: rgb(170 176 185);margin: 5px 0;"></div>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单方式"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="issuetype"
+                  >
+                    <selectView
+                      type="issuetype"
+                      :defaultVal="details.issuetype"
+                      searchApi="Codeissuetypelist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName', 'cnName']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单日期"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="issuedate"
+                  >
+                    <datePickerView
+                      class="date-picker"
+                      :parentVal="details.issuedate"
+                      type="issuedate"
+                      format="YYYY-MM-DD"
+                      @dateChange="dateChangeFun"
+                    ></datePickerView>
+                    <!-- <a-date-picker size="small" v-model="details.issuedate" format="YYYY-MM-DD" /> -->
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单地点"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="issueplace"
+                  >
+                    <selectView
+                      type="issueplace"
+                      :defaultVal="details.issueplace"
+                      searchApi="GetPortloadlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="true"
+                      :isCopy="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="签单地代码"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="issueplaceid"
+                  >
+                    <inputView type="issueplaceid" size="small" :parentVal="details.issueplaceid" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="付费方式"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="blfrt"
+                  >
+                    <selectView
+                      type="blfrt"
+                      :defaultVal="details.blfrt"
+                      searchApi="GetFrt"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="预付地点"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="prepardat"
+                  >
+                    <selectView
+                      type="prepardat"
+                      :defaultVal="details.prepardat"
+                      searchApi="GetPortloadlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="true"
+                      :isCopy="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="到付地点"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="payableat"
+                  >
+                    <selectView
+                      type="payableat"
+                      :defaultVal="details.payableat"
+                      searchApi="GetPortlist"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['enName']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="第三付款地"
+                    :labelCol="labelColCode"
+                    :wrapperCol="wrapperColCode"
+                    has-feedback
+                    prop="thirdpayaddr"
+                  >
+                    <inputView type="thirdpayaddr" size="small" :parentVal="details.thirdpayaddr" @getInputChange="inputChange"/>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="运输条款"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="service"
+                  >
+                    <selectView
+                      type="service"
+                      :defaultVal="details.service"
+                      searchApi="GetService"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['name']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="提单份数"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="nobill"
+                  >
+                    <selectView
+                      type="nobill"
+                      :defaultVal="details.nobill"
+                      searchApi="nobillData"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="副本份数"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="copynobill"
+                  >
+                    <selectView
+                      type="copynobill"
+                      :defaultVal="details.copynobill"
+                      searchApi="copynobilllData"
+                      :searchQuery="{ name: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes"
+                    ></selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="24">
+                  <div style="height: 1px;background: rgb(170 176 185);margin: 5px 0;"></div>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item prop="soremark">
+                    <div class="tit" :class="{'required':rules['soremark'] && rules['soremark'][0].required}"><span class="iconfont icon-bianji"></span>订舱备注</div>
+                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.soremark" />
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12">
+                  <a-form-model-item prop="siremark">
+                    <div class="tit" :class="{'required':rules['siremark'] && rules['siremark'][0].required}"><span class="iconfont icon-bianji"></span>截单备注</div>
+                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
+                  </a-form-model-item>
+                </a-col>
+                <!-- <a-col :span="12">
+                  <a-form-model-item
+                    class="from-label pkgs-line-box"
+                    label="件数"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="pkgs">
+                    <div class="line-box">
+                      <a-input
+                        :allowClear="true"
+                        size="small"
+                        v-model="details.pkgs"
+                        type="number"
+                        @change="changePkgs" />
+                      <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('pkgs')"></i>
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12" style="overflow: hidden">
+                  <a-form-model-item
+                    class="from-label"
+                    label="包装"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="kindpkgs">
+                    <selectView
+                      type="kindpkgs"
+                      :defaultVal="details.kindpkgs"
+                      searchApi="GetPackage"
+                      :searchQuery="{ KeyWord: '' }"
+                      :showLabel="['name']"
+                      :openSearch="false"
+                      @change="getSelectViewRes">
+                    </selectView>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12" style="overflow: hidden">
+                  <a-form-model-item
+                    class="from-label kgs-line-box"
+                    label="毛重"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="kgs">
+                    <div class="line-box">
+                      <a-input size="small" :allowClear="true" v-model="details.kgs" />
+                      <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
+                      <span class="unit">KGS</span>
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+                <a-col :span="12" style="overflow: hidden">
+                  <a-form-model-item
+                    class="from-label cbm-line-box"
+                    label="尺寸"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="cbm">
+                    <div class="line-box">
+                      <a-input size="small" :allowClear="true" v-model="details.cbm" />
+                      <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
+                      <span class="unit">CBM</span>
+                    </div>
+                  </a-form-model-item>
+                </a-col> -->
+              </a-row>
+            </a-col>
+          </a-row>
+        </a-form-model>
+      </div>
+      <a-modal
+        title="保存模板"
+        :width="900"
+        :visible="modelVisible"
+        :confirmLoading="modelconfirm"
+        :maskClosable="false"
+        @ok="handleModelSubmit"
+        @cancel="handleModelCancel">
+        <div class="content">
+          <div class="label">模板名称</div>
+          <a-input :allowClear="true" v-model="modelName" />
+        </div>
+      </a-modal>
+      <a-modal
+        :title="yardType === 'remark' ? '场站备注' : '场站联系人'"
+        :width="yardType === 'remark' ? 600 : 1000"
+        :visible="yardVisible"
+        :maskClosable="false"
+        @ok="ModelyardTypeOk"
+        @cancel="ModelyardTypeCancel">
+        <template v-if="yardType === 'remark'">
+          <div class="select-customer">
+            <a-textarea v-model="details.yardremark" :auto-size="{ minRows: 3, maxRows: 5 }" />
+          </div>
+        </template>
+        <template v-else-if="yardType === 'content'">
+          <a-form>
+            <a-row>
+              <a-col :span="12">
+                <a-form-model-item
+                  class="from-label"
+                  label="联系人"
+                  :labelCol="YardlabelCol"
+                  :wrapperCol="YardwrapperCol"
+                  has-feedback
+                  style="overflow: visible">
+                  <a-input v-model="details.yardcontract" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item
+                  class="from-label"
+                  label="电话"
+                  :labelCol="YardlabelCol"
+                  :wrapperCol="YardwrapperCol"
+                  has-feedback
+                  style="overflow: visible">
+                  <a-input v-model="details.yardcontracttel" />
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item
+                  class="from-label"
+                  label="邮箱"
+                  :labelCol="YardlabelCol"
+                  :wrapperCol="YardwrapperCol"
+                  has-feedback
+                  style="overflow: visible">
+                  <a-input v-model="details.yardcontractemail" />
+                </a-form-model-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </template>
+      </a-modal>
+      <!-- == 件重尺编辑模板 == -->
+      <a-modal width="500px" :maskClosable="false" v-model="textEntryModalVisible" :title="textEntryModalTitle">
+        <div class="text-entry-box">
+          <!-- 件数包装 -->
+          <a-form v-if="textEntryType === 'pkgs'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.pkgstotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="pkgsTextChange" />
+            </div>
+            <div class="total" v-if="pkgstotalRes">总计：{{ pkgstotalRes }}</div>
+          </a-form>
+          <!-- 毛重 -->
+          <a-form v-if="textEntryType === 'kgs'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.kgstotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="kgsTextChange" />
+            </div>
+            <div class="total" v-if="kgstotalRes">总计：{{ kgstotalRes }} / KGS</div>
+          </a-form>
+          <!-- 尺码 -->
+          <a-form v-if="textEntryType === 'cbm'">
+            <div class="text-input">
+              <a-textarea
+                v-model="details.cbmtotal"
+                placeholder="请输入内容"
+                :auto-size="{ minRows: 6, maxRows: 9 }"
+                @change="cbmTextChange" />
+            </div>
+            <div class="total" v-if="cbmtotalRes">总计：{{ cbmtotalRes }} / CBM</div>
+          </a-form>
+        </div>
+        <template slot="footer">
+          <a-button type="primary" @click="textEntryClose">确定</a-button>
+        </template>
+      </a-modal>
+      <a-modal :title="modelTitle" :width="950" :visible="visible" @ok="visible = false" @cancel="visible = false">
+        <div>
+          <div v-if="modalType === 1" style="display: flex;">
+            <textareaView
+              id="shipper-scroll"
+              :parentVal="details.shipper"
+              type="shipper"
+              :height="500"
+              style="font-size:20px;margin-right: 10px;"
+              :openToCDB="true"
+              @getTextareaChange="getTextareaChange" />
+            <div
+              class="line-count"
+              id="shipper-scroll-right"
+              v-if="Object.keys(details).length > 1 && details.shipper.length > 0">
+              <div v-for="(num, index) in details.shipper.split('\n')" :key="index">{{ num.length }}</div>
+            </div>
+          </div>
+          <div v-if="modalType === 2" style="display: flex;">
+            <textareaView
+              id="consignee-scroll"
+              :parentVal="details.consignee"
+              :height="500"
+              style="font-size:20px;margin-right: 10px;"
+              type="consignee"
+              :openToCDB="true"
+              @getTextareaChange="getTextareaChange" />
+            <div
+              class="line-count"
+              id="consignee-scroll-right"
+              v-if="Object.keys(details).length > 1 && details.consignee.length > 0">
+              <div v-for="(num, index) in details.consignee.split('\n')" :key="index">{{ num.length }}</div>
+            </div>
+          </div>
+          <div v-if="modalType === 3" style="display: flex;">
+            <textareaView
+              id="notifyparty-scroll"
+              :parentVal="details.notifyparty"
+              :height="500"
+              style="font-size:20px;margin-right: 10px;"
+              type="notifyparty"
+              :openToCDB="true"
+              @getTextareaChange="getTextareaChange" />
+            <div
+              class="line-count"
+              id="notifyparty-scroll-right"
+              v-if="modalType === 3 && Object.keys(details).length > 1 && details.notifyparty.length > 0">
+              <div v-for="(num, index) in details.notifyparty.split('\n')" :key="index">{{ num.length }}</div>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+      <a-modal title="第二通知人" :width="900" :visible="visibleTwo" @ok="visibleTwo = false" @cancel="visibleTwo = false">
+        <div>
+          <a-form-model :selfUpdate="true" ref="mailingFrom" :model="details" :rules="rules">
+            <a-row :gutter="10">
+              <a-form-model-item has-feedback prop="notifypartY2" class="sender-label" style="overflow: hidden">
+                <div class="sender">
+                  <div class="top" :class="{ required: rules['notifypartY2'] && rules['notifypartY2'][0].required }">
+                    <div class="name">第二通知人</div>
+                    <selectView
+                      type="notifypartY2name"
+                      ref="notifypartY2nameInput"
+                      :defaultVal="shippername"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ TemplateName: '', Type: this.enmuType('notifypartY2') }"
+                      :showLabel="['title']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                      style="flex: 1"></selectView>
+                    <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('notifypartY2')">
+                      保存
+                    </a-button>
+                    <div class="right">
+                      <span class="btn-circle" @click="spliceMore('notifypartY2')" :style="{ fontSize: '14px' }">*</span>
+                      <span class="btn" @click="changeCode(35, 'notifypartY2')">35</span>
+                      <span class="btn" @click="changeCode(40, 'notifypartY2')">40</span>
+                      <span class="btn" @click="changeCode(50, 'notifypartY2')">50</span>
+                    </div>
+                  </div>
+                  <div class="bottom">
+                    <textareaView
+                      id="notifypartY2-scroll"
+                      :parentVal="details.notifypartY2"
+                      type="notifypartY2"
+                      :openToCDB="true"
+                      :height="500"
+                      style="font-size:20px;margin-right: 10px;"
+                      @getTextareaChange="getTextareaChange" />
+                    <div
+                      class="line-count"
+                      id="notifypartY2-scroll-right"
+                      v-if="Object.keys(details).length > 1 && details.notifypartY2 && details.notifypartY2.length > 0">
+                      <div v-for="(num, index) in details.notifypartY2.split('\n')" :key="index">{{ num.length }}</div>
+                    </div>
+                  </div>
+                </div>
+              </a-form-model-item>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-modal>
+      <a-modal title="境外代理" :width="900" :visible="visibleJW" @ok="visibleJW = false" @cancel="visibleJW = false">
+        <div>
+          <a-form-model :selfUpdate="true" ref="mailingFrom" :model="details" :rules="rules">
+            <a-row :gutter="10">
+              <a-form-model-item has-feedback prop="foreignAgent" class="sender-label" style="overflow: hidden">
+                <div class="sender">
+                  <div class="top" :class="{ required: rules['foreignAgent'] && rules['foreignAgent'][0].required }">
+                    <div class="name">境外代理</div>
+                    <selectView
+                      type="foreignAgentname"
+                      ref="foreignAgentnameInput"
+                      :defaultVal="foreignAgentname"
+                      searchApi="BookingTemplate"
+                      :searchQuery="{ TemplateName: '', Type: this.enmuType('foreignAgent') }"
+                      :showLabel="['title']"
+                      :openSearch="true"
+                      @change="getSelectViewRes"
+                      style="flex: 1"></selectView>
+                    <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('foreignAgent')">
+                      保存
+                    </a-button>
+                    <div class="right">
+                      <span class="btn-circle" @click="spliceMore('foreignAgent')" :style="{ fontSize: '14px' }">*</span>
+                      <span class="btn" @click="changeCode(35, 'foreignAgent')">35</span>
+                      <span class="btn" @click="changeCode(40, 'foreignAgent')">40</span>
+                      <span class="btn" @click="changeCode(50, 'foreignAgent')">50</span>
+                    </div>
+                  </div>
+                  <div class="bottom">
+                    <textareaView
+                      id="foreignAgent-scroll"
+                      :parentVal="details.foreignAgent"
+                      type="foreignAgent"
+                      :openToCDB="true"
+                      :height="500"
+                      style="font-size:20px;margin-right: 10px;"
+                      @getTextareaChange="getTextareaChange" />
+                    <div
+                      class="line-count"
+                      id="foreignAgent-scroll-right"
+                      v-if="Object.keys(details).length > 1 && details.foreignAgent && details.foreignAgent.length > 0">
+                      <div v-for="(num, index) in details.foreignAgent.split('\n')" :key="index">{{ num.length }}</div>
+                    </div>
+                  </div>
+                </div>
+              </a-form-model-item>
+            </a-row>
+          </a-form-model>
+        </div>
+      </a-modal>
+      <!-- == 件重尺编辑模板 == -->
+    </a-collapse-panel>
+  </a-collapse>
+</template>
+<script>
+import { XCard } from '@/components'
+import inputView from '../components/inputView'
+import textareaView from '../components/textareaView'
+import selectView from '../components/selectView'
+import datePickerView from '../components/datePickerView'
+import { BookingTemplateAdd } from '@/api/modular/main/BookingLedger'
+
+let timer
+export default {
+  components: {
+    XCard,
+    textareaView,
+    inputView,
+    selectView,
+    datePickerView
+  },
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    ishd: {
+      type: Boolean,
+      default: false
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    isParent: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      frompre: {},
+      visibleJW: false,
+      modalType: 0,
+      visibleTwo: false,
+      visible: false,
+      modelTitle: '',
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 16 }
+      },
+      labelColCode: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 10 }
+      },
+      wrapperColCode: {
+        xs: { span: 24 },
+        sm: { span: 16 },
+        md: { span: 14 }
+      },
+      YardlabelCol: {
+        xs: { span: 24 },
+        sm: { span: 1 },
+        md: { span: 4 }
+      },
+      YardwrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 1 },
+        md: { span: 20 }
+      },
+      showKey: ['1'],
+      shippername: '',
+      consigneename: '',
+      notifypartyname: '',
+      foreignAgentname: '',
+      notifypartY2name: '',
+      modelVisible: false,
+      modelconfirm: false,
+      modelType: '',
+      modelName: '',
+      yardType: '',
+      yardVisible: false,
+      customerModelconfirm: false,
+      textEntryModalVisible: false,
+      textEntryType: '',
+      textEntryModalTitle: '',
+      pkgstotalRes: 0,
+      kgstotalRes: 0,
+      cbmtotalRes: 0,
+      portdischargeHasline: false,
+      destinationidHasline: false,
+      userHasLine: false
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        if (!this.details.notifypartY2) {
+          this.details.notifypartY2 = ''
+        }
+        if (!this.inSave) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'mailingInfo'
+          })
+        }
+      },
+      deep: true
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+        if (this.$route.name === 'BookingDetail' && Object.keys(this.$refs).includes('shippernameInput')) {
+          this.$refs.shippernameInput.$data.value = ''
+          this.$refs.consigneenameInput.$data.value = ''
+          this.$refs.notifypartynameInput.$data.value = ''
+        }
+      }
+    }
+  },
+  created() { },
+  mounted() {
+    const shipperScroll = document.getElementById('shipper-scroll')
+    if (shipperScroll) {
+      shipperScroll.addEventListener('scroll', () => {
+        document.getElementById('shipper-scroll-right').scrollTop = shipperScroll.scrollTop
+      })
+    }
+    const consigneeScroll = document.getElementById('consignee-scroll')
+    consigneeScroll.addEventListener('scroll', () => {
+      document.getElementById('consignee-scroll-right').scrollTop = consigneeScroll.scrollTop
+    })
+    const notifypartyScroll = document.getElementById('notifyparty-scroll')
+    notifypartyScroll.addEventListener('scroll', () => {
+      document.getElementById('notifyparty-scroll-right').scrollTop = notifypartyScroll.scrollTop
+    })
+    setTimeout(() => {
+      this.changePkgs()
+    }, 2000)
+    // this.getSelectViewRes(portloadid,"CNTAO")
+    // this.details.portloadid = 'CNTAO'
+    // this.details.placereceiptid = 'CNTAO'
+    // console.log('details', this.details)
+  },
+  methods: {
+    handleOpenFd() {
+      this.visibleJW = true
+    },
+    handleOpen(type) {
+      this.visible = true
+      this.modalType = type
+      if (type === 1) {
+        this.modelTitle = '发货人代码'
+      }
+      if (type === 2) {
+        this.modelTitle = '收货人代码'
+      }
+      if (type === 3) {
+        this.modelTitle = '通知人代码'
+      }
+    },
+    refresh() {
+      this.$forceUpdate()
+      if (
+        this.frompre[0].portloadid == '' &&
+        this.frompre[0].portload == '' &&
+        this.frompre[0].placedeliveryid == '' &&
+        this.frompre[0].placedelivery == ''
+      ) {
+        this.details.portloadid = 'CNTAO'
+        this.details.placereceiptid = 'CNTAO'
+        this.details.portload = 'QINGDAO,CHINA'
+        this.details.placereceipt = 'QINGDAO,CHINA'
+      }
+      this.$refs.shipagency.value = this.frompre[0].forwarder
+    },
+    debounce(func, wait, ...args) {
+      if (timer) clearTimeout(timer)
+      timer = setTimeout(() => {
+        func.apply(this, args)
+      }, wait)
+    },
+    checkbasic() {
+      this.$refs.mailingFrom.validate((valid) => {
+        if (valid) {
+          return true
+        } else {
+          return false
+        }
+      })
+    },
+    // ========== 关系人弹窗 ==========
+    changeYard(type) {
+      if (type == 'remark') {
+        this.yardType = type
+      } else {
+        this.yardType = type
+      }
+      this.yardVisible = true
+    },
+    ModelyardTypeOk() {
+      const type = this.yardType
+      this.ModelyardTypeCancel()
+    },
+    ModelyardTypeCancel() {
+      this.yardVisible = false
+      this.yardType = ''
+    },
+    init() { },
+
+    // 保存模板
+    saveModel(type) {
+      this.modelVisible = true
+      this.modelType = type
+      this.modelContent = this.details[type]
+    },
+    handleModelSubmit() {
+      if (!this.modelName) {
+        this.$message.error('请输入模板名称')
+        return false
+      }
+      const type = this.enmuType(this.modelType)
+      BookingTemplateAdd({
+        title: this.modelName,
+        type: type,
+        content: this.modelContent,
+        remark: ''
+      })
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('保存成功')
+            this.handleModelCancel()
+            this.$forceUpdate()
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    enmuType(val) {
+      switch (val) {
+        case 'shipper':
+          return 20
+        case 'consignee':
+          return 10
+        case 'notifyparty':
+          return 30
+        case 'notify':
+          return 30
+        case 'notifypartY2':
+          return 40
+        case 'foreignAgent':
+          return 50
+      }
+    },
+    handleModelCancel() {
+      this.modelVisible = false
+      this.modelType = ''
+      this.modelName = ''
+    },
+
+    findId(arr, id) {
+      const newarr = []
+      let count = 1
+      arr.map((item, index) => {
+        let rId = 0
+        arr.map((oitem, oindex) => {
+          if (oitem < id * count) {
+            rId = oitem
+          }
+        })
+        if (rId && !newarr.includes(rId)) {
+          count++
+          newarr.push(rId)
+        }
+      })
+      return newarr
+    },
+
+    spliceMore(field) {
+      const maxStarLine = 5
+      const strShipper = this.details[field]
+      const arr = strShipper.split('\n')
+      if (arr.length > maxStarLine) {
+        var strStar = '*'
+        var str1 = ''
+        var str2 = ''
+        let arrTmp = null
+        // 收货人加几个*，要看发货人是否有*
+        if (field === 'consignee') {
+          arrTmp = this.details['shipper'].split('\n')
+          if (arrTmp.length > 0 && arrTmp[arrTmp.length - 1].endsWith('*')) {
+            strStar += '*'
+          }
+        }
+
+        // 通知人加几个*，要看发货人和收货人是否有*
+        if (field === 'notifyparty' || field === 'notifypartY2' || field === 'foreignAgent') {
+          arrTmp = this.details['shipper'].split('\n')
+          if (arrTmp.length > 0 && arrTmp[arrTmp.length - 1].endsWith('*')) {
+            strStar += '*'
+          }
+
+          arrTmp = this.details['consignee'].split('\n')
+          if (arrTmp.length > 0 && arrTmp[arrTmp.length - 1].endsWith('*')) {
+            strStar += '*'
+          }
+        }
+      }
+
+      for (let idx = 0; idx < arr.length; idx++) {
+        if (idx < maxStarLine) {
+          str1 += arr[idx]
+          if (idx !== maxStarLine - 1) {
+            str1 += '\n'
+          } else {
+            str1 += ' ' + strStar
+          }
+        } else {
+          str2 += arr[idx]
+          if (idx !== arr.length - 1) {
+            str2 += '\n'
+          }
+        }
+        this.details[field] = str1
+        this.$emit('spliceMore', strStar + str2)
+      }
+    },
+
+    changeCode(len, type) {
+      const value = this.details[type]
+      var textArr = value.match(/.+[\n]*/g)
+      var subValue = ''
+      for (var j = 0; j < textArr.length; j++) {
+        var subArr = textArr[j].match(/[\w]+[ ]*[\n]*|[\d]+[ ]*[\n]*|[^\w\d]+[ ]*[\n]*/g)
+        var count = 0
+        for (var i = 0; i < subArr.length; i++) {
+          count += subArr[i].replace(/\n/g, '').length
+          while (count > len) {
+            subValue += '\n'
+            count = subArr[i].replace(/\n/g, '').length
+            if (count > len) {
+              subValue += subArr[i].substring(0, len)
+              subValue += '\n'
+              subArr[i] = subArr[i].substring(len)
+              count = subArr[i].replace(/\n/g, '').length
+            }
+          }
+          subValue += subArr[i]
+        }
+        if (j + 1 < textArr.length) {
+          subValue += '\n'
+        }
+      }
+      subValue = subValue.replace(/[\n]+/g, '\n')
+      subValue = subValue.replace(/[ ]+[\n]+/g, '\n')
+      subValue = subValue.replace(/[ ]+$/g, '')
+      this.details[type] = subValue
+      this.$forceUpdate()
+    },
+    changePkgs() {
+      const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
+      this.$emit('pkgsEnCapital', enCapitalRes)
+    },
+    SetTOTALNO(SS) {
+      SS = SS.toString()
+      const i = SS.indexOf('\n')
+      let num = 0
+      let strKind = ''
+      let enCapital = ''
+      if (i > 0) {
+        const slist = SS.split('\n')
+        for (let i = 0; i < slist.length; i += 1) {
+          const member = slist[i]
+          const strNum = this.GetStringNum(member)
+          if (i == 0) {
+            strKind = member.substring(strNum.length)
+          }
+          num = parseFloat(num).add(parseFloat(strNum))
+        }
+        if (strKind !== '') {
+          enCapital = strKind
+        } else {
+          strKind = this.details.kindpkgs
+          enCapital = this.ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
+        }
+      } else {
+        const strNum = this.GetStringNum(SS)
+        strKind = SS.substring(strNum.length)
+        if (strKind !== '') {
+          console.log(strKind)
+          enCapital = strKind
+        } else {
+          strKind = this.details.kindpkgs
+          enCapital = 'SAY:' + this.ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
+        }
+      }
+      return enCapital
+    },
+
+    GetStringNum(str) {
+      var num = 0
+      if (str == null || str == '') return num
+      if (str.length == 0) return num
+      var if_find = false
+      var str_num = ''
+      for (var i = 0; i < str.length; i += 1) {
+        var member = str.substr(i, 1)
+        if (
+          member == '0' ||
+          member == '1' ||
+          member == '2' ||
+          member == '3' ||
+          member == '4' ||
+          member == '5' ||
+          member == '6' ||
+          member == '7' ||
+          member == '8' ||
+          member == '9' ||
+          member == '.' ||
+          member == '-'
+        ) {
+          if (!if_find) {
+            str_num = str_num + member
+          }
+        } else {
+          if_find = true
+        }
+      }
+      return str_num
+    },
+    ToEn(a) {
+      // eslint-disable-next-line no-array-constructor
+      const arr1 = new Array('', ' thousand', ' million', ' billion')
+      const b = a.length
+      let f = null
+      let h = 0
+      let g = ''
+      const e = Math.ceil(b / 3)
+      const k = b - e * 3
+      g = ''
+      for (f = k; f < b; f += 3) {
+        ++h
+        // eslint-disable-next-line no-undef
+        const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
+        // eslint-disable-next-line no-undef
+        const strEng = this.English(num3)
+        // eslint-disable-next-line eqeqeq
+        if (strEng != '') {
+          // eslint-disable-next-line eqeqeq
+          if (g != '') g += ' '
+          g += this.English(num3) + arr1[e - h]
+        }
+      }
+      return g
+    },
+    English(a) {
+      // eslint-disable-next-line no-array-constructor
+      var arr1 = new Array('', ' thousand', ' million', ' billion')
+      // eslint-disable-next-line no-array-constructor
+      var arr2 = new Array('zero', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety')
+      // eslint-disable-next-line no-array-constructor
+      var arr3 = new Array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine')
+      // eslint-disable-next-line no-array-constructor
+      var arr4 = new Array(
+        'ten',
+        'eleven',
+        'twelve',
+        'thirteen',
+        'fourteen',
+        'fifteen',
+        'sixteen',
+        'seventeen',
+        'eighteen',
+        'nineteen'
+      )
+
+      let strRet = ''
+      // eslint-disable-next-line eqeqeq
+      if (a.length == 3 && a.substr(0, 3) != '000') {
+        if (a.substr(0, 1) != '0') {
+          strRet += arr3[a.substr(0, 1)] + ' hundred'
+          if (a.substr(1, 2) != '00') strRet += ' and '
+        } else {
+          strRet += ' and '
+        }
+        a = a.substring(1)
+      }
+      if (a.length == 2) {
+        if (a.substr(0, 1) == '0') a = a.substring(1)
+        else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
+        else {
+          strRet += arr2[a.substr(0, 1)]
+          if (a.substr(1, 1) != '0') strRet += '-'
+          a = a.substring(1)
+        }
+      }
+      if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
+      return strRet
+    },
+    etaChange(date, dateString) {
+      if (!dateString) {
+        this.details.eta = null
+      } else {
+        this.details.eta = dateString
+      }
+    },
+    closingdateChange(date, dateString) {
+      if (!dateString) {
+        this.details.closingdate = null
+      } else {
+        this.details.closingdate = dateString + ':00'
+      }
+    },
+    closevgmdateChange(date, dateString) {
+      if (!dateString) {
+        this.details.closevgmdate = null
+      } else {
+        this.details.closevgmdate = dateString + ':00'
+      }
+    },
+    closedocdateChange(date, dateString) {
+      if (!dateString) {
+        this.details.closedocdate = null
+      } else {
+        this.details.closedocdate = dateString + ':00'
+      }
+    },
+    getTextareaChange({ type, value }) {
+      let val = ''
+      for (var i in value) {
+        let k = ''
+        if (value[i] === String.fromCharCode(160)) {
+          k = ' '
+        } else {
+          k = value[i]
+        }
+        val += k
+      }
+      // const length = Math.round(val.length / 66)
+      // let totalVal = ''
+      // if (length > 0) {
+      //   for (let i = 1; i <= length; i++) {
+      //     totalVal += val.substring(66 * (i - 1), 66 * i) + '\n'
+      //     if (i === length) {
+      //       totalVal = totalVal + val.substring(66 * i, val.length)
+      //     }
+      //   }
+      // }
+      // val = totalVal
+      this.details[type] = val
+      this.$forceUpdate()
+    },
+    inputChange({ type, value }) {
+      this.details[type] = value
+      if (type === 'pkgs') {
+        this.changePkgs()
+      }
+      this.$forceUpdate()
+    },
+    editTextEntryModel(type) {
+      this.textEntryModalVisible = true
+      this.textEntryType = type
+      if (type === 'pkgs') {
+        this.textEntryModalTitle = '件数/包装'
+        if (this.details.pkgstotal) {
+          this.pkgsTextChange()
+        } else {
+          this.pkgstotalRes = 0
+        }
+      } else if (type === 'kgs') {
+        this.textEntryModalTitle = '毛重'
+        if (this.details.kgstotal) {
+          this.kgsTextChange()
+        } else {
+          this.kgstotalRes = 0
+        }
+      } else if (type === 'cbm') {
+        this.textEntryModalTitle = '尺码'
+        if (this.details.cbmtotal) {
+          this.cbmTextChange()
+        } else {
+          this.cbmtotalRes = 0
+        }
+      }
+    },
+    textEntryClose() {
+      this.textEntryModalVisible = false
+      this.textEntryModalTitle = ''
+      this.textEntryType = false
+    },
+    pkgsTextChange() {
+      const pkgsTexyVal = this.details.pkgstotal
+      const arr = pkgsTexyVal.split(/\n|\r/g)
+      let pkgs = 0
+      let kindpkgs = ''
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          pkgs = (pkgs * 100 + num1 * 100) / 100
+        }
+        if (!kindpkgs && regexStr && /^[a-zA-Z]+$/.test(regexStr[1])) {
+          kindpkgs = regexStr[1]
+        }
+      })
+      this.details.pkgs = parseInt(pkgs)
+      this.details.kindpkgs = kindpkgs
+      this.pkgstotalRes = parseInt(pkgs)
+    },
+    kgsTextChange() {
+      const kgsTexyVal = this.details.kgstotal
+      const arr = kgsTexyVal.split(/\n|\r/g)
+      let kgs = 0
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          kgs = (kgs * 100 + num1 * 100) / 100
+        }
+      })
+      this.details.kgs = kgs
+      this.kgstotalRes = kgs
+    },
+    cbmTextChange() {
+      const cbmTexyVal = this.details.cbmtotal
+      const arr = cbmTexyVal.split(/\n|\r/g)
+      let cbm = 0
+      arr.map((item, index) => {
+        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
+        if (regexStr && Number(regexStr[0])) {
+          const num1 = Number(regexStr[0])
+          cbm = (cbm * 100 + num1 * 100) / 100
+        }
+      })
+      this.details.cbm = cbm
+      this.cbmtotalRes = cbm
+    },
+    getSelectViewRes({ type, res }) {
+      if (['yard'].includes(type)) {
+        this.details[type] = res.name || ''
+        this.details[`${type}id`] = res.code || ''
+      } else if (
+        ['placereceiptid', 'portloadid', 'transportid', 'portdischargeid', 'destinationid', 'placedeliveryid'].includes(
+          type
+        )
+      ) {
+        this.details[type] = res['ediCode'] || ''
+        this.details[type.replace('id', '')] = res['enName'] || ''
+        if (type === 'portloadid') {
+          this.details.issueplace = res['enName'] || ''
+          this.details.issueplaceid = res['ediCode'] || ''
+          this.details.placereceiptid = this.details.placereceiptid ? this.details.placereceiptid : res['ediCode'] || ''
+          this.details.placereceipt = this.details.placereceipt ? this.details.placereceipt : res['enName'] || ''
+        } else if (type === 'placereceiptid') {
+          this.details.portloadid = this.details.portloadid ? this.details.portloadid : res['ediCode'] || ''
+          this.details.portload = this.details.portload ? this.details.portload : res['enName'] || ''
+        }
+        if (['portdischargeid', 'destinationid'].includes(type)) {
+          if (
+            Object.keys(res).length === 0 ||
+            !res.lineName ||
+            res.lineName.length === 0 ||
+            !res.lineName[0]['cnName']
+          ) {
+            this[`${type}Hasline`] = false
+            return false
+          }
+          if (res.lineName[0]['carrierCode'] && this.details.carrierid !== res.lineName[0]['carrierCode']) {
+            return false
+          }
+          if (type === 'destinationid' && this.portdischargeHasline) {
+            return false
+          }
+          this.details.lineName = this.userHasLine ? this.details.lineName : res.lineName[0]['cnName']
+          if (type === 'portdischargeid') {
+            this.portdischargeHasline = true
+          } else {
+            this.destinationidHasline = true
+          }
+        }
+      } else if (['shippername', 'consigneename', 'notifypartyname', 'notifypartY2name', 'foreignAgentname'].includes(type)) {
+        this[type] = res['title'] || ''
+        this.details[type.replace('name', '')] = res['content'] || ''
+        this.$forceUpdate()
+      } else if (['customser', 'trucker', 'agentname', 'warehouse'].includes(type)) {
+        this.details[type] = res['shortName'] || ''
+        if (['customser', 'trucker'].includes(type)) {
+          this.details[`${type}id`] = res['codeName'] || ''
+        } else if (['agentname'].includes(type)) {
+          this.details['agentid'] = res['codeName'] || ''
+        } else if (['warehouse'].includes(type)) {
+          this.details[`${type}ID`] = res['codeName'] || ''
+        }
+      } else if (['kindpkgs'].includes(type)) {
+        this.details.kindpkgs = res['name'] || ''
+        const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
+        this.$emit('pkgsEnCapital', enCapitalRes)
+      } else if (['shippingMethod'].includes(type)) {
+        this.details.shippingMethod = res['name'] || ''
+      } else if (type === 'shipagency') {
+        this.details.shipagency = res.name || ''
+        this.details.shipagencyid = res.code || ''
+      } else if (type === 'lineName') {
+        this.details[type] = res.name || ''
+        this.$emit('editLineName', true)
+      } else if (['issuetype', 'blfrt'].includes(type)) {
+        this.details[type] = res.enName || ''
+        if (type === 'blfrt') {
+          if (this.details.blfrt === 'FREIGHT COLLECT') {
+            this.details.payableat = this.details.payableat ? this.details.payableat : this.details.portdischarge || ''
+            this.details.payableatid = this.details.payableatid ? this.details.payableatid : this.details.portdischargeid || ''
+          } else {
+            this.details.prepardat = this.details.prepardat ? this.details.prepardat : this.details.portload || ''
+            this.details.prepardatid = this.details.prepardatid ? this.details.prepardatid : this.details.portloadid || ''
+          }
+        }
+      } else if (['issueplace', 'prepardat', 'payableat'].includes(type)) {
+        this.details[type] = res.enName || ''
+        this.details[`${type}id`] = res.ediCode || ''
+      } else if (['service'].includes(type)) {
+        this.details[type] = res.name || ''
+      } else if (['nobill', 'copynobill'].includes(type)) {
+        this.details[type] = res.code || ''
+      }
+    },
+    dateChangeFun({ type, value }) {
+      if (['closingdate', 'closevgmdate', 'closedocdate'].includes(type)) {
+        this.details[type] = value + ':00'
+      } else {
+        this.details[type] = value || ''
+      }
+    },
+    tabStopFun() {
+      return false
+    },
+    tabChangeFun() { },
+    toNotifyparty() {
+      this.details.notifyparty = this.details.consignee
+      this.$forceUpdate()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../index.less');
+@import url('../style/mailingInfo.less');
+
+.copy-btn {
+  &:hover {
+    color: @primary-color;
+  }
+}
+.tit{
+  line-height: 26px;
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/operationArea.vue b/src/views/main/BookingLedger/detail/modulesTest/operationArea.vue
new file mode 100644
index 0000000..1b806a5
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/operationArea.vue
@@ -0,0 +1,1500 @@
+<template>
+  <div class="operation-area">
+    <a-card :bordered="false"
+      :bodyStyle="{ 'padding-top': ' 6px', 'padding-left': '5px', 'padding-bottom': '0px', 'margin-bottom': '4px' }">
+      <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>
+        <button @click="openPreOrderFun">
+          <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" :class="{ inLoad: inChildLoading }">
+        <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 class="btn-list single-view-1" :style="{ width: '110px' }">
+        <a-popconfirm title="确定删除当前订舱？" ok-text="是" cancel-text="否" @confirm="removeOrder" @cancel="cancelRemove">
+          <button><span class="iconfont icon-shanchu1"></span>删除</button>
+        </a-popconfirm>
+        <button @click="addChild()" v-if="!details.hbList || details.hbList.length === 0">
+          <span class="iconfont icon-zhizhishu"></span>添加分单
+        </button>
+      </div>
+      <div class="btn-list single-view-4">
+        <button @click="FnGoSendCar"><span class="iconfont icon-yunshu1"></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 :disabled="forwarderFlag" :style="radioStyle" :value="1"> 更新 </a-radio>
+                  <a-radio :disabled="forwarderFlag" :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">保存 <template
+              v-if="modelType === 'cutOff'">ESI</template><template v-else>EDI</template>文件</a-button>
+          <a-button type="primary" @click="handleModelSubmit('send')" :loading="EDIUloading">上传 <template
+              v-if="modelType === 'cutOff'">ESI</template><template v-else>EDI</template></a-button>
+        </template>
+      </template>
+
+      <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="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>
+          <a-button class="btn" type="primary" v-if="modelType == 'initCabin'" @click="sendModel" :loading="SendLoading">
+            发送
+          </a-button>
+        </div>
+        <a-form>
+          <a-row :gutter="16">
+            <div class="item-box to-box" :style="{ paddingTop: '0px' }">
+              <!-- to -->
+              <a-col :span="24">
+                <a-col :span="18">
+                  <a-form-item label="TO" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
+                    :wrapperCol="{ xs: { span: 24 }, sm: { span: 21 } }" has-feedback :style="{ marginLeft: '-18px' }">
+                    <a-input :allowClear="true" v-model="initCabinFrom.toName" />
+                  </a-form-item>
+                </a-col>
+                <a-col :span="6" v-if="modelType == 'initCabin'">
+                  <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="initCabinFrom.attn" /> -->
+                    <a-select :allowClear="true" v-model="initCabinFrom.templateId">
+                      <a-select-option v-for="item in initCabinSendData" :value="item.id" :key="item.id">
+                        {{ item.displayName }}
+                      </a-select-option>
+                    </a-select>
+                  </a-form-item>
+                </a-col>
+              </a-col>
+
+              <a-col :span="6">
+                <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="6">
+                <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="6">
+                <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="initCabinFrom.attnMail" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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="initCabinFrom.attnPhone" />
+                </a-form-item>
+              </a-col>
+              <!-- from -->
+              <a-col :span="6">
+                <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="6">
+                <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="6">
+                <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="initCabinFrom.fromMail" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="6">
+                <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="initCabinFrom.fromPhone" />
+                </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>
+                    <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;height:166px;">
+                <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-textarea class="remark-input" style="width:1000px !important; text-align: left;"
+                        :allowClear="true" :auto-size="{ minRows: 7, maxRows: 7 }" v-model="initCabinFrom.remark" />
+                    </div>
+                    <!-- <div class="box-flex">
+                      <a-input
+                        class="remark-input"
+                        style="width:1000px !important; text-align: left;"
+                        :allowClear="true"
+                        :auto-size="{ minRows: 3, maxRows: 5 }"
+                        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;height:85px">
+                <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-textarea style="width:1000px !important; text-align: left;" :allowClear="true"
+                        :auto-size="{ minRows: 3, maxRows: 3 }" 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 :zIndex="1005" width="50vw" :maskClosable="false" v-model="PrintModalVisible" title="打印">
+      <template slot="footer"> <span></span> </template>
+      <a-spin tip="数据加载中..." :spinning="spinning">
+        <div class="PrintMain">
+          <div class="PrintTitle">
+            <p>默认打印格式为<span>pdf</span>,如需其他格式请选择</p>
+            <p>
+              打印格式：
+              <a-radio-group v-model="PrintType" 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.id" @click="FnCilckTemplateType(item.id)"
+              class="items" :span="11" :offset="index % 2 == 0 ? 0 : 1">
+              <span>·</span>{{ item.displayName }}
+            </a-col>
+          </a-row>
+        </div>
+      </a-spin>
+    </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 -->
+    <pre-order ref="preOrder" :details="details" @frompre="frompre" />
+  </div>
+</template>
+<script>
+import {
+  SendBookingOrClosingEDI,
+  SendXHZ,
+  VgmSend,
+  LetterYard,
+  SampleBill,
+  SendLetterYard,
+  SaveBookingLetteryard,
+  SaveBookingSampleBill,
+  SampleBillPdf,
+  TxxpLink,
+  ExcuteRulesOceanBooking,
+  BookingOrderPrintOrder,
+  BookingOrderOcrUpFile,
+  BookingOrderOcrGetImg,
+  BookingOrderOcrGetText,
+  BookingOrderPrintTemplateWithHistoryList,
+  DownloadBookingOrClosingEDI,
+  DeleteLetterYard,
+  SendTrace,
+  GetYardlist
+} from '@/api/modular/main/BookingLedger'
+import { BookingTruckGetTruckListByBooking } from '@/api/modular/main/SendCar'
+import { DICT_TYPE_TREE_DATA } from '@/store/mutation-types'
+import preOrder from './preOrder'
+export default {
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inChildLoading: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    preOrder
+  },
+  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: '',
+        attnPhone: '',
+        fromName: '',
+        fromTel: '',
+        fromMail: '',
+        fromPhone: '',
+        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,
+      forwarderFlag: false,
+      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: '',
+      spinning: false,
+      yardSelectData: null,
+      initCabinSendData: []
+    }
+  },
+  mounted() {
+    this.BCvData = [...this.CvData]
+  },
+  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
+        this.bookingModelFrom.id = this.$route.query.id
+      }
+    },
+    PrintType(newdata, oldData) {
+      const printType = newdata == 4 ? 20 : 10
+      const print = oldData == 4 ? 20 : 10
+      if (printType != print) {
+        this.GetPrintData(this.cateCode, printType)
+      }
+    }
+  },
+  methods: {
+    frompre(data) {
+      this.$emit('frompre', data)
+    },
+    FnGoSendCar() {
+      BookingTruckGetTruckListByBooking({ bookingId: this.id }).then(res => {
+        console.log(res)
+        this.$router.push({
+          name: 'SendCarAdd',
+          query: {
+            type: 'Edit',
+            BookingId: this.id
+          }
+        })
+      })
+    },
+    // ========== OCR ==========
+    FnClickCvBox(data) {
+      const 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')
+        const x = this.x
+        const 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) {
+      // 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
+      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
+    },
+    GetPrintData(cateCode, printType) {
+      const Data = {
+        cateCode,
+        printType
+      }
+      this.spinning = true
+      BookingOrderPrintTemplateWithHistoryList(Data).then(res => {
+        this.templateType = res.data
+        this.spinning = false
+        this.PrintModalVisible = true
+      })
+    },
+    FSnhowPrintModal() {
+      this.cateCode = 'zhudan_print'
+      let printType = ''
+      if (this.printType == 4) {
+        printType = 20
+      } else {
+        printType = 10
+      }
+      this.PrintType = '1'
+      this.GetPrintData(this.cateCode, printType)
+    },
+    FnCilckTemplateType(templateId) {
+      this.$message.success(`搜索文件中...`)
+      const printType = this.PrintType == 4 ? 20 : 10
+      BookingOrderPrintOrder({
+        templateId,
+        bookingId: this.id,
+        cateCode: this.cateCode,
+        type: this.PrintType,
+        printType
+      })
+        .then(res => {
+          if (!res.success) {
+            this.$message.error(res.message)
+          } else {
+            // this.$message.success(res.data)
+            if (this.PrintType == 1) {
+              window.open(` ${process.env.VUE_APP_API_BASE_URL}/BookingOrder/ViewPrintPdf/${res.data}`, '_blank')
+            } else {
+              window.open(
+                ` ${process.env.VUE_APP_API_BASE_URL}/BookingOrder/downloadPrint?filename=${res.data}`,
+                '_blank'
+              )
+            }
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    refreshPage() {
+      this.$emit('refresh')
+    },
+    cancelRefresh() {
+      return false
+    },
+    openModel(type) {
+      this.forwarderFlag = false
+      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: '提单'
+        // }
+      } else if (type == 'initCabin') {
+        this.cateCode = 'fangcang'
+      }
+      if (['bookingSpace', 'cutOff', 'initCabin', 'ladingBill', 'vgmlink'].includes(type)) {
+        if (type === 'bookingSpace') {
+          if (localStorage.getItem('pro__DICT_TYPE_TREE_DATA')) {
+            const data = JSON.parse(localStorage.getItem('pro__DICT_TYPE_TREE_DATA'))
+            data.value.forEach(item => {
+              if (item.code === 'EdiPipelineRelation') {
+                if (item.children[0].name == this.details.forwarder) {
+                  this.forwarderFlag = true
+                }
+              }
+            })
+          }
+        }
+        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: '',
+          attnPhone: '',
+          fromName: '',
+          fromTel: '',
+          fromMail: '',
+          fromPhone: '',
+          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
+        }
+        this.getYardlist()
+      }
+      if (type === 'initCabin') {
+        console.log('放舱')
+        this.getLetterYard()
+        BookingOrderPrintTemplateWithHistoryList({
+          cateCode: 'fangcang',
+          printType: 10
+        }).then(res => {
+          console.log(res.data)
+          this.initCabinSendData = res.data
+        })
+      } 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
+      this.bookingModelFrom.id = this.$route.query.id
+      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
+          console.log(res)
+          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 {
+            var blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' })
+            var contentDisposition = res.headers['content-disposition']
+            var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
+            var result = patt.exec(contentDisposition)
+            var filename = result[1]
+            var downloadElement = document.createElement('a')
+            var href = window.URL.createObjectURL(blob) // 创建下载的链接
+            var reg = /^["](.*)["]$/g
+            downloadElement.style.display = 'none'
+            downloadElement.href = href
+            downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
+            document.body.appendChild(downloadElement)
+            downloadElement.click() // 点击下载
+            document.body.removeChild(downloadElement) // 下载完成移除元素
+            window.URL.revokeObjectURL(href)
+          }
+        })
+        .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
+      }
+    },
+    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() { },
+        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)
+        })
+    },
+
+    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()
+    },
+
+    openTab(type) {
+      this.$emit('openTab', { type: type })
+    },
+
+    saveFun() {
+      this.$emit('save')
+    },
+    bookingCheckChange(e) {
+      this.bookingModelFrom.useForwarderCode = e.target.checked
+    },
+
+    saveModel() {
+      this.SaveLoading = true
+      if (this.modelType === 'initCabin') {
+        this.saveBookingLetteryard()
+      } else if (this.modelType === 'vgmlink') {
+        console.log('暂无接口')
+      } else {
+        this.saveBookingSampleBill()
+      }
+    },
+
+    sendModel() {
+      this.SendLoading = true
+      console.log(this.modelType)
+      if (this.modelType === 'initCabin') {
+        if (this.initCabinFrom.templateId) {
+          this.sendLetterYard()
+        } else {
+          this.$message.error('请选择打印格式')
+          this.SendLoading = false
+        }
+      } else if (this.modelType === 'vgmlink') {
+        console.log('暂无接口')
+      } else {
+        console.log('暂无接口')
+      }
+    },
+
+    removeModel() {
+      if (this.modelType === 'initCabin') {
+        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') {
+        console.log('暂无接口')
+      }
+    },
+
+    saveBookingLetteryard() {
+      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.initCabinFrom.id = res.data
+            this.$message.success('保存成功')
+          } else {
+            this.$message.error(res.message)
+          }
+          this.SaveLoading = false
+        })
+        .catch(() => {
+          this.SaveLoading = false
+        })
+    },
+
+    sendLetterYard() {
+      // initCabinFrom.templateId
+      SendLetterYard({ bookingId: this.id, templateId: this.initCabinFrom.templateId })
+        .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.inChildLoading) {
+        this.$message.error('加载中，请稍后')
+        return false
+      }
+      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) {
+      if (!this.id || !this.initCabinFrom.id) {
+        this.$message.error('请先保存数据')
+        return false
+      }
+      let printType = ''
+      if (this.PrintType == 4) {
+        printType = 20
+      } else {
+        printType = 10
+      }
+      this.PrintType = '1'
+      this.GetPrintData(this.cateCode, printType)
+    },
+    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
+    },
+    removeOrder() {
+      this.$emit('removeOrder')
+    },
+    cancelRemove() {
+      console.log('== 取消删除 ==')
+    },
+    openPreOrderFun() {
+      if (!this.id) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      this.$refs.preOrder.init()
+    },
+    closeOpenPreOrder() {
+      this.$refs.preOrder.close()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../style/operationArea.less');
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/preOrder.vue b/src/views/main/BookingLedger/detail/modulesTest/preOrder.vue
new file mode 100644
index 0000000..b47319e
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/preOrder.vue
@@ -0,0 +1,3108 @@
+<template>
+  <a-modal width="90vw" :maskClosable="false" v-model="openPreOrderShow" title="预配舱单" @cancel="close">
+    <template slot="footer">
+      <a-button type="primary" @click="close">取消</a-button>
+    </template>
+    <div class="pre-order">
+      <a-row :gutter="24" class="show-content" style="margin-left: 0">
+        <a-col :span="5">
+          <div class="sed-order-list">
+            <div class="sed-order-title">
+              <i class="iconfont icon-liebiao"></i><span class="tit">预配舱单列表</span>
+            </div>
+            <div class="order-btn-list">
+              <a-button class="order-btn" size="small" type="primary" @click="addOrder">添加分单</a-button>
+              <a-button class="order-btn" size="small" type="primary" @click="saveOrder">保存</a-button>
+              <a-popconfirm
+                title="是否删除当前选中预配舱单？"
+                ok-text="是"
+                cancel-text="否"
+                @confirm="removeOrder()"
+                @cancel="cancelRemove"
+              >
+                <a-button class="order-btn" size="small">删除</a-button>
+              </a-popconfirm>
+              <!-- <a-popconfirm
+                title="是否发送当前选中预配舱单？"
+                ok-text="是"
+                cancel-text="否"
+                @confirm="sendOrderFun()"
+                @cancel="cancelRemove"
+              > -->
+              <a-button class="order-btn" size="small" @click="sendOrderFun()">发送</a-button>
+              <!-- </a-popconfirm> -->
+            </div>
+            <div class="sec-order">
+              <template v-for="(sedDetail, sindex) in orderList">
+                <div class="order-box" :key="sindex">
+                  <a-checkbox
+                    class="check-btn"
+                    :checked="sedDetail.checked"
+                    @change="checkOrderChange($event, sindex)"
+                  />
+                  <span class="order-label" :class="{ active: sindex == editIndex }" @click.stop="changeOrder(sindex)">
+                    <a-tag class="tag" v-if="sedDetail.state" :color="sedDetail.state === '已直发' ? '#00CC00' : ''">{{
+                      sedDetail.state
+                    }}</a-tag>
+                    <!-- <a-tag class="tag" v-if="sedDetail.state">{{ sedDetail.state }}</a-tag> -->
+                    <template v-if="!sedDetail.isHBL">主提单号：{{ sedDetail.mblno || '请填写主提单号' }}</template>
+                    <template v-else>分提单号{{ sindex + 1 }}: {{ sedDetail.hblno || '请填写分单号' }}</template>
+                  </span>
+                </div>
+              </template>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="19">
+          <div class="pre-details">
+            <a-form-model
+              style="margin-bottom: 10px"
+              size="small"
+              ref="basicFrom"
+              :selfUpdate="true"
+              :model="orderDetails"
+              :rules="rules"
+            >
+              <div class="top">
+                <a-row class="from-box" :gutter="10">
+                  <template v-if="!orderDetails.isHBL">
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="pre-from-label"
+                        label="主提单号"
+                        prop="mblno"
+                        :labelCol="labelCol2"
+                        :wrapperCol="wrapperCol2"
+                        has-feedback
+                      >
+                        <inputView type="mblno" :parentVal="orderDetails.mblno" @getInputChange="inputChange" />
+                      </a-form-model-item>
+                    </a-col>
+                  </template>
+                  <template v-if="orderDetails.isHBL">
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-model-item
+                        class="pre-from-label"
+                        label="分提单号"
+                        prop="hblno"
+                        :labelCol="labelCol2"
+                        :wrapperCol="wrapperCol2"
+                        has-feedback
+                      >
+                        <inputView type="hblno" :parentVal="orderDetails.hblno" @getInputChange="inputChange" />
+                      </a-form-model-item>
+                    </a-col>
+                  </template>
+                </a-row>
+                <a-row class="from-box" :gutter="10" style="padding-left: 17px">
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-model-item
+                      class="pre-from-label"
+                      label="船名"
+                      prop="vessel"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <autoView
+                        class="copy-input"
+                        type="vessel"
+                        :defaultVal="orderDetails.vessel"
+                        :dropdownStyle="{ width: '300px' }"
+                        searchApi="getVesselInfoService"
+                        :searchQuery="{
+                          KeyWord: '',
+                          CarrierID: this.orderDetails.carrierid || 'CMA',
+                          ETD: this.orderDetails.etd || ''
+                        }"
+                        :showLabel="['vessel']"
+                        @select="getAutoViewRes"
+                        @selectInput="getAutoViewResInput"
+                      ></autoView>
+                      <!-- <selectView
+                        class="copy-input"
+                        ref="vesselView"
+                        type="vessel"
+                        :defaultVal="orderDetails.vessel"
+                        searchApi="getVesselInfoService"
+                        :searchQuery="{
+                          KeyWord: '',
+                          CarrierID: this.orderDetails.carrierid || 'CMA',
+                          ETD: this.orderDetails.etd || '',
+                        }"
+                        :showLabel="['vessel']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"
+                      ></selectView> -->
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-model-item
+                      class="pre-from-label"
+                      label="航次"
+                      prop="voyno"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <inputView type="voyno" :parentVal="orderDetails.voyno" @getInputChange="inputChange" />
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                    <a-form-model-item
+                      class="pre-from-label"
+                      label="船代"
+                      prop="forwarder"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <selectView
+                        type="shipagency"
+                        :defaultVal="orderDetails.forwarder"
+                        searchApi="GetForwarderlist"
+                        :searchQuery="{ KeyWord: '' }"
+                        :showLabel="['name', 'showCode']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"
+                      ></selectView>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-model-item
+                      class="pre-from-label"
+                      label="船公司"
+                      prop="carrier"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <selectView
+                        type="carrier"
+                        :defaultVal="orderDetails.carrier"
+                        searchApi="GetCarrierlist"
+                        :searchQuery="{ keyword: '', type: 'consignor' }"
+                        :showLabel="['cnName', 'code']"
+                        :openSearch="false"
+                        @change="getSelectViewRes"
+                        style="flex: 1; margin-top: -4px"
+                      ></selectView>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-model-item
+                      class="pre-from-label"
+                      label="开船日期"
+                      prop="etd"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <div class="date-box">
+                        <datePickerView
+                          class="date-picker"
+                          :parentVal="orderDetails.etd"
+                          type="etd"
+                          format="YYYY-MM-DD"
+                          @dateChange="dateChangeFun"
+                        ></datePickerView>
+                      </div>
+                      <!-- <selectView
+                        type="carrierid"
+                        :defaultVal="orderDetails.carrierid"
+                        searchApi="GetCarrierlist"
+                        :searchQuery="{ keyword: '', type: 'consignor' }"
+                        :showLabel="['cnName', 'code']"
+                        :openSearch="false"
+                        @change="getSelectViewRes"
+                        style="flex: 1; margin-top: -4px;"
+                      ></selectView> -->
+                    </a-form-model-item>
+                  </a-col>
+                </a-row>
+              </div>
+              <div class="pre-mail-info">
+                <a-row>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <div class="title">
+                        <span>发货人信息</span>
+                        <div class="Template">
+                          <selectView
+                            type="shipperTemplate"
+                            ref="shippernameInput"
+                            :defaultVal="orderDetails.shipperTemplate"
+                            searchApi="BookingTemplate"
+                            :searchQuery="{ TemplateName: '', Type: this.enmuType('shipper') }"
+                            :showLabel="['title']"
+                            :openSearch="true"
+                            @change="getSelectViewRes"
+                            style="flex: 1"
+                          ></selectView>
+                          <a-button class="save-btn" type="link" size="small" icon="save" @click="saveModel('shipper')">
+                            保存
+                          </a-button>
+                        </div>
+                        <div></div>
+                      </div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="发货人"
+                              prop="shippername"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <inputView
+                                type="shippername"
+                                :parentVal="orderDetails.shippername"
+                                @getInputChange="inputChange"
+                              />
+                              <!-- <autoView
+                                type="shippername"
+                                ref="shippernameInput"
+                                :defaultVal="orderDetails.shippername"
+                                searchApi="BookingTemplate"
+                                :searchQuery="{ Title: '', Type: 20 }"
+                                :showLabel="['title']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView> -->
+                              <!-- <selectView
+                                type="shippername"
+                                ref="shippernameInput"
+                                :defaultVal="orderDetails.shippername"
+                                searchApi="BookingTemplate"
+                                :searchQuery="{ Title: '', Type: 20 }"
+                                :showLabel="['title']"
+                                :openSearch="true"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="地址"
+                              prop="shipperaddR1"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <inputView
+                                type="shipperaddR1"
+                                :parentVal="orderDetails.shipperaddR1"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="国家"
+                              prop="shippercountryName"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <autoView
+                                type="shippercountryName"
+                                :defaultVal="orderDetails.shippercountryName"
+                                searchApi="CodeCountryList"
+                                :searchQuery="{ Name: '' }"
+                                :showLabel="['code', 'cnName']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView>
+                              <!-- <selectView
+                                type="shippercountry"
+                                :defaultVal="orderDetails.shippercountry"
+                                searchApi="CodeCountryList"
+                                :searchQuery="{ SearchValue: ''}"
+                                :showLabel="['enName', 'cnName']"
+                                :openSearch="false"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="电话"
+                              prop="shippertel"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <inputView
+                                type="shippertel"
+                                :parentVal="orderDetails.shippertel"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <div class="title">
+                        <span>收货人信息</span>
+                        <div class="Template">
+                          <selectView
+                            type="consigneeTemplate"
+                            ref="consigneenameInput"
+                            :defaultVal="orderDetails.consigneeTemplate"
+                            searchApi="BookingTemplate"
+                            :searchQuery="{ TemplateName: '', Type: this.enmuType('consignee') }"
+                            :showLabel="['title']"
+                            :openSearch="true"
+                            @change="getSelectViewRes"
+                            style="flex: 1"
+                          ></selectView>
+                          <a-button
+                            class="save-btn"
+                            type="link"
+                            size="small"
+                            icon="save"
+                            @click="saveModel('consignee')"
+                            >保存</a-button
+                          >
+                        </div>
+                        <a-button class="order-btn" size="small" type="primary" @click="CopyConsignee">
+                          复制通知人
+                        </a-button>
+                      </div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="收货人"
+                              prop="consigneename"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <inputView
+                                type="consigneename"
+                                :parentVal="orderDetails.consigneename"
+                                @getInputChange="inputChange"
+                              />
+                              <!-- <autoView
+                                type="consigneename"
+                                ref="consigneenameInput"
+                                :defaultVal="orderDetails.consigneename"
+                                searchApi="BookingTemplate"
+                                :searchQuery="{ Title: '', Type: 10 }"
+                                :showLabel="['title']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView> -->
+                              <!-- <selectView
+                                type="consigneename"
+                                ref="consigneenameInput"
+                                :defaultVal="orderDetails.consigneename"
+                                searchApi="BookingTemplate"
+                                :searchQuery="{ Title: '', Type: 20 }"
+                                :showLabel="['title']"
+                                :openSearch="true"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="地址"
+                              prop="consigneeaddR1"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <inputView
+                                type="consigneeaddR1"
+                                :parentVal="orderDetails.consigneeaddR1"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="国家"
+                              prop="consigneecountryName"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <autoView
+                                type="consigneecountryName"
+                                :defaultVal="orderDetails.consigneecountryName"
+                                searchApi="CodeCountryList"
+                                :searchQuery="{ Name: '' }"
+                                :showLabel="['code', 'cnName']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView>
+                              <!-- <selectView
+                                type="consigneecountry"
+                                :defaultVal="orderDetails.consigneecountry"
+                                searchApi="CodeCountryList"
+                                :searchQuery="{ SearchValue: ''}"
+                                :showLabel="['enName', 'cnName']"
+                                :openSearch="false"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="电话"
+                              prop="consigneetel"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <inputView
+                                type="consigneetel"
+                                :parentVal="orderDetails.consigneetel"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <div class="title">
+                        <span>通知人信息</span>
+                        <div class="Template">
+                          <selectView
+                            type="notifypartyTemplate"
+                            ref="notifypartynameInput"
+                            :defaultVal="orderDetails.notifypartyTemplate"
+                            searchApi="BookingTemplate"
+                            :searchQuery="{ TemplateName: '', Type: this.enmuType('notifyparty') }"
+                            :showLabel="['title']"
+                            :openSearch="true"
+                            @change="getSelectViewRes"
+                            style="flex: 1"
+                          ></selectView>
+                          <a-button
+                            class="save-btn"
+                            type="link"
+                            size="small"
+                            icon="save"
+                            @click="saveModel('notifyparty')"
+                            >保存</a-button
+                          >
+                        </div>
+                        <a-button class="order-btn" size="small" type="primary" @click="CopyNotifyparty">
+                          复制收货人
+                        </a-button>
+                      </div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="通知人"
+                              prop="notifypartyname"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <inputView
+                                type="notifypartyname"
+                                :parentVal="orderDetails.notifypartyname"
+                                @getInputChange="inputChange"
+                              />
+                              <!-- <autoView
+                                type="notifypartyname"
+                                ref="notifypartynameInput"
+                                :defaultVal="orderDetails.notifypartyname"
+                                searchApi="BookingTemplate"
+                                :searchQuery="{ Title: '', Type: 30 }"
+                                :showLabel="['title']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView> -->
+                              <!-- <selectView
+                                type="notifypartyname"
+                                ref="notifypartynameInput"
+                                :defaultVal="orderDetails.notifypartyname"
+                                searchApi="BookingTemplate"
+                                :searchQuery="{ Title: '', Type: 20 }"
+                                :showLabel="['title']"
+                                :openSearch="true"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="地址"
+                              prop="notifypartyaddR1"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <inputView
+                                type="notifypartyaddR1"
+                                :parentVal="orderDetails.notifypartyaddR1"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="国家"
+                              prop="notifypartycountryName"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <autoView
+                                type="notifypartycountryName"
+                                :defaultVal="orderDetails.notifypartycountryName"
+                                searchApi="CodeCountryList"
+                                :searchQuery="{ Name: '' }"
+                                :showLabel="['code', 'cnName']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView>
+                              <!-- <selectView
+                                type="notifypartycountry"
+                                :defaultVal="orderDetails.notifypartycountry"
+                                searchApi="CodeCountryList"
+                                :searchQuery="{ SearchValue: ''}"
+                                :showLabel="['enName', 'cnName']"
+                                :openSearch="false"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="电话"
+                              prop="notifypartytel"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <inputView
+                                type="notifypartytel"
+                                :parentVal="orderDetails.notifypartytel"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">港口信息</div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="6">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="装货港代码"
+                              prop="portloadid"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <autoView
+                                type="portloadid"
+                                :defaultVal="orderDetails.portloadid"
+                                searchApi="GetPortloadlist"
+                                :searchQuery="{ KeyWord: '' }"
+                                :showLabel="['ediCode', 'enName']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView>
+                              <!-- <selectView
+                                type="portloadid"
+                                :defaultVal="orderDetails.portloadid"
+                                searchApi="GetPortloadlist"
+                                :searchQuery="{ KeyWord: '' }"
+                                :showLabel="['ediCode', 'enName']"
+                                :openSearch="true"
+                                :isCopy="true"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="6">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="装货港"
+                              prop="portload"
+                              :labelCol="labelCol3"
+                              :wrapperCol="wrapperCol3"
+                              has-feedback
+                            >
+                              <inputView
+                                type="portload"
+                                size="small"
+                                :parentVal="orderDetails.portload"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+
+                          <a-col :span="6">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="卸货港代码"
+                              prop="portdischargeid"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <autoView
+                                type="portdischargeid"
+                                :defaultVal="orderDetails.portdischargeid"
+                                searchApi="GetPortlist"
+                                :searchQuery="{ KeyWord: '' }"
+                                :showLabel="['ediCode', 'enName']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView>
+                              <!-- <selectView
+                                type="portdischargeid"
+                                :defaultVal="orderDetails.portdischargeid"
+                                searchApi="GetPortlist"
+                                :searchQuery="{ KeyWord: '' }"
+                                :showLabel="['ediCode', 'enName']"
+                                :openSearch="true"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="6">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="卸货港"
+                              prop="portdischarge"
+                              :labelCol="labelCol3"
+                              :wrapperCol="wrapperCol3"
+                              has-feedback
+                            >
+                              <inputView
+                                type="portdischarge"
+                                size="small"
+                                :parentVal="orderDetails.portdischarge"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+
+                          <a-col :span="6">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="收货地代码"
+                              prop="placedeliveryid"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <autoView
+                                type="placedeliveryid"
+                                :defaultVal="orderDetails.placedeliveryid"
+                                searchApi="GetPortloadlist"
+                                :searchQuery="{ KeyWord: '' }"
+                                :showLabel="['ediCode', 'enName']"
+                                @select="getAutoViewRes"
+                                @selectInput="getAutoViewResInput"
+                              ></autoView>
+
+                              <!-- <selectView
+                                type="placedeliveryid"
+                                :defaultVal="orderDetails.placedeliveryid"
+                                searchApi="GetPortloadlist"
+                                :searchQuery="{ KeyWord: '' }"
+                                :showLabel="['ediCode', 'enName']"
+                                :openSearch="true"
+                                @change="getSelectViewRes"
+                              ></selectView> -->
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :span="6">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="收货地"
+                              prop="placedelivery"
+                              :labelCol="labelCol3"
+                              :wrapperCol="wrapperCol3"
+                              has-feedback
+                            >
+                              <inputView
+                                type="placedelivery"
+                                size="small"
+                                :parentVal="orderDetails.placedelivery"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">货物信息</div>
+                      <div class="cargo-info-bottm">
+                        <div class="marks">
+                          <a-form-model-item
+                            class="pre-from-label"
+                            label="唛头"
+                            prop="marks"
+                            :labelCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 }
+                            }"
+                            :wrapperCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 }
+                            }"
+                            has-feedback
+                          >
+                            <textareaView
+                              class="input-box"
+                              id="pre-marks-scroll"
+                              :parentVal="orderDetails.marks"
+                              type="marks"
+                              :height="183"
+                              :openToCDB="true"
+                              @getTextareaChange="getTextareaChange"
+                            />
+                          </a-form-model-item>
+                        </div>
+                        <div class="description">
+                          <a-form-model-item
+                            class="pre-from-label"
+                            label="货物描述"
+                            prop="description"
+                            :labelCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 }
+                            }"
+                            :wrapperCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 }
+                            }"
+                            has-feedback
+                          >
+                            <textareaView
+                              class="input-box"
+                              id="pre-description-scroll"
+                              :parentVal="orderDetails.description"
+                              type="description"
+                              :height="183"
+                              :openToCDB="true"
+                              @getTextareaChange="getTextareaChange"
+                            />
+                          </a-form-model-item>
+                        </div>
+                        <div class="right">
+                          <a-row>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="货物类型"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="cargoid"
+                              >
+                                <selectView
+                                  type="cargoid"
+                                  :defaultVal="orderDetails.cargoid"
+                                  searchApi="cargoData"
+                                  :searchQuery="{ name: '' }"
+                                  :showLabel="['name']"
+                                  :openSearch="false"
+                                  @change="getSelectViewRes"
+                                ></selectView>
+                              </a-form-model-item>
+                            </a-col>
+                          </a-row>
+                          <a-row>
+                            <!-- <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="总件数"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="pkgs"
+                              >
+                                <div class="line-box">
+                                  <inputView type="pkgs" :parentVal="orderDetails.pkgs" inputType="number" @getInputChange="inputChange"/>
+                                </div>
+                              </a-form-model-item>
+                            </a-col> -->
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="包装"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="kindpkgs"
+                              >
+                                <selectView
+                                  type="kindpkgs"
+                                  :defaultVal="orderDetails.kindpkgs"
+                                  searchApi="GetPackage"
+                                  :searchQuery="{ KeyWord: '' }"
+                                  :showLabel="['name']"
+                                  :openSearch="false"
+                                  @change="getSelectViewRes"
+                                ></selectView>
+                              </a-form-model-item>
+                            </a-col>
+                            <!-- <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="总重量"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="kgs"
+                              >
+                                <div class="line-box">
+                                  <inputView type="kgs" :parentVal="orderDetails.kgs" @getInputChange="inputChange"/>
+                                  <span class="unit">KGS</span>
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="总尺码"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="cbm"
+                              >
+                                <div class="line-box">
+                                  <inputView type="cbm" :parentVal="orderDetails.cbm" @getInputChange="inputChange"/>
+                                  <span class="unit">CBM</span>
+                                </div>
+                              </a-form-model-item>
+                            </a-col> -->
+                            <!-- === 其他字段 === -->
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="温度"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="tempset"
+                              >
+                                <div class="line-box">
+                                  <inputView
+                                    type="tempset"
+                                    :ishd="orderDetails.cargoid !== 'R'"
+                                    size="small"
+                                    :parentVal="orderDetails.tempset"
+                                    @getInputChange="inputChange"
+                                  />
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="温度单位"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="tempid"
+                              >
+                                <a-select
+                                  size="small"
+                                  :disabled="orderDetails.cargoid !== 'R'"
+                                  :default-value="orderDetails.tempid || 'C摄氏'"
+                                  v-model="orderDetails.tempid"
+                                >
+                                  <a-select-option value="C"> C摄氏 </a-select-option>
+                                  <a-select-option value="F"> F华氏 </a-select-option>
+                                </a-select>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="通风"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="reeferf"
+                              >
+                                <div class="line-box">
+                                  <inputView
+                                    type="reeferf"
+                                    size="small"
+                                    :ishd="orderDetails.cargoid !== 'R'"
+                                    :parentVal="orderDetails.reeferf"
+                                    @getInputChange="inputChange"
+                                  />
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="CLASS"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="dclass"
+                              >
+                                <div class="line-box">
+                                  <inputView
+                                    type="dclass"
+                                    :ishd="orderDetails.cargoid !== 'D'"
+                                    size="small"
+                                    :parentVal="orderDetails.dclass"
+                                    @getInputChange="inputChange"
+                                  />
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="UN NO"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="dunno"
+                              >
+                                <div class="line-box">
+                                  <inputView
+                                    type="dunno"
+                                    size="small"
+                                    :ishd="orderDetails.cargoid !== 'D'"
+                                    :parentVal="orderDetails.dunno"
+                                    @getInputChange="inputChange"
+                                  />
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="联系人"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="dattn"
+                              >
+                                <div class="line-box">
+                                  <inputView
+                                    type="dattn"
+                                    size="small"
+                                    :ishd="orderDetails.cargoid !== 'D'"
+                                    :parentVal="orderDetails.dattn"
+                                    @getInputChange="inputChange"
+                                  />
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-model-item
+                                class="pre-from-label"
+                                label="联系电话"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                prop="dtel"
+                              >
+                                <div class="line-box">
+                                  <inputView
+                                    type="dtel"
+                                    :ishd="orderDetails.cargoid !== 'D'"
+                                    size="small"
+                                    :parentVal="orderDetails.dtel"
+                                    @getInputChange="inputChange"
+                                  />
+                                </div>
+                              </a-form-model-item>
+                            </a-col>
+                          </a-row>
+                        </div>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">备注信息</div>
+                      <div class="remarks-bottom">
+                        <a-row>
+                          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="备注"
+                              :labelCol="{
+                                xs: { span: 24 },
+                                sm: { span: 8 },
+                                md: { span: 1 }
+                              }"
+                              :wrapperCol="{
+                                xs: { span: 24 },
+                                sm: { span: 15 },
+                                md: { span: 23 }
+                              }"
+                              has-feedback
+                              prop="remarks"
+                            >
+                              <inputView
+                                type="remarks"
+                                :parentVal="orderDetails.remarks"
+                                @getInputChange="inputChange"
+                              />
+                            </a-form-model-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">集装箱信息</div>
+                      <div class="ctn-btn">
+                        <div class="btn" @click="addCtn">
+                          <i class="iconfont icon-icon_tianjia"></i><span>新建</span>
+                        </div>
+                        <div class="btn" @click="copyCtn">
+                          <i class="iconfont icon-fuzhi2"></i><span>复制新建</span>
+                        </div>
+                        <div class="btn" @click="removeCtn">
+                          <i class="iconfont icon-shanchu1"></i><span>删除</span>
+                        </div>
+                        <div class="import">
+                          <a-form-model-item
+                            class="pre-from-label"
+                            label="场站"
+                            prop="yard"
+                            :labelCol="labelCol"
+                            :wrapperCol="wrapperCol"
+                            has-feedback
+                          >
+                            <selectView
+                              type="yard"
+                              :defaultVal="orderDetails.yard"
+                              searchApi="GetYardlist"
+                              :searchQuery="{ keyword: '' }"
+                              :showLabel="['name', 'showCode']"
+                              :openSearch="false"
+                              @change="getSelectViewRes"
+                              style="width: 200px"
+                            ></selectView>
+                          </a-form-model-item>
+                        </div>
+                        <div :style="{ textAlign: 'right' }">
+                          <span>件数: {{ total('pkgs') }} 重量: {{ total('kgs') }} 尺码：{{ total('cbm') }}</span>
+                        </div>
+                      </div>
+                      <div class="table-box" v-if="preOrderLoad">
+                        <ve-table
+                          :columns="columns"
+                          :table-data="orderDetails.ediCtn"
+                          borderY
+                          ref="preTableRef"
+                          :cell-autofill-option="cellAutofillOption"
+                          :editOption="editOption"
+                          rowKeyFieldName="rowKey"
+                          :checkbox-option="checkboxOption"
+                          :rowStyleOption="rowStyleOption"
+                          :clipboard-option="clipboardOption"
+                          :cellSelectionOption="cellSelectionOption"
+                        />
+                      </div>
+                    </div>
+                  </a-col>
+                </a-row>
+              </div>
+            </a-form-model>
+          </div>
+        </a-col>
+      </a-row>
+
+      <a-modal width="50vw" :maskClosable="false" v-model="showSendModel" title="发送预配舱单" @cancel="sendClose">
+        <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-radio-group :options="sendOption" v-model="sendType" />
+                </a-form-item>
+
+                <a-form-item
+                  label="备注"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
+                  has-feedback
+                >
+                  <a-textarea
+                    v-model="sendRemarkVal"
+                    placeholder="请输入备注"
+                    :auto-size="{ minRows: 3, maxRows: 5 }"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <template slot="footer">
+          <a-button type="primary" :loading="sendLoading" @click="sendSubmit">确认发送</a-button>
+          <a-button type="primary" @click="sendClose">关闭</a-button>
+        </template>
+      </a-modal>
+      <a-modal
+        title="保存模板"
+        :width="900"
+        :visible="modelVisible"
+        :maskClosable="false"
+        @ok="handleModelSubmit"
+        @cancel="handleModelCancel"
+      >
+        <div class="content">
+          <div class="label">模板名称</div>
+          <a-input :allowClear="true" v-model="modelName" />
+        </div>
+      </a-modal>
+    </div>
+  </a-modal>
+</template>
+<script>
+import { XCard } from '@/components'
+import inputView from '../components/inputView'
+import selectView from '../components/selectView'
+import datePickerView from '../components/datePickerView'
+import autoView from '../components/autoView'
+import textareaView from '../components/textareaView'
+import {
+  getPageESeaeEdi,
+  seaeEdiSave,
+  seaeEdiDelete,
+  seaeEdiCustEDI,
+  BookingTemplateAdd,
+  GetPortlist
+} from '@/api/modular/main/BookingLedger'
+import { mapGetters } from 'vuex'
+
+const initData = {
+  id: 0,
+  bookingId: 0,
+
+  mblno: '',
+  hblno: '',
+  etd: '',
+  forwarder: '',
+
+  vessel: '',
+  voyno: '',
+  carrier: '',
+  carrierName: '',
+  carrierid: '',
+
+  shippername: '',
+  shipperaddR1: '',
+  shippercountry: '',
+  shippercountryName: '',
+  shippertel: '',
+
+  consigneename: '',
+  consigneeaddR1: '',
+  consigneecountry: '',
+  consigneecountryName: '',
+  consigneetel: '',
+
+  notifypartyname: '',
+  notifypartyaddR1: '',
+  notifypartycountry: '',
+  notifypartycountryName: '',
+  notifypartytel: '',
+
+  portload: '',
+  portloadid: '',
+  portdischarge: '',
+  portdischargeid: '',
+
+  marks: '',
+  description: '',
+  cargoid: '',
+  tempset: '',
+  tempid: '',
+  reeferf: '',
+  dclass: '',
+  dunno: '',
+  dattn: '',
+  dtel: '',
+  kindpkgs: '',
+  remarks: '',
+  placedelivery: '',
+  placedeliveryid: '',
+  sendremark: '',
+  yardid: '',
+  yard: '',
+  ediCtn: [
+    {
+      id: 0,
+      pId: 0,
+      ctnall: '',
+      cntrno: '',
+      sealno: '',
+      pkgs: 0,
+      kindpkgs: '',
+      kgs: 0,
+      cbm: 0
+    }
+  ]
+}
+export default {
+  name: '',
+  components: {
+    XCard,
+    inputView,
+    selectView,
+    datePickerView,
+    autoView,
+    textareaView
+  },
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['packageList', 'ctnallList'])
+  },
+  data() {
+    return {
+      shipperTemplate: '',
+      consigneeTemplate: '',
+      notifypartyTemplate: '',
+      modelType: '',
+      modelName: '',
+      modelVisible: false,
+      shippername: '',
+      consigneename: '',
+      notifypartyname: '',
+      openPreOrderShow: false,
+      id: this.$route.query.id,
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 4 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 20 }
+      },
+      labelCol2: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 8 }
+      },
+      wrapperCol2: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 16 }
+      },
+      labelCol3: {
+        xs: { span: 24 },
+        sm: { span: 8 },
+        md: { span: 6 }
+      },
+      wrapperCol3: {
+        xs: { span: 24 },
+        sm: { span: 15 },
+        md: { span: 16 }
+      },
+      rules: {
+        mblno: { required: true, title: '主提单号', message: '请输入主提单号', trigger: 'change' },
+        hblno: { required: true, title: '分提单号', message: '请输入分提单号', trigger: 'change' },
+        vessel: { required: false, title: '船名', message: '请选择船名', trigger: 'change' },
+        voyno: { required: false, title: '航次', message: '请选择航次', trigger: 'change' },
+        forwarder: { required: false, title: '船代', message: '请选择船代', trigger: 'change' },
+
+        shippername: { required: true, title: '发货人', message: '请选择发货人', trigger: 'change' },
+        shipperaddR1: { required: true, title: '地址', message: '请输入发货地址', trigger: 'change' },
+        shippercountryName: { required: true, title: '国家', message: '请选择发货国家', trigger: 'change' },
+        shippertel: { required: true, title: '电话', message: '请输入发货电话', trigger: 'change' },
+
+        consigneename: { required: true, title: '收货人', message: '请选择收货人', trigger: 'change' },
+        consigneeaddR1: { required: true, title: '地址', message: '请输入收货地址', trigger: 'change' },
+        consigneecountryName: { required: true, title: '国家', message: '请选择收货国家', trigger: 'change' },
+        consigneetel: { required: true, title: '电话', message: '请输入收货电话', trigger: 'change' },
+
+        notifypartyname: { required: true, title: '通知人', message: '请选择通知人', trigger: 'change' },
+        notifypartyaddR1: { required: true, title: '地址', message: '请输入通知地址', trigger: 'change' },
+        notifypartycountryName: { required: true, title: '国家', message: '请选择通知国家', trigger: 'change' },
+        notifypartytel: { required: true, title: '电话', message: '请输入通知电话', trigger: 'change' },
+
+        portloadid: { required: true, title: '装货港代码', message: '请选择装货港代码', trigger: 'change' },
+        portload: { required: true, title: '装货港', message: '请输入装货港', trigger: 'change' },
+        portdischargeid: { required: true, title: '卸货港代码', message: '请选择卸货港代码', trigger: 'change' },
+        portdischarge: { required: true, title: '卸货港', message: '请输入卸货港', trigger: 'change' },
+        placedeliveryid: { required: true, title: '收货地代码', message: '请选择收货地代码', trigger: 'change' },
+        placedelivery: { required: true, title: '收货地', message: '请输入收货地', trigger: 'change' },
+
+        marks: { required: true, title: '唛头', message: '请输入唛头', trigger: 'change' },
+        description: { required: true, title: '货物描述', message: '请输入货物描述', trigger: 'change' },
+
+        ctnList: {
+          ctnall: { required: true, title: '箱型', message: '请选择箱型', trigger: 'change' },
+          cntrno: { required: true, title: '箱号', message: '请选择箱号', trigger: 'change' },
+          sealno: { required: true, title: '封号', message: '请选择封号', trigger: 'change' },
+          pkgs: { required: true, title: '件数', message: '请选择件数', trigger: 'change' },
+          kindpkgs: { required: true, title: '包装', message: '请选择包装', trigger: 'change' },
+          kgs: { required: true, title: '重量', message: '请选择重量', trigger: 'change' }
+        }
+      },
+      orderList: [],
+      orderOptions: [],
+      editIndex: 0,
+      orderDetails: {},
+      preOrderLoad: false,
+      columns: [
+        {
+          field: '',
+          key: 'checkbox',
+          type: 'checkbox',
+          title: '',
+          width: 40,
+          operationColumn: true,
+          align: 'center'
+        },
+        {
+          field: '',
+          key: 'a',
+          title: '序号',
+          width: 50,
+          align: 'center',
+          operationColumn: true,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return ++rowIndex
+          }
+        },
+        // 箱型
+        {
+          field: 'ctnall',
+          key: 'ctnall',
+          title: '箱型',
+          align: 'left',
+          width: 80,
+          edit: false,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            // this.openEdit = true
+            return (
+              <a-select
+                size="small"
+                value={row['ctnall']}
+                showSearch
+                ref="ctnallView"
+                class="ctnallView"
+                allow-clear={true}
+                style="width: 120px"
+                filter-option={this.filterOption}
+                on-change={(val) => {
+                  // console.log('== 箱型内部监听change ==')
+                  if (val !== undefined) {
+                    const data = this.ctnallList[val]
+                    this.orderDetails.ediCtn[rowIndex].ctnall = data.name
+                    // this.orderDetails.ediCtn[rowIndex].ctncode = data.code
+                    row['ctnall'] = data.name
+                    this.$forceUpdate()
+                  } else {
+                    row['ctnall'] = ''
+                    this.orderDetails.ediCtn[rowIndex].ctnall = ''
+                    // this.orderDetails.ediCtn[rowIndex].ctncode = ''
+                  }
+                }}
+                on-focus={(val) => {
+                  // this.ctnallViewIndex = rowIndex
+                }}
+                on-blur={(val) => {
+                  // this.ctnallViewIndex = null
+                }}
+                on-inputKeydown={(val) => {
+                  if (val.key == 'Backspace') {
+                    setTimeout(() => {
+                      val.target.value = val.target.value.slice(0, -1)
+                    }, 100)
+                  }
+                }}
+              >
+                {this.ctnallList.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnList.ctnall.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        // 箱号
+        {
+          field: 'cntrno',
+          key: 'cntrno',
+          title: '箱号',
+          align: 'left',
+          width: 130,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnList.cntrno.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        // 封号
+        {
+          field: 'sealno',
+          key: 'sealno',
+          title: '封号',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnList.sealno.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        // 件数
+        {
+          field: 'pkgs',
+          key: 'pkgs',
+          title: '件数',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnList.pkgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        // 包装
+        {
+          field: 'kindpkgs',
+          key: 'kindpkgs',
+          title: '包装',
+          align: 'left',
+          edit: false,
+          width: 130,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            return (
+              <a-select
+                size="small"
+                allow-clear={true}
+                showSearch
+                defaultValue={row['kindpkgs']}
+                option-filter-prop="children"
+                filter-option={this.filterOption}
+                style="width: 120px"
+                class="pre-kindpkgsView"
+                on-change={(val) => {
+                  if (val !== undefined) {
+                    const data = this.packageList[val]
+                    this.orderDetails.ediCtn[rowIndex].kindpkgs = data.name
+                    row['kindpkgs'] = data.name
+                    setTimeout(() => {
+                      console.log(this.orderDetails.ediCtn.length)
+                      this.orderDetails.ediCtn.map((item, index) => {
+                        item.kindpkgs = this.packageList[val].name || ''
+                        if (
+                          document
+                            .getElementsByClassName('pre-kindpkgsView')
+                            [index].getElementsByClassName('ant-select-selection-selected-value')[0]
+                        ) {
+                          document
+                            .getElementsByClassName('pre-kindpkgsView')
+                            [index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML =
+                            this.packageList[val].name || ''
+                        } else {
+                          document
+                            .getElementsByClassName('pre-kindpkgsView')
+                            [index].getElementsByTagName('input')[0].val = this.packageList[val].name || ''
+                        }
+                      })
+                    }, 300)
+                    this.$forceUpdate()
+                  } else {
+                    row['kindpkgs'] = ''
+                    this.orderDetails.ediCtn[rowIndex].kindpkgs = ''
+                    this.orderDetails.ediCtn.map((item, index) => {
+                      if (index !== rowIndex) {
+                        item.kindpkgs = ''
+                        document
+                          .getElementsByClassName('pre-kindpkgsView')
+                          [index].getElementsByClassName('ant-select-selection-selected-value')[0].innerHTML = ''
+                      }
+                    })
+                  }
+                  this.orderDetails.kindpkgs = row['kindpkgs']
+                }}
+                on-focus={(val) => {
+                  this.kindpkgsViewIndex = rowIndex
+                }}
+                on-blur={(val) => {
+                  this.kindpkgsViewIndex = null
+                }}
+                on-inputKeydown={(val) => {
+                  if (val.key == 'Backspace') {
+                    setTimeout(() => {
+                      val.target.value = val.target.value.slice(0, -1)
+                    }, 100)
+                  }
+                }}
+              >
+                {this.packageList.map((item, index) => {
+                  return <a-select-option value={index}>{item.name}</a-select-option>
+                })}
+              </a-select>
+            )
+          },
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnList.kindpkgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        // 重量
+        {
+          field: 'kgs',
+          key: 'kgs',
+          title: '重量',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {this.rules.ctnList.kgs.required ? <i style="color: #f00">*</i> : ''} {column.title}
+              </span>
+            )
+          }
+        },
+        // 尺码
+        {
+          field: 'cbm',
+          key: 'cbm',
+          title: '尺码',
+          align: 'left',
+          width: 60,
+          edit: true,
+          renderHeaderCell: ({ column }, h) => {
+            return (
+              <span class="text-bold" style="text-align: center;">
+                {column.title}
+              </span>
+            )
+          }
+        }
+      ],
+      editOption: {
+        beforeCellValueChange: ({ row, column, changeValue }) => {
+          if (this.inTableLoad) {
+            return false
+          }
+          if (
+            ['pkgs', 'kgs', 'cbm'].includes(column.field) &&
+            !new RegExp(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(changeValue)
+          ) {
+            const height = document.body.clientHeight - 100
+            this.$message.config({
+              top: `${height}px`,
+              duration: 2,
+              maxCount: 3
+            })
+            this.$message.error(`输入的${this.enmuErrorLabel(column.field)}不符合规则`)
+            setTimeout(() => {
+              this.$message.destroy()
+              this.$message.config({
+                top: `100px`,
+                duration: 2,
+                maxCount: 3
+              })
+            }, 2000)
+            return false
+          }
+          if (column.field === 'cntrno') {
+            const res = this.checkCntrno(changeValue)
+            if (res !== '') {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error(res)
+              // row['cntrno'] = ''
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            }
+          }
+        },
+        afterCellValueChange: ({ row, column, changeValue }) => {
+          if (this.inTableLoad) {
+            return false
+          }
+          if (['kgs', 'cbm', 'tareweight'].includes(column.field)) {
+            changeValue = changeValue + ''
+            const valIndex = changeValue.includes('.') ? changeValue.indexOf('.') + 1 : false
+            const valCount = changeValue.length - valIndex
+            if (valIndex && valCount > 5) {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('仅支持小数点后五位')
+              row[column.field] = changeValue.substr(0, valIndex + 5)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            } else {
+              const arrayNum = changeValue.split('.')
+              if (!/\./.test(changeValue)) {
+                row[column.field] = changeValue + '.00'
+              } else if (arrayNum[1].length < 2) {
+                row[column.field] = changeValue + '0'
+              }
+            }
+          }
+          if (column.field === 'pkgs') {
+            if (!/(^[1-9]\d*$)/.test(changeValue)) {
+              const height = document.body.clientHeight - 100
+              this.$message.config({
+                top: `${height}px`,
+                duration: 2,
+                maxCount: 3
+              })
+              this.$message.error('件数请输入整数')
+              const cNum = changeValue.indexOf('.')
+              row[column.field] = changeValue.substr(0, cNum)
+              setTimeout(() => {
+                this.$message.destroy()
+                this.$message.config({
+                  top: `100px`,
+                  duration: 2,
+                  maxCount: 3
+                })
+              }, 2000)
+            } else {
+            }
+            let num = 0
+            this.orderDetails.ediCtn.map((item, index) => {
+              if (item.pkgs) {
+                num += Number(item.pkgs)
+              }
+            })
+            this.totalPkgs = num
+          }
+          if (column.field === 'kgs') {
+            let num = 0
+            this.orderDetails.ediCtn.map((item, index) => {
+              num = (num * 10000 + Number(item.kgs) * 10000) / 10000
+              // num += Number(item.kgs)
+            })
+            num += ''
+            const pNum = num.split('.')
+            if (!/\./.test(num)) {
+              this.totalKgs = num + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalKgs = num + '0'
+            } else {
+              this.totalKgs = Number(pNum[0] + '.' + pNum[1].substr(0, 5))
+              // this.totalKgs = num
+            }
+          }
+          if (column.field === 'cbm') {
+            let num = 0
+            this.orderDetails.ediCtn.map((item, index) => {
+              // num += Number(item.cbm)
+              num = (num * 10000 + Number(item.cbm) * 10000) / 10000
+            })
+            num += ''
+            const pNum = num.split('.')
+            if (!/\./.test(num)) {
+              this.totalCbm = num + '.00'
+            } else if (pNum[1].length < 2) {
+              this.totalCbm = num + '0'
+            } else {
+              // this.totalCbm = num
+              this.totalCbm = Number(pNum[0] + '.' + pNum[1].substr(0, 5))
+            }
+          }
+        },
+        cellValueChange: ({ row, column }) => {}
+      },
+      // 可控单元格编辑
+      rowStyleOption: {
+        clickHighlight: false,
+        hoverHighlight: false
+      },
+      cellAutofillOption: true,
+      cellSelectionOption: {
+        // disble cell selection
+        enable: true
+      },
+      checkboxOption: {
+        hideSelectAll: false,
+        // 可控属性
+        selectedRowKeys: [],
+        // 行选择改变事件
+        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
+          this.changeSelectedRowKeys(selectedRowKeys)
+          // this.selectArr = selectedRowKeys
+        },
+        // 全选改变事件
+        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
+          if (isSelected) {
+            this.changeSelectedRowKeys(selectedRowKeys)
+            // this.selectArr = selectedRowKeys
+          } else {
+            this.selectArr = []
+          }
+        }
+      },
+      // 单元格复制
+      clipboardOption: {
+        copy: true,
+        paste: true,
+        cut: true,
+        delete: true,
+        beforeCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCopy: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforePaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterPaste: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterCut: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        beforeDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        },
+        afterDelete: ({ data, selectionRangeIndexes, selectionRangeKeys }) => {
+          this.log({ data, selectionRangeIndexes, selectionRangeKeys })
+        }
+      },
+      selectArr: [],
+      showSendModel: false,
+      sendType: '0',
+      sendOption: [
+        { label: '新增', value: '0' },
+        { label: '修改', value: '1' },
+        { label: '删除', value: '2' }
+        // { label: '保存', value: '3' },
+        // { label: '作废', value: '4' }
+      ],
+      sendRemarkVal: '',
+      sendArr: [],
+      sendLoading: false
+    }
+  },
+  watch: {
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+      }
+    }
+  },
+  created() {
+    // this.init()
+  },
+  methods: {
+    handleModelCancel() {
+      this.modelVisible = false
+      this.modelType = ''
+      this.modelName = ''
+    },
+    handleModelSubmit() {
+      if (!this.modelName) {
+        this.$message.error('请输入模板名称')
+        return false
+      }
+      const type = this.enmuType(this.modelType)
+      console.log({
+        title: this.modelName,
+        type: type,
+        name: this.orderDetails[`${this.modelType}name`],
+        addr: this.orderDetails[`${this.modelType}addR1`],
+        country: this.orderDetails[`${this.modelType}countryName`],
+        tel: this.orderDetails[`${this.modelType}tel`]
+      })
+      BookingTemplateAdd({
+        title: this.modelName,
+        type: type,
+        name: this.orderDetails[`${this.modelType}name`],
+        addr: this.orderDetails[`${this.modelType}addR1`],
+        country: this.orderDetails[`${this.modelType}countryName`],
+        tel: this.orderDetails[`${this.modelType}tel`]
+      })
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('保存成功')
+            this.handleModelCancel()
+            this.$forceUpdate()
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    saveModel(type) {
+      this.modelVisible = true
+      this.modelType = type
+      this.modelContent = this.details[type]
+    },
+    enmuType(val) {
+      switch (val) {
+        case 'shipper':
+          return 20
+        case 'consignee':
+          return 10
+        case 'notifyparty':
+          return 30
+        case 'notify':
+          return 30
+      }
+    },
+    total(type) {
+      let Rdata = 0
+      if (this.orderDetails.ediCtn) {
+        this.orderDetails.ediCtn.forEach((item) => {
+          Rdata = parseFloat(Rdata) + parseFloat(item[type]) || 0
+        })
+      }
+
+      return Rdata
+    },
+    CopyConsignee() {
+      this.orderDetails.consigneename = this.orderDetails.notifypartyname
+      this.orderDetails.consigneeaddR1 = this.orderDetails.notifypartyaddR1
+      this.orderDetails.consigneecountryName = this.orderDetails.notifypartycountryName
+      this.orderDetails.consigneetel = this.orderDetails.notifypartytel
+    },
+    CopyNotifyparty() {
+      this.orderDetails.notifypartyname = this.orderDetails.consigneename
+      this.orderDetails.notifypartyaddR1 = this.orderDetails.consigneeaddR1
+      this.orderDetails.notifypartycountryName = this.orderDetails.consigneecountryName
+      this.orderDetails.notifypartytel = this.orderDetails.consigneetel
+    },
+    init() {
+      // this.shipperTemplate = ''
+      // this.consigneeTemplate = ''
+      // this.notifypartyTemplate = ''
+      console.log(this.details, 'this.details')
+      this.openPreOrderShow = true
+      this.id = this.$route.query.id
+      this.selectArr = []
+      this.editIndex = 0
+      this.preOrderLoad = false
+      if (this.id) {
+        this.getPageESeaeEdi()
+      } else {
+        this.getNoDataInit()
+      }
+    },
+    close() {
+      this.openPreOrderShow = false
+      let obj = {
+        data1: this.orderList,
+        data2: this.orderDetails ? this.orderDetails.ediCtn : ''
+      }
+
+      this.$emit('frompre', obj)
+
+      this.orderList = []
+      this.selectArr = []
+      this.editIndex = 0
+    },
+    getPageESeaeEdi() {
+      getPageESeaeEdi({
+        bookingId: this.id
+      })
+        .then((res) => {
+          if (!res.success) {
+            this.$message.error(res.message)
+          }
+          if (res.data.length > 0) {
+            if (res.data[0].shippercountryName === '中国') {
+              res.data[0].shippercountryName = 'CN/中国'
+            }
+            res.data.map((item, index) => {
+              res.data[index].isHBL = !!item.hblno
+              res.data[index].ediCtn.map((item, index) => {
+                item.rowKey = index
+              })
+            })
+            this.orderList = res.data
+            this.orderDetails = this.orderList[this.editIndex]
+            console.log('orderList==>>', this.orderList)
+          } else {
+            this.getNoDataInit(false, 'enter')
+          }
+          this.preOrderLoad = true
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    getNoDataInit(isHBL = false, type) {
+      console.log(this.details, 'this.details')
+      const $details = JSON.parse(JSON.stringify(this.details))
+      const $data = {
+        bookingId: $details.id,
+        id: 0,
+        mblno: $details.mblno,
+        hblno: '',
+        isHBL: isHBL,
+        etd: $details.etd,
+        forwarder: $details.shipagency || '',
+        vessel: $details.vessel,
+        // 要改
+        carrier: $details.carrier || '',
+        carrierid: $details.carrierid || '',
+        carrierName: $details.carrierName,
+        shippername: '',
+        shipperaddR1: '',
+        shippercountry: '',
+        shippercountryName: '',
+        shippertel: '',
+        consigneename: '',
+        consigneeaddR1: '',
+        consigneecountry: '',
+        consigneecountryName: '',
+        consigneetel: '',
+        notifypartyname: '',
+        notifypartyaddR1: '',
+        notifypartycountry: '',
+        voyno: $details.voynoinner,
+        notifypartycountryName: '',
+        notifypartytel: '',
+        portload: $details.portload || 'QINGDAO,CHINA',
+        portloadid: $details.portloadid || 'CNTAO',
+        portdischarge: $details.portdischarge,
+        portdischargeid: $details.portdischargeid,
+        description: $details.description,
+        cargoid: $details.cargoid,
+        tempset: $details.tempset,
+        tempid: $details.tempid,
+        reeferf: $details.reeferf,
+        dclass: $details.dclass,
+        marks: $details.marks,
+        dunno: $details.dunno,
+        dattn: $details.linkman,
+        dtel: '',
+        kindpkgs: $details.kindpkgs,
+        remarks: '',
+        placedelivery: $details.placereceipt || 'QINGDAO,CHINA',
+        placedeliveryid: $details.placereceiptid || 'CNTAO',
+        sendremark: '',
+        yardid: $details.yardid,
+        yard: $details.yard,
+        ediCtn: [
+          // {
+          // 	id: 0,
+          // 	pId: 0,
+          // 	size: '',
+          // 	ctnall: '',
+          // 	cntrno: '',
+          // 	sealno: '',
+          // 	pkgs: 0,
+          // 	kindpkgs: '',
+          // 	kgs: 0,
+          // 	cbm: 0,
+          //   rowKey: 0
+          // },
+        ]
+      }
+      console.log(type, 'type')
+      if (isHBL || type === 'enter') {
+        $details.ctnInputs.forEach((item) => {
+          $data.ediCtn.push({
+            ctnall: item.ctnall,
+            cntrno: item.cntrno,
+            sealno: item.sealno,
+            pkgs: item.pkgs,
+            kindpkgs: item.kindpkgs,
+            kgs: item.kgs || 0,
+            cbm: item.cbm,
+            rowKey: item.rowKey
+          })
+        })
+      }
+      if (isHBL && type != 'enter') {
+        console.log('复制主单信息')
+        console.log(this.orderList, this.orderDetails)
+        this.orderList.forEach((item) => {
+          if (!item.isHBL) {
+            $data.shippername = item.shippername
+            $data.shipperaddR1 = item.shipperaddR1
+            $data.shippercountry = item.shippercountry
+            $data.shippercountryName = item.shippercountryName
+            $data.shippertel = item.shippertel
+            $data.marks = item.marks
+            $data.voyno = item.voyno
+            $data.cargoid = item.cargoid
+            $data.description = item.description
+            $data.consigneename = item.consigneename
+            $data.consigneeaddR1 = item.consigneeaddR1
+            $data.consigneecountry = item.consigneecountry
+            $data.consigneecountryName = item.consigneecountryName
+            $data.consigneetel = item.consigneetel
+            $data.notifypartyname = item.notifypartyname
+            $data.notifypartyaddR1 = item.notifypartyaddR1
+            $data.notifypartycountry = item.notifypartycountry
+            $data.notifypartycountryName = item.notifypartycountryName
+            $data.notifypartytel = item.notifypartytel
+            $data.vessel = item.vessel
+            $data.forwarder = item.forwarder
+            $data.carrier = item.carrier
+            $data.ediCtn = item.ediCtn
+            $data.tempset = item.tempset
+            $data.tempid = item.tempid
+            $data.reeferf = item.reeferf
+            $data.dclass = item.dclass
+            $data.marks = item.marks
+            $data.dunno = item.dunno
+            $data.dattn = item.dattn
+            $data.dtel = item.dtel
+            $data.kindpkgs = item.kindpkgs
+            $data.ediCtn.forEach((e) => {
+              delete e.id
+            })
+          }
+        })
+      }
+      if ($data.portloadid) {
+        $data.shippercountry = 'CN'
+        $data.shippercountryName = 'CN/中国'
+      }
+      // if ($data.portdischargeid) {
+      //   GetPortlist({ KeyWord: $data.portdischargeid }).then(res => {
+      //     $data.notifypartycountry = res.data[0].countryCode
+      //     $data.notifypartycountryName = res.data[0].country
+      //   })
+      // }
+      if ($data.portdischargeid && !isHBL) {
+        GetPortlist({ KeyWord: $data.portdischargeid }).then((res) => {
+          if (res.data) {
+            $data.consigneecountry = res.data[0].countryCode
+            $data.consigneecountryName = `${res.data[0].countryCode}/${res.data[0].country}`
+            $data.notifypartycountry = res.data[0].countryCode
+            $data.notifypartycountryName = `${res.data[0].countryCode}/${res.data[0].country}`
+          }
+        })
+      }
+      if ($details.shipper && !isHBL) {
+        const newArr = $details.shipper.split('\n')
+        $data.shippername = newArr[0]
+        $data.shipperaddR1 = newArr[1]
+      }
+      if ($details.consignee && !isHBL) {
+        const newArr = $details.consignee.split('\n')
+        $data.consigneename = newArr[0]
+        $data.consigneeaddR1 = newArr[1]
+      }
+      if ($details.notifyparty && !isHBL) {
+        const newArr = $details.notifyparty.split('\n')
+        $data.notifypartyname = newArr[0]
+        $data.notifypartyaddR1 = newArr[1]
+      }
+
+      // if ($data.placedeliveryid) {
+      //   $data.consigneecountry = 'CN'
+      //   $data.consigneecountryName = '中国'
+      // }
+      this.orderDetails = $data
+      this.orderList.push($data)
+    },
+    removeOrder() {
+      console.log(this.selectArr)
+      if (this.selectArr.length === 0) {
+        this.$message.error('请选择删除单号')
+        return false
+      }
+      if (this.selectArr.includes(0)) {
+        this.$message.error('主单不允许删除')
+        return false
+      }
+      const removeArr = []
+      const tempArr = []
+      let noRemove = ''
+      this.selectArr.map((item, index) => {
+        if (this.orderList[item].id !== 0) {
+          if (this.orderList[item].state === '已录入') {
+            removeArr.push(this.orderList[item].id)
+          } else {
+            if (this.orderList[item].isHBL) {
+              noRemove += `分提单${this.orderList[item].hblno ? this.orderList[item].hblno : item}，`
+            } else {
+              noRemove += `主提单${this.orderList[item].mblno ? this.orderList[item].mblno : item}，`
+            }
+          }
+        } else {
+          tempArr.push(item)
+        }
+      })
+      console.log('删除：', removeArr)
+      if (noRemove) {
+        this.$message.error(`${noRemove}已发送，不能删除`)
+        return false
+      }
+      if (removeArr.length === 0) {
+        this.removeFun(tempArr)
+        return false
+      }
+      const query = this.$qs.stringify({ Ids: removeArr.toString() }, { arrayFormat: 'repeat' })
+      seaeEdiDelete(query)
+        .then((res) => {
+          if (res.success) {
+            this.removeFun()
+          } else {
+            this.$message.error(res.message)
+            this.removeFun(tempArr)
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    removeFun(selectArr = this.selectArr) {
+      const arr = this.orderList.filter((sitem, sindex) => {
+        return !selectArr.includes(sindex)
+      })
+      console.log(arr)
+      if (arr.length > 0) {
+        this.$message.success('删除成功')
+        this.editIndex = this.selectArr.includes(this.editIndex) ? 0 : this.editIndex
+        this.selectArr = []
+        this.orderList = arr
+        this.orderDetails = this.orderList[this.editIndex]
+      } else {
+        this.editIndex = 0
+        this.orderList = []
+        this.selectArr = []
+        this.$message.success('预配舱单列表已全部删除，请重新编辑主单')
+        this.getNoDataInit()
+      }
+    },
+    cancelRemove() {},
+    checkOrderChange(e, index) {
+      console.log(this.orderList, e.target.checked, index)
+      this.orderList[index].checked = e.target.checked
+      this.$forceUpdate()
+      if (e.target.checked && !this.selectArr.includes(index)) {
+        this.selectArr.push(index)
+      } else if (!e.target.checked && this.selectArr.includes(index)) {
+        this.selectArr.splice(this.selectArr.indexOf(index), 1)
+      }
+      console.log('== 已选 ==', this.selectArr)
+    },
+    sendOrder() {
+      console.log(this.selectArr)
+      if (this.selectArr.length === 0) {
+        this.$message.error('请选择发送单号')
+        return false
+      }
+      const sendArr = []
+      let tempstr = ''
+      let tempstr1 = ''
+      this.selectArr.map((item, index) => {
+        if (this.orderList[item].id !== 0) {
+          if (this.orderList[item].state === '已录入') {
+            sendArr.push(this.orderList[item].id)
+          } else {
+            if (this.orderList[item].isHBL) {
+              tempstr1 += `分提单${this.orderList[item].hblno ? this.orderList[item].hblno : item}，`
+            } else {
+              tempstr1 += `主提单${this.orderList[item].mblno ? this.orderList[item].mblno : item}，`
+            }
+          }
+        } else {
+          if (this.orderList[item].isHBL) {
+            tempstr += `分提单${this.orderList[item].hblno ? this.orderList[item].hblno : item}，`
+          } else {
+            tempstr += `主提单${this.orderList[item].mblno ? this.orderList[item].mblno : item}，`
+          }
+        }
+      })
+      console.log(tempstr)
+      if (tempstr) {
+        this.$message.error(`${tempstr}需要先保存再进行发送`)
+        return false
+      }
+      if (tempstr1) {
+        this.$message.error(`${tempstr1}已发送，无需重复发送`)
+        return false
+      }
+      if (sendArr.length === 0) {
+        this.$message.error('暂无可发送舱单')
+        return false
+      }
+      this.sendArr = sendArr
+      console.log('== 即将发送单号 ==', sendArr)
+      const query = this.$qs.stringify({ Ids: sendArr.toString() }, { arrayFormat: 'repeat' })
+      seaeEdiCustEDI(query)
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('发送成功')
+            this.selectArr.map((item, index) => {
+              this.orderList[item].state = '已发送'
+            })
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    inputChange({ type, value }) {
+      this.orderDetails[type] = value
+      this.$forceUpdate()
+    },
+    getSelectViewRes({ type, res }) {
+      console.log({ type, res })
+      if (['vessel'].includes(type)) {
+        this.orderDetails.vessel = res.vessel || ''
+      } else if (['shipagency'].includes(type)) {
+        this.orderDetails.forwarder = res.name || ''
+        // this.orderDetails.forwarderid = res.code || ''
+      } else if (['shippername', 'notifypartyname', 'consigneename'].includes(type)) {
+        this.orderDetails[type] = res.title || ''
+        this.orderDetails[type.replace('name', 'addR1')] = res.content || ''
+      } else if (['shippercountryName', 'consigneecountryName', 'notifypartycountryName'].includes(type)) {
+        this.orderDetails[type] = res.cnName || '' // 要改的
+        this.orderDetails[type.replace('Name', '')] = res.code || '' // 要改的
+      } else if (['portloadid', 'portdischargeid', 'placedeliveryid'].includes(type)) {
+        this.orderDetails[type] = res['ediCode'] || ''
+        this.orderDetails[type.replace('id', '')] = res['code'] || ''
+      } else if (type === 'cargoid') {
+        this.orderDetails[type] = res['code'] || ''
+      } else if (type === 'kindpkgs') {
+        this.orderDetails[type] = res['name'] || ''
+      } else if (type === 'yard') {
+        this.orderDetails[type] = res.name || ''
+        this.orderDetails[`${type}id`] = res.showCode || ''
+      } else if (type === 'carrier') {
+        this.orderDetails.carrier = res.ediCode || ''
+        this.orderDetails.carrierid = res.code || ''
+        this.orderDetails.carrierName = res.enName || ''
+      } else if (['shipperTemplate', 'notifypartyTemplate', 'consigneeTemplate'].includes(type)) {
+        let name = type.split('Template')[0]
+        console.log(name, res, `${type}tel`)
+        this.orderDetails[type] = res.title || ''
+        this.orderDetails[`${name}name`] = res.name || ''
+        this.orderDetails[`${name}addR1`] = res.addr || ''
+        this.orderDetails[`${name}countryName`] = res.country || ''
+        this.orderDetails[`${name}tel`] = res.tel || ''
+
+        // this.orderDetails[type.replace('name', 'addR1')] = res.content || ''
+      }
+
+      console.log('=== 预订舱信息 ===', this.orderDetails)
+    },
+    getAutoViewRes({ type, res }) {
+      if (type === 'vessel') {
+        this.orderDetails.vessel = res.vessel || ''
+      } else if (['shippername', 'notifypartyname', 'consigneename'].includes(type)) {
+        this.orderDetails[type] = res.title || ''
+        this.orderDetails[type.replace('name', 'addR1')] = res.content || ''
+      } else if (['shippercountryName', 'consigneecountryName', 'notifypartycountryName'].includes(type)) {
+        this.orderDetails[type] = `${res.code}/${res.cnName}` || '' // 要改的
+        this.orderDetails[type.replace('Name', '')] = res.code || '' // 要改的
+      } else if (['portloadid', 'portdischargeid', 'placedeliveryid'].includes(type)) {
+        this.orderDetails[type] = res['ediCode'] || ''
+        this.orderDetails[type.replace('id', '')] = res['enName'] || ''
+      }
+      console.log('== 模糊搜索后的预定舱 ==', this.orderDetails)
+    },
+    getAutoViewResInput({ type, res }) {
+      this.orderDetails[type] = res || ''
+      console.log('== 模糊搜索后的预定舱 ==', this.orderDetails)
+    },
+    getTextareaChange({ type, value }) {
+      this.orderDetails[type] = value
+      this.$forceUpdate()
+    },
+    dateChangeFun({ type, value }) {
+      this.orderDetails[type] = value || ''
+    },
+    // 给可控属性重新赋值
+    changeSelectedRowKeys(keys) {
+      this.selectArr = keys
+      this.checkboxOption.selectedRowKeys = keys
+    },
+    log({ data, selectionRangeIndexes, selectionRangeKeys }) {
+      // console.log('data::', data)
+      // console.log('selectionRangeIndexes::', selectionRangeIndexes)
+      // console.log('selectionRangeKeys::', selectionRangeKeys)
+    },
+    addCtn() {
+      let $data = {
+        id: 0,
+        pId: 0,
+        ctnall: '',
+        cntrno: '',
+        sealno: '',
+        pkgs: 0,
+        kindpkgs: '',
+        kgs: 0,
+        cbm: 0,
+        rowKey:
+          this.orderDetails.ediCtn.length > 0
+            ? Number(this.orderDetails.ediCtn[this.orderDetails.ediCtn.length - 1].rowKey) + 1
+            : 0
+      }
+      this.orderDetails.ediCtn.push($data)
+    },
+    removeCtn() {
+      if (this.selectArr.length === 0) {
+        this.$message.error('请选择箱信息')
+      }
+      this.selectArr.map((item, index) => {
+        this.orderDetails.ediCtn.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            this.orderDetails.ediCtn.splice(oindex, 1)
+          }
+        })
+      })
+      this.checkboxOption.selectedRowKeys = []
+      this.selectArr = []
+      this.orderDetails.ediCtn.forEach((item, index) => {
+        item.rowKey = index
+      })
+    },
+    copyCtn() {
+      if (this.selectArr.length === 0) {
+        this.$message.error('请选择箱信息')
+      }
+      let last = this.orderDetails.ediCtn[this.orderDetails.ediCtn.length - 1].rowKey
+      this.selectArr.map((item, index) => {
+        this.orderDetails.ediCtn.map((oitem, oindex) => {
+          if (item === oitem.rowKey) {
+            last++
+            this.orderDetails.ediCtn.push({ ...oitem, ...{ rowKey: last } })
+          }
+        })
+      })
+      this.checkboxOption.selectedRowKeys = []
+      this.selectArr = []
+      this.$forceUpdate()
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    calc(num1, num2, calcStr) {
+      var str1 // 转换为字符串的数字
+      var str2
+      var ws1 = 0 // ws1，ws2 用来存储传入的num的小数点后的数字的位数
+      var ws2 = 0 // 赋默认值，解决当整数和小数运算时倍数计算错误导致的结果误差
+      var bigger // bigger和smaller用于加，减，除法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题；乘法需要将结果除两个数字的倍数之和
+      var smaller // 例如：加减除法中1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误；乘法中1.12*1.1会放大为112*11，所以结果需要除以1000才会是正确的结果，112*11/1000=1.232
+      var zeroCount // 需要补充0的个数
+      var isExistDot1 // 传入的数字是否存在小数点
+      var isExistDot2
+      var sum
+      var beishu = 1
+      // 将数字转换为字符串
+      str1 = num1.toString()
+      str2 = num2.toString()
+      // 是否存在小数点（判断需要计算的数字是不是包含小数）
+      isExistDot1 = str1.indexOf('.') != -1 ? true : false
+      isExistDot2 = str2.indexOf('.') != -1 ? true : false
+      // 取小数点后面的位数
+      if (isExistDot1) {
+        ws1 = str1.split('.')[1].length
+      }
+
+      if (isExistDot2) {
+        ws2 = str2.split('.')[1].length
+      }
+      // 如ws1 和 ws2 无默认值，如果num1 或 num2 不是小数的话则 ws1 或 ws2 的值将为 undefined
+      // bigger 和 smaller 的值会和预期不符
+      bigger = ws1 > ws2 ? ws1 : ws2
+      smaller = ws1 < ws2 ? ws1 : ws2
+
+      switch (calcStr) {
+        // 加减法找出小的那个数字，给后面补0，解决位数不对从而造成的计算错误的问题
+        // 例如：1.001 + 2.03 ，如果不给2.03进行补0，最后会变成1001+203，数字错位导致结果错误
+        case '+':
+        case '-':
+        case '/':
+          zeroCount = bigger - smaller
+          for (var i = 0; i < zeroCount; i++) {
+            if (ws1 == smaller) {
+              str1 += '0'
+            } else {
+              str2 += '0'
+            }
+          }
+          break
+        case '*':
+          // 乘法需要将结果除两个数字的倍数之和
+          bigger = bigger + smaller
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+          break
+      }
+
+      // 去除数字中的小数点
+      str1 = str1.replace('.', '')
+      str2 = str2.replace('.', '')
+
+      // 计算倍数，例如：1.001小数点后有三位，则需要乘 1000 变成 1001，变成整数后精度丢失问题则不会存在
+      for (var i = 0; i < bigger; i++) {
+        beishu *= 10 // 等价于beishu = beishu * 10;
+      }
+      num1 = parseInt(str1)
+      num2 = parseInt(str2)
+      // 进行最终计算并除相应倍数
+      switch (calcStr) {
+        case '+':
+          sum = (num1 + num2) / beishu
+          break
+        case '-':
+          sum = (num1 - num2) / beishu
+          break
+        case '*':
+          sum = (num1 * num2) / beishu
+          break
+        case '/':
+          sum = num1 / num2
+          /* 除数与被除数同时放大一定倍数，不影响结果，
+			所以对数字进行放大对应倍数并进行补0操作后不用另对倍数做处理 */
+          break
+        default:
+          return '暂不支持的计算类型，现已支持的有加法、减法、乘法、除法'
+      }
+
+      return sum
+    },
+    checkCntrno(val) {
+      let str = ''
+      if (val.length !== 11) {
+        str = '箱号长度不符合规则'
+      } else if (val.split('')[3] !== 'U' && val.split('')[3] !== 'u') {
+        str = '输入的箱号不符合规则'
+      }
+      val.split('').map((item, index) => {
+        if (index < 3 && !new RegExp(/^[a-zA-Z]+$/).test(item)) {
+          str = '输入的箱号不符合规则'
+        } else if (index > 4 && !new RegExp(/^[0-9]+$/).test(item)) {
+          str = '输入的箱号不符合规则'
+        }
+      })
+      return str
+    },
+    saveOrder() {
+      // let check = true
+      // this.$refs.basicFrom.validate(valid => {
+      //   check = valid
+      // })
+      // if (!check) {
+      //   this.$message.error('保存失败，请选择必填项')
+      //   return false
+      // }
+      // if (this.orderDetails.ediCtn.length === 0) {
+      //   this.$message.error('保存失败，箱信息未填写')
+      //   return false
+      // }
+      // let tableErrTip = ''
+      // this.orderDetails.ediCtn.map((item, index) => {
+      //   Object.keys(item).map((label, lindex) => {
+      //     if (this.rules.ctnList[label] && this.rules.ctnList[label].required && !item[label]) {
+      //       tableErrTip = `${tableErrTip}  序号${index + 1}中${this.rules.ctnList[label].title}未填写,`
+      //     }
+      //   })
+      // })
+      // if (tableErrTip !== '') {
+      //   this.$message.error(`保存失败， 箱信息错误： ${tableErrTip.substr(0, tableErrTip.length - 1)}`, 3)
+      //   return false
+      // }
+      const $data = JSON.parse(JSON.stringify(this.orderDetails))
+      console.log($data)
+      if ($data.isHBL && !$data.hblno) {
+        this.$message.error('请填写分提单号')
+        return false
+      } else if (!$data.isHBL && !$data.mblno) {
+        this.$message.error('请填写主提单号')
+        return false
+      }
+      $data.ediCtn.map((item, index) => {
+        delete item.rowKey
+      })
+      seaeEdiSave($data)
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('保存成功')
+            res.data[0].ediCtn.map((item, index) => {
+              item.rowKey = index
+            })
+            res.data[0].isHBL = !!res.data[0].hblno
+            this.orderList[this.editIndex] = res.data[0]
+            this.orderDetails = res.data[0]
+          } else {
+            this.$message.error(res.message)
+            this.selectArr = []
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    changeOrder(index) {
+      this.editIndex = index
+      this.orderDetails = this.orderList[this.editIndex]
+    },
+    addOrder() {
+      this.getNoDataInit(true)
+      this.editIndex = this.orderList.length - 1
+      console.log(this.orderList)
+      //
+      this.orderList[this.editIndex].checked = true
+      this.selectArr.push(this.editIndex)
+    },
+    sendOrderFun() {
+      console.log(this.selectArr)
+      if (this.selectArr.length === 0) {
+        this.$message.error('请选择发送单号')
+        return false
+      }
+      const sendArr = []
+      let tempstr = ''
+      let tempstr1 = ''
+      this.selectArr.map((item, index) => {
+        if (this.orderList[item].id !== 0) {
+          // if (this.orderList[item].state === '已录入') {
+          sendArr.push(this.orderList[item].id)
+          // } else {
+          //   if (this.orderList[item].isHBL) {
+          //     tempstr1 += `分提单${this.orderList[item].hblno ? this.orderList[item].hblno : item}，`
+          //   } else {
+          //     tempstr1 += `主提单${this.orderList[item].mblno ? this.orderList[item].mblno : item}，`
+          //   }
+          // }
+        } else {
+          if (this.orderList[item].isHBL) {
+            tempstr += `分提单${this.orderList[item].hblno ? this.orderList[item].hblno : item}，`
+          } else {
+            tempstr += `主提单${this.orderList[item].mblno ? this.orderList[item].mblno : item}，`
+          }
+        }
+      })
+      console.log(tempstr)
+      if (tempstr) {
+        this.$message.error(`${tempstr}需要先保存再进行发送`)
+        return false
+      }
+      // if (tempstr1) {
+      //   this.$message.error(`${tempstr1}已发送，无需重复发送`)
+      //   return false
+      // }
+      if (sendArr.length === 0) {
+        this.$message.error('暂无可发送舱单')
+        return false
+      }
+      this.sendArr = sendArr
+      this.showSendModel = true
+    },
+    sendSubmit() {
+      console.log('== 发送 ==', this.sendArr, this.sendType, this.sendRemarkVal)
+      console.log('== 即将发送单号 ==', this.sendArr)
+      if (!this.sendType) {
+        this.$message.error('请选择操作类型')
+        return false
+      }
+      if (this.sendType == 2 && !this.sendRemarkVal) {
+        this.$message.error('请输入备注')
+        return false
+      }
+      this.sendLoading = true
+      const query = this.$qs.stringify(
+        {
+          Ids: this.sendArr.toString(),
+          type: this.sendType,
+          SENDREMARK: this.sendRemarkVal
+        },
+        { arrayFormat: 'repeat' }
+      )
+      seaeEdiCustEDI(query)
+        .then((res) => {
+          this.sendLoading = false
+          if (res.success) {
+            let tip = ''
+            if (this.sendType == '0') {
+              tip = '新增发送成功'
+            } else if (this.sendType == '1') {
+              tip = '修改发送成功'
+            } else if (this.sendType == '2') {
+              tip = '删除发送成功'
+            }
+            this.$message.success(tip)
+            this.selectArr.map((item, index) => {
+              if (this.sendType == '0') {
+                this.orderList[item].state = '已直发'
+              } else if (this.sendType == '1') {
+                this.orderList[item].state = '已直发'
+              } else if (this.sendType == '2') {
+                this.orderList[item].state = '已删除'
+              }
+            })
+            this.sendClose()
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch((err) => {
+          this.sendLoading = false
+          console.log(err)
+        })
+    },
+    sendClose() {
+      this.showSendModel = false
+      this.sendType = ''
+      this.sendRemarkVal = ''
+      console.log('== 关闭 ==')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/deep/ .ant-form-explain {
+  display: none !important;
+}
+/deep/ .ant-form-item-children-icon .anticon-check-circle {
+  display: none;
+}
+</style>
+<style lang="less" scoped>
+.pre-order {
+  margin-left: -15px;
+  margin-right: -3px;
+  margin-top: -8px;
+}
+.order-btn-list {
+  // margin: 0 0 10px 0;
+  .order-btn {
+    min-width: 40px;
+    height: 26px;
+    line-height: 26px;
+    padding: 0 8px;
+    font-size: 12px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 4px;
+  }
+}
+.top {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.sed-order-list {
+  background: #fff;
+  box-shadow: 0 0 10px #eee;
+  padding: 10px 20px 10px 20px;
+  // height: 100%;
+  height: calc(100vh - 340px);
+  display: flex;
+  flex-direction: column;
+  padding-top: 0px;
+  transition: 0.5s all;
+  border-radius: 4px;
+  .remove-btn {
+    float: right;
+    color: #f6826b;
+    display: block;
+    width: 30px;
+    text-align: center;
+    cursor: pointer;
+  }
+  &.show-nav {
+    width: 100%;
+    animation-name: showNav 0.6s;
+    animation-fill-mode: forwards;
+    .tit {
+      display: inline-block;
+      animation-name: showText 0.6s;
+      animation-fill-mode: forwards;
+    }
+    .sec-order {
+      display: block;
+      animation-name: showText 0.6s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes showNav {
+      0% {
+        width: 58%;
+      }
+      100% {
+        width: 100%;
+      }
+    }
+    @keyframes showText {
+      0% {
+        opacity: 0;
+      }
+      75% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+  }
+  &.hide-nav {
+    width: 58px;
+    animation-name: hideNav 0.6s;
+    animation-fill-mode: forwards;
+    .tit {
+      display: none;
+      animation-name: hideText 0.6s;
+      animation-fill-mode: forwards;
+    }
+    .sec-order {
+      display: none;
+      animation-name: hideText 0.6s;
+      animation-fill-mode: forwards;
+    }
+    @keyframes hideNav {
+      0% {
+        width: 100%;
+      }
+      100% {
+        width: 58px;
+      }
+    }
+    @keyframes hideText {
+      0% {
+        opacity: 1;
+      }
+      100% {
+        opacity: 0;
+      }
+    }
+  }
+  .sed-order-title {
+    height: 50px;
+    line-height: 50px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    margin-bottom: 10px;
+    i {
+      color: #43c673;
+      font-size: 18px;
+      line-height: 50px;
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 6px;
+    }
+    .right {
+      float: right;
+      font-weight: 500;
+      color: #999;
+      cursor: pointer;
+    }
+  }
+  .order-box {
+    margin: 6px 0;
+    overflow: hidden;
+    width: 360px;
+    .check-btn {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 10px;
+      margin-top: 3px;
+    }
+  }
+  .order-label {
+    color: #999;
+    font-size: 14px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+    display: flex;
+    padding-left: 10px;
+    height: 28px;
+    line-height: 28px;
+    display: inline-block;
+    vertical-align: top;
+    .left {
+      flex: 1;
+      // float: left;
+      i.iconfont {
+        margin-right: 8px;
+      }
+      .tag {
+        display: inline-block;
+      }
+    }
+  }
+  .active {
+    color: @primary-color;
+    font-weight: 600;
+    // background: #f5f9fe;
+    // position: relative;
+    padding-right: 30px;
+    // &::after {
+    //   content: '';
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   width: 100%;
+    //   height: 100%;
+    //   z-index: 0;
+    //   background: @primary-color;
+    //   opacity: 0.04;
+    // }
+    .remove-btn {
+      display: none;
+    }
+  }
+  .sed-order-btn {
+    margin: 20px auto;
+    width: 80%;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 4px;
+    border: 1px solid @primary-color;
+    color: @primary-color;
+    text-align: center;
+    cursor: pointer;
+    i {
+      margin-right: 10px;
+      font-size: 16px;
+    }
+    &:hover {
+      background: @primary-color;
+      color: #fff;
+      -webkit-box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 3px 10px 3px rgba(0, 0, 0, 0.1);
+      -webkit-user-select: 0 3px 10px 3px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+.sec-order {
+  flex: 1;
+  overflow: auto;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+/deep/ .ant-checkbox + span {
+  display: inline-block;
+}
+/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
+  margin-left: 0 !important;
+}
+.sed-order-label {
+}
+.mail-box {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 0 0 10px #eee;
+  padding: 0 15px 10px;
+  margin: 0 4px;
+  margin-top: 10px;
+  .title {
+    border-bottom: 1px solid #eee;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    display: flex;
+    align-items: center;
+    > div {
+      flex: 1;
+    }
+    .Template {
+      flex: 3;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+    }
+    span {
+      flex: 1;
+    }
+  }
+}
+.cargo-info-bottm {
+  display: flex;
+  .marks {
+    flex: 1;
+    padding-right: 10px;
+    /deep/ .ant-form-item-label {
+      text-align: left;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+  .description {
+    flex: 1;
+    padding-right: 10px;
+    /deep/ .ant-form-item-label {
+      text-align: left;
+      height: 30px;
+      line-height: 30px;
+    }
+  }
+  .right {
+    width: 450px;
+    padding-left: 13px;
+    margin-top: 15px;
+  }
+}
+.pre-from-label {
+  margin-bottom: 0;
+}
+.ctn-btn {
+  vertical-align: top;
+  .btn {
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    vertical-align: top;
+    margin-right: 10px;
+    min-width: 60px;
+    text-align: center;
+    cursor: pointer;
+    i {
+      margin-right: 4px;
+      height: 40px;
+      line-height: 40px;
+    }
+    &:nth-of-type(1) {
+      color: #ff9933;
+    }
+    &:nth-of-type(2) {
+      color: #00cccc;
+    }
+    &:nth-of-type(3) {
+      color: #f6826b;
+    }
+    &:nth-of-type(4) {
+      color: #009966;
+    }
+  }
+  .import {
+    display: inline-block;
+    width: 254px;
+    vertical-align: top;
+  }
+}
+.line-box {
+  display: flex;
+  overflow: hidden;
+  span.unit {
+    font-size: 12px;
+    color: #999;
+    display: inline-block;
+    text-align: center;
+    padding-left: 5px;
+  }
+}
+.text-bold {
+  text-align: center;
+  width: 100%;
+  display: block;
+}
+
+.ve-table
+  .ve-table-container
+  .ve-table-content-wrapper
+  table.ve-table-content
+  tbody.ve-table-body
+  tr.ve-table-body-tr
+  td.ve-table-body-td,
+.ve-table
+  .ve-table-container
+  .ve-table-content-wrapper
+  table.ve-table-content
+  tbody.ve-table-body
+  tr.ve-table-expand-tr
+  td.ve-table-body-td {
+  padding: 0 5px;
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/remarksInfo.vue b/src/views/main/BookingLedger/detail/modulesTest/remarksInfo.vue
new file mode 100644
index 0000000..c9cd7bd
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/remarksInfo.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-card class="ramark-box" :bordered="false">
+    <!-- <a-button type="primary" @click="checkbasic">  验证 </a-button> -->
+    <a-form-model ref="remarkFrom" :model="details" :rules="rules">
+      <a-row :gutter="24">
+        <a-col :span="12">
+          <a-form-model-item prop="soremark">
+            <div class="tit" :class="{'required':rules['soremark'] && rules['soremark'][0].required}"><span class="iconfont icon-bianji"></span>订舱备注</div>
+            <a-textarea :auto-size="{ minRows: 4, maxRows: 7 }" class="input-box" v-model="details.soremark" />
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12">
+          <a-form-model-item prop="siremark">
+            <div class="tit" :class="{'required':rules['siremark'] && rules['siremark'][0].required}"><span class="iconfont icon-bianji"></span>截单备注</div>
+            <a-textarea :auto-size="{ minRows: 4, maxRows: 7 }" class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+    </a-form-model>
+  </a-card>
+</template>
+<script>
+export default {
+  name: '',
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    rules: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    inSave: {
+      type: Boolean,
+      default: false
+    },
+    isParent: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      remarks: ''
+    }
+  },
+  watch: {
+    details: {
+      handler(nval, oval) {
+        if (!this.inSave) {
+          this.$emit('changeDetail', {
+            detail: nval,
+            type: 'remarksInfo'
+          })
+        }
+      },
+      deep: true
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+      }
+    }
+  },
+  created() {},
+  methods: {
+    checkbasic () {
+      this.$refs.remarkFrom.validate(valid => {
+        if (valid) {
+          console.log('验证成功!');
+          return true;
+        } else {
+          console.log('验证失败!');
+          return false;
+        }
+      });
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+
+/deep/ .ant-form-explain{
+  display: none !important;
+}
+
+/deep/ .ant-form-item-children-icon .anticon-check-circle{
+  display: none;
+}
+</style>
+<style lang="less" scoped>
+@import url('../style/remarksInfo.less');
+
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/rightContent.vue b/src/views/main/BookingLedger/detail/modulesTest/rightContent.vue
new file mode 100644
index 0000000..7359336
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/rightContent.vue
@@ -0,0 +1,969 @@
+<template>
+  <div class="right-box">
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <div class="title"><i class="iconfont icon-ERP_zhuyi"></i><span>注意事项</span></div>
+      <div class="content">
+        <div class="tip" v-if="excuteRules.length > 0">
+          <div class="rules-label" v-for="(rule, rindex) in excuteRules" :key="rindex">
+            <i class="iconfont icon-chenggong Success" v-if="rule.errorType === 'Success'"></i>
+            <i class="iconfont icon-xiazaishibai Warning" v-else-if="rule.errorType === 'Warning'"></i>
+            <i class="iconfont icon-shibai Error" v-else-if="rule.errorType === 'Error'"></i>
+            <span>{{ rule.resultName }}</span>
+            <i @click="handleOpenRule(rule)"  class="icon-shujushangchuan-shixin iconfont rule-icon"></i>
+          </div>
+        </div>
+        <div class="tip" v-else-if="excuteRulesType === 'success'">
+          <div class="rules-label">
+            <i class="iconfont icon-chenggong Success"></i><span>校验完成，无异常信息</span>
+          </div>
+        </div>
+        <div class="tip" v-else-if="excuteRulesType === 'fail'">
+          <div class="rules-label"><i class="iconfont icon-shibai Warning"></i><span>校验失败</span></div>
+        </div>
+        <div class="tip no-data" v-else>
+          <i class="iconfont icon-meiyoudingdan"></i>
+          <div class="text">
+            暂无校验, <a-button size="small" type="link" class="btn" @click="checkFun"> 立即校验 </a-button>
+          </div>
+        </div>
+      </div>
+    </a-card>
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <div class="title"><i class="iconfont icon-fuwu"></i><span>服务项目</span></div>
+      <div class="content">
+        <div
+          class="items"
+          v-for="(serive, sindex) in bookingServiceItem"
+          :key="sindex"
+          :class="{ active: locaService.includes(serive.code) }"
+          @click="saveService(serive)">
+          {{ serive.name }}
+        </div>
+      </div>
+    </a-card>
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <div class="title"><i class="iconfont icon-shijian1"></i><span>船舶动态
+        <button class="btn-refsh" @click="handleRefsh"><span
+          class="iconfont icon-shuaxin"
+          :style="{ fontSize: '17px' }"></span>刷新</button>
+      </span>
+      </div>
+      <div class="content">
+        <a-spin :spinning="btnLoading" >
+          <div class="DataTime">
+            <div>
+              <span>
+                <!-- <i class="iconfont icon-chuanbo"></i> -->
+                POL
+              </span>
+              <div>
+                <p>
+                  <span>ETA:</span><span>{{ handleTime(details.startETA) }}</span>
+                </p>
+                <p>
+                  <span>ATA:</span><span>{{ handleTime(details.startATA) }}</span>
+                </p>
+              </div>
+            </div>
+            <div>
+              <span> </span>
+              <div>
+                <p>
+                  <span>ETD:</span><span>{{ handleTime(details.ygtETD) }}</span>
+                </p>
+                <p>
+                  <span>ATD:</span><span>{{ handleTime(details.atd) }}</span>
+                </p>
+              </div>
+            </div>
+            <div>
+              <span>
+                <!-- <i class="iconfont icon-chuanfanguanli-chuanfanshenqing"></i> -->
+                POT
+              </span>
+              <div>
+                <p>
+                  <span>ATA:</span><span>{{ handleTime(details.middleATA) }}</span>
+                </p>
+                <p>
+                  <span>ATD:</span><span>{{ handleTime(details.middleATD) }}</span>
+                </p>
+              </div>
+            </div>
+            <div>
+              <span>
+                <!-- <i class="iconfont icon-beizhu1"></i> -->
+                POD
+              </span>
+              <div>
+                <p>
+                  <span>ETA:</span><span>{{ handleTime(details.eta) }}</span>
+                </p>
+                <p>
+                  <span>ATA:</span><span>{{ handleTime(details.ata) }}</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </a-spin>
+      </div>
+    </a-card>
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <a-spin :spinning="spinning" :delay="delayTime">
+        <div class="title"><i class="iconfont icon-fuwu"></i><span>货物状态</span></div>
+        <div class="content">
+          <a-tooltip v-for="(serive, sindex) in booGoodsStatusItem" :key="`${serive.configId}_${sindex}`">
+            <template v-if="serive.finishTime || serive.remark" #title>
+              <p v-if="serive.finishTime">时间：{{ serive.finishTime }}</p>
+              <p v-if="serive.remark">备注：{{ serive.remark }}</p>
+              <p v-if="serive.extData">显示天数：{{ serive.extData }}</p>
+            </template>
+            <div
+              class="items"
+              :class="{ active: serive.finishTime, active1: serive.remark }"
+              @click="saveGoodsStatus(serive)">
+              {{ serive.statusName }}
+              <div class="edit" @click.stop="FnOpenEdit(serive)"><a-icon type="edit" /></div>
+            </div>
+          </a-tooltip>
+        </div>
+      </a-spin>
+    </a-card>
+    <a-modal v-model="GoodsStatusVisible" width="600px" title="编辑" @ok="GoodsStatusHandleOk">
+      <a-form :form="StatusVisibleForm">
+        <a-row>
+          <a-col :span="12">
+            <a-form-item label="完成时间" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-date-picker show-time placeholder="完成时间" v-decorator="['finishTime']" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12" v-if="GoodsStatusEditData.systemCode == 'SQXS'">
+            <a-form-item label="显示天数" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
+              <a-input placeholder="请输入显示天数" v-decorator="['extData']" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <a-form-item label="备注" :labelCol="labelCol2" :wrapperCol="wrapperCol2" has-feedback>
+              <!-- <a-input placeholder="请输入备注" v-decorator="['remark']" /> -->
+              <a-textarea placeholder="请输入备注" v-decorator="['remark']" :auto-size="{ minRows: 2 }" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+    </a-modal>
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <div class="title">
+        <i class="iconfont icon-beizhu1"></i><span>备注</span>
+        <span class="right" @click="addRemark"><i class="iconfont icon-jiahao2fill"></i>新增备注</span>
+      </div>
+      <div class="content">
+        <div class="remark" v-for="(remark, rindex) in details.remark" :key="rindex">
+          <div class="remark-main">
+            <div class="top"><i class="iconfont icon-yuandian"></i>{{ remark.remark }}</div>
+            <div class="bottom">{{ remark.updatedTime || remark.createdTime }} {{ remark.updatedUserName }}</div>
+          </div>
+          <div class="remark-btn" @click="editRemark(remark)"><i class="iconfont icon-bianji1"></i></div>
+          <a-popconfirm title="你确定要删除这个备注吗?" ok-text="是" cancel-text="否" @confirm="deleteRemark(remark)">
+            <div class="remark-btn"><i class="iconfont icon-shanchu1"></i></div>
+          </a-popconfirm>
+        </div>
+        <div class="remark no-data" v-if="!details.remark || details.remark.length === 0">
+          <i class="iconfont icon-wushuju"></i>
+          <div class="text">暂无内容</div>
+        </div>
+      </div>
+    </a-card>
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <div class="title"><i class="iconfont icon-fujian-wenjian"></i><span>附件</span></div>
+      <div class="content">
+        <a-button type="primary" class="file-btn" @click="addFile">新增附件</a-button>
+        <div class="file" v-for="(file, findex) in details.file" :key="findex">
+          <div class="top">
+            <span class="left">
+              <i class="iconfont icon-Excel" v-if="['xls', 'xlsx'].includes(getFileType(file.fileName))"></i>
+              <i class="iconfont icon-tupian" v-else-if="['jpg', 'jpeg', 'png'].includes(getFileType(file.fileName))"></i>
+              <i class="iconfont icon-pdf" v-else-if="['pdf'].includes(getFileType(file.fileName))"></i>
+              <i class="iconfont icon-file-word" v-else></i>
+              {{ file.fileName }}
+            </span>
+            <span class="right"><i class="iconfont icon-yulan" @click="getFileFun(file)"></i><i
+              class="iconfont icon-arrow-"></i></span>
+          </div>
+          <div class="bottom">
+            <span><i class="iconfont icon-leixing"></i>{{ file.typeName }}</span>
+            <span><i class="iconfont icon-yonghu-yuan"></i>{{ file.createdUserName }}</span>
+            <span><i class="iconfont icon-shijian1"></i>{{ file.createdTime }}</span>
+          </div>
+        </div>
+        <div class="no-data" v-if="!details.file || details.file.length === 0">
+          <i class="iconfont icon-wushuju"></i>
+          <div class="text">暂无附件</div>
+        </div>
+      </div>
+    </a-card>
+    <a-card :bodyStyle="tstyle" :bordered="false">
+      <div class="title" :style="{ marginBottom: '10px' }">
+        <i class="iconfont icon-lightning-full"></i><span>订单及货运动态</span>
+      </div>
+      <div class="content">
+        <div class="booking-log" v-for="(bookingLog, bindex) in details.statuslog" :key="bindex">
+          <div
+            class="log"
+            :class="{ hideline: bindex === details.statuslog.length - 1 && bookingLog.detail.length === 0 }"
+            @click="bookingShow(bookingLog)">
+            <span class="log-time">{{ bookingLog.opTime }}</span>
+            <i class="iconfont icon-jian icon" v-if="bookingLog.detail.length > 0 && bookingLog.isChecked"></i>
+            <i class="iconfont icon-jia icon" v-else-if="bookingLog.detail.length > 0 && !bookingLog.isChecked"></i>
+            <i class="iconfont icon-tongzhi icon" v-else></i>
+            <span class="log-name">{{ bookingLog.status }}</span>
+          </div>
+          <div class="child-list" v-if="bookingLog.detail.length > 0 && bookingLog.isChecked">
+            <div class="child-log" v-for="(child, cindex) in bookingLog.detail" :key="cindex">
+              <span class="log-time">{{ child.opTime }}</span>
+              <i class="iconfont icon-yuanxuankuang2 icon"></i>
+              <span class="log-name">{{ child.status }} <span class="min-log" v-if="child.cntrno">箱号:{{ child.cntrno
+              }}</span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div class="no-data" v-if="!details.statuslog || details.statuslog.length === 0">
+          <i class="iconfont icon-queshengye_zanwushuju" :style="{ fontSize: '50px' }"></i>
+          <div class="text">暂无动态</div>
+        </div>
+      </div>
+    </a-card>
+    <a-collapse class="collapse-box" :bordered="false" expandIconPosition="right" v-model="showKey">
+      <a-collapse-panel key="1">
+        <template slot="header">
+          <div class="title"><i class="iconfont icon-rizhi"></i><span>日志</span></div>
+        </template>
+        <div class="cargo-info">
+          <div class="info-header">
+            <span>修改人</span>
+            <span>修改时间</span>
+          </div>
+          <div v-for="(log, lindex) in details.log" :key="lindex">
+            <div class="list">
+              <span class="btn">{{ log.createdUserName }}</span>
+              <span class="btn">
+                {{ log.createdTime }}
+                <!-- <span class="more"> -->
+                <i
+                  class="iconfont icon-xia more"
+                  v-if="log.details.length > 0"
+                  :class="!log.showMore ? 'hide' : 'show'"
+                  @click="showLogMore(lindex)"></i>
+                <!-- </span> -->
+              </span>
+            </div>
+            <div class="more-detail" v-if="log.details.length > 0 && log.showMore">
+              <div class="detail-single" v-for="(child, cindex) in log.details" :key="cindex">
+                <template v-if="log.type != 'Trace'">
+                  <div class="old">
+                    <span class="o-title">{{ child.field || '字段' }} :</span>
+                    <span class="content">{{ child.oldValue }}</span>
+                  </div>
+                  <div class="line">改为：</div>
+                </template>
+                <div class="new">
+                  <span class="o-title" v-if="log.type != 'Trace'">{{ child.field || '字段' }}:</span>
+                  <span class="content">{{ child.newValue }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-collapse-panel>
+    </a-collapse>
+
+    <a-modal
+      title="新增备注"
+      :width="700"
+      :visible="remarkModelvisible"
+      :confirmLoading="bookingModelconfirm"
+      :maskClosable="false"
+      cancelText="取消"
+      okText="确定"
+      @ok="handleModelSubmit"
+      @cancel="handleModelCancel">
+      <a-textarea v-model="remarkVal" :auto-size="{ minRows: 5, maxRows: 7 }" />
+    </a-modal>
+
+    <a-modal
+      title="添加附件"
+      :width="900"
+      :visible="fileModelvisible"
+      :confirmLoading="uploading"
+      :maskClosable="false"
+      cancelText="关闭"
+      okText="保存"
+      @ok="handleUpload"
+      @cancel="fileModelCancel">
+      <div class="clearfix uplad-bg uplad-file-bg">
+        <span class="tip">1. 选择上传文件</span>
+        <a-upload
+          :file-list="upFileList"
+          :remove="handleRemove"
+          :disabled="upFileList.length > 0"
+          :before-upload="beforeUpload"
+          :style="{ width: '680px' }">
+          <a-button> <a-icon type="upload" /> 选择文件 </a-button>
+        </a-upload>
+        <span class="format">支持格式：xls，xlsx，pdf，txt，pms</span>
+      </div>
+      <div class="uplad-bg uplad-type">
+        <span class="tip">2. 选择文件类型</span>
+        <div class="upload-label">文件类型：</div>
+        <a-select style="width: 120px" :value="attachName" @change="handleAttachChange">
+          <a-select-option v-for="(attach, aindex) in bookingAttachType" :key="attach.name" :value="aindex">
+            {{ attach.name }}
+          </a-select-option>
+        </a-select>
+      </div>
+    </a-modal>
+
+    <a-modal
+      title="规则反馈需求"
+      :width="1000"
+      :visible="roleFlag"
+      :maskClosable="false"
+      cancelText="取消"
+      okText="提交"
+      @ok="handleModelSubmit"
+      @cancel="handleModelCancel">
+      <a-form :form="ruleForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleModelSubmit">
+        <a-form-item label="提示信息">
+          【脚尖提醒】脚尖提醒脚尖提醒脚尖提醒脚尖提醒
+        </a-form-item>
+        <a-form-item label="意见类型">
+          <a-select
+            v-decorator="[
+              'gender',
+              { rules: [{ required: true, message: '请选择意见类型!' }] },
+            ]"
+            placeholder="请选择意见类型"
+            style="width: 200px;margin-right: 10px;"
+          >
+            <a-select-option value="male">
+              male
+            </a-select-option>
+            <a-select-option value="female">
+              female
+            </a-select-option>
+          </a-select>
+          <span>当前状态:新增</span>
+        </a-form-item>
+        <a-form-item label="意见内容">
+          <a-textarea 
+            v-decorator="['note', { rules: [{ required: true, message: '请输入意见内容' }] }]"
+          />
+        </a-form-item>
+        <a-form-item label="意见日志">
+          <div>2023-04-01 10:05:00</div>
+          <div>2023-04-01 10:05:00</div>
+          <div>2023-04-01 10:05:00</div>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+<script>
+import {
+  AddRemark,
+  AddFile,
+  ExcuteRulesOceanBooking,
+  BookingOrderDownload,
+  BookingOrderDeleteRemark,
+  SaveServiceItem,
+  BookingOrderGetGoodsStatusList,
+  BookingOrderSaveGoodsStatus,
+  refreshSailingDate
+} from '@/api/modular/main/BookingLedger'
+
+export default {
+  name: '',
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    excuteRules: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    excuteRulesType: {
+      type: String,
+      default: () => {
+        return ''
+      }
+    }
+  },
+  data() {
+    return {
+      delayTime: 500,
+      roleFlag: false,
+      spinning: false,
+      StatusVisibleFlag: true,
+      id: this.id,
+      ruleForm: this.$form.createForm(this),
+      isCopy: this.$route.query.isCopy,
+      tstyle: { padding: '0 15px 15px', 'margin-bottom': '10px', background: '#fff' },
+      remarkModelvisible: false,
+      bookingModelconfirm: false,
+      remarkVal: '',
+      showKey: [],
+      btnLoading: false,
+      fileModelvisible: false,
+      fileModelconfirm: false,
+      authorization: 'authorization-text',
+      file: {},
+      upFileList: [],
+      uploading: false,
+      realTimePercent: null,
+      bookingServiceItem: [],
+      booGoodsStatusItem: [],
+      bookingAttachType: [],
+      attachName: '',
+      attachCode: '',
+      editRemarkVal: null,
+      GoodsStatusVisible: false,
+      GoodsStatusEditData: {},
+      StatusVisibleForm: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      labelCol2: {
+        xs: { span: 24 },
+        sm: { span: 4 }
+      },
+      wrapperCol2: {
+        xs: { span: 24 },
+        sm: { span: 20 }
+      }
+    }
+  },
+  computed: {
+    locaService() {
+      if (!this.details || Object.keys(this.details).length === 0) {
+        return []
+      }
+      return this.details.item.map((item, index) => {
+        return item.code
+      })
+    },
+    locaGoodsStatus() {
+      if (!this.details) {
+        return []
+      }
+      if (this.details.goodsStatus) {
+        const data = []
+        this.details.goodsStatus.forEach(item => {
+          if (item.finishTime || item.remark) {
+            data.push(item.configId)
+          }
+        })
+        return data
+      } else {
+        return []
+      }
+    }
+  },
+  created() {
+    this.$bus.$on('WebTest001', val => {
+      this.WebTest001(val)
+    })
+    this.init()
+  },
+  watch: {
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        if (this.$route.query.isCopy) {
+
+        }
+        if (this.$route.name === 'BookingDetail') {
+          this.id = this.$route.query.id
+          this.init()
+        }
+      }
+    }
+  },
+  methods: {
+    handleOpenRule() {
+      this.roleFlag = true
+    },
+    handleRefsh() {
+      this.btnLoading = true
+      refreshSailingDate({ id: this.details.id }).then(res => {
+        if (res.success) {
+          this.btnLoading = false
+          this.$emit('handleRefsh', res.data)
+        } else {
+          this.$message.error(res.message)
+          this.btnLoading = false
+        }
+      })
+    },
+    handleTime(time) {
+      let Rdata = '-'
+      if (time && time.split(':').length == 3) {
+        Rdata = `${time.split(':')[0]}:${time.split(':')[1]}`
+      }
+      return Rdata
+    },
+    init() {
+      this.bookingAttachType = this.$options.filters['dictData']('booking_attach_type')
+      this.bookingServiceItem = this.$options.filters['dictData']('booking_service_item')
+        BookingOrderGetGoodsStatusList({ bookingId: this.id }).then(res => {
+        this.booGoodsStatusItem = res.data
+        if (this.$route.query.isCopy) {
+          this.booGoodsStatusItem.forEach(item => {
+            delete item.isPublic
+            delete item.finishUserId
+            delete item.finishTime
+            delete item.finishUser
+            delete item.remark
+            delete item.extData
+          })
+          this.details.goodsStatus.forEach(item => {
+            delete item.isPublic
+            delete item.finishUserId
+            delete item.finishTime
+            delete item.finishUser
+            delete item.remark
+            delete item.extData
+          })
+        }
+      })
+    },
+    checkFun() {
+      this.$message.loading({ content: '校验中...' })
+      ExcuteRulesOceanBooking(this.id)
+        .then(res => {
+          if (res.success) {
+            this.$message.destroy()
+            if (!res.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: '校验失败' })
+        })
+    },
+    addRemark() {
+      if (!this.id) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      this.remarkModelvisible = true
+      this.remarkVal = ''
+    },
+    handleModelSubmit() {
+      if (!this.id) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      AddRemark({
+        id: this.editRemarkVal ? this.editRemarkVal.id : 0,
+        pId: this.id,
+        remark: this.remarkVal
+      })
+        .then(res => {
+          if (res.success) {
+            this.$message.info('备注提交成功')
+            this.editRemarkVal = null
+            this.handleModelCancel()
+            this.$emit('upDateRight')
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    editRemark(data) {
+      this.remarkModelvisible = true
+      this.remarkVal = data.remark
+      this.editRemarkVal = data
+    },
+    deleteRemark(data) {
+      BookingOrderDeleteRemark(data.id).then(res => {
+        this.$message.success('成功删除')
+        this.$emit('upDateRight')
+      })
+    },
+    handleModelCancel() {
+      this.remarkModelvisible = false
+      this.editRemarkVal = null
+    },
+
+    getFileType(val) {
+      if (val) {
+        return val.substr(val.lastIndexOf('.') + 1)
+      } else {
+        return ''
+      }
+    },
+    addFile() {
+      if (!this.id) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      this.fileModelvisible = true
+    },
+    fileModelCancel() {
+      this.upFileList = []
+      this.attachCode = ''
+      this.attachName = ''
+      this.fileModelvisible = false
+    },
+    handleRemove(file) {
+      const index = this.upFileList.indexOf(file)
+      const newFileList = this.upFileList.slice()
+      newFileList.splice(index, 1)
+      this.upFileList = newFileList
+    },
+    beforeUpload(file) {
+      if (this.upFileList.length > 1) {
+        return false
+      }
+      this.upFileList = [...this.upFileList, file]
+      return false
+    },
+    WebTest001(val) {
+      this.beforeUpload(val.upFileList)
+      this.attachCode = val.attachCode
+      this.attachName = val.attachName
+      this.handleUpload()
+    },
+    handleUpload() {
+      const { upFileList, attachCode, attachName } = this
+      if (upFileList.length === 0) {
+        this.$message.error('请上传文件')
+        return false
+      }
+      if (!attachCode || !attachName) {
+        this.$message.error('请选择附件类型')
+        return false
+      }
+      const formData = new FormData()
+      formData.append('file', upFileList[0])
+      formData.append('BookingId', this.id)
+      formData.append('TypeCode', attachCode)
+      formData.append('TypeName', attachName)
+      this.uploading = true
+      AddFile(formData)
+        .then(res => {
+          if (res.success) {
+            this.$message.success('上传成功')
+            this.$emit('upDateRight')
+          } else {
+            this.$message.error(res.message)
+          }
+          this.uploading = false
+          this.fileModelCancel()
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    getFileFun(data) {
+      this.$message.success(`下载打印文件 ${data.fileName} 中...`)
+      BookingOrderDownload({ id: data.id }).then(res => {
+        this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: 'application/pdf;charset=utf-8' }))
+        const fname = data.fileName // 下载文件的名字
+        const link = document.createElement('a')
+        link.href = this.pdfUrl
+        link.setAttribute('download', fname)
+        document.body.appendChild(link)
+        link.click()
+      })
+    },
+    handleAttachChange(index) {
+      this.attachCode = this.bookingAttachType[index].code
+      this.attachName = this.bookingAttachType[index].name
+    },
+    bookingShow(data) {
+      data.isChecked = !data.isChecked
+      this.$forceUpdate()
+    },
+    showLogMore(index) {
+      this.details.log[index].showMore = !this.details.log[index].showMore
+      this.$forceUpdate()
+    },
+
+    saveService(data) {
+      if (!this.id) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      if (!this.locaService.includes(data.code)) {
+        this.locaService.push(data.code)
+        this.details.item.push({
+          code: data.code,
+          value: data.name
+        })
+      } else {
+        const index = this.locaService.indexOf(data.code)
+        this.locaService.splice(index, 1)
+        this.details.item.splice(index, 1)
+      }
+
+      this.saveServiceItem()
+    },
+    saveServiceItem() {
+      SaveServiceItem({
+        bookingId: this.id,
+        item: this.details.item
+      })
+        .then(res => {
+          if (res.success) {
+            console.log('== 服务项目设置成功 ==')
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    GoodsStatusHandleOk() {
+      const {
+        StatusVisibleForm: { validateFields }
+      } = this
+      this.GoodsStatusVisible = true
+      validateFields((errors, values) => {
+        if (!errors || this.GoodsStatusEditData.systemCode === 'SQXS') {
+          for (const key in values) {
+            if (typeof values[key] === 'object' && !(values[key] === null)) {
+              values[key] = JSON.stringify(values[key])
+            }
+          }
+
+          let date = ''
+          if (values.finishTime) {
+            if (values.finishTime._d) {
+              date = new Date(+new Date(values.finishTime._d) + 8 * 3600 * 1000)
+            } else {
+              if (values.finishTime.split('"').length == 3) {
+                date = new Date(+new Date(values.finishTime.split('"')[1]))
+              } else {
+                date = new Date(+new Date(values.finishTime) + 8 * 3600 * 1000)
+              }
+            }
+          }
+          const data = {
+            finishTime: date ? date.toISOString() : '',
+            remark: values.remark,
+            extData: values.extData
+          }
+
+          const AData = { ...this.GoodsStatusEditData, ...data }
+          if (!this.id) {
+            this.$message.error('请先保存主单')
+            return false
+          }
+          if (!this.locaGoodsStatus.includes(this.GoodsStatusEditData.configId)) {
+            this.locaGoodsStatus.push(this.GoodsStatusEditData.configId)
+            this.details.goodsStatus.push({ ...AData })
+          }
+
+          const ApiData = {
+            bookingId: this.id,
+            item: []
+          }
+          console.log(this.details.goodsStatus)
+          this.details.goodsStatus.forEach(item => {
+            if (item.finishTime || item.remark) {
+              if (item.configId == this.GoodsStatusEditData.configId) {
+                ApiData.item.push(AData)
+              } else {
+                ApiData.item.push(item)
+              }
+            }
+          })
+          BookingOrderSaveGoodsStatus(ApiData)
+            .then(res => {
+              if (res.success) {
+                // let data = []
+                // this.booGoodsStatusItem.forEach(item => {
+                //   let type = true
+                //   ApiData.item.forEach(item2 => {
+                //     if (item.configId == item2.configId) {
+                //       type = false
+                //       data.push(item2)
+                //     }
+                //   })
+                //   if (type) {
+                //     data.push(item)
+                //   }
+                // })
+                this.$nextTick(() => {
+                  this.booGoodsStatusItem = res.data
+                  this.$emit('inGoodsSave', true)
+                  this.details.goodsStatus = res.data
+                  setTimeout(() => {
+                    this.$emit('inGoodsSave', false)
+                  }, 400)
+                })
+                this.$message.success('货物状态设置成功')
+                this.GoodsStatusVisible = false
+              }
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        } else {
+          console.log(errors, values)
+        }
+      })
+      // this.GoodsStatusVisible = false
+    },
+    FnOpenEdit(data) {
+      if (this.$route.query.isCopy) {
+        this.$message.error('请先保存')
+        return false
+      }
+      setTimeout(() => {
+        this.GoodsStatusEditData = data
+        this.GoodsStatusVisible = true
+        this.$nextTick(() => {
+          this.StatusVisibleForm.setFieldsValue({
+            finishTime: data.finishTime ? data.finishTime : '',
+            remark: data.remark ? data.remark : '',
+            extData: data.extData ? data.extData : ''
+          })
+        })
+        console.log(this.GoodsStatusEditData)
+      }, 100)
+    },
+    saveGoodsStatus(data) {
+      if (!this.id || this.$route.query.isCopy) {
+        this.$message.error('请先保存')
+        return false
+      }
+      if (!this.locaGoodsStatus.includes(data.configId) || !data.finishTime) {
+        // this.locaGoodsStatus.push(data.configId)
+        // this.details.goodsStatus.push({ ...data })
+        this.savegoodsStatusItem(data, 'push')
+      } else {
+        const that = this
+        this.$confirm({
+          title: '是否取消',
+          okText: '是',
+          okType: 'danger',
+          cancelText: '否',
+          onOk() {
+            const index = that.locaGoodsStatus.indexOf(data.configId)
+
+            that.locaGoodsStatus.splice(index, 1)
+            that.details.goodsStatus.forEach((item, index2) => {
+              if (item.configId == data.configId) {
+                that.$emit('inGoodsSave', true)
+                that.details.goodsStatus.splice(index2, 1)
+                setTimeout(() => {
+                  that.$emit('inGoodsSave', false)
+                }, 1200)
+              }
+            })
+
+            that.savegoodsStatusItem(data, 'splice')
+          },
+          onCancel() {
+            return false
+          }
+        })
+      }
+    },
+    savegoodsStatusItem(data, type) {
+      const ApiData = {
+        bookingId: this.$route.query.id,
+        item: []
+      }
+      console.log(this.details.goodsStatus, 132213)
+      this.details.goodsStatus.forEach(item => {
+        if (item.finishTime || item.remark) {
+          ApiData.item.push(item)
+        }
+      })
+
+      if (type === 'push' && !data.remark) {
+        const date = new Date(+new Date() + 8 * 3600 * 1000)
+        ApiData.item.push({ ...data, finishTime: date.toISOString() })
+      }
+      if (type === 'push' && data.remark) {
+        const date = new Date(+new Date() + 8 * 3600 * 1000)
+        ApiData.item.forEach(ite => {
+          if (ite.systemCode === data.systemCode) {
+            ite.finishTime = date.toISOString()
+          }
+        })
+      }
+      this.spinning = true
+      BookingOrderSaveGoodsStatus(ApiData)
+        .then(res => {
+          if (res.success) {
+            this.booGoodsStatusItem = res.data
+            this.$emit('inGoodsSave', true)
+            this.details.goodsStatus = res.data
+            setTimeout(() => {
+              this.$emit('inGoodsSave', false)
+            }, 400)
+          }
+          this.spinning = false
+        })
+        .catch(err => {
+          console.log(err)
+          this.spinning = false
+        })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../index.less');
+@import url('../style/rightContent.less');
+
+.active1 {
+  border: 1px solid #13c2c2 !important;
+}
+.rule-icon{
+  color: dodgerblue;
+  margin-left: 10px;
+  cursor: pointer;
+  position: relative;
+  z-index: 99;
+}
+.btn-refsh {
+  border: none;
+  font-size: 14px;
+  color: #666;
+  height: 20px;
+  cursor: pointer;
+  color: black;
+  background: #fff;
+
+  .iconfont {
+    font-size: 16px;
+    margin-right: 6px;
+    font-weight: 400;
+  }
+}
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/sedOperationArea.vue b/src/views/main/BookingLedger/detail/modulesTest/sedOperationArea.vue
new file mode 100644
index 0000000..24b809d
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/sedOperationArea.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="operation-area">
+    <a-card :bordered="false" :bodyStyle="{ padding: '10px', 'margin-bottom': '10px' }">
+      <div class="btn-list more-view">
+        <div class="area-order-title" v-if="scrollTop > 100">
+          <i class="iconfont icon-dingdan"></i> 当前分单号： <span>{{ details.hblno }}</span>
+        </div>
+        <button @click="copyFun"><span class="iconfont icon-fuzhi1"></span>复制</button>
+        <button @click="saveFun"><span class="iconfont icon-icon_baocun"></span>保存</button>
+        <button @click="FSnhowPrintModal"><span class="iconfont icon-printing"></span>打印</button>
+        <a-popconfirm
+          title="确定删除分单？"
+          ok-text="是"
+          cancel-text="否"
+          @confirm="removeOrder"
+          @cancel="cancelRemove"
+        >
+          <button><span class="iconfont icon-shanchu1"></span>删除</button>
+        </a-popconfirm>
+      </div>
+    </a-card>
+    <!-- 打印弹窗 start -->
+    <a-modal width="50vw" :maskClosable="false" v-model="PrintModalVisible" title="打印">
+      <template slot="footer"> <span></span> </template>
+      <a-spin tip="数据加载中..." :spinning="spinning">
+        <div class="PrintMain">
+          <div class="PrintTitle">
+            <p>默认打印格式为<span>pdf</span>,如需其他格式请选择</p>
+            <p>
+              打印格式：
+              <a-radio-group v-model="PrintType" 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.id"
+              @click="FnCilckTemplateType(item.id)"
+              class="items"
+              :span="11"
+              :offset="index % 2 == 0 ? 0 : 1"
+            >
+              <span>·</span>{{ item.displayName }}
+            </a-col>
+          </a-row>
+        </div>
+      </a-spin>
+    </a-modal>
+    <!-- 打印弹窗 end -->
+  </div>
+</template>
+<script>
+import { BookingOrderPrintTemplateWithHistoryList, BookingOrderPrintOrder } from '@/api/modular/main/BookingLedger'
+export default {
+  props: {
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      PrintModalVisible: false,
+      templateType: [],
+      PrintType: '1',
+      spinning: false
+    }
+  },
+  mounted() {},
+  watch: {
+    PrintType(newdata, oldData) {
+      let printType = newdata == 4 ? 20 : 10
+      let print = oldData == 4 ? 20 : 10
+      if (printType != print) {
+        this.GetPrintData(this.cateCode, printType)
+      }
+    }
+  },
+  methods: {
+    refreshPage() {
+      this.$emit('refresh')
+    },
+    cancelRefresh() {
+      return false
+    },
+    saveFun() {
+      this.$emit('save')
+    },
+    copyFun() {
+      this.$emit('copy')
+    },
+    GetPrintData(cateCode, printType) {
+      let Data = {
+        cateCode,
+        printType
+      }
+      this.spinning = true
+      BookingOrderPrintTemplateWithHistoryList(Data).then(res => {
+        this.templateType = res.data
+        this.spinning = false
+        this.PrintModalVisible = true
+      })
+    },
+    FSnhowPrintModal() {
+      if (this.details.id) {
+        this.cateCode = 'fendan_print'
+        let printType = ''
+        if (this.printType == 4) {
+          printType = 20
+        } else {
+          printType = 10
+        }
+        this.PrintType = '1'
+        this.GetPrintData(this.cateCode, printType)
+        // BookingOrderPrintTemplateWithHistoryList().then(res => {
+        //   this.templateType = []
+        //   res.data.forEach(item => {
+        //     if (item.isSub) {
+        //       this.templateType.push(item)
+        //     }
+        //   })
+        // })
+        this.PrintModalVisible = true
+      } else {
+        this.$message.warning('请先保存分单')
+      }
+    },
+    FnCilckTemplateType(templateId) {
+      this.$message.success(`搜索文件中...`)
+      let printType = this.PrintType == 4 ? 20 : 10
+      BookingOrderPrintOrder({
+        templateId,
+        bookingId: this.details.id,
+        cateCode: this.cateCode,
+        type: this.PrintType,
+        printType
+      })
+        .then(res => {
+          if (!res.success) {
+            this.$message.error(res.message)
+          } else {
+            if (this.PrintType == 1) {
+              window.open(` ${process.env.VUE_APP_API_BASE_URL}/BookingOrder/ViewPrintPdf/${res.data}`, '_blank')
+            } else {
+              window.open(
+                ` ${process.env.VUE_APP_API_BASE_URL}/BookingOrder/downloadPrint?filename=${res.data}`,
+                '_blank'
+              )
+            }
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    removeOrder() {
+      this.$emit('remove')
+    },
+    cancelRemove() {
+      console.log('= 取消删除 =')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../index.less');
+@import url('../style/sedOperationArea.less');
+</style>
diff --git a/src/views/main/BookingLedger/detail/modulesTest/sedOrder.vue b/src/views/main/BookingLedger/detail/modulesTest/sedOrder.vue
new file mode 100644
index 0000000..010647e
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modulesTest/sedOrder.vue
@@ -0,0 +1,796 @@
+<template>
+  <div class="booking-detail" style="margin-top:0;">
+    <a-row :gutter="24" :class="showSecNav ? 'show-content' : 'hide-content'" style="margin-left:0;">
+      <div class="nav-min-icon" v-if="!showSecNav" @click="openNav"><i class="iconfont icon-liebiao"></i></div>
+      <a-col :span="showSecNav ? 5 : 0" v-if="showSecNav">
+        <div class="sed-order-list">
+          <div class="sed-order-title">
+            <i class="iconfont icon-liebiao"></i><span class="tit">分提单列表</span
+            ><span class="right" @click="openNav">收起</span>
+          </div>
+          <div class="sec-order">
+            <div
+              class="sed-order-label"
+              v-for="(sedDetail, sindex) in sedOrderList"
+              :key="sindex"
+              :class="{ active: editIndex === sindex }"
+            >
+              <div class="left" @click.stop="changeOrder(sindex)">
+                <i class="iconfont icon-dingdan"></i>分单{{ sindex + 1 }}: {{ sedDetail.hblno || '请填写分单号' }}
+              </div>
+              <span class="no-save" v-if="sedDetail.isNoSave && editIndex !== sindex">（未保存） </span>
+              <a-popconfirm
+                title="确定删除分单？"
+                ok-text="是"
+                cancel-text="否"
+                @confirm.stop="removeSedOrderFun(sedDetail, sindex)"
+                @cancel="cancelRemove"
+              >
+                <span class="remove-btn iconfont icon-shanchu1"></span>
+              </a-popconfirm>
+            </div>
+            <div class="sed-order-btn" @click="addSedOrder"><i class="iconfont icon-jiahao2fill"></i>添加分单</div>
+          </div>
+        </div>
+      </a-col>
+      <a-col :span="showSecNav ? 19 : 24" style="padding-left:0;">
+        <template v-if="editDetails">
+          <div class="order-title">
+            <i class="iconfont icon-dingdan"></i> 当前分单号： <span>{{ editDetails.hblno }}</span>
+          </div>
+          <sedOperationArea
+            :details="editDetails"
+            :scrollTop="scrollTop"
+            :class="scrollTop < 100 ? 'normal-nav' : 'fixed-nav'"
+            @save="saveFun"
+            @copy="copyFun"
+            @remove="removeFun"
+          ></sedOperationArea>
+          <ul class="sec-parent-tabs-box">
+            <div class="parents-tabs-top">
+              <li @click="changeParentTabs('1')" :class="{ active: mainOrderActiveKey === '1' }">
+                <input type="radio" name="tabs" id="stab1" checked />
+                <label class="tabs-label" for="tab1">基础信息</label>
+              </li>
+              <li @click="changeParentTabs('2')" :class="{ active: mainOrderActiveKey === '2' }">
+                <input type="radio" name="tabs" id="stab2" />
+                <label class="tabs-label" for="tab2">EDI补充信息</label>
+              </li>
+            </div>
+            <div class="parents-tabs-content">
+              <div id="tab-content1" class="tab-content" v-show="mainOrderActiveKey === '1'">
+                <div class="pane-box">
+                  <!-- 基本信息 -->
+                  <basicInfo
+                    ref="basicInfo"
+                    :type="type"
+                    :details="editDetails"
+                    :rules="basicRules"
+                    :ishd="true"
+                    :inSave="inSave"
+                    isParent="child"
+                    @changeDetail="changeDetailFun"
+                  ></basicInfo>
+                  <!-- 收发通信息 -->
+                  <mailingInfo
+                    ref="mailingInfo"
+                    :details="editDetails"
+                    :rules="mailingRules"
+                    :inSave="inSave"
+                    :ishd="true"
+                    isParent="child"
+                    @changeDetail="changeDetailFun"
+                    @pkgsEnCapital="pkgsEnCapitalFun"
+                  ></mailingInfo>
+                  <!-- 货物信息 -->
+                  <cargoInfo
+                    ref="cargoInfo"
+                    :details="editDetails"
+                    :rules="cargoRules"
+                    :inSave="inSave"
+                    isParent="child"
+                    @changeDetail="changeDetailFun"
+                  ></cargoInfo>
+                  <!-- 签单信息 -->
+                  <billInfo
+                    ref="billInfo"
+                    :details="editDetails"
+                    :rules="billRules"
+                    :inSave="inSave"
+                    isParent="child"
+                    @changeDetail="changeDetailFun"
+                  ></billInfo>
+                  <!-- 备注信息 -->
+                  <remarksInfo
+                    ref="remarksInfo"
+                    :details="editDetails"
+                    :rules="remarksRules"
+                    :inSave="inSave"
+                    isParent="child"
+                    @changeDetail="changeDetailFun"
+                  ></remarksInfo>
+                  <!-- 箱型 -->
+                  <goodsTable
+                    ref="goodsTable"
+                    :details="editDetails"
+                    :rules="tableRules"
+                    :inSave="inSave"
+                    isParent="child"
+                    pType="secOrder"
+                    @changeDetail="changeDetailFun"
+                  ></goodsTable>
+                </div>
+              </div>
+              <div id="tab-content2" class="tab-content" v-show="mainOrderActiveKey === '2'">
+                <ediMore
+                  class="pane-box"
+                  ref="ediMore"
+                  :rules="ediRules"
+                  :details="editDetails"
+                  :inSave="inSave"
+                  isParent="child"
+                  @changeDetail="changeDetailFun"
+                  v-if="!inPageLoading"
+                ></ediMore>
+              </div>
+            </div>
+          </ul>
+        </template>
+        <template v-else>
+          <div class="sed-no-data">
+            <i class="iconfont icon-meiyoudingdan"></i>
+            <div class="no-data-text">暂无数据， <span class="btn" @click="addSedOrder">添加分单</span></div>
+          </div>
+        </template>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+<script>
+import sedOperationArea from './sedOperationArea'
+import basicInfo from './basicInfo'
+import mailingInfo from './mailingInfo'
+import cargoInfo from './cargoInfo'
+import billInfo from './billInfo'
+import remarksInfo from './remarksInfo'
+import goodsTable from './goodsTable'
+import ediMore from './ediMore'
+import rules from '../rules'
+import { BookingOrderSave, DeleteBookingOrder } from '@/api/modular/main/BookingLedger'
+const sedDetail = {
+  id: 0,
+  parentId: 0,
+  customername: '',
+  customerid: '',
+  carrier: 'CMA',
+  carrierid: 'CMA',
+  forwarder: '',
+  forwarderid: '',
+  pono: '',
+  mblno: '',
+  hblno: '',
+  epCode: '',
+  custno: '',
+  contractno: '',
+  vessel: '',
+  voyno: '',
+  voynoinner: '',
+  lanecode: '',
+  etd: '',
+  atd: '',
+  lanename: '',
+  shipagency: '',
+  shipagencyid: '',
+  lineName: '',
+  sale: '',
+  saleid: '',
+  op: '',
+  opid: '',
+  doc: '',
+  docid: '',
+  custservice: '',
+  custserviceid: '',
+  route: '',
+  routeid: '',
+  dzRemark: '',
+  czRemark: '',
+  shipper: '',
+  feeself: false,
+  consignee: '',
+  notifyparty: '',
+  yard: '',
+  yardid: '',
+  customser: '',
+  customserid: '',
+  trucker: '',
+  truckerid: '',
+  agentname: '',
+  agentid: '',
+  warehouse: '',
+  warehouseID: '',
+  eta: '',
+  closingdate: '',
+  closedocdate: '',
+  closevgmdate: '',
+  portload: '',
+  portloadid: '',
+  transport: '',
+  transportid: '',
+  portdischarge: '',
+  portdischargeid: '',
+  destination: '',
+  destinationid: '',
+  placedelivery: '',
+  placedeliveryid: '',
+  placereceipt: '',
+  placereceiptid: '',
+  pkgs: 0,
+  kindpkgs: '',
+  kgs: 0,
+  cbm: 0,
+  yardremark: '',
+  yardcontract: '',
+  yardcontracttel: '',
+  yardcontractemail: '',
+  pkgstotal: '',
+  kgstotal: '',
+  cbmtotal: '',
+  marks: '',
+  goodsname: '',
+  goodscode: '',
+  cargoid: '',
+  hscode: '',
+  description: '',
+  totalno: '',
+  issuetype: '',
+  issuedate: '',
+  issueplace: '',
+  issueplaceid: '',
+  nobill: '',
+  copynobill: '',
+  prepardat: '',
+  prepardatid: '',
+  payableat: '',
+  payableatid: '',
+  blfrt: '',
+  thirdpayaddr: '',
+  service: '',
+  reeferf: '',
+  tempset: '',
+  tempid: '',
+  tempmin: '',
+  tempmax: '',
+  humidity: '',
+  dclass: '',
+  dunno: '',
+  dpage: '',
+  dlabel: '',
+  linkman: '',
+  soremark: '',
+  siremark: '',
+  ctnInputs: [],
+  weituo: '',
+  freightpayer: '',
+  scaccode: '',
+  itncode: '',
+  iscontainersoc: 0,
+  bookingEDIExt: {
+    weiTuoFang: '',
+    ediAttn: '',
+    ediAttnTel: '',
+    ediAttnMail: '',
+    sendCode: '',
+    receiveCode: '',
+    amsConsignee: '',
+    amsNotifyParty: '',
+    opEName: '',
+    opTel: '',
+    opEmail: '',
+    goodsName: '',
+    orderRemark: '',
+    kingTareweight: '',
+    exRemark1: '',
+    exRemark2: '',
+    exRemark3: '',
+    exRemark4: '',
+    consigneeEdiCode: '',
+    shipperEdiCode: '',
+    notifyCdoe: '',
+    salerCode: '',
+    salerCodeName: '',
+    emanifestHbl: '',
+    masterBolIndicator: '',
+    masterBolIndicatorName: '',
+    s0CC0C: '',
+    ckhi: '',
+    cncm: '',
+    wncm: '',
+    acihbl: ''
+  },
+  hbList: [],
+  remark: [],
+  file: [],
+  log: [],
+  item: [],
+  statuslog: []
+}
+
+const bookingEDIExt = {
+  weiTuoFang: '',
+  ediAttn: '',
+  ediAttnTel: '',
+  ediAttnMail: '',
+  sendCode: '',
+  receiveCode: '',
+  amsConsignee: '',
+  amsNotifyParty: '',
+  opEName: '',
+  opTel: '',
+  opEmail: '',
+  goodsName: '',
+  orderRemark: '',
+  kingTareweight: '',
+  exRemark1: '',
+  exRemark2: '',
+  exRemark3: '',
+  exRemark4: '',
+  consigneeEdiCode: '',
+  shipperEdiCode: '',
+  notifyCdoe: '',
+  salerCode: '',
+  salerCodeName: '',
+  emanifestHbl: '',
+  masterBolIndicator: '',
+  masterBolIndicatorName: '',
+  s0CC0C: '',
+  ckhi: '',
+  cncm: '',
+  wncm: '',
+  acihbl: ''
+}
+export default {
+  name: 'SedOrder',
+  props: {
+    parSedOrderList: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    isAdd: {
+      type: Boolean,
+      default: false
+    },
+    details: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    checkFrom: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
+  components: {
+    sedOperationArea,
+    basicInfo,
+    mailingInfo,
+    cargoInfo,
+    billInfo,
+    remarksInfo,
+    goodsTable,
+    ediMore
+  },
+  data() {
+    return {
+      type: this.$route.query.type,
+      id: this.$route.query.id,
+      inPageLoading: false,
+      editDetails: null,
+      editIndex: 0,
+      showSecNav: true,
+      inSecLoad: false,
+      mainOrderActiveKey: '1',
+      basicRules: rules.basicRules,
+      mailingRules: rules.mailingRules,
+      cargoRules: rules.cargoRules,
+      billRules: rules.billRules,
+      remarksRules: rules.remarksRules,
+      ediRules: rules.ediRules,
+      hasEdiRules: false,
+      tableRules: rules.tableRules,
+      hasTableRules: false,
+      inSave: false,
+      sedOrderList: JSON.parse(JSON.stringify(this.parSedOrderList)) || []
+    }
+  },
+  watch: {
+    parSedOrderList: {
+      handler(nval, oval) {},
+      deep: true
+    },
+    editDetails: {
+      handler(nval, oval) {},
+      deep: true
+    },
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+        this.inSave = true
+        setTimeout(() => {
+          this.inSave = false
+        }, 1200)
+        if (this.$refs.basicInfo) {
+          this.$refs.basicInfo.$refs.basicFrom.clearValidate()
+          this.$refs.mailingInfo.$refs.mailingFrom.clearValidate()
+          this.$refs.cargoInfo.$refs.cargoFrom.clearValidate()
+          this.$refs.billInfo.$refs.billFrom.clearValidate()
+          this.$refs.remarksInfo.$refs.remarkFrom.clearValidate()
+        }
+      }
+    },
+    checkFrom(nval, oval) {
+      this.checkFromInit()
+    }
+  },
+  created() {},
+  mounted() {
+    this.checkFromInit()
+  },
+  methods: {
+    init(data = []) {
+      this.inSecLoad = true
+      if (Object.keys(data).length > 0) {
+        this.sedOrderList = JSON.parse(JSON.stringify(data))
+      } else {
+        this.sedOrderList = []
+      }
+      if (this.sedOrderList.length > 0) {
+        this.sedOrderList.map((item, index) => {
+          item.isNoSave = false
+        })
+        this.editIndex = 0
+        const $data = JSON.parse(JSON.stringify(this.sedOrderList[0]))
+        if (!$data.bookingEDIExt) {
+          $data.bookingEDIExt = bookingEDIExt
+        }
+        this.editDetails = $data
+        setTimeout(() => {
+          this.$refs.goodsTable.init()
+        }, 1000)
+        setTimeout(() => {
+          this.inSecLoad = false
+        }, 2000)
+      } else {
+        this.editDetails = JSON.parse(JSON.stringify(sedDetail))
+        setTimeout(() => {
+          this.inSecLoad = false
+        }, 2000)
+      }
+    },
+
+    checkFromInit() {
+      Object.keys(this.basicRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.basicRules[item][0].required = true
+        }
+      })
+      Object.keys(this.mailingRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.mailingRules[item][0].required = true
+        }
+      })
+      Object.keys(this.cargoRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.cargoRules[item][0].required = true
+        }
+      })
+      Object.keys(this.billRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.billRules[item][0].required = true
+        }
+      })
+      Object.keys(this.remarksRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.remarksRules[item][0].required = true
+        }
+      })
+      Object.keys(this.ediRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.ediRules[item][0].required = true
+        }
+        if (this.checkFrom.includes('bookingEDIExt.scaccode')) {
+          this.ediRules['scaccode'][0].required = true
+        }
+        if (this.checkFrom.includes('bookingEDIExt.itncode')) {
+          this.ediRules['itncode'][0].required = true
+        }
+        if (this.checkFrom.includes('bookingEDIExt.freightpayer')) {
+          this.ediRules['freightpayer'][0].required = true
+        }
+      })
+      Object.keys(this.tableRules).map((item, index) => {
+        if (this.checkFrom.includes(item)) {
+          this.tableRules[item].required = true
+          this.hasTableRules = true
+        }
+      })
+      this.$forceUpdate()
+    },
+
+    addSedOrder() {
+      if (this.isAdd) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      const data = JSON.parse(JSON.stringify(this.details))
+      data.isNoSave = true
+      data.hblno = ''
+      data.shipper = ''
+      data.consignee = ''
+      data.notifyparty = ''
+      data.pid = this.$route.query.id
+      data.id = 0
+      if (!data.bookingEDIExt) {
+        data.bookingEDIExt = bookingEDIExt
+      }
+      if (data.ctnInputs.length > 0) {
+        data.ctnInputs.map((item, index) => {
+          delete item.id
+        })
+      }
+      if (data.hbList.length > 0) {
+        delete data.hbList
+      }
+      this.editDetails = data
+      this.editIndex = this.sedOrderList.length
+      this.sedOrderList.push(data)
+      this.$emit('changeHB', this.sedOrderList)
+    },
+
+    changeDetailFun(data) {
+      if (this.inSave || this.inSecLoad || this.sedOrderList.length === 0) {
+        return false
+      }
+      const { detail, type } = data
+      if (!detail.bookingEDIExt) {
+        detail.bookingEDIExt = bookingEDIExt
+      }
+      if (this.ifCompare(this.sedOrderList[this.editIndex], detail) && !this.inSecLoad && type !== 'save') {
+        this.sedOrderList[this.editIndex].isNoSave = true
+      }
+      this.editDetails = detail
+      this.sedOrderList[this.editIndex] = detail
+      this.$emit('changeHB', this.sedOrderList)
+      this.$forceUpdate()
+    },
+
+    ifCompare(object1, object2) {
+      var o1keys = Object.keys(object1)
+      var o2keys = Object.keys(object2)
+      if (o2keys.length !== o1keys.length) return false
+      for (let i = 0; i <= o1keys.length - 1; i++) {
+        let key = o1keys[i]
+        if (!o2keys.includes(key)) return false
+        if (object2[key] !== object1[key]) return false
+      }
+      return true
+    },
+    saveFun() {
+      this.bookingOrderSave()
+    },
+    bookingOrderSave() {
+      if (!this.editDetails.hblno) {
+        this.$message.error('请输入分提单号')
+        return false
+      }
+      let basicFrom = true
+      this.$refs.basicInfo.$refs.basicFrom.validate((valid, err) => {
+        console.log(err)
+        basicFrom = valid
+      })
+      let mailingFrom = true
+      this.$refs.mailingInfo.$refs.mailingFrom.validate(valid => {
+        mailingFrom = valid
+      })
+      let cargoFrom = true
+      this.$refs.cargoInfo.$refs.cargoFrom.validate(valid => {
+        cargoFrom = valid
+      })
+      let billFrom = true
+      this.$refs.billInfo.$refs.billFrom.validate(valid => {
+        billFrom = valid
+      })
+      let remarksFrom = true
+      this.$refs.remarksInfo.$refs.remarkFrom.validate(valid => {
+        remarksFrom = valid
+      })
+      console.log(this.editDetails)
+      if (!basicFrom || !mailingFrom || !cargoFrom || !billFrom || !remarksFrom) {
+        this.$message.error('保存失败，请检查必填项')
+        return false
+      }
+      if (this.$refs.ediMore) {
+        let ediFrom = true
+        this.$refs.ediMore.$refs.ediFrom.validate(valid => {
+          ediFrom = valid
+        })
+        if (!ediFrom) {
+          this.mainOrderActiveKey = '2'
+          this.$message.error('保存失败，请检查EDI必填项')
+          return false
+        }
+      } else {
+        Object.keys(this.ediRules).map((item, index) => {
+          if (this.checkFrom.includes(item) && !this.editDetails[item.split('.')[0]][item.split('.')[1]]) {
+            this.hasEdiRules = true
+          }
+        })
+        if (this.hasEdiRules) {
+          this.mainOrderActiveKey = '2'
+          this.$message.error('保存失败，请检查EDI必填项')
+          return false
+        }
+      }
+      if (this.hasTableRules && this.editDetails.carrierid !== 'GGPX') {
+        if (this.editDetails.ctnInputs.length === 0) {
+          this.$message.error('保存失败，箱信息未填写')
+          return false
+        }
+        let tableErrTip = ''
+        this.editDetails.ctnInputs.map((item, index) => {
+          Object.keys(item).map((label, lindex) => {
+            if (this.tableRules[label] && this.tableRules[label].required && !item[label]) {
+              tableErrTip = `${tableErrTip}  序号${index + 1}中${this.tableRules[label].title}未填写,`
+            }
+          })
+        })
+        if (tableErrTip !== '') {
+          this.$message.error(`保存失败， 箱信息错误： ${tableErrTip.substr(0, tableErrTip.length - 1)}`, 3)
+          return false
+        }
+      }
+      this.inSave = true
+      const data = JSON.parse(JSON.stringify(this.editDetails))
+      delete data.isNoSave
+      if (this.$route.query.isCopy) {
+        delete data.bookingno
+        data.ctnInputs.map((item, index) => {
+          delete item.id
+        })
+      }
+      data.parentId = this.$route.query.id
+      if (this.editDetails.id !== 0 && Number(this.editDetails.id) !== Number(this.$route.query.id)) {
+        // this.bookingOrderUpdate()
+      } else {
+        data.id = 0
+        data.ctnInputs.map((item, index) => {
+          item.id = 0
+        })
+      }
+      BookingOrderSave(data)
+        .then(res => {
+          if (res.success) {
+            this.$message.success('保存成功')
+            this.sedOrderList.splice(this.editIndex, 1, res.data)
+            this.editDetails = res.data
+            this.$set(this.sedOrderList[this.editIndex], 'isNoSave', false)
+            this.$set(this.editDetails, 'isNoSave', false)
+            setTimeout(() => {
+              this.inSave = false
+              this.changeDetailFun({ detail: this.editDetails, type: 'save' })
+            }, 1000)
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+
+    changeOrder(index) {
+      this.editIndex = index
+      const data = this.sedOrderList[index]
+      if (!data.bookingEDIExt) {
+        data.bookingEDIExt = bookingEDIExt
+      }
+      this.editDetails = data
+      this.inSecLoad = true
+      setTimeout(() => {
+        this.inSecLoad = false
+      }, 200)
+    },
+
+    copyFun() {
+      const _data = JSON.parse(JSON.stringify(this.editDetails))
+      _data.isNoSave = true
+      _data.hblno = ''
+      _data.pid = this.$route.query.id
+      _data.id = 0
+      if (!_data.bookingEDIExt) {
+        _data.bookingEDIExt = bookingEDIExt
+      }
+      this.editDetails = _data
+      this.editIndex = this.sedOrderList.length
+      this.sedOrderList.push(_data)
+    },
+
+    openNav() {
+      this.showSecNav = !this.showSecNav
+    },
+    pkgsEnCapitalFun(data) {
+      this.editDetails.totalno = data
+    },
+    changeMainTab(e) {
+      this.mainOrderActiveKey = e
+    },
+    changeParentTabs(type) {
+      this.mainOrderActiveKey = type
+    },
+    removeSedOrderFun(data, index) {
+      this.deleteBookingOrder(data.id, index)
+    },
+    removeFun() {
+      this.deleteBookingOrder(this.editDetails.id, this.editIndex)
+    },
+    deleteBookingOrder(id, index) {
+      // eslint-disable-next-line eqeqeq
+      if (id == 0) {
+        this.removeSucc(id, index)
+        return false
+      }
+      this.inSecLoad = true
+      DeleteBookingOrder([id].toString())
+        .then(res => {
+          if (res.success) {
+            this.$message.success('删除成功')
+            this.removeSucc(id, index)
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch(err => {
+          console.log(err)
+        })
+    },
+    removeSucc(id, index) {
+      const removeIndex = index
+      this.sedOrderList.splice(removeIndex, 1)
+      this.$emit('sedOrderRemove', this.sedOrderList)
+      if (this.sedOrderList.length === 0) {
+        this.editIndex = 0
+        this.editDetails = null
+        return false
+      }
+      if (this.editDetails.id === id) {
+        const num = this.editIndex === 0 ? 0 : this.editIndex - 1
+        this.editIndex = num > this.sedOrderList.length ? this.sedOrderList.length - 1 : num
+        this.editDetails = this.sedOrderList[this.editIndex]
+      } else {
+        this.editIndex = removeIndex < this.editIndex ? this.editIndex - 1 : this.editIndex
+      }
+      setTimeout(() => {
+        this.inSecLoad = false
+      }, 200)
+      this.$forceUpdate()
+    },
+    cancelRemove() {
+      console.log('== 取消删除 ==')
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import url('../index.less');
+@import url('../style/sedOrder.less');
+</style>
diff --git a/src/views/main/BookingLedger/detail/rules.js b/src/views/main/BookingLedger/detail/rules.js
index 2d3d83c..6320f8b 100644
--- a/src/views/main/BookingLedger/detail/rules.js
+++ b/src/views/main/BookingLedger/detail/rules.js
@@ -56,6 +56,19 @@ export default {
     destination: [{ required: false, message: '请选择目的地', trigger: 'change' }],
     placedeliveryid: [{ required: false, message: '请选择交货代码', trigger: 'change' }],
     placedelivery: [{ required: false, message: '请选择交货地', trigger: 'change' }],
+    pkgs: [{ required: false, message: '请输入件数', trigger: 'change' }],
+    kindpkgs: [{ required: false, message: '请输入包装', trigger: 'change' }],
+    kgs: [{ required: false, message: '请输入毛重', trigger: 'change' }],
+    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }]
+  },
+  cargoRules: {
+    marks: [{ required: false, message: '请输入Seal No.  Marks & Nos', trigger: 'change' }],
+    cargoid: [{ required: false, message: '请选择货物标志', trigger: 'change' }],
+    hscode: [{ required: false, message: '请输入HS编码', trigger: 'change' }],
+    description: [{ required: false, message: '请输入包装种类与货名', trigger: 'change' }],
+    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }]
+  },
+  billRules: {
     issuetype: [{ required: false, message: '请选择签单方式', trigger: 'change' }],
     issuedate: [{ required: false, message: '请选择签单日期', trigger: 'change' }],
     issueplace: [{ required: false, message: '请选择签单地点', trigger: 'change' }],
@@ -77,26 +90,11 @@ export default {
     dunno: [{ required: false, message: '请输入危险品编号', trigger: 'change' }],
     dpage: [{ required: false, message: '请输入危险品页号', trigger: 'change' }],
     dlabel: [{ required: false, message: '请输入危险品标签', trigger: 'change' }],
-    linkman: [{ required: false, message: '请输入危险品联系人', trigger: 'change' }],
-    soremark: [{ required: false, message: '请输入订舱备注', trigger: 'change' }],
-    siremark: [{ required: false, message: '请输入截单备注', trigger: 'change' }]
-  },
-  cargoRules: {
-    marks: [{ required: false, message: '请输入Seal No.  Marks & Nos', trigger: 'change' }],
-    cargoid: [{ required: false, message: '请选择货物标志', trigger: 'change' }],
-    hscode: [{ required: false, message: '请输入HS编码', trigger: 'change' }],
-    description: [{ required: false, message: '请输入包装种类与货名', trigger: 'change' }],
-    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }],
-    pkgs: [{ required: false, message: '请输入件数', trigger: 'change' }],
-    kindpkgs: [{ required: false, message: '请输入包装', trigger: 'change' }],
-    kgs: [{ required: false, message: '请输入毛重', trigger: 'change' }],
-    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }]
-  },
-  billRules: {
- 
+    linkman: [{ required: false, message: '请输入危险品联系人', trigger: 'change' }]
   },
   remarksRules: {
-
+    soremark: [{ required: false, message: '请输入订舱备注', trigger: 'change' }],
+    siremark: [{ required: false, message: '请输入截单备注', trigger: 'change' }]
   },
   ediRules: {
     'bookingEDIExt.sendCode': [{ required: false, message: '请输入发送方EDI代码', trigger: 'change' }],
diff --git a/src/views/main/BookingLedger/detail/rulesTest.js b/src/views/main/BookingLedger/detail/rulesTest.js
new file mode 100644
index 0000000..2d3d83c
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/rulesTest.js
@@ -0,0 +1,158 @@
+export default {
+  basicRules: {
+    customername: [{ required: false, message: '请选择委托单位', trigger: 'change' }],
+    mblno: [{ required: false, message: '请输入提单号', trigger: 'change' }],
+    carrierid: [{ required: false, message: '请选择船公司', trigger: 'change' }],
+    forwarder: [{ required: false, message: '请输入订舱代理', trigger: 'change' }],
+    pono: [{ required: false, message: '请输入PO NO', trigger: 'change' }],
+    hblno: [{ required: false, message: '请输入分提单号', trigger: 'change' }],
+    custno: [{ required: false, message: '请输入订舱编号', trigger: 'change' }],
+    contractno: [{ required: false, message: '请输入运费协议号', trigger: 'change' }],
+    tmblno: [{ required: false, message: '请输入真提单号', trigger: 'change' }], // VOLTA WHL CSL
+    epCode: [{ required: false, message: '请输入EP号', trigger: 'change' }], // esl
+    vessel: [{ required: false, message: '请输入船名', trigger: 'change' }],
+    lanecode: [{ required: false, message: '请输入航线代码', trigger: 'change' }], // esl
+    voynoinner: [{ required: false, message: '请输入内部航次', trigger: 'change' }],
+    voyno: [{ required: false, message: '请输入航次/海关航次', trigger: 'change' }],
+    etd: [{ required: false, message: '请选择开船日期', trigger: 'change' }],
+    zhanCangFlag: [{ required: false, message: '请选择是否占舱', trigger: 'change' }],
+    // atd: [{ required: false, message: '请选择实际开船日期', trigger: 'change' }],
+    lanename: [{ required: false, message: '请输入船司航线', trigger: 'change' }],
+    shipagency: [{ required: false, message: '请输入船代', trigger: 'change' }],
+    lineName: [{ required: false, message: '请输入航线', trigger: 'change' }],
+    sale: [{ required: false, message: '请选择揽货人员', trigger: 'change' }],
+    op: [{ required: false, message: '请选择操作人员', trigger: 'change' }],
+    doc: [{ required: false, message: '请选择单证人员', trigger: 'change' }],
+    custservice: [{ required: false, message: '请选择客服人员', trigger: 'change' }],
+    route: [{ required: false, message: '请选择航线操作', trigger: 'change' }],
+    lineManage: [{ required: false, message: '请选择航线管理', trigger: 'change' }],
+    dzRemark: [{ required: false, message: '请选择单证备注', trigger: 'change' }],
+    czRemark: [{ required: false, message: '请选择操作备注', trigger: 'change' }]
+  },
+  mailingRules: {
+    shipper: [{ required: false, message: '请输入发货人', trigger: 'submit' }],
+    consignee: [{ required: false, message: '请输入收货人', trigger: 'submit' }],
+    notifyparty: [{ required: false, message: '请输入通知人', trigger: 'submit' }],
+    yard: [{ required: false, message: '请输入场站', trigger: 'change' }],
+    feeself: [{ required: false, message: '请选择场站费自结', trigger: 'change' }],
+    customser: [{ required: false, message: '请输入报关行', trigger: 'change' }],
+    trucker: [{ required: false, message: '请输入车队', trigger: 'change' }],
+    agentname: [{ required: false, message: '请输入国外代理', trigger: 'change' }],
+    warehouse: [{ required: false, message: '请选择仓库', trigger: 'change' }],
+    shippingMethod: [{ required: false, message: '请选择装运方式', trigger: 'change' }],
+    // eta: [{ required: false, message: '请选择预抵日期', trigger: 'change' }],
+    closingdate: [{ required: false, message: '请选择截港时间', trigger: 'change' }],
+    closedocdate: [{ required: false, message: '请选择截单时间', trigger: 'change' }],
+    closevgmdate: [{ required: false, message: '请选择VGM时间', trigger: 'change' }],
+    placereceiptid: [{ required: false, message: '请选择收货地代码', trigger: 'change' }],
+    placereceipt: [{ required: false, message: '请选择收货地', trigger: 'change' }],
+    portloadid: [{ required: false, message: '请选择装货港代码', trigger: 'change' }],
+    portload: [{ required: false, message: '请选择装货港', trigger: 'change' }],
+    transportid: [{ required: false, message: '请选择中转港代码', trigger: 'change' }],
+    transport: [{ required: false, message: '请选择中转港', trigger: 'change' }],
+    portdischargeid: [{ required: false, message: '请选择卸货港代码', trigger: 'change' }],
+    portdischarge: [{ required: false, message: '请选择卸货港', trigger: 'change' }],
+    destinationid: [{ required: false, message: '请选择目的代码', trigger: 'change' }],
+    destination: [{ required: false, message: '请选择目的地', trigger: 'change' }],
+    placedeliveryid: [{ required: false, message: '请选择交货代码', trigger: 'change' }],
+    placedelivery: [{ required: false, message: '请选择交货地', trigger: 'change' }],
+    issuetype: [{ required: false, message: '请选择签单方式', trigger: 'change' }],
+    issuedate: [{ required: false, message: '请选择签单日期', trigger: 'change' }],
+    issueplace: [{ required: false, message: '请选择签单地点', trigger: 'change' }],
+    issueplaceid: [{ required: false, message: '请输入签单地代码', trigger: 'change' }],
+    nobill: [{ required: false, message: '请选择提单份数', trigger: 'change' }],
+    copynobill: [{ required: false, message: '请选择副本份数', trigger: 'change' }],
+    prepardat: [{ required: false, message: '请选择预付地点', trigger: 'change' }],
+    payableat: [{ required: false, message: '请选择到付地点', trigger: 'change' }],
+    blfrt: [{ required: false, message: '请选择付费方式', trigger: 'change' }],
+    thirdpayaddr: [{ required: false, message: '请输入第三付款地', trigger: 'change' }],
+    service: [{ required: false, message: '请选择运输条款', trigger: 'change' }],
+    reeferf: [{ required: false, message: '请输入冷藏通风量', trigger: 'change' }],
+    tempset: [{ required: false, message: '请输入温度', trigger: 'change' }],
+    tempid: [{ required: false, message: '请选择温度单位', trigger: 'change' }],
+    tempmin: [{ required: false, message: '请输入最低温度', trigger: 'change' }],
+    tempmax: [{ required: false, message: '请输入最高温度', trigger: 'change' }],
+    humidity: [{ required: false, message: '请输入湿度', trigger: 'change' }],
+    dclass: [{ required: false, message: '请输入危险品等级', trigger: 'change' }],
+    dunno: [{ required: false, message: '请输入危险品编号', trigger: 'change' }],
+    dpage: [{ required: false, message: '请输入危险品页号', trigger: 'change' }],
+    dlabel: [{ required: false, message: '请输入危险品标签', trigger: 'change' }],
+    linkman: [{ required: false, message: '请输入危险品联系人', trigger: 'change' }],
+    soremark: [{ required: false, message: '请输入订舱备注', trigger: 'change' }],
+    siremark: [{ required: false, message: '请输入截单备注', trigger: 'change' }]
+  },
+  cargoRules: {
+    marks: [{ required: false, message: '请输入Seal No.  Marks & Nos', trigger: 'change' }],
+    cargoid: [{ required: false, message: '请选择货物标志', trigger: 'change' }],
+    hscode: [{ required: false, message: '请输入HS编码', trigger: 'change' }],
+    description: [{ required: false, message: '请输入包装种类与货名', trigger: 'change' }],
+    goodsname: [{ required: false, message: '请选择品名', trigger: 'change' }],
+    pkgs: [{ required: false, message: '请输入件数', trigger: 'change' }],
+    kindpkgs: [{ required: false, message: '请输入包装', trigger: 'change' }],
+    kgs: [{ required: false, message: '请输入毛重', trigger: 'change' }],
+    cbm: [{ required: false, message: '请输入尺寸', trigger: 'change' }]
+  },
+  billRules: {
+ 
+  },
+  remarksRules: {
+
+  },
+  ediRules: {
+    'bookingEDIExt.sendCode': [{ required: false, message: '请输入发送方EDI代码', trigger: 'change' }],
+    'bookingEDIExt.receiveCode': [{ required: false, message: '请输入接收方EDI代码', trigger: 'change' }],
+    'bookingEDIExt.ediAttn': [{ required: false, message: '请输入EDI联系人名称', trigger: 'change' }],
+    'bookingEDIExt.ediAttnTel': [{ required: false, message: '请输入EDI联系人电话', trigger: 'change' }],
+    'bookingEDIExt.ediAttnMail': [{ required: false, message: '请输入EDI联系人邮箱', trigger: 'change' }],
+    'bookingEDIExt.amsConsignee': [{ required: false, message: '请输入AMS收货人', trigger: 'change' }],
+    'bookingEDIExt.amsNotifyParty': [{ required: false, message: '请输入AMS通知人', trigger: 'change' }],
+    'bookingEDIExt.opEName': [{ required: false, message: '请输入操作英文名称', trigger: 'change' }],
+    'bookingEDIExt.opTel': [{ required: false, message: '请输入操作电话', trigger: 'change' }],
+    'bookingEDIExt.opEmail': [{ required: false, message: '请输入操作邮箱', trigger: 'change' }],
+    'bookingEDIExt.goodsName': [{ required: false, message: '请输入商品名称', trigger: 'change' }],
+    iscontainersoc: [{ required: false, message: '请输入SOC箱', trigger: 'change' }],
+    scaccode: [{ required: false, message: '请输入SCAC代码', trigger: 'change' }],
+    itncode: [{ required: false, message: '请输入ITN编号', trigger: 'change' }],
+    'bookingEDIExt.orderRemark': [{ required: false, message: '请输入订舱人说明', trigger: 'change' }],
+    freightpayer: [{ required: false, message: '请输入付款方', trigger: 'change' }],
+    'bookingEDIExt.kingTareweight': [{ required: false, message: '请输入第一层包装皮重', trigger: 'change' }],
+    'bookingEDIExt.weiTuoFang': [{ required: false, message: '请输入委托方', trigger: 'change' }],
+    'bookingEDIExt.exRemark1': [{ required: false, message: '请输入辅助字段1', trigger: 'change' }],
+    'bookingEDIExt.exRemark2': [{ required: false, message: '请输入辅助字段2', trigger: 'change' }],
+    'bookingEDIExt.exRemark3': [{ required: false, message: '请输入辅助字段3', trigger: 'change' }],
+    'bookingEDIExt.exRemark4': [{ required: false, message: '请输入辅助字段4', trigger: 'change' }],
+    'bookingEDIExt.consigneeEdiCode': [{ required: false, message: '请输入收货人EDI代码', trigger: 'change' }],
+    'bookingEDIExt.shipperEdiCode': [{ required: false, message: '请输入发货人EDI代码', trigger: 'change' }],
+    'bookingEDIExt.notifyCdoe': [{ required: false, message: '请输入通知方EDI代码', trigger: 'change' }],
+    'bookingEDIExt.salerCode': [{ required: false, message: '请输入太平销售EDI代码', trigger: 'change' }],
+    'bookingEDIExt.emanifestHbl': [{ required: false, message: '请输入EMANIFEST HBL', trigger: 'change' }],
+    'bookingEDIExt.masterBolIndicator': [{ required: false, message: '请输入Master Bol Indicator', trigger: 'change' }],
+    'bookingEDIExt.s0CC0C': [{ required: false, message: '请输入S0C C0C', trigger: 'change' }],
+    'bookingEDIExt.ckhi': [{ required: false, message: '请输入欧盟港口、伊朗港口、KHI', trigger: 'change' }],
+    'bookingEDIExt.cncm': [{ required: false, message: '请输入南美东', trigger: 'change' }],
+    'bookingEDIExt.wncm': [{ required: false, message: '请输入巴西线木质包装情况', trigger: 'change' }],
+    'bookingEDIExt.acihbl': [{ required: false, message: '请输入ACI HBL', trigger: 'change' }]
+  },
+  tableRules: {
+    ctnall: { required: false, title: '箱型', message: '请选择箱型', trigger: 'change' },
+    ctnnum: { required: false, title: '箱量', message: '请选择箱量', trigger: 'change' },
+    cntrno: { required: false, title: '箱号', message: '请选择箱号', trigger: 'change' },
+    sealno: { required: false, title: '封号', message: '请选择封号', trigger: 'change' },
+    pkgs: { required: false, title: '件数', message: '请选择件数', trigger: 'change' },
+    kindpkgs: { required: false, title: '包装', message: '请选择包装', trigger: 'change' },
+    kgs: { required: false, title: '重量', message: '请选择重量', trigger: 'change' },
+    cbm: { required: false, title: '尺码', message: '请选择尺码', trigger: 'change' },
+    tareweight: { required: false, title: '箱皮重', message: '请选择箱皮重', trigger: 'change' },
+    weightype: { required: false, title: '称重方式', message: '请选择称重方式', trigger: 'change' },
+    weighkgs: { required: false, title: '称重重量', message: '请选择称重重量', trigger: 'change' }
+  },
+  preRules: {
+    ctn: { required: false, title: '箱型', message: '请选择箱型', trigger: 'change' },
+    cntrno: { required: false, title: '箱号', message: '请选择箱号', trigger: 'change' },
+    sealno: { required: false, title: '封号', message: '请选择封号', trigger: 'change' },
+    pkgs: { required: false, title: '件数', message: '请选择件数', trigger: 'change' },
+    kindpkgs: { required: false, title: '包装', message: '请选择包装', trigger: 'change' },
+    kgs: { required: false, title: '重量', message: '请选择重量', trigger: 'change' },
+    cbm: { required: false, title: '尺码', message: '请选择尺码', trigger: 'change' }
+  }
+}
diff --git a/src/views/main/BookingLedger/list/indexTest.vue b/src/views/main/BookingLedger/list/indexTest.vue
new file mode 100644
index 0000000..8ce891b
--- /dev/null
+++ b/src/views/main/BookingLedger/list/indexTest.vue
@@ -0,0 +1,3355 @@
+<template>
+  <div style="margin-top: -16px; margin-left: -4px; margin-right: -4px" @click="pageClick">
+    <a-spin tip="Loading..." :spinning="spinning">
+      <a-row :gutter="24">
+        <a-col :md="24" :sm="24" style="padding: 0 0 0 0" class="content-box">
+          <x-card class="content-nav">
+            <div slot="content" class="table-page-search-wrapper">
+              <a-form layout="inline">
+                <a-row :gutter="48" class="booking-from-box">
+                  <template v-for="(formLabel, findex) in formData">
+                    <a-col
+                      :md="6"
+                      :lg="6"
+                      :xl="4"
+                      :key="findex"
+                      v-show="(findex < 4 && !advanced) || advanced"
+                      class="from-label">
+                      <a-form-item style="padding-left: 10px; padding-right: 10px" :label="formLabel.title">
+                        <formLabel
+                          :ref="`fromlabel-${formLabel.label}`"
+                          :labelData="formLabel"
+                          :formRes="formRes"
+                          :resetType="ResetType"
+                          :formIndex="findex"
+                          @change="formChange"
+                          @pressEnter="pressEnterFun"
+                          @getCompleteList="getCompleteListFun"
+                          @selectFirst="getSelectFirst"></formLabel>
+                      </a-form-item>
+                    </a-col>
+                  </template>
+                  <a-col :xl="formBtnCol || (!advanced && 8)" :lg="24" :md="24" :sm="24">
+                    <span
+                      class="table-page-search-submitButtons"
+                      :style="(advanced && { float: 'right', overflow: 'hidden' }) || {}">
+                      <a-button size="small" type="primary" @click="tableRefresh">查询</a-button>
+                      <a-button size="small" class="reset" @click="tableReset">重置</a-button>
+                      <template v-if="screenWidth > 1600">
+                        <a-button size="small" class="more-search" @click="tableMoreRefresh">
+                          多提单号查询<a-icon type="search" />
+                        </a-button>
+                        <span class="tab-btn" @click="formSetting">
+                          <a-icon type="setting" :style="{ marginLeft: '0px' }" />
+                        </span>
+                        <a class="senior-search" @click="toggleAdvanced" v-if="formData.length > 4">
+                          {{ advanced ? '收起查询' : '更多查询' }}
+                          <i class="iconfont" :class="advanced ? 'icon-shouqi' : 'icon-zhankai'"></i>
+                        </a>
+                      </template>
+                      <template v-else>
+                        <a-button size="small" class="more-search" @click="tableMoreRefresh">
+                          多提单号<a-icon type="search" />
+                        </a-button>
+                        <span class="tab-btn" @click="formSetting">
+                          <a-icon type="setting" :style="{ marginLeft: '0px' }" />
+                        </span>
+                        <a class="senior-search" @click="toggleAdvanced" v-if="formData.length > 4">
+                          {{ advanced ? '收起' : '更多' }}
+                          <i class="iconfont" :class="advanced ? 'icon-shouqi' : 'icon-zhankai'"></i>
+                        </a>
+                      </template>
+                    </span>
+                  </a-col>
+                </a-row>
+              </a-form>
+            </div>
+          </x-card>
+          <x-card class="content-table" style="margin-top: -6px">
+            <div slot="content" class="table-page-search-wrapper" :style="{ marginTop: '-8px' }">
+              <vxe-toolbar>
+                <template #buttons>
+                  <div class="nav-box">
+                    <div class="nav" @click="addBooking"><i class="iconfont icon-jiahao2fill"></i>新建</div>
+                    <div class="nav" @click="copyBooking"><i class="iconfont icon-fuzhi"></i>复制</div>
+                    <div class="nav" @click="copyBookingMore"><i class="iconfont icon-fuzhi1"></i>复制多票</div>
+                    <div class="nav" @click="batchEditing"><i class="iconfont icon-bianjiwenjian"></i>批量编辑</div>
+                    <div class="nav"><i class="iconfont icon-shujushangchuan-shixin"></i>批量VGM</div>
+                    <!-- <div class="nav" @click="excuteShippingOrderCompareBatch"><i class="iconfont icon-weibiaoti--"></i>下货纸比对</div> -->
+                    <!-- <a-popconfirm
+                      title="确定进行下货纸比对？"
+                      ok-text="是"
+                      cancel-text="否"
+                      @confirm="excuteShippingOrderCompareBatch()"
+                      @cancel="cancelRemove"
+                    >
+                      <div class="nav"><i class="iconfont icon-duibi"></i>下货纸比对</div>
+                    </a-popconfirm> -->
+                    <a-popconfirm
+                      title="确定删除当前选中订舱？"
+                      ok-text="是"
+                      cancel-text="否"
+                      @confirm="removeMoreFun"
+                      @cancel="cancelRemove">
+                      <div class="nav"><i class="iconfont icon-shanchu2"></i>删除</div>
+                    </a-popconfirm>
+                    <div class="nav"><i class="iconfont icon-shishijifei"></i>定时订舱</div>
+                    <div class="nav" @click="handleRefshYZ">
+                      <a-spin :spinning="refshYZloading"><i class="iconfont icon-shishijifei"></i>刷新运踪</a-spin></div>
+                    <div class="nav"><i class="iconfont icon-xiaopiaodayin"></i>小票状态</div>
+                    <div class="nav" @click="openTraceModel"><i class="iconfont icon-yunshu1"></i>运踪订阅</div>
+                    <div class="nav">
+                      <a-dropdown>
+                        <span> <i
+                          class="iconfont icon-a-wendangcaozuoxiazaishangchuanshanchuxinzengfujianyasuochakan-01"></i>船公司文件
+                        </span>
+                        <a-menu slot="overlay">
+                          <a-menu-item>
+                            <a @click="handleDownByBc(1)" href="javascript:;">BC下载</a>
+                          </a-menu-item>
+                          <a-menu-item>
+                            <a @click="handleDownByBc(2)" href="javascript:;">DRAFT下载</a>
+                          </a-menu-item>
+                          <a-menu-item>
+                            <a @click="handleDownByBc(4)" href="javascript:;">舱位分配查询</a>
+                          </a-menu-item>
+                          <a-menu-item>
+                            <a @click="handleImportBc" href="javascript:;">单票BC引入</a>
+                          </a-menu-item>
+                          <a-menu-item>
+                            <a @click="handleImportBcMore" href="javascript:;">多票BC引入</a>
+                          </a-menu-item>
+                        </a-menu>
+                      </a-dropdown>
+                    </div>
+                  </div>
+                </template>
+                <template #tools>
+                  <div class="right BookTopButton">
+                    <span class="tab-btn" @click="tableRefresh">
+                      <a-icon type="redo" :style="{ fontSize: '14px', transform: 'rotate(278deg)' }" />
+                    </span>
+                    <span class="tab-btn" @click="tableHeaderEdit">
+                      <a-icon type="setting" :style="{ fontSize: '14px' }" />
+                    </span>
+                  </div>
+                </template>
+              </vxe-toolbar>
+              <vxe-grid
+                ref="xGrid"
+                v-bind="gridOptions"
+                row-class-name="line-box"
+                :height="tableHeight"
+                :checkbox_config="{ checkField: 'checked' }"
+                :scroll-x="{ gt: 10, oSize: 10, enabled: false }"
+                :scroll-y="{ gt: 20, oSize: 20, enabled: true }"
+                @page-change="handlePageChange"
+                @cell-dblclick="handledbclick"
+                :sort-config="{ sortMethod: customSortMethod }"
+                @resizable-change="resizableChange"
+                @sort-change="tableSortChange"
+                @scroll="pageClick"
+                @checkbox-change="checkboxChangeEvent">
+                <template #mblno="{ row }">
+                  <div class="mblno">
+                    <span @click="editColumns(row)">{{ row.mblno }}</span>
+                    <a-icon class="CSMblnoCopy" type="copy" @click="FnCopy(row.mblno)" />
+                  </div>
+                </template>
+                <template #pono="{ row }">
+                  <div class="pono">
+                    {{ row.pono }}
+                  </div>
+                </template>
+                <template #IsVGM="{ row }">
+                  <div v-if="row.isVGM" style="text-align: center;">
+                    <a-popover placement="topLeft" >
+                      <div slot="content">{{ row.isVGM }}</div>
+                      <i class="iconfont icon-chenggong flag-icon"></i>
+                    </a-popover>
+                  </div>
+                </template>
+                <template #IsZZFX="{ row }">
+                  <div v-if="row.isZZFX" style="text-align: center;">
+                    <a-popover placement="topLeft" >
+                      <div slot="content">{{ row.isZZFX }}</div>
+                      <i class="iconfont icon-chenggong flag-icon"></i>
+                    </a-popover>
+                  </div>
+                </template>
+                <template #IsCanDan="{ row }">
+                  <div v-if="row.isCanDan" style="text-align: center;">
+                    <a-popover placement="topLeft" >
+                      <div slot="content">{{ row.isCanDan }}</div>
+                      <i class="iconfont icon-chenggong flag-icon"></i>
+                    </a-popover>
+                  </div>
+                </template>
+                <template #bsstatusname="{ row }">
+                  <div :style="{ backgroundColor: row.bsstatusnameColor }"> {{ row.bsstatusname }}</div>
+                  <!-- <div>{{ row.bsstatusname }}</div> -->
+                </template>
+                <template #vessel="{ row }">
+                  <div class="vessel">{{ row.vessel }}</div>
+                </template>
+                <template #remarks="{ row }">
+                  <a-popover title="备注消息">
+                    <template slot="content">
+                      <p>订舱备注： {{ row.soremark }}</p>
+                      <p>截单备注： {{ row.siremark }}</p>
+                    </template>
+                    <div class="remarks">{{ row.soremark }} / {{ row.siremark }}</div>
+                  </a-popover>
+                </template>
+                <template #etd="{ row }">
+                  <div class="etd" v-if="row.etd">{{ row.etd.substring(0, 10) }}</div>
+                </template>
+                <template #ygtETD="{ row }">
+                  <div class="etd" v-if="row.ygtETD">{{ row.ygtETD.substring(0, 10) }}</div>
+                </template>
+                <template #atd="{ row }">
+                  <div class="atd" v-if="row.atd">{{ row.atd.substring(0, 10) }}</div>
+                </template>
+                <template #issuedate="{ row }">
+                  <div class="atd" v-if="row.issuedate">{{ row.issuedate.substring(0, 10) }}</div>
+                </template>
+                <template #closingdate="{ row }">
+                  <div class="closingdate" v-if="row.closingdate">{{ row.closingdate.substring(0, 13) }}</div>
+                </template>
+                <template #operate="{ row }">
+                  <vxe-button class="operate-btn" type="text" icon="vxe-icon-edit" @click="editColumns(row)"></vxe-button>
+                  <a-popconfirm
+                    title="确定删除当前订舱？"
+                    ok-text="是"
+                    cancel-text="否"
+                    @confirm="removeFun(row)"
+                    @cancel="cancelRemove">
+                    <vxe-button class="operate-btn" type="text" icon="vxe-icon-delete"></vxe-button>
+                  </a-popconfirm>
+                </template>
+                <!-- <template #bookstatus="{ row }">
+                <span class="book-btn" v-for="(btn,bindex) in row.bookstatus" :class="btn.staCode" :key="bindex"> {{ enmuBookingBtn(btn.staCode) }}<i>/</i></span>
+              </template> -->
+                <template #bookstatus="{ row, column }">
+                  <div class="billtrace-box" :class="column.resizeWidth > 240 ? 'normal-box' : 'flex-box'">
+                    <div class="billtrace-btn" v-for="(btn, bindex) in row.bookstatus" :class="btn.staCode" :key="bindex">
+                      <a-popover placement="topLeft" v-if="btn.staTime">
+                        <div slot="content">{{ btn.staTime }}</div>
+                        <span :class="{ active: btn.isChecked }">{{ enmuBookingBtn(btn.staCode) }}</span>
+                      </a-popover>
+                      <span :class="{ active: btn.isChecked }" v-else>{{ enmuBookingBtn(btn.staCode) }}</span>
+                      <i class="iconfont icon-xiaoyoujiantou" :class="{ hide: bindex === row.bookstatus.length - 1 }"></i>
+                    </div>
+                  </div>
+                </template>
+                <template #statuslogs="{ row, column }">
+                  <div v-if="row.statuslogs1">
+                    <div
+                      v-if="row.statuslogs1.length > 0">
+                      <div class="billtrace-btn1" >
+                        <a-popover placement="topLeft" >
+                          <div slot="content">
+                            <div>
+                              <span class="txfcSpan" style="width: 120px;">箱号</span>
+                              <span class="txfcSpan">提箱</span>
+                              <span class="txfcSpan">返场</span>
+                            </div>
+                            <div v-for="(item,index) in row.statuslogs1" :key="index">
+                              <span class="txfcSpan" style="width: 120px;">{{ item.cntrno }}</span>
+                              <span class="txfcSpan">{{ item.txopTime }}</span>
+                              <span class="txfcSpan">{{ item.fcopTime }}</span>
+                            </div>
+                          </div>
+                          <div :class="{ active: row.statuslogs1[0].txopTime }">提箱</div>
+                          <div :class="{ active: row.statuslogs1[0].fcopTime }">返场</div>
+                        </a-popover>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+                <template #bookremark="{ row }">
+                  <!-- @mouseover="remarkhover($event, row)" -->
+                  <div class="bookremark" @mouseover="remarkhover($event, row)" @mouseleave="remarkLeave($event, row)">
+                    <span class="reamrk-label">
+                      <template v-for="remark in row.bookremark">
+                        {{ remark.remark }}
+                      </template>
+                    </span>
+                  </div>
+                </template>
+                <template #lstShipOrderCompareRlt="{ row }">
+                  <div class="goods-status">
+                    <a-popover>
+                      <template slot="content">
+                        <p>
+                          比对方式:
+                          <span>{{
+                            row.lstShipOrderCompareMode
+                              ? row.lstShipOrderCompareMode == 'MANUAL'
+                                ? '手动'
+                                : '自动'
+                              : ''
+                          }}</span>
+                        </p>
+                        <p>
+                          比对时间: <span>{{ row.lstShipOrderCompareDate }}</span>
+                        </p>
+                      </template>
+                      <div v-if="row.lstShipOrderCompareRlt">
+                        <div v-if="row.lstShipOrderCompareRlt == 'DIFF'">
+                          <a-icon type="close-circle" :style="{ color: 'red' }" />
+                        </div>
+                        <div v-else-if="row.lstShipOrderCompareRlt == 'NO_DIFF'">
+                          <a-icon type="check-circle" :style="{ color: '#54bc25' }" />
+                        </div>
+                        <!-- <div v-else>
+                        {{ row.lstShipOrderCompareRltName }}
+                      </div> -->
+                      </div>
+                    </a-popover>
+
+                    <a-icon
+                      class="TablelstShipOrderCompareRltRedo"
+                      @click="excuteShippingOrderCompareBatch(row)"
+                      type="redo" />
+                  </div>
+                </template>
+                <template #goodsStatusList="{ row }">
+                  <div class="goods-status">
+                    <div class="goods-status-left">
+                      <template v-for="(status, sindex) in row.goodsStatusList">
+                        <a-popover placement="top" :key="sindex" v-show="status.finishTime || status.remark">
+                          <div slot="content">
+                            <div v-if="status.finishTime">时间：{{ status.finishTime }}</div>
+                            <div v-if="status.remark">备注：{{ status.remark }}</div>
+                            <div v-if="status.extData">显示天数：{{ status.extData }}</div>
+                          </div>
+                          <span class="goods-tip">{{ status.statusName }}</span>
+                        </a-popover>
+                      </template>
+                    </div>
+                    <!-- @mouseover="goodStatusHover($event, row)" @mouseleave="goodStatusLeave($event, row)" -->
+                    <div class="goods-status-right" @click.stop="goodStatusclick($event, row)" v-if="row.hasGoods > 0">
+                      <i class="iconfont icon-zhankai2"></i>
+                    </div>
+                  </div>
+                </template>
+
+                <template #dzRemark="{ row }">
+                  <div v-if="row.dzRemark">
+                    <a-popover placement="topLeft" :content="row.dzRemark">
+                      <span class="dzRemark">{{ row.dzRemark }}</span>
+                    </a-popover>
+                  </div>
+                </template>
+
+                <template #czRemark="{ row }">
+                  <div v-if="row.czRemark">
+                    <a-popover placement="topLeft" :content="row.czRemark">
+                      <span class="czRemark">{{ row.czRemark }}</span>
+                    </a-popover>
+                  </div>
+                </template>
+
+                <template #empty>
+                  <span class="no-data">
+                    <i class="iconfont icon-queshengye_zanwushuju"></i>
+                    <p>没有更多数据了！</p>
+                  </span>
+                </template>
+              </vxe-grid>
+            </div>
+          </x-card>
+        </a-col>
+      </a-row>
+      <a-modal
+        :title="TaskShippingOrderCompareData.isExistsDiff ? '下货纸比对（有差异）' : '下货纸比对（正常）'"
+        @cancel="TaskShippingOrderCompareHandleCancel"
+        :visible="TaskShippingOrderCompareVisible"
+        width="40%">
+        <template slot="footer">
+          <a-button key="back" @click="TaskShippingOrderCompareHandleCancel"> 关闭 </a-button>
+        </template>
+        <p class="TaskShippingOrderCompareP">
+          {{ TaskShippingOrderCompareData.compareTime }}
+          <span v-if="TaskShippingOrderCompareData.isExistsDiff">
+            比对异常 合计
+            <span class="TaskShippingOrderCompareSpan">{{ TaskShippingOrderCompareData.total }}</span>
+            条
+          </span>
+        </p>
+        <div class="TaskShippingOrderCompareMainBox">
+          <div class="TaskShippingOrderCompareMain">
+            <div class="TaskShippingOrderCompareMainHeader">
+              <div>
+                <p>提单号：（本地数据）</p>
+                <p>--------------------------</p>
+                <p>{{ TaskShippingOrderCompareData.mBlNo }}</p>
+              </div>
+              <div></div>
+              <div>
+                <p>提单号：（场站数据）</p>
+                <p>--------------------------</p>
+                <p>{{ TaskShippingOrderCompareData.mBlNo }}</p>
+              </div>
+            </div>
+            <div
+              class="TaskShippingOrderCompareMainList"
+              v-for="(item, index) in TaskShippingOrderCompareData.showDetailList"
+              :key="index"
+              v-show="item.pCode != 'ContaList'">
+              <p>{{ item.fieldName }}:</p>
+              <p>{{ item.reqVal }}</p>
+              <p v-if="item.msg">
+                <a-icon type="close" :style="{ color: 'red' }" />
+              </p>
+              <p v-else><a-icon type="check" :style="{ color: 'green' }" /></p>
+              <p>{{ item.fieldName }}:</p>
+              <p v-if="!item.isDiff">{{ item.targetVal }}</p>
+              <p v-else v-html="item.mergeHtml"></p>
+            </div>
+          </div>
+          <div class="TaskShippingOrderCompareMain">
+            <div class="TaskShippingOrderCompareMainHeader Box">
+              <div>
+                <p>箱信息：（本地数据）</p>
+              </div>
+              <div></div>
+              <div>
+                <p>箱信息：（场站数据）</p>
+              </div>
+            </div>
+            <div
+              v-for="(item, index) in TaskShippingOrderCompareData.showDetailList"
+              :key="index"
+              v-show="item.pCode == 'ContaList'"
+              :class="item.fieldName == '箱号' ? 'TaskShippingOrderCompareMainList BoxNo' : 'TaskShippingOrderCompareMainList'
+              ">
+              <p>{{ item.fieldName }}:</p>
+              <p>{{ item.reqVal }}</p>
+              <p v-if="item.msg">
+                <a-icon type="close" :style="{ color: 'red' }" />
+              </p>
+              <p v-else><a-icon type="check" :style="{ color: 'green' }" /></p>
+              <p>{{ item.fieldName }}:</p>
+              <p v-if="!item.isDiff">{{ item.targetVal }}</p>
+              <p v-else v-html="item.mergeHtml"></p>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+      <a-modal :maskClosable="false" :width="1700" :visible="addVisible" @ok="addSubmit" @cancel="addCancel">
+        <a-radio-group class="group-label-box" v-model="carrierRadio">
+          <p v-if="RecentlyCarrierData.length" class="Awrapper">最近使用 <span class="line"></span></p>
+          <div class="group-label" v-if="RecentlyCarrierData.length">
+            <a-radio :style="radioStyle" :value="item.code" v-for="item in RecentlyCarrierData" :key="item.code">
+              <img class="radio-logo" :src="item.ImgSrc" />
+              <!-- {{ item.code }} -->
+              {{ item.cnName }}
+            </a-radio>
+          </div>
+
+          <div v-for="e in Object.keys(RcarrierData)" :key="e">
+            <p class="Awrapper">{{ e }}<span class="line"></span></p>
+            <div class="group-label">
+              <a-radio :style="radioStyle" :value="item.code" v-for="item in RcarrierData[e]" :key="item.code">
+                <img class="radio-logo" :src="item.ImgSrc" />
+                {{ item.cnName }}
+              </a-radio>
+            </div>
+          </div>
+        </a-radio-group>
+      </a-modal>
+
+      <a-modal
+        title="多提单号查询"
+        :maskClosable="false"
+        :width="400"
+        :visible="moreNumVisible"
+        @ok="moreNumSubmit"
+        @cancel="moreNumCancel">
+        <div>
+          <a-textarea v-model="moreNumVal" style="height: 200px" />
+        </div>
+      </a-modal>
+
+      <setFormModel
+        ref="setForm"
+        :formData="formData"
+        :formAllData="formMoreData"
+        type="from"
+        @ok="submitForm"
+        v-if="formMoreData"></setFormModel>
+
+      <setFormModel
+        ref="setTableForm"
+        :formData="formTableData"
+        :formAllData="formMoreTableData"
+        :sortLabelList="sortLabelList"
+        :firstSort="{ 'label': tableOrderLabel, 'type': tableOrderType }"
+        :maxNum="30"
+        type="table"
+        @ok="submitTableForm"
+        @sortList="submitSort"
+        v-if="formMoreTableData"></setFormModel>
+
+      <importBc :form="bcObj" @handleClose="bcClose" ref="importBc" @handleSuccess="handleSuccess"></importBc>
+
+      <importBcMore ref="importBcMore"></importBcMore>
+
+      <div class="hovers-list" :style="{ top: `${remarkScreenY}px`, left: `${remarkScreenX}px` }" v-if="remarkShow">
+        <div class="title">备注内容：</div>
+        <div class="list" v-for="(remarkItem, rindex) in remarkData" :key="rindex">
+          <i class="iconfont icon-yuandian icon"></i> {{ remarkItem.remark }}
+        </div>
+      </div>
+
+      <!-- v-show="goodStatusShow" -->
+      <div
+        class="goods-hovers-list"
+        :class="[
+          { 'hide-goods-hover': !goodStatusShow },
+          { 'seat-top': goodStatusSeat === 'top' },
+          { 'seat-bottom': goodStatusSeat === 'bottom' }
+        ]"
+        :style="{ top: `${goodStatusScreenY}px`, left: `${goodStatusScreenX}px` }">
+        <div class="title">货运动态</div>
+        <template v-for="(goodStatusItem, gindex) in goodStatusData">
+          <template v-if="goodStatusItem.finishTime || goodStatusItem.remark">
+            <a-popover placement="top" :key="gindex">
+              <div slot="content">
+                <div v-if="goodStatusItem.finishTime">时间：{{ goodStatusItem.finishTime }}</div>
+                <div v-if="goodStatusItem.remark">备注：{{ goodStatusItem.remark }}</div>
+                <div v-if="goodStatusItem.extData">显示天数：{{ goodStatusItem.extData }}</div>
+              </div>
+              <div class="goods-btn" :class="{ active: goodStatusItem.finishTime || goodStatusItem.remark }">
+                {{ goodStatusItem.statusName }}
+              </div>
+            </a-popover>
+          </template>
+          <template v-else>
+            <div class="goods-btn" :key="gindex" :class="{ active: goodStatusItem.finishTime || goodStatusItem.remark }">
+              {{ goodStatusItem.statusName }}
+            </div>
+          </template>
+        </template>
+      </div>
+      <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>
+      <a-modal
+        width="820px"
+        :maskClosable="false"
+        v-model="editingModalVisible"
+        title="批量编辑"
+        @ok="editingHandleOk"
+        @cancel="editingHandleCancel">
+        <div class="trace-box">
+          <a-form :form="editingForm">
+            <a-row :gutter="26">
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="船名"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-select
+                    placeholder="请选择船名"
+                    v-decorator="['vessel', { rules: [{ required: true, message: '请选择船名！' }] }]"
+                    show-search
+                    @focus="vesselSearch"
+                    @search="vesselSearch"
+                    @blur="vesselBlur"
+                    :default-active-first-option="false"
+                    :show-arrow="false"
+                    :filter-option="false"
+                    :not-found-content="null">
+                    <a-select-option v-for="item in vesselData" :key="item.name" :value="item.name">
+                      {{ item.name }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="开船日期"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-date-picker
+                    v-decorator="['etd', { rules: [{ required: true, message: '请选择开船日期！' }] }]"
+                    :style="{ width: '100%' }"
+                    placeholder="请选择开船日期"
+                    valueFormat="YYYY-MM-DD" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="内部航次"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-input v-decorator="['voynoinner']" />
+                </a-form-item>
+              </a-col>
+
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="海关航次"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-input v-decorator="['voyno']" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="卸货港"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-select
+                    placeholder="请选择卸货港"
+                    v-decorator="['portDischarge']"
+                    show-search
+                    @focus="portDischargeSearch"
+                    @search="portDischargeSearch"
+                    @change="portDischargeChange"
+                    :default-active-first-option="false"
+                    :show-arrow="false"
+                    :filter-option="false"
+                    :not-found-content="null">
+                    <a-select-option v-for="item in portDischargeData" :key="item.code" :value="item.enName">
+                      {{ item.enName }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="卸货代码"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-input v-decorator="['portDischargeId']" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="目的港"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-select
+                    placeholder="请选择目的港"
+                    v-decorator="['destination']"
+                    show-search
+                    @focus="destinationSearch"
+                    @search="destinationSearch"
+                    @change="destinationChange"
+                    :default-active-first-option="false"
+                    :show-arrow="false"
+                    :filter-option="false"
+                    :not-found-content="null">
+                    <a-select-option v-for="item in destinationData" :key="item.code" :value="item.enName">
+                      {{ item.enName }}
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="目的代码"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-input v-decorator="['destinationid']" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="截港时间"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-date-picker
+                    show-time
+                    v-decorator="['closingdate']"
+                    :style="{ width: '100%' }"
+                    placeholder="请选择截港时间"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    format="YYYY-MM-DD HH" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12" class="book-model-box">
+                <a-form-item
+                  label="截单时间"
+                  :labelCol="{ xs: { span: 24 }, sm: { span: 5 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 18 } }"
+                  has-feedback>
+                  <a-date-picker
+                    show-time
+                    v-decorator="['closedocdate']"
+                    :style="{ width: '100%' }"
+                    placeholder="请选择截单时间"
+                    valueFormat="YYYY-MM-DD HH:mm:ss"
+                    format="YYYY-MM-DD HH" />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+      </a-modal>
+      <a-modal title="提示信息" :visible="bcFileFlag" :footer="null" @cancel="bcFileFlag = false">
+        <div class="bcfile-title">
+          <div><a-icon style="margin-right: 10px;" @click="handleCopy" type="copy" />时间{{ bcFile.executeTime }}</div>
+          <span> {{ bcFile.batchTotal }}</span>
+        </div>
+        <div ref="bcBox" class="bc-box" v-if="bcFile.ext && bcFile.ext.length > 0">
+          <div class="bc-item" v-for="(item, index) in bcFile.ext" :key="index">
+            <span>{{ item.bno }}</span>
+            <span> {{ item.msg }}</span>
+          </div>
+        </div>
+        <div v-else>{{ bcFile.msg }}</div>
+      </a-modal>
+      <a-modal title="输入复制数量" :visible="copyMoreFlag" :footer="null" @cancel="copyMoreFlag = false">
+        <a-form :form="copyMoreForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmitCopyMore">
+          <a-form-item label="数量">
+            <a-input-number
+              :min="1"
+              :max="10"
+              v-decorator="['number', { rules: [{ required: true, message: '请输入数量' }] }]" />
+          </a-form-item>
+          <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
+            <a-button type="primary" html-type="submit">确定</a-button>
+          </a-form-item>
+        </a-form>
+      </a-modal>
+    </a-spin>
+  </div>
+</template>
+<script>
+import { XCard, setFormModel } from '@/components'
+import columnSetting from '@/components/tableColumnSetting'
+import formLabel from './modules/formLabel'
+import importBc from './modules/importBc'
+import importBcMore from './modules/importBcMore'
+import {
+  PageDataByBooking,
+  SendTrace,
+  GetVessellist,
+  GetPortlist,
+  GetPortloadlist,
+  BookingOrderBachUpdate,
+  GetCarrierlist,
+  DjyCustomerSuggest,
+  GetYardlist,
+  GetSysUserPage,
+  DjyCustomerpage,
+  GetCtn,
+  GetPackage,
+  Codeissuetypelist,
+  GetFrt,
+  GetService,
+  GetForwarderlist,
+  DjyUserConfigMulti,
+  DeleteBookingOrder,
+  ExcuteShippingOrderCompareBatch,
+  GetTenantLineList,
+  downloadBookingConfirm,
+  downloadDraft,
+  checkUpdateManifestNo,
+  singleBCFileRead,
+  GetToDoBCList,
+  RefreshBillTrace
+} from '@/api/modular/main/BookingLedger'
+
+import initData from './modules/initData'
+import { DjyUserConfigGet, DjyUserConfigAdd } from '@/api/modular/main/DjyUserConfig'
+import { mapGetters, mapActions } from 'vuex'
+const formInitData = [
+  { title: '主提单号', align: 'center', width: '90', label: 'MBLNO', type: 'input' },
+  { title: '分提单号', align: 'center', width: '90', label: 'HBLNO', type: 'input' },
+  { title: '订舱编号', align: 'center', width: '90', label: 'CUSTNO', type: 'input' },
+  { title: '开船日期', align: 'center', width: 160, label: 'ETD', type: 'dateRange', resLabel: ['BETD', 'EETD'] },
+  { title: '实际开船日期', align: 'center', width: 160, label: 'ATD', type: 'dateRange', resLabel: ['BATD', 'EATD'] },
+  { title: '船名', align: 'center', width: '90', label: 'VESSEL', type: 'input' }
+]
+export default {
+  name: 'BookingLedger',
+  inject: ['reload'],
+  components: {
+    XCard,
+    columnSetting,
+    setFormModel,
+    formLabel,
+    importBc,
+    importBcMore
+  },
+  data() {
+    return {
+      spinning: false,
+      isUpload: false,
+      refshYZloading: false,
+      copyMoreForm: this.$form.createForm(this, { number: '' }),
+      copyMoreFlag: false,
+      percent: 0,
+      TaskShippingOrderCompareVisible: false,
+      TaskShippingOrderCompareData: {
+        showDetailList: ''
+      },
+      ResetType: true,
+      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
+      advanced: false,
+      formData: formInitData,
+      formRes: {},
+      searchData: { multisort: [] },
+      formAllData: null,
+      formMoreData: null,
+      formBtnCol: 8,
+      formBtnLoading: false,
+      setVisible: false,
+      showColumns: null,
+      importBcData: {},
+      gridOptions: {
+        border: false,
+        resizable: true,
+        showOverflow: true,
+        loading: true,
+        stripe: true,
+        round: true,
+        autoResize: true,
+        align: 'left',
+        scrollY: { enabled: true },
+        columnConfig: { resizable: true },
+        importConfig: {},
+        exportConfig: {},
+        pagerConfig: {
+          total: 0,
+          currentPage: 1,
+          pageSize: 20,
+          pageSizes: [10, 20, 50, 100, 200, 500]
+        },
+        columns: JSON.parse(JSON.stringify(initData.columns)),
+        data: []
+        // treeConfig: {
+        //   transform: true,
+        //   rowField: 'index',
+        //   parentField: 'parentId',
+        // },
+      },
+      formTableData: JSON.parse(JSON.stringify(initData.columns)),
+      fromTableAllData: null,
+      formMoreTableData: null,
+      addVisible: false,
+      carrierRadio: 'CMA',
+      radioStyle: {
+        display: 'block',
+        height: '50px',
+        lineHeight: '50px'
+      },
+      moreNumVisible: false,
+      moreNumVal: '',
+      tableOrderLabel: '',
+      tableOrderType: '',
+      screenWidth: document.body.clientWidth,
+      remarkShow: false,
+      remarkScreenX: 0,
+      remarkScreenY: 0,
+      remarkData: null,
+      traceModalVisible: false,
+      editingModalVisible: false,
+      traceOptions: [
+        { label: '起运港', value: '1' },
+        { label: '目的港', value: '2' }
+      ],
+      traceValue: [],
+      addNum: 0,
+      tableHeight: 0,
+      goodStatusShow: false,
+      goodStatusScreenX: 0,
+      goodStatusScreenY: 0,
+      goodStatusData: null,
+      goodStatusSeat: 'bottom',
+      editingForm: this.$form.createForm(this),
+      vesselData: [],
+      WebVessel: '',
+      portDischargeData: [],
+      destinationData: [],
+      RcarrierData: [],
+      RecentlyCarrierData: [],
+      sortLabelList: [],
+      bcFile: { ext: [] },
+      bcFileFlag: false,
+      bcObj: {}
+    }
+  },
+  computed: {
+    ...mapGetters(['bookingList', 'bookingGridOptions'])
+  },
+  beforeRouteLeave(to, from, next) {
+    // const copyArr = JSON.parse(JSON.stringify(this.gridOptions.data))
+    // const first = copyArr.splice(0, 20)
+    this.setBookingGridOptions(this.gridOptions)
+    // this.gridOptions = {
+    //   border: false,
+    //   resizable: true,
+    //   showOverflow: true,
+    //   loading: false,
+    //   stripe: true,
+    //   round: true,
+    //   autoResize: true,
+    //   align: 'left',
+    //   columnConfig: { resizable: true },
+    //   importConfig: {},
+    //   exportConfig: {},
+    //   pagerConfig: {
+    //     total: 0,
+    //     currentPage: 1,
+    //     pageSize: 10,
+    //     pageSizes: [10, 20, 50, 100, 200, 500]
+    //   },
+    //   columns: this.gridOptions.columns,
+    //   data: first
+    // }
+    next()
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      vm.upDate()
+    })
+  },
+  created() {
+    this.createdInit()
+  },
+  mounted() {
+    this.onresize()
+  },
+  methods: {
+    ...mapActions(['setBookingList', 'setBookingGridOptions']),
+    createdInit() {
+      this.showColumns = JSON.parse(JSON.stringify(initData.columns))
+      this.formAllData = JSON.parse(JSON.stringify(initData.condAllData))
+      this.fromTableAllData = JSON.parse(JSON.stringify(initData.columnsAllData))
+      this.tableHeight = document.body.clientHeight - 230
+      this.getConfigUser(true)
+      this.getCarrier()
+    },
+    bcClose() {
+      this.bcObj = {}
+    },
+    handleSubmitCopyMore(e) {
+      e.preventDefault();
+      this.copyMoreForm.validateFields((err, values) => {
+        if (!err) {
+          const select = this.$refs.xGrid.getCheckboxRecords()
+          const pkIdArr = select.map((item, index) => {
+            return item.id
+          })
+          this.$store.commit('SET_COPYPAGES', { number: values.number, path: pkIdArr[0] })
+          this.copyMoreFlag = false
+        }
+      });
+    },
+    handleSuccess(file) {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      console.log(pkIdArr)
+      const formData = new FormData()
+      formData.append('file', file)
+      formData.append('bookingOrderId', pkIdArr[0])
+      singleBCFileRead(formData).then((res) => {
+        if (res.data.succ) {
+          this.bcObj = res.data.ext
+          this.$message.success('上传成功')
+          this.$refs.importBc.loading = false
+        } else {
+          this.$message.error(res.data.msg)
+          this.$refs.importBc.loading = false
+        }
+      }).catch((res) => {
+        this.$message.error('上传失败')
+        this.$refs.importBc.loading = false
+      })
+    },
+    handleImportBc() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      if (pkIdArr.length === 0) {
+        this.$message.error('请选择一条数据')
+        return false
+      } else {
+        if (pkIdArr.length > 1) {
+          this.$message.error('只能选择一条数据')
+          return false
+        } else {
+          this.bcObj = {}
+          this.$refs.importBc.open()
+        }
+      }
+    },
+    handleImportBcMore() {
+      this.$refs.importBcMore.open()
+    },
+    onresize() {
+      window.onresize = () => {
+        this.screenWidth = document.body.clientWidth
+      }
+    },
+    upDate() {
+      if (Object.keys(this.gridOptions).length > 0) {
+        if (Object.keys(this.bookingGridOptions).length === 0) {
+          return false
+        }
+        const newData = JSON.parse(JSON.stringify(this.bookingGridOptions))
+        if (newData && newData.data.length > this.gridOptions.data.length) {
+          console.log('这里插入最新舱单', newData.data.length, this.gridOptions.data.length)
+        }
+      }
+    },
+    upDate1() {
+      if (Object.keys(this.gridOptions).length > 0) {
+        if (Object.keys(this.bookingGridOptions).length === 0) {
+          return false
+        }
+        const newData = JSON.parse(JSON.stringify(this.bookingGridOptions))
+        if (this.bookingGridOptions.data && this.bookingGridOptions.data.length > 0) {
+          setTimeout(() => {
+            const copyArr = JSON.parse(JSON.stringify(this.bookingGridOptions.data))
+            const first = copyArr.splice(0, 20)
+            const more = this.bookingGridOptions.data.splice(20, this.bookingGridOptions.data.length)
+            newData.data = first
+            this.gridOptions = { ...this.gridOptions, ...newData }
+            setTimeout(() => {
+              this.gridOptions.data = [...this.gridOptions.data, ...more]
+              console.log(this.gridOptions.data.length)
+            }, 600)
+          }, 10)
+        }
+        // if (this.bookingGridOptions.data && this.bookingGridOptions.data.length > 0) {
+        //   console.log(this.gridOptions.loading)
+        //   const copyArr = JSON.parse(JSON.stringify(this.bookingGridOptions.data))
+        //   console.log('== 获取到了历史数据 ==', copyArr)
+        //   newData.data = copyArr
+        //   setTimeout(() => {
+        //     this.gridOptions = { ...this.gridOptions, ...newData }
+        //   }, 200)
+        // }
+      }
+    },
+    handleDownByBc(type) {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      if (pkIdArr.length === 0) {
+        this.$message.error('请至少选择一条数据')
+        return false
+      } else {
+        this.spinning = true
+        if (type === 1) {
+          downloadBookingConfirm(pkIdArr)
+            .then((res) => {
+              if (res.success) {
+                this.spinning = false
+                this.bcFileFlag = true
+                this.bcFile = res.data
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        }
+        if (type === 2) {
+          downloadDraft(pkIdArr)
+            .then((res) => {
+              if (res.success) {
+                this.spinning = false
+                this.bcFileFlag = true
+                this.bcFile = res.data
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        }
+        if (type === 4) {
+          checkUpdateManifestNo(pkIdArr)
+            .then((res) => {
+              if (res.success) {
+                this.spinning = false
+                this.bcFileFlag = true
+                this.bcFile = res.data
+              } else {
+                this.$message.error(res.message)
+              }
+            })
+            .catch((err) => {
+              console.log(err)
+            })
+        }
+      }
+    },
+    // 批量编辑
+    editingHandleOk() {
+      const {
+        editingForm: { validateFields }
+      } = this
+      validateFields((errors, values) => {
+        if (!errors) {
+          values.id = []
+          const select = this.$refs.xGrid.getCheckboxRecords()
+          select.forEach((item) => {
+            values.id.push(item.id)
+          })
+          BookingOrderBachUpdate(values).then((res) => {
+            if (res.success) {
+              this.$message.success('编辑成功')
+              this.editingHandleCancel()
+            } else {
+              this.$message.error(`编辑失败,${res.message}`)
+            }
+          })
+        } else {
+          // this.editingModalVisible = false
+        }
+      })
+    },
+    editingHandleCancel() {
+      this.editingForm.resetFields()
+      this.editingModalVisible = false
+    },
+    TaskShippingOrderCompareHandleCancel() {
+      this.TaskShippingOrderCompareVisible = false
+    },
+    vesselSearch(data) {
+      if (data) {
+        this.WebVessel = data
+      } else if (data === undefined) {
+        this.WebVessel = data
+      }
+
+      GetVessellist({ KeyWord: data }).then((res) => {
+        this.vesselData = res.data
+      })
+    },
+    vesselBlur() {
+      if (this.WebVessel !== undefined) {
+        setTimeout(() => {
+          this.editingForm.setFieldsValue({
+            ...this.editingForm.getFieldsValue(),
+            vessel: this.WebVessel
+          })
+        }, 100)
+      }
+    },
+    portDischargeSearch(data) {
+      GetPortlist({ KeyWord: data }).then((res) => {
+        this.portDischargeData = res.data
+      })
+    },
+    portDischargeChange(value) {
+      this.portDischargeData.forEach((item) => {
+        if (item.enName == value) {
+          setTimeout(() => {
+            this.editingForm.setFieldsValue({
+              ...this.editingForm.getFieldsValue(),
+              portDischargeId: item.ediCode
+            })
+          }, 100)
+        }
+      })
+    },
+    destinationSearch(data) {
+      GetPortlist({ KeyWord: data }).then((res) => {
+        this.destinationData = res.data
+      })
+    },
+    destinationChange(value) {
+      this.destinationData.forEach((item) => {
+        if (item.enName == value) {
+          setTimeout(() => {
+            this.editingForm.setFieldsValue({
+              ...this.editingForm.getFieldsValue(),
+              destinationid: item.ediCode
+            })
+          }, 100)
+        }
+      })
+    },
+    FnCopy(data) {
+      const el = document.createElement('input')
+      el.setAttribute('value', data)
+      document.body.appendChild(el)
+      el.select()
+      document.execCommand('copy')
+      document.body.removeChild(el)
+      this.$message.success('复制成功!')
+    },
+    init(queryParam = {}) {
+      this.gridOptions.pagerConfig = {
+        total: 0,
+        currentPage: 1,
+        pageSize: this.gridOptions.pagerConfig.pageSize,
+        pageSizes: [10, 20, 50, 100, 200, 500]
+      }
+      this.gridOptions.data = []
+      this.getList(queryParam)
+    },
+    getConfigUser(isInit = false) {
+      const query = {
+        typeArr: ['booking_list_cond', 'booking_list_column', 'booking_list_page', 'booking_sort']
+      }
+      DjyUserConfigMulti(this.$qs.stringify(query, { arrayFormat: 'repeat' })).then((res) => {
+        const $data = {}
+        res.data.map((item, index) => {
+          switch (item.type) {
+            case 'booking_list_cond':
+              this.$set($data, 'booking_list_cond', item)
+              // this.setFormData(item, false, true)
+              break
+            case 'booking_list_column':
+              this.$set($data, 'booking_list_column', item)
+              // this.setTableList(item)
+              break
+            case 'booking_sort':
+              this.setSort(item)
+              break
+            case 'booking_list_page':
+              this.setPageSize(item)
+              break
+          }
+        })
+
+        if (Object.keys($data).includes('booking_list_cond')) {
+          this.setFormData($data.booking_list_cond, false, true)
+        } else {
+          this.setFormData({}, false, true)
+        }
+        if (Object.keys($data).includes('booking_list_column')) {
+          this.setTableList($data.booking_list_column)
+        } else {
+          this.setTableList({})
+        }
+      })
+    },
+    handleRefshYZ() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const arr = []
+      select.forEach((item) => {
+        arr.push(item.id)
+      })
+      if (arr.length === 0) {
+        this.$message.warning('请先选择')
+        return false
+      } else {
+        const data = {
+          ids: arr.join(',')
+        }
+        this.refshYZloading = true
+        RefreshBillTrace(data).then(res => {
+          if (res.success) {
+            this.refshYZloading = false
+            this.$message.success('操作成功')
+          } else {
+            this.refshYZloading = false
+            this.$message.error(res.message)
+          }
+        })
+      }
+    },
+    setSort(item) {
+      if (Array.isArray(JSON.parse(item.configJson))) {
+        this.sortLabelList = JSON.parse(item.configJson)
+        if (this.sortLabelList.length > 0) {
+          const key = JSON.parse(item.configJson)[0].sortField
+          const sort = JSON.parse(item.configJson)[0].descSort
+          this.tableOrderLabel = key || ''
+          this.tableOrderType = sort ? 'desc' : 'asc'
+          this.$refs.xGrid.sort(key, sort)
+        } else {
+          this.tableOrderLabel = ''
+          this.tableOrderType = ''
+          this.$refs.xGrid.clearSort()
+        }
+      } else {
+        this.sortLabelList = []
+        const key = JSON.parse(item.configJson).key
+        const sort = JSON.parse(item.configJson).sort ? 'desc' : 'asc'
+        this.tableOrderLabel = key || ''
+        this.tableOrderType = sort ? 'desc' : 'asc'
+        this.$refs.xGrid.sort(key, sort)
+      }
+    },
+    // 船公司 - start
+    getCarrier() {
+      const Rdata = (data) => {
+        const RData = {}
+        for (var i = 0; i < 26; i++) {
+          RData[String.fromCharCode(65 + i)] = []
+          data.forEach((item) => {
+            if (String.fromCharCode(65 + i) == item.enName[0].toUpperCase()) {
+              RData[String.fromCharCode(65 + i)].push(item)
+            }
+          })
+        }
+        const Obj = {
+          'A-D': ['A', 'B', 'C', 'D'],
+          'E-L': ['E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'],
+          'M-R': ['M', 'N', 'O', 'P', 'Q', 'R'],
+          'S-U': ['S', 'T', 'U'],
+          'V-Z': ['V', 'W', 'X', 'Y', 'Z']
+        }
+        const Data = {
+          'A-D': [],
+          'E-L': [],
+          'M-R': [],
+          'S-U': [],
+          'V-Z': []
+        }
+        Object.keys(Obj).forEach((e) => {
+          Obj[e].forEach((item) => {
+            RData[item].forEach((Ai, AiIndex) => {
+              let imgSrc = ''
+              try {
+                imgSrc = require(`@/assets/logo/${Ai.code}.png`)
+              } catch (error) {
+                imgSrc = require('@/assets/logo/default.png')
+              }
+              RData[item][AiIndex].ImgSrc = imgSrc
+            })
+            Data[e].push(...RData[item])
+          })
+        })
+        this.RcarrierData = Data
+      }
+      GetCarrierlist()
+        .then((res) => {
+          if (res.code === 200) {
+            Rdata(res.data)
+            DjyUserConfigGet({ type: 'booking_memory' })
+              .then((e) => {
+                if (e.data) {
+                  const data = []
+                  JSON.parse(e.data.configJson).forEach((item) => {
+                    res.data.forEach((item2) => {
+                      if (item == item2.code) {
+                        data.push(item2)
+                      }
+                    })
+                  })
+                  this.RecentlyCarrierData = data
+                }
+              })
+              .catch(() => {
+                Rdata(res.data)
+              })
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    setFormData(data, isReset = false, isInit = false) {
+      if (Object.keys(data).length > 0 && JSON.parse(data.configJson).length) {
+        const arr = JSON.parse(data.configJson)
+        const nowData = []
+        const moreData = []
+        arr.map((item, index) => {
+          this.formAllData.map((fitem, findex) => {
+            if (fitem.label === item) {
+              nowData.push(fitem)
+            }
+          })
+        })
+        this.formAllData.map((item, index) => {
+          if (!arr.includes(item.label)) {
+            moreData.push(item)
+          }
+        })
+        this.formData = nowData
+        this.formMoreData = moreData
+      } else {
+        const nowData = this.formData.map((item, index) => {
+          return item.label
+        })
+        const moreData = []
+        this.formAllData.map((item, index) => {
+          if (!nowData.includes(item.label)) {
+            moreData.push(item)
+          }
+        })
+        this.formMoreData = moreData
+      }
+      this.formData.map((item, index) => {
+        this.$set(this.formRes, item.label, this.formRes[item.label] || '')
+        // select 船公司 等获取下拉列表
+        if (item.type === 'select') {
+          if (['NOBILL', 'CARGOID'].includes(item.label)) {
+            item.dataList = item.data
+            setTimeout(() => {
+              this.$refs[`fromlabel-${item.label}`][0].$data.dataList = item.data
+            }, 300)
+          }
+        }
+      })
+      // if (!isReset && !isInit) {
+      //   this.getList(this.formRes)
+      // }
+      if (!isReset) {
+        this.getList(this.formRes)
+      }
+      const len = this.formData.length % 4
+      if (this.formData.length === 4 || this.formData.length > 4) {
+        this.formBtnCol = 8
+      } else {
+        this.formBtnCol = 24 - len * 4
+      }
+      this.$forceUpdate()
+    },
+    customSortMethod() { },
+    setTableList(data) {
+      if (Object.keys(data).length > 0 && JSON.parse(data.configJson).length) {
+        this.formTableData = JSON.parse(data.configJson)
+        this.formTableData.forEach(item => {
+          if (!item.slots && item.field === 'bsstatusname') {
+            item.slots = { 'default': 'bsstatusname' }
+          }
+        })
+        console.log(this.formTableData, 123123)
+        const nowTableArr = this.formTableData.map((item, index) => {
+          if (item.field === 'operate') {
+            item.width = 110
+          }
+          return item.field
+        })
+        this.gridOptions.columns = JSON.parse(JSON.stringify(this.formTableData))
+        const moreTableArr = []
+        this.fromTableAllData.map((item, index) => {
+          if (!nowTableArr.includes(item.field)) {
+            moreTableArr.push(item)
+          }
+        })
+        this.formMoreTableData = moreTableArr
+        this.$forceUpdate()
+      } else {
+        const nowTableArr = this.formTableData.map((item, index) => {
+          return item.field
+        })
+        const moreTableArr = []
+        this.fromTableAllData.map((item, index) => {
+          if (!nowTableArr.includes(item.field)) {
+            moreTableArr.push(item)
+          }
+        })
+        this.formMoreTableData = moreTableArr
+        this.$forceUpdate()
+      }
+    },
+    setPageSize(data) {
+      if (data && JSON.parse(data.configJson)) {
+        this.gridOptions.pagerConfig.pageSize = JSON.parse(data.configJson).pageSize
+        // this.getList({}, true, 'add')
+        this.$forceUpdate()
+      } else {
+        this.getList({}, true)
+      }
+    },
+
+    getFormData(isReset = false) {
+      DjyUserConfigGet({ type: 'booking_list_cond' }).then((res) => {
+        this.setFormData(res.data)
+      })
+    },
+    emnuSelectApi(type) {
+      switch (type) {
+        case 'CARRIER':
+          return GetCarrierlist
+        case 'YARDID':
+          return GetYardlist
+        case 'CNTRTOTAL':
+          return GetCtn
+        case 'KINDPKGS':
+          return GetPackage
+        case 'ISSUETYPE':
+          return Codeissuetypelist
+        case 'lineName':
+          return GetTenantLineList
+      }
+    },
+    getFromSelectData(func, ...args) {
+      return new Promise((resolve, reject) => {
+        func(...args).then((res) => {
+          if (res.code === 200) {
+            resolve(res.data)
+          } else {
+            reject(res)
+          }
+        })
+      })
+    },
+    handlePageChange({ currentPage, pageSize }) {
+      if (this.gridOptions.pagerConfig.pageSize !== pageSize) {
+        this.editPageSizeSave(pageSize)
+      }
+      this.gridOptions.pagerConfig.currentPage = currentPage
+      this.gridOptions.pagerConfig.pageSize = pageSize
+      this.getList(this.searchData)
+    },
+
+    editPageSizeSave(pageSize = 10) {
+      const data = {
+        pageSize: pageSize
+      }
+      DjyUserConfigAdd({
+        type: 'booking_list_page',
+        configJson: JSON.stringify(data)
+      }).then((res) => {
+        console.log('页码设置成功')
+      })
+    },
+
+    toggleAdvanced() {
+      this.advanced = !this.advanced
+      this.$forceUpdate()
+      const start = new Date().getTime()
+      console.log('== 点击展开 ==', start)
+      if (!this.advanced) {
+        const len = this.formData.length % 4
+        if (this.formData.length === 4 || this.formData.length > 4) {
+          this.formBtnCol = 8
+        } else {
+          this.formBtnCol = 24 - len * 4
+        }
+      } else {
+        const len = this.formData.length % 6
+        // this.formBtnCol = 24 - len * 4
+        this.formBtnCol = 24 - len * 4 === 4 ? 24 : 24 - len * 4
+      }
+      console.log('== 展开结束 ==', new Date().getTime() - start)
+    },
+    tableRefresh() {
+      const data = { ...this.formRes }
+      data.multisort = this.searchData.multisort
+      this.searchData = JSON.parse(JSON.stringify(data))
+      this.init(this.searchData)
+      this.formRes = data
+    },
+    tableMoreRefresh() {
+      const arr = this.formRes.MBLNO.split(/，|,/)
+      let val = ``
+      arr.map((item, index) => {
+        val += `${item}
+` // 这里不要格式化
+      })
+      this.moreNumVal = val
+      this.moreNumVisible = !this.moreNumVisible
+    },
+    submitSort(arr) {
+      const newArr = []
+      if (arr.length > 0) {
+        arr.forEach(item => {
+          newArr.push({
+            sortField: item.field,
+            descSort: item.descSort
+          })
+        })
+        this.searchData.multisort = newArr
+        DjyUserConfigAdd({
+          type: 'booking_sort',
+          configJson: JSON.stringify(newArr)
+        }).then((res) => {
+          const key = newArr[0].sortField
+          const sort = newArr[0].descSort
+          this.sortLabelList = newArr
+          this.tableOrderLabel = key || ''
+          this.tableOrderType = sort ? 'desc' : 'asc'
+          this.$refs.xGrid.sort(key, sort)
+          this.getList(this.searchData)
+        })
+      } else {
+        DjyUserConfigAdd({
+          type: 'booking_sort',
+          configJson: JSON.stringify([])
+        }).then((res) => {
+          this.searchData.multisort = []
+          this.tableOrderLabel = ''
+          this.tableOrderType = ''
+          this.getList(this.searchData)
+        })
+      }
+    },
+    dateFtt(fmt, date) {
+      const o = {
+        'Y+': date.getFullYear(),
+        'M+': date.getMonth() + 1,
+        'D+': date.getDate(),
+        'h+': date.getHours(),
+        'm+': date.getMinutes(),
+        's+': date.getSeconds()
+      }
+      for (const k in o) {
+        if (new RegExp(`(${k})`).test(fmt)) {
+          const str = o[k] + ''
+          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padZero(str))
+        }
+      }
+      return fmt
+    },
+
+    padZero(num) {
+      return new RegExp(/^\d$/g).test(num) ? `0${num}` : num
+    },
+
+    tableReset() {
+      this.ResetType = false
+      Object.keys(this.formRes).map((item, index) => {
+        this.formRes[item] = ''
+      })
+      const data = this.searchData.multisort
+      this.searchData = JSON.parse(JSON.stringify(this.formRes))
+      this.searchData.multisort = data
+      Object.keys(this.$refs).map((label, index) => {
+        if (label.includes('fromlabel-') && this.$refs[label].length > 0) {
+          this.$refs[label][0].$data.value = ''
+        }
+      })
+      setTimeout(() => {
+        this.ResetType = true
+      }, 100)
+    },
+
+    submitForm(data) {
+      this.formData = data
+      const arr = data.map((item, index) => {
+        return item.label
+      })
+
+      this.formRes = {}
+      this.searchData = {}
+      DjyUserConfigAdd({
+        type: 'booking_list_cond',
+        configJson: JSON.stringify(arr)
+      }).then((res) => {
+        this.$message.success('保存成功')
+        this.$refs.setForm.handleCancel()
+        Object.keys(this.$refs).map((label, index) => {
+          if (label.includes('fromlabel-') && this.$refs[label].length > 0) {
+            this.$refs[label][0].$data.value = ''
+          }
+        })
+        this.getFormData()
+        this.init()
+      })
+    },
+
+    formChange(data) {
+      const { form, value } = data
+      if (form.type === 'input') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'date') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'dateRange') {
+        this.formRes[form.resLabel[0]] = value[0] || ''
+        this.formRes[form.resLabel[1]] = value[1] || ''
+      } else if (form.type === 'select') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'complete') {
+        this.formRes[form.label] = value
+      } else if (form.type === 'selectTree') {
+        this.formRes[form.label] = value
+      }
+      this.$forceUpdate()
+    },
+
+    // table
+
+    /// 表格编辑
+    tableHeaderEdit() {
+      this.$refs.setTableForm.open()
+    },
+    submitTableForm(data) {
+      this.gridOptions.columns = JSON.parse(JSON.stringify(data))
+      this.$refs.setTableForm.handleCancel()
+      this.editColumnsSave(this.gridOptions.columns)
+    },
+
+    resizableChange(e) {
+      this.gridOptions.columns[e.columnIndex].width = e.resizeWidth
+      this.editColumnsSave(this.gridOptions.columns)
+    },
+    editColumnsSave(data = {}) {
+      DjyUserConfigAdd({
+        type: 'booking_list_column',
+        configJson: JSON.stringify(data)
+      }).then((res) => {
+        this.$refs.setForm.handleCancel()
+      })
+    },
+
+    columnChange(data) {
+      const arr = []
+      data.map((item, index) => {
+        if (item.checked) {
+          arr.push(item)
+        }
+      })
+      this.showColumns = []
+      this.showColumns = arr
+      this.gridOptions.columns = arr
+      this.$forceUpdate()
+    },
+    handledbclick({ row }) {
+      this.editColumns(row)
+    },
+    handleCopy() {
+      this.$message.success('复制成功');
+      const text = this.$refs.bcBox.innerText
+      var cInput = document.createElement('input');
+      cInput.value = text;
+      document.body.appendChild(cInput);
+      cInput.select(); // 选取文本框内容
+      document.execCommand('copy');
+      document.body.removeChild(cInput);
+    },
+    editColumns(row) {
+      this.$router.push({ name: 'BookingDetailTest', query: { id: row.id, type: row.carrierid, mblno: row.mblno } })
+    },
+    getList(queryParam = {}, isInit = false, isAdd = 'normal') {
+      this.$set(this.gridOptions, 'loading', true)
+      const { currentPage, pageSize } = this.gridOptions.pagerConfig
+      const query = {
+        ...queryParam,
+        ...{
+          PageNo: currentPage,
+          PageSize: pageSize
+        }
+      }
+      Object.keys(query).map((item, index) => {
+        if (!query[item]) {
+          delete query[item]
+        }
+      })
+      if (query.MBLNO && query.MBLNO.split(/，|,/).length > 0) {
+        const arr = this.searchData.MBLNO.split(/，|,/)
+        query.MBLNO = arr.toString()
+      }
+      const firstFlag = JSON.parse(localStorage.getItem('pro__FIRSTFLAG')).value
+      if (firstFlag) {
+        query.firstFlag = true
+      }
+      if ((!queryParam.multisort || queryParam.multisort.length === 0) && this.tableOrderLabel && this.tableOrderType) {
+        query.multisort = [{
+          sortField: this.tableOrderLabel,
+          descSort: this.tableOrderType === 'desc'
+        }]
+      }
+      PageDataByBooking(query)
+        .then((res) => {
+          if (res.success) {
+            let newBookingList = {}
+            if (query.PageNo !== 1) {
+              newBookingList = this.bookingList
+            }
+            const _data = res.data.items.map((item, index) => {
+              this.$set(newBookingList, item.id, item)
+              item.index = (currentPage - 1) * pageSize + index
+              const bookstatus = [
+                { staCode: 'sta_cangdan', isChecked: false },
+                { staCode: 'sta_haifang', isChecked: false },
+                { staCode: 'sta_zhuangzai', isChecked: false },
+                { staCode: 'sta_mafang', isChecked: false },
+                { staCode: 'sta_zhuangchuan', isChecked: false },
+                { staCode: 'sta_atd', isChecked: false }
+              ]
+              if (item.bookstatus.length > 0) {
+                bookstatus.map((book, bindex) => {
+                  item.bookstatus.map((item, index) => {
+                    if (item.staCode === book.staCode) {
+                      bookstatus[bindex] = item
+                      bookstatus[bindex].isChecked = true
+                    }
+                  })
+                })
+              }
+              if (item.bsstatusname) {
+                const arr = JSON.parse(localStorage.getItem('pro__DICT_TYPE_TREE_DATA'))
+                if (arr) {
+                  let arrColor = ''
+                  arr.value.forEach(ite => {
+                    if (ite.code == 'booking_goods_status') {
+                      arrColor = ite
+                    }
+                  })
+                  if (arrColor) {
+                    arrColor.children.forEach(ite => {
+                      if (ite.name == item.bsstatusname) {
+                        item.bsstatusnameColor = ite.remark
+                      }
+                    })
+                  }
+                }
+              }
+              item.bookstatus = bookstatus
+              let hasGoods = 0
+              item.goodsStatusList.map((gitem, gindex) => {
+                if (gitem.finishTime || gitem.remark) {
+                  hasGoods++
+                }
+              })
+              item.hasGoods = hasGoods
+              return item
+            })
+            this.$set(this.gridOptions.pagerConfig, 'columns', JSON.parse(JSON.stringify(initData.columns)))
+            this.$set(this.gridOptions, 'data', [..._data])
+
+            this.$refs.xGrid.reloadData(_data).then(() => {
+              this.$set(this.gridOptions, 'loading', false)
+            })
+            this.$set(this.gridOptions.pagerConfig, 'total', res.data.totalCount)
+            this.setBookingList(newBookingList)
+            if (this.tableOrderType) {
+              this.$refs.xGrid.sort(this.tableOrderLabel, this.tableOrderType)
+            } else {
+              this.$refs.xGrid.clearSort()
+            }
+
+            this.$forceUpdate()
+          } else {
+            this.$set(this.gridOptions, 'data', [...[]])
+            this.$set(this.gridOptions, 'loading', false)
+            this.$forceUpdate()
+          }
+          this.ResetType = true
+          localStorage.setItem('pro__FIRSTFLAG', false)
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+
+    addBooking() {
+      this.addVisible = !this.addVisible
+    },
+    copyBooking() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      if (pkIdArr.length > 1) {
+        this.$message.error('请选择一条数据')
+        return false
+      } else if (pkIdArr.length === 0) {
+        this.$message.error('请至少选择一条数据')
+        return false
+      }
+      this.$router.push({ name: 'BookingDetailTest', query: { id: pkIdArr[0], isCopy: true } })
+    },
+    copyBookingMore() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      const pkIdArr = select.map((item, index) => {
+        return item.id
+      })
+      if (pkIdArr.length > 1) {
+        this.$message.error('请选择一条数据')
+        return false
+      } else if (pkIdArr.length === 0) {
+        this.$message.error('请至少选择一条数据')
+        return false
+      }
+      this.copyMoreFlag = true
+    },
+    addSubmit() {
+      const data = []
+      data.push(this.carrierRadio)
+      if (this.RecentlyCarrierData.length) {
+        this.RecentlyCarrierData.forEach((item) => {
+          if (item.code != this.carrierRadio && data.length < 10) {
+            data.push(item.code)
+          }
+        })
+      }
+
+      DjyUserConfigAdd({
+        type: 'booking_memory',
+        configJson: JSON.stringify(data)
+      }).then((res) => {
+        this.getCarrier()
+        this.addVisible = false
+        this.addNum = Math.round(Math.random() * 1000)
+        this.$router.push({ name: 'BookingDetailTest', query: { type: this.carrierRadio, addNum: this.addNum } })
+      })
+    },
+    addCancel() {
+      this.addVisible = false
+    },
+
+    // 表单编辑
+    formSetting() {
+      this.$refs.setForm.open()
+    },
+
+    // 多表单
+    moreNumSubmit() {
+      let data = ''
+      this.moreNumVal
+        .replace(/\n|\r/g, ',')
+        .split(',')
+        .forEach((item) => {
+          if (item.replace(/\s*/g, '')) {
+            if (data) {
+              data = `${data},${item}`
+            } else {
+              data = item
+            }
+          }
+        })
+
+      this.formRes.MBLNO = data
+      this.$refs['fromlabel-MBLNO'][0].$data.value = this.formRes.MBLNO
+      this.$forceUpdate()
+      this.moreNumCancel()
+    },
+    moreNumCancel() {
+      this.moreNumVisible = false
+    },
+    tableSortChange(e) {
+      const { property, order } = e
+      this.tableOrderLabel = property || ''
+      this.tableOrderType = order
+      const data = [{
+        sortField: property,
+        descSort: order === 'desc'
+      }]
+      DjyUserConfigAdd({
+        type: 'booking_sort',
+        configJson: JSON.stringify(data)
+      }).then((res) => {
+        this.sortLabelList = []
+        this.searchData.multisort = data
+        this.getList(this.searchData)
+      })
+    },
+    enmuBookingBtn(val) {
+      switch (val) {
+        case 'sta_cangdan':
+          return '舱单'
+        case 'sta_haifang':
+          return '海放'
+        case 'sta_zhuangzai':
+          return '装载'
+        case 'sta_mafang':
+          return '码放'
+        case 'sta_zhuangchuan':
+          return '装船'
+        case 'sta_atd':
+          return '离港'
+        case 'sta_so':
+          return '已订舱'
+        case 'sta_bc':
+          return '订舱确认'
+        case 'sta_letter_yard':
+          return '放舱'
+        case 'sta_xhz':
+          return '下货纸'
+        default:
+          return '--'
+      }
+    },
+    pressEnterFun() {
+      this.tableRefresh()
+    },
+    remarkhover(e, data) {
+      if (data.bookremark.length > 0) {
+        const maxWidth = window.innerWidth
+        if (maxWidth - e.pageX > 230) {
+          this.remarkScreenX = e.pageX + 20
+        } else {
+          this.remarkScreenX = e.pageX - 300
+        }
+        this.remarkScreenY = e.pageY + 20
+        this.remarkData = data.bookremark
+        this.remarkShow = true
+      }
+    },
+    remarkLeave(e, data) {
+      this.remarkShow = false
+      this.remarkData = null
+    },
+    goodStatusclick(e, data) {
+      console.log('是否已展示', this.goodStatusShow)
+      if (!this.goodStatusShow) {
+        this.goodStatusHover(e, data)
+      } else {
+        this.goodStatusLeave(e, data)
+      }
+    },
+    goodStatusHover(e, data) {
+      const maxWidth = window.innerWidth
+      if (maxWidth - e.pageX > 230) {
+        // this.goodStatusScreenX = e.pageX + 20
+        this.goodStatusScreenX = e.pageX - 139
+      } else {
+        // this.goodStatusScreenX = e.pageX - 300
+        this.goodStatusScreenX = e.pageX - 139
+      }
+      console.log('== 距离 ==', e.pageY, window.innerHeight - 350)
+      if (e.pageY > window.innerHeight - 340) {
+        this.goodStatusScreenY = e.pageY - 370 - 10
+        this.goodStatusSeat = 'top'
+      } else {
+        this.goodStatusScreenY = e.pageY + 25
+        this.goodStatusSeat = 'bottom'
+      }
+      // this.goodStatusScreenY = e.pageY + 20
+      this.goodStatusData = data.goodsStatusList
+      this.goodStatusShow = true
+    },
+    goodStatusLeave(e, data) {
+      this.goodStatusShow = false
+      this.goodStatusData = null
+    },
+    openTraceModel() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      this.traceModalVisible = !this.traceModalVisible
+    },
+    batchEditing() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      this.editingModalVisible = !this.editingModalVisible
+    },
+    onTraceChange(values) {
+      console.log(this.traceValue)
+    },
+    traceSend() {
+      if (!this.traceValue) {
+        this.$message.error('请选择订阅内容')
+        return false
+      }
+      const arr = []
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      let errorTip = ''
+      select.map((item, index) => {
+        if (this.traceValue.includes('1') && (!item.yard || !item.yardid)) {
+          errorTip = `单号${item.mblno}未选择场站`
+        }
+        if (this.traceValue.includes('2') && (!item.carrierid || !item.carrier)) {
+          errorTip = `单号${item.mblno}未选择船公司`
+        }
+        const query = {
+          businessId: item.id,
+          mblno: item.mblno,
+          yard: this.traceValue.includes('1') ? item.yard : '',
+          yardCode: this.traceValue.includes('1') ? item.yardid : '',
+          carrierid: this.traceValue.includes('2') ? item.carrierid : '',
+          carrier: this.traceValue.includes('2') ? item.carrier : '',
+          isBook: !!this.traceValue.includes('2')
+        }
+        arr.push(query)
+      })
+
+      if (errorTip !== '') {
+        this.$message.error(errorTip)
+        return false
+      }
+
+      SendTrace(arr)
+        .then((res) => {
+          if (res.success) {
+            const tip = `订阅成功`
+            this.$message.success(tip)
+            this.traceModalVisible = false
+            this.traceValue = []
+          } else {
+            this.$message.error(res.message)
+            this.traceModalVisible = false
+            this.traceValue = []
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    getCompleteListFun({ form, value }) {
+      let query = {}
+      if (
+        [
+          'VESSEL',
+          'PORTDISCHARGE',
+          'PORTLOAD',
+          'PLACERECEIPT',
+          'DESTINATION',
+          'PLACEDELIVERY',
+          'PAYABLEAT',
+          'BLFRT',
+          'ISSUEPLACE',
+          'PREPARDAT',
+          'SERVICE',
+          'SHIPAGENCY'
+        ].includes(form.label)
+      ) {
+        // 船公司  卸货港
+        query = {
+          KeyWord: value
+        }
+      } else if (form.label === 'CUSTOMERNAME') {
+        // 客户/ 委托单位
+        query = {
+          KeyWord: value,
+          type: 'consignor'
+        }
+      } else if (form.label === 'FORWARDER') {
+        // 订舱代理
+        query = {
+          KeyWord: value,
+          type: 'booking_agent'
+        }
+      } else if (['SALE', 'CUSTSERVICE', 'DOC', 'ROUTE', 'OP'].includes(form.label)) {
+        // 销售 、 揽货人, 航线操作
+        query = {
+          name: value
+        }
+      } else if (form.label === 'CUSTOMSER') {
+        // 报关行
+        query = {
+          SearchValue: value,
+          PropString: 'customs_broker'
+        }
+      } else if (form.label === 'AGENTID') {
+        query = {
+          SearchValue: value,
+          PropString: 'out_agent'
+        }
+      } else if (form.label === 'TRUCKER') {
+        query = {
+          SearchValue: value,
+          PropString: 'fleet'
+        }
+      }
+      const fun = this.emnuCompleteApi(form.label)
+      if (fun) {
+        this.getFromSelectData(this.emnuCompleteApi(form.label), query).then((data) => {
+          if (['CUSTOMERNAME', 'FORWARDER', 'CUSTOMSER', 'AGENTID', 'TRUCKER'].includes(form.label)) {
+            this.$refs[`fromlabel-${form.label}`][0].$data.dataSourceList = data.rows
+          } else {
+            this.$refs[`fromlabel-${form.label}`][0].$data.dataSourceList = data
+          }
+        })
+      }
+    },
+
+    emnuCompleteApi(type) {
+      switch (type) {
+        case 'VESSEL':
+          return GetVessellist
+        case 'CUSTOMERNAME':
+          return DjyCustomerSuggest
+        case 'FORWARDER':
+          return DjyCustomerSuggest
+        case 'PORTDISCHARGE': // 卸货港
+          return GetPortlist
+        case 'PORTLOAD': // 装货港
+          return GetPortloadlist
+        case 'PLACERECEIPT': // 收货地
+          return GetPortloadlist
+        case 'DESTINATION': // 目的地
+          return GetPortlist
+        case 'PLACEDELIVERY': // 交货地
+          return GetPortlist
+        case 'SALE':
+          return GetSysUserPage
+        case 'CUSTSERVICE':
+          return GetSysUserPage
+        case 'ROUTE':
+          return GetSysUserPage
+        // case 'OP':
+        //   return GetSysUserPage
+        case 'DOC':
+          return GetSysUserPage
+        case 'CUSTOMSER':
+          return DjyCustomerpage
+        case 'PAYABLEAT':
+          return GetPortlist
+        case 'BLFRT':
+          return GetFrt
+        case 'ISSUEPLACE':
+          return GetPortloadlist
+        case 'PREPARDAT':
+          return GetPortloadlist
+        case 'SERVICE':
+          return GetService
+        case 'AGENTID':
+          return DjyCustomerpage
+        case 'TRUCKER':
+          return DjyCustomerpage
+        case 'SHIPAGENCY':
+          return GetForwarderlist
+      }
+    },
+
+    getSelectFirst({ form, index, value }) {
+      const fun = this.emnuSelectApi(form.label)
+      if (fun) {
+        this.getFromSelectData(fun).then((data) => {
+          this.formData[index].dataList = data
+          this.$refs[`fromlabel-${form.label}`][0].$data.dataList = data
+        })
+      }
+    },
+
+    removeMoreFun() {
+      const select = this.$refs.xGrid.getCheckboxRecords()
+      if (select.length === 0) {
+        this.$message.error('请选择操作订单')
+        return false
+      }
+      const removeArr = select.map((item, index) => {
+        return item.id
+      })
+      this.deleteBookingOrder(removeArr)
+    },
+    removeFun(data) {
+      this.deleteBookingOrder([data.id])
+    },
+    deleteBookingOrder(arr) {
+      DeleteBookingOrder(arr.toString())
+        .then((res) => {
+          if (res.success) {
+            this.$message.success('删除成功')
+            const _data = this.gridOptions.data.filter((item) => !arr.includes(item.id))
+            this.$refs.xGrid.reloadData(_data).then(() => {
+              this.gridOptions.pagerConfig.total = this.gridOptions.pagerConfig.total - arr.length
+            })
+            this.$forceUpdate()
+          } else {
+            this.$message.error(res.message)
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    cancelRemove() {
+      console.log('== 取消 ==')
+    },
+    pageClick() {
+      this.goodStatusShow = false
+      this.goodStatusData = null
+    },
+    checkboxChangeEvent() {
+      console.log('== 选中，取消选中 ==', this.$refs.xGrid.getCheckboxRecords())
+    },
+    excuteShippingOrderCompareBatch(data) {
+      let arr = []
+      if (data) {
+        arr.push(data.id.toString())
+      } else {
+        const select = this.$refs.xGrid.getCheckboxRecords()
+        arr = select.map((item, index) => {
+          return item.id.toString()
+        })
+        if (arr.length === 0) {
+          this.$message.error('请选择操作订单')
+          return false
+        }
+      }
+      this.spinning = true
+      ExcuteShippingOrderCompareBatch(arr)
+        .then((res) => {
+          if (res.success) {
+            this.spinning = false
+            if (!res.data.succ) {
+              this.$message.success(res.data.msg)
+            } else {
+              if (res.data.extra) {
+                this.TaskShippingOrderCompareData = res.data.extra
+                this.TaskShippingOrderCompareData.total = res.data.total
+                this.TaskShippingOrderCompareVisible = true
+              } else {
+                this.$message.success(res.data.msg)
+              }
+            }
+          } else {
+            this.spinning = false
+            this.$message.error(res.data.msg)
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+          this.spinning = false
+        })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+/*.ant-layout{
+  background: #f4f4f4;
+}*/
+/*列表排序按钮 */
+.vxe-cell--sort {
+  margin-top: -6px;
+
+  i {
+    font-size: 10px;
+  }
+
+  .vxe-sort--asc-btn {
+    margin-top: 6px;
+  }
+}
+
+/*列表表头 */
+.vxe-header--row {
+  position: relative;
+  background: #fff !important;
+
+  .vxe-cell--sort {
+    position: absolute;
+    z-index: 3;
+    right: 0;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: @primary-color;
+    opacity: 0.04;
+  }
+}
+
+/*列表分页 */
+.vxe-pager {
+  margin: 8px 0;
+}
+</style>
+<style lang="less" scoped>
+/*订舱表格内字体颜色 */
+.mblno {
+  text-align: left;
+  color: @primary-color !important;
+
+  span {
+    margin-right: 0.5rem;
+    cursor: pointer;
+  }
+
+  .CSMblnoCopy {
+    cursor: pointer;
+  }
+}
+
+// .vessel {
+//   color: #77c950;
+// }
+.nav-box {
+  padding: 0 10px;
+
+  .nav {
+    display: inline-block;
+    margin-right: 8px;
+    cursor: pointer;
+    border: 1px solid rgba(255, 255, 255, 0);
+    padding: 0 10px;
+    height: 28px;
+    line-height: 26px;
+    color: #000;
+
+    .iconfont {
+      margin-right: 6px;
+    }
+
+    &:hover {
+      border: 1px solid rgba(255, 255, 255, 0);
+      border-radius: 4px;
+    }
+
+    &:nth-of-type(1) {
+      .iconfont {
+        color: #1d8aff;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(2) {
+      .iconfont {
+        color: #865ef8;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(3) {
+      .iconfont {
+        color: #ff9702;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(4) {
+      .iconfont {
+        color: #1d8aff;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(5) {
+      .iconfont {
+        color: #ff1062;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(6) {
+      .iconfont {
+        color: #1ebeca;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(7) {
+      .iconfont {
+        color: #82c93d;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(8) {
+      .iconfont {
+        color: #1d8aff;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+
+    &:nth-of-type(9) {
+      .iconfont {
+        color: #f6826b;
+      }
+
+      &:hover {
+        background: #fff;
+        box-shadow: 0 0 10px #eee;
+      }
+    }
+  }
+}
+
+.right {
+  float: right;
+  cursor: pointer;
+  padding-top: 6px;
+}
+
+.BookTopButton {
+  height: 33px;
+
+  .tab-btn {
+    padding: 6px 9px;
+    border: 1px solid #c7c7c9;
+    background: #f9fafe;
+    border-radius: 2px;
+    margin-right: 10px;
+    cursor: pointer;
+    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+    -webkit-user-select: 0 2px 0 rgba(0, 0, 0, 0.02);
+  }
+}
+
+.table-page-search-submitButtons {
+  text-align: right;
+  padding-top: 6px;
+
+  .reset {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+
+  .more-search {
+    margin-left: 8px;
+    margin-right: 20px;
+    padding-right: 20px;
+    border: none;
+    position: relative;
+    box-shadow: none !important;
+  }
+
+  /*.tab-btn{
+    margin-left:8px;
+    margin-right: 10px;
+    padding:6px 9px;
+    padding-top:5px;
+    border: 1px solid #c7c7c9;
+    border-radius: 3px;
+    cursor: pointer;
+  }*/
+  .tab-btn {
+    cursor: pointer;
+    position: relative;
+
+    i {
+      font-size: 14px;
+      margin-left: 8px;
+    }
+  }
+
+  .tab-btn::before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 17px;
+    background: #ccc;
+    top: 2px;
+    left: -20px;
+  }
+
+  .senior-search {
+    margin-left: 36px;
+    color: rgba(0, 0, 0, 0.65);
+    position: relative;
+
+    i {
+      margin-left: 3px;
+      font-size: 15px;
+    }
+  }
+
+  .senior-search::before {
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 17px;
+    background: #ccc;
+    top: 2px;
+    left: -16px;
+  }
+
+  .senior-search:hover {
+    color: @primary-color;
+
+    i {
+      color: @primary-color;
+    }
+  }
+}
+
+.ant-btn {
+  margin-right: 8px;
+}
+
+.table {
+  margin: 8px auto 20px;
+}
+
+.radio-logo {
+  width: 50px;
+  // height: 40px;
+  display: inline-block;
+}
+
+.group-label-box {
+  width: 100%;
+
+  .group-label {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+
+    .ant-radio-wrapper {
+      height: 45px !important;
+      line-height: 45px !important;
+      width: 10%;
+      margin: 0;
+    }
+
+    // .label-flex {
+    //   flex: 1;
+    // }
+  }
+}
+
+.Awrapper {
+  width: 100% !important;
+  display: flex !important;
+  height: 45px !important;
+  line-height: 45px !important;
+  width: 10%;
+  margin: 0;
+
+  .line {
+    margin-left: 10px;
+    margin-right: 40px;
+    height: 24px;
+    flex: 1;
+    border-bottom: 1px solid #c9c9c9;
+  }
+}
+
+/*查询区日期默认颜色 */
+/deep/ .ant-calendar-today {
+  .ant-calendar-date {
+    color: @primary-color !important;
+    border-color: @primary-color !important;
+  }
+}
+
+/*方块边框按钮 */
+.tab-btn:hover {
+  border-color: @primary-color;
+  color: @primary-color;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+/*列表双列背景色 */
+// /deep/ .vxe-table--render-default .vxe-body--row.row--stripe {
+//   // background: #f5f9fe;
+//   position: relative;
+//   background: #fff;
+//   z-index: 1;
+//   &::after {
+//     content: '';
+//     position: absolute;
+//     top: 0;
+//     left: 0;
+//     width: 100%;
+//     height: 100%;
+//     z-index: 0;
+//     background: @primary-color;
+//     opacity: 0.04;
+//     z-index: -1;
+//   }
+// }
+/*列表操作按钮颜色 */
+/deep/ .operate-btn {
+  color: @primary-color;
+}
+
+/deep/ .operate-btn:hover {
+  color: @primary-color !important;
+  opacity: 0.7;
+}
+
+.book-btn {
+  display: inline-block;
+  padding: 0 10px;
+  height: 24px;
+  margin-right: 8px;
+  border: 1px solid #eee;
+  color: #999;
+  font-size: 12px;
+  line-height: 24px;
+
+  i {
+    display: none;
+  }
+
+  &.sta_so {
+    color: #8bc34a;
+    border: 1px solid #8bc34a;
+  }
+
+  &.sta_bc {
+    color: #fbc02d;
+    border: 1px solid #fbc02d;
+  }
+
+  &.sta_letter_yard {
+    color: #00bcd4;
+    border: 1px solid #00bcd4;
+  }
+
+  &.sta_xhz {
+    color: #e64a19;
+    border: 1px solid #e64a19;
+  }
+}
+
+.billtrace-box {
+  width: 100%;
+
+  // display: flex;
+  // height: 48px;
+  // flex-wrap:wrap;
+  // padding:3px 0;
+  // text-align: center;
+  .billtrace-btn {
+    display: inline-block;
+    font-size: 12px;
+    height: 16px;
+
+    // width:30%;
+    // display: flex;
+    span {
+      // flex: 1;
+      text-align: right;
+      color: #999;
+    }
+
+    i {
+      font-size: 12px;
+      color: #ccc;
+      // flex: 1;
+      text-align: center;
+
+      &.hide {
+        opacity: 0;
+      }
+    }
+
+    .active {
+      cursor: pointer;
+      // color: @primary-color;
+      color: #ff9702;
+      font-weight: bold;
+    }
+  }
+}
+
+.normal-box {
+  .billtrace-btn {
+    display: inline-block;
+  }
+}
+
+.flex-box {
+  display: flex;
+  height: 48px;
+  flex-wrap: wrap;
+  padding: 3px 0;
+  text-align: center;
+  justify-content: center;
+}
+.billtrace-btn {
+    font-size: 12px;
+    height: 16px;
+    width: 30%;
+    display: flex;
+
+    span {
+      flex: 1;
+      text-align: right;
+      color: #999;
+    }
+
+    i {
+      font-size: 12px;
+      color: #ccc;
+      flex: 1;
+      text-align: center;
+
+      &.hide {
+        opacity: 0;
+      }
+    }
+
+    .active {
+      cursor: pointer;
+      // color: @primary-color;
+      color: #ff9702;
+      font-weight: bold;
+    }
+
+    &:nth-of-type(3) {
+      i {
+        opacity: 0;
+      }
+    }
+  }
+.billtrace-btn1{
+  font-size: 12px;
+  .active {
+      cursor: pointer;
+      // color: @primary-color;
+      color: #ff9702 !important;
+      font-weight: bold;
+      font-size: 12px;
+    }
+}
+
+/deep/ .ant-form-item {
+  margin-bottom: 10px !important;
+}
+
+/deep/ .table-page-search-submitButtons {
+  margin-bottom: 10px !important;
+}
+
+/deep/ .ant-input {
+  height: 28px;
+  margin-top: 4px;
+  // transform: scaleY(.8);
+}
+
+/deep/ .ant-card-body {
+  padding-top: 10px;
+}
+
+/deep/ .ant-calendar-picker-input {
+  padding: 0 4px;
+}
+
+/deep/ .ant-calendar-range-picker-input {
+  height: 28px;
+  font-size: 12px;
+  vertical-align: top;
+  text-align: center;
+  // background: #f99;
+}
+
+.reamrk-btns {
+  overflow: visible;
+}
+
+/deep/ .from-label {
+  padding: 0 !important;
+}
+
+.booking-from-box {
+  padding: 0 10px;
+}
+
+@media (min-width: 1200px) and (max-width: 1600px) {
+  .from-label {
+    padding-right: 0 !important;
+  }
+}
+
+@media (min-width: 1200px) and (max-width: 1438px) {
+  .table-page-search-submitButtons {
+    .ant-btn {
+      margin-left: 4px;
+      margin-right: 4px;
+    }
+  }
+
+  .table-page-search-submitButtons .senior-search {
+    margin-left: 20px;
+
+    &::before {
+      left: -7px;
+    }
+  }
+}
+
+/deep/ .book-remark-box {
+  >.vxe-cell {
+    overflow: visible !important;
+  }
+
+  /deep/ .vxe-cell {
+    overflow: visible !important;
+  }
+}
+
+.bookremark {
+  position: relative;
+
+  .reamrk-label {
+    width: 100%;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    cursor: pointer;
+  }
+}
+
+// 货物状态
+.goods-status {
+  width: 100%;
+  display: flex;
+  height: 48px;
+  align-items: center;
+
+  .goods-status-left {
+    flex: 1;
+    overflow: hidden;
+    height: 48px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    .goods-tip {
+      font-size: 12px;
+      margin: 0 4px;
+      cursor: pointer;
+      height: 48px;
+      line-height: 48px;
+      display: inline-block;
+      color: @primary-color;
+    }
+  }
+
+  .goods-status-right {
+    width: 30px;
+    text-align: center;
+    height: 48px;
+
+    i {
+      color: @primary-color;
+      cursor: pointer;
+      height: 48px;
+      line-height: 48px;
+    }
+  }
+
+  .TablelstShipOrderCompareRltRedo {
+    cursor: pointer;
+    margin-left: 0.5rem;
+    color: #13c2c2;
+  }
+}
+
+.dzRemark,
+.czRemark {
+  display: block;
+  text-align: left;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/deep/ .line-box:nth-last-of-type(-n + 5) {
+  .book-remark-box {
+    .bookremark {
+      .reamrk-list {
+        top: inherit;
+        bottom: calc(100% + 8px);
+      }
+    }
+  }
+}
+
+/deep/.line-box:nth-of-type(2n) {
+  position: relative;
+  background: #fff;
+
+  >* {
+    z-index: 1;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: @primary-color;
+    opacity: 0.04;
+  }
+
+  .book-remark-box {
+    .bookremark {
+      .reamrk-list {
+        top: inherit;
+        bottom: calc(100% + 8px);
+      }
+    }
+  }
+}
+
+.hovers-list {
+  max-height: 400px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 300px;
+  background: #fff;
+  box-shadow: 0 0 10px #eee;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  padding: 5px 20px 10px 20px;
+  white-space: normal;
+  text-align: left;
+  z-index: 999 !important;
+
+  .title {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .list {
+    border-bottom: 1px solid #eee;
+    padding: 6px 0;
+    line-height: 18px;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+
+    &:nth-last-of-type(1) {
+      border: none;
+    }
+
+    .icon {
+      margin-right: 4px;
+      color: @primary-color;
+    }
+  }
+}
+
+.goods-hovers-list {
+  max-height: 400px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 300px;
+  background: #fff;
+  box-shadow: 0 0 50px #eee;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  padding: 5px 20px 10px 20px;
+  white-space: normal;
+  text-align: left;
+  z-index: 999 !important;
+  transition: 0.5s all;
+  display: block;
+  opacity: 1;
+
+  &.seat-top {
+    &::before {
+      display: none;
+      // content: '';
+      // bottom: -15px;
+      // left: 50%;
+    }
+  }
+
+  &.hide-goods-hover {
+    display: none;
+    opacity: 0;
+  }
+
+  // overflow: auto;
+  &::before {
+    content: '';
+    float: left;
+    width: 0;
+    height: 0;
+    border-width: 8px;
+    border-style: solid;
+    border-color: transparent #fff transparent transparent;
+    -webkit-transform: rotate(90deg);
+    transform: rotate(90deg);
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    margin-left: -16px;
+  }
+
+  .title {
+    height: 30px;
+    line-height: 30px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+
+  .goods-btn {
+    display: inline-block;
+    font-size: 12px;
+    color: #666;
+    word-break: break-all;
+    width: 82px;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    margin-bottom: 6px;
+    text-align: center;
+    margin: 0 2px 8px;
+    cursor: pointer;
+
+    &.active {
+      color: @primary-color;
+      border: 1px solid @primary-color;
+    }
+
+    .icon {
+      margin-right: 4px;
+      color: @primary-color;
+    }
+  }
+}
+
+@media (min-width: 1192px) and (max-width: 1591px) {
+  .booking-from-box {
+    padding-right: 24px;
+
+    /deep/ .ant-calendar-picker-icon {
+      display: none;
+    }
+  }
+}
+
+.booking-from-box {
+  /deep/ .ant-calendar-picker-icon {
+    margin-top: -4px !important;
+  }
+}
+
+/deep/ .ant-form-item-control-wrapper {
+  overflow: hidden !important;
+}
+
+.no-data {
+  display: block;
+  color: #aaa;
+  font-size: 14px;
+
+  i {
+    line-height: 120px;
+    font-size: 100px;
+  }
+}
+
+/deep/ .content-table .vxe-body--column .vxe-cell div {
+  color: #000;
+}
+
+.pono {
+  text-align: left;
+}
+
+/deep/ .vxe-header--row th {
+  text-align: left !important;
+}
+
+/deep/ .vxe-cell--title {
+  width: 100%;
+  text-align: left;
+}
+
+.TaskShippingOrderCompareP {
+  border-bottom: 1px solid #000;
+  padding: 5px;
+  background: #0000000e;
+
+  .TaskShippingOrderCompareSpan {
+    font-weight: bolder;
+    color: red;
+  }
+}
+
+.TaskShippingOrderCompareMainBox {
+  height: 55vh;
+  overflow-y: auto;
+
+  .TaskShippingOrderCompareMain {
+    p {
+      margin-bottom: 0;
+    }
+
+    .TaskShippingOrderCompareMainHeader {
+      display: flex;
+
+      >div {
+        &:nth-child(1) {
+          flex: 3;
+        }
+
+        &:nth-child(2) {
+          width: 46px;
+        }
+
+        &:nth-child(3) {
+          flex: 3;
+        }
+
+        >p {
+          &:first-child {
+            font-weight: bolder;
+          }
+        }
+      }
+
+      &.Box {
+        border-top: 1px solid #000;
+        // border-bottom: 1px solid #000;
+        padding: 0.5rem 0 0 0;
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    .TaskShippingOrderCompareMainList {
+      display: flex;
+      align-items: center;
+      margin-bottom: 0.5rem;
+
+      >p {
+        flex: 2;
+
+        &:nth-child(1) {
+          flex: 1;
+        }
+
+        &:nth-child(3) {
+          flex: 0;
+          margin: 0 1rem;
+        }
+
+        &:nth-child(4) {
+          flex: 1;
+        }
+
+        // &:nth-child(3) {
+        //   flex: 2;
+        //   margin: 0 1rem;
+        //   padding-left: 0.5rem;
+        //   &.TaskShippingOrderCompareMainThird {
+        //     background: #facd91;
+        //     border: 1px solid red;
+        //   }
+        // }
+        // &.TaskShippingOrderCompareMainThird {
+        //   flex: 2;
+        //   background: #facd91;
+        //   border: 1px solid red;
+        //   margin: 0 1rem;
+        //   padding-left: 0.5rem;
+        // }
+      }
+
+      &.BoxNo {
+        padding-top: 0.5rem;
+        border-top: 1px solid #000;
+
+        &:nth-child(1) {
+          padding-top: 0;
+          border: none;
+        }
+      }
+    }
+  }
+}
+
+// .form-box{
+//   .form-main{
+//     float: left;
+//     margin-right: 10px;
+//     display: flex;
+//     width: 16%;
+//     overflow: hidden;
+//     .form-label{
+//       display: inline-block;
+//       margin-right: 10px;
+//     }
+//     .form-content{
+//       flex: 1;
+//     }
+//   }
+//   .more-btn{
+//   }
+// }
+.bcfile-title {
+  border-bottom: 1px dashed black;
+  padding-bottom: 5px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bc-box {
+  max-height: 200px;
+  overflow-y: auto;
+  padding-right: 14px;
+
+  .bc-item {
+    margin: 7px 0px;
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.txfcSpan{
+  width: 140px;
+  display: inline-block;
+}
+.flag-icon{
+  color: #1d8aff;
+  cursor: pointer;
+  font-size: 20px;
+}
+</style>

From 2371b7f07b30f9b5ff051fc79648feb572fc6db5 Mon Sep 17 00:00:00 2001
From: sunzehua <sunzehua@jchshipping.net>
Date: Thu, 15 Jun 2023 16:49:11 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E6=96=B0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/modules/basicInfo.vue              | 686 +++++++++-------
 .../BookingLedger/detail/modules/billInfo.vue | 292 +++++++
 .../detail/modules/cargoInfo.vue              | 536 +-----------
 .../detail/modules/mailingInfo.vue            | 774 ++++++------------
 4 files changed, 932 insertions(+), 1356 deletions(-)

diff --git a/src/views/main/BookingLedger/detail/modules/basicInfo.vue b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
index 4a34300..e62437d 100644
--- a/src/views/main/BookingLedger/detail/modules/basicInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/basicInfo.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="basic-info">
-    <x-card style="padding-top: 15px;">
-      <div slot="content" style="margin-top: -24px;">
+    <x-card style="padding-top: 15px">
+      <div slot="content" style="margin-top: -24px">
         <a-form-model
           style="margin-bottom: 10px"
           size="small"
@@ -10,14 +10,14 @@
           :model="details"
           :rules="rules"
         >
-          <a-row class="from-box" >
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+          <a-row class="from-box" :gutter="10">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
                 prop="customername"
                 label="委托单位"
-                :labelCol="labelCol4"
-                :wrapperCol="wrapperCol4"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
                 has-feedback
               >
                 <div class="customer-box" style="padding-right: 24px">
@@ -41,43 +41,19 @@
                 </div>
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
-              <a-form-model-item
-                class="from-label"
-                prop="thirdPay"
-                label="第三方"
-                :labelCol="labelCol2"
-                :wrapperCol="wrapperCol2"
-                has-feedback
-              >
-                <div class="customer-box" style="padding-right: 24px">
-                  <selectView
-                    type="thirdPay"
-                    :defaultVal="details.thirdPay"
-                    searchApi="DjyCustomerSuggest"
-                    :searchQuery="{ keyword: '', type: 'consignor' }"
-                    :showLabel="['shortName']"
-                    :openSearch="true"
-                    :isCopy="true"
-                    @change="getSelectViewRes"
-                    style="flex: 1; margin-top: -4px"
-                  ></selectView>
-                </div>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
-                label="PO NO"
+                label="提单号"
+                prop="mblno"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
-                prop="pono"
               >
-                <inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange" />
+                <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
                 label="船公司"
@@ -99,52 +75,40 @@
                 ></selectView>
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
-              <a-form-model-item
-                class="from-label"
-                label="是否占舱"
-                :labelCol="{ xs: { span: 24 },
-                             sm: { span: 9 },
-                             md: { span: 9 }}"
-                :wrapperCol="{ xs: { span: 24 },
-                               sm: { span: 12 },
-                               md: { span: 12 }}"
-                has-feedback
-                prop="zhanCangFlag"
-              >
-                <div class="date-box">
-                  <a-radio-group size="small" v-model="details.zhanCangFlag">
-                    <a-radio size="small" value="是"> 是 </a-radio>
-                    <a-radio size="small" value="否"> 否 </a-radio>
-                  </a-radio-group>
-                </div>
-              </a-form-model-item>
-            </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
-                label="订舱编号"
-                :labelCol="labelCol4"
-                :wrapperCol="wrapperCol4"
+                label="订舱代理"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
                 has-feedback
-                prop="custno"
+                prop="forwarder"
               >
-                <inputView type="custno" :parentVal="details.custno" @getInputChange="inputChange" />
+                <selectView
+                  type="forwarder"
+                  :defaultVal="details.forwarder"
+                  searchApi="DjyCustomerSuggest"
+                  :searchQuery="{ keyword: '', type: 'booking_agent' }"
+                  :showLabel="['shortName']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                  style="flex: 1; margin-top: -4px"
+                ></selectView>
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
-                label="提单号"
-                prop="mblno"
+                label="PO NO"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
+                prop="pono"
               >
-                <inputView type="mblno" :parentVal="details.mblno" :ishd="ishd" @getInputChange="inputChange" />
+                <inputView type="pono" :parentVal="details.pono" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
                 label="分提单号"
@@ -156,42 +120,39 @@
                 <inputView type="hblno" :parentVal="details.hblno" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
               <a-form-model-item
                 class="from-label"
-                label="订舱代理"
+                label="订舱编号"
                 :labelCol="labelCol2"
                 :wrapperCol="wrapperCol2"
                 has-feedback
-                prop="forwarder"
+                prop="custno"
               >
-                <selectView
-                  type="forwarder"
-                  :defaultVal="details.forwarder"
-                  searchApi="DjyCustomerSuggest"
-                  :searchQuery="{ keyword: '', type: 'booking_agent' }"
-                  :showLabel="['shortName']"
-                  :openSearch="true"
-                  @change="getSelectViewRes"
-                  style="flex: 1; margin-top: -4px"
-                ></selectView>
+                <inputView type="custno" :parentVal="details.custno" @getInputChange="inputChange" />
               </a-form-model-item>
             </a-col>
-            <template v-if="details.carrierid != 'ESL'">
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <template v-if="details.carrierid === 'ESL'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+                <a-form-model-item
+                  class="from-label"
+                  label="EP号"
+                  :labelCol="labelCol2"
+                  :wrapperCol="wrapperCol2"
+                  has-feedback
+                  prop="epCode"
+                >
+                  <inputView type="epCode" :parentVal="details.epCode" @getInputChange="inputChange" />
+                </a-form-model-item>
+              </a-col>
+            </template>
+            <template v-else>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
                 <a-form-model-item
                   class="from-label"
                   label="运费协议号"
-                  :labelCol="{
-                    xs: { span: 24 },
-                    sm: { span: 10 },
-                    md: { span: 10 }
-                  }"
-                  :wrapperCol="{
-                    xs: { span: 24 },
-                    sm: { span: 14 },
-                    md: { span: 14 }
-                  }"
+                  :labelCol="labelCol2"
+                  :wrapperCol="wrapperCol2"
                   has-feedback
                   prop="contractno"
                 >
@@ -212,21 +173,37 @@
                 </a-form-model-item>
               </a-col>
             </template>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
+              <a-form-model-item
+                class="from-label"
+                prop="thirdPay"
+                label="第三方"
+                :labelCol="labelCol2"
+                :wrapperCol="wrapperCol2"
+                has-feedback
+              >
+                <div class="customer-box" style="padding-right: 24px">
+                  <selectView
+                    type="thirdPay"
+                    :defaultVal="details.thirdPay"
+                    searchApi="DjyCustomerSuggest"
+                    :searchQuery="{ keyword: '', type: 'consignor' }"
+                    :showLabel="['shortName']"
+                    :openSearch="true"
+                    :isCopy="true"
+                    @change="getSelectViewRes"
+                    style="flex: 1; margin-top: -4px"
+                  ></selectView>
+                </div>
+              </a-form-model-item>
+            </a-col>
             <template v-if="details.carrierid === 'ESL'">
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="7">
                 <a-form-model-item
                   class="from-label"
                   label="运费协议号"
-                  :labelCol="{
-                    xs: { span: 24 },
-                    sm: { span: 12 },
-                    md: { span: 12 }
-                  }"
-                  :wrapperCol="{
-                    xs: { span: 24 },
-                    sm: { span: 12 },
-                    md: { span: 12 }
-                  }"
+                  :labelCol="labelCol2"
+                  :wrapperCol="wrapperCol2"
                   has-feedback
                   prop="contractno"
                 >
@@ -247,27 +224,13 @@
                 </a-form-model-item>
               </a-col>
             </template>
-            <template v-if="details.carrierid === 'ESL'">
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
-                <a-form-model-item
-                  class="from-label"
-                  label="EP号"
-                  :labelCol="labelCol4"
-                  :wrapperCol="wrapperCol4"
-                  has-feedback
-                  prop="epCode"
-                >
-                  <inputView type="epCode" :parentVal="details.epCode" @getInputChange="inputChange" />
-                </a-form-model-item>
-              </a-col>
-            </template>
             <template v-if="['VOLTA', 'WHL', 'CSL', 'MSC'].includes(details.carrierid)">
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="7">
                 <a-form-model-item
                   class="from-label"
                   label="真提单号"
-                  :labelCol="labelCol4"
-                  :wrapperCol="wrapperCol4"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
                   has-feedback
                   prop="tmblno"
                 >
@@ -277,34 +240,8 @@
             </template>
           </a-row>
           <div class="from-box2">
-            <a-row >
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
-                <a-form-model-item
-                  class="from-label"
-                  label="开船日期"
-                  :labelCol="{ xs: { span: 24 },
-                               sm: { span: 8 },
-                               md: { span: 8 }}"
-                  :wrapperCol="{ xs: { span: 24 },
-                                 sm: { span: 12 },
-                                 md: { span: 12 }}"
-                  has-feedback
-                  prop="etd"
-                >
-                  <div class="date-box">
-                    <datePickerView
-                      class="date-picker"
-                      :parentVal="details.etd"
-                      type="etd"
-                      format="YYYY-MM-DD"
-                      @dateChange="dateChangeFun"
-                      style="margin-top: -5px"
-                    ></datePickerView>
-                    <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
-                  </div>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+            <a-row :gutter="6">
+              <a-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
                 <a-form-model-item
                   class="from-label"
                   label="船名"
@@ -337,7 +274,7 @@
                 </a-form-model-item>
               </a-col>
               <template v-if="details.carrierid === 'ESL'">
-                <a-col :xs="12" :sm="12" :md="8" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-col :xs="12" :sm="12" :md="8" :lg="5" :xl="4">
                   <a-form-model-item
                     class="from-label"
                     label="内部航次"
@@ -356,7 +293,7 @@
                 </a-col>
               </template>
               <template v-else>
-                <a-col :xs="12" :sm="12" :md="8" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-col :xs="12" :sm="12" :md="8" :lg="5" :xl="4">
                   <a-form-model-item
                     class="from-label"
                     label="内部航次"
@@ -375,7 +312,7 @@
                 </a-col>
               </template>
               <template v-if="details.carrierid === 'ESL'">
-                <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="4">
                   <a-form-model-item
                     class="from-label"
                     label="航次"
@@ -393,7 +330,7 @@
                 </a-col>
               </template>
               <template v-else>
-                <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+                <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="4">
                   <a-form-model-item
                     class="from-label"
                     label="海关航次"
@@ -410,185 +347,349 @@
                   </a-form-model-item>
                 </a-col>
               </template>
-              <a-col :xs="12" :sm="12" :md="12" :lg="{span: '4-8'}" :xl="{span: '4-8'}">
+              <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="5">
                 <a-form-model-item
                   class="from-label"
-                  label="船司航线"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="lanename"
-                >
-                  <!-- 航线暂无接口， 暂时改为输入框-->
-                  <inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange" />
-                </a-form-model-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="10">
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-                <a-form-model-item
-                  class="from-label"
-                  label="揽货人"
-                  :labelCol="userLabelCol"
-                  :wrapperCol="userWrapperCol"
-                  has-feedback
-                  prop="sale"
-                >
-                  <selectView
-                    type="sale"
-                    :defaultVal="details.sale"
-                    searchApi="GetSysUserPage"
-                    :searchQuery="{ name: '' }"
-                    :showLabel="['name']"
-                    :openSearch="true"
-                    @change="getSelectViewRes"
-                  ></selectView>
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
-                <a-form-model-item
-                  class="from-label"
-                  label="客服"
-                  :labelCol="userLabelCol1"
-                  :wrapperCol="userWrapperCol1"
+                  label="开船日期"
+                  :labelCol="{ xs: { span: 24 },
+                               sm: { span: 8 },
+                               md: { span: 8 }}"
+                  :wrapperCol="{ xs: { span: 24 },
+                                 sm: { span: 12 },
+                                 md: { span: 12 }}"
                   has-feedback
-                  prop="custservice"
+                  prop="etd"
                 >
-                  <selectView
-                    type="custservice"
-                    :defaultVal="details.custservice"
-                    searchApi="GetSysUserPage"
-                    :searchQuery="{ name: '' }"
-                    :showLabel="['name']"
-                    :openSearch="true"
-                    @change="getSelectViewRes"
-                  ></selectView>
+                  <div class="date-box">
+                    <datePickerView
+                      class="date-picker"
+                      :parentVal="details.etd"
+                      type="etd"
+                      format="YYYY-MM-DD"
+                      @dateChange="dateChangeFun"
+                      style="margin-top: -5px"
+                    ></datePickerView>
+                    <span class="week" v-if="etdWeek && etdWeek !== 'NaN'">W{{ etdWeek || '--' }}</span>
+                  </div>
                 </a-form-model-item>
               </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-col :xs="12" :sm="12" :md="12" :lg="5" :xl="5">
                 <a-form-model-item
                   class="from-label"
-                  label="操作"
-                  :labelCol="userLabelCol1"
-                  :wrapperCol="userWrapperCol1"
+                  label="是否占舱"
+                  :labelCol="{ xs: { span: 24 },
+                               sm: { span: 9 },
+                               md: { span: 9 }}"
+                  :wrapperCol="{ xs: { span: 24 },
+                                 sm: { span: 12 },
+                                 md: { span: 12 }}"
                   has-feedback
-                  prop="op"
+                  prop="zhanCangFlag"
                 >
-                  <selectView
-                    type="op"
-                    :defaultVal="details.op"
-                    searchApi="GetSysUserPage"
-                    :searchQuery="{ name: '' }"
-                    :showLabel="['name']"
-                    :openSearch="true"
-                    @change="getSelectViewRes"
-                  ></selectView>
+                  <!-- style="margin-left:10px;margin-top:-6px;" -->
+                  <div class="date-box">
+                    <!-- <a-checkbox size="small" v-model="details.zhanCangFlag">
+                      <template v-if="details.zhanCangFlag">是</template>
+                      <template v-else>否</template>
+                    </a-checkbox> -->
+                    <a-radio-group size="small" v-model="details.zhanCangFlag">
+                      <a-radio size="small" value="是"> 是 </a-radio>
+                      <a-radio size="small" value="否"> 否 </a-radio>
+                    </a-radio-group>
+                  </div>
                 </a-form-model-item>
               </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <!-- <template v-if="details.carrierid === 'ESL'">
+                <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                  <a-form-model-item
+                    class="from-label"
+                    label="实际开船"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="atd"
+                  >
+                    <div class="date-box">
+                      <datePickerView
+                        class="date-picker"
+                        :parentVal="details.atd"
+                        type="atd"
+                        format="YYYY-MM-DD"
+                        @dateChange="dateChangeFun"
+                        style="margin-top: -5px;"
+                      ></datePickerView>
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+              </template> -->
+            </a-row>
+            <a-row :gutter="10">
+              <!-- <template>
+                <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                  <a-form-model-item
+                    class="from-label"
+                    label="实际开船"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="atd"
+                  >
+                    <div class="date-box">
+                      <datePickerView
+                        class="date-picker"
+                        :parentVal="details.atd"
+                        type="atd"
+                        format="YYYY-MM-DD"
+                        @dateChange="dateChangeFun"
+                        style="margin-top: -5px;"
+                      ></datePickerView>
+                    </div>
+                  </a-form-model-item>
+                </a-col>
+              </template> -->
+              <template>
+                <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                  <a-form-model-item
+                    class="from-label"
+                    label="船司航线"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
+                    has-feedback
+                    prop="lanename"
+                  >
+                    <!-- 航线暂无接口， 暂时改为输入框-->
+                    <inputView type="lanename" :parentVal="details.lanename" @getInputChange="inputChange" />
+                  </a-form-model-item>
+                </a-col>
+              </template>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
                   class="from-label"
-                  label="单证"
-                  :labelCol="userLabelCol1"
-                  :wrapperCol="userWrapperCol1"
+                  label="船代"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
                   has-feedback
-                  prop="doc"
+                  prop="shipagency"
                 >
                   <selectView
-                    type="doc"
-                    :defaultVal="details.doc"
-                    searchApi="GetSysUserPage"
-                    :searchQuery="{ name: '' }"
-                    :showLabel="['name']"
+                    ref="shipagency"
+                    type="shipagency"
+                    :defaultVal="details.shipagency"
+                    searchApi="GetForwarderlist"
+                    :searchQuery="{ KeyWord: '' }"
+                    :showLabel="['name', 'showCode']"
                     :openSearch="true"
                     @change="getSelectViewRes"
                   ></selectView>
                 </a-form-model-item>
               </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
                   class="from-label"
-                  label="航线操作"
-                  :labelCol="userLabelCol"
-                  :wrapperCol="userWrapperCol"
+                  label="航线"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
                   has-feedback
-                  prop="route"
+                  prop="lineName"
                 >
                   <selectView
-                    type="route"
-                    :defaultVal="details.route"
-                    searchApi="GetSysUserPage"
-                    :searchQuery="{ name: '' }"
+                    type="lineName"
+                    :defaultVal="details.lineName"
+                    searchApi="GetTenantLineList"
+                    :searchQuery="{ LineName: '' }"
                     :showLabel="['name']"
-                    :openSearch="true"
-                    :isCopy="true"
+                    :openSearch="false"
                     @change="getSelectViewRes"
                   ></selectView>
                 </a-form-model-item>
               </a-col>
-              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
                   class="from-label"
-                  label="航线管理"
-                  :labelCol="userLabelCol"
-                  :wrapperCol="userWrapperCol"
+                  label="业务来源"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
                   has-feedback
-                  prop="lineManage"
+                  prop="sourceName"
                 >
                   <selectView
-                    type="lineManage"
-                    :defaultVal="details.lineManage"
-                    searchApi="GetSysUserPage"
-                    :searchQuery="{ name: '' }"
+                    type="sourceName"
+                    :defaultVal="details.sourceName"
+                    searchApi="BookingSourcePage"
+                    :searchQuery="{ SearchValue: '' }"
                     :showLabel="['name']"
-                    :openSearch="true"
+                    :openSearch="false"
                     @change="getSelectViewRes"
                   ></selectView>
                 </a-form-model-item>
               </a-col>
             </a-row>
-            <a-row :gutter="10">
-              <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
-                <a-form-model-item
-                  class="from-label"
-                  label="操作备注"
-                  :labelCol="labelCol3"
-                  :wrapperCol="wrapperCol3"
-                  has-feedback
-                  prop="czRemark"
-                >
-                  <inputView type="czRemark" :parentVal="details.czRemark" @getInputChange="inputChange" />
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="8">
-                <a-form-model-item
-                  class="from-label"
-                  label="单证备注"
-                  :labelCol="labelCol3"
-                  :wrapperCol="wrapperCol3"
-                  has-feedback
-                  prop="dzRemark"
-                >
-                  <inputView type="dzRemark" :parentVal="details.dzRemark" @getInputChange="inputChange" />
-                </a-form-model-item>
-              </a-col>
-              <a-col :xs="24" :sm="6" :md="6" :lg="6" :xl="8">
-                <a-form-model-item
-                  class="from-label"
-                  label="申请箱使"
-                  :labelCol="labelCol3"
-                  :wrapperCol="wrapperCol3"
-                  has-feedback
-                  prop="shenQingXiangShi"
-                >
-                  <inputView type="shenQingXiangShi" :parentVal="details.shenQingXiangShi" @getInputChange="inputChange" />
-                </a-form-model-item>
-              </a-col>
-            </a-row>
           </div>
+          <a-row class="from-box3" :gutter="10">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-form-model-item
+                class="from-label"
+                label="揽货人"
+                :labelCol="userLabelCol"
+                :wrapperCol="userWrapperCol"
+                has-feedback
+                prop="sale"
+              >
+                <selectView
+                  type="sale"
+                  :defaultVal="details.sale"
+                  searchApi="GetSysUserPage"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-form-model-item
+                class="from-label"
+                label="操作"
+                :labelCol="userLabelCol1"
+                :wrapperCol="userWrapperCol1"
+                has-feedback
+                prop="op"
+              >
+                <selectView
+                  type="op"
+                  :defaultVal="details.op"
+                  searchApi="GetSysUserPage"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-form-model-item
+                class="from-label"
+                label="单证"
+                :labelCol="userLabelCol1"
+                :wrapperCol="userWrapperCol1"
+                has-feedback
+                prop="doc"
+              >
+                <selectView
+                  type="doc"
+                  :defaultVal="details.doc"
+                  searchApi="GetSysUserPage"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-form-model-item
+                class="from-label"
+                label="客服"
+                :labelCol="userLabelCol1"
+                :wrapperCol="userWrapperCol1"
+                has-feedback
+                prop="custservice"
+              >
+                <selectView
+                  type="custservice"
+                  :defaultVal="details.custservice"
+                  searchApi="GetSysUserPage"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-form-model-item
+                class="from-label"
+                label="航线操作"
+                :labelCol="userLabelCol"
+                :wrapperCol="userWrapperCol"
+                has-feedback
+                prop="route"
+              >
+                <selectView
+                  type="route"
+                  :defaultVal="details.route"
+                  searchApi="GetSysUserPage"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  :isCopy="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+              <a-form-model-item
+                class="from-label"
+                label="航线管理"
+                :labelCol="userLabelCol"
+                :wrapperCol="userWrapperCol"
+                has-feedback
+                prop="lineManage"
+              >
+                <selectView
+                  type="lineManage"
+                  :defaultVal="details.lineManage"
+                  searchApi="GetSysUserPage"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+          </a-row>
+          <a-row class="from-box4" :gutter="10">
+            <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9">
+              <a-form-model-item
+                class="from-label"
+                label="单证备注"
+                :labelCol="labelCol3"
+                :wrapperCol="wrapperCol3"
+                has-feedback
+                prop="dzRemark"
+              >
+                <inputView type="dzRemark" :parentVal="details.dzRemark" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="9" :md="9" :lg="9" :xl="9">
+              <a-form-model-item
+                class="from-label"
+                label="操作备注"
+                :labelCol="labelCol3"
+                :wrapperCol="wrapperCol3"
+                has-feedback
+                prop="czRemark"
+              >
+                <inputView type="czRemark" :parentVal="details.czRemark" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="申请箱使"
+                :labelCol="labelCol3"
+                :wrapperCol="wrapperCol3"
+                has-feedback
+                prop="shenQingXiangShi"
+              >
+                <inputView type="shenQingXiangShi" :parentVal="details.shenQingXiangShi" @getInputChange="inputChange" />
+              </a-form-model-item>
+            </a-col>
+          </a-row>
         </a-form-model>
       </div>
     </x-card>
+
     <a-modal
       :title="customerType === 'add' ? '添加委托单位' : '关系人'"
       :width="1200"
@@ -717,16 +818,6 @@ export default {
         sm: { span: 19 },
         md: { span: 19 }
       },
-      labelCol4: {
-        xs: { span: 24 },
-        sm: { span: 8 },
-        md: { span: 8 }
-      },
-      wrapperCol4: {
-        xs: { span: 24 },
-        sm: { span: 16 },
-        md: { span: 16 }
-      },
       userLabelCol: {
         xs: { span: 24 },
         sm: { span: 8 },
@@ -747,7 +838,6 @@ export default {
         sm: { span: 16 },
         md: { span: 18 }
       },
-
       form: this.$form.createForm(this),
       customerType: '',
       customerVisible: false,
@@ -1262,10 +1352,4 @@ export default {
 <style lang="less" scoped>
 @import url('../index.less');
 @import url('../style/basicInfo.less');
-.ant-col-xl-4-8{
-  width: 20%;
-}
-/deep/ .ant-card-body{
-    padding-left: 10px !important;
-  }
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/billInfo.vue b/src/views/main/BookingLedger/detail/modules/billInfo.vue
index 09d49c6..e9e83ca 100644
--- a/src/views/main/BookingLedger/detail/modules/billInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/billInfo.vue
@@ -1,9 +1,290 @@
 <template>
   <a-collapse class="collapse-box bill-info-box" :bordered="false" v-model="showKey">
     <a-collapse-panel key="1" :showArrow="false">
+      <template slot="header">
+        <div class="base-tit"><i class="iconfont icon-electronic-signature"></i>签单信息 <span class="click-btn" @click.stop="tabStopFun"></span></div>
+      </template>
+      <template slot="extra">
+        <div class="tab-change"><i class="iconfont icon-xia" :class="{'active': !showKey.includes('1')}"></i></div>
+      </template>
       <div class="container bill-info">
         <a-form-model ref="billFrom" :model="details" :rules="rules">
           <a-row :gutter="10">
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="签单方式"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="issuetype"
+              >
+                <selectView
+                  type="issuetype"
+                  :defaultVal="details.issuetype"
+                  searchApi="Codeissuetypelist"
+                  :searchQuery="{ KeyWord: '' }"
+                  :showLabel="['enName', 'cnName']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="签单日期"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="issuedate"
+              >
+                <datePickerView
+                  class="date-picker"
+                  :parentVal="details.issuedate"
+                  type="issuedate"
+                  format="YYYY-MM-DD"
+                  @dateChange="dateChangeFun"
+                ></datePickerView>
+                <!-- <a-date-picker size="small" v-model="details.issuedate" format="YYYY-MM-DD" /> -->
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="签单地点"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="issueplace"
+              >
+                <selectView
+                  type="issueplace"
+                  :defaultVal="details.issueplace"
+                  searchApi="GetPortloadlist"
+                  :searchQuery="{ KeyWord: '' }"
+                  :showLabel="['enName']"
+                  :openSearch="true"
+                  :isCopy="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="签单地代码"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="issueplaceid"
+              >
+                <inputView type="issueplaceid" size="small" :parentVal="details.issueplaceid" @getInputChange="inputChange"/>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="提单份数"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="nobill"
+              >
+                <selectView
+                  type="nobill"
+                  :defaultVal="details.nobill"
+                  searchApi="nobillData"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="副本份数"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="copynobill"
+              >
+                <selectView
+                  type="copynobill"
+                  :defaultVal="details.copynobill"
+                  searchApi="copynobilllData"
+                  :searchQuery="{ name: '' }"
+                  :showLabel="['name']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="预付地点"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="prepardat"
+              >
+                <selectView
+                  type="prepardat"
+                  :defaultVal="details.prepardat"
+                  searchApi="GetPortloadlist"
+                  :searchQuery="{ KeyWord: '' }"
+                  :showLabel="['enName']"
+                  :openSearch="true"
+                  :isCopy="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="到付地点"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="payableat"
+              >
+                <selectView
+                  type="payableat"
+                  :defaultVal="details.payableat"
+                  searchApi="GetPortlist"
+                  :searchQuery="{ KeyWord: '' }"
+                  :showLabel="['enName']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="付费方式"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="blfrt"
+              >
+                <selectView
+                  type="blfrt"
+                  :defaultVal="details.blfrt"
+                  searchApi="GetFrt"
+                  :searchQuery="{ KeyWord: '' }"
+                  :showLabel="['enName']"
+                  :openSearch="false"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="第三付款地"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="thirdpayaddr"
+              >
+                <inputView type="thirdpayaddr" size="small" :parentVal="details.thirdpayaddr" @getInputChange="inputChange"/>
+              </a-form-model-item>
+            </a-col>
+            <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+              <a-form-model-item
+                class="from-label"
+                label="运输条款"
+                :labelCol="labelCol"
+                :wrapperCol="wrapperCol"
+                has-feedback
+                prop="service"
+              >
+                <selectView
+                  type="service"
+                  :defaultVal="details.service"
+                  searchApi="GetService"
+                  :searchQuery="{ KeyWord: '' }"
+                  :showLabel="['name']"
+                  :openSearch="true"
+                  @change="getSelectViewRes"
+                ></selectView>
+              </a-form-model-item>
+            </a-col>
+            <template v-if="details.cargoid == 'R'">
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="冷藏通风量"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="reeferf"
+                >
+                  <inputView type="reeferf" size="small" :parentVal="details.reeferf" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="设置温度"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="tempset"
+                >
+                  <inputView type="tempset" size="small" :parentVal="details.tempset" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="温度单位"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="tempid"
+                >
+                  <a-select size="small" :default-value="details.tempid || 'C摄氏'" v-model="details.tempid">
+                    <a-select-option value="C"> C摄氏 </a-select-option>
+                    <a-select-option value="F"> F华氏 </a-select-option>
+                  </a-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="最低温度"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="tempmin"
+                >
+                  <inputView type="tempmin" size="small" :parentVal="details.tempmin" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item
+                  class="from-label"
+                  label="最高温度"
+                  :labelCol="labelCol"
+                  :wrapperCol="wrapperCol"
+                  has-feedback
+                  prop="tempmax"
+                >
+                  <inputView type="tempmax" size="small" :parentVal="details.tempmax" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                <a-form-model-item class="from-label" label="湿度" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback prop="humidity">
+                  <inputView type="humidity" size="small" :parentVal="details.humidity" @getInputChange="inputChange"/>
+                </a-form-model-item>
+              </a-col>
+            </template>
             <template v-if="details.cargoid == 'D'">
               <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                 <a-form-model-item
@@ -152,6 +433,12 @@ export default {
         }
       });
     },
+    handleCopyNoChange(value) {
+      this.details.copynobill = value
+    },
+    handleNoChange(value) {
+      this.details.nobill = value
+    },
     getSelectViewRes({ type, res }) {
       if (['issuetype', 'blfrt'].includes(type)) {
         this.details[type] = res.enName || ''
@@ -179,6 +466,11 @@ export default {
     },
     dateChangeFun ({ type, value }) {
       this.details[type] = value || ''
+    },
+    tabStopFun () {
+      return false
+    },
+    tabChangeFun () {
     }
   }
 }
diff --git a/src/views/main/BookingLedger/detail/modules/cargoInfo.vue b/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
index 3bc7e7e..ff8275c 100644
--- a/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/cargoInfo.vue
@@ -11,8 +11,8 @@
       </template>
       <div class="container cargo-info">
         <a-form-model :selfUpdate="true" ref="cargoFrom" :model="details" :rules="rules">
-          <a-row :gutter="10">
-            <a-col :span="5">
+          <a-row :gutter="20">
+            <a-col :span="8">
               <div class="cargo-info-tit" :class="{ 'required': rules['marks'] && rules['marks'][0].required }">
                 <div>Seal No.(封志号)<span
                   @click="handleOpen(1)"
@@ -39,7 +39,7 @@
                 </div>
               </a-form-model-item>
             </a-col>
-            <a-col :span="10">
+            <a-col :span="16">
               <div class="line">
                 <div
                   class="left"
@@ -118,222 +118,6 @@
                 </div>
               </a-form-model-item>
             </a-col>
-            <a-col :span="9">
-              <a-col :span="12">
-                <a-form-model-item
-                  class="from-label pkgs-line-box"
-                  label="件数"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="pkgs">
-                  <div class="line-box">
-                    <a-input
-                      :allowClear="true"
-                      size="small"
-                      v-model="details.pkgs"
-                      type="number"
-                      @change="changePkgs" />
-                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('pkgs')"></i>
-                  </div>
-                </a-form-model-item>
-              </a-col>
-              <a-col :span="12" style="overflow: hidden">
-                <a-form-model-item
-                  class="from-label"
-                  label="包装"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="kindpkgs">
-                  <selectView
-                    type="kindpkgs"
-                    :defaultVal="details.kindpkgs"
-                    searchApi="GetPackage"
-                    :searchQuery="{ KeyWord: '' }"
-                    :showLabel="['name']"
-                    :openSearch="false"
-                    @change="getSelectViewRes">
-                  </selectView>
-                </a-form-model-item>
-              </a-col>
-              <a-col :span="12" style="overflow: hidden">
-                <a-form-model-item
-                  class="from-label kgs-line-box"
-                  label="毛重"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="kgs">
-                  <div class="line-box">
-                    <a-input size="small" :allowClear="true" v-model="details.kgs" />
-                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
-                    <span class="unit">KGS</span>
-                  </div>
-                </a-form-model-item>
-              </a-col>
-              <a-col :span="12" style="overflow: hidden">
-                <a-form-model-item
-                  class="from-label cbm-line-box"
-                  label="尺寸"
-                  :labelCol="labelCol"
-                  :wrapperCol="wrapperCol"
-                  has-feedback
-                  prop="cbm">
-                  <div class="line-box">
-                    <a-input size="small" :allowClear="true" v-model="details.cbm" />
-                    <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
-                    <span class="unit">CBM</span>
-                  </div>
-                </a-form-model-item>
-              </a-col>
-              <template v-if="details.cargoid == 'R'">
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="冷藏通风量"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="reeferf"
-                  >
-                    <inputView type="reeferf" size="small" :parentVal="details.reeferf" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="设置温度"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="tempset"
-                  >
-                    <inputView type="tempset" size="small" :parentVal="details.tempset" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="温度单位"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="tempid"
-                  >
-                    <a-select size="small" :default-value="details.tempid || 'C摄氏'" v-model="details.tempid">
-                      <a-select-option value="C"> C摄氏 </a-select-option>
-                      <a-select-option value="F"> F华氏 </a-select-option>
-                    </a-select>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="最低温度"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="tempmin"
-                  >
-                    <inputView type="tempmin" size="small" :parentVal="details.tempmin" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="最高温度"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="tempmax"
-                  >
-                    <inputView type="tempmax" size="small" :parentVal="details.tempmax" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="湿度"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="humidity">
-                    <inputView type="humidity" size="small" :parentVal="details.humidity" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-              </template>
-              <template v-if="details.cargoid == 'D'">
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="危险品等级"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="dclass"
-                  >
-                    <inputView type="dclass" size="small" :parentVal="details.dclass" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="危险品编号"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="dunno"
-                  >
-                    <inputView type="dunno" size="small" :parentVal="details.dunno" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="危险品页号"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="dpage"
-                  >
-                    <inputView type="dpage" size="small" :parentVal="details.dpage" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="危险品标签"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="dlabel"
-                  >
-                    <inputView type="dlabel" size="small" :parentVal="details.dlabel" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item
-                    class="from-label"
-                    label="危险品联系人"
-                    :labelCol="{
-                      xs: { span: 24 },
-                      sm: { span: 10 },
-                      md: { span: 12 }
-                    }"
-                    :wrapperCol="{
-                      xs: { span: 24 },
-                      sm: { span: 14 },
-                      md: { span: 12 }
-                    }"
-                    has-feedback
-                    prop="linkman"
-                  >
-                    <inputView type="linkman" size="small" :parentVal="details.linkman" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-              </template>
-            </a-col>
             <a-col class="num-box" :span="24">
               <span class="label">件数大写: </span>
               <a-input
@@ -385,46 +169,6 @@
 
         </div>
       </a-modal>
-      <a-modal width="500px" :maskClosable="false" v-model="textEntryModalVisible" :title="textEntryModalTitle">
-        <div class="text-entry-box">
-          <!-- 件数包装 -->
-          <a-form v-if="textEntryType === 'pkgs'">
-            <div class="text-input">
-              <a-textarea
-                v-model="details.pkgstotal"
-                placeholder="请输入内容"
-                :auto-size="{ minRows: 6, maxRows: 9 }"
-                @change="pkgsTextChange" />
-            </div>
-            <div class="total" v-if="pkgstotalRes">总计：{{ pkgstotalRes }}</div>
-          </a-form>
-          <!-- 毛重 -->
-          <a-form v-if="textEntryType === 'kgs'">
-            <div class="text-input">
-              <a-textarea
-                v-model="details.kgstotal"
-                placeholder="请输入内容"
-                :auto-size="{ minRows: 6, maxRows: 9 }"
-                @change="kgsTextChange" />
-            </div>
-            <div class="total" v-if="kgstotalRes">总计：{{ kgstotalRes }} / KGS</div>
-          </a-form>
-          <!-- 尺码 -->
-          <a-form v-if="textEntryType === 'cbm'">
-            <div class="text-input">
-              <a-textarea
-                v-model="details.cbmtotal"
-                placeholder="请输入内容"
-                :auto-size="{ minRows: 6, maxRows: 9 }"
-                @change="cbmTextChange" />
-            </div>
-            <div class="total" v-if="cbmtotalRes">总计：{{ cbmtotalRes }} / CBM</div>
-          </a-form>
-        </div>
-        <template slot="footer">
-          <a-button type="primary" @click="textEntryClose">确定</a-button>
-        </template>
-      </a-modal>
     </a-collapse-panel>
   </a-collapse>
 </template>
@@ -473,48 +217,7 @@ export default {
       showKey: ['1'],
       modelTitle: '',
       modelType: 0,
-      visible: false,
-      labelCol: {
-        xs: { span: 24 },
-        sm: { span: 8 },
-        md: { span: 8 }
-      },
-      wrapperCol: {
-        xs: { span: 24 },
-        sm: { span: 16 },
-        md: { span: 16 }
-      },
-      labelColCode: {
-        xs: { span: 24 },
-        sm: { span: 8 },
-        md: { span: 10 }
-      },
-      wrapperColCode: {
-        xs: { span: 24 },
-        sm: { span: 16 },
-        md: { span: 14 }
-      },
-      shippername: '',
-      consigneename: '',
-      notifypartyname: '',
-      foreignAgentname: '',
-      notifypartY2name: '',
-      modelVisible: false,
-      modelconfirm: false,
-      modelName: '',
-      yardType: '',
-      yardVisible: false,
-      customerModelconfirm: false,
-      textEntryModalVisible: false,
-      textEntryType: '',
-      textEntryModalTitle: '',
-      pkgstotalRes: 0,
-      kgstotalRes: 0,
-      cbmtotalRes: 0,
-      portdischargeHasline: false,
-      destinationidHasline: false,
-      userHasLine: false
-
+      visible: false
       // goodsnameData: []
     }
   },
@@ -560,224 +263,8 @@ export default {
         document.getElementById('description-scroll-right').scrollTop = descriptionScroll.scrollTop
       })
     }
-    setTimeout(() => {
-      this.changePkgs()
-    }, 2000)
   },
   methods: {
-    SetTOTALNO(SS) {
-      SS = SS.toString()
-      const i = SS.indexOf('\n')
-      let num = 0
-      let strKind = ''
-      let enCapital = ''
-      if (i > 0) {
-        const slist = SS.split('\n')
-        for (let i = 0; i < slist.length; i += 1) {
-          const member = slist[i]
-          const strNum = this.GetStringNum(member)
-          if (i == 0) {
-            strKind = member.substring(strNum.length)
-          }
-          num = parseFloat(num).add(parseFloat(strNum))
-        }
-        if (strKind !== '') {
-          enCapital = strKind
-        } else {
-          strKind = this.details.kindpkgs
-          enCapital = this.ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
-        }
-      } else {
-        const strNum = this.GetStringNum(SS)
-        strKind = SS.substring(strNum.length)
-        if (strKind !== '') {
-          console.log(strKind)
-          enCapital = strKind
-        } else {
-          strKind = this.details.kindpkgs
-          enCapital = 'SAY:' + this.ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
-        }
-      }
-      return enCapital
-    },
-    ToEn(a) {
-      // eslint-disable-next-line no-array-constructor
-      const arr1 = new Array('', ' thousand', ' million', ' billion')
-      const b = a.length
-      let f = null
-      let h = 0
-      let g = ''
-      const e = Math.ceil(b / 3)
-      const k = b - e * 3
-      g = ''
-      for (f = k; f < b; f += 3) {
-        ++h
-        // eslint-disable-next-line no-undef
-        const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
-        // eslint-disable-next-line no-undef
-        const strEng = this.English(num3)
-        // eslint-disable-next-line eqeqeq
-        if (strEng != '') {
-          // eslint-disable-next-line eqeqeq
-          if (g != '') g += ' '
-          g += this.English(num3) + arr1[e - h]
-        }
-      }
-      return g
-    },
-    English(a) {
-      // eslint-disable-next-line no-array-constructor
-      var arr1 = new Array('', ' thousand', ' million', ' billion')
-      // eslint-disable-next-line no-array-constructor
-      var arr2 = new Array('zero', 'ten', 'twenty', 'thirty', 'forty', 'fifty', 'sixty', 'seventy', 'eighty', 'ninety')
-      // eslint-disable-next-line no-array-constructor
-      var arr3 = new Array('zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine')
-      // eslint-disable-next-line no-array-constructor
-      var arr4 = new Array(
-        'ten',
-        'eleven',
-        'twelve',
-        'thirteen',
-        'fourteen',
-        'fifteen',
-        'sixteen',
-        'seventeen',
-        'eighteen',
-        'nineteen'
-      )
-
-      let strRet = ''
-      // eslint-disable-next-line eqeqeq
-      if (a.length == 3 && a.substr(0, 3) != '000') {
-        if (a.substr(0, 1) != '0') {
-          strRet += arr3[a.substr(0, 1)] + ' hundred'
-          if (a.substr(1, 2) != '00') strRet += ' and '
-        } else {
-          strRet += ' and '
-        }
-        a = a.substring(1)
-      }
-      if (a.length == 2) {
-        if (a.substr(0, 1) == '0') a = a.substring(1)
-        else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
-        else {
-          strRet += arr2[a.substr(0, 1)]
-          if (a.substr(1, 1) != '0') strRet += '-'
-          a = a.substring(1)
-        }
-      }
-      if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
-      return strRet
-    },
-    editTextEntryModel(type) {
-      this.textEntryModalVisible = true
-      this.textEntryType = type
-      if (type === 'pkgs') {
-        this.textEntryModalTitle = '件数/包装'
-        if (this.details.pkgstotal) {
-          this.pkgsTextChange()
-        } else {
-          this.pkgstotalRes = 0
-        }
-      } else if (type === 'kgs') {
-        this.textEntryModalTitle = '毛重'
-        if (this.details.kgstotal) {
-          this.kgsTextChange()
-        } else {
-          this.kgstotalRes = 0
-        }
-      } else if (type === 'cbm') {
-        this.textEntryModalTitle = '尺码'
-        if (this.details.cbmtotal) {
-          this.cbmTextChange()
-        } else {
-          this.cbmtotalRes = 0
-        }
-      }
-    },
-    textEntryClose() {
-      this.textEntryModalVisible = false
-      this.textEntryModalTitle = ''
-      this.textEntryType = false
-    },
-    GetStringNum(str) {
-      var num = 0
-      if (str == null || str == '') return num
-      if (str.length == 0) return num
-      var if_find = false
-      var str_num = ''
-      for (var i = 0; i < str.length; i += 1) {
-        var member = str.substr(i, 1)
-        if (
-          member == '0' ||
-          member == '1' ||
-          member == '2' ||
-          member == '3' ||
-          member == '4' ||
-          member == '5' ||
-          member == '6' ||
-          member == '7' ||
-          member == '8' ||
-          member == '9' ||
-          member == '.' ||
-          member == '-'
-        ) {
-          if (!if_find) {
-            str_num = str_num + member
-          }
-        } else {
-          if_find = true
-        }
-      }
-      return str_num
-    },
-    pkgsTextChange() {
-      const pkgsTexyVal = this.details.pkgstotal
-      const arr = pkgsTexyVal.split(/\n|\r/g)
-      let pkgs = 0
-      let kindpkgs = ''
-      arr.map((item, index) => {
-        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
-        if (regexStr && Number(regexStr[0])) {
-          const num1 = Number(regexStr[0])
-          pkgs = (pkgs * 100 + num1 * 100) / 100
-        }
-        if (!kindpkgs && regexStr && /^[a-zA-Z]+$/.test(regexStr[1])) {
-          kindpkgs = regexStr[1]
-        }
-      })
-      this.details.pkgs = parseInt(pkgs)
-      this.details.kindpkgs = kindpkgs
-      this.pkgstotalRes = parseInt(pkgs)
-    },
-    kgsTextChange() {
-      const kgsTexyVal = this.details.kgstotal
-      const arr = kgsTexyVal.split(/\n|\r/g)
-      let kgs = 0
-      arr.map((item, index) => {
-        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
-        if (regexStr && Number(regexStr[0])) {
-          const num1 = Number(regexStr[0])
-          kgs = (kgs * 100 + num1 * 100) / 100
-        }
-      })
-      this.details.kgs = kgs
-      this.kgstotalRes = kgs
-    },
-    cbmTextChange() {
-      const cbmTexyVal = this.details.cbmtotal
-      const arr = cbmTexyVal.split(/\n|\r/g)
-      let cbm = 0
-      arr.map((item, index) => {
-        const regexStr = item.match(/[a-zA-Z]+|[0-9]+(?:\.[0-9]+|)/g)
-        if (regexStr && Number(regexStr[0])) {
-          const num1 = Number(regexStr[0])
-          cbm = (cbm * 100 + num1 * 100) / 100
-        }
-      })
-      this.details.cbm = cbm
-      this.cbmtotalRes = cbm
-    },
     handleOpen(type) {
       this.modelType = type
       if (type === 1) {
@@ -817,21 +304,10 @@ export default {
         this.details.goodsname = res.goodsNameEN || ''
       } else if (type === 'cargoid') {
         this.details.cargoid = res.code || ''
-      } else if (['kindpkgs'].includes(type)) {
-        this.details.kindpkgs = res['name'] || ''
-        const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
-        this.$emit('pkgsEnCapital', enCapitalRes)
       }
     },
-    changePkgs() {
-      const enCapitalRes = this.SetTOTALNO(this.details.pkgs)
-      this.$emit('pkgsEnCapital', enCapitalRes)
-    },
     inputChange({ type, value }) {
       this.details[type] = value
-      if (type === 'pkgs') {
-        this.changePkgs()
-      }
       this.$forceUpdate()
     },
     tabStopFun() {
@@ -861,8 +337,4 @@ export default {
 </style>
 <style lang="less" scoped>
 @import url('../style/cargoInfo.less');
-@import url('../style/mailingInfo.less');
-.cargo-info {
-    padding-bottom: 20px;
-}
 </style>
diff --git a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
index 497c891..40e1772 100644
--- a/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/mailingInfo.vue
@@ -10,7 +10,7 @@
       <template slot="extra">
         <div class="tab-change"><i class="iconfont icon-xia" :class="{ active: !showKey.includes('1') }"></i></div>
       </template>
-      <div class="mail-info" style="padding-bottom: 18px;">
+      <div class="mail-info">
         <a-form-model :selfUpdate="true" ref="mailingFrom" :model="details" :rules="rules">
           <a-row :gutter="10">
             <a-col
@@ -19,7 +19,7 @@
               :sm="24"
               :md="24"
               :lg="10"
-              :xl="8">
+              :xl="11">
               <a-form-model-item has-feedback prop="shipper" class="sender-label" style="overflow: hidden">
                 <div class="sender">
                   <a-tooltip v-if="details.carrierid === 'PIL'">
@@ -181,14 +181,237 @@
               :sm="24"
               :md="24"
               :lg="14"
-              :xl="16">
-              <a-row :gutter="4">
-                <a-col :span="6">
+              :xl="13">
+              <a-row :gutter="16">
+                <div class="right-content-top">
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label yarn-label"
+                      label="场站"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      style="overflow: visible"
+                      prop="yard">
+                      <div class="yard-box" style="display: flex">
+                        <selectView
+                          type="yard"
+                          :defaultVal="details.yard"
+                          searchApi="GetYardlist"
+                          :searchQuery="{ keyword: '' }"
+                          :showLabel="['name', 'showCode']"
+                          :openSearch="false"
+                          @change="getSelectViewRes"
+                          style="flex: 1; margin-top: -4px"></selectView>
+                        <i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
+                        <i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
+                      </div>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="场站费自结"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="feeself">
+                      <a-radio-group size="small" v-model="details.feeself">
+                        <a-radio size="small" :value="true"> 是 </a-radio>
+                        <a-radio size="small" :value="false"> 否 </a-radio>
+                      </a-radio-group>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="报关行"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="customser">
+                      <selectView
+                        type="customser"
+                        :defaultVal="details.customser"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'customs_broker' }"
+                        :showLabel="['shortName']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"></selectView>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="车队"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="trucker">
+                      <selectView
+                        type="trucker"
+                        :defaultVal="details.trucker"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'fleet' }"
+                        :showLabel="['shortName']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"></selectView>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="国外代理"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="agentname">
+                      <div style="display: flex;align-items: center;">
+                        <selectView
+                          type="agentname"
+                          :defaultVal="details.agentname"
+                          searchApi="DjyCustomerpage"
+                          :searchQuery="{ SearchValue: '', PropString: 'out_agent' }"
+                          :showLabel="['shortName']"
+                          :openSearch="true"
+                          @change="getSelectViewRes"
+                          style="flex: 1;"></selectView>
+                        <a-icon
+                          v-if="ishd"
+                          @click="handleOpenFd"
+                          style="color: #13c2c2;cursor: pointer;"
+                          theme="filled"
+                          type="diff" />
+                      </div>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="仓库"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="warehouse">
+                      <selectView
+                        type="warehouse"
+                        :defaultVal="details.warehouse"
+                        searchApi="DjyCustomerpage"
+                        :searchQuery="{ SearchValue: '', PropString: 'warehouse' }"
+                        :showLabel="['shortName']"
+                        :openSearch="true"
+                        @change="getSelectViewRes"></selectView>
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="装运方式"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="shippingMethod">
+                      <selectView
+                        type="shippingMethod"
+                        :defaultVal="details.shippingMethod"
+                        searchApi="ShippingMethod"
+                        :searchQuery="{ name: '' }"
+                        :showLabel="['name']"
+                        :openSearch="false"
+                        :isCopy="true"
+                        @change="getSelectViewRes"></selectView>
+                    </a-form-model-item>
+                  </a-col>
+                </div>
+                <a-row>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="截港时间"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="closingdate">
+                      <datePickerView
+                        class="date-picker"
+                        style="min-width: 100px"
+                        :showTime="true"
+                        :parentVal="details.closingdate"
+                        type="closingdate"
+                        format="YYYY-MM-DD HH:00"
+                        @dateChange="dateChangeFun"></datePickerView>
+                      <!-- <a-date-picker
+                      style="min-width:100px"
+                      show-time
+                      format="YYYY-MM-DD HH:00"
+                      v-model="details.closingdate"
+                      @change="closingdateChange"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker> -->
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="截单时间"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="closedocdate">
+                      <datePickerView
+                        class="date-picker"
+                        style="min-width: 100px"
+                        :showTime="true"
+                        :parentVal="details.closedocdate"
+                        type="closedocdate"
+                        format="YYYY-MM-DD HH:00"
+                        @dateChange="dateChangeFun"></datePickerView>
+                      <!-- <a-date-picker
+                      style="min-width:100px"
+                      show-time
+                      format="YYYY-MM-DD HH:00"
+                      v-model="details.closedocdate"
+                      @change="closedocdateChange"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker> -->
+                    </a-form-model-item>
+                  </a-col>
+                  <a-col :span="12">
+                    <a-form-model-item
+                      class="from-label"
+                      label="VGM时间"
+                      :labelCol="labelCol"
+                      :wrapperCol="wrapperCol"
+                      has-feedback
+                      prop="closevgmdate">
+                      <datePickerView
+                        class="date-picker"
+                        style="min-width: 100px"
+                        :showTime="true"
+                        :parentVal="details.closevgmdate"
+                        type="closevgmdate"
+                        format="YYYY-MM-DD HH:00"
+                        @dateChange="dateChangeFun"></datePickerView>
+                      <!-- <a-date-picker
+                      style="min-width:100px"
+                      show-time
+                      format="YYYY-MM-DD HH:00"
+                      v-model="details.closevgmdate"
+                      @change="closevgmdateChange"
+                    >
+                      <a-icon slot="suffixIcon" type="time" style="display: none" />
+                    </a-date-picker> -->
+                    </a-form-model-item>
+                  </a-col>
+                </a-row>
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="收货地代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
                     has-feedback
                     prop="placereceiptid">
                     <selectView
@@ -201,7 +424,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="收货地"
@@ -216,54 +439,12 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label yarn-label"
-                    label="场站"
-                    :labelCol="{ xs: { span: 24 },
-                                 sm: { span: 5 },
-                                 md: { span: 5 }}"
-                    :wrapperCol="{ xs: { span: 24 },
-                                   sm: { span: 19 },
-                                   md: { span: 19 }}"
-                    has-feedback
-                    style="overflow: visible"
-                    prop="yard">
-                    <div class="yard-box" style="display: flex">
-                      <selectView
-                        type="yard"
-                        :defaultVal="details.yard"
-                        searchApi="GetYardlist"
-                        :searchQuery="{ keyword: '' }"
-                        :showLabel="['name', 'showCode']"
-                        :openSearch="false"
-                        @change="getSelectViewRes"
-                        style="flex: 1; margin-top: -4px"></selectView>
-                      <i class="iconfont icon-touxiang" style="margin: 0 4px" @click="changeYard('content')"></i>
-                      <i class="iconfont icon-bianji1" @click="changeYard('remark')"></i>
-                    </div>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="场站费自结"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="feeself">
-                    <a-radio-group size="small" v-model="details.feeself">
-                      <a-radio size="small" :value="true"> 是 </a-radio>
-                      <a-radio size="small" :value="false"> 否 </a-radio>
-                    </a-radio-group>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="装货港代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
+                    :labelCol="labelCol"
+                    :wrapperCol="wrapperCol"
                     has-feedback
                     prop="portloadid">
                     <selectView
@@ -277,7 +458,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="装货港"
@@ -288,52 +469,13 @@
                     <inputView type="portload" size="small" :parentVal="details.portload" @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="截港时间"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="closingdate">
-                    <datePickerView
-                      class="date-picker"
-                      style="min-width: 100px"
-                      :showTime="true"
-                      :parentVal="details.closingdate"
-                      type="closingdate"
-                      format="YYYY-MM-DD HH:00"
-                      @dateChange="dateChangeFun"></datePickerView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6" >
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
-                    label="船代"
+                    label="中转港代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
-                    prop="shipagency"
-                  >
-                    <selectView
-                      ref="shipagency"
-                      type="shipagency"
-                      :defaultVal="details.shipagency"
-                      searchApi="GetForwarderlist"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['name', 'showCode']"
-                      :openSearch="true"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="中转港代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
                     prop="transportid">
                     <selectView
                       type="transportid"
@@ -345,7 +487,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="中转港"
@@ -360,49 +502,13 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="截单时间"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="closedocdate">
-                    <datePickerView
-                      class="date-picker"
-                      style="min-width: 100px"
-                      :showTime="true"
-                      :parentVal="details.closedocdate"
-                      type="closedocdate"
-                      format="YYYY-MM-DD HH:00"
-                      @dateChange="dateChangeFun"></datePickerView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
-                    label="报关行"
+                    label="卸货港代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
-                    prop="customser">
-                    <selectView
-                      type="customser"
-                      :defaultVal="details.customser"
-                      searchApi="DjyCustomerpage"
-                      :searchQuery="{ SearchValue: '', PropString: 'customs_broker' }"
-                      :showLabel="['shortName']"
-                      :openSearch="true"
-                      @change="getSelectViewRes"></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="卸货港代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
                     prop="portdischargeid">
                     <selectView
                       type="portdischargeid"
@@ -414,7 +520,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="卸货港"
@@ -429,49 +535,13 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="VGM时间"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="closevgmdate">
-                    <datePickerView
-                      class="date-picker"
-                      style="min-width: 100px"
-                      :showTime="true"
-                      :parentVal="details.closevgmdate"
-                      type="closevgmdate"
-                      format="YYYY-MM-DD HH:00"
-                      @dateChange="dateChangeFun"></datePickerView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
-                    label="车队"
+                    label="目的地代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
-                    prop="trucker">
-                    <selectView
-                      type="trucker"
-                      :defaultVal="details.trucker"
-                      searchApi="DjyCustomerpage"
-                      :searchQuery="{ SearchValue: '', PropString: 'fleet' }"
-                      :showLabel="['shortName']"
-                      :openSearch="true"
-                      @change="getSelectViewRes"></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="目的地代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
                     prop="destinationid">
                     <selectView
                       type="destinationid"
@@ -483,7 +553,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="目的地"
@@ -498,60 +568,13 @@
                       @getInputChange="inputChange" />
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="航线"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="lineName"
-                  >
-                    <selectView
-                      type="lineName"
-                      :defaultVal="details.lineName"
-                      searchApi="GetTenantLineList"
-                      :searchQuery="{ LineName: '' }"
-                      :showLabel="['name']"
-                      :openSearch="false"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
-                    label="国外代理"
+                    label="交货地代码"
                     :labelCol="labelCol"
                     :wrapperCol="wrapperCol"
                     has-feedback
-                    prop="agentname">
-                    <div style="display: flex;align-items: center;">
-                      <selectView
-                        type="agentname"
-                        :defaultVal="details.agentname"
-                        searchApi="DjyCustomerpage"
-                        :searchQuery="{ SearchValue: '', PropString: 'out_agent' }"
-                        :showLabel="['shortName']"
-                        :openSearch="true"
-                        @change="getSelectViewRes"
-                        style="flex: 1;"></selectView>
-                      <a-icon
-                        v-if="ishd"
-                        @click="handleOpenFd"
-                        style="color: #13c2c2;cursor: pointer;"
-                        theme="filled"
-                        type="diff" />
-                    </div>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="交货地代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
                     prop="placedeliveryid">
                     <selectView
                       type="placedeliveryid"
@@ -563,7 +586,7 @@
                       @change="getSelectViewRes"></selectView>
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
+                <a-col :span="12">
                   <a-form-model-item
                     class="from-label"
                     label="交货地"
@@ -579,267 +602,7 @@
                     <!-- <a-input :allowClear="true" v-model="details.placedelivery" /> -->
                   </a-form-model-item>
                 </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="装运方式"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="shippingMethod">
-                    <selectView
-                      type="shippingMethod"
-                      :defaultVal="details.shippingMethod"
-                      searchApi="ShippingMethod"
-                      :searchQuery="{ name: '' }"
-                      :showLabel="['name']"
-                      :openSearch="false"
-                      :isCopy="true"
-                      @change="getSelectViewRes"></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="仓库"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="warehouse">
-                    <selectView
-                      type="warehouse"
-                      :defaultVal="details.warehouse"
-                      searchApi="DjyCustomerpage"
-                      :searchQuery="{ SearchValue: '', PropString: 'warehouse' }"
-                      :showLabel="['shortName']"
-                      :openSearch="true"
-                      @change="getSelectViewRes"></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="24">
-                  <div style="height: 1px;background: rgb(170 176 185);margin: 5px 0;"></div>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="签单方式"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="issuetype"
-                  >
-                    <selectView
-                      type="issuetype"
-                      :defaultVal="details.issuetype"
-                      searchApi="Codeissuetypelist"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['enName', 'cnName']"
-                      :openSearch="false"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="签单日期"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="issuedate"
-                  >
-                    <datePickerView
-                      class="date-picker"
-                      :parentVal="details.issuedate"
-                      type="issuedate"
-                      format="YYYY-MM-DD"
-                      @dateChange="dateChangeFun"
-                    ></datePickerView>
-                    <!-- <a-date-picker size="small" v-model="details.issuedate" format="YYYY-MM-DD" /> -->
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="签单地点"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="issueplace"
-                  >
-                    <selectView
-                      type="issueplace"
-                      :defaultVal="details.issueplace"
-                      searchApi="GetPortloadlist"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['enName']"
-                      :openSearch="true"
-                      :isCopy="true"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="签单地代码"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="issueplaceid"
-                  >
-                    <inputView type="issueplaceid" size="small" :parentVal="details.issueplaceid" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="付费方式"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="blfrt"
-                  >
-                    <selectView
-                      type="blfrt"
-                      :defaultVal="details.blfrt"
-                      searchApi="GetFrt"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['enName']"
-                      :openSearch="false"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="预付地点"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="prepardat"
-                  >
-                    <selectView
-                      type="prepardat"
-                      :defaultVal="details.prepardat"
-                      searchApi="GetPortloadlist"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['enName']"
-                      :openSearch="true"
-                      :isCopy="true"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="到付地点"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="payableat"
-                  >
-                    <selectView
-                      type="payableat"
-                      :defaultVal="details.payableat"
-                      searchApi="GetPortlist"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['enName']"
-                      :openSearch="true"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="第三付款地"
-                    :labelCol="labelColCode"
-                    :wrapperCol="wrapperColCode"
-                    has-feedback
-                    prop="thirdpayaddr"
-                  >
-                    <inputView type="thirdpayaddr" size="small" :parentVal="details.thirdpayaddr" @getInputChange="inputChange"/>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="运输条款"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="service"
-                  >
-                    <selectView
-                      type="service"
-                      :defaultVal="details.service"
-                      searchApi="GetService"
-                      :searchQuery="{ KeyWord: '' }"
-                      :showLabel="['name']"
-                      :openSearch="true"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="提单份数"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="nobill"
-                  >
-                    <selectView
-                      type="nobill"
-                      :defaultVal="details.nobill"
-                      searchApi="nobillData"
-                      :searchQuery="{ name: '' }"
-                      :showLabel="['name']"
-                      :openSearch="false"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="6">
-                  <a-form-model-item
-                    class="from-label"
-                    label="副本份数"
-                    :labelCol="labelCol"
-                    :wrapperCol="wrapperCol"
-                    has-feedback
-                    prop="copynobill"
-                  >
-                    <selectView
-                      type="copynobill"
-                      :defaultVal="details.copynobill"
-                      searchApi="copynobilllData"
-                      :searchQuery="{ name: '' }"
-                      :showLabel="['name']"
-                      :openSearch="false"
-                      @change="getSelectViewRes"
-                    ></selectView>
-                  </a-form-model-item>
-                </a-col>
-                <a-col :span="24">
-                  <div style="height: 1px;background: rgb(170 176 185);margin: 5px 0;"></div>
-                </a-col>
-                <a-col :span="12">
-                  <a-form-model-item prop="soremark">
-                    <div class="tit" :class="{'required':rules['soremark'] && rules['soremark'][0].required}"><span class="iconfont icon-bianji"></span>订舱备注</div>
-                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.soremark" />
-                  </a-form-model-item>
-                </a-col>
                 <a-col :span="12">
-                  <a-form-model-item prop="siremark">
-                    <div class="tit" :class="{'required':rules['siremark'] && rules['siremark'][0].required}"><span class="iconfont icon-bianji"></span>截单备注</div>
-                    <a-textarea style="height: 120px !important;" class="input-box" v-model="details.siremark" data-next="box-ctnall"/>
-                  </a-form-model-item>
-                </a-col>
-                <!-- <a-col :span="12">
                   <a-form-model-item
                     class="from-label pkgs-line-box"
                     label="件数"
@@ -848,6 +611,7 @@
                     has-feedback
                     prop="pkgs">
                     <div class="line-box">
+                      <!-- <inputView type="pkgs" :parentVal="details.pkgs" inputType="number" @getInputChange="inputChange"/> -->
                       <a-input
                         :allowClear="true"
                         size="small"
@@ -886,6 +650,7 @@
                     has-feedback
                     prop="kgs">
                     <div class="line-box">
+                      <!-- <inputView type="kgs" :parentVal="details.kgs" @getInputChange="inputChange"/> -->
                       <a-input size="small" :allowClear="true" v-model="details.kgs" />
                       <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('kgs')"></i>
                       <span class="unit">KGS</span>
@@ -901,12 +666,13 @@
                     has-feedback
                     prop="cbm">
                     <div class="line-box">
+                      <!-- <inputView type="cbm" :parentVal="details.cbm" @getInputChange="inputChange"/> -->
                       <a-input size="small" :allowClear="true" v-model="details.cbm" />
                       <i class="iconfont icon-bianji1 edit-icon" @click="editTextEntryModel('cbm')"></i>
                       <span class="unit">CBM</span>
                     </div>
                   </a-form-model-item>
-                </a-col> -->
+                </a-col>
               </a-row>
             </a-col>
           </a-row>
@@ -1236,16 +1002,6 @@ export default {
         sm: { span: 16 },
         md: { span: 16 }
       },
-      labelColCode: {
-        xs: { span: 24 },
-        sm: { span: 8 },
-        md: { span: 10 }
-      },
-      wrapperColCode: {
-        xs: { span: 24 },
-        sm: { span: 16 },
-        md: { span: 14 }
-      },
       YardlabelCol: {
         xs: { span: 24 },
         sm: { span: 1 },
@@ -1361,7 +1117,6 @@ export default {
         this.details.portload = 'QINGDAO,CHINA'
         this.details.placereceipt = 'QINGDAO,CHINA'
       }
-      this.$refs.shipagency.value = this.frompre[0].forwarder
     },
     debounce(func, wait, ...args) {
       if (timer) clearTimeout(timer)
@@ -1887,30 +1642,6 @@ export default {
         this.$emit('pkgsEnCapital', enCapitalRes)
       } else if (['shippingMethod'].includes(type)) {
         this.details.shippingMethod = res['name'] || ''
-      } else if (type === 'shipagency') {
-        this.details.shipagency = res.name || ''
-        this.details.shipagencyid = res.code || ''
-      } else if (type === 'lineName') {
-        this.details[type] = res.name || ''
-        this.$emit('editLineName', true)
-      } else if (['issuetype', 'blfrt'].includes(type)) {
-        this.details[type] = res.enName || ''
-        if (type === 'blfrt') {
-          if (this.details.blfrt === 'FREIGHT COLLECT') {
-            this.details.payableat = this.details.payableat ? this.details.payableat : this.details.portdischarge || ''
-            this.details.payableatid = this.details.payableatid ? this.details.payableatid : this.details.portdischargeid || ''
-          } else {
-            this.details.prepardat = this.details.prepardat ? this.details.prepardat : this.details.portload || ''
-            this.details.prepardatid = this.details.prepardatid ? this.details.prepardatid : this.details.portloadid || ''
-          }
-        }
-      } else if (['issueplace', 'prepardat', 'payableat'].includes(type)) {
-        this.details[type] = res.enName || ''
-        this.details[`${type}id`] = res.ediCode || ''
-      } else if (['service'].includes(type)) {
-        this.details[type] = res.name || ''
-      } else if (['nobill', 'copynobill'].includes(type)) {
-        this.details[type] = res.code || ''
       }
     },
     dateChangeFun({ type, value }) {
@@ -1940,7 +1671,4 @@ export default {
     color: @primary-color;
   }
 }
-.tit{
-  line-height: 26px;
-}
 </style>