From 7d61f247e3f44376049cc6e951085af62c002de6 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: Thu, 13 Jun 2024 17:59:51 +0800
Subject: [PATCH] 06/13

---
 src/components/CostEntry/feeTable.vue         |  268 +++--
 src/styles/buttonGroup.scss                   |    5 +-
 .../components/Button.vue                     |    1 +
 .../CustomerReconciliation/detail/index.vue   |    8 +-
 .../detail/info/index.vue                     |   52 +-
 .../detail/info/infoColumns.tsx               |  381 +++++--
 .../detail/modules/operationArea.vue          |    2 +-
 .../seaexport/detail/modules/preOrder.vue     | 1015 ++++++++++++++++-
 8 files changed, 1461 insertions(+), 271 deletions(-)

diff --git a/src/components/CostEntry/feeTable.vue b/src/components/CostEntry/feeTable.vue
index e59678b5..ae0b9b7f 100644
--- a/src/components/CostEntry/feeTable.vue
+++ b/src/components/CostEntry/feeTable.vue
@@ -75,13 +75,13 @@
       type: Array,
       default: () => {
         return []
-      }
+      },
     },
     // 业务ID
     id: {
       type: String,
-      default: ''
-    }
+      default: '',
+    },
   })
   const emits = defineEmits(['broInsert'])
   // 费用名称字典
@@ -110,7 +110,7 @@
     feeEnName: '',
     quantity: 1,
     exchangeRate: 1,
-    feeType: props.tbType == 'receive' ? 1 : 2
+    feeType: props.tbType == 'receive' ? 1 : 2,
   }
   // 表格绑定数据
   const list = ref([])
@@ -159,7 +159,7 @@
         if (!feeDict.value.length) feeDict.value = res
         console.log(res)
         const dict = res.map((res) => {
-          return res.code + '-' +res.name
+          return res.code + '-' + res.name
         })
         process(dict)
       },
@@ -199,13 +199,13 @@
       type: 'dropdown',
       source: async (query, process) => {
         // 获取当前选中行
-        const rowIndex = hotTb.value.hotInstance.getActiveEditor().row        
+        const rowIndex = hotTb.value.hotInstance.getActiveEditor().row
         const code = list.value[rowIndex - 1].customerType
         console.log(list.value[rowIndex - 1])
         if (code) {
-          GetClientListByCode({ code }).then(res => {
+          GetClientListByCode({ code }).then((res) => {
             const { data } = res
-            data.forEach(item => {
+            data.forEach((item) => {
               item['label'] = item.shortName
               item['value'] = item.codeName
             })
@@ -216,7 +216,7 @@
             process(dict)
           })
         } else {
-          createMessage.warning("请先选择客户类别！")
+          createMessage.warning('请先选择客户类别！')
           process([])
         }
       },
@@ -267,7 +267,7 @@
       width: 120,
       data: 'noTaxPrice',
       type: 'numeric',
-      readOnly: true
+      readOnly: true,
     },
     {
       title: '不含税金额',
@@ -275,7 +275,7 @@
       data: 'noTaxAmount',
       type: 'numeric',
       format: '0.00',
-      readOnly: true
+      readOnly: true,
     },
     {
       title: '金额',
@@ -359,8 +359,9 @@
       title: '录入人',
       width: 100,
       data: 'createByName',
-      readOnly: true
-    }, {
+      readOnly: true,
+    },
+    {
       title: '录入日期',
       width: 100,
       data: 'createTime',
@@ -388,13 +389,15 @@
       title: '修改人',
       width: 100,
       data: 'updateByName',
-      readOnly: true
-    }, {
+      readOnly: true,
+    },
+    {
       title: '修改日期',
       width: 100,
       data: 'updateTime',
-      readOnly: true
-    }, {
+      readOnly: true,
+    },
+    {
       title: '发票申请金额',
       width: 100,
       data: 'orderInvoiceAmount',
@@ -429,9 +432,9 @@
     rowHeights: 32,
     fixedColumnsLeft: 1,
     // 需要隐藏的列
-    hiddenColumns: { 
+    hiddenColumns: {
       columns: [1, 2],
-      indicators: true
+      indicators: true,
     },
     // 控制回车移动
     enterMoves: 'row',
@@ -528,34 +531,54 @@
         // 修改不含税单价计算
         if (changes[0][1] === 'noTaxPrice') {
           // 单价
-          list.value[index].unitPrice = Number((changes[0][3] || 0) * ((list.value[index].taxRate || 0) / 100 + 1)).toFixed(6)
+          list.value[index].unitPrice = Number(
+            (changes[0][3] || 0) * ((list.value[index].taxRate || 0) / 100 + 1),
+          ).toFixed(6)
           // 金额
-          list.value[index].amount = Number((list.value[index].unitPrice || 0) * (list.value[index].quantity || 0)).toFixed(6)
+          list.value[index].amount = Number(
+            (list.value[index].unitPrice || 0) * (list.value[index].quantity || 0),
+          ).toFixed(6)
           // 不含税金额
-          list.value[index].noTaxAmount = Number((changes[0][3] || 0) * (list.value[index].quantity || 0)).toFixed(6)
+          list.value[index].noTaxAmount = Number(
+            (changes[0][3] || 0) * (list.value[index].quantity || 0),
+          ).toFixed(6)
         }
         // 修改单价计算
         if (changes[0][1] === 'unitPrice') {
           // 不含税单价
-          list.value[index].noTaxPrice = Number((changes[0][3] || 0) / ((list.value[index].taxRate || 0) / 100 + 1)).toFixed(6)
+          list.value[index].noTaxPrice = Number(
+            (changes[0][3] || 0) / ((list.value[index].taxRate || 0) / 100 + 1),
+          ).toFixed(6)
           // 金额
-          list.value[index].amount = Number((changes[0][3] || 0) * (list.value[index].quantity || 0)).toFixed(6)
+          list.value[index].amount = Number(
+            (changes[0][3] || 0) * (list.value[index].quantity || 0),
+          ).toFixed(6)
           // 不含税金额
-          list.value[index].noTaxAmount = Number((list.value[index].noTaxPrice || 0) * (list.value[index].quantity || 0)).toFixed(6)
+          list.value[index].noTaxAmount = Number(
+            (list.value[index].noTaxPrice || 0) * (list.value[index].quantity || 0),
+          ).toFixed(6)
         }
         // 修改数量
         if (changes[0][1] === 'quantity') {
           // 金额
-          list.value[index].amount = Number((changes[0][3] || 0) * (list.value[index].unitPrice || 0)).toFixed(6)
+          list.value[index].amount = Number(
+            (changes[0][3] || 0) * (list.value[index].unitPrice || 0),
+          ).toFixed(6)
           // 不含税金额
-          list.value[index].noTaxAmount = Number((changes[0][3] || 0) * (list.value[index].noTaxPrice || 0)).toFixed(6)
+          list.value[index].noTaxAmount = Number(
+            (changes[0][3] || 0) * (list.value[index].noTaxPrice || 0),
+          ).toFixed(6)
         }
         // 修改税率
         if (changes[0][1] === 'taxRate') {
           // 不含税单价
-          list.value[index].noTaxPrice = Number((list.value[index].unitPrice || 0) / ((changes[0][3] || 0) / 100 + 1)).toFixed(6)
+          list.value[index].noTaxPrice = Number(
+            (list.value[index].unitPrice || 0) / ((changes[0][3] || 0) / 100 + 1),
+          ).toFixed(6)
           // 不含税金额
-          list.value[index].noTaxAmount = Number((list.value[index].noTaxPrice || 0) * (list.value[index].quantity || 0)).toFixed(6)
+          list.value[index].noTaxAmount = Number(
+            (list.value[index].noTaxPrice || 0) * (list.value[index].quantity || 0),
+          ).toFixed(6)
         }
       }
     },
@@ -567,62 +590,70 @@
       items: list.value.filter((res) => {
         return res.feeStatus == 1
       }),
-      businessType: 1
+      businessType: 1,
     }
     loading.value = true
-    SubmitFee(postData).then(res => {
-      loading.value = false
-      init()
-      createMessage.success(res.message)
-    }).catch(() => {
-      loading.value = false
-    })
+    SubmitFee(postData)
+      .then((res) => {
+        loading.value = false
+        init()
+        createMessage.success(res.message)
+      })
+      .catch(() => {
+        loading.value = false
+      })
   }
   // 提交审核
   const submit = (arr) => {
     loading.value = true
     const ids = []
-    arr.forEach(res => {
+    arr.forEach((res) => {
       if (res.id) ids.push(res.id)
     })
     if (ids.length == arr.length) {
-      ApplyAudit({ id: '', ids }).then(res => {
-        loading.value = false
-        createMessage.success(res.message)
-        init()
-      }).catch(() => {
-        loading.value = false
-      })
+      ApplyAudit({ id: '', ids })
+        .then((res) => {
+          loading.value = false
+          createMessage.success(res.message)
+          init()
+        })
+        .catch(() => {
+          loading.value = false
+        })
     } else {
       const postData = {
         BusinessId: props.id,
-        items: arr
+        items: arr,
       }
-      SubmitFee(postData).then(res => {
+      SubmitFee(postData).then((res) => {
         const { data } = res
-        const ids = data.map(item => {
+        const ids = data.map((item) => {
           return item.id
         })
-        ApplyAudit({ ids }).then(res => {
-          loading.value = false
-          createMessage.success(res.message)
-          init()
-        }).catch(() => {
-          loading.value = false
-        })
+        ApplyAudit({ ids })
+          .then((res) => {
+            loading.value = false
+            createMessage.success(res.message)
+            init()
+          })
+          .catch(() => {
+            loading.value = false
+          })
       })
     }
   }
   // 撤销提交
   const revoke = (ids) => {
     loading.value = true
-    Withdraw({ ids }).then(res => {
-      loading.value = false
-      createMessage.success(res.message)
-      init()
-    }).catch(() => {
-      loading.value = false
-    })
+    Withdraw({ ids })
+      .then((res) => {
+        loading.value = false
+        createMessage.success(res.message)
+        init()
+      })
+      .catch(() => {
+        loading.value = false
+      })
   }
   // 取消编辑
   const cancelEdit = () => {
@@ -700,68 +731,69 @@
       pageCondition: {
         pageIndex: 1,
         pageSize: 1000,
-        sortConditions: []
+        sortConditions: [],
       },
       queryCondition: JSON.stringify([
         { FieldName: 'BusinessId', FieldValue: props.id, ConditionalType: 1 },
         { FieldName: 'FeeType', FieldValue: props.tbType == 'receive' ? 1 : 2, ConditionalType: 1 },
-      ])
+      ]),
     }
-    GetList(postData).then(res => {
-      loading.value = false
-      const { data } = res
-      data.forEach((item, index) => {
-        item['feeStatusText'] = feeStatusList[item.feeStatus]
-        if (item.createTime) item.createTime = item.createTime.split(' ')[0]
-        if (item.auditDate) item.auditDate = item.auditDate.split(' ')[0]
-        if (item.updateTime) item.updateTime = item.updateTime.split(' ')[0]
-        if (item.updateTime == '1900-01-01') item.updateTime = ''
-      })
-      list.value = data
-      // 设置原始数据，取消使用
-      oldData = JSON.parse(JSON.stringify(data))
-      if (data.length != 0) {
-        hotTb.value.hotInstance.updateSettings({
-          cells: function(row, col) {
-            // 设置费用状态不是录入状态的行为只读
-            const props = { readOnly: true }
-            // 审核通过（STATUS=0）
-            // 录入状态（STATUS=1）
-            // 提交审核（STATUS=2）
-            // 申请修改 (STATUS=3)
-            // 申请删除 (STATUS=4)
-            // 撤销申请 (STATUS=5)
-            // 驳回提交（STATUS=6）
-            // 驳回申请（STATUS=7）
-            // 部分结算（STATUS=8）
-            // 结算完毕（STATUS=9）
-            if (data[row]?.feeStatus != 1 && col != 0) {
-              // 配置不同状态的行颜色
-              if (data[row]?.feeStatus == 0) {
-                props['className'] = 'hot-green'
-              }
-              if (data[row]?.feeStatus == 2) {
-                props['className'] = 'hot-yellow'
-              }
-              if (data[row]?.feeStatus == 7) {
-                props['className'] = 'hot-red'
-              }
-              return props
-            } else {
-              return
-            }
-          }
+    GetList(postData)
+      .then((res) => {
+        loading.value = false
+        const { data } = res
+        data.forEach((item, index) => {
+          item['feeStatusText'] = feeStatusList[item.feeStatus]
+          if (item.createTime) item.createTime = item.createTime.split(' ')[0]
+          if (item.auditDate) item.auditDate = item.auditDate.split(' ')[0]
+          if (item.updateTime) item.updateTime = item.updateTime.split(' ')[0]
+          if (item.updateTime == '1900-01-01') item.updateTime = ''
         })
-      }
-      hotTb.value.hotInstance.loadData(list.value)
-    })
-    .catch(() => {
-      loading.value = false
-    })
+        list.value = data
+        // 设置原始数据，取消使用
+        oldData = JSON.parse(JSON.stringify(data))
+        if (data.length != 0) {
+          hotTb.value.hotInstance.updateSettings({
+            cells: function (row, col) {
+              // 设置费用状态不是录入状态的行为只读
+              const props = { readOnly: true }
+              // 审核通过（STATUS=0）
+              // 录入状态（STATUS=1）
+              // 提交审核（STATUS=2）
+              // 申请修改 (STATUS=3)
+              // 申请删除 (STATUS=4)
+              // 撤销申请 (STATUS=5)
+              // 驳回提交（STATUS=6）
+              // 驳回申请（STATUS=7）
+              // 部分结算（STATUS=8）
+              // 结算完毕（STATUS=9）
+              if (data[row]?.feeStatus != 1 && col != 0) {
+                // 配置不同状态的行颜色
+                if (data[row]?.feeStatus == 0) {
+                  props['className'] = 'hot-green'
+                }
+                if (data[row]?.feeStatus == 2) {
+                  props['className'] = 'hot-yellow'
+                }
+                if (data[row]?.feeStatus == 7) {
+                  props['className'] = 'hot-red'
+                }
+                return props
+              } else {
+                return
+              }
+            },
+          })
+        }
+        hotTb.value.hotInstance.loadData(list.value)
+      })
+      .catch(() => {
+        loading.value = false
+      })
   }
   onMounted(() => {
     const hot = hotTb.value.hotInstance
-    hot.addHook('afterOnCellMouseDown', function(event, coords, TD) {})
+    hot.addHook('afterOnCellMouseDown', function (event, coords, TD) {})
     // 定义表格按键处理逻辑
     hot.addHook('beforeKeyDown', function (event) {
       // 检查按下的是否是特定的键（例如 'Enter'）
@@ -797,13 +829,13 @@
       row.forEach((item) => {
         list.value.push(item)
       })
-    }
+    },
   )
   watch(
     () => props.id,
     () => {
-      init() 
-    }
+      init()
+    },
   )
   watch(
     list.value,
diff --git a/src/styles/buttonGroup.scss b/src/styles/buttonGroup.scss
index 94febfd9..f3dde0a1 100644
--- a/src/styles/buttonGroup.scss
+++ b/src/styles/buttonGroup.scss
@@ -7,14 +7,15 @@
     height: 28px;
     line-height: 26px;
     color: #000;
-
+    font-size: 12px !important;
     .iconfont {
       margin-right: 6px;
+      font-size: 14px !important;
     }
 
     span {
       &.iconfont{
-        font-size: 18px !important;
+        font-size: 16px !important;
       }
     }
     &:hover {
diff --git a/src/views/operation/CustomerReconciliation/components/Button.vue b/src/views/operation/CustomerReconciliation/components/Button.vue
index 172016c5..7bb5e16e 100644
--- a/src/views/operation/CustomerReconciliation/components/Button.vue
+++ b/src/views/operation/CustomerReconciliation/components/Button.vue
@@ -17,5 +17,6 @@
   @import url('/@/styles/buttonGroup.scss');
   .nav {
     margin-top: 20px !important;
+    padding: 0 2px;
   }
 </style>
diff --git a/src/views/operation/CustomerReconciliation/detail/index.vue b/src/views/operation/CustomerReconciliation/detail/index.vue
index b319e8fd..1f5bdb02 100644
--- a/src/views/operation/CustomerReconciliation/detail/index.vue
+++ b/src/views/operation/CustomerReconciliation/detail/index.vue
@@ -381,8 +381,12 @@
     height: calc(100vh - 366px);
     .ant-table-body {
       max-height: none !important;
-      .ant-table-expanded-row-fixed {
-        height: calc(100vh - 365px);
+      height: calc(100% - 50px) !important;
+      .ant-table-placeholder {
+        display: none;
+        .ant-table-expanded-row-fixed {
+          height: calc(100vh - 365px);
+        }
       }
     }
   }
diff --git a/src/views/operation/CustomerReconciliation/detail/info/index.vue b/src/views/operation/CustomerReconciliation/detail/info/index.vue
index 67cdbe13..c9508594 100644
--- a/src/views/operation/CustomerReconciliation/detail/info/index.vue
+++ b/src/views/operation/CustomerReconciliation/detail/info/index.vue
@@ -158,17 +158,49 @@
             }
           })
           if (ToRType) {
-            othercondition.push({
-              FieldName: e,
-              FieldValue: data[e],
-              ConditionalType: 1,
-            })
+            // 判断是数组
+            if (Array.isArray(data[e])) {
+              othercondition.push(
+                {
+                  FieldName: e,
+                  FieldValue: data[e][0],
+                  ConditionalType: 3,
+                },
+                {
+                  FieldName: e,
+                  FieldValue: data[e][1],
+                  ConditionalType: 5,
+                },
+              )
+            } else {
+              othercondition.push({
+                FieldName: e,
+                FieldValue: data[e],
+                ConditionalType: 1,
+              })
+            }
           } else {
-            condition.push({
-              FieldName: e,
-              FieldValue: data[e],
-              ConditionalType: 1,
-            })
+            // 判断是数组
+            if (Array.isArray(data[e])) {
+              condition.push(
+                {
+                  FieldName: e,
+                  FieldValue: data[e][0],
+                  ConditionalType: 3,
+                },
+                {
+                  FieldName: e,
+                  FieldValue: data[e][1],
+                  ConditionalType: 5,
+                },
+              )
+            } else {
+              condition.push({
+                FieldName: e,
+                FieldValue: data[e],
+                ConditionalType: 1,
+              })
+            }
           }
         }
       })
diff --git a/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx b/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
index eb3bbf8c..1c73dba0 100644
--- a/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
+++ b/src/views/operation/CustomerReconciliation/detail/info/infoColumns.tsx
@@ -7,14 +7,36 @@ import {
   GetFeeCodeSelectList,
   GetFeeCurrencySelectList,
 } from '/@/views/operation/CustomerReconciliation/api.js'
+import {
+  GetClientStlModeSelectList,
+  GetVesselSelectList,
+  GetVoynoSelectList,
+  GetAgentCnClientList,
+  GetClientPortSelectList,
+} from '/@/views/operation/seaexport/api/BookingLedger.js'
+import { GetClientListByCode } from '/@/api/common'
 import { billTypeData } from '/@/views/operation/CustomerReconciliation/detail/detailColumns'
-export const RQueryArr = ['currency']
+export const TFData = [
+  { value: true, label: '是' },
+  { value: false, label: '否' },
+]
+export const RQueryArr = [
+  'customerId',
+  'createTime',
+  'billType',
+  'isDebit',
+  'stlName',
+  'currency',
+  'feeName',
+  'forwarderId',
+  'dischargePortId',
+  'loadPortId',
+]
 // 表单
 export const schemas: FormSchema[] = [
-  { field: 'mblno', component: 'Input', label: '主提单号', colProps: { span: 4 } },
   {
-    label: '币别',
-    field: 'currency',
+    label: '费用对象',
+    field: 'customerId',
     component: 'ApiSelect',
     required: false,
     dynamicDisabled: false,
@@ -23,14 +45,14 @@ export const schemas: FormSchema[] = [
       return {
         api: () => {
           return new Promise((resolve) => {
-            GetFeeCurrencySelectList().then((res) => {
-              console.log(res, 111111111111111111111111)
+            GetClientListByCode().then((res) => {
+              console.log(res)
               resolve(res)
             })
           })
         },
         immediate: false,
-        labelField: 'name',
+        labelField: 'shortName',
         valueField: 'codeName',
         resultField: 'data',
         filterOption: (input: string, option: any) => {
@@ -39,39 +61,35 @@ export const schemas: FormSchema[] = [
       }
     },
   },
-  // {
-  //   label: '费用对象',
-  //   field: 'customerId',
-  //   component: 'ApiSelect',
-  //   required: false,
-  //   dynamicDisabled: false,
-  //   colProps: { span: 4 },
-  //   componentProps: () => {
-  //     return {
-  //       api: () => {
-  //         return new Promise((resolve) => {
-  //           GetFeeCodeSelectList().then((res) => {
-  //             res.data.forEach((item) => {
-  //               item.label = item.code + '-' + item.name
-  //             })
-  //             resolve(res)
-  //           })
-  //         })
-  //       },
-  //       immediate: false,
-  //       valueField: 'id',
-  //       resultField: 'data',
-  //       filterOption: (input: string, option: any) => {
-  //         return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  //       },
-  //     }
-  //   },
-  // },
-  // { field: 'field1', component: 'Input', label: '编号检索', colProps: { span: 4 } },
-  // { field: 'field2', component: 'DatePicker', label: '从业务日期', colProps: { span: 4 } },
-  // { field: 'field3', component: 'DatePicker', label: '到业务日期', colProps: { span: 3 } },
-  // { field: 'field4', component: 'DatePicker', label: '从费用日期', colProps: { span: 3 } },
-  // { field: 'field5', component: 'DatePicker', label: '到费用日期', colProps: { span: 3 } },
+  {
+    field: 'customNo',
+    component: 'Input',
+    label: '编号检索',
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+  },
+  {
+    field: 'etd',
+    label: '业务日期',
+    component: 'RangePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 7 },
+    componentProps: {
+      allowClear: true,
+    },
+  },
+  {
+    field: 'createTime',
+    label: '费用日期',
+    component: 'RangePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 6 },
+    componentProps: {
+      allowClear: true,
+    },
+  },
   {
     field: 'CZ',
     component: 'Button',
@@ -89,52 +107,130 @@ export const schemas: FormSchema[] = [
       }
     },
   },
-  // {
-  //   field: 'billType',
-  //   component: 'Select',
-  //   componentProps: {
-  //     options: billTypeData,
-  //   },
-  //   label: '收付类型',
-  //   colProps: { span: 2 },
-  // },
-
-  // { field: 'field7', component: 'Select', label: 'FRT', colProps: { span: 2 } },
-  // { field: 'field7', component: 'Select', label: '包含已到账', colProps: { span: 2 } },
-  // { field: 'field7', component: 'Select', label: '是否开票', colProps: { span: 2 } },
-  // { field: 'field7', component: 'Select', label: '是否垫付', colProps: { span: 2 } },
-  // { field: 'field6', component: 'Select', label: '委托单位', colProps: { span: 3 } },
-  // {
-  //   label: '费用名称',
-  //   field: 'field9',
-  //   component: 'ApiSelect',
-  //   required: false,
-  //   dynamicDisabled: false,
-  //   colProps: { span: 3 },
-
-  //   componentProps: () => {
-  //     return {
-  //       api: () => {
-  //         return new Promise((resolve) => {
-  //           GetFeeCodeSelectList().then((res) => {
-  //             res.data.forEach((item) => {
-  //               item.label = item.code + '-' + item.name
-  //             })
-  //             resolve(res)
-  //           })
-  //         })
-  //       },
-  //       immediate: false,
-  //       valueField: 'id',
-  //       resultField: 'data',
-  //       mode: 'multiple',
-  //       filterOption: (input: string, option: any) => {
-  //         return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  //       },
-  //     }
-  //   },
-  // },
-  // { field: 'field9', component: 'Select', label: '费用范围', colProps: { span: 3 } },
+  {
+    field: 'billType',
+    component: 'Select',
+    componentProps: {
+      options: billTypeData,
+    },
+    label: '收付类型',
+    colProps: { span: 2 },
+  },
+  {
+    field: 'isDebit',
+    component: 'Select',
+    label: '是否对账',
+    dynamicDisabled: false,
+    colProps: { span: 2 },
+    componentProps: {
+      options: TFData,
+    },
+  },
+  {
+    label: '结算方式',
+    field: 'stlName',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: () => {
+      return {
+        api: GetClientStlModeSelectList,
+        immediate: false,
+        labelField: 'stlName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    label: '币别',
+    field: 'currency',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        api: GetFeeCurrencySelectList,
+        immediate: false,
+        labelField: 'name',
+        valueField: 'codeName',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    label: '费用名称',
+    field: 'feeName',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: () => {
+      return {
+        api: () => {
+          return new Promise((resolve) => {
+            GetFeeCodeSelectList().then((res) => {
+              res.data.forEach((item) => {
+                item.label = item.code + '-' + item.name
+              })
+              resolve(res)
+            })
+          })
+        },
+        immediate: false,
+        valueField: 'id',
+        resultField: 'data',
+        // mode: 'multiple',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    field: 'isSeaFreight',
+    component: 'Select',
+    label: '是否海运费',
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: ({ formModel }) => {
+      return {
+        options: TFData,
+        onchange: (e) => {
+          if (e) {
+            formModel.feeName = '海运费'
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '船名',
+    field: 'vessel',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        api: GetVesselSelectList,
+        labelField: 'vesselName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
   {
     field: 'CS',
     component: 'Button',
@@ -152,15 +248,112 @@ export const schemas: FormSchema[] = [
       }
     },
   },
-  // { field: 'field9', component: 'Select', label: '船名', colProps: { span: 4 } },
-  // { field: 'field9', component: 'Input', label: '航次', colProps: { span: 4 } },
-  // { field: 'field7', component: 'Select', label: '含海运费业务', colProps: { span: 2 } },
-  // { field: 'field7', component: 'Switch', label: '记忆查询', colProps: { span: 2 } },
-  // { field: 'field9', component: 'Select', label: '港口(国外)', colProps: { span: 3 } },
-  // { field: 'field9', component: 'Select', label: '港口(国内)', colProps: { span: 3 } },
-  // { field: 'field9', component: 'Select', label: '国外代理', colProps: { span: 3 } },
+
+  {
+    label: '航次',
+    field: 'voyno',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: () => {
+      return {
+        api: GetVoynoSelectList,
+        immediate: false,
+        labelField: 'voyNo',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    label: '国外代理',
+    field: 'forwarderId',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetAgentCnClientList,
+        labelField: 'shortName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e) {
+            formModel.forwarder = obj.label
+          } else {
+            formModel.forwarder = ''
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '港口(国外)',
+    field: 'dischargePortId',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        api: () => {
+          return new Promise((resolve) => {
+            GetClientPortSelectList().then((res) => {
+              res.data.forEach((item) => {
+                if (item.ediCode) item.cnName = item.ediCode + '/' + item.cnName
+              })
+              resolve(res)
+            })
+          })
+        },
+        immediate: false,
+        labelField: 'cnName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    label: '港口(国内)',
+    field: 'loadPortId',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: () => {
+      return {
+        api: () => {
+          return new Promise((resolve) => {
+            GetClientPortSelectList().then((res) => {
+              res.data.forEach((item) => {
+                if (item.ediCode) item.cnName = item.ediCode + '/' + item.cnName
+              })
+              resolve(res)
+            })
+          })
+        },
+        immediate: false,
+        labelField: 'cnName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
 ]
-//左列表
 export const columnsL: BasicColumn[] = [
   { title: '业务类型', dataIndex: 'businessTypeName', align: 'left' },
   { title: '委托单位', dataIndex: 'customerName', align: 'left' },
diff --git a/src/views/operation/seaexport/detail/modules/operationArea.vue b/src/views/operation/seaexport/detail/modules/operationArea.vue
index d7f4d558..d3000150 100644
--- a/src/views/operation/seaexport/detail/modules/operationArea.vue
+++ b/src/views/operation/seaexport/detail/modules/operationArea.vue
@@ -62,7 +62,7 @@
           @visibleChange="handleVisibleChange"
           @confirm="openPreOrderFun"
         >
-          <button> <span class="iconfont icon-yunshu1" style="font-size: 14px"></span>舱单 </button>
+          <button> <span class="iconfont icon-yunshu1" style="font-size: 14px"></span> 舱单</button>
         </a-popconfirm>
         <!-- <button @click="openModel('paper')">
           <span class="iconfont icon-zhizhishu" style="font-size: 18px"></span>下货纸
diff --git a/src/views/operation/seaexport/detail/modules/preOrder.vue b/src/views/operation/seaexport/detail/modules/preOrder.vue
index 2f418850..276cdfd9 100644
--- a/src/views/operation/seaexport/detail/modules/preOrder.vue
+++ b/src/views/operation/seaexport/detail/modules/preOrder.vue
@@ -72,22 +72,773 @@
           </div>
         </a-col>
         <a-col :span="19">
-          <BasicForm @register="register" />
+          <div class="pre-details">
+            <!-- :rules="rules" -->
+            <a-form
+              style="margin-bottom: 10px"
+              size="small"
+              ref="basicFrom"
+              :selfUpdate="true"
+              :model="formState"
+              :label-col="{ span: 8 }"
+              :wrapper-col="{ span: 16 }"
+              autocomplete="off"
+            >
+              <div class="top">
+                <a-row class="from-box" :gutter="10">
+                  <template v-if="!formState.isHBL">
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-item
+                        class="pre-from-label"
+                        label="主提单号"
+                        name="mblno"
+                        :labelCol="labelCol2"
+                        :wrapperCol="wrapperCol2"
+                        has-feedback
+                      >
+                        <a-input v-model:value="formState.mblno" />
+                      </a-form-item>
+                    </a-col>
+                  </template>
+                  <template v-if="formState.isHBL">
+                    <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
+                      <a-form-item
+                        class="pre-from-label"
+                        label="分提单号"
+                        name="hblno"
+                        :labelCol="labelCol2"
+                        :wrapperCol="wrapperCol2"
+                        has-feedback
+                      >
+                        <a-input v-model:value="formState.hblno" />
+                      </a-form-item>
+                    </a-col>
+                  </template>
+                </a-row>
+                <a-row class="from-box" :gutter="10" style="padding-left: 17px">
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-item
+                      class="pre-from-label"
+                      label="船名"
+                      name="vessel"
+                      :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>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-item
+                      class="pre-from-label"
+                      label="航次"
+                      name="voyno"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <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-form-item
+                      class="pre-from-label"
+                      label="船代"
+                      name="forwarder"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <a-select v-model:value="formState.forwarder">
+                        <a-select-option value="china">China</a-select-option>
+                        <a-select-option value="usa">U.S.A</a-select-option>
+                      </a-select>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-item
+                      class="pre-from-label"
+                      label="船公司"
+                      name="carrier"
+                      :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>
+                    </a-form-item>
+                  </a-col>
+                  <a-col :xs="12" :sm="12" :md="12" :lg="8" :xl="5">
+                    <a-form-item
+                      class="pre-from-label"
+                      label="开船日期"
+                      name="etd"
+                      :labelCol="labelCol2"
+                      :wrapperCol="wrapperCol2"
+                      has-feedback
+                    >
+                      <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="pre-mail-info">
+                <a-row>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <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>
+                          <!-- @click="saveModel('shipper')" -->
+                          <a-button
+                            class="save-btn"
+                            type="link"
+                            size="small"
+                            pre-icon="ant-design:save-outlined"
+                          >
+                            保存
+                          </a-button>
+                        </div>
+                        <div></div>
+                      </div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="24">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="发货人"
+                              name="shippername"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <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"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.shipperaddR1" />
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="国家"
+                              name="shippercountryName"
+                              :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>
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="电话"
+                              name="shippertel"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.shippertel" />
+                            </a-form-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <div class="title">
+                        <span>收货人信息</span>
+                        <div class="Template">
+                          <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>
+                          <!-- @click="saveModel('consignee')" -->
+                          <a-button
+                            class="save-btn"
+                            type="link"
+                            size="small"
+                            pre-icon="ant-design:save-outlined"
+                          >
+                            保存
+                          </a-button>
+                        </div>
+                        <!-- @click="CopyConsignee" -->
+                        <a-button class="order-btn" size="small" type="primary">
+                          复制通知人
+                        </a-button>
+                      </div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="24">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="收货人"
+                              name="consigneename"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <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"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.consigneeaddR1" />
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="国家"
+                              name="consigneecountryName"
+                              :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>
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="电话"
+                              name="consigneetel"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.consigneetel" />
+                            </a-form-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="8">
+                    <div class="mail-box">
+                      <div class="title">
+                        <span>通知人信息</span>
+                        <div class="Template">
+                          <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>
+                          <!-- @click="saveModel('notifyparty')" -->
+                          <a-button
+                            class="save-btn"
+                            type="link"
+                            size="small"
+                            pre-icon="ant-design:save-outlined"
+                          >
+                            保存
+                          </a-button>
+                        </div>
+                        <!-- @click="CopyNotifyparty" -->
+                        <a-button class="order-btn" size="small" type="primary">
+                          复制收货人
+                        </a-button>
+                      </div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="24">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="通知人"
+                              name="notifypartyname"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <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"
+                              :labelCol="labelCol"
+                              :wrapperCol="wrapperCol"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.notifypartyaddR1" />
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="国家"
+                              name="notifypartycountryName"
+                              :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>
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="12">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="电话"
+                              name="notifypartytel"
+                              :labelCol="labelCol2"
+                              :wrapperCol="wrapperCol2"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.notifypartytel" />
+                            </a-form-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">港口信息</div>
+                      <div class="mail-bottom">
+                        <a-row>
+                          <a-col :span="6">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="装货港代码"
+                              name="portloadid"
+                              :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>
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="6">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="装货港"
+                              name="portload"
+                              :labelCol="labelCol3"
+                              :wrapperCol="wrapperCol3"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.portload" />
+                            </a-form-item>
+                          </a-col>
+
+                          <a-col :span="6">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="卸货港代码"
+                              name="portdischargeid"
+                              :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>
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="6">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="卸货港"
+                              name="portdischarge"
+                              :labelCol="labelCol3"
+                              :wrapperCol="wrapperCol3"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.portdischarge" />
+                            </a-form-item>
+                          </a-col>
+
+                          <a-col :span="6">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="收货地代码"
+                              name="placedeliveryid"
+                              :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>
+                            </a-form-item>
+                          </a-col>
+                          <a-col :span="6">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="收货地"
+                              name="placedelivery"
+                              :labelCol="labelCol3"
+                              :wrapperCol="wrapperCol3"
+                              has-feedback
+                            >
+                              <a-input v-model:value="formState.portdischarge" />
+                            </a-form-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">货物信息</div>
+                      <div class="cargo-info-bottm">
+                        <div class="marks">
+                          <a-form-item
+                            class="pre-from-label"
+                            name="marks"
+                            :labelCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 },
+                            }"
+                            :wrapperCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 },
+                            }"
+                            has-feedback
+                          >
+                            <template #label>
+                              <span>
+                                唛头&nbsp;
+                                <!-- @click="handleOpen(1)" -->
+                                <span
+                                  style="cursor: pointer"
+                                  class="copy-btn iconfont icon-bianji"
+                                ></span>
+                              </span>
+                            </template>
+                            <a-textarea
+                              class="input-box"
+                              v-model:value="formState.marks"
+                              :auto-size="{ minRows: 7, maxRows: 7 }"
+                            />
+                          </a-form-item>
+                        </div>
+                        <div class="description">
+                          <a-form-item
+                            class="pre-from-label"
+                            name="description"
+                            :labelCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 },
+                            }"
+                            :wrapperCol="{
+                              xs: { span: 24 },
+                              sm: { span: 24 },
+                              md: { span: 24 },
+                            }"
+                            has-feedback
+                          >
+                            <template #label>
+                              <span>
+                                货物描述&nbsp;
+                                <!-- @click="handleOpen(2)" -->
+                                <span
+                                  style="cursor: pointer"
+                                  class="copy-btn iconfont icon-bianji"
+                                ></span>
+                              </span>
+                            </template>
+                            <a-textarea
+                              class="input-box"
+                              v-model:value="formState.description"
+                              :auto-size="{ minRows: 7, maxRows: 7 }"
+                            />
+                          </a-form-item>
+                        </div>
+                        <div class="right">
+                          <a-row>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-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>
+                              </a-form-item>
+                            </a-col>
+                          </a-row>
+                          <a-row>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="包装"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                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>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="温度"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="tempset"
+                              >
+                                <div class="line-box">
+                                  <a-input v-model:value="formState.tempset" />
+                                </div>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="温度单位"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="tempid"
+                              >
+                                <a-select
+                                  size="small"
+                                  :disabled="formState.cargoid !== 'R'"
+                                  :default-value="formState.tempid || 'C摄氏'"
+                                  v-model:value="formState.tempid"
+                                >
+                                  <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
+                                class="pre-from-label"
+                                label="通风"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="reeferf"
+                              >
+                                <div class="line-box">
+                                  <a-input v-model:value="formState.reeferf" />
+                                </div>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="CLASS"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="dclass"
+                              >
+                                <div class="line-box">
+                                  <a-input v-model:value="formState.dclass" />
+                                </div>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="UN NO"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="dunno"
+                              >
+                                <div class="line-box">
+                                  <a-input v-model:value="formState.dunno" />
+                                </div>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="联系人"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="dattn"
+                              >
+                                <div class="line-box">
+                                  <a-input v-model:value="formState.dattn" />
+                                </div>
+                              </a-form-item>
+                            </a-col>
+                            <a-col :span="12">
+                              <a-form-item
+                                class="pre-from-label"
+                                label="联系电话"
+                                :labelCol="labelCol2"
+                                :wrapperCol="wrapperCol2"
+                                has-feedback
+                                name="dtel"
+                              >
+                                <div class="line-box">
+                                  <a-input v-model:value="formState.dtel" />
+                                </div>
+                              </a-form-item>
+                            </a-col>
+                          </a-row>
+                        </div>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">备注信息</div>
+                      <div class="remarks-bottom">
+                        <a-row>
+                          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+                            <a-form-item
+                              class="pre-from-label"
+                              label="备注"
+                              :labelCol="{
+                                xs: { span: 24 },
+                                sm: { span: 8 },
+                                md: { span: 1 },
+                              }"
+                              :wrapperCol="{
+                                xs: { span: 24 },
+                                sm: { span: 15 },
+                                md: { span: 23 },
+                              }"
+                              has-feedback
+                              name="remarks"
+                            >
+                              <!-- <inputView
+                                type="remarks"
+                                :parentVal="orderDetails.remarks"
+                                @getInputChange="inputChange"
+                              /> -->
+                              <a-input v-model:value="formState.remarks" />
+                            </a-form-item>
+                          </a-col>
+                        </a-row>
+                      </div>
+                    </div>
+                  </a-col>
+                  <a-col :span="24">
+                    <div class="mail-box">
+                      <div class="title">集装箱信息</div>
+                      <div class="ctn-btn">
+                        <!-- @click="addCtn" -->
+                        <div class="btn">
+                          <i class="iconfont icon-icon_tianjia"></i><span>新建</span>
+                        </div>
+                        <!-- @click="copyCtn" -->
+                        <div class="btn">
+                          <i class="iconfont icon-fuzhi2"></i><span>复制新建</span>
+                        </div>
+                        <!-- @click="removeCtn" -->
+                        <div class="btn">
+                          <i class="iconfont icon-shanchu1"></i><span>删除</span>
+                        </div>
+                        <div class="import">
+                          <a-form-item
+                            class="pre-from-label"
+                            label="场站"
+                            name="yard"
+                            :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>
+                          </a-form-item>
+                        </div>
+                        <div :style="{ textAlign: 'right' }">
+                          <span>
+                            <!-- 件数: {{ total('pkgs') }} 重量: {{ total('kgs') }} 尺码：{{total('cbm')}} -->
+                          </span>
+                        </div>
+                      </div>
+                      <!-- v-if="preOrderLoad" -->
+                      <div class="table-box">
+                        <hot-table ref="hotTb" :data="list" :settings="settings"></hot-table>
+                      </div>
+                    </div>
+                  </a-col>
+                </a-row>
+              </div>
+            </a-form>
+          </div>
         </a-col>
       </a-row>
     </div>
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue'
-  import { GetShippingBillList } from '/@/views/operation/seaexport/api/BookingLedger.js'
+  import { ref, reactive } from 'vue'
+  import {
+    GetShippingBillList,
+    EditShippingBill,
+  } from '/@/views/operation/seaexport/api/BookingLedger.js'
   import { useMessage } from '/@/hooks/web/useMessage'
   const { notification } = useMessage()
-  import { useRoute, useRouter } from 'vue-router'
-  const router = useRouter()
+  import { useRoute } from 'vue-router'
+  import { HotTable } from '@handsontable/vue3'
+  import { registerAllModules } from 'handsontable/registry'
+  registerAllModules()
   const route = useRoute()
-  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index'
-  import { schemas1 } from '/@/views/operation/seaexport/detail/modules/preOrderColumns'
   const openPreOrderShow = ref(false)
   const id = ref()
   const labelCol = {
@@ -137,7 +888,7 @@
   }
   // -----------------------左侧------------------------
   const orderList = ref<any>([])
-  const orderDetails = ref<any>({})
+  const formState = ref<any>({})
   const editIndex = ref(0)
   // 获取列表数据
   function FngetPageESeaeEdi() {
@@ -158,7 +909,7 @@
           res.data.forEach((e) => {
             orderList.value.push({ checked: false, ...e })
           })
-          orderDetails.value = orderList.value[editIndex.value]
+          formState.value = orderList.value[editIndex.value]
         }
       })
       .catch((err) => {
@@ -171,6 +922,13 @@
   }
   // 保存
   function saveOrder() {
+    let ApiData = {
+      ...formState.value,
+      ctnInfo: list.value,
+    }
+    EditShippingBill(ApiData).then((res) => {
+      console.log(res)
+    })
     console.log('保存')
   }
   // 删除
@@ -198,15 +956,121 @@
   }
   // 点击列表
   function changeOrder(index) {
+    orderList.value[editIndex.value] = formState.value
     editIndex.value = index
+    formState.value = orderList.value[index]
   }
   // -----------------------右侧表单------------------------
-  const [register, methods] = useForm({
-    labelWidth: 80,
-    schemas: schemas1,
-    showActionButtonGroup: false,
-    size: 'small',
-  })
+
+  // -----------------------下侧表格------------------------
+  const list = ref<any>([])
+  const columns = [
+    {
+      data: 'selected',
+      type: 'checkbox',
+      title: ' ',
+      width: 32,
+      className: 'htCenter',
+      readOnly: false,
+    },
+    {
+      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)
+      },
+    },
+    {
+      title: '箱号',
+      width: 80,
+      data: 'bsno',
+    },
+    {
+      title: '封号',
+      width: 80,
+      data: 'bsno',
+    },
+    {
+      title: '件数',
+      width: 80,
+      data: 'bsno',
+    },
+    {
+      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)
+      },
+    },
+    {
+      title: '重量',
+      width: 80,
+      data: 'bsno',
+    },
+    {
+      title: '尺码',
+      width: 80,
+      data: 'bsno',
+    },
+  ]
+  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) {},
+  }
   defineExpose({
     init,
   })
@@ -219,6 +1083,63 @@
   /deep/ .ant-form-item-children-icon .anticon-check-circle {
     display: none;
   }
+  :deep(.right) {
+    .ant-col {
+      height: 40px;
+    }
+  }
+  :deep(.mail-bottom) {
+    .ant-col {
+      height: 40px;
+    }
+  }
+  :deep(.ant-input) {
+    width: 100%;
+    height: 24px;
+    line-height: 24px;
+  }
+  :deep(.ant-select-selector) {
+    height: 24px !important;
+  }
+  :deep(.from-box) {
+    height: 40px;
+    .ant-form-item-control-input-content {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      .ant-input {
+        width: 100%;
+        height: 24px;
+        line-height: 24px;
+      }
+      .input-icon {
+        position: absolute;
+        top: 50%;
+        z-index: 2;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        color: rgba(0, 0, 0, 0.25);
+        line-height: 0;
+        -webkit-transform: translateY(-50%);
+        transform: translateY(-50%);
+        opacity: 0;
+        right: 10px;
+      }
+      &:hover {
+        .input-icon {
+          opacity: 1;
+        }
+      }
+    }
+    .date-picker {
+      height: 24px;
+    }
+  }
 </style>
 <style lang="less" scoped>
   .pre-order {
@@ -236,7 +1157,7 @@
       line-height: 26px;
       padding: 0 8px;
       font-size: 12px;
-      margin-right: 8px;
+      margin-right: 4px;
       margin-bottom: 10px;
       border-radius: 4px;
     }
@@ -513,6 +1434,9 @@
         display: flex;
         align-items: center;
         justify-content: space-around;
+        :deep(.ant-select) {
+          flex: 1;
+        }
       }
 
       span {
@@ -527,22 +1451,40 @@
     .marks {
       flex: 1;
       padding-right: 10px;
-
-      /deep/ .ant-form-item-label {
-        text-align: left;
-        height: 30px;
-        line-height: 30px;
+      :deep(.ant-form-horizontal) {
+        flex: auto;
+      }
+      :deep(.pre-from-label) {
+        display: flex;
+        flex-direction: column;
+        .ant-form-item-label {
+          text-align: left;
+          height: 30px;
+          line-height: 30px;
+        }
+        .ant-form-item-control {
+          flex: auto;
+        }
       }
     }
 
     .description {
       flex: 1;
       padding-right: 10px;
-
-      /deep/ .ant-form-item-label {
-        text-align: left;
-        height: 30px;
-        line-height: 30px;
+      :deep(.ant-form-horizontal) {
+        flex: auto;
+      }
+      :deep(.pre-from-label) {
+        display: flex;
+        flex-direction: column;
+        .ant-form-item-label {
+          text-align: left;
+          height: 30px;
+          line-height: 30px;
+        }
+        .ant-form-item-control {
+          flex: auto;
+        }
       }
     }
 
@@ -559,7 +1501,9 @@
 
   .ctn-btn {
     vertical-align: top;
-
+    .import {
+      padding-top: 10px;
+    }
     .btn {
       display: inline-block;
       height: 40px;
@@ -618,21 +1562,4 @@
     width: 100%;
     display: block;
   }
-
-  .ve-table
-    .ve-table-container
-    .ve-table-content-wrapper
-    table.ve-table-content
-    tbody.ve-table-body
-    tr.ve-table-body-tr
-    td.ve-table-body-td,
-  .ve-table
-    .ve-table-container
-    .ve-table-content-wrapper
-    table.ve-table-content
-    tbody.ve-table-body
-    tr.ve-table-expand-tr
-    td.ve-table-body-td {
-    padding: 0 5px;
-  }
 </style>