From a34a0d372a4cc6394201843233080577b07b6231 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BC=A0=E5=90=8C=E6=B5=B7?=
 <14166000+zhangtonghai@user.noreply.gitee.com>
Date: Fri, 14 Jun 2024 17:53:58 +0800
Subject: [PATCH] 06/14

---
 .../TenantAuditStepModal copy.vue             | 498 -----------------
 src/views/baseinfo/CodeCheckBill/index2.vue   |  28 -
 .../CustomerReconciliation/detail/index.vue   |  11 +-
 .../detail/info/index.vue                     |  41 +-
 .../detail/info/infoColumns.tsx               |   3 +-
 .../operation/seaexport/api/BookingLedger.js  |  43 +-
 .../seaexport/detail/modules/preOrder.vue     | 500 +++++++++++++-----
 .../detail/modules/preOrderData.json          | 207 ++++++++
 8 files changed, 658 insertions(+), 673 deletions(-)
 delete mode 100644 src/views/baseinfo/CodeCheckBill/TenantAuditStepModal copy.vue
 delete mode 100644 src/views/baseinfo/CodeCheckBill/index2.vue
 create mode 100644 src/views/operation/seaexport/detail/modules/preOrderData.json

diff --git a/src/views/baseinfo/CodeCheckBill/TenantAuditStepModal copy.vue b/src/views/baseinfo/CodeCheckBill/TenantAuditStepModal copy.vue
deleted file mode 100644
index 63d2089a..00000000
--- a/src/views/baseinfo/CodeCheckBill/TenantAuditStepModal copy.vue	
+++ /dev/null
@@ -1,498 +0,0 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    :use-wrapper="true"
-    :title="getTitle"
-    width="80%"
-    @register="registerModal"
-    @ok="handleSave"
-    @cancel="FnClose"
-  >
-    <div class="FormBox">
-      <BasicForm @register="registerForm" />
-    </div>
-    <div class="TableBox">
-      <div class="BoxUnit">
-        <div class="model-botton-box">
-          <a-button class="btn" type="primary" @click="AddLlist">新增费用字段</a-button>
-          <a-button class="btn btn-delete" @click="DelLlist">删除费用字段</a-button>
-        </div>
-        <div style="position: relative">
-          <input
-            class="ds-tb-check"
-            type="checkbox"
-            v-model="allCheckL"
-            :indeterminate="someCheckL"
-          />
-          <hot-table :data="Llist" :settings="Lsettings"> </hot-table>
-        </div>
-      </div>
-      <div class="BoxUnit">
-        <div class="model-botton-box">
-          <a-button class="btn" type="primary" @click="AddRlist">新增字段</a-button>
-          <a-button class="btn btn-delete" @click="DelRlist">删除字段</a-button>
-        </div>
-        <div style="position: relative">
-          <input
-            class="ds-tb-check"
-            type="checkbox"
-            v-model="allCheckR"
-            :indeterminate="someCheckR"
-          />
-          <hot-table :data="Rlist" :settings="Rsettings"></hot-table>
-        </div>
-      </div>
-    </div>
-    <template #footer>
-      <a-button
-        pre-icon="ant-design:close-outlined"
-        type="warning"
-        :loading="loading"
-        ghost
-        style="margin-right: 0.8rem"
-        @click="FnClose"
-        >取消</a-button
-      >
-      <a-button
-        type="success"
-        :loading="loading"
-        pre-icon="ant-design:check-outlined"
-        style="margin-right: 0.8rem"
-        @click="handleSave(false)"
-        >仅保存</a-button
-      >
-      <a-button
-        pre-icon="ant-design:check-circle-outlined"
-        type="primary"
-        :loading="loading"
-        @click="handleSave(true)"
-        >保存并关闭</a-button
-      >
-    </template>
-  </BasicModal>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, unref, watchEffect, watch } from 'vue'
-  import { BasicModal, useModalInner } from '/@/components/Modal'
-  import { BasicForm, useForm } from '/@/components/Form/index'
-  import { formSchema } from './columns'
-  import { ApiEdit, ApiInfo, ApiDelFee, ApiDelSort } from './api'
-  import { HotTable } from '@handsontable/vue3'
-  import { registerAllModules } from 'handsontable/registry'
-  import { useMessage } from '/@/hooks/web/useMessage'
-  const { notification, createMessage } = useMessage()
-  registerAllModules()
-
-  const visible = ref(true)
-  // 声明Emits
-  const emit = defineEmits(['success', 'register'])
-  const isUpdate = ref(true)
-  const loading = ref(false)
-  const rowId = ref('')
-  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
-    labelWidth: 100,
-    schemas: formSchema,
-    showActionButtonGroup: false,
-  })
-
-  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
-    console.log(data)
-
-    resetFields()
-    setModalProps({ confirmLoading: false, loading: true })
-    isUpdate.value = !!data?.isUpdate
-    if (unref(isUpdate)) {
-      setModalProps({ confirmLoading: true })
-      rowId.value = data.record.id
-      const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
-      if (res.succeeded) {
-        setFieldsValue({
-          ...res.data,
-        })
-        Llist.value.push(...res.data.feeList)
-        Rlist.value.push(...res.data.sortList)
-      }
-      setModalProps({ confirmLoading: false })
-    } else {
-      setFieldsValue({ permissionIdentity: unref(2) })
-    }
-    setModalProps({ loading: false })
-  })
-
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增对账模板' : '编辑对账模板'))
-
-  // 保存
-  async function handleSave(exit) {
-    try {
-      const values = await validate()
-      values.feeList = Llist.value
-      values.sortList = Rlist.value
-      // values.feeList = [
-      //   {
-      //     feeName: 1,
-      //     currency: 1,
-      //   },
-      //   {
-      //     feeName: 2,
-      //     currency: 2,
-      //   },
-      // ]
-      // values.sortList = [
-      //   {
-      //     fieldName: 1,
-      //     orderNo: 1,
-      //   },
-      //   {
-      //     feeName: 2,
-      //     currency: 2,
-      //   },
-      // ]
-      setModalProps({ confirmLoading: true, loading: true })
-      // TODO custom api
-      console.log(values)
-      // loading.value = true;
-      const res: API.DataResult = await ApiEdit(values)
-      console.log(res)
-      if (res.succeeded) {
-        createMessage.success(res.message)
-        emit('success')
-        //刷新页面
-        if (!exit) {
-          if (unref(isUpdate)) {
-            await refresh()
-          } else {
-            rowId.value = res.data
-            isUpdate.value = true
-            await refresh()
-          }
-        }
-      } else {
-        createMessage.error(res.message)
-      }
-
-      exit && FnClose()
-    } finally {
-      // loading.value = false;
-      setModalProps({ confirmLoading: false, loading: false })
-    }
-  }
-  async function refresh() {
-    const res: API.DataResult = await ApiInfo({ id: unref(rowId) })
-    if (res.succeeded) {
-      await setFieldsValue({
-        ...res.data,
-      })
-    }
-  }
-
-  // ------------------------------------左侧表------------------------------------------
-  // 全部勾选
-  const allCheckL = ref(false)
-  // 部分勾选
-  const someCheckL = ref(false)
-  const Llist = ref<any>([])
-  watchEffect(() => {
-    // 全选
-    if (allCheckL.value) {
-      Llist.value.forEach((item) => {
-        item.selected = true
-      })
-    } else {
-      // 取消全选
-      Llist.value.forEach((item) => {
-        item.selected = false
-      })
-    }
-  })
-  watch(
-    Llist.value,
-    (val) => {
-      let a = 0
-      let b = 0
-      val.forEach((item) => {
-        if (item.selected) {
-          a += 1
-        } else {
-          b += 1
-        }
-      })
-      if (a == 0) {
-        allCheckL.value = false
-      }
-      if (b == 0) {
-        allCheckL.value = true
-      }
-      if (a != 0 && b != 0) {
-        someCheckL.value = true
-      } else {
-        someCheckL.value = false
-      }
-    },
-    {
-      deep: true,
-    },
-  )
-  const LColumns = [
-    {
-      data: 'selected',
-      type: 'checkbox',
-      title: ' ',
-      width: 32,
-      className: 'htCenter',
-      readOnly: false,
-    },
-    {
-      title: '主键Id',
-      width: 120,
-      data: 'id',
-    },
-    {
-      title: '模板Id',
-      width: 120,
-      data: 'templateId',
-    },
-    {
-      title: '费用名称',
-      width: 120,
-      data: 'feeName',
-    },
-    {
-      title: '币别',
-      width: 120,
-      data: 'currency',
-    },
-  ]
-  const Lsettings = {
-    height: '400',
-    // width: '100%',
-    autoWrapRow: true,
-    autoWrapCol: true,
-    // 每行的高度
-    rowHeights: 32,
-    fixedColumnsLeft: 1,
-    // 需要隐藏的列
-    hiddenColumns: {
-      columns: [1, 2],
-      indicators: true,
-    },
-    columnSorting: true,
-    // 设置排序的列和方向
-    // columnSorting: {
-    //   column: 2, // 根据第三列排序
-    //   sortOrder: ['asc', 'desc'] // 允许升序和降序排序
-    // },
-    // 如果通过复制或者填写校验出现错误，清空输入框
-    // afterValidate: function (isValid, value, row, prop, source) {
-    //   if (!isValid) {
-    //     hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
-    //   }
-    // },
-    columns: LColumns,
-    // 此行直接复制，必须(非商用)
-    licenseKey: 'non-commercial-and-evaluation',
-    enterMoves: 'row',
-    // 定义所有单元格发生变化的回调处理
-    afterChange(changes, source) {},
-  }
-  function AddLlist() {
-    Llist.value.push({})
-  }
-  async function DelLlist() {
-    const data = await validate()
-    if (data.id) {
-      let ApiData: any = { id: data.id, ids: [] }
-      Llist.value.forEach((e, i) => {
-        if (e.selected && e.id) {
-          ApiData.ids.push(e.id)
-        }
-      })
-      ApiDelFee(ApiData).then((res) => {
-        notification.success({
-          message: res.message,
-          duration: 3,
-        })
-      })
-    }
-    Llist.value.forEach((e, i) => {
-      if (e.selected) {
-        Llist.value.splice(i)
-      }
-    })
-  }
-  // ------------------------------------右侧表------------------------------------------
-  // 全部勾选
-  const allCheckR = ref(false)
-  // 部分勾选
-  const someCheckR = ref(false)
-  const Rlist = ref<any>([])
-  watchEffect(() => {
-    // 全选
-    if (allCheckR.value) {
-      Rlist.value.forEach((item) => {
-        item.selected = true
-      })
-    } else {
-      // 取消全选
-      Rlist.value.forEach((item) => {
-        item.selected = false
-      })
-    }
-  })
-  watch(
-    Rlist.value,
-    (val) => {
-      let a = 0
-      let b = 0
-      val.forEach((item) => {
-        if (item.selected) {
-          a += 1
-        } else {
-          b += 1
-        }
-      })
-      if (a == 0) {
-        allCheckR.value = false
-      }
-      if (b == 0) {
-        allCheckR.value = true
-      }
-      if (a != 0 && b != 0) {
-        someCheckR.value = true
-      } else {
-        someCheckR.value = false
-      }
-    },
-    {
-      deep: true,
-    },
-  )
-  const RColumns = [
-    {
-      data: 'selected',
-      type: 'checkbox',
-      title: ' ',
-      width: 32,
-      className: 'htCenter',
-      readOnly: false,
-    },
-    {
-      title: '主键Id',
-      width: 120,
-      data: 'id',
-    },
-    {
-      title: '模板Id',
-      width: 120,
-      data: 'templateId',
-    },
-    {
-      title: '排序字段',
-      width: 120,
-      data: 'fieldName',
-    },
-    // {
-    //   title: '类型',
-    //   width: 120,
-    //   data: 'fieldName',
-    // },
-    {
-      title: '顺序',
-      width: '120',
-      data: 'orderNo',
-    },
-  ]
-  const Rsettings = {
-    height: '400',
-    // width: '100%',
-    autoWrapRow: true,
-    autoWrapCol: true,
-    // 每行的高度
-    rowHeights: 32,
-    fixedColumnsLeft: 1,
-    // 需要隐藏的列
-    hiddenColumns: {
-      columns: [1, 2],
-      indicators: true,
-    },
-    columnSorting: true,
-    // 设置排序的列和方向
-    // columnSorting: {
-    //   column: 2, // 根据第三列排序
-    //   sortOrder: ['asc', 'desc'] // 允许升序和降序排序
-    // },
-    // 如果通过复制或者填写校验出现错误，清空输入框
-    // afterValidate: function (isValid, value, row, prop, source) {
-    //   if (!isValid) {
-    //     hotTb.value.hotInstance.setDataAtRowProp(row, prop, '')
-    //   }
-    // },
-    columns: RColumns,
-    // 此行直接复制，必须(非商用)
-    licenseKey: 'non-commercial-and-evaluation',
-    enterMoves: 'row',
-    // 定义所有单元格发生变化的回调处理
-    afterChange(changes, source) {},
-  }
-  function AddRlist() {
-    Rlist.value.push({})
-  }
-  async function DelRlist() {
-    const data = await validate()
-    if (data.id) {
-      let ApiData: any = { id: data.id, ids: [] }
-      Rlist.value.forEach((e, i) => {
-        if (e.selected && e.id) {
-          ApiData.ids.push(e.id)
-        }
-      })
-      ApiDelSort(ApiData).then((res) => {
-        notification.success({
-          message: res.message,
-          duration: 3,
-        })
-      })
-    }
-    Rlist.value.forEach((e, i) => {
-      if (e.selected) {
-        Rlist.value.splice(i)
-      }
-    })
-  }
-  // ----------------------------------------------------------------------
-  function FnClose() {
-    Llist.value.splice(0)
-    Rlist.value.splice(0)
-    closeModal()
-  }
-</script>
-<style lang="less" scoped>
-  .FormBox {
-    height: 100px;
-  }
-  .TableBox {
-    display: flex;
-    .BoxUnit {
-      flex: 1;
-      .model-botton-box {
-        margin: 40px 0 20px 20px;
-
-        .btn {
-          margin-right: 10px;
-        }
-
-        .btn-delete {
-          border: 1px solid #ff6646;
-          background: #fdf2f0;
-          color: #ff6646;
-
-          &:hover {
-            border: 1px solid #ff6646 !important;
-            background: #fdf2f0 !important;
-            color: #ff6646 !important;
-            opacity: 0.7;
-          }
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/views/baseinfo/CodeCheckBill/index2.vue b/src/views/baseinfo/CodeCheckBill/index2.vue
deleted file mode 100644
index 918b9084..00000000
--- a/src/views/baseinfo/CodeCheckBill/index2.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div id="example1">
-    <hot-table :data="Llist" :settings="Lsettings"> </hot-table>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { HotTable } from '@handsontable/vue3'
-  import { registerAllModules } from 'handsontable/registry'
-  import 'handsontable/dist/handsontable.full.min.css'
-  registerAllModules()
-  const LColumns = [
-    {
-      title: '箱型代码',
-      width: 120,
-      data: 'ctnCode',
-    },
-  ]
-  const Llist = ref([
-    {
-      ctnCode: '1',
-    },
-  ])
-  const Lsettings = {
-    columns: LColumns,
-    licenseKey: 'non-commercial-and-evaluation',
-  }
-</script>
diff --git a/src/views/operation/CustomerReconciliation/detail/index.vue b/src/views/operation/CustomerReconciliation/detail/index.vue
index 1f5bdb02..8f1373fe 100644
--- a/src/views/operation/CustomerReconciliation/detail/index.vue
+++ b/src/views/operation/CustomerReconciliation/detail/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="CsMain p-4">
+  <div class="CsMain p-4" id="detail">
     <div class="buttonBox">
       <div class="nav" @click="Save"> <i class="iconfont icon-icon_baocun"></i>保存</div>
       <div class="nav" @click="waitFor"> <i class="iconfont icon-printing"></i>标准打印</div>
@@ -95,7 +95,12 @@
         </BasicTable>
       </a-tab-pane>
     </a-tabs>
-    <Info @register="registerAdd" @add-detail-l="AddDetailL" @add-detail-r="AddDetailR" />
+    <Info
+      ref="RefInfo"
+      @register="registerAdd"
+      @add-detail-l="AddDetailL"
+      @add-detail-r="AddDetailR"
+    />
     <BasicModal width="80%" v-bind="$attrs" @register="registerEdit" title="账单详情">
       <ShowData />
     </BasicModal>
@@ -348,6 +353,7 @@
   function waitFor() {
     notification.warning({ message: '暂未开发', duration: 3 })
   }
+  const RefInfo = ref()
   // 添加对账明细
   async function AddDetailL(e) {
     if (!id.value) {
@@ -358,6 +364,7 @@
       if (res.succeeded) {
         notification.success({ message: '添加成功', duration: 3 })
         init()
+        RefInfo.value.handleSubmit()
       }
     })
   }
diff --git a/src/views/operation/CustomerReconciliation/detail/info/index.vue b/src/views/operation/CustomerReconciliation/detail/info/index.vue
index c9508594..92c724b3 100644
--- a/src/views/operation/CustomerReconciliation/detail/info/index.vue
+++ b/src/views/operation/CustomerReconciliation/detail/info/index.vue
@@ -1,11 +1,14 @@
 <template>
   <BasicModal
+    class="customerModal"
     v-bind="$attrs"
     :use-wrapper="true"
     title="增加账单明细"
     width="90%"
     @register="registerModal"
     @cancel="closeModal"
+    :defaultFullscreen="true"
+    :canFullscreen="false"
   >
     <div class="CsMain">
       <a-row class="p-4 CsHeader" :gutter="5">
@@ -40,7 +43,8 @@
       </a-row>
     </div>
     <template #footer>
-      <a-button
+      <span> </span>
+      <!-- <a-button
         pre-icon="ant-design:close-outlined"
         type="warning"
         ghost
@@ -48,7 +52,7 @@
         @click="closeModal"
       >
         取消
-      </a-button>
+      </a-button> -->
     </template>
   </BasicModal>
 </template>
@@ -219,6 +223,8 @@
     if (res.succeeded) {
       dataSourceL.value = res.data
       setTableData([...res.data])
+      setTableDataRT([])
+      setTableDataRB([])
       spinningL.value = false
     }
     setModalProps({ confirmLoading: false, loading: false })
@@ -276,6 +282,9 @@
     })
     emit('AddDetailR', Apidata)
   }
+  defineExpose({
+    handleSubmit,
+  })
 </script>
 <style lang="less" scoped>
   :deep(.ant-form-item) {
@@ -283,25 +292,25 @@
   }
   .bottomTableL {
     :deep(.ant-table-container) {
-      height: calc(100vh - 560px);
-      .ant-table-content {
-        height: 100%;
-      }
-      .ant-table-expanded-row-fixed {
-        height: calc(100vh - 559px);
-      }
+      min-height: calc(100vh - 430px);
+      // .ant-table-content {
+      //   height: 100%;
+      // }
+      // .ant-table-expanded-row-fixed {
+      //   height: calc(100vh - 429px);
+      // }
     }
   }
 
   .bottomTableR {
     :deep(.ant-table-container) {
-      height: calc(100vh - 724px);
-      .ant-table-content {
-        height: 100%;
-      }
-      .ant-table-expanded-row-fixed {
-        height: calc(100vh - 723px);
-      }
+      min-height: calc(100vh - 665px);
+      // .ant-table-content {
+      //   height: 100%;
+      // }
+      // .ant-table-expanded-row-fixed {
+      //   height: calc(100vh - 664px);
+      // }
     }
   }
 </style>
diff --git a/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx b/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
index 1c73dba0..2d6f6fc8 100644
--- a/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
+++ b/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
@@ -356,7 +356,8 @@ export const schemas: FormSchema[] = [
 ]
 export const columnsL: BasicColumn[] = [
   { title: '业务类型', dataIndex: 'businessTypeName', align: 'left' },
-  { title: '委托单位', dataIndex: 'customerName', align: 'left' },
+  { title: '费用对象', dataIndex: 'customerName', align: 'left' },
+  // { title: '委托单位', dataIndex: 'customerName', align: 'left' },
   { title: '业务状态', dataIndex: 'businessStatus', align: 'left' },
   { title: '财务日期', dataIndex: 'accountDate', align: 'left' },
   { title: '主提单号', dataIndex: 'mblno', align: 'left' },
diff --git a/src/views/operation/seaexport/api/BookingLedger.js b/src/views/operation/seaexport/api/BookingLedger.js
index 4bcb86dd..ba142650 100644
--- a/src/views/operation/seaexport/api/BookingLedger.js
+++ b/src/views/operation/seaexport/api/BookingLedger.js
@@ -550,6 +550,48 @@ export function SendShippingBill(parameter) {
     data: parameter,
   })
 }
+// 舱单箱信息服务 列表 (Auth)
+export function GetShippingBillCtnList(parameter) {
+  return request({
+    url: '/opApi/ShippingBillCtn/GetShippingBillCtnList',
+    method: 'post',
+    data: parameter,
+  })
+}
+// 舱单箱信息服务 删除 (Auth)
+export function DelShippingBillCtn(parameter) {
+  return request({
+    url: '/opApi/ShippingBillCtn/DelShippingBillCtn',
+    method: 'get',
+    params: parameter,
+  })
+}
+// 舱单箱信息服务 批量删除 (Auth)
+export function BatchDelShippingBillCtn(parameter) {
+  return request({
+    url: '/opApi/ShippingBillCtn/BatchDelShippingBillCtn',
+    method: 'post',
+    data: parameter,
+  })
+}
+
+// 收发通模板下拉列表 (Auth)
+export function GetShippingBillTemplateSelectList(parameter) {
+  return request({
+    url: '/opApi/ShippingBillTemplate/GetShippingBillTemplateSelectList',
+    method: 'get',
+    params: parameter,
+  })
+}
+//获取国家信息下拉列表-客户端 (Auth)
+export function GetClientCountrySelectList(parameter) {
+  return request({
+    url: '/mainApi/Common/GetClientCountrySelectList',
+    method: 'get',
+    params: parameter,
+  })
+}
+
 /**
  * 获取分页查询客户
  * @params ShortName
@@ -1839,4 +1881,3 @@ export function SendMSKBooking(parameter) {
     data: parameter,
   })
 }
-
diff --git a/src/views/operation/seaexport/detail/modules/preOrder.vue b/src/views/operation/seaexport/detail/modules/preOrder.vue
index 276cdfd9..6b6f4af5 100644
--- a/src/views/operation/seaexport/detail/modules/preOrder.vue
+++ b/src/views/operation/seaexport/detail/modules/preOrder.vue
@@ -120,14 +120,15 @@
                     <a-form-item
                       class="pre-from-label"
                       label="船名"
-                      name="vessel"
+                      name="vesselId"
                       :labelCol="labelCol2"
                       :wrapperCol="wrapperCol2"
                       has-feedback
                     >
-                      <a-select v-model:value="formState.vessel">
-                        <a-select-option value="china">China</a-select-option>
-                        <a-select-option value="usa">U.S.A</a-select-option>
+                      <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>
@@ -143,7 +144,7 @@
                       <a-input v-model:value="formState.voyno" />
                     </a-form-item>
                   </a-col>
-                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
+                  <!-- <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="4">
                     <a-form-item
                       class="pre-from-label"
                       label="船代"
@@ -157,19 +158,24 @@
                         <a-select-option value="usa">U.S.A</a-select-option>
                       </a-select>
                     </a-form-item>
-                  </a-col>
+                  </a-col> -->
                   <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
                     <a-form-item
                       class="pre-from-label"
                       label="船公司"
-                      name="carrier"
+                      name="carrierId"
                       :labelCol="labelCol2"
                       :wrapperCol="wrapperCol2"
                       has-feedback
                     >
-                      <a-select v-model:value="formState.carrier">
-                        <a-select-option value="china">China</a-select-option>
-                        <a-select-option value="usa">U.S.A</a-select-option>
+                      <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>
@@ -200,9 +206,21 @@
                       <div class="title">
                         <span>发货人信息</span>
                         <div class="Template">
-                          <a-select v-model:value="formState.shipperTemplate">
-                            <a-select-option value="china">China</a-select-option>
-                            <a-select-option value="usa">U.S.A</a-select-option>
+                          <a-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>
                           <!-- @click="saveModel('shipper')" -->
                           <a-button
@@ -222,38 +240,44 @@
                             <a-form-item
                               class="pre-from-label"
                               label="发货人"
-                              name="shippername"
+                              name="shipperName"
                               :labelCol="labelCol"
                               :wrapperCol="wrapperCol"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.shippername" />
+                              <a-input v-model:value="formState.shipperName" />
                             </a-form-item>
                           </a-col>
                           <a-col :span="24">
                             <a-form-item
                               class="pre-from-label"
                               label="地址"
-                              name="shipperaddR1"
+                              name="shipperAddress"
                               :labelCol="labelCol"
                               :wrapperCol="wrapperCol"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.shipperaddR1" />
+                              <a-input v-model:value="formState.shipperAddress" />
                             </a-form-item>
                           </a-col>
+                          <!-- shipperCountryName -->
                           <a-col :span="12">
                             <a-form-item
                               class="pre-from-label"
                               label="国家"
-                              name="shippercountryName"
+                              name="shipperCountry"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-select v-model:value="formState.shippercountryName">
-                                <a-select-option value="china">China</a-select-option>
-                                <a-select-option value="usa">U.S.A</a-select-option>
+                              <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>
@@ -261,12 +285,12 @@
                             <a-form-item
                               class="pre-from-label"
                               label="电话"
-                              name="shippertel"
+                              name="shipperCountryTel"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.shippertel" />
+                              <a-input v-model:value="formState.shipperCountryTel" />
                             </a-form-item>
                           </a-col>
                         </a-row>
@@ -278,9 +302,21 @@
                       <div class="title">
                         <span>收货人信息</span>
                         <div class="Template">
-                          <a-select v-model:value="formState.consigneeTemplate">
-                            <a-select-option value="china">China</a-select-option>
-                            <a-select-option value="usa">U.S.A</a-select-option>
+                          <a-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>
                           <!-- @click="saveModel('consignee')" -->
                           <a-button
@@ -303,38 +339,43 @@
                             <a-form-item
                               class="pre-from-label"
                               label="收货人"
-                              name="consigneename"
+                              name="consigneeName"
                               :labelCol="labelCol"
                               :wrapperCol="wrapperCol"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.consigneename" />
+                              <a-input v-model:value="formState.consigneeName" />
                             </a-form-item>
                           </a-col>
                           <a-col :span="24">
                             <a-form-item
                               class="pre-from-label"
                               label="地址"
-                              name="consigneeaddR1"
+                              name="consigneeAddress"
                               :labelCol="labelCol"
                               :wrapperCol="wrapperCol"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.consigneeaddR1" />
+                              <a-input v-model:value="formState.consigneeAddress" />
                             </a-form-item>
                           </a-col>
                           <a-col :span="12">
                             <a-form-item
                               class="pre-from-label"
                               label="国家"
-                              name="consigneecountryName"
+                              name="consigneeCountry"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-select v-model:value="formState.consigneecountryName">
-                                <a-select-option value="china">China</a-select-option>
-                                <a-select-option value="usa">U.S.A</a-select-option>
+                              <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>
@@ -342,12 +383,12 @@
                             <a-form-item
                               class="pre-from-label"
                               label="电话"
-                              name="consigneetel"
+                              name="consigneeCountryTel"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.consigneetel" />
+                              <a-input v-model:value="formState.consigneeCountryTel" />
                             </a-form-item>
                           </a-col>
                         </a-row>
@@ -359,9 +400,21 @@
                       <div class="title">
                         <span>通知人信息</span>
                         <div class="Template">
-                          <a-select v-model:value="formState.notifypartyTemplate">
-                            <a-select-option value="china">China</a-select-option>
-                            <a-select-option value="usa">U.S.A</a-select-option>
+                          <a-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>
                           <!-- @click="saveModel('notifyparty')" -->
                           <a-button
@@ -384,38 +437,43 @@
                             <a-form-item
                               class="pre-from-label"
                               label="通知人"
-                              name="notifypartyname"
+                              name="notifyPartyName"
                               :labelCol="labelCol"
                               :wrapperCol="wrapperCol"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.notifypartyname" />
+                              <a-input v-model:value="formState.notifyPartyName" />
                             </a-form-item>
                           </a-col>
                           <a-col :span="24">
                             <a-form-item
                               class="pre-from-label"
                               label="地址"
-                              name="notifypartyaddR1"
+                              name="notifyPartyAddress"
                               :labelCol="labelCol"
                               :wrapperCol="wrapperCol"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.notifypartyaddR1" />
+                              <a-input v-model:value="formState.notifyPartyAddress" />
                             </a-form-item>
                           </a-col>
                           <a-col :span="12">
                             <a-form-item
                               class="pre-from-label"
                               label="国家"
-                              name="notifypartycountryName"
+                              name="notifyPartyCountry"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-select v-model:value="formState.notifypartycountryName">
-                                <a-select-option value="china">China</a-select-option>
-                                <a-select-option value="usa">U.S.A</a-select-option>
+                              <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>
@@ -423,12 +481,12 @@
                             <a-form-item
                               class="pre-from-label"
                               label="电话"
-                              name="notifypartytel"
+                              name="notifyPartyCountryTel"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.notifypartytel" />
+                              <a-input v-model:value="formState.notifyPartyCountryTel" />
                             </a-form-item>
                           </a-col>
                         </a-row>
@@ -444,14 +502,26 @@
                             <a-form-item
                               class="pre-from-label"
                               label="装货港代码"
-                              name="portloadid"
+                              name="loadPortId"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-select v-model:value="formState.portloadid">
-                                <a-select-option value="china">China</a-select-option>
-                                <a-select-option value="usa">U.S.A</a-select-option>
+                              <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>
@@ -459,12 +529,12 @@
                             <a-form-item
                               class="pre-from-label"
                               label="装货港"
-                              name="portload"
+                              name="loadPort"
                               :labelCol="labelCol3"
                               :wrapperCol="wrapperCol3"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.portload" />
+                              <a-input v-model:value="formState.loadPort" />
                             </a-form-item>
                           </a-col>
 
@@ -472,14 +542,26 @@
                             <a-form-item
                               class="pre-from-label"
                               label="卸货港代码"
-                              name="portdischargeid"
+                              name="dischargePortId"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-select v-model:value="formState.portdischargeid">
-                                <a-select-option value="china">China</a-select-option>
-                                <a-select-option value="usa">U.S.A</a-select-option>
+                              <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>
@@ -487,12 +569,12 @@
                             <a-form-item
                               class="pre-from-label"
                               label="卸货港"
-                              name="portdischarge"
+                              name="dischargePort"
                               :labelCol="labelCol3"
                               :wrapperCol="wrapperCol3"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.portdischarge" />
+                              <a-input v-model:value="formState.dischargePort" />
                             </a-form-item>
                           </a-col>
 
@@ -500,14 +582,26 @@
                             <a-form-item
                               class="pre-from-label"
                               label="收货地代码"
-                              name="placedeliveryid"
+                              name="deliveryPlaceId"
                               :labelCol="labelCol2"
                               :wrapperCol="wrapperCol2"
                               has-feedback
                             >
-                              <a-select v-model:value="formState.placedeliveryid">
-                                <a-select-option value="china">China</a-select-option>
-                                <a-select-option value="usa">U.S.A</a-select-option>
+                              <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>
@@ -515,12 +609,12 @@
                             <a-form-item
                               class="pre-from-label"
                               label="收货地"
-                              name="placedelivery"
+                              name="deliveryPlace"
                               :labelCol="labelCol3"
                               :wrapperCol="wrapperCol3"
                               has-feedback
                             >
-                              <a-input v-model:value="formState.portdischarge" />
+                              <a-input v-model:value="formState.deliveryPlace" />
                             </a-form-item>
                           </a-col>
                         </a-row>
@@ -602,15 +696,17 @@
                             <a-col :span="12">
                               <a-form-item
                                 class="pre-from-label"
-                                label="货物类型"
+                                label="货物标识"
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
                                 name="cargoid"
                               >
                                 <a-select v-model:value="formState.cargoid">
-                                  <a-select-option value="china">China</a-select-option>
-                                  <a-select-option value="usa">U.S.A</a-select-option>
+                                  <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>
@@ -623,11 +719,16 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="kindpkgs"
+                                name="kindPkgs"
                               >
-                                <a-select v-model:value="formState.kindpkgs">
-                                  <a-select-option value="china">China</a-select-option>
-                                  <a-select-option value="usa">U.S.A</a-select-option>
+                                <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>
@@ -638,10 +739,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="tempset"
+                                name="temperatureSet"
                               >
                                 <div class="line-box">
-                                  <a-input v-model:value="formState.tempset" />
+                                  <a-input
+                                    v-model:value="formState.temperatureSet"
+                                    :disabled="formState.cargoid !== 'R'"
+                                  />
                                 </div>
                               </a-form-item>
                             </a-col>
@@ -652,13 +756,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="tempid"
+                                name="temperatureUnit"
                               >
                                 <a-select
                                   size="small"
                                   :disabled="formState.cargoid !== 'R'"
-                                  :default-value="formState.tempid || 'C摄氏'"
-                                  v-model:value="formState.tempid"
+                                  :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>
@@ -672,10 +776,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="reeferf"
+                                name="reeferQuantity"
                               >
                                 <div class="line-box">
-                                  <a-input v-model:value="formState.reeferf" />
+                                  <a-input
+                                    v-model:value="formState.reeferQuantity"
+                                    :disabled="formState.cargoid !== 'R'"
+                                  />
                                 </div>
                               </a-form-item>
                             </a-col>
@@ -686,10 +793,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="dclass"
+                                name="dangerClass"
                               >
                                 <div class="line-box">
-                                  <a-input v-model:value="formState.dclass" />
+                                  <a-input
+                                    v-model:value="formState.dangerClass"
+                                    :disabled="formState.cargoid !== 'D'"
+                                  />
                                 </div>
                               </a-form-item>
                             </a-col>
@@ -700,10 +810,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="dunno"
+                                name="dangerNo"
                               >
                                 <div class="line-box">
-                                  <a-input v-model:value="formState.dunno" />
+                                  <a-input
+                                    v-model:value="formState.dangerNo"
+                                    :disabled="formState.cargoid !== 'D'"
+                                  />
                                 </div>
                               </a-form-item>
                             </a-col>
@@ -714,10 +827,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="dattn"
+                                name="dangerAttn"
                               >
                                 <div class="line-box">
-                                  <a-input v-model:value="formState.dattn" />
+                                  <a-input
+                                    v-model:value="formState.dangerAttn"
+                                    :disabled="formState.cargoid !== 'D'"
+                                  />
                                 </div>
                               </a-form-item>
                             </a-col>
@@ -728,10 +844,13 @@
                                 :labelCol="labelCol2"
                                 :wrapperCol="wrapperCol2"
                                 has-feedback
-                                name="dtel"
+                                name="dangerTel"
                               >
                                 <div class="line-box">
-                                  <a-input v-model:value="formState.dtel" />
+                                  <a-input
+                                    v-model:value="formState.dangerTel"
+                                    :disabled="formState.cargoid !== 'D'"
+                                  />
                                 </div>
                               </a-form-item>
                             </a-col>
@@ -760,14 +879,14 @@
                                 md: { span: 23 },
                               }"
                               has-feedback
-                              name="remarks"
+                              name="remark"
                             >
                               <!-- <inputView
                                 type="remarks"
                                 :parentVal="orderDetails.remarks"
                                 @getInputChange="inputChange"
                               /> -->
-                              <a-input v-model:value="formState.remarks" />
+                              <a-input v-model:value="formState.remark" />
                             </a-form-item>
                           </a-col>
                         </a-row>
@@ -778,8 +897,7 @@
                     <div class="mail-box">
                       <div class="title">集装箱信息</div>
                       <div class="ctn-btn">
-                        <!-- @click="addCtn" -->
-                        <div class="btn">
+                        <div class="btn" @click="addCtn">
                           <i class="iconfont icon-icon_tianjia"></i><span>新建</span>
                         </div>
                         <!-- @click="copyCtn" -->
@@ -794,14 +912,19 @@
                           <a-form-item
                             class="pre-from-label"
                             label="场站"
-                            name="yard"
+                            name="yardId"
                             :labelCol="labelCol"
                             :wrapperCol="wrapperCol"
                             has-feedback
                           >
-                            <a-select v-model:value="formState.yard" style="width: 200px">
-                              <a-select-option value="china">China</a-select-option>
-                              <a-select-option value="usa">U.S.A</a-select-option>
+                            <a-select v-model:value="formState.yardId" style="width: 200px">
+                              <a-select-option
+                                v-for="item in yardList"
+                                :key="item.id"
+                                :value="item.id"
+                              >
+                                {{ item.codeName }}
+                              </a-select-option>
                             </a-select>
                           </a-form-item>
                         </div>
@@ -831,7 +954,17 @@
   import {
     GetShippingBillList,
     EditShippingBill,
+    GetShippingBillInfo,
   } from '/@/views/operation/seaexport/api/BookingLedger.js'
+  import {
+    GetVesselSelectList,
+    GetCarrierlist,
+    GetShippingBillTemplateSelectList,
+    GetClientCountrySelectList,
+    GetClientPortSelectList,
+    GetPackageSelectList,
+    GetYardClientList,
+  } from '/@/views/operation/seaexport/api/BookingLedger'
   import { useMessage } from '/@/hooks/web/useMessage'
   const { notification } = useMessage()
   import { useRoute } from 'vue-router'
@@ -881,6 +1014,7 @@
     } else {
       // this.getNoDataInit()
     }
+    GetList()
   }
 
   function close() {
@@ -910,6 +1044,8 @@
             orderList.value.push({ checked: false, ...e })
           })
           formState.value = orderList.value[editIndex.value]
+        } else {
+          orderList.value.push({ checked: false })
         }
       })
       .catch((err) => {
@@ -926,10 +1062,27 @@
       ...formState.value,
       ctnInfo: list.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
+      }
+    })
+    yardList.value.forEach((e) => {
+      if (e.id == ApiData.carrierId) {
+        ApiData.yard = e.shortName
+      }
+    })
     EditShippingBill(ApiData).then((res) => {
-      console.log(res)
+      if (res.succeeded) {
+        notification.success({ message: res.message, duration: 3 })
+      }
     })
-    console.log('保存')
   }
   // 删除
   function removeOrder() {
@@ -959,9 +1112,82 @@
     orderList.value[editIndex.value] = formState.value
     editIndex.value = index
     formState.value = orderList.value[index]
+    // GetShippingBillInfo({ id: formState.value.id }).then((res) => {
+    //   if (res.succeeded) {
+    //     notification.success({ message: res.message, duration: 3 })
+    //     console.log(res)
+    //   }
+    // })
   }
   // -----------------------右侧表单------------------------
+  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: [],
+  })
+  // 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
+    })
+  }
+  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
+      }
+    })
+  }
+  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
+      }
+    })
+  }
   // -----------------------下侧表格------------------------
   const list = ref<any>([])
   const columns = [
@@ -973,10 +1199,15 @@
       className: 'htCenter',
       readOnly: false,
     },
+    {
+      title: '尺寸',
+      width: 80,
+      data: 'size',
+    },
     {
       title: '箱型',
       width: 80,
-      data: 'isTempName',
+      data: 'ctn',
       type: 'dropdown',
       source: async (query, process) => {
         const res = [
@@ -995,52 +1226,51 @@
         process(dict)
       },
     },
+    {
+      title: '表现形式',
+      width: 80,
+      data: 'ctnAll',
+    },
     {
       title: '箱号',
       width: 80,
-      data: 'bsno',
+      data: 'cntrNo',
     },
     {
       title: '封号',
       width: 80,
-      data: 'bsno',
+      data: 'sealNo',
     },
     {
       title: '件数',
       width: 80,
-      data: 'bsno',
+      data: 'pkgs',
     },
     {
-      title: '包装',
+      title: '毛重',
       width: 80,
-      data: 'isTempName',
-      type: 'dropdown',
-      source: async (query, process) => {
-        const res = [
-          {
-            name: '是',
-            value: true,
-          },
-          {
-            name: '否',
-            value: false,
-          },
-        ]
-        const dict = res.map((res) => {
-          return res.name
-        })
-        process(dict)
-      },
+      data: 'kgs',
     },
     {
-      title: '重量',
+      title: '尺码',
       width: 80,
-      data: 'bsno',
+      data: 'cbm',
     },
+    // kindPkgsName
+    // kindPkgs
     {
-      title: '尺码',
+      title: '包装',
       width: 80,
-      data: 'bsno',
+      data: 'kindPkgsName',
+      type: 'dropdown',
+      source: async (query, process) => {
+        console.log(kindPkgsList.value)
+
+        const dict = kindPkgsList.value.map((res) => {
+          return res.cnExplain
+        })
+        process(dict)
+      },
     },
   ]
   const settings = {
@@ -1069,7 +1299,23 @@
     // 此行直接复制，必须(非商用)
     licenseKey: 'non-commercial-and-evaluation',
     // 定义所有单元格发生变化的回调处理
-    async afterChange(changes, source) {},
+    async afterChange(changes, source) {
+      if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
+        let dict: any = {}
+        if (changes[0][1] === 'kindPkgsName') {
+          const res = kindPkgsList.value
+          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
+        }
+      }
+    },
+  }
+  function addCtn() {
+    list.value.push({})
   }
   defineExpose({
     init,
diff --git a/src/views/operation/seaexport/detail/modules/preOrderData.json b/src/views/operation/seaexport/detail/modules/preOrderData.json
new file mode 100644
index 00000000..8f1e4eb0
--- /dev/null
+++ b/src/views/operation/seaexport/detail/modules/preOrderData.json
@@ -0,0 +1,207 @@
+id	integer($int64)
+
+主键Id
+ctnInfo	[
+nullable: true
+
+箱信息
+ShippingBillCtnReq{...}]
+businessId	integer($int64)
+
+业务Id
+mblno	string
+nullable: true
+
+主提单号
+hblno	string
+nullable: true
+
+分提单号
+etd	string($date-time)
+nullable: true
+
+开船日期
+forwarderId	integer($int64)
+
+货代公司Id
+forwarder	string
+nullable: true
+
+货代公司
+
+voyno	string
+nullable: true
+
+海关航次
+innerVoyno	string
+nullable: true
+
+内部航次
+shipperId	integer($int64)
+nullable: true
+
+发货人 t_info_client CUSTNAME
+consigneeId	integer($int64)
+nullable: true
+
+收货人 t_info_client CUSTNAME
+notifyPartyId	integer($int64)
+nullable: true
+
+通知人 t_info_client CUSTNAME
+shipperName	string
+nullable: true
+
+发货人名称
+shipperAddress	string
+nullable: true
+
+发货人地址
+shipperCountry	string
+nullable: true
+
+发货人国家code
+shipperCountryName	string
+nullable: true
+
+发货人国家
+shipperCountryTel	string
+nullable: true
+
+发货人电话
+consigneeName	string
+nullable: true
+
+收货人名称
+consigneeAddress	string
+nullable: true
+
+收货人地址
+consigneeCountry	string
+nullable: true
+
+收货人国家code
+consigneeCountryName	string
+nullable: true
+
+收货人国家
+consigneeCountryTel	string
+nullable: true
+
+收货人电话
+notifyPartyName	string
+nullable: true
+
+通知人名称
+notifyPartyAddress	string
+nullable: true
+
+通知人地址
+notifyPartyCountry	string
+nullable: true
+
+通知人国家code
+notifyPartyCountryName	string
+nullable: true
+
+通知人国家
+notifyPartyCountryTel	string
+nullable: true
+
+通知人电话
+loadPortId	integer($int64)
+
+装货港Id
+loadPortCode	string
+nullable: true
+
+装货港代码
+loadPort	string
+nullable: true
+
+装货港
+dischargePortId	integer($int64)
+
+卸货港Id
+dischargePortCode	string
+nullable: true
+
+卸货港代码
+dischargePort	string
+nullable: true
+
+卸货港
+deliveryPlaceId	integer($int64)
+
+收货地Id
+deliveryPlaceCode	string
+nullable: true
+
+收货地代码
+deliveryPlace	string
+nullable: true
+
+收货地
+yardId	integer($int64)
+
+场站Id t_crm_client CUSTNAME
+yard	string
+nullable: true
+
+场站 t_crm_client CUSTNAME
+marks	string
+nullable: true
+
+唛头 N/M
+description	string
+nullable: true
+
+货物描述
+cargoId	string
+nullable: true
+
+货物标识 S/R/D/O
+temperatureSet	string
+nullable: true
+
+设置温度
+temperatureUnit	string
+nullable: true
+
+温度单位
+reeferQuantity	string
+nullable: true
+
+冷藏通风量
+dangerClass	string
+nullable: true
+
+危险品分类
+dangerNo	string
+nullable: true
+
+危险品编号
+dangerAttn	string
+nullable: true
+
+危险品联系人
+dangerTel	string
+nullable: true
+
+危险品电话
+kindPkgs	string
+nullable: true
+
+包装 t_code_package
+remark	string
+nullable: true
+
+Desc:备注
+sendRemark	string
+nullable: true
+
+Desc:发送备注
+state	string
+nullable: true
+
+状态
\ No newline at end of file