diff --git a/src/views/baseinfo/sendReciveTem/columns.tsx b/src/views/baseinfo/sendReciveTem/columns.tsx
index cbc905d4..742219c6 100644
--- a/src/views/baseinfo/sendReciveTem/columns.tsx
+++ b/src/views/baseinfo/sendReciveTem/columns.tsx
@@ -139,7 +139,7 @@ export const formSchema: FormSchema[] = [
     componentProps: ({ formModel }) => {
       if (CountryDict.value.length == 0) {
         GetCountrySelectList().then((res) => {
-          CountryDict.value = ForData(res.data, 'countryName', 'id')
+          CountryDict.value = ForData(res.data, 'countryName', 'countryCode')
         })
       }
       return {
diff --git a/src/views/operation/seaexport/api/BookingLedger.js b/src/views/operation/seaexport/api/BookingLedger.js
index 90e4c52b..f8cbad14 100644
--- a/src/views/operation/seaexport/api/BookingLedger.js
+++ b/src/views/operation/seaexport/api/BookingLedger.js
@@ -2127,3 +2127,30 @@ export function BatchDelBusinessCtnPrice(data) {
     data
   })
 }
+
+// 五字码获取港口信息
+export function GetClientPortInfoByCode(params) {
+  return request({
+    url: '/mainApi/ClientCommon/GetClientPortInfoByCode',
+    method: 'get',
+    params
+  })
+}
+
+// 舱单列表
+export function GetShippingBillShortList(params) {
+  return request({
+    url: '/opApi/ShippingBill/GetShippingBillShortList',
+    method: 'post',
+    params
+  })
+}
+
+// 舱单 批量保存 (Auth)
+export function SaveShippingBillAsync(parameter) {
+  return request({
+    url: '/opApi/ShippingBill/SaveShippingBillAsync',
+    method: 'post',
+    data: parameter,
+  })
+}
\ No newline at end of file
diff --git a/src/views/operation/seaexport/detail/modules/cargoInfo.vue b/src/views/operation/seaexport/detail/modules/cargoInfo.vue
index 83640b5a..d8faa216 100644
--- a/src/views/operation/seaexport/detail/modules/cargoInfo.vue
+++ b/src/views/operation/seaexport/detail/modules/cargoInfo.vue
@@ -6,23 +6,21 @@
         <a-dropdown>
           <template #overlay>
             <a-menu>
-              <a-menu-item v-for="item in FncargoId" :key="item.value" @click="toggleCargo(item.value)">{{ item.label }}</a-menu-item>
+              <a-menu-item v-for="item in FncargoId" :key="item.value" @click="toggleCargo(item.value)">{{ item.label
+                }}</a-menu-item>
             </a-menu>
           </template>
-          <a-button type="link" :class="{ 'S': cargoId == 'S', 'R': cargoId == 'R', 'D': cargoId == 'D', 'O': cargoId == 'O' }">
-            <span class="iconfont" :class="{ 'icon-xiangzi': cargoId == 'S', 'icon-xuehua1': cargoId == 'R', 'icon-jinggao2': cargoId == 'D', 'icon-Icon-': cargoId == 'O' }"></span>
+          <a-button type="link"
+            :class="{ 'S': cargoId == 'S', 'R': cargoId == 'R', 'D': cargoId == 'D', 'O': cargoId == 'O' }">
+            <span class="iconfont"
+              :class="{ 'icon-xiangzi': cargoId == 'S', 'icon-xuehua1': cargoId == 'R', 'icon-jinggao2': cargoId == 'D', 'icon-Icon-': cargoId == 'O' }"></span>
             {{ cargoName }}
             <span class="iconfont icon-30jiantouxiangxiafill"></span>
           </a-button>
         </a-dropdown>
       </h4>
-      <ConfigForm
-        v-if="source == 'edit'"
-        style="position: absolute; right: 0; top: -5px;"
-        :form-schema="cargoInfoFormSchema2"
-        name="货物信息"
-        formNo="12"
-      >
+      <ConfigForm v-if="source == 'edit' && !isPreOrder" style="position: absolute; right: 0; top: -5px;"
+        :form-schema="cargoInfoFormSchema2" name="货物信息" formNo="12">
         <a-button type="link">
           <span class="iconfont icon-icon_tianjia"></span>
           添加到表单设置
@@ -33,7 +31,7 @@
       <a-col :span="24">
         <a-row :gutter="16">
           <a-col :span="15">
-            <BasicForm @register="registerForm1" class="goods-intro"/>
+            <BasicForm @register="registerForm1" class="goods-intro" />
           </a-col>
           <a-col :span="9">
             <BasicForm @register="registerForm2" @submit="submit" />
@@ -43,33 +41,30 @@
       <a-col :span="24">
         <BasicForm @register="registerForm3"></BasicForm>
       </a-col>
-      <a-col :span="24">
+      <a-col :span="24" v-show="!isPreOrder">
         <BasicForm @register="registerForm4" class="form4">
           <template #ctnPriceInfo="{ model }">
             <a-form-item-rest>
               <div class="flex">
                 <div v-for="(item, index) in model.ctnPriceInfo" :key="index + 'ctn'" class="ctn-price-item">
-                  <a-select
-                    v-bind="$attrs"
-                    v-model:value="item.ctnId"
-                    show-search
-                    placeholder="请选择"
-                    style="width: 72px"
+                  <a-select v-bind="$attrs" v-model:value="item.ctnId" show-search placeholder="请选择" style="width: 72px"
                     :fieldNames="{
                       label: 'ctnName',
                       value: 'id'
-                    }"
-                    :options="optionsStore.getOptionsByCode('GetCtnSelectList')"
-                    :filter-option="filterOption"
-                    @change="ctnChange($event, item)"
-                  >
+                    }" :options="optionsStore.getOptionsByCode('GetCtnSelectList')" :filter-option="filterOption"
+                    @change="ctnChange($event, item)">
                   </a-select>
                   <div style="width: 30px"></div>
-                  <a-input-number v-model:value="item.quotePrice" size="small" :min="0" :max="999999999" placeholder="报价" />
-                  <a-input-number v-model:value="item.guidePrice" size="small" :min="0" :max="999999999" placeholder="指导价" />
-                  <a-input-number v-model:value="item.floorPrice" size="small" :min="0" :max="999999999" placeholder="底价" />
-                  <span v-show="model.ctnPriceInfo.length > 1" @click="deleteCtnPrice(model.ctnPriceInfo, index, item)" class="iconfont icon-del"></span>
-                  <span v-show="model.ctnPriceInfo.length != 3" @click="model.ctnPriceInfo.push({})" class="iconfont icon-zengjiatianjiajiajian"></span>
+                  <a-input-number v-model:value="item.quotePrice" size="small" :min="0" :max="999999999"
+                    placeholder="报价" />
+                  <a-input-number v-model:value="item.guidePrice" size="small" :min="0" :max="999999999"
+                    placeholder="指导价" />
+                  <a-input-number v-model:value="item.floorPrice" size="small" :min="0" :max="999999999"
+                    placeholder="底价" />
+                  <span v-show="model.ctnPriceInfo.length > 1" @click="deleteCtnPrice(model.ctnPriceInfo, index, item)"
+                    class="iconfont icon-del"></span>
+                  <span v-show="model.ctnPriceInfo.length != 3" @click="model.ctnPriceInfo.push({})"
+                    class="iconfont icon-zengjiatianjiajiajian"></span>
                 </div>
               </div>
             </a-form-item-rest>
@@ -80,593 +75,614 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { BasicForm, useForm } from '/@/components/Form/index'
-  import {
-    cargoInfoFormSchema1,
-    cargoInfoFormSchema2,
-    cargoInfoFormSchema3,
-    cargoInfoFormSchema4,
-  } from './baseInfo'
-  console.log(cargoInfoFormSchema2)
-  import { ref, watch, onMounted, computed } from 'vue'
-  import { useRoute } from 'vue-router'
-  import { getDictOption } from '/@/utils/dictUtil'
-  import { BatchDelBusinessCtnPrice } from '/@/views/operation/seaexport/api/BookingLedger'
-  // 更新表单数据
-  import { updateFormItem } from '/@/hooks/web/common'
-  import { useOptionsStore } from '/@/store/modules/options'
-  const optionsStore = useOptionsStore()
-  const FncargoId = ref([])
-  getDictOption('cargo_tag').then((res) => {
-    FncargoId.value = res
-  })
-  const route = useRoute()
-  const props = defineProps({
-    details: {
-      type: Object,
-      default: {
-        cargoId: 'S'
-      }
-    },
-    rules: { type: Object, default: {} },
-    isLockBooking: { type: Boolean, default: false },
-    inSave: { type: Boolean, default: false },
-  })
-  // 货物标识实时名称
-  const cargoId = ref('S')
-  const cargoName = computed(() => {
-    const dict = FncargoId.value.filter(item => {
-      return item.value == cargoId.value
-    })[0]
-    if (dict) {
-      return dict.label
-    } else {
-      return '普通货'
+import { BasicForm, useForm } from '/@/components/Form/index'
+import {
+  cargoInfoFormSchema1,
+  cargoInfoFormSchema2,
+  cargoInfoFormSchema3,
+  cargoInfoFormSchema4,
+} from './baseInfo'
+console.log(cargoInfoFormSchema2)
+import { ref, watch, onMounted, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { getDictOption } from '/@/utils/dictUtil'
+import { BatchDelBusinessCtnPrice } from '/@/views/operation/seaexport/api/BookingLedger'
+// 更新表单数据
+import { updateFormItem } from '/@/hooks/web/common'
+import { useOptionsStore } from '/@/store/modules/options'
+const optionsStore = useOptionsStore()
+const FncargoId = ref([])
+getDictOption('cargo_tag').then((res) => {
+  FncargoId.value = res
+})
+const route = useRoute()
+const props = defineProps({
+  details: {
+    type: Object,
+    default: {
+      cargoId: 'S'
     }
-  })
-  // 切换货物标识
-  const toggleCargo = (v) => {
-    cargoId.value = v
-    setFieldsValue3({
-      cargoId: v,
-      dangerClass: null,
-      dangerNo: null,
-      dangerPage: null,
-      dangerLabel: null,
-      temperatureSet: null,
-      reeferQuantity: null,
-      temperatureUnit: null,
-      temperatureMin: null,
-      temperatureMax: null,
-      humidity: null
-    })
+  },
+  rules: { type: Object, default: {} },
+  isLockBooking: { type: Boolean, default: false },
+  inSave: { type: Boolean, default: false },
+  isPreOrder: { type: Boolean, default: false }, // 预配舱单页面使用
+})
+// 货物标识实时名称
+const cargoId = ref('S')
+const cargoName = computed(() => {
+  const dict = FncargoId.value.filter(item => {
+    return item.value == cargoId.value
+  })[0]
+  if (dict) {
+    return dict.label
+  } else {
+    return '普通货'
   }
-  const [
-    registerForm1,
-    {
-      getFieldsValue: getFieldsValue1,
-      updateSchema: updateSchema1,
-      validate: validate1,
-      setFieldsValue: setFieldsValue1,
-    },
-  ] = useForm({
-    labelWidth: 80,
-    schemas: cargoInfoFormSchema1,
-    showActionButtonGroup: false,
-    size: 'small',
+})
+// 切换货物标识
+const toggleCargo = (v) => {
+  cargoId.value = v
+  setFieldsValue3({
+    cargoId: v,
+    dangerClass: null,
+    dangerNo: null,
+    dangerPage: null,
+    dangerLabel: null,
+    temperatureSet: null,
+    reeferQuantity: null,
+    temperatureUnit: null,
+    temperatureMin: null,
+    temperatureMax: null,
+    humidity: null
   })
-  const [
-    registerForm2,
-    {
-      getFieldsValue: getFieldsValue2,
-      updateSchema: updateSchema2,
-      validate: validate2,
-      setFieldsValue: setFieldsValue2,
-    },
-  ] = useForm({
-    labelWidth: 80,
-    schemas: cargoInfoFormSchema2,
-    showActionButtonGroup: false,
-    submitFunc: submit,
-    // size: 'small',
-  })
-  // 更新表单字段
-  updateFormItem(updateSchema, 12)
-  const [
-    registerForm3,
-    {
-      getFieldsValue: getFieldsValue3,
-      updateSchema: updateSchema3,
-      validate: validate3,
-      setFieldsValue: setFieldsValue3,
-    },
-  ] = useForm({
-    labelWidth: 80,
-    schemas: cargoInfoFormSchema3,
-    showActionButtonGroup: false,
-    // size: 'small',
-  })
-  async function submit() {
-    setTimeout(() => {
-      let data = getFieldsValue2()
-      let SS = data.pkgs
-      if (SS) {
-        let GetStringNum = (str) => {
-          var num = 0
-          if (str == null || str == '') return num
-          if (str.length == 0) return num
-          var if_find = false
-          var str_num = ''
-          for (var i = 0; i < str.length; i += 1) {
-            var member = str.substr(i, 1)
-            if (
-              member == '0' ||
-              member == '1' ||
-              member == '2' ||
-              member == '3' ||
-              member == '4' ||
-              member == '5' ||
-              member == '6' ||
-              member == '7' ||
-              member == '8' ||
-              member == '9' ||
-              member == '.' ||
-              member == '-'
-            ) {
-              if (!if_find) {
-                str_num = str_num + member
-              }
-            } else {
-              if_find = true
+}
+const [
+  registerForm1,
+  {
+    getFieldsValue: getFieldsValue1,
+    updateSchema: updateSchema1,
+    validate: validate1,
+    setFieldsValue: setFieldsValue1,
+  },
+] = useForm({
+  labelWidth: 80,
+  schemas: cargoInfoFormSchema1,
+  showActionButtonGroup: false,
+  size: 'small',
+})
+const [
+  registerForm2,
+  {
+    getFieldsValue: getFieldsValue2,
+    updateSchema: updateSchema2,
+    validate: validate2,
+    setFieldsValue: setFieldsValue2,
+  },
+] = useForm({
+  labelWidth: 80,
+  schemas: cargoInfoFormSchema2,
+  showActionButtonGroup: false,
+  submitFunc: submit,
+  // size: 'small',
+})
+// 更新表单字段
+updateFormItem(updateSchema, 12)
+const [
+  registerForm3,
+  {
+    getFieldsValue: getFieldsValue3,
+    updateSchema: updateSchema3,
+    validate: validate3,
+    setFieldsValue: setFieldsValue3,
+  },
+] = useForm({
+  labelWidth: 80,
+  schemas: cargoInfoFormSchema3,
+  showActionButtonGroup: false,
+  // size: 'small',
+})
+async function submit() {
+  setTimeout(() => {
+    let data = getFieldsValue2()
+    let SS = data.pkgs
+    if (SS) {
+      let GetStringNum = (str) => {
+        var num = 0
+        if (str == null || str == '') return num
+        if (str.length == 0) return num
+        var if_find = false
+        var str_num = ''
+        for (var i = 0; i < str.length; i += 1) {
+          var member = str.substr(i, 1)
+          if (
+            member == '0' ||
+            member == '1' ||
+            member == '2' ||
+            member == '3' ||
+            member == '4' ||
+            member == '5' ||
+            member == '6' ||
+            member == '7' ||
+            member == '8' ||
+            member == '9' ||
+            member == '.' ||
+            member == '-'
+          ) {
+            if (!if_find) {
+              str_num = str_num + member
             }
+          } else {
+            if_find = true
           }
-          return str_num
         }
-        let ToEn = (a) => {
-          // eslint-disable-next-line no-array-constructor
-          const arr1 = new Array('', ' thousand', ' million', ' billion')
-          const b = a.length
-          let f: any = null
-          let h = 0
-          let g = ''
-          const e = Math.ceil(b / 3)
-          const k = b - e * 3
-          g = ''
-          for (f = k; f < b; f += 3) {
-            ++h
-            // eslint-disable-next-line no-undef
-            const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
-            // eslint-disable-next-line no-undef
-            const strEng = English(num3)
+        return str_num
+      }
+      let ToEn = (a) => {
+        // eslint-disable-next-line no-array-constructor
+        const arr1 = new Array('', ' thousand', ' million', ' billion')
+        const b = a.length
+        let f: any = null
+        let h = 0
+        let g = ''
+        const e = Math.ceil(b / 3)
+        const k = b - e * 3
+        g = ''
+        for (f = k; f < b; f += 3) {
+          ++h
+          // eslint-disable-next-line no-undef
+          const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
+          // eslint-disable-next-line no-undef
+          const strEng = English(num3)
+          // eslint-disable-next-line eqeqeq
+          if (strEng != '') {
             // eslint-disable-next-line eqeqeq
-            if (strEng != '') {
-              // eslint-disable-next-line eqeqeq
-              if (g != '') g += ' '
-              g += English(num3) + arr1[e - h]
-            }
+            if (g != '') g += ' '
+            g += English(num3) + arr1[e - h]
           }
-          return g
         }
-        let English = (a) => {
-          // eslint-disable-next-line no-array-constructor
-          var arr2 = new Array(
-            'zero',
-            'ten',
-            'twenty',
-            'thirty',
-            'forty',
-            'fifty',
-            'sixty',
-            'seventy',
-            'eighty',
-            'ninety',
-          )
-          // eslint-disable-next-line no-array-constructor
-          var arr3 = new Array(
-            'zero',
-            'one',
-            'two',
-            'three',
-            'four',
-            'five',
-            'six',
-            'seven',
-            'eight',
-            'nine',
-          )
-          // eslint-disable-next-line no-array-constructor
-          var arr4 = new Array(
-            'ten',
-            'eleven',
-            'twelve',
-            'thirteen',
-            'fourteen',
-            'fifteen',
-            'sixteen',
-            'seventeen',
-            'eighteen',
-            'nineteen',
-          )
+        return g
+      }
+      let English = (a) => {
+        // eslint-disable-next-line no-array-constructor
+        var arr2 = new Array(
+          'zero',
+          'ten',
+          'twenty',
+          'thirty',
+          'forty',
+          'fifty',
+          'sixty',
+          'seventy',
+          'eighty',
+          'ninety',
+        )
+        // eslint-disable-next-line no-array-constructor
+        var arr3 = new Array(
+          'zero',
+          'one',
+          'two',
+          'three',
+          'four',
+          'five',
+          'six',
+          'seven',
+          'eight',
+          'nine',
+        )
+        // eslint-disable-next-line no-array-constructor
+        var arr4 = new Array(
+          'ten',
+          'eleven',
+          'twelve',
+          'thirteen',
+          'fourteen',
+          'fifteen',
+          'sixteen',
+          'seventeen',
+          'eighteen',
+          'nineteen',
+        )
 
-          let strRet = ''
-          // eslint-disable-next-line eqeqeq
-          if (a.length == 3 && a.substr(0, 3) != '000') {
-            if (a.substr(0, 1) != '0') {
-              strRet += arr3[a.substr(0, 1)] + ' hundred'
-              if (a.substr(1, 2) != '00') strRet += ' and '
-            } else {
-              strRet += ' and '
-            }
-            a = a.substring(1)
+        let strRet = ''
+        // eslint-disable-next-line eqeqeq
+        if (a.length == 3 && a.substr(0, 3) != '000') {
+          if (a.substr(0, 1) != '0') {
+            strRet += arr3[a.substr(0, 1)] + ' hundred'
+            if (a.substr(1, 2) != '00') strRet += ' and '
+          } else {
+            strRet += ' and '
           }
-          if (a.length == 2) {
-            if (a.substr(0, 1) == '0') a = a.substring(1)
-            else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
-            else {
-              strRet += arr2[a.substr(0, 1)]
-              if (a.substr(1, 1) != '0') strRet += '-'
-              a = a.substring(1)
-            }
+          a = a.substring(1)
+        }
+        if (a.length == 2) {
+          if (a.substr(0, 1) == '0') a = a.substring(1)
+          else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
+          else {
+            strRet += arr2[a.substr(0, 1)]
+            if (a.substr(1, 1) != '0') strRet += '-'
+            a = a.substring(1)
           }
-          if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
-          return strRet
         }
-        SS = SS.toString()
-        const i = SS.indexOf('\n')
-        let num = 0
-        let strKind: any = ''
-        let enCapital = ''
-        if (i > 0) {
-          const slist = SS.split('\n')
-          for (let i = 0; i < slist.length; i += 1) {
-            const member = slist[i]
-            const strNum: any = GetStringNum(member)
-            if (i == 0) {
-              strKind = member.substring(strNum.length)
-            }
-            num = parseFloat(num).add(parseFloat(strNum))
+        if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
+        return strRet
+      }
+      SS = SS.toString()
+      const i = SS.indexOf('\n')
+      let num = 0
+      let strKind: any = ''
+      let enCapital = ''
+      if (i > 0) {
+        const slist = SS.split('\n')
+        for (let i = 0; i < slist.length; i += 1) {
+          const member = slist[i]
+          const strNum: any = GetStringNum(member)
+          if (i == 0) {
+            strKind = member.substring(strNum.length)
           }
+          num = parseFloat(num).add(parseFloat(strNum))
+        }
 
-          if (strKind !== '') {
-            enCapital = strKind
-          } else {
-            strKind = data.kindPkgsName ? data.kindPkgsName : ''
-            enCapital = ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
-          }
-          console.log(strKind, 1)
+        if (strKind !== '') {
+          enCapital = strKind
         } else {
-          const strNum: any = GetStringNum(SS)
-          strKind = SS.substring(strNum.length) ? SS.substring(strNum.length) : ''
-          if (strKind !== '') {
-            enCapital = strKind
-          } else {
-            strKind = data.kindPkgsName ? data.kindPkgsName : ''
-            enCapital = 'SAY:' + ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
-          }
-          console.log(strKind, 2)
+          strKind = data.kindPkgsName ? data.kindPkgsName : ''
+          enCapital = ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
         }
-        setFieldsValue4({ totalNo: enCapital })
+        console.log(strKind, 1)
       } else {
-        setFieldsValue4({ totalNo: '' })
-      }
-    }, 0)
-  }
-  const filterOption = (input, option) => {
-    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-  }
-  const [
-    registerForm4,
-    {
-      getFieldsValue: getFieldsValue4,
-      updateSchema: updateSchema4,
-      validate: validate4,
-      setFieldsValue: setFieldsValue4,
-    },
-  ] = useForm({
-    labelWidth: 80,
-    schemas: cargoInfoFormSchema4,
-    showActionButtonGroup: false,
-  })
-  watch(
-    () => props.details,
-    async (nval) => {
-      if (Object.keys(nval).length) {
-        setFieldsValue1({ marks: nval.marks, description: nval.description })
-        setFieldsValue2(nval)
-        setFieldsValue3(nval)
-        setFieldsValue4({ totalNo: nval.totalNo, ctnPriceInfo: nval.ctnPriceInfo })
-        if (nval.cargoId) cargoId.value = nval.cargoId
-      }
-    },
-    { deep: true },
-  )
-  const id = ref()
-  watch(
-    () => route.query,
-    () => {
-      id.value = route.query.id
-    },
-    { immediate: true },
-  )
-  // 判断页面来源
-  const source = ref(route.query.source || 'edit') 
-  onMounted(() => {
-    if (source.value != 'edit') {
-      cargoInfoFormSchema1.forEach(item => {
-        item.dynamicDisabled = true
-      })
-      cargoInfoFormSchema2.forEach(item => {
-        item.dynamicDisabled = true
-      })
-      cargoInfoFormSchema3.forEach(item => {
-        item.dynamicDisabled = true
-      })
-    } else {
-      cargoInfoFormSchema1.forEach(item => {
-        item.dynamicDisabled = false
-      })
-      cargoInfoFormSchema2.forEach(item => {
-        item.dynamicDisabled = false
-      })
-      cargoInfoFormSchema3.forEach(item => {
-        item.dynamicDisabled = false
-      })
-    }
-  })
-  function SetTOTALNO(SS) {
-    let DSS = SS.toString()
-    const i = DSS.indexOf('\n')
-    let num = 0
-    let strKind = ''
-    let enCapital = ''
-    if (i > 0) {
-      const slist = DSS.split('\n')
-      for (let i = 0; i < slist.length; i += 1) {
-        const member = slist[i]
-        const strNum: any = GetStringNum(member)
-        if (i == 0) {
-          strKind = member.substring(strNum.length)
+        const strNum: any = GetStringNum(SS)
+        strKind = SS.substring(strNum.length) ? SS.substring(strNum.length) : ''
+        if (strKind !== '') {
+          enCapital = strKind
+        } else {
+          strKind = data.kindPkgsName ? data.kindPkgsName : ''
+          enCapital = 'SAY:' + ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
         }
-        num = parseFloat(num).add(parseFloat(strNum))
-      }
-      if (strKind !== '') {
-        enCapital = strKind
-      } else {
-        strKind = props.details.kindpkgs
-        enCapital = ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
+        console.log(strKind, 2)
       }
+      setFieldsValue4({ totalNo: enCapital })
     } else {
-      const strNum: any = GetStringNum(DSS)
-      strKind = DSS.substring(strNum.length)
-      if (strKind !== '') {
-        enCapital = strKind
-      } else {
-        strKind = props.details.kindpkgs
-        enCapital = 'SAY:' + ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
-      }
+      setFieldsValue4({ totalNo: '' })
     }
-    return enCapital
-  }
-  // 选择箱型触发
-  const ctnChange = (v, item) => {
-    optionsStore.getOptionsByCode('GetCtnSelectList').forEach(row => {
-      if (item.id == v) {
-        item.ctn = row.ctnName
-      }
+  }, 0)
+}
+const filterOption = (input, option) => {
+  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+}
+const [
+  registerForm4,
+  {
+    getFieldsValue: getFieldsValue4,
+    updateSchema: updateSchema4,
+    validate: validate4,
+    setFieldsValue: setFieldsValue4,
+  },
+] = useForm({
+  labelWidth: 80,
+  schemas: cargoInfoFormSchema4,
+  showActionButtonGroup: false,
+})
+watch(
+  () => props.details,
+  async (nval) => {
+    if (Object.keys(nval).length) {
+      setFieldsValue1({ marks: nval.marks, description: nval.description })
+      setFieldsValue2(nval)
+      setFieldsValue3(nval)
+      setFieldsValue4({ totalNo: nval.totalNo, ctnPriceInfo: nval.ctnPriceInfo })
+      if (nval.cargoId) cargoId.value = nval.cargoId
+    }
+  },
+  { deep: true },
+)
+const id = ref()
+watch(
+  () => route.query,
+  () => {
+    id.value = route.query.id
+  },
+  { immediate: true },
+)
+function preOrderInit(val:any) {
+  setFieldsValue1({ marks: val.marks, description: val.description })
+  setFieldsValue2(val)
+  setFieldsValue3(val)
+  if (val.cargoId) cargoId.value = val.cargoId
+}
+// 判断页面来源
+const source = ref(route.query.source || 'edit')
+onMounted(() => {
+  if (source.value != 'edit') {
+    cargoInfoFormSchema1.forEach(item => {
+      item.dynamicDisabled = true
+    })
+    cargoInfoFormSchema2.forEach(item => {
+      item.dynamicDisabled = true
+    })
+    cargoInfoFormSchema3.forEach(item => {
+      item.dynamicDisabled = true
+    })
+  } else {
+    cargoInfoFormSchema1.forEach(item => {
+      item.dynamicDisabled = false
+    })
+    cargoInfoFormSchema2.forEach(item => {
+      item.dynamicDisabled = false
+    })
+    cargoInfoFormSchema3.forEach(item => {
+      item.dynamicDisabled = false
     })
   }
-  function ToEn(a) {
-    // eslint-disable-next-line no-array-constructor
-    const arr1 = new Array('', ' thousand', ' million', ' billion')
-    const b = a.length
-    let f: any = null
-    let h = 0
-    let g = ''
-    const e = Math.ceil(b / 3)
-    const k = b - e * 3
-    g = ''
-    for (f = k; f < b; f += 3) {
-      ++h
-      // eslint-disable-next-line no-undef
-      const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
-      // eslint-disable-next-line no-undef
-      const strEng = English(num3)
-      // eslint-disable-next-line eqeqeq
-      if (strEng != '') {
-        // eslint-disable-next-line eqeqeq
-        if (g != '') g += ' '
-        g += English(num3) + arr1[e - h]
+})
+function SetTOTALNO(SS) {
+  let DSS = SS.toString()
+  const i = DSS.indexOf('\n')
+  let num = 0
+  let strKind = ''
+  let enCapital = ''
+  if (i > 0) {
+    const slist = DSS.split('\n')
+    for (let i = 0; i < slist.length; i += 1) {
+      const member = slist[i]
+      const strNum: any = GetStringNum(member)
+      if (i == 0) {
+        strKind = member.substring(strNum.length)
       }
+      num = parseFloat(num).add(parseFloat(strNum))
+    }
+    if (strKind !== '') {
+      enCapital = strKind
+    } else {
+      strKind = props.details.kindpkgs
+      enCapital = ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
+    }
+  } else {
+    const strNum: any = GetStringNum(DSS)
+    strKind = DSS.substring(strNum.length)
+    if (strKind !== '') {
+      enCapital = strKind
+    } else {
+      strKind = props.details.kindpkgs
+      enCapital = 'SAY:' + ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
     }
-    return g
   }
-  function English(a) {
-    // eslint-disable-next-line no-array-constructor
-    var arr2 = new Array(
-      'zero',
-      'ten',
-      'twenty',
-      'thirty',
-      'forty',
-      'fifty',
-      'sixty',
-      'seventy',
-      'eighty',
-      'ninety',
-    )
-    // eslint-disable-next-line no-array-constructor
-    var arr3 = new Array(
-      'zero',
-      'one',
-      'two',
-      'three',
-      'four',
-      'five',
-      'six',
-      'seven',
-      'eight',
-      'nine',
-    )
-    // eslint-disable-next-line no-array-constructor
-    var arr4 = new Array(
-      'ten',
-      'eleven',
-      'twelve',
-      'thirteen',
-      'fourteen',
-      'fifteen',
-      'sixteen',
-      'seventeen',
-      'eighteen',
-      'nineteen',
-    )
-
-    let strRet = ''
-    // eslint-disable-next-line eqeqeq
-    if (a.length == 3 && a.substr(0, 3) != '000') {
-      if (a.substr(0, 1) != '0') {
-        strRet += arr3[a.substr(0, 1)] + ' hundred'
-        if (a.substr(1, 2) != '00') strRet += ' and '
-      } else {
-        strRet += ' and '
-      }
-      a = a.substring(1)
+  return enCapital
+}
+// 选择箱型触发
+const ctnChange = (v, item) => {
+  optionsStore.getOptionsByCode('GetCtnSelectList').forEach(row => {
+    if (item.id == v) {
+      item.ctn = row.ctnName
     }
-    if (a.length == 2) {
-      if (a.substr(0, 1) == '0') a = a.substring(1)
-      else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
-      else {
-        strRet += arr2[a.substr(0, 1)]
-        if (a.substr(1, 1) != '0') strRet += '-'
-        a = a.substring(1)
-      }
+  })
+}
+function ToEn(a) {
+  // eslint-disable-next-line no-array-constructor
+  const arr1 = new Array('', ' thousand', ' million', ' billion')
+  const b = a.length
+  let f: any = null
+  let h = 0
+  let g = ''
+  const e = Math.ceil(b / 3)
+  const k = b - e * 3
+  g = ''
+  for (f = k; f < b; f += 3) {
+    ++h
+    // eslint-disable-next-line no-undef
+    const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
+    // eslint-disable-next-line no-undef
+    const strEng = English(num3)
+    // eslint-disable-next-line eqeqeq
+    if (strEng != '') {
+      // eslint-disable-next-line eqeqeq
+      if (g != '') g += ' '
+      g += English(num3) + arr1[e - h]
     }
-    if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
-    return strRet
   }
-  function GetStringNum(str) {
-    var num = 0
-    if (str == null || str == '') return num
-    if (str.length == 0) return num
-    var if_find = false
-    var str_num = ''
-    for (var i = 0; i < str.length; i += 1) {
-      var member = str.substr(i, 1)
-      if (
-        member == '0' ||
-        member == '1' ||
-        member == '2' ||
-        member == '3' ||
-        member == '4' ||
-        member == '5' ||
-        member == '6' ||
-        member == '7' ||
-        member == '8' ||
-        member == '9' ||
-        member == '.' ||
-        member == '-'
-      ) {
-        if (!if_find) {
-          str_num = str_num + member
-        }
-      } else {
-        if_find = true
-      }
+  return g
+}
+function English(a) {
+  // eslint-disable-next-line no-array-constructor
+  var arr2 = new Array(
+    'zero',
+    'ten',
+    'twenty',
+    'thirty',
+    'forty',
+    'fifty',
+    'sixty',
+    'seventy',
+    'eighty',
+    'ninety',
+  )
+  // eslint-disable-next-line no-array-constructor
+  var arr3 = new Array(
+    'zero',
+    'one',
+    'two',
+    'three',
+    'four',
+    'five',
+    'six',
+    'seven',
+    'eight',
+    'nine',
+  )
+  // eslint-disable-next-line no-array-constructor
+  var arr4 = new Array(
+    'ten',
+    'eleven',
+    'twelve',
+    'thirteen',
+    'fourteen',
+    'fifteen',
+    'sixteen',
+    'seventeen',
+    'eighteen',
+    'nineteen',
+  )
+
+  let strRet = ''
+  // eslint-disable-next-line eqeqeq
+  if (a.length == 3 && a.substr(0, 3) != '000') {
+    if (a.substr(0, 1) != '0') {
+      strRet += arr3[a.substr(0, 1)] + ' hundred'
+      if (a.substr(1, 2) != '00') strRet += ' and '
+    } else {
+      strRet += ' and '
     }
-    return str_num
+    a = a.substring(1)
   }
-  function getFieldsValue() {
-    return {
-      ...getFieldsValue1(),
-      ...getFieldsValue2(),
-      ...getFieldsValue3(),
-      ...getFieldsValue4(),
+  if (a.length == 2) {
+    if (a.substr(0, 1) == '0') a = a.substring(1)
+    else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
+    else {
+      strRet += arr2[a.substr(0, 1)]
+      if (a.substr(1, 1) != '0') strRet += '-'
+      a = a.substring(1)
     }
   }
-  // 删除箱型价格
-  const deleteCtnPrice = (model, index, item) => {
-    if (item.id) {
-      BatchDelBusinessCtnPrice({ ids: [item.id] }).then(res => {
-        console.log(res)
-      })
+  if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
+  return strRet
+}
+function GetStringNum(str) {
+  var num = 0
+  if (str == null || str == '') return num
+  if (str.length == 0) return num
+  var if_find = false
+  var str_num = ''
+  for (var i = 0; i < str.length; i += 1) {
+    var member = str.substr(i, 1)
+    if (
+      member == '0' ||
+      member == '1' ||
+      member == '2' ||
+      member == '3' ||
+      member == '4' ||
+      member == '5' ||
+      member == '6' ||
+      member == '7' ||
+      member == '8' ||
+      member == '9' ||
+      member == '.' ||
+      member == '-'
+    ) {
+      if (!if_find) {
+        str_num = str_num + member
+      }
+    } else {
+      if_find = true
     }
-    model.splice(index, 1)
   }
-  async function validateFields() {
-    const v1 = await validate1()
-    const v2 = await validate2()
-    const v3 = await validate3()
-    const v4 = await validate4()
-    return { ...v1, ...v2, ...v3, ...v4 }
+  return str_num
+}
+function getFieldsValue() {
+  return {
+    ...getFieldsValue1(),
+    ...getFieldsValue2(),
+    ...getFieldsValue3(),
+    ...getFieldsValue4(),
   }
-  function updateSchema(data) {
-    updateSchema1(data)
-    updateSchema2(data)
-    updateSchema3(data)
-    updateSchema4(data)
+}
+// 删除箱型价格
+const deleteCtnPrice = (model, index, item) => {
+  if (item.id) {
+    BatchDelBusinessCtnPrice({ ids: [item.id] }).then(res => {
+      console.log(res)
+    })
   }
-  defineExpose({
-    // RefcargoFrom,
-    getFieldsValue,
-    updateSchema,
-    validateFields,
-    getFieldsValue2,
-    setFieldsValue2,
-  })
+  model.splice(index, 1)
+}
+async function validateFields() {
+  const v1 = await validate1()
+  const v2 = await validate2()
+  const v3 = await validate3()
+  const v4 = await validate4()
+  return { ...v1, ...v2, ...v3, ...v4 }
+}
+function updateSchema(data) {
+  updateSchema1(data)
+  updateSchema2(data)
+  updateSchema3(data)
+  updateSchema4(data)
+}
+defineExpose({
+  // RefcargoFrom,
+  getFieldsValue,
+  preOrderInit,
+  updateSchema,
+  validateFields,
+  getFieldsValue2,
+  setFieldsValue2,
+})
 </script>
 <style lang="less">
 .ds-goods-info {
   h4 {
-    margin-bottom: 0!important;
+    margin-bottom: 0 !important;
+    color: black;
   }
+
   .ant-col-15 {
     max-width: 60%;
     flex: 0 0 60%;
   }
+
   .ant-col-9 {
     max-width: 40%;
     flex: 0 0 40%;
   }
+
   .goods-intro {
     .ant-input {
       height: 130px;
     }
   }
+
   .icon-30jiantouxiangxiafill {
     margin-left: 3px;
   }
+
   .S {
     span {
-      color: #7A8798!important;
+      color: #7A8798 !important;
     }
   }
+
   .R {
     span {
-      color: #257AFA!important;
+      color: #257AFA !important;
     }
   }
+
   .D {
     span {
-      color: #BA3849!important;
+      color: #BA3849 !important;
     }
   }
+
   .O {
     span {
-      color: #FF8D1A!important;
+      color: #FF8D1A !important;
     }
   }
+
   .ctn-price-item {
     width: 32%;
     display: flex;
+
     .ant-select-selector {
-      width: 80px!important;
-      background: #F5F9FC!important;
-      border: none!important;
+      width: 80px !important;
+      background: #F5F9FC !important;
+      border: none !important;
       outline: none;
     }
+
     .ant-input-number {
       margin-left: 4px;
     }
+
     .iconfont {
       line-height: 26px;
       margin-left: 5px;
@@ -674,7 +690,9 @@
       cursor: pointer;
     }
   }
-  .ctn-price-item:nth-child(1), .ctn-price-item:nth-child(2) {
+
+  .ctn-price-item:nth-child(1),
+  .ctn-price-item:nth-child(2) {
     margin-right: 2%;
   }
 }
diff --git a/src/views/operation/seaexport/detail/modules/preOrder.tsx b/src/views/operation/seaexport/detail/modules/preOrder.tsx
index baf6c642..b08193f6 100644
--- a/src/views/operation/seaexport/detail/modules/preOrder.tsx
+++ b/src/views/operation/seaexport/detail/modules/preOrder.tsx
@@ -1,25 +1,655 @@
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { BasicColumn, FormSchema } from '/@/components/Table'
 import { getDictOption } from '/@/utils/dictUtil'
 import { getOptions } from '/@/hooks/dict'
-
+import {
+  GetClientCountrySelectList,
+  GetShippingBillTemplateSelectList,
+  GetClientPortSelectList,
+  GetVoynoSelectList,
+  GetVesselSelectList,
+} from '/@/views/operation/seaexport/api/BookingLedger'
+import { GetClientListByCode, GetCarrierSelectList } from '/@/api/common'
+import { pl } from 'element-plus/es/locales.mjs'
+let countryList = []
 // 基础信息表单
-export const formSchema1: FormSchema[] = [
+export const baseSchema: FormSchema[] = [
   {
     field: 'id',
     show: false,
+    defaultValue: '0',
     component: 'Input'
   },
   {
-    field: 'isHBL',
+    field: 'isPart',
     show: false,
     component: 'Input'
   },
   {
-    label: '主题单号',
     field: 'mblno',
+    label: '主提单号',
+    component: 'Input',
+    required: false,
+    dynamicDisabled: ({ values }) => {
+      return !values.isPart
+    },
+    show: ({ values }) => {
+      return !values.isPart
+    },
+    colProps: { span: 4 }
+  },
+  {
+    field: 'hblno',
+    label: '分提单号',
+    component: 'Input',
+    required: false,
+    show: ({ values }) => {
+      return values.isPart
+    },
+    componentProps: ({ formActionType }) => {
+      return {
+        onChange: (e, obj) => {
+          if(e){
+            formActionType ? formActionType.linkageForm(e.target.value) : null
+          }
+        }
+      }
+    },
+    colProps: { span: 4 }
+  },
+  {
+    field: 'vesselId',
+    show: false,
+    component: 'Input'
+  },
+  {
+    field: 'innerVoyno',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '船名',
+    field: 'vessel',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetVesselSelectList,
+        labelField: 'vesselName',
+        valueField: 'vesselName',
+        resultField: 'data',
+        immediate: false,
+        mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.vesselId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.vesselId = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '海关航次',
+    field: 'voyno',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: () => {
+      return {
+        api: GetVoynoSelectList,
+        labelField: 'voyNo',
+        valueField: 'voyNo',
+        resultField: 'data',
+        immediate: false
+      }
+    },
+  },
+  {
+    label: '船代',
+    field: 'shipAgency',
+    component: 'ApiSelect',
+    labelSlot: 'shipAgencyId',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientListByCode,
+        params: { code: 'controller' },
+        labelField: 'pinYinCode',
+        showName: 'shortName',
+        valueField: 'shortName',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.shipAgencyId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.shipAgencyId = ''
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'carrierId',
+    show: false,
+    component: 'Input'
+  },
+  {
+    label: '船公司',
+    field: 'carrier',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetCarrierSelectList,
+        labelField: 'pinYinCode',
+        showName: 'cnName',
+        valueField: 'cnName',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.carrierId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.carrierId = ''
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'etd',
+    label: '开船日期',
+    component: 'DatePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      allowClear: true,
+      valueFormat: 'YYYY-MM-DD'
+    },
+  },
+  {
+    label: '装货港代码',
+    field: 'loadPortCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        valueField: 'ediCode',
+        showName: 'ediCode',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.loadPortId = obj.id
+            formModel.loadPort = obj.portName
+          }
+          if (!e && !obj) {
+            formModel.loadPortId = null
+            formModel.loadPort = null
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'loadPort',
+    label: '装货港',
+    component: 'Input',
+    colProps: { span: 4 }
+  },
+  {
+    field: 'loadPortId',
+    component: 'Input',
+    colProps: { span: 4 },
+    show: false,
+  },
+  {
+    label: '卸货港代码',
+    field: 'dischargePortCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        showName: 'ediCode',
+        valueField: 'ediCode',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.dischargePortId = obj.id
+            formModel.dischargePort = obj.portName
+          }
+          if (!e && !obj) {
+            formModel.dischargePortId = null
+            formModel.dischargePort = null
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'dischargePort',
+    label: '卸货港',
+    component: 'Input',
+    colProps: { span: 4 }
+  },
+  {
+    field: 'dischargePortId',
     component: 'Input',
-    required: true,
     colProps: { span: 4 },
+    show: false,
+  },
+  {
+    label: '收货地代码',
+    field: 'deliveryPlaceCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        immediate: false,
+        labelField: 'pinYinCode',
+        valueField: 'ediCode',
+        showName: 'ediCode',
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.deliveryPlace = obj.portName
+            formModel.deliveryPlaceId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.receiptPladeliveryPlacece = null
+            formModel.deliveryPlaceId = null
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'deliveryPlace',
+    label: '收货地',
+    component: 'Input',
+    colProps: { span: 4 }
+  },
+  {
+    field: 'deliveryPlaceId',
+    component: 'Input',
+    colProps: { span: 4 },
+    show: false,
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'Input',
+    colProps: { span: 24 }
+  },
+]
+// 收发通
+export const mailingSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'shipperId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '发货人',
+    field: 'shipper',
+    labelSlot: 'shipper',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 8 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetShippingBillTemplateSelectList,
+        params: { type: 2 },
+        labelField: 'templateName',
+        valueField: 'templateName',
+        immediate: false,
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            console.log(obj)
+            formModel.shipperId = obj.id
+            formModel.shipperContent = obj.content
+
+            formModel.shipperAddress = obj.address
+            formModel.shipperName = obj.name
+            formModel.shipperCountry = obj.country
+            formModel.shipperCountryName = obj.countryName
+            formModel.shipperCountryTel = obj.tel
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.shipperId = null
+            formModel.shipperContent = null
+            formModel.shipper = ''
+          }
+        }
+      }
+    }
+  },
+  {
+    label: '',
+    field: 'consigneeId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '收货人',
+    field: 'consignee',
+    labelSlot: 'consignee',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 8 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetShippingBillTemplateSelectList,
+        params: { type: 1 },
+        labelField: 'templateName',
+        valueField: 'templateName',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.consigneeId = obj.id
+            formModel.consigneeContent = obj.content
+
+            formModel.consigneeAddress = obj.address
+            formModel.consigneeName = obj.name
+            formModel.consigneeCountry = obj.country
+            formModel.consigneeCountryName = obj.countryName
+            formModel.consigneeCountryTel = obj.tel
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.consigneeId = null
+            formModel.consignee = null
+            formModel.consigneeContent = ''
+          }
+        }
+      }
+    }
+  },
+  {
+    label: '',
+    field: 'notifyPartyId',
+    component: 'Input',
+    show: false
+  },
+  {
+    label: '通知人',
+    field: 'notifyParty',
+    component: 'ApiSelect',
+    labelSlot: 'notifyParty',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 8 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetShippingBillTemplateSelectList,
+        params: { type: 3 },
+        labelField: 'templateName',
+        valueField: 'templateName',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.notifyPartyId = obj.id
+            formModel.notifyPartyContent = obj.content
+
+            formModel.notifyPartyAddress = obj.address
+            formModel.notifyPartyName = obj.name
+            formModel.notifyPartyCountry = obj.country
+            formModel.notifyPartyCountryName = obj.countryName
+            formModel.notifyPartyCountryTel = obj.tel
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.notifyPartyId = null
+            formModel.notifyPartyContent = null
+            formModel.notifyParty = ''
+          }
+        }
+      }
+    }
+  },
+  {
+    field: 'shipperName',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    field: 'consigneeName',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    field: 'notifyPartyName',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    field: 'shipperAddress',
+    label: '地址',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    field: 'consigneeAddress',
+    label: '地址',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    field: 'notifyPartyAddress',
+    label: '地址',
+    component: 'Input',
+    colProps: { span: 8 }
+  },
+  {
+    field: 'shipperCountry',
+    label: '国家',
+    component: 'Select',
+    componentProps: ({ formModel }) => {
+      return {
+        options: countryList,
+        allowClear: true,
+        showSearch: true,
+        fieldNames: {
+          label: 'showName',
+          value: 'countryCode',
+        },
+        filterOption: (input: string, option: any) => {
+          return option.showName.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.shipperCountryName = obj.countryName
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.shipperCountryName = ''
+          }
+        },
+      }
+    },
+    colProps: { span: 4 }
+  },
+  {
+    field: 'shipperCountryName',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'shipperCountryTel',
+    label: '电话',
+    component: 'Input',
+    colProps: { span: 4 }
+  },
+  {
+    field: 'consigneeCountry',
+    label: '国家',
+    component: 'Select',
+    componentProps: ({ formModel }) => {
+      return {
+        options: countryList,
+        allowClear: true,
+        showSearch: true,
+        fieldNames: {
+          label: 'showName',
+          value: 'countryCode',
+        },
+        filterOption: (input: string, option: any) => {
+          console.log(input, option)
+          return option.showName.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.consigneeCountryName = obj.countryName
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.consigneeCountryName = ''
+          }
+        },
+      }
+    },
+    colProps: { span: 4 }
+  },
+  {
+    field: 'consigneeCountryName',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'consigneeCountryTel',
+    label: '电话',
+    component: 'Input',
+    colProps: { span: 4 }
+  },
+  {
+    field: 'notifyPartyCountry',
+    label: '国家',
+    component: 'Select',
+    componentProps: ({ formModel }) => {
+      return {
+        options: countryList,
+        allowClear: true,
+        showSearch: true,
+        fieldNames: {
+          label: 'showName',
+          value: 'countryCode',
+        },
+        filterOption: (input: string, option: any) => {
+          return option.showName.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.notifyPartyCountryName = obj.countryName
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.notifyPartyCountryName = ''
+          }
+        },
+      }
+    },
+    colProps: { span: 4 }
+  },
+  {
+    field: 'notifyPartyCountryName',
+    component: 'Input',
+    show: false
+  },
+  {
+    field: 'notifyPartyCountryTel',
+    label: '电话',
+    component: 'Input',
+    colProps: { span: 4 }
   },
-]
\ No newline at end of file
+]
+// 场站
+export const yardSchema: FormSchema[] = [
+  {
+    field: 'yardId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'yard',
+    label: '',
+    component: 'ApiSelect',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientListByCode,
+        params: { code: 'yard' },
+        labelField: 'pinYinCode',
+        placeholder: '场站',
+        showName: 'shortName',
+        valueField: 'shortName',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.yardId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.yardId = ''
+          }
+        }
+      }
+    }
+  },
+]
+
+
+function getCountryList() {
+  const arr = localStorage.getItem('ds-country') ? JSON.parse(localStorage.getItem('ds-country')) : []
+  if (arr.length > 0) {
+    countryList = arr
+  } else {
+    GetClientCountrySelectList().then(res => {
+      res.data.forEach(item=>{
+        item.showName = item.countryName + '/' + item.countryCode
+      })
+      countryList = res.data
+      localStorage.setItem('ds-country', JSON.stringify(res.data))
+    })
+  }
+}
+getCountryList()
diff --git a/src/views/operation/seaexport/detail/modules/preOrder.vue b/src/views/operation/seaexport/detail/modules/preOrder.vue
index 3967386e..f2651898 100644
--- a/src/views/operation/seaexport/detail/modules/preOrder.vue
+++ b/src/views/operation/seaexport/detail/modules/preOrder.vue
@@ -1,721 +1,155 @@
 <template>
-  <a-modal
-    class="ds-pre-order"
-    width="90vw"
-    :maskClosable="false"
-    v-model:visible="openPreOrderShow"
-    @cancel="close"
-  >
+  <a-modal class="ds-pre-order" width="90vw" :maskClosable="false" v-model:visible="openPreOrderShow" @cancel="close">
     <template #footer>
     </template>
     <div class="pre-order" style="padding-top: 30px;">
       <div class="flex">
-        <div class="ds-card" style="width: 251px;">
+        <div>
           <h4>
-            预配舱单列表
+            预配舱单
           </h4>
-          <div>
-            <a-button v-repeat type="link" @click="addOrder" class="pl0 pb0">
-              <span class="iconfont icon-new_document"></span>
-              添加分单
-            </a-button>
-            <a-button v-repeat  type="link" @click="sendOrderFun" class="pb0">
-              <span class="iconfont icon-tijiao1"></span>
-              发送
-            </a-button>
-            <div style="white-space: nowrap;">
-              <a-button v-repeat type="link" @click="saveOrder" class="pl0 pt0">
+          <div class="ds-card" style="width: 320px;">
+            <div class="left-title">
+              <a-button v-repeat type="link" @click="addOrder">
+                <span class="iconfont icon-new_document"></span>
+                添加分单
+              </a-button>
+              <a-button v-repeat type="link" @click="sendOrderFun">
+                <span class="iconfont icon-tijiao1"></span>
+                发送
+              </a-button>
+              <a-button v-repeat type="link" @click="saveOrder">
                 <span class="iconfont icon-baocun"></span>
                 保存
               </a-button>
-              <a-popconfirm
-                title="是否删除当前选中预配舱单？"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="removeOrder()"
-              >
+              <a-popconfirm title="是否删除当前选中预配舱单？" ok-text="是" cancel-text="否" @confirm="removeOrder()">
                 <a-button type="link" class="pt0">
                   <span class="iconfont icon-shanchu21"></span>
                   删除
                 </a-button>
               </a-popconfirm>
-              <a-popconfirm
-                title="会覆盖当前数据，确认刷新吗？"
-                ok-text="是"
-                cancel-text="否"
-                @confirm="handleRef"
-              >
+              <a-popconfirm title="会覆盖当前数据，确认刷新吗？" ok-text="是" cancel-text="否" @confirm="handleRef">
                 <a-button type="link" class="pt0">
                   <span class="iconfont icon-shuaxin"></span>
                   刷新
                 </a-button>
               </a-popconfirm>
             </div>
+            <a-spin :spinning="floading">
+              <div class="sec-order">
+                <h4>主提单号</h4>
+                <template v-for="(sedDetail, sindex) in orderList" :key="sindex + 'f'">
+                  <div class="order-box" v-if="!sedDetail.isPart">
+                    <a-checkbox class="check-btn mb10" v-model:checked="sedDetail.checked" />
+                    <span class="order-label" :class="{ active: sindex == editIndex }"
+                      @click.stop="changeOrder(sindex)">
+                      <template v-if="!sedDetail.isPart">
+                        {{ sedDetail.mblno || '请填写主提单号' }}
+                      </template>
+                    </span>
+                  </div>
+                </template>
+              </div>
+              <div class="mt15">
+                <h4>分提单号</h4>
+                <template v-for="(sedDetail, sindex) in orderList" :key="sindex">
+                  <div class="order-box" v-if="sedDetail.isPart">
+                    <a-checkbox class="check-btn mb10" v-model:checked="sedDetail.checked" />
+                    <span class="order-label" :class="{ active: sindex == editIndex }"
+                      @click.stop="changeOrder(sindex)">
+                      <template v-if="sedDetail.isPart">
+                        {{ sedDetail.hblno || '请填写分单号' }}
+                      </template>
+                    </span>
+                  </div>
+                </template>
+              </div>
+            </a-spin>
+          </div>
+        </div>
+
+        <div class="right">
+          <div class="box">
+            <div class="title">基础信息</div>
+            <BasicForm @linkageForm="linkageForm" @register="baseForm"></BasicForm>
           </div>
-          <a-spin :spinning="floading">
-            <div class="sec-order">
-              <h4>主提单号</h4>
-              <template v-for="(sedDetail, sindex) in orderList" :key="sindex + 'f'">
-                <div class="order-box">
-                  <a-checkbox v-if="!sedDetail.isHBL" class="check-btn mb10" v-model:checked="sedDetail.checked" />
-                  <span
-                    class="order-label"
-                    :class="{ active: sindex == editIndex }"
-                    @click.stop="changeOrder(sindex, sedDetail)"
-                  >
-                    <a-tag
-                      class="tag"
-                      v-if="sedDetail.state && !sedDetail.isHBL"
-                      :color="sedDetail.state === '已直发' ? '#00CC00' : ''"
-                      >{{ sedDetail.state }}</a-tag
-                    >
-                    <template v-if="!sedDetail.isHBL">
-                      {{ sedDetail.mblno || '请填写主提单号' }}
-                    </template>
-                  </span>
-                </div>
+          <div class="box baseinfo">
+            <div class="title ">收发通</div>
+            <BasicForm @register="mailingForm">
+              <!-- 发货人 -->
+              <template #shipper="{ model }">
+                <span title="保存到收发通模版(save)" class="iconfont icon-baocun save-btn"
+                  @click="save(model, 'shipper')"></span>
               </template>
-            </div>
-            <div class="mt15">
-              <h4>分提单号</h4>
-              <template v-for="(sedDetail, sindex) in orderList" :key="sindex">
-                <div class="order-box">
-                  <a-checkbox v-if="sedDetail.isHBL" class="check-btn mb10" v-model:checked="sedDetail.checked" />
-                  <span
-                    class="order-label"
-                    :class="{ active: sindex == editIndex }"
-                    @click.stop="changeOrder(sindex, sedDetail)"
-                  >
-                    <a-tag
-                      class="tag"
-                      v-if="sedDetail.state && sedDetail.isHBL"
-                      :color="sedDetail.state === '已直发' ? '#00CC00' : ''"
-                      >{{ sedDetail.state }}</a-tag
-                    >
-                    <template v-if="sedDetail.isHBL">
-                      {{ sedDetail.hblno || '请填写分单号' }}
-                    </template>
-                  </span>
-                </div>
+              <!-- 收货人 -->
+              <template #consignee="{ model }">
+                <span title="复制通知人" class="iconfont icon-fuzhi3 copy-btn" style="font-size: 13px;"
+                  @click="copyNotify"></span>
+                <!-- <span title="保存到收发通模版(save)" class="iconfont icon-baocun save-btn"
+                  @click="save(model, 'consignee')"></span> -->
               </template>
-            </div>
-          </a-spin>
-        </div>
-        <a-spin :spinning="floading" style="flex: 1">
-          <a-form
-            class="ds-detail-form"
-            layout="vertical"
-            ref="basicFrom"
-            size="small"
-            :model="formState"
-          >
-            <div class="ds-card">
-              <h4>基本信息</h4>
-              <a-row :gutter="15">
-                <a-col :span="4" v-if="!formState.isHBL">
-                  <a-form-item
-                    label="主提单号"
-                    name="mblno"
-                  >
-                    <a-input v-model:value="formState.mblno" disabled/>
-                  </a-form-item>
-                </a-col>
-                <a-col v-else :span="4">
-                  <a-form-item
-                    class="pre-from-label"
-                    label="分提单号"
-                    name="hblno"
-                  >
-                    <a-input v-model:value="formState.hblno" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    class="pre-from-label"
-                    label="船名"
-                    name="vesselId"
-                  >
-                    <a-select v-model:value="formState.vesselId">
-                      <a-select-option :value="item.id" v-for="item in vesselList" :key="item.id">
-                        {{ item.vesselName }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    class="pre-from-label"
-                    label="航次"
-                    name="voyno"
-                  >
-                    <a-input v-model:value="formState.voyno" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    class="pre-from-label"
-                    label="船公司"
-                    name="carrierId"
-                  >
-                    <a-select v-model:value="formState.carrierId">
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in carrierList"
-                        :key="item.id"
-                      >
-                        {{ item.shortName }} / {{ item.codeName }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    class="pre-from-label"
-                    label="开船日期"
-                    name="etd"
-                  >
-                    <div class="date-box">
-                      <a-date-picker
-                        class="date-picker"
-                        v-model:value="formState.etd"
-                        value-format="YYYY-MM-DD"
-                      />
-                    </div>
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </div>
-            <div class="ds-card mt15">
-              <h4>收发通信息</h4>
-              <a-row :gutter="15">
-                <a-col :span="8">
-                  <a-form-item
-                    label="发货人"
-                    name="shipperName"
-                  >
-                    <a-select
-                      class="sft-select"
-                      v-model:value="formState.shipperId"
-                      @change="
-                        (e) => {
-                          ChangeSFT(e, 'shipper')
-                        }
-                      "
-                    >
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in SFTList.shipperList"
-                        :key="item.id"
-                      >
-                        {{ item.name }}
-                      </a-select-option>
-                    </a-select>
-                    <a-button type="link" class="sft-save-btn">
-                      <span class="iconfont icon-baocun"></span>
-                      保存发货人
-                    </a-button>
-                    <a-input placeholder="请输入" v-model:value="formState.shipperName" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item
-                    label="收货人"
-                    name="consigneeName"
-                  >
-                    <a-select
-                      class="sft-select"
-                      v-model:value="formState.consigneeId"
-                      @change="
-                        (e) => {
-                          ChangeSFT(e, 'consignee')
-                        }
-                      "
-                    >
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in SFTList.consigneeList"
-                        :key="item.id"
-                      >
-                        {{ item.name }}
-                      </a-select-option>
-                    </a-select>
-                    <a-button type="link" class="sft-save-btn">
-                      <span class="iconfont icon-baocun"></span>
-                      保存收货人
-                    </a-button>
-                    <a-input placeholder="请输入" v-model:value="formState.consigneeName" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item
-                    label="通知人"
-                    name="notifyPartyName"
-                  >
-                    <a-select
-                      class="sft-select"
-                      v-model:value="formState.notifyPartyId"
-                      @change="
-                        (e) => {
-                          ChangeSFT(e, 'notifyParty')
-                        }
-                      "
-                    >
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in SFTList.notifyPartyList"
-                        :key="item.id"
-                      >
-                        {{ item.name }}
-                      </a-select-option>
-                    </a-select>
-                    <a-button type="link" class="sft-save-btn">
-                      <span class="iconfont icon-baocun"></span>
-                      保存通知人
-                    </a-button>
-                    <a-input placeholder="请输入" v-model:value="formState.notifyPartyName" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item
-                    label="发货人地址"
-                    name="shipperAddress"
-                  >
-                    <a-input v-model:value="formState.shipperAddress" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item
-                    label="收货人地址"
-                    name="consigneeAddress"
-                  >
-                    <a-input v-model:value="formState.consigneeAddress" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item
-                    label="通知人地址"
-                    name="notifyPartyAddress"
-                  >
-                    <a-input v-model:value="formState.notifyPartyAddress" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="发货人国家"
-                    name="shipperCountry"
-                  >
-                    <a-select v-model:value="formState.shipperCountry">
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in countryList"
-                        :key="item.id"
-                      >
-                        {{ item.countryName }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="发货人电话"
-                    name="shipperCountryTel"
-                  >
-                    <a-input v-model:value="formState.shipperCountryTel" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="收货人国家"
-                    name="consigneeCountry"
-                  >
-                    <a-select v-model:value="formState.consigneeCountry">
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in countryList"
-                        :key="item.id"
-                      >
-                        {{ item.countryName }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="收货人电话"
-                    name="consigneeCountryTel"
-                  >
-                    <a-input v-model:value="formState.consigneeCountryTel" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="通知人国家"
-                    name="notifyPartyCountry"
-                  >
-                    <a-select v-model:value="formState.notifyPartyCountry">
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in countryList"
-                        :key="item.id"
-                      >
-                        {{ item.countryName }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="通知人电话"
-                    name="notifyPartyCountryTel"
-                  >
-                    <a-input v-model:value="formState.notifyPartyCountryTel" />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </div>
-            <div class="ds-card mt15">
-              <h4>港口信息</h4>
-              <a-row :gutter="15">
-                <a-col :span="4">
-                  <a-form-item
-                    label="装货港代码"
-                    name="loadPortId"
-                  >
-                    <a-select
-                      v-model:value="formState.loadPortId"
-                      @change="
-                        (e) => {
-                          PortChange(e, 'loadPort')
-                        }
-                      "
-                    >
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in portList"
-                        :key="item.id"
-                      >
-                        {{ item.portName }}/{{ item.ediCode }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="装货港"
-                    name="loadPort"
-                  >
-                    <a-input v-model:value="formState.loadPort" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="卸货港代码"
-                    name="dischargePortId"
-                  >
-                    <a-select
-                      v-model:value="formState.dischargePortId"
-                      @change="
-                        (e) => {
-                          PortChange(e, 'dischargePort')
-                        }
-                      "
-                    >
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in portList"
-                        :key="item.id"
-                      >
-                        {{ item.portName }}/{{ item.ediCode }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="卸货港"
-                    name="dischargePort"
-                  >
-                    <a-input v-model:value="formState.dischargePort" />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="收货地代码"
-                    name="deliveryPlaceId"
-                  >
-                    <a-select
-                      v-model:value="formState.deliveryPlaceId"
-                      @change="
-                        (e) => {
-                          PortChange(e, 'deliveryPlace')
-                        }
-                      "
-                    >
-                      <a-select-option
-                        :value="item.id"
-                        v-for="item in portList"
-                        :key="item.id"
-                      >
-                        {{ item.portName }}/{{ item.ediCode }}
-                      </a-select-option>
-                    </a-select>
-                  </a-form-item>
-                </a-col>
-                <a-col :span="4">
-                  <a-form-item
-                    label="收货地"
-                    name="deliveryPlace"
-                  >
-                    <a-input v-model:value="formState.deliveryPlace" />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </div>
-            <div class="ds-card mt15">
-              <h4>货物信息</h4>
-              <a-row :gutter="15">
-                <a-col :span="8">
-                  <a-form-item
-                    name="marks"
-                    label="唛头"
-                  >
-                    <a-textarea
-                      class="input-box"
-                      v-model:value="formState.marks"
-                      :auto-size="{ minRows: 12, maxRows: 12 }"
-                    />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-form-item
-                    name="description"
-                    label="货物描述"
-                  >
-                    <a-textarea
-                      v-model:value="formState.description"
-                      :auto-size="{ minRows: 12, maxRows: 12 }"
-                    />
-                  </a-form-item>
-                </a-col>
-                <a-col :span="8">
-                  <a-row :gutter="15">
-                    <a-col :span="24">
-                      <a-form-item
-                        label="货物标识"
-                        name="cargoid"
-                      >
-                        <a-select v-model:value="formState.cargoid">
-                          <a-select-option value="S">S 普通货</a-select-option>
-                          <a-select-option value="R">R 冻柜</a-select-option>
-                          <a-select-option value="D">D 危险品</a-select-option>
-                          <a-select-option value="O">O 超限箱</a-select-option>
-                        </a-select>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="包装"
-                        name="kindPkgs"
-                      >
-                        <a-select v-model:value="formState.kindPkgs">
-                          <a-select-option
-                            v-for="item in kindPkgsList"
-                            :key="item.id"
-                            :value="item.id"
-                          >
-                            {{ item.packageName }}
-                          </a-select-option>
-                        </a-select>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="温度"
-                        name="temperatureSet"
-                      >
-                        <div class="line-box">
-                          <a-input
-                            v-model:value="formState.temperatureSet"
-                            :disabled="formState.cargoid !== 'R'"
-                          />
-                        </div>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="温度单位"
-                        name="temperatureUnit"
-                      >
-                        <a-select
-                          size="small"
-                          :disabled="formState.cargoid !== 'R'"
-                          :default-value="formState.temperatureUnit || 'C摄氏'"
-                          v-model:value="formState.temperatureUnit"
-                        >
-                          <a-select-option value="C"> C摄氏 </a-select-option>
-                          <a-select-option value="F"> F华氏 </a-select-option>
-                        </a-select>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="通风"
-                        name="reeferQuantity"
-                      >
-                        <div class="line-box">
-                          <a-input
-                            v-model:value="formState.reeferQuantity"
-                            :disabled="formState.cargoid !== 'R'"
-                          />
-                        </div>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="CLASS"
-                        name="dangerClass"
-                      >
-                        <div class="line-box">
-                          <a-input
-                            v-model:value="formState.dangerClass"
-                            :disabled="formState.cargoid !== 'D'"
-                          />
-                        </div>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="UN NO"
-                        name="dangerNo"
-                      >
-                        <div class="line-box">
-                          <a-input
-                            v-model:value="formState.dangerNo"
-                            :disabled="formState.cargoid !== 'D'"
-                          />
-                        </div>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="联系人"
-                        name="dangerAttn"
-                      >
-                        <div class="line-box">
-                          <a-input
-                            v-model:value="formState.dangerAttn"
-                            :disabled="formState.cargoid !== 'D'"
-                          />
-                        </div>
-                      </a-form-item>
-                    </a-col>
-                    <a-col :span="12">
-                      <a-form-item
-                        label="联系电话"
-                        name="dangerTel"
-                      >
-                        <div class="line-box">
-                          <a-input
-                            v-model:value="formState.dangerTel"
-                            :disabled="formState.cargoid !== 'D'"
-                          />
-                        </div>
-                      </a-form-item>
-                    </a-col>
-                  </a-row>
-                </a-col>
-              </a-row>
-            </div>
-            <div class="ds-card mt15">
-              <h4>备注信息</h4>
-              <a-row :gutter="15">
-                <a-col :span="24">
-                  <a-form-item
-                    label="备注"
-                    name="remark"
-                  >
-                    <a-input placeholder="请输入" v-model:value="formState.remark" />
-                  </a-form-item>
-                </a-col>
-              </a-row>
-            </div>
-            <div class="ds-card mt15">
-              <div class="flex" style="justify-content: space-between;">
-                <div class="flex">
-                  <h4>集装箱信息</h4>
-                  <div >
-                    <span style="font-size: 12px;" class="ml10">场站：</span>
-                    <a-select v-model:value="formState.yardId" style="width: 100px">
-                      <a-select-option
-                        v-for="item in yardList"
-                        :key="item.id"
-                        :value="item.id"
-                      >
-                        {{ item.codeName }}
-                      </a-select-option>
-                    </a-select>
-                  </div>
-                </div>
-                <div>
-                  <div style="float: right">
-                    <a-button type="link" @click="addCtn" class="pl0">
-                      <span class="iconfont icon-new_document"></span>
-                      新建
-                    </a-button>
-                    <a-button type="link" @click="CopyAddCtn">
-                      <span class="iconfont icon-fuzhi3"></span>
-                      复制新建
-                    </a-button>
-                    <a-button type="link" @click="DelCtn">
-                      <span class="iconfont icon-shanchu21"></span>
-                      删除
-                    </a-button>
-                  </div>
+              <!-- 通知人 -->
+              <template #notifyParty="{ model }">
+                <span title="复制收货人" class="iconfont icon-fuzhi3 copy-btn" style="font-size: 13px;"
+                  @click="copyConsignee"></span>
+                <!-- <span title="保存到收发通模版(save)" class="iconfont icon-baocun save-btn"
+                  @click="save(model, 'notifyParty')"></span> -->
+              </template>
+            </BasicForm>
+          </div>
+          <div style="padding-left: 14px;">
+            <cargoInfo :isPreOrder="true" :details="book" ref="RefcargoInfo"></cargoInfo>
+          </div>
+          <div class="box">
+            <div class="title">
+              集装箱信息
+              <div>
+                <a-button type="link" v-repeat size="mini" @click="addboxLine">
+                  <span class="iconfont icon-new_document"></span>
+                  添加
+                </a-button>
+                <a-button type="link" v-repeat size="mini" @click="delboxLine">
+                  <span class="iconfont icon-shanchu21"></span>
+                  删除
+                </a-button>
+                <a-button type="link" v-repeat size="mini" @click="copyboxLine">
+                  <span class="iconfont icon-new_document"></span>
+                  复制
+                </a-button>
               </div>
+              <div class="yard">
+                <BasicForm @register="yardForm">
+
+                </BasicForm>
               </div>
-              <hot-table ref="hotTb" :data="list" :settings="settings">
-                <img
-                  v-show="!list.length"
-                  class="hot-tb-no-data"
-                  src="../../../../../assets/images/nodata.png"
-                  alt=""
-                />
-              </hot-table>
             </div>
-          </a-form>
-        </a-spin>
+            <hot-table style="margin-left: 14px;" ref="hotmain" :data="ctnList" :settings="settings">
+            </hot-table>
+            <div class="table-calc">
+              合计：
+              <span class="table-calc-box">件数: <span>{{ totalPkgs }}</span></span>
+              <span class="table-calc-box">重量: <span>{{ totalKgs }}</span>KGS</span>
+              <span class="table-calc-box">尺码: <span>{{ totalCbm }}</span>CBM</span>
+            </div>
+          </div>
+
+
+        </div>
       </div>
-      <a-modal
-        width="50vw"
-        :maskClosable="false"
-        v-model:visible="showSendModel"
-        title="发送预配舱单"
-        @cancel="sendClose"
-      >
+      <a-modal width="50vw" :maskClosable="false" v-model:visible="showSendModel" title="发送预配舱单" @cancel="sendClose">
         <div class="trace-box">
           <a-form>
             <a-row :gutter="16">
               <a-col :span="24" class="book-model-box">
-                <a-form-item
-                  label="操作类型"
-                  :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
-                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
+                <a-form-item label="操作类型" :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }" has-feedback>
                   <a-radio-group :options="sendOption" v-model:value="sendType" />
                 </a-form-item>
 
-                <a-form-item
-                  label="备注"
-                  :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
-                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }"
-                  has-feedback
-                >
-                  <a-textarea
-                    v-model:value="sendRemarkVal"
-                    placeholder="请输入备注"
-                    :auto-size="{ minRows: 3, maxRows: 5 }"
-                  />
+                <a-form-item label="备注" :labelCol="{ xs: { span: 24 }, sm: { span: 6 } }"
+                  :wrapperCol="{ xs: { span: 24 }, sm: { span: 15 } }" has-feedback>
+                  <a-textarea v-model:value="sendRemarkVal" placeholder="请输入备注"
+                    :auto-size="{ minRows: 3, maxRows: 5 }" />
                 </a-form-item>
               </a-col>
             </a-row>
@@ -730,573 +164,737 @@
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref, reactive } from 'vue'
-  import {
-    GetVesselSelectList,
-    GetCarrierlist,
-    GetShippingBillTemplateSelectList,
-    GetClientCountrySelectList,
-    GetClientPortSelectList,
-    GetPackageSelectList,
-    GetYardClientList,
-    GetShippingBillList,
-    EditShippingBill,
-    GetShippingBillInfo,
-    SendShippingBill,
-    BatchDelShippingBill,
-    GetCtnSelectList,
-    GetShippingBillCtnList,
-    BatchDelShippingBillCtn,
-  } from '/@/views/operation/seaexport/api/BookingLedger'
-  import { preOrderD } from '/@/views/operation/seaexport/detail/modules/preOrderColumns'
-  import { useMessage } from '/@/hooks/web/useMessage'
-  const { notification, createMessage } = useMessage()
-  import { useRoute } from 'vue-router'
-  const route = useRoute()
-  import { HotTable } from '@handsontable/vue3'
-  import { registerAllModules } from 'handsontable/registry'
-  import { object } from 'vue-types'
-  registerAllModules()
-  const props = defineProps({
-    details: { type: Object, default: {} },
+import { ref, reactive, onMounted, nextTick, watch  } from 'vue'
+import {
+  GetPackageSelectList,
+  GetShippingBillList,
+  SaveShippingBillAsync,
+  SendShippingBill,
+  BatchDelShippingBill,
+  GetCtnSelectList,
+  GetShippingBillCtnList,
+  GetClientPortInfoByCode,
+  GetShippingBillShortList
+} from '/@/views/operation/seaexport/api/BookingLedger'
+import { preOrderD } from '/@/views/operation/seaexport/detail/modules/preOrderColumns'
+import { useMessage } from '/@/hooks/web/useMessage'
+import cargoInfo from './cargoInfo.vue'
+const { notification, createMessage } = useMessage()
+import { useRoute } from 'vue-router'
+const route = useRoute()
+import { HotTable } from '@handsontable/vue3'
+import { registerAllModules } from 'handsontable/registry'
+import { BasicForm, useForm } from '/@/components/Form/index'
+import { mailingSchema, baseSchema, yardSchema } from './preOrder'
+import { resolve } from 'path'
+registerAllModules()
+const props = defineProps({
+  details: { type: Object, default: {} },
+})
+const book = {
+  marks: '11'
+}
+const openPreOrderShow = ref(false)
+const id = ref(route.query.id)
+// -----------------------弹窗相关------------------------
+function init() {
+  // 打开窗口调接口 如果接口有数据就回显 没有数据用主单的信息
+  openPreOrderShow.value = true
+  orderList.valeue = []
+  resetFieldsBase()
+  resetFieldsMail()
+  if (id.value) {
+    FngetPageESeaeEdi()
+  } else {
+  }
+  nextTick(()=>{
+     initTable()
   })
-  const openPreOrderShow = ref(false)
-  const id = ref()
-  // -----------------------弹窗相关------------------------
-  function init() {
-    openPreOrderShow.value = true
-    id.value = route.query.id
-    if (id.value) {
-      FngetPageESeaeEdi()
-    } else {
-      // this.getNoDataInit()
+}
+
+// 基础信息
+const [
+  baseForm,
+  { getFieldsValue: getFieldsValueBase, updateSchemaBase, validateFieldsBase, resetFields: resetFieldsBase, setFieldsValue: setFieldsValueBase, validateBase },
+] = useForm({
+  labelWidth: 80,
+  schemas: baseSchema,
+  showActionButtonGroup: false,
+  size: 'small',
+})
+
+// 收发通
+const [
+  mailingForm,
+  { getFieldsValue: getFieldsValueMail, updateSchemaMail, validateFieldsMail, resetFields: resetFieldsMail, setFieldsValue: setFieldsValueMail, validateMail },
+] = useForm({
+  labelWidth: 80,
+  schemas: mailingSchema,
+  showActionButtonGroup: false,
+  size: 'small',
+})
+
+// 场站
+const [
+  yardForm,
+  { getFieldsValue: getFieldsValueYard, resetFields: resetFieldsYard, setFieldsValue: setFieldsValueYard },
+] = useForm({
+  labelWidth: 80,
+  wrapperCol: { span: 24 },
+  schemas: yardSchema,
+  showActionButtonGroup: false,
+  size: 'small',
+})
+const ctnList = ref([]) as any
+watch(() => ctnList.value, (val) => {
+  let totalPkgsStr = 0
+  let totalKgsStr = 0
+  let totalCbmStr = 0
+  val.forEach(item=>{
+    if(item.pkgs){
+      totalPkgsStr += parseInt(item.pkgs)
     }
-    GetList()
-  }
+    if(item.kgs){
+      totalKgsStr += Number(Number(item.kgs).toFixed(2))
+    }
+    if(item.cbm){
+      totalCbmStr += Number(Number(item.cbm).toFixed(2))
+    }
+  })
+  totalPkgs.value = totalPkgsStr
+  totalKgs.value = totalKgsStr
+  totalCbm.value = totalCbmStr
+}, { deep: true })
 
-  function close() {
-    openPreOrderShow.value = false
-  }
-  // -----------------------左侧------------------------
-  const orderList = ref<any>([])
-  const formState = ref<any>({})
-  const editIndex = ref(0)
-  const floading = ref(false)
-  // 主题单号数据列表
-  const mainBillData = ref([])
-  // 分单号列表
-  const childBillData = ref([])
-  // 获取列表数据
-  function FngetPageESeaeEdi() {
-    orderList.value.splice(0)
-    editIndex.value = 0
-    formState.value = {}
-    let ApiData = {
-      pageCondition: {
-        pageIndex: 1,
-        pageSize: 999,
-        sortConditions: [],
-      },
-      queryCondition: `[{"FieldName":"businessId","FieldValue":"${id.value}","ConditionalType":1}]`,
+
+
+onMounted(() => {
+})
+function initTable() {
+  const hot = hotmain.value.hotInstance
+  hot.addHook('beforeKeyDown', function (event) {
+    if (event.key === 'ArrowDown') {
+      if (hot.getSelected()[0][0] == ctnList.value.length - 1 && !hot.getActiveEditor()?._opened) {
+        ctnList.value.push({})
+        nextTick(() => {
+          hot.selectCell(ctnList.value.length - 1, 3)
+        })
+        return false
+      }
     }
-    floading.value = true
-    GetShippingBillList(ApiData)
-      .then((res) => {
-        floading.value = false
-        if (res.succeeded) {
-          if (res.data.length > 0) {
-            res.data.forEach((e) => {
-              Object.keys(e).forEach((ObjK) => {
-                if (e[ObjK] == 0) {
-                  e[ObjK] = ''
-                }
-              })
-              let isHBL = true
-              if (e.mblno == route.query.mblno) {
-                isHBL = false
+  })
+}
+
+// 添加行
+function addboxLine() {
+  ctnList.value.push({})
+}
+// 保存收发通模版
+const save = (model, key) => {
+
+}
+function copyNotify() {
+  const data = getFieldsValueMail()
+  setFieldsValueMail({
+    consigneeName: data.notifyPartyName,
+    consigneeAddress: data.notifyPartyAddress,
+    consigneeCountry: data.notifyPartyCountry,
+    consigneeCountryName: data.notifyPartyCountryName,
+    consigneeCountryTel: data.notifyPartyCountryTel,
+  })
+}
+function copyConsignee() {
+  const data = getFieldsValueMail()
+  setFieldsValueMail({
+    notifyPartyName: data.consigneeName,
+    notifyPartyAddress: data.consigneeAddress,
+    notifyPartyCountry: data.consigneeCountry,
+    notifyPartyCountryName: data.consigneeCountryName,
+    notifyPartyCountryTel: data.consigneeCountryTel,
+  })
+}
+const linkageForm = async (val) => {
+  orderList.value[editIndex.value].hblno = val
+}
+
+
+
+
+
+
+
+
+
+
+function close() {
+  openPreOrderShow.value = false
+}
+// -----------------------左侧------------------------
+const orderList = ref<any>([])
+const formState = ref<any>({})
+const editIndex = ref(0)
+const floading = ref(false)
+const RefcargoInfo = ref(null) as any
+const sendOption = ref([
+  { label: '新增', value: '0' },
+  { label: '修改', value: '1' },
+  { label: '删除', value: '2' },
+])
+// 获取列表数据
+function FngetPageESeaeEdi() {
+  floading.value = true
+  let ApiData = {
+    pageCondition: {
+      pageIndex: 1,
+      pageSize: 999,
+      sortConditions: [],
+    },
+    queryCondition: `[{"FieldName":"businessId","FieldValue":"${id.value}","ConditionalType":1}]`,
+  }
+  GetShippingBillList(ApiData)
+    .then((res) => {
+      floading.value = false
+      if (res.succeeded) {
+        if (!res.data) {
+          res.data = []
+        }
+        if (res.data.length > 0) {
+          res.data.map((item, index) => {
+            item.checked = false
+            if (item.isPart === false) {
+              setFieldsValueBase(item)
+              if (!item.cargoId) {
+                item.cargoId = 'S'
               }
-              orderList.value.push({ checked: false, isHBL, ...e })
-            })
-            formState.value = orderList.value[editIndex.value]
-          } else {
-            orderList.value.push({ checked: false })
-            orderList.value[editIndex.value].mblno = route.query.mblno
-            // formState.voyno = '????'
-            setTimeout(() => {
-              // formState.vesselId = '1763455594347499520'
-              preOrderD.forEach((item) => {
-                Object.keys(props.details).forEach((e) => {
-                  if (item == e) {
-                    orderList.value[editIndex.value][e] = props.details[e]
-                    console.log(e, formState[e], props.details[e])
-                  } else if (item == 'cargoid') {
-                    orderList.value[editIndex.value].cargoid = props.details.cargoId
-                  }
-                })
+              RefcargoInfo.value.preOrderInit(item)
+              setFieldsValueMail(item)
+              setFieldsValueYard(item)
+              ctnList.value = item.ctnInfo ? item.ctnInfo : []
+              hotmain.value.hotInstance.loadData(ctnList.value)
+              editIndex.value = index
+            }
+          })
+          orderList.value = res.data
+        } else {
+          //处理接口没数据的情况
+          delete props.details.id
+          props.details.isPart = false
+          //处理基础信息
+          setFieldsValueBase(props.details)
+          // 拆分主单的收发通 发货人国家默认是中国 通知人和收货人为卸货港的国家
+          const arr = props.details.shipperContent ? props.details.shipperContent.split('\n') : []
+          const arr1 = props.details.consigneeContent ? props.details.consigneeContent.split('\n') : []
+          const arr2 = props.details.notifyPartyContent ? props.details.notifyPartyContent.split('\n') : []
+          setFieldsValueMail({
+            shipperName: arr[0],
+            shipperAddress: arr[1],
+            consigneeName: arr1[0],
+            consigneeAddress: arr1[1],
+            notifyPartyName: arr2[0],
+            notifyPartyAddress: arr2[1],
+            shipperCountryName: '中国(CHINA)',
+            shipperCountry: 'CN'
+          })
+          GetClientPortInfoByCode({ queryKey: props.details.dischargePortCode }).then(res => {
+            const arr = localStorage.getItem('ds-country') ? JSON.parse(localStorage.getItem('ds-country')) : []
+            if (res.data) {
+              arr.forEach(item => {
+                if (item.id == res.data.countryId) {
+                  setFieldsValueMail({
+                    consigneeCountryName: item.countryName,
+                    consigneeCountry: item.countryCode,
+                    notifyPartyCountryName: item.countryName,
+                    notifyPartyCountry: item.countryCode
+                  })
+                }
               })
-            }, 200)
-            formState.value = orderList.value[editIndex.value]
-          }
-          GetCtnList()
+            }
+          })
+          // 处理货物信息 默认货物标识为s
+          props.details.cargoId = 'S'
+          RefcargoInfo.value.preOrderInit(props.details)
+          // 处理场站
+          setFieldsValueYard({
+            yardId: props.details.yardId,
+            yard: props.details.yard
+          })
+          // 处理箱信息
+          ctnList.value = props.details.ctnInfo ? props.details.ctnInfo : []
+          ctnList.value.forEach(item => {
+            delete item.id
+          })
+          hotmain.value.hotInstance.loadData(ctnList.value)
+          const data = JSON.parse(JSON.stringify(props.details))
+          data.mblno = props.details.mblno
+          data.isPart = false
+          data.checked = false
+          orderList.value[0] = data
         }
-      })
-      .catch((err) => {
-        floading.value = false
-      })
-  }
-  // 添加分单
-  function addOrder() {
-    orderList.value.push({ checked: true, isHBL: true })
-  }
-  // 保存
-  function saveOrder() {
-    let ApiData = {
-      ...orderList.value[editIndex.value],
-      ctnInfo: list.value,
-      businessId: id.value ? id.value : '',
-    }
-    vesselList.value.forEach((e) => {
-      if (e.id == ApiData.vesselId) {
-        ApiData.vessel = e.vesselName
       }
     })
-    carrierList.value.forEach((e) => {
-      if (e.id == ApiData.carrierId) {
-        ApiData.carrier = e.codeName
-        ApiData.carrierName = e.shortName
-      }
+    .catch((err) => {
+      floading.value = false
     })
-    yardList.value.forEach((e) => {
-      if (e.id == ApiData.carrierId) {
-        ApiData.yard = e.shortName
+}
+// 保存当前信息
+function saveOrderInfo() {
+  return new Promise((resolve) => {
+    const data = {
+      ...getFieldsValueMail(),
+      ...getFieldsValueBase(),
+      ...getFieldsValueYard(),
+      ...RefcargoInfo.value.getFieldsValue(),
+      ctnInfo: ctnList.value,
+      businessId: id.value ? id.value : '',
+    }
+    orderList.value[editIndex.value] = data
+    resolve(true)
+  })
+}
+// 添加分单 保存当前单
+function addOrder() {
+  saveOrderInfo().then(res => {
+    // 分单内容要复制主单的
+    let mblData = {} as any
+    orderList.value.forEach(item => {
+      if (!item.isPart) {
+        mblData = JSON.parse(JSON.stringify(item))
       }
     })
+    mblData.id = '0'
+    mblData.hblno = ''
+    if (mblData.ctnInfo) {
+      mblData.ctnInfo.forEach(item => {
+        delete item.id
+      })
+    }
+    setFieldsValueBase(mblData)
+    RefcargoInfo.value.preOrderInit(mblData)
+    setFieldsValueMail(mblData)
+    setFieldsValueYard(mblData)
+    ctnList.value = mblData.ctnInfo ? mblData.ctnInfo : []
+    hotmain.value.hotInstance.loadData(ctnList.value)
+    mblData.isPart = true
+    orderList.value.push({ checked: true, isPart: true, ...mblData })
+    editIndex.value = orderList.value.length - 1
+  })
+}
+// 保存
+function saveOrder() {
+  saveOrderInfo().then(res => {
     floading.value = true
-    EditShippingBill(ApiData).then((res) => {
+    SaveShippingBillAsync(orderList.value).then((res) => {
       floading.value = false
       if (res.succeeded) {
         orderList.value[editIndex.value].id = res.data
         createMessage.success(res.message)
+        FngetPageESeaeEdi()
       }
+    }).catch(() => {
+      floading.value = false
     })
-  }
-  // 删除
-  function removeOrder() {
-    let Arr: any = []
-    let type = true
-    orderList.value.forEach((e, i) => {
-      if (e.checked) {
-        if (e.id) {
-          if (e.mblno) {
-            type = false
-            notification.warning({ message: '主单不可删除', duration: 3 })
-          } else {
-            Arr.push(e.id)
-          }
-        } else {
-          type = false
-          notification.warning({ message: '请先保存数据', duration: 3 })
-        }
-      }
-    })
-    if (type) {
-      if (Arr.length) {
-        let ApiData = {
-          ids: Arr,
-        }
-        BatchDelShippingBill(ApiData).then((res) => {
-          notification.success({ message: '成功删除,所选已保存分单！', duration: 3 })
-          formState.value = {}
-          orderList.value.splice(0)
-          editIndex.value = 0
-          FngetPageESeaeEdi()
-        })
-      } else {
-        notification.warning({ message: '请至少选择一条数据！', duration: 3 })
-      }
+  })
+}
+// 删除
+function removeOrder() {
+  const arr = [] as any
+  for (let i = orderList.value.length - 1; i >= 0; i--) {
+    if (orderList.value[i].checked && !orderList.value[i].isPart) {
+      createMessage.error('主单不能被删除')
+      return false
     }
   }
-  const showSendModel = ref(false)
-  const sendType = ref('')
-  const sendRemarkVal = ref('')
-  const sendOption = ref([
-    { label: '新增', value: '0' },
-    { label: '修改', value: '1' },
-    { label: '删除', value: '2' },
-  ])
-  const sendLoading = ref(false)
-  // 发送
-  function sendOrderFun() {
-    let SelectArr: any = []
-    orderList.value.forEach((e, i) => {
-      if (e.checked) {
-        SelectArr.push(i)
-      }
-    })
-
-    if (SelectArr.length) {
-      showSendModel.value = true
-    } else {
-      notification.error({ message: '请选择发送单号', duration: 3 })
+  for (let i = orderList.value.length - 1; i >= 0; i--) {
+    if (orderList.value[i].checked && orderList.value[i].isPart) {
+      arr.push(orderList.value[i].id)
+      orderList.value.splice(i, 1)
     }
   }
-  // 确认发送
-  function sendSubmit() {
-    sendLoading.value = true
-    let SendIds: any = []
-    orderList.value.forEach((e) => {
-      if (e.checked) {
-        SendIds.push(e.id)
-      }
-    })
-    let ApiData = {
-      ids: SendIds,
-      type: sendType.value,
-      sendRemark: sendRemarkVal.value,
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (arr[i] == 0) {
+      arr.splice(i, 1)
     }
-    SendShippingBill(ApiData).then((res) => {
-      let message = ''
+  }
+  if (arr.length > 0) {
+    floading.value = true
+    BatchDelShippingBill({ ids: arr }).then((res) => {
       if (res.succeeded) {
-        switch (sendType.value) {
-          case '0':
-            message = '新增发送成功'
-            break
-          case '1':
-            message = '修改发送成功'
-            break
-          default:
-            message = '删除发送成功'
-            break
-        }
-        notification.success({ message: message, duration: 3 })
-        sendClose()
+        editOrder(0)
       }
-      sendLoading.value = false
+      floading.value = false
+    }).catch(() => {
+      floading.value = false
     })
+  } else {
+    editOrder(0)
   }
-  // 关闭
-  function sendClose() {
-    showSendModel.value = false
-    sendType.value = ''
-    sendRemarkVal.value = ''
+}
+const showSendModel = ref(false)
+const sendType = ref('')
+const sendRemarkVal = ref('')
+const sendLoading = ref(false)
+
+// 发送
+function sendOrderFun() {
+  const SelectArr = [] as any
+  for (let i = 0; i < orderList.value.length; i++) {
+    if (orderList.value[i].checked && orderList.value[i].id == 0) {
+      createMessage.error('请先保存')
+      return false
+    }
   }
-  // 刷新
-  function handleRef() {
-    init()
+  for (let i = 0; i < orderList.value.length; i++) {
+    if (orderList.value[i].checked) {
+      SelectArr.push(orderList.value[i])
+    }
   }
-  // 点击列表
-  function changeOrder(index, sedDetail) {
-    orderList.value[editIndex.value] = formState.value
-    editIndex.value = index
-    formState.value = orderList.value[index]
-    orderList.value.forEach(item => {
-      item.checked = false
-    })
-    sedDetail.checked = true
-    // GetShippingBillInfo({ id: formState.value.id }).then((res) => {
-    //   if (res.succeeded) {
-    //     notification.success({ message: res.message, duration: 3 })
-    //     console.log(res)
-    //   }
-    // })
+
+  if (SelectArr.length) {
+    showSendModel.value = true
+  } else {
+    notification.error({ message: '请选择发送单号', duration: 3 })
+  }
+}
+function delboxLine() {
+  for (let i = ctnList.value.length - 1; i >= 0; i--) {
+    if (ctnList.value[i].selected) {
+      ctnList.value.splice(i, 1)
+    }
   }
-  // -----------------------右侧表单------------------------
-  const vesselList = ref<any>([])
-  const carrierList = ref<any>([])
-  const countryList = ref<any>([])
-  const portList = ref<any>([])
-  const kindPkgsList = ref<any>([])
-  const yardList = ref<any>([])
-  const SFTList = reactive<any>({
-    consigneList: [],
-    shipperList: [],
-    notifypartyList: [],
+  hotmain.value.hotInstance.loadData(ctnList.value)
+}
+function copyboxLine() {
+  const arr = [] as any
+  ctnList.value.forEach(item => {
+    if (item.selected) {
+      arr.push(item)
+    }
   })
-  // const shipperList = ref<any>([])
-  // const consigneList = ref<any>([])
-  // const notifypartyList = ref<any>([])
-  function GetList() {
-    GetVesselSelectList().then((res) => {
-      vesselList.value = res.data
-    })
-
-    GetCarrierlist().then((res) => {
-      carrierList.value = res.data
-    })
-    let TypeList = [
-      { label: '发货人', value: '2', code: 'shipper' },
-      { label: '收货人', value: '1', code: 'consignee' },
-      { label: '通知人', value: '3', code: 'notifyParty' },
-    ]
-    TypeList.forEach((e) => {
-      GetShippingBillTemplateSelectList({ type: e.value }).then((res) => {
-        SFTList[`${e.code}List`] = res.data
-      })
-    })
-    GetClientCountrySelectList().then((res) => {
-      countryList.value = res.data
-    })
-    GetClientPortSelectList().then((res) => {
-      portList.value = res.data
-    })
-    GetPackageSelectList().then((res) => {
-      kindPkgsList.value = res.data
-    })
-    GetYardClientList().then((res) => {
-      yardList.value = res.data
-    })
-    GetCtnSelectList().then((res) => {
-      ctnDict.value = res.data
-    })
+  if (arr.length > 1) {
+    createMessage.error('请选择一条数据复制')
+    return false
   }
-  function ChangeSFT(data, type) {
-    console.log(data, type)
-
-    SFTList[`${type}List`].forEach((e) => {
-      if (e.id == data) {
-        console.log(e)
-        formState.value[`${type}Name`] = e.name
-        formState.value[`${type}Address`] = e.address
-        formState.value[`${type}Country`] = e.country
-        formState.value[`${type}CountryName`] = e.countryName
-        formState.value[`${type}CountryTel`] = e.tel
-      }
-    })
+  if (arr.length == 1) {
+    ctnList.value.push(JSON.parse(JSON.stringify(arr[0])))
+    hotmain.value.hotInstance.loadData(ctnList.value)
   }
-  function CopySFT(type, Ctype) {
-    formState.value[`${type}Name`] = formState.value[`${Ctype}Name`]
-    formState.value[`${type}Address`] = formState.value[`${Ctype}Address`]
-    formState.value[`${type}Country`] = formState.value[`${Ctype}Country`]
-    formState.value[`${type}CountryName`] = formState.value[`${Ctype}CountryName`]
-    formState.value[`${type}CountryTel`] = formState.value[`${Ctype}CountryTel`]
+  console.log(arr);
+}
+// 确认发送
+function sendSubmit() {
+  sendLoading.value = true
+  let SendIds: any = []
+  orderList.value.forEach((e) => {
+    if (e.checked) {
+      SendIds.push(e.id)
+    }
+  })
+  let ApiData = {
+    ids: SendIds,
+    type: sendType.value,
+    sendRemark: sendRemarkVal.value,
   }
-  function PortChange(data, type) {
-    console.log(data, type)
-    portList.value.forEach((item) => {
-      if (item.id == data) {
-        formState.value[`${type}Code`] = item.ediCode
-        formState.value[type] = item.portName
+  SendShippingBill(ApiData).then((res) => {
+    let message = ''
+    if (res.succeeded) {
+      switch (sendType.value) {
+        case '0':
+          message = '新增发送成功'
+          break
+        case '1':
+          message = '修改发送成功'
+          break
+        default:
+          message = '删除发送成功'
+          break
       }
-    })
-  }
-  // -----------------------下侧表格------------------------
-  const list = ref<any>([])
-  const ctnDict = ref([])
-  const kindPkgsDict = ref([])
-  const columns = [
-    {
-      data: 'selected',
-      type: 'checkbox',
-      title: ' ',
-      width: 32,
-      className: 'htCenter',
-      readOnly: false,
+      notification.success({ message: message, duration: 3 })
+      sendClose()
+    }
+    sendLoading.value = false
+  }).catch((err) => {
+    sendLoading.value = false
+  })
+}
+// 关闭
+function sendClose() {
+  showSendModel.value = false
+  sendType.value = ''
+  sendRemarkVal.value = ''
+}
+// 刷新
+function handleRef() {
+  init()
+}
+// 点击列表 保存原先信息 然后切换
+
+function changeOrder(index) {
+  saveOrderInfo().then(res => {
+    editOrder(index)
+  })
+}
+function editOrder(index) {
+  editIndex.value = index
+  const data = orderList.value[index]
+  orderList.value.forEach(item => {
+    item.checked = false
+  })
+  orderList.value[index].checked = true
+  setFieldsValueBase(data)
+  RefcargoInfo.value.preOrderInit(data)
+  setFieldsValueMail(data)
+  setFieldsValueYard(data)
+  setFieldsValueMail({
+    shipper: '',
+    shipperId: '',
+    consignee: '',
+    consigneeId: '',
+    notifyParty: '',
+    notifyPartyId: '',
+  })
+  ctnList.value = data.ctnInfo ? data.ctnInfo : []
+  hotmain.value.hotInstance.loadData(ctnList.value)
+}
+// -----------------------右侧表单------------------------
+const vesselList = ref<any>([])
+const carrierList = ref<any>([])
+const portList = ref<any>([])
+const kindPkgsList = ref<any>([])
+const yardList = ref<any>([])
+const SFTList = reactive<any>({
+  consigneList: [],
+  shipperList: [],
+  notifypartyList: [],
+})
+
+// -----------------------下侧表格------------------------
+const list = ref<any>([])
+const ctnDict = ref([])
+const kindPkgsDict = ref([])
+const hotmain = ref(null) as any
+const mainPkgs = ref([]) as any
+const totalPkgs = ref(0)
+const totalKgs = ref(0)
+const totalCbm = ref(0)
+const columns = [
+  {
+    data: 'selected',
+    type: 'checkbox',
+    title: ' ',
+    width: 32,
+    className: 'htCenter',
+    readOnly: false,
+  },
+  {
+    title: '箱型代码',
+    width: 80,
+    data: 'ctnCode',
+  },
+  {
+    title: '箱型',
+    width: 180,
+    data: 'ctn',
+    type: 'dropdown',
+    source: async (query, process) => {
+      const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
+      if (!ctnDict.value.length) ctnDict.value = res
+      const dict = res.map((res) => {
+        return res.ctnName
+      })
+      process(dict)
     },
-    {
-      title: '尺寸',
-      width: 80,
-      data: 'size',
+  },
+  {
+    title: '箱号',
+    width: 180,
+    data: 'cntrNo',
+  },
+  {
+    title: '封号',
+    width: 180,
+    data: 'sealNo',
+  },
+  {
+    title: '件数',
+    width: 180,
+    data: 'pkgs',
+  },
+  {
+    title: '包装',
+    width: 120,
+    data: 'kindPkgsName',
+    type: 'dropdown',
+    // 下拉框数据，可以同步或者异步返回(异步需要process返回)
+    source: async (query, process) => {
+      const res = (await GetPackageSelectList({ queryKey: query }))?.data
+      console.log(res)
+      mainPkgs.value = res
+      const dict = res.map((res) => {
+        return res.packageName
+      })
+      process(dict)
     },
-    {
-      title: '箱型',
-      width: 120,
-      data: 'ctn',
-      type: 'dropdown',
-      // 下拉框数据，可以同步或者异步返回(异步需要process返回)
-      source: async (query, process) => {
+  },
+  {
+    title: '重量',
+    width: 180,
+    data: 'kgs',
+  },
+  {
+    title: '尺码',
+    width: 180,
+    data: 'cbm',
+  },
+]
+// 表格配置项
+const settings = {
+  height: '208',
+  autoWrapRow: true,
+  autoWrapCol: true,
+  // 每行的高度
+  rowHeights: 26,
+  fixedColumnsLeft: 1,
+  // 需要隐藏的列
+  hiddenColumns: {
+    columns: [1],
+    indicators: true,
+  },
+  // 控制回车移动
+  enterMoves: 'row',
+  columnSorting: true,
+  // 如果通过复制或者填写校验出现错误，清空输入框
+  afterValidate: function (isValid, value, row, prop, source) {
+    if (!isValid) {
+      hotmain.value.hotInstance.setDataAtRowProp(row, prop, '')
+    }
+  },
+  columns: columns,
+  // 此行直接复制，必须(非商用)
+  licenseKey: 'non-commercial-and-evaluation',
+  // 定义所有单元格发生变化的回调处理
+  async afterChange(changes, source) {
+    // 这里定义了编辑，自动填充和拷贝数据的处理逻辑
+    if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
+      let dict: any = {}
+      // 选择箱型联动逻辑
+      if (changes[0][1] === 'ctn') {
         const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
         if (!ctnDict.value.length) ctnDict.value = res
-        const dict = res.map((res) => {
-          return res.ctnName
+        const item = res.filter((item) => {
+          return item.ctnName === changes[0][3]
         })
-        process(dict)
-      },
-    },
-    // {
-    //   title: '表现形式',
-    //   width: 80,
-    //   data: 'ctnAll',
-    // },
-    {
-      title: '箱号',
-      width: 120,
-      data: 'cntrNo',
-    },
-    {
-      title: '封号',
-      width: 120,
-      data: 'sealNo',
-    },
-    {
-      title: '件数',
-      width: 120,
-      data: 'pkgs',
-    },
-    {
-      title: '毛重',
-      width: 120,
-      data: 'kgs',
-    },
-    {
-      title: '尺码',
-      width: 120,
-      data: 'cbm',
-    },
-    // kindPkgsName
-    // kindPkgs
-    {
-      title: '包装',
-      width: 150,
-      data: 'kindPkgs',
-      type: 'dropdown',
-      // 下拉框数据，可以同步或者异步返回(异步需要process返回)
-      source: async (query, process) => {
-        const res = kindPkgsDict.value.length
-          ? kindPkgsDict.value
-          : (await GetPackageSelectList())?.data
-        if (!kindPkgsDict.value.length) {
-          kindPkgsDict.value.splice(0)
-          res.forEach((e) => {
-            kindPkgsDict.value.push(e)
-          })
+        if (item) dict = item[0]
+        ctnList.value[changes[0][0]]['ctn'] = dict?.ctnName
+        ctnList.value[changes[0][0]]['ctnCode'] = dict?.ediCode
+        ctnList.value[changes[0][0]]['size'] = dict?.ctnSize
+        if (ctnList.value[changes[0][0]]['ctnNum']) {
+          ctnList.value[changes[0][0]]['teu'] =
+            parseInt(dict.teu || 0) * parseInt(ctnList.value[changes[0][0]]['ctnNum'])
         }
-        const dict = res.map((res) => {
-          return res.packageName
+        ctnList.value[changes[0][0]]['tareWeight'] = dict?.ctnWeight
+      }
+      if (changes[0][1] === 'kindPkgsName') {
+        const res = mainPkgs.value
+        const item = res.filter((item) => {
+          return item.packageName === changes[0][3]
         })
-        process(dict)
-      },
-    },
-  ]
-  const settings = {
-    height: '400',
-    width: '100%',
-    autoWrapRow: true,
-    autoWrapCol: true,
-    // 每行的高度
-    rowHeights: 32,
-    fixedColumnsLeft: 1,
-    // 需要隐藏的列
-    // hiddenColumns: {
-    //   columns: [1, 2, 3],
-    //   indicators: true,
-    // },
-    // 控制回车移动
-    enterMoves: 'row',
-    columnSorting: true,
-    // 如果通过复制或者填写校验出现错误，清空输入框
-    // afterValidate: function (isValid, value, row, prop, source) {
-    //   if (!isValid) {
-    //     hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
-    //   }
-    // },
-    columns: columns,
-    // 此行直接复制，必须(非商用)
-    licenseKey: 'non-commercial-and-evaluation',
-    // 定义所有单元格发生变化的回调处理
-    async afterChange(changes, source) {
-      if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
-        let dict: any = {}
-        if (changes[0][1] === 'kindPkgsName') {
-          const res = kindPkgsDict.value.length
-            ? kindPkgsDict.value
-            : (await GetPackageSelectList())?.data
-          if (!kindPkgsDict.value.length) {
-            kindPkgsDict.value.splice(0)
-            res.forEach((e) => {
-              kindPkgsDict.value.push(e)
-            })
-          }
-          const item = res.filter((item) => {
-            return item.packageName === changes[0][3]
-          })
-          if (item) dict = item[0]
-          list.value[changes[0][0]]['kindPkgs'] = dict?.id
-          list.value[changes[0][0]]['kindPkgsName'] = dict?.packageName
-        }
+        if (item) dict = item[0]
+        ctnList.value[changes[0][0]]['kindPkgs'] = dict?.id
+        ctnList.value[changes[0][0]]['kindPkgsName'] = dict?.packageName
       }
-    },
-  }
-  function GetCtnList() {
-    if (orderList.value[editIndex.value].id) {
-      let ApiData = {
-        queryCondition: JSON.stringify([
-          {
-            FieldName: 'pid',
-            FieldValue: orderList.value[editIndex.value].id,
-            ConditionalType: 1,
-          },
-        ]),
-        pageCondition: {
-          pageIndex: 1,
-          pageSize: 999,
-          sortConditions: [],
+      // // 计算件数
+      // if (changes[0][1] === 'pkgs') {
+      //   let RData = 0
+      //   ctnList.value.forEach((e) => {
+      //     if (e.pkgs) {
+      //       RData = RData + parseInt(e.pkgs)
+      //     }
+      //   })
+      //   totalPkgs.value = RData
+      // }
+      // // 计算毛重
+      // if (changes[0][1] === 'kgs') {
+      //   let RData = 0
+      //   ctnList.value.forEach((e) => {
+      //     if (e.kgs) {
+      //       RData = RData + Number(e.kgs)
+      //     }
+      //   })
+      //   totalKgs.value = RData.toFixed(2)
+      // }
+      // // 计算尺码
+      // if (changes[0][1] === 'cbm') {
+      //   let RData = 0
+      //   ctnList.value.forEach((e) => {
+      //     if (e.cbm) {
+      //       RData = RData + Number(e.cbm)
+      //     }
+      //   })
+      //   totalCbm.value = RData.toFixed(2)
+      // }
+    }
+  },
+}
+function GetCtnList() {
+  if (orderList.value[editIndex.value].id) {
+    let ApiData = {
+      queryCondition: JSON.stringify([
+        {
+          FieldName: 'pid',
+          FieldValue: orderList.value[editIndex.value].id,
+          ConditionalType: 1,
         },
-      }
-      GetShippingBillCtnList(ApiData).then((res) => {
-        list.vale = res.data
-      })
+      ]),
+      pageCondition: {
+        pageIndex: 1,
+        pageSize: 999,
+        sortConditions: [],
+      },
     }
-  }
-  function addCtn() {
-    list.value.push({})
-  }
-  function DelCtn() {
-    let ApiData = { ids: [] }
-    list.value.forEach((e, i) => {
-      if (e.selected) {
-        if (e.id) {
-          ApiData.ids.push(e.id)
-        }
-      }
-    })
-    BatchDelShippingBillCtn(ApiData).then((res) => {
-      GetCtnList()
-    })
-  }
-  function CopyAddCtn() {
-    let Arr: any = []
-    list.value.forEach((e) => {
-      let item = { ...e }
-      if (item.selected) {
-        delete item.id
-        delete item.pid
-        delete item.selected
-        Arr.push(item)
-      }
+    GetShippingBillCtnList(ApiData).then((res) => {
+      list.vale = res.data
     })
-    list.value.push(...Arr)
   }
-  defineExpose({
-    init,
-  })
+}
+
+defineExpose({
+  init,
+})
 </script>
-<style lang="less">
+<style lang="less" scoped>
 .ds-pre-order {
   .pl0 {
-    padding-left: 0!important;
+    padding-left: 0 !important;
   }
+
   .pb0 {
-    padding-bottom: 0!important;
+    padding-bottom: 0 !important;
   }
+
   .pt0 {
-    padding-top: 0!important;
+    padding-top: 0 !important;
   }
+
   .ant-modal-body .ant-form {
     background: #ffffff;
     padding: 0 15px;
   }
+
   .sft-save-btn {
     position: absolute;
     right: -10px;
     top: -26px;
   }
+
   .sft-select {
     position: absolute;
     left: 40px;
     top: -18px;
     width: 90px;
+
     .ant-select-selector {
-      height: 16px!important;
+      height: 16px !important;
+
       .ant-select-selection-item {
         height: 20px;
         position: relative;
@@ -1305,4 +903,108 @@
     }
   }
 }
+
+.baseinfo {
+  .ds-textarea {
+    position: relative;
+    top: -6px;
+
+    textarea {
+      height: 102px;
+    }
+  }
+
+  .ant-divider-horizontal {
+    margin: 8px 0 8px !important;
+    background: #E8EBED;
+  }
+
+  h4 {
+    margin: 12px 0 5px 0;
+  }
+
+  .iconfont {
+    display: inline-block;
+    height: 18px;
+    width: 32px;
+    border-radius: 2px;
+    font-size: 12px;
+    text-align: center;
+    background: #F5F9FC;
+    color: #257AFA;
+    margin-right: 0;
+    margin-left: 4px;
+    margin-bottom: 4px;
+    cursor: pointer;
+  }
+
+  .copy-btn,
+  .save-btn {
+    float: right;
+  }
+}
+
+
+.title {
+  font-size: 12px;
+  font-weight: bold;
+  color: black;
+  margin-bottom: 5px;
+  padding-left: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.box {
+  margin-bottom: 10px
+}
+
+.right {
+  width: calc(100% - 320px);
+}
+
+.left-title {
+  display: flex;
+
+  /deep/ .ant-btn-link {
+    padding: 0px !important;
+    margin-right: 10px;
+  }
+
+  border-bottom: 1px solid #e8ebed;
+  margin-bottom: 10px;
+}
+
+.order-label {
+  margin-left: 10px;
+  cursor: pointer;
+
+  &.active {
+    color: #257AFA
+  }
+}
+
+.sec-order {
+  border-bottom: 1px solid #e8ebed;
+}
+
+.yard {
+  width: 400px;
+}
+
+.table-calc {
+  margin-top: 8px;
+  font-size: 12px;
+
+  &-box {
+    display: inline-block;
+    background: #f5f9fc;
+    padding: 2px 6px;
+    margin-right: 6px;
+
+    span {
+      color: #257afa;
+    }
+  }
+}
 </style>
diff --git a/src/views/operation/seaexport/detail/modules/preOrderCtn.vue b/src/views/operation/seaexport/detail/modules/preOrderCtn.vue
new file mode 100644
index 00000000..e3c05304
--- /dev/null
+++ b/src/views/operation/seaexport/detail/modules/preOrderCtn.vue
@@ -0,0 +1,212 @@
+<template>
+    <div>
+        <hot-table style="margin-left: 14px;" ref="hotmain" :data="ctnList" :settings="settings">
+        </hot-table>
+        <div class="table-calc">
+            合计：
+            <span class="table-calc-box">件数: <span>{{ totalPkgs }}</span></span>
+            <span class="table-calc-box">重量: <span>{{ totalKgs }}</span>KGS</span>
+            <span class="table-calc-box">尺码: <span>{{ totalCbm }}</span>CBM</span>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted, defineProps, watch, nextTick, defineComponent, defineExpose, watchEffect, inject } from 'vue'
+import { HotTable } from '@handsontable/vue3'
+import {
+    GetPackageSelectList,
+    GetShippingBillList,
+    SaveShippingBillAsync,
+    SendShippingBill,
+    BatchDelShippingBill,
+    GetCtnSelectList,
+    GetShippingBillCtnList,
+    GetClientPortInfoByCode,
+    GetShippingBillShortList
+} from '/@/views/operation/seaexport/api/BookingLedger'
+const ctnList = ref([]) as any
+const list = ref<any>([])
+const ctnDict = ref([])
+const kindPkgsDict = ref([])
+const hotmain = ref(null) as any
+const mainPkgs = ref([]) as any
+const totalPkgs = ref(0)
+const totalKgs = ref(0)
+const totalCbm = ref(0)
+const columns = [
+    {
+        data: 'selected',
+        type: 'checkbox',
+        title: ' ',
+        width: 32,
+        className: 'htCenter',
+        readOnly: false,
+    },
+    {
+        title: '箱型代码',
+        width: 80,
+        data: 'ctnCode',
+    },
+    {
+        title: '箱型',
+        width: 180,
+        data: 'ctn',
+        type: 'dropdown',
+        source: async (query, process) => {
+            const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
+            if (!ctnDict.value.length) ctnDict.value = res
+            const dict = res.map((res) => {
+                return res.ctnName
+            })
+            process(dict)
+        },
+    },
+    {
+        title: '箱号',
+        width: 180,
+        data: 'cntrNo',
+    },
+    {
+        title: '封号',
+        width: 180,
+        data: 'sealNo',
+    },
+    {
+        title: '件数',
+        width: 180,
+        data: 'pkgs',
+    },
+    {
+        title: '包装',
+        width: 120,
+        data: 'kindPkgsName',
+        type: 'dropdown',
+        // 下拉框数据，可以同步或者异步返回(异步需要process返回)
+        source: async (query, process) => {
+            const res = (await GetPackageSelectList({ queryKey: query }))?.data
+            console.log(res)
+            mainPkgs.value = res
+            const dict = res.map((res) => {
+                return res.packageName
+            })
+            process(dict)
+        },
+    },
+    {
+        title: '重量',
+        width: 180,
+        data: 'kgs',
+    },
+    {
+        title: '尺码',
+        width: 180,
+        data: 'cbm',
+    },
+]
+// 表格配置项
+const settings = {
+    height: '208',
+    autoWrapRow: true,
+    autoWrapCol: true,
+    // 每行的高度
+    rowHeights: 26,
+    fixedColumnsLeft: 1,
+    // 需要隐藏的列
+    hiddenColumns: {
+        columns: [1],
+        indicators: true,
+    },
+    // 控制回车移动
+    enterMoves: 'row',
+    columnSorting: true,
+    // 如果通过复制或者填写校验出现错误，清空输入框
+    afterValidate: function (isValid, value, row, prop, source) {
+        if (!isValid) {
+            hotmain.value.hotInstance.setDataAtRowProp(row, prop, '')
+        }
+    },
+    columns: columns,
+    // 此行直接复制，必须(非商用)
+    licenseKey: 'non-commercial-and-evaluation',
+    // 定义所有单元格发生变化的回调处理
+    async afterChange(changes, source) {
+        // 这里定义了编辑，自动填充和拷贝数据的处理逻辑
+        if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
+            let dict: any = {}
+            // 选择箱型联动逻辑
+            if (changes[0][1] === 'ctn') {
+                const res = ctnDict.value.length ? ctnDict.value : (await GetCtnSelectList())?.data
+                if (!ctnDict.value.length) ctnDict.value = res
+                const item = res.filter((item) => {
+                    return item.ctnName === changes[0][3]
+                })
+                if (item) dict = item[0]
+                ctnList.value[changes[0][0]]['ctn'] = dict?.ctnName
+                ctnList.value[changes[0][0]]['ctnCode'] = dict?.ediCode
+                ctnList.value[changes[0][0]]['size'] = dict?.ctnSize
+                if (ctnList.value[changes[0][0]]['ctnNum']) {
+                    ctnList.value[changes[0][0]]['teu'] =
+                        parseInt(dict.teu || 0) * parseInt(ctnList.value[changes[0][0]]['ctnNum'])
+                }
+                ctnList.value[changes[0][0]]['tareWeight'] = dict?.ctnWeight
+            }
+            if (changes[0][1] === 'kindPkgsName') {
+                const res = mainPkgs.value
+                const item = res.filter((item) => {
+                    return item.packageName === changes[0][3]
+                })
+                if (item) dict = item[0]
+                ctnList.value[changes[0][0]]['kindPkgs'] = dict?.id
+                ctnList.value[changes[0][0]]['kindPkgsName'] = dict?.packageName
+            }
+            // // 计算件数
+            // if (changes[0][1] === 'pkgs') {
+            //   let RData = 0
+            //   ctnList.value.forEach((e) => {
+            //     if (e.pkgs) {
+            //       RData = RData + parseInt(e.pkgs)
+            //     }
+            //   })
+            //   totalPkgs.value = RData
+            // }
+            // // 计算毛重
+            // if (changes[0][1] === 'kgs') {
+            //   let RData = 0
+            //   ctnList.value.forEach((e) => {
+            //     if (e.kgs) {
+            //       RData = RData + Number(e.kgs)
+            //     }
+            //   })
+            //   totalKgs.value = RData.toFixed(2)
+            // }
+            // // 计算尺码
+            // if (changes[0][1] === 'cbm') {
+            //   let RData = 0
+            //   ctnList.value.forEach((e) => {
+            //     if (e.cbm) {
+            //       RData = RData + Number(e.cbm)
+            //     }
+            //   })
+            //   totalCbm.value = RData.toFixed(2)
+            // }
+        }
+    },
+}
+onMounted(() => {
+    // initTable()
+})
+function initTable() {
+  const hot = hotmain.value.hotInstance
+  hot.addHook('beforeKeyDown', function (event) {
+    if (event.key === 'ArrowDown') {
+      if (hot.getSelected()[0][0] == ctnList.value.length - 1 && !hot.getActiveEditor()?._opened) {
+        ctnList.value.push({})
+        nextTick(() => {
+          hot.selectCell(ctnList.value.length - 1, 3)
+        })
+        return false
+      }
+    }
+  })
+}
+</script>
\ No newline at end of file