diff --git a/src/api/modular/main/BookingLedger.js b/src/api/modular/main/BookingLedger.js
index 82779cc..f270a50 100644
--- a/src/api/modular/main/BookingLedger.js
+++ b/src/api/modular/main/BookingLedger.js
@@ -814,3 +814,27 @@ export function BookingSourcePage(parameter) {
     params: parameter
   })
 }
+
+export function getPageESeaeEdi(parameter) {
+  return axios({
+    url: '/BookingOrderSeaeEdi/PageESeaeEdi',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function CodeCountryList(parameter) {
+  return axios({
+    url: '/commondb/CodeCountryList',
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function seaeEdiSave(parameter) {
+  return axios({
+    url: '/BookingOrderSeaeEdi/Save',
+    method: 'post',
+    data: parameter
+  })
+}
diff --git a/src/layouts/BasicLayout.vue b/src/layouts/BasicLayout.vue
index 014df67..6651e12 100644
--- a/src/layouts/BasicLayout.vue
+++ b/src/layouts/BasicLayout.vue
@@ -132,7 +132,7 @@ export default {
     this.setBookingInfo()
   },
   methods: {
-    ...mapActions(['setSidebar', 'setCarrierList', 'setYardList', 'setPackageList', 'setIssuetypeList', 'setBlfrtList', 'setCtnallList', 'setLineList', 'setBookingSourcePage', 'setBookingInitData']),
+    ...mapActions(['setSidebar', 'setCarrierList', 'setYardList', 'setPackageList', 'setIssuetypeList', 'setBlfrtList', 'setCtnallList', 'setLineList', 'setBookingSourcePage', 'setBookingInitData', 'setCodeCountryList']),
     // 重新生成
     setMenus () {
       const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
@@ -165,6 +165,7 @@ export default {
       this.setBlfrtList()
       this.setCtnallList()
       this.setLineList()
+      this.setCodeCountryList()
       this.setBookingSourcePage()
       this.setBookingInitData()
     }
diff --git a/src/store/getters.js b/src/store/getters.js
index 27c2ec7..898318a 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -28,7 +28,8 @@ const getters = {
   ctnallList: state => state.booking.ctnallList,
   lineList: state => state.booking.lineList,
   bookingInitData: state => state.booking.bookingInitData,
-  sourceList: state => state.booking.sourceList
+  sourceList: state => state.booking.sourceList,
+  countryList: state => state.booking.countryList
 }
 
 export default getters
diff --git a/src/store/modules/booking.js b/src/store/modules/booking.js
index 1ac644d..3834ed6 100644
--- a/src/store/modules/booking.js
+++ b/src/store/modules/booking.js
@@ -7,7 +7,8 @@ import {
   GetCtn,
   GetTenantLineList,
   GetAllSelectData,
-  BookingSourcePage
+  BookingSourcePage,
+  CodeCountryList
 } from '@/api/modular/main/BookingLedger'
 
 const booking = {
@@ -20,6 +21,7 @@ const booking = {
     ctnallList: [],
     lineList: [],
     sourceList: [],
+    countryList: [],
     bookingInitData: {
       customernameInitList: [],
       forwarderInitList: [],
@@ -79,6 +81,9 @@ const booking = {
     },
     SET_BOOKINGINITDATA: (state, obj) => {
       state.bookingInitData = { ...state.bookingInitData, ...obj }
+    },
+    SET_COUNTRYLIST: (state, list) => {
+      state.countryList = list
     }
   },
 
@@ -255,6 +260,26 @@ const booking = {
           })
       })
     },
+    setCodeCountryList({ commit }, obj) {
+      return new Promise(resolve => {
+        CodeCountryList({
+          SearchValue: ''
+        })
+          .then(response => {
+            if (response.success) {
+              commit('SET_COUNTRYLIST', response.data)
+              resolve(response.data)
+            } else {
+              // eslint-disable-next-line no-undef
+              reject(new Error(data.message))
+            }
+          })
+          .catch(error => {
+            // eslint-disable-next-line no-undef
+            reject(error)
+          })
+      })
+    },
     setBookingInitData({ commit }, obj) {
       return new Promise(resolve => {
         GetAllSelectData().then(response => {
diff --git a/src/views/main/BookingLedger/detail/components/inputView.vue b/src/views/main/BookingLedger/detail/components/inputView.vue
index 1fb443f..96cb8aa 100644
--- a/src/views/main/BookingLedger/detail/components/inputView.vue
+++ b/src/views/main/BookingLedger/detail/components/inputView.vue
@@ -2,7 +2,7 @@
   <div class="input-content">
     <input
       class="ant-input input-box"
-      :class="`input-${type}`"
+      :class="[`input-${type}`, {'disabled': ishd}]"
       size="small"
       :type="inputType"
       v-model="value"
@@ -41,13 +41,13 @@ export default {
   },
   data() {
     return {
-      value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal
+      value: this.parentVal !== 0 && !this.parentVal ? '' : this.parentVal,
     }
   },
   watch: {
     parentVal(nval, oval) {
       this.value = nval
-    },
+    }
   },
   mounted() {
   },
@@ -86,6 +86,10 @@ export default {
     width: 100%;
     height: 24px;
     line-height: 24px;
+    background: #fff !important;
+    &.disabled{
+      background: #f5f5f5 !important;
+    }
   }
   .input-icon{
     position: absolute;
@@ -110,4 +114,5 @@ export default {
     }
   }
 }
+
 </style>
diff --git a/src/views/main/BookingLedger/detail/components/selectView.vue b/src/views/main/BookingLedger/detail/components/selectView.vue
index 0c8f6ba..2bb8425 100644
--- a/src/views/main/BookingLedger/detail/components/selectView.vue
+++ b/src/views/main/BookingLedger/detail/components/selectView.vue
@@ -60,7 +60,8 @@ import {
  GetSysUserPage,
  GetService,
  getGoodsname,
- BookingSourcePage
+ BookingSourcePage,
+ CodeCountryList
 } from '@/api/modular/main/BookingLedger'
 import { mapGetters, mapActions } from 'vuex'
 let timer
@@ -113,7 +114,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters(['carrierList', 'yardList', 'packageList', 'issuetypeList', 'blfrtList', 'lineList', 'bookingInitData', 'sourceList'])
+    ...mapGetters(['carrierList', 'yardList', 'packageList', 'issuetypeList', 'blfrtList', 'lineList', 'bookingInitData', 'sourceList', 'countryList'])
   },
   watch: {
     defaultVal(nval, oval) {
@@ -339,6 +340,12 @@ export default {
           return arr
         case 'sourceName':
           return this.sourceList
+        case 'notifypartycountry':
+          return this.countryList
+        case 'consigneecountry':
+          return this.countryList
+        case 'shippercountry':
+          return this.countryList
       }
     },
     filterOption(input, option) {
@@ -391,7 +398,7 @@ export default {
         this.$refs.selectView.$refs.vcSelect.focus()
       }
       this.open = true
-      if (['cargoid', 'nobill', 'copynobill', 'carrierid', 'yard', 'kindpkgs', 'issuetype', 'blfrt', 'masterBolIndicator', 'salerCode', 'shippingMethod', 'sourceName'].includes(this.type)) {
+      if (['cargoid', 'nobill', 'copynobill', 'carrierid', 'yard', 'kindpkgs', 'issuetype', 'blfrt', 'masterBolIndicator', 'salerCode', 'shippingMethod', 'sourceName', 'notifypartycountry', 'consigneecountry', 'shippercountry'].includes(this.type)) {
         this.selectList = this.emnuData(this.type)
         this.inLoading = false
         return false
@@ -405,7 +412,7 @@ export default {
       }
       if (!e) {
         console.log('首次搜索内容', e, this.type, this.bookingInitData)
-        if (!['vessel', 'lineName'].includes(this.type) && this.bookingInitData[`${this.type}InitList`].length > 0) {
+        if (!['vessel', 'lineName', 'notifypartycountry', 'consigneecountry', 'shippercountry'].includes(this.type) && this.bookingInitData[`${this.type}InitList`].length > 0) {
           console.log(this.bookingInitData[`${this.type}InitList`])
           this.selectList = this.bookingInitData[`${this.type}InitList`]
           return false
diff --git a/src/views/main/BookingLedger/detail/modules/billInfo.vue b/src/views/main/BookingLedger/detail/modules/billInfo.vue
index 75d4b10..e9e83ca 100644
--- a/src/views/main/BookingLedger/detail/modules/billInfo.vue
+++ b/src/views/main/BookingLedger/detail/modules/billInfo.vue
@@ -238,7 +238,6 @@
                   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">
diff --git a/src/views/main/BookingLedger/detail/modules/operationArea.vue b/src/views/main/BookingLedger/detail/modules/operationArea.vue
index 2e3efc0..c1beada 100644
--- a/src/views/main/BookingLedger/detail/modules/operationArea.vue
+++ b/src/views/main/BookingLedger/detail/modules/operationArea.vue
@@ -36,6 +36,9 @@
         <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')">
@@ -167,7 +170,7 @@
             </a-button> -->
           </template>
         </div>
-        <a-form>
+        <a-form class="initCabin-box">
           <a-row :gutter="16">
             <div class="item-box to-box" :style="{ paddingTop: '0px' }">
               <!-- to -->
@@ -708,6 +711,15 @@
       </template>
     </a-modal>
     <!-- 运踪弹窗 end -->
+
+    <!-- 预配舱单列表 start -->
+    <!-- <a-modal width="90vw" :maskClosable="false" v-model="openPreOrderShow" title="预配舱单"> -->
+    <pre-order ref="preOrder" :details="details"/>
+    <!-- <template slot="footer">
+        <a-button type="primary" @click="closeOpenPreOrder">取消</a-button>
+      </template> -->
+    <!-- </a-modal> -->
+    <!-- 预配舱单列表 end -->
   </div>
 </template>
 <script>
@@ -717,7 +729,6 @@ import {
   VgmSend,
   LetterYard,
   SampleBill,
-  VgmLink,
   SendLetterYard,
   SaveBookingLetteryard,
   SaveBookingSampleBill,
@@ -725,19 +736,17 @@ import {
   TxxpLink,
   ExcuteRulesOceanBooking,
   BookingOrderPrintOrder,
-  BookingOrderDownloadPrint,
-  BookingOrderViewPrintPdf,
   BookingOrderOcrUpFile,
   BookingOrderOcrGetImg,
   BookingOrderOcrGetText,
   BookingOrderPrintTemplateWithHistoryList,
   DownloadBookingOrClosingEDI,
   DeleteLetterYard,
-  LetterYardPdf,
   SendTrace,
   GetYardlist
 } from '@/api/modular/main/BookingLedger'
 
+import preOrder from './preOrder'
 export default {
   props: {
     details: {
@@ -751,6 +760,9 @@ export default {
       default: false
     }
   },
+  components: {
+    preOrder
+  },
   data() {
     return {
       id: this.$route.query.id,
@@ -839,6 +851,7 @@ export default {
       cateCode: '',
       spinning: false,
       yardSelectData: null
+      // openPreOrderShow: false
     }
   },
   mounted() {
@@ -1618,6 +1631,16 @@ export default {
     },
     cancelRemove () {
       console.log('== 取消删除 ==')
+    },
+    openPreOrderFun () {
+      if (!this.id) {
+        this.$message.error('请先保存主单')
+        return false
+      }
+      this.$refs.preOrder.init()
+    },
+    closeOpenPreOrder () {
+      this.$refs.preOrder.close()
     }
   }
 }
diff --git a/src/views/main/BookingLedger/detail/modules/preOrder.vue b/src/views/main/BookingLedger/detail/modules/preOrder.vue
new file mode 100644
index 0000000..0df776b
--- /dev/null
+++ b/src/views/main/BookingLedger/detail/modules/preOrder.vue
@@ -0,0 +1,2192 @@
+<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="6">
+          <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="sendOrder()"
+                @cancel="cancelRemove"
+              >
+                <a-button class="order-btn" size="small">发送</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" @change="checkOrderChange($event, sindex)" />
+                  <span class="order-label" :class="{'active': sindex == editIndex}" @click.stop="changeOrder(sindex)">
+                    <!-- <a-tag class="tag" color="#00CC00">已发送</a-tag> -->
+                    <!-- <a-tag class="tag">已录入</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="18">
+          <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="5">
+                      <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="5">
+                      <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>
+                  <template v-else>
+                    <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
+                      >
+                        <selectView
+                          class="copy-input"
+                          ref="vesselView"
+                          type="vessel"
+                          :defaultVal="orderDetails.vessel"
+                          searchApi="getVesselInfoService"
+                          :searchQuery="{
+                            KeyWord: '',
+                            CarrierID: this.details.carrierid || 'CMA',
+                            ETD: this.details.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="forwarder"
+                          :defaultVal="orderDetails.forwarder"
+                          searchApi="GetForwarderlist"
+                          :searchQuery="{ KeyWord: '' }"
+                          :showLabel="['name', 'showCode']"
+                          :openSearch="true"
+                          @change="getSelectViewRes"
+                        ></selectView> -->
+                        <selectView
+                          type="shipagency"
+                          :defaultVal="orderDetails.forwarder"
+                          searchApi="GetForwarderlist"
+                          :searchQuery="{ KeyWord: '' }"
+                          :showLabel="['name', 'showCode']"
+                          :openSearch="true"
+                          @change="getSelectViewRes"
+                        ></selectView>
+                      </a-form-model-item>
+                    </a-col>
+                  </template>
+                </a-row>
+              </div>
+              <div class="pre-mail-info">
+                <a-row>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <div class="title">发货人信息</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
+                            >
+                              <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="shippercountry"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <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">通知人信息</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
+                            >
+                              <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="consigneecountry"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <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">通知人信息</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
+                            >
+                              <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="notifypartycountry"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <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
+                            >
+                              <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
+                            >
+                              <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
+                            >
+                              <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="254"
+                              :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="254"
+                              :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"/>
+                                  <!-- <a-input size="small" :allowClear="true" v-model="details.kgs" /> -->
+                                  <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"/>
+                                  <!-- <a-input size="small" :allowClear="true" v-model="details.kgs" /> -->
+                                  <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="12" :md="12" :lg="12" :xl="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="备注"
+                              :labelCol="{
+                                xs: { span: 24 },
+                                sm: { span: 8 },
+                                md: { span: 3 },
+                              }"
+                              :wrapperCol="{
+                                xs: { span: 24 },
+                                sm: { span: 15 },
+                                md: { span: 20 },
+                              }"
+                              has-feedback
+                              prop="remarks"
+                            >
+                              <inputView type="remarks" :parentVal="details.remarks" @getInputChange="inputChange" />
+                            </a-form-model-item>
+                          </a-col>
+                          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
+                            <a-form-model-item
+                              class="pre-from-label"
+                              label="发送备注"
+                              :labelCol="{
+                                xs: { span: 24 },
+                                sm: { span: 8 },
+                                md: { span: 3 },
+                              }"
+                              :wrapperCol="{
+                                xs: { span: 24 },
+                                sm: { span: 15 },
+                                md: { span: 20 },
+                              }"
+                              has-feedback
+                              prop="sendremark"
+                            >
+                              <inputView type="sendremark" :parentVal="details.sendremark" @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>
+                      <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>
+    </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 } from '@/api/modular/main/BookingLedger'
+import { mapGetters } from 'vuex'
+
+const initData = {
+  id: 0,
+  bookingId: 0,
+
+  mblno: '',
+  hblno: '',
+  etd: '',
+  forwarder: '',
+
+  vessel: '',
+  voyno: '',
+  carrier: '',
+  carrierid: '',
+
+  shippername: '',
+  shipperaddR1: '',
+  shippercountry: '',
+  shippertel: '',
+
+  consigneename: '',
+  consigneeaddR1: '',
+  consigneecountry: '',
+  consigneetel: '',
+
+  notifypartyname: '',
+  notifypartyaddR1: '',
+  notifypartycountry: '',
+  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,
+      size: '',
+      ctn: '',
+      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 {
+      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: true, title: '船名', message: '请选择船名', trigger: 'change' },
+        voyno: { required: true, title: '航次', message: '请选择航次', trigger: 'change' },
+        forwarder: { required: true, title: '船代', message: '请选择船代', trigger: 'change' },
+
+        shippername: { required: true, title: '发货人', message: '请选择发货人', trigger: 'change' },
+        shipperaddR1: { required: true, title: '地址', message: '请输入发货地址', trigger: 'change' },
+        shippercountry: { 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' },
+        consigneecountry: { 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' },
+        notifypartycountry: { 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: {
+          ctn: { 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: 'ctn',
+          key: 'ctn',
+          title: '箱型',
+          align: 'left',
+          width: 80,
+          edit: false,
+          renderBodyCell: ({ row, column, rowIndex }, h) => {
+            // this.openEdit = true
+            return (
+              <a-select
+                size="small"
+                value={row['ctn']}
+                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].ctn = data.name
+                    // this.orderDetails.ediCtn[rowIndex].ctncode = data.code
+                    row['ctn'] = data.name
+                    this.$forceUpdate()
+                  } else {
+                    row['ctn'] = ''
+                    this.orderDetails.ediCtn[rowIndex].ctn = ''
+                    // this.orderDetails.ediCtn[rowIndex].ctncode = ''
+                  }
+                }}
+                on-focus={val => {
+                  // this.ctnallViewIndex = rowIndex
+                }}
+                on-blur={val => {
+                  // this.ctnallViewIndex = null
+                }}
+              >
+                {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.ctn.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
+                }}
+              >
+                {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: []
+    }
+  },
+  watch: {
+    '$route.query': {
+      immediate: true,
+      handler(nD, oD) {
+        this.id = this.$route.query.id
+      },
+    },
+  },
+  created() {
+    // this.init()
+  },
+  methods: {
+    init() {
+      this.openPreOrderShow = true
+      if (this.id) {
+        this.getPageESeaeEdi()
+      } else {
+        this.getNoDataInit()
+      }
+    },
+    close() {
+      this.openPreOrderShow = false
+      this.orderList = []
+      this.orderDetails = {}
+    },
+    getPageESeaeEdi() {
+      getPageESeaeEdi({
+        bookingId: this.id
+      })
+        .then((res) => {
+					if (res.data.length > 0) {
+            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]
+					} else {
+						this.getNoDataInit()
+					}
+          this.preOrderLoad = true
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    getNoDataInit(isHBL = false) {
+      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.forwarder,
+        vessel: $details.vessel,
+        voyno: $details.voyno,
+        carrier: $details.carrier,
+        carrierid: $details.carrierid,
+        shippername: '',
+        shipperaddR1: '',
+        shippercountry: '',
+        shippertel: '',
+        consigneename: '',
+        consigneeaddR1: '',
+        consigneecountry: '',
+        consigneetel: '',
+        notifypartyname: '',
+        notifypartyaddR1: '',
+        notifypartycountry: '',
+        notifypartytel: '',
+        portload: $details.portload,
+        portloadid: $details.portloadid,
+        portdischarge: $details.portdischarge,
+        portdischargeid: $details.portdischargeid,
+        marks: $details.marks,
+        description: $details.description,
+        cargoid: $details.cargoid,
+        tempset: $details.tempset,
+        tempid: $details.tempid,
+        reeferf: $details.reeferf,
+        dclass: $details.dclass,
+        dunno: $details.dunno,
+        dattn: $details.dattn || '',
+        dtel: $details.dtel || '',
+        kindpkgs: $details.kindpkgs,
+        remarks: '',
+        placedelivery: $details.placereceipt,
+        placedeliveryid: $details.placereceiptid,
+        sendremark: '',
+        yardid: $details.yardid,
+        yard: $details.yard,
+        ediCtn: [
+          // {
+          // 	id: 0,
+          // 	pId: 0,
+          // 	size: '',
+          // 	ctn: '',
+          // 	cntrno: '',
+          // 	sealno: '',
+          // 	pkgs: 0,
+          // 	kindpkgs: '',
+          // 	kgs: 0,
+          // 	cbm: 0,
+          //   rowKey: 0
+          // },
+        ],
+      }
+      this.orderDetails = $data
+      this.orderList.push($data)
+    },
+    removeOrder() {},
+    cancelRemove() {},
+    checkOrderChange(e, index) {
+      console.log(e.target.checked, index)
+    },
+    sendOrder() {},
+    inputChange({ type, value }) {
+      this.orderDetails[type] = value
+      this.$forceUpdate()
+    },
+    getSelectViewRes({ 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 (['shippercountry', 'consigneecountry', 'notifypartycountry'].includes(type)) {
+        this.orderDetails[type] = res.enName || ''
+      } 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.code || ''
+      }
+      console.log('=== 预订舱信息 ===', this.orderDetails)
+    },
+    getTextareaChange({ type, value }) {
+      this.orderDetails[type] = value
+      this.$forceUpdate()
+    },
+    // 给可控属性重新赋值
+    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,
+        size: '',
+        ctn: '',
+        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() {
+      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() {
+      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('保存失败，请选择必填项')
+      }
+      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[label] && this.rules[label].required && !item[label]) {
+            tableErrTip = `${tableErrTip}  序号${index + 1}中${this.rules[label].title}未填写,`
+          }
+        })
+      })
+      if (tableErrTip !== '') {
+        this.$message.error(`保存失败， 箱信息错误： ${tableErrTip.substr(0, tableErrTip.length - 1)}`, 3)
+        return false
+      }
+
+      const $data = JSON.parse(JSON.stringify(this.orderDetails))
+      $data.ediCtn.map((item, index) => {
+        delete item.rowKey
+      })
+      seaeEdiSave($data).then((res) => {
+        if (res.success) {
+          this.$message.success('保存成功')
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+      .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
+    }
+  },
+}
+</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;
+    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;
+  }
+}
+.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/rules.js b/src/views/main/BookingLedger/detail/rules.js
index e47d643..32c2275 100644
--- a/src/views/main/BookingLedger/detail/rules.js
+++ b/src/views/main/BookingLedger/detail/rules.js
@@ -142,5 +142,14 @@ export default {
 		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/detail/style/operationArea.less b/src/views/main/BookingLedger/detail/style/operationArea.less
index c4a2ced..0e7278f 100644
--- a/src/views/main/BookingLedger/detail/style/operationArea.less
+++ b/src/views/main/BookingLedger/detail/style/operationArea.less
@@ -80,7 +80,7 @@
       }
     }
     .more-view-1 {
-      width: 270px;
+      width: 332px;
       .iconfont {
         color: #26b578;
       }
@@ -279,58 +279,24 @@
       }
     }
   }
-  
-  // .box-flex{
-  //   /deep/ .ant-modal-body .ant-input-affix-wrapper {
-  //     height: 100px;
-  //     position: relative;
-  //     z-index: 1;
-  //     background: #f99;
-  //     &::after {
-  //       content: '';
-  //       position: absolute;
-  //       top: 0;
-  //       left: 0;
-  //       width: 100%;
-  //       height: 72px !important;
-  //       z-index: -1;
-  //       display: block;
-  //       background-color: @primary-color !important;
-  //       opacity: 0.04;
-  //     }
-  //   }
-  // }
-  // /deep/ .ant-input{
-  //   position: relative;
-  //   z-index: 1;
-  //   &::after {
-  //     content: '';
-  //     position: absolute;
-  //     top: 0;
-  //     left: 0;
-  //     width: 100%;
-  //     height: 100%;
-  //     z-index: -1;
-  //     display: block;
-  //     background-color: @primary-color !important;
-  //     opacity: 0.04;
-  //   }
-  // }
-  /deep/ .ant-select-selection {
-    position: relative;
-    z-index: 1;
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: -1;
-      background-color: @primary-color !important;
-      opacity: 0.04;
+  .initCabin-box{
+    /deep/ .ant-select-selection {
+      position: relative;
+      z-index: 1;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        z-index: -1;
+        background-color: @primary-color !important;
+        opacity: 0.04;
+      }
     }
   }
+ 
   /deep/ .ant-calendar-picker {
     position: relative;
     z-index: 1;