From 41338689a75fb0e3d45d5d9af104018410328266 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, 31 Oct 2024 18:00:36 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E5=8D=95=E7=A1=AE=E8=AE=A4=20=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/taskmanage/api.ts                   |   16 +
 .../taskmanage/taskList/BLConfirmation.vue    |   75 --
 .../taskList/BLConfirmation/columns.tsx       | 1074 +++++++++++++++++
 .../taskList/BLConfirmation/container.vue     |  472 ++++++++
 .../taskList/BLConfirmation/index.vue         |  222 ++++
 .../taskList/BLConfirmation/info.vue          |  409 +++++++
 6 files changed, 2193 insertions(+), 75 deletions(-)
 delete mode 100644 src/views/taskmanage/taskList/BLConfirmation.vue
 create mode 100644 src/views/taskmanage/taskList/BLConfirmation/columns.tsx
 create mode 100644 src/views/taskmanage/taskList/BLConfirmation/container.vue
 create mode 100644 src/views/taskmanage/taskList/BLConfirmation/index.vue
 create mode 100644 src/views/taskmanage/taskList/BLConfirmation/info.vue

diff --git a/src/views/taskmanage/api.ts b/src/views/taskmanage/api.ts
index 05aaeab6..bbc13460 100644
--- a/src/views/taskmanage/api.ts
+++ b/src/views/taskmanage/api.ts
@@ -827,3 +827,19 @@ export function GetBLConfirmation(parameter) {
     method: 'get',
   })
 }
+// 提单信息详情  分单
+export function GetSeaExportBillManageInfo(params) {
+  return request({
+    url: '/opApi/SeaExportBillManage/GetSeaExportBillManageInfo',
+    method: 'get',
+    params,
+  })
+}
+// 提单信息详情  主单
+export function BookingOrderGet(params) {
+  return request({
+    url: '/opApi/SeaExport/GetSeaExportInfo',
+    method: 'get',
+    params,
+  })
+}
diff --git a/src/views/taskmanage/taskList/BLConfirmation.vue b/src/views/taskmanage/taskList/BLConfirmation.vue
deleted file mode 100644
index 6e631499..00000000
--- a/src/views/taskmanage/taskList/BLConfirmation.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="Main">
-    <a-row class="top">
-      <a-col :span="5">
-        <div v-for="item in 5" :key="item">
-          <span>主</span>
-          <p>AGB14654614</p>
-          <span>待确认</span>
-        </div>
-      </a-col>
-      <a-col :span="19">col-8</a-col>
-    </a-row>
-    <div class="bottom">
-      <a-steps :current="1" class="steps">
-        <a-step>
-          <template #title>客户已确认</template>
-          <!-- <template #description>
-            <span>This is a description.</span>
-          </template> -->
-        </a-step>
-        <a-step>
-          <template #title>国外代理确认中</template>
-          <!-- <template #description>
-            <span>This is a description.</span>
-          </template> -->
-        </a-step>
-        <a-step>
-          <template #title>操作确认</template>
-        </a-step>
-        <a-step>
-          <template #title>发起截单</template>
-        </a-step>
-      </a-steps>
-    </div>
-  </div>
-</template>
-<script lang="ts" setup>
-  import { ref, onMounted } from 'vue'
-  import { useRoute } from 'vue-router'
-  import { GetBLConfirmation } from '../api'
-  const route = useRoute()
-  const businessId = ref(route.query.id)
-  onMounted(() => {
-    init()
-  })
-  async function init() {
-    let ApiData = {
-      businessId: businessId.value,
-      businessType: 1,
-    }
-    const res = await GetBLConfirmation(ApiData)
-    if (res.succeeded) {
-      return createMessage.success('申请成功!')
-    }
-  }
-</script>
-<style lang="less" scoped>
-  .Main {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    .top {
-      flex: 1;
-    }
-    .bottom {
-      padding: 10px 60px;
-      display: flex;
-      justify-content: end;
-      box-shadow: 0px -3px 6px rgba(214, 214, 214, 1);
-      .steps {
-        width: 800px;
-      }
-    }
-  }
-</style>
diff --git a/src/views/taskmanage/taskList/BLConfirmation/columns.tsx b/src/views/taskmanage/taskList/BLConfirmation/columns.tsx
new file mode 100644
index 00000000..caf90e68
--- /dev/null
+++ b/src/views/taskmanage/taskList/BLConfirmation/columns.tsx
@@ -0,0 +1,1074 @@
+import { ref } from 'vue'
+import { FormSchema, BasicColumn } from '/@/components/Table'
+import { GetClientListByCode, GetSupplierListByCode } from '/@/api/common'
+import {
+  GetOrderContactListByClientId,
+  GetShippingBillTemplateSelectList,
+  GetClientPortSelectList,
+  GetVesselSelectList,
+} from '/@/views/operation/seaexport/api/BookingLedger'
+import { useOptionsStore } from '/@/store/modules/options'
+const optionsStore = useOptionsStore()
+import { getDictOption } from '/@/utils/dictUtil'
+// 单提份数字典
+const FnnoBill = ref([])
+getDictOption('no_bill').then((res) => {
+  FnnoBill.value = res
+})
+const personList = ref([])
+// 集装箱表单
+export const formSchema5: FormSchema[] = [
+  {
+    label: '主提单号',
+    field: 'mblno',
+    component: 'Input',
+    defaultValue: '',
+    colProps: { span: 12 },
+  },
+  {
+    label: '分提单号',
+    field: 'hblno',
+    component: 'Input',
+    required: true,
+    defaultValue: null,
+    colProps: { span: 12 },
+  },
+  //   {
+  //     field: 'shipperCnId',
+  //     label: '',
+  //     component: 'Input',
+  //     show: false,
+  //   },
+  //   {
+  //     label: '提单确认人',
+  //     field: 'shipperCn',
+  //     component: 'ApiSelect',
+  //     required: false,
+  //     dynamicDisabled: false,
+  //     colProps: { span: 5 },
+  //     componentProps: ({ formModel }) => {
+  //       return {
+  //         api: GetClientListByCode,
+  //         params: { code: 'shippercn' },
+  //         labelField: 'pinYinCode',
+  //         valueField: 'shortName',
+  //         showName: 'shortName',
+  //         resultField: 'data',
+  //         immediate: false,
+  //         onChange: (e, obj) => {
+  //           if (e && obj) {
+  //             formModel.shipperCnId = obj.id
+  //             GetOrderContactListByClientId({ id: obj.id }).then((res) => {
+  //               personList.value = res.data.map((item) => {
+  //                 return {
+  //                   label: item.name,
+  //                   value: item.name,
+  //                   id: item.id,
+  //                   email: item.email,
+  //                   mobile: item.mobile,
+  //                 }
+  //               })
+  //             })
+  //           }
+  //           if (!e && !obj) {
+  //             formModel.shipperCnId = null
+  //           }
+  //         },
+  //       }
+  //     },
+  //   },
+  //   {
+  //     field: 'BLConfirmationId',
+  //     label: '',
+  //     component: 'Input',
+  //     show: false,
+  //   },
+  //   {
+  //     field: 'BLConfirmationName',
+  //     label: '联系人',
+  //     component: 'Select',
+  //     required: false,
+  //     dynamicDisabled: false,
+  //     colProps: { span: 5 },
+  //     componentProps: ({ formModel, formActionType }) => {
+  //       return {
+  //         options: personList.value,
+  //         mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
+  //         allowClear: true,
+  //         showSearch: true,
+  //         filterOption: (input: string, option: any) => {
+  //           return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+  //         },
+  //         onChange: (v, obj) => {
+  //           if (v && obj) {
+  //             formModel.customerContactId = obj.id
+  //             formModel.email = obj.email
+  //             formModel.mobile = obj.mobile
+  //           }
+  //           if (!v && (!obj || obj == {})) {
+  //             formModel.customerContactId = null
+  //             formModel.email = null
+  //             formModel.mobile = null
+  //           }
+  //         },
+  //       }
+  //     },
+  //   },
+  //   {
+  //     label: '邮箱',
+  //     field: 'BLConfirmationEmail',
+  //     component: 'Input',
+  //     colProps: { span: 5 },
+  //     rules: [{ type: 'email', message: '请填写正确的邮箱地址' }],
+  //   },
+]
+function ToCDB(str: any) {
+  if (!str) return
+  var tmp = ''
+  for (var i = 0; i < str.length; i++) {
+    if (str.charCodeAt(i) > 65248 && str.charCodeAt(i) < 65375) {
+      tmp += String.fromCharCode(str.charCodeAt(i) - 65248)
+    } else {
+      tmp += String.fromCharCode(str.charCodeAt(i))
+    }
+  }
+  tmp = tmp.replace(/，/gi, ',')
+  tmp = tmp.replace(/。/gi, '.')
+  tmp = tmp.replace(/；/gi, ';')
+  tmp = tmp.replace(/：/gi, ':')
+  tmp = tmp.replace(/？/gi, '?')
+  tmp = tmp.replace(/！/gi, '!')
+  tmp = tmp.replace(/《/gi, '<<')
+  tmp = tmp.replace(/》/gi, '>>')
+  tmp = tmp.replace(/‘/gi, "'")
+  tmp = tmp.replace(/’/gi, "'")
+  tmp = tmp.replace(/、/gi, ',')
+  // tab键转换暂时屏蔽，看后台转换的效果，再放开
+  tmp = tmp.replace(/\t/gi, ' ')
+  return tmp
+}
+const removeTrailingSpaces = (text) => {
+  return text.replace(/ \s*$/gm, '')
+}
+// 上面的表单1
+export const formSchema1: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'shipperId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '发货人',
+    field: 'shipper',
+    labelSlot: 'shipper',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetShippingBillTemplateSelectList,
+        params: { type: 2, id: formModel.wtdwId },
+        labelField: 'templateName',
+        valueField: 'templateName',
+        immediate: false,
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.shipperId = obj.id
+            formModel.shipperContent = obj.content
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.shipperId = null
+            formModel.shipperContent = null
+            formModel.shipper = ''
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '　',
+    field: 'shipperContent',
+    component: 'InputTextArea',
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        rows: 5,
+        slice: [30, 35, 40],
+        onCut: (v) => {
+          formModel.shipperContent = v
+        },
+        onblur: () => {
+          formModel.shipperContent = ToCDB(formModel.shipperContent)
+          formModel.shipperContent = formModel.shipperContent.toUpperCase()
+          formModel.shipperContent = removeTrailingSpaces(formModel.shipperContent)
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'consigneeId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '收货人',
+    field: 'consignee',
+    labelSlot: 'consignee',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetShippingBillTemplateSelectList,
+        params: { type: 1, id: formModel.wtdwId },
+        labelField: 'templateName',
+        valueField: 'templateName',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.consigneeId = obj.id
+            formModel.consigneeContent = obj.content
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.consigneeId = null
+            formModel.consignee = null
+            formModel.consigneeContent = ''
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '　',
+    field: 'consigneeContent',
+    component: 'InputTextArea',
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        rows: 5,
+        slice: [30, 35, 40],
+        onCut: (v) => {
+          formModel.consigneeContent = v
+        },
+        onblur: () => {
+          formModel.consigneeContent = ToCDB(formModel.consigneeContent)
+          formModel.consigneeContent = formModel.consigneeContent.toUpperCase()
+          formModel.consigneeContent = removeTrailingSpaces(formModel.consigneeContent)
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'notifyPartyId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '通知人',
+    field: 'notifyParty',
+    component: 'ApiSelect',
+    labelSlot: 'notifyParty',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetShippingBillTemplateSelectList,
+        params: { type: 3, id: formModel.wtdwId },
+        labelField: 'templateName',
+        valueField: 'templateName',
+        resultField: 'data',
+        immediate: false,
+        alwaysLoad: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.notifyPartyId = obj.id
+            formModel.notifyPartyContent = obj.content
+          }
+          if (e === undefined && obj === undefined) {
+            formModel.notifyPartyId = null
+            formModel.notifyPartyContent = ''
+            formModel.notifyParty = ''
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '　',
+    field: 'notifyPartyContent',
+    component: 'InputTextArea',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        rows: 5,
+        slice: [30, 35, 40],
+        onCut: (v) => {
+          formModel.notifyPartyContent = v
+        },
+        onblur: () => {
+          formModel.notifyPartyContent = ToCDB(formModel.notifyPartyContent)
+          formModel.notifyPartyContent = formModel.notifyPartyContent.toUpperCase()
+          formModel.notifyPartyContent = removeTrailingSpaces(formModel.notifyPartyContent)
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'secondNotifyPartyContent',
+    defaultValue: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'secondNotifyParty',
+    defaultValue: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'secondNotifyPartyId',
+    defaultValue: '',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'agentId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'agentName',
+    label: '国外代理',
+    component: 'ApiSelect',
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetSupplierListByCode,
+        params: { code: 'agent' },
+        labelField: 'pinYinCode',
+        showName: 'shortName',
+        valueField: 'shortName',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.agentId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.agentId = ''
+          }
+        },
+      }
+    },
+  },
+  {
+    field: 'agentContent',
+    label: 'AGENT',
+    component: 'InputTextArea',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 24 },
+    componentProps: {
+      rows: 5,
+    },
+  },
+]
+// 下面的表单2
+export const formSchema2: FormSchema[] = [
+  {
+    field: 'etd',
+    label: '开船日期',
+    component: 'DatePicker',
+    colProps: { span: 12 },
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+  {
+    field: 'eta',
+    label: '预抵日期',
+    component: 'DatePicker',
+    colProps: { span: 12 },
+    defaultValue: null,
+    componentProps: {
+      allowClear: true,
+      valueFormat: 'YYYY-MM-DD',
+    },
+  },
+  {
+    label: '',
+    field: 'vesselId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '船名',
+    field: 'vessel',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetVesselSelectList,
+        labelField: 'vesselName',
+        valueField: 'vesselName',
+        resultField: 'data',
+        immediate: false,
+        mode: 'SECRET_COMBOBOX_MODE_DO_NOT_USE',
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.vesselId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.vesselId = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '船司航次',
+    field: 'innerVoyno',
+    component: 'Input',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+  },
+  {
+    label: '装货港',
+    field: 'loadPortCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        valueField: 'ediCode',
+        showName: 'ediCode',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formActionType ? formActionType.linkageForm(obj) : null
+            formModel.loadPortId = obj.id
+            formModel.loadPort = obj.portName
+          }
+          if (!e && !obj) {
+            formModel.loadPortId = null
+            formModel.loadPort = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '卸货港',
+    field: 'dischargePortCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        showName: 'ediCode',
+        valueField: 'ediCode',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.dischargePortId = obj.id
+            formModel.dischargePort = obj.portName
+            // 带出交货地
+            formModel.deliveryPlaceId = obj.id
+            formModel.deliveryPlace = obj.portName
+            formModel.deliveryPlaceCode = e
+          }
+          if (!e && !obj) {
+            formModel.dischargePortId = null
+            formModel.dischargePort = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'loadPort',
+    component: 'Input',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        oninput: () => {
+          formModel.loadPort = formModel.loadPort.replace(/[\u4e00-\u9fa5]/gi, '')
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'loadPortId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'dischargePort',
+    component: 'Input',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        oninput: () => {
+          formModel.dischargePort = formModel.dischargePort.replace(/[\u4e00-\u9fa5]/gi, '')
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'dischargePortId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '交货地',
+    field: 'deliveryPlaceCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        showName: 'ediCode',
+        valueField: 'ediCode',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.deliveryPlaceId = obj.id
+            formModel.deliveryPlace = obj.portName
+          }
+          if (!e && !obj) {
+            formModel.deliveryPlaceId = null
+            formModel.deliveryPlace = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '收货地',
+    field: 'receiptPlaceCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        immediate: false,
+        labelField: 'pinYinCode',
+        valueField: 'ediCode',
+        showName: 'ediCode',
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.receiptPlace = obj.portName
+            formModel.receiptPlaceId = obj.id
+          }
+          if (!e && !obj) {
+            formModel.receiptPlace = null
+            formModel.receiptPlaceId = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'deliveryPlace',
+    component: 'Input',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        oninput: () => {
+          formModel.deliveryPlace = formModel.deliveryPlace.replace(/[\u4e00-\u9fa5]/gi, '')
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'deliveryPlaceId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'receiptPlace',
+    component: 'Input',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        oninput: () => {
+          formModel.receiptPlace = formModel.receiptPlace.replace(/[\u4e00-\u9fa5]/gi, '')
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'receiptPlaceId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '中转港',
+    field: 'transPortCode',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        allowClear: true,
+        showSearch: true,
+        labelField: 'pinYinCode',
+        showName: 'ediCode',
+        valueField: 'ediCode',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.transPortId = obj.id
+            formModel.transPort = obj.portName
+          }
+          if (!e && !obj) {
+            formModel.transPortId = null
+            formModel.transPort = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'transPort',
+    component: 'Space',
+    required: false,
+    colProps: { span: 12 },
+  },
+  {
+    label: '',
+    field: 'transPort',
+    component: 'Input',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: ({ formModel }) => {
+      return {
+        oninput: () => {
+          formModel.transPort = formModel.transPort.replace(/[\u4e00-\u9fa5]/gi, '')
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'transPortId',
+    component: 'Input',
+    show: false,
+  },
+]
+// 箱数或件数表单
+export const formSchema3: FormSchema[] = [
+  {
+    label: '件数',
+    field: 'noPkgs',
+    component: 'InputTextArea',
+    required: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        autoSize: { minRows: 3, maxRows: 3 },
+        onkeyup: (e) => {
+          const arr = e.currentTarget._value.split('\n')
+          let pkgs = 0
+          for (let i = 0; i < arr.length; i++) {
+            if (isNaN(arr[i])) {
+              const letters = arr[i].split(/\d+/).filter(Boolean)
+              const numbers = arr[i].split(/[a-zA-Z]+/).filter(Boolean)
+              pkgs = pkgs + Number(numbers[0])
+              if (letters && letters.length) formModel.kindPkgsName = letters[0]
+            } else {
+              if (arr[i]) {
+                pkgs = pkgs + Number(arr[i])
+              }
+            }
+          }
+          formModel.pkgs = pkgs
+          formActionType ? formActionType.submit() : null
+        },
+      }
+    },
+  },
+  {
+    label: '总件数',
+    field: 'pkgs',
+    component: 'Input',
+    colProps: { span: 12 },
+    dynamicDisabled: true,
+  },
+  {
+    label: '包装',
+    field: 'kindPkgsName',
+    component: 'Input',
+    colProps: { span: 12 },
+    dynamicDisabled: true,
+  },
+  {
+    label: '',
+    field: 'kindPkgs',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '毛重',
+    field: 'grossWeight',
+    component: 'InputTextArea',
+    required: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        autoSize: { minRows: 3, maxRows: 3 },
+        onkeyup: (e) => {
+          const arr = e.currentTarget._value.split('\n')
+          let pkgs = 0
+          for (let i = 0; i < arr.length; i++) {
+            if (isNaN(arr[i])) {
+              const numbers = arr[i].split(/[a-zA-Z]+/).filter(Boolean)
+              pkgs = pkgs + Number(numbers[0])
+            } else {
+              if (arr[i]) {
+                pkgs = pkgs + Number(arr[i])
+              }
+            }
+          }
+          formModel.kgs = pkgs
+        },
+      }
+    },
+  },
+  {
+    label: '总重量（KGS）',
+    field: 'kgs',
+    component: 'Input',
+    colProps: { span: 24 },
+  },
+  {
+    label: '尺码',
+    field: 'measurement',
+    component: 'InputTextArea',
+    required: false,
+    colProps: { span: 24 },
+    componentProps: ({ formModel }) => {
+      return {
+        autoSize: { minRows: 3, maxRows: 3 },
+        onkeyup: (e) => {
+          const arr = e.currentTarget._value.split('\n')
+          let pkgs = 0
+          for (let i = 0; i < arr.length; i++) {
+            if (isNaN(arr[i])) {
+              const numbers = arr[i].split(/[a-zA-Z]+/).filter(Boolean)
+              pkgs = pkgs + Number(numbers[0])
+            } else {
+              if (arr[i]) {
+                pkgs = pkgs + Number(arr[i])
+              }
+            }
+          }
+          formModel.cbm = pkgs
+        },
+      }
+    },
+  },
+  {
+    label: '总尺码（CBM）',
+    field: 'cbm',
+    component: 'Input',
+    colProps: { span: 24 },
+  },
+]
+export const formSchema4: FormSchema[] = [
+  {
+    field: 'totalNo',
+    label: '件数大写',
+    component: 'Input',
+    required: false,
+    colProps: { span: 24 },
+    dynamicDisabled: true,
+  },
+  {
+    field: 'issueType',
+    label: '签单方式',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('GetIssueTypeSelectList'),
+        allowClear: true,
+        showSearch: true,
+        labelField: 'billType',
+        valueField: 'id',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    field: 'issueDate',
+    label: '签单日期',
+    component: 'DatePicker',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: ({ formModel, formActionType }) => {
+      return {
+        allowClear: true,
+        valueFormat: 'YYYY-MM-DD',
+        onChange: (e) => {
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    label: '签单地点',
+    field: 'issuePlace',
+    component: 'Input',
+    required: false,
+    colProps: { span: 6 },
+  },
+  {
+    field: 'noBill',
+    label: '提单份数',
+    component: 'Select',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: {
+      options: FnnoBill,
+      allowClear: true,
+      showSearch: true,
+      filterOption: (input: string, option: any) => {
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+    },
+  },
+  {
+    field: 'mblFrt',
+    label: '付费方式',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: ({ formActionType }) => {
+      return {
+        option: optionsStore.getOptionsByCode('GetClientFrtSelectList'),
+        allowClear: true,
+        showSearch: true,
+        labelField: 'frtName',
+        valueField: 'frtName',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formActionType ? formActionType.linkageForm(e) : null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'prepareAtId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'prepareAtCode',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'prepareAt',
+    label: '预付地点',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        valueField: 'portName',
+        showName: 'portName',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.prepareAtId = obj.id
+            formModel.prepareAtCode = obj.ediCode
+          }
+          if (!e && !obj) {
+            formModel.prepareAtId = null
+            formModel.prepareAtCode = null
+          }
+        },
+      }
+    },
+  },
+  {
+    label: '',
+    field: 'payableAtId',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '',
+    field: 'payableAtCode',
+    component: 'Input',
+    show: false,
+  },
+  {
+    field: 'payableAt',
+    label: '到付地点',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetClientPortSelectList,
+        resultField: 'data',
+        labelField: 'pinYinCode',
+        valueField: 'portName',
+        showName: 'portName',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            formModel.payableAtId = obj.id
+            formModel.payableAtCode = obj.ediCode
+          }
+          if (!e && !obj) {
+            formModel.payableAtId = null
+            formModel.payableAtCode = null
+          }
+        },
+      }
+    },
+  },
+  {
+    field: 'service',
+    label: '运输条款',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 6 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('GetServiceSelectList'),
+        allowClear: true,
+        showSearch: true,
+        labelField: 'enName',
+        valueField: 'id',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+      }
+    },
+  },
+  {
+    label: '其他备注',
+    field: 'orderContent',
+    component: 'InputTextArea',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: {
+      autoSize: { minRows: 3, maxRows: 3 },
+    },
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    component: 'InputTextArea',
+    required: false,
+    colProps: { span: 12 },
+    componentProps: {
+      autoSize: { minRows: 3, maxRows: 3 },
+    },
+  },
+]
diff --git a/src/views/taskmanage/taskList/BLConfirmation/container.vue b/src/views/taskmanage/taskList/BLConfirmation/container.vue
new file mode 100644
index 00000000..db97d67c
--- /dev/null
+++ b/src/views/taskmanage/taskList/BLConfirmation/container.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="ds-sea-container-info">
+    <div class="flex">
+      <h4>集装箱信息</h4>
+      <a-button type="link" @click="addRow">
+        <span class="iconfont icon-icon_tianjia"></span>
+        添加
+      </a-button>
+      <a-popconfirm
+        :visible="deleteFlag"
+        title="确定要删除勾选的数据?"
+        ok-text="确定"
+        cancel-text="取消"
+        @confirm="deleteRow"
+        @cancel="cancelDelete"
+        @click="checkDelete"
+      >
+        <a-button type="link">
+          <span class="iconfont icon-shanchu1"></span>
+          删除
+        </a-button>
+      </a-popconfirm>
+      <a-button type="link" @click="updateCalc">
+        <span class="iconfont icon-refresh-1-copy"></span>
+        更新合计
+      </a-button>
+      <a-button :loading="dloading" @click="copyMainBill" type="link">
+        <span v-show="!dloading" class="iconfont icon-a-17Btuichu"></span>
+        调入主单集装箱信息
+      </a-button>
+    </div>
+    <hot-table ref="hotTb" :data="list" :settings="settings">
+      <img
+        v-show="!list.length"
+        class="hot-tb-no-data"
+        src="../../../../assets/images/nodata.png"
+        alt=""
+      />
+    </hot-table>
+  </div>
+</template>
+<script lang="ts" setup>
+  import {
+    ref,
+    nextTick,
+    defineProps,
+    defineComponent,
+    onMounted,
+    defineExpose,
+    watch,
+    defineEmits,
+  } from 'vue'
+  import { HotTable } from '@handsontable/vue3'
+  import { registerAllModules } from 'handsontable/registry'
+  registerAllModules()
+  import 'handsontable/dist/handsontable.full.min.css'
+  import {
+    GetOpCtnList,
+    BatchDelBillManageCtn,
+  } from '/@/views/operation/seaexport/api/BookingLedger'
+  import { GetCtnSelectList } from '/@/api/common'
+  import { GetPackageSelectList } from '/@/views/operation/seaexport/api/BookingLedger'
+  // 引入提示信息
+  import { useMessage } from '/@/hooks/web/useMessage'
+  const { createMessage } = useMessage()
+  const emits = defineEmits(['calcPkgs'])
+  const props = defineProps({
+    // 业务id
+    id: {
+      type: String,
+    },
+    setFieldsValue: {
+      type: Function,
+    },
+    // 分单id
+    mainId: { type: String },
+    // 新建的集装箱数据
+    ctnInfo: {
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+  })
+  // 表格ref
+  const hotTb = ref<any>(null)
+  // 存箱型数据
+  let ctnList = []
+  // 存包装数据
+  let packageList = []
+  // 表格列数据
+  const columns = [
+    {
+      data: 'selected',
+      type: 'checkbox',
+      title: ' ',
+      width: 32,
+      className: 'htCenter',
+      readOnly: false,
+    },
+    {
+      title: '箱型',
+      width: 80,
+      data: 'ctn',
+      type: 'dropdown',
+      source: async (query, process) => {
+        const results = await GetCtnSelectList()
+        ctnList = results.data
+        const dict = results.data.map((item) => {
+          return item.ctnName
+        })
+        process(dict)
+      },
+    },
+    {
+      title: '箱量',
+      width: 80,
+      data: 'ctnNum',
+      type: 'numeric',
+    },
+    {
+      title: '箱号',
+      width: 80,
+      data: 'cntrNo',
+    },
+    {
+      title: '封号',
+      width: 80,
+      data: 'sealNo',
+    },
+    {
+      title: '件数',
+      width: 80,
+      data: 'pkgs',
+      type: 'numeric',
+    },
+    {
+      title: '件数包装',
+      width: 80,
+      data: 'kindPkgsName',
+      type: 'dropdown',
+      source: async (query, process) => {
+        const results = (await GetPackageSelectList({ querykey: query }))?.data
+        packageList = results
+        const dict = results.map((item) => {
+          return item.packageName
+        })
+        process(dict)
+      },
+    },
+    {
+      title: '重量',
+      width: 80,
+      data: 'kgs',
+      type: 'numeric',
+    },
+    {
+      title: '尺码',
+      width: 80,
+      data: 'cbm',
+      type: 'numeric',
+    },
+    {
+      title: '箱皮重',
+      width: 80,
+      data: 'tareWeight',
+      type: 'numeric',
+    },
+    {
+      title: '备注',
+      width: 80,
+      data: 'note',
+    },
+  ]
+  // 表格绑定数据
+  const list = ref<any>([])
+  // 表格配置项
+  const settings = {
+    height: '257',
+    width: '100%',
+    autoWrapRow: true,
+    autoWrapCol: true,
+    // 每行的高度
+    rowHeights: 26,
+    fixedColumnsLeft: 1,
+    // 控制回车移动
+    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',
+    // 定义所有单元格发生变化的回调处理
+    afterChange(changes, source) {
+      // 这里定义了编辑，自动填充和拷贝数据的处理逻辑
+      if (source === 'edit' || source === 'Autofill.fill' || source === 'CopyPaste.paste') {
+        let dict: any = {}
+        changes.forEach((res) => {
+          // 修改箱型
+          if (changes[0][1] === 'ctn') {
+            const item = ctnList.filter((item: any) => {
+              return item.ctn === changes[0][3]
+            })
+            if (item) dict = item[0]
+            list.value[changes[0][0]]['ctnId'] = dict?.id
+          }
+          // 修改包装类型
+          if (changes[0][1] === 'kindPkgsName') {
+            const item = ctnList.filter((item: any) => {
+              return item.packageName === changes[0][3]
+            })
+            if (item) dict = item[0]
+            list.value[changes[0][0]]['kindPkgs'] = dict?.ediCode
+          }
+          // 修改件数
+          if (changes[0][1] === 'pkgs') {
+            // 计算当前总件数同步表单数据
+            let pkgs = 0
+            list.value.forEach((item) => {
+              if (item.pkgs) pkgs = pkgs + Number(item.pkgs)
+            })
+            emits('calcPkgs', { key: 'pkgs', value: pkgs })
+          }
+          // 修改重量
+          if (changes[0][1] === 'kgs') {
+            // 计算当前总总量同步表单数据
+            let kgs = 0
+            list.value.forEach((item) => {
+              if (item.kgs) kgs = kgs + Number(item.kgs)
+            })
+            emits('calcPkgs', { key: 'kgs', value: kgs })
+          }
+          // 修改尺码
+          if (changes[0][1] === 'cbm') {
+            // 计算当前总尺码同步表单数据
+            let cbm = 0
+            list.value.forEach((item) => {
+              if (item.cbm) cbm = cbm + Number(item.cbm)
+            })
+            emits('calcPkgs', { key: 'cbm', value: cbm })
+          }
+        })
+      }
+    },
+  }
+  const row = {
+    selected: false,
+    ctn: '',
+    ctnId: '',
+    id: '',
+    ctnNum: '',
+    cntrNo: '',
+    sealNo: '',
+    pkgs: '',
+    kindPkgs: '',
+    kindPkgsName: '',
+    kgs: '',
+    cbm: '',
+    tareWeight: '',
+    note: '',
+  }
+  const init = (data) => {
+    list.value = data
+    hotTb.value.hotInstance.loadData(data)
+  }
+  // 添加行
+  const addRow = () => {
+    const deepCopyRow = JSON.parse(JSON.stringify(row))
+    list.value.push(deepCopyRow)
+  }
+  // 删除
+  const deleteFlag = ref(false)
+  // 校验是否选中行
+  const checkDelete = () => {
+    let flag = false
+    list.value.forEach((item) => {
+      if (item.selected) flag = true
+    })
+    if (!flag) {
+      return createMessage.warning('请勾选要删除的数据！')
+    }
+    deleteFlag.value = true
+  }
+  // 删除选中行
+  const deleteRow = async (type) => {
+    const ids: any = []
+    if (type == 'imp') {
+      list.value.forEach((item) => {
+        ids.push(item.id)
+      })
+    } else {
+      list.value.forEach((item) => {
+        if (item.selected && item.id) ids.push(item.id)
+      })
+    }
+    if (ids.length && ids[0] != null) {
+      const data = await BatchDelBillManageCtn({ ids, id: props.mainId })
+      if (!type) createMessage.success(data.message)
+    }
+    deleteFlag.value = false
+    for (let i = 0; i < list.value.length; i++) {
+      if (list.value[i].selected) {
+        list.value.splice(i, 1)
+        i--
+      }
+    }
+    hotTb.value.hotInstance.loadData(list.value)
+
+    // const res = list.value.filter(item => {
+    //   return !item.selected
+    // })
+    // deleteFlag.value = false
+    // list.value = res
+    // hotmain.value.hotInstance.loadData(list.value)
+  }
+  // 取消删除
+  const cancelDelete = () => {
+    deleteFlag.value = false
+  }
+  const dloading = ref(false)
+  // 调入主单信息
+  const copyMainBill = async () => {
+    const postData = {
+      queryCondition: JSON.stringify([
+        {
+          FieldName: 'bsno',
+          FieldValue: props.id,
+          ConditionalType: 1,
+        },
+      ]),
+      pageCondition: {
+        pageIndex: 1,
+        pageSize: 999,
+        sortConditions: [],
+      },
+    }
+    dloading.value = true
+    await deleteRow('imp')
+    GetOpCtnList(postData)
+      .then((res) => {
+        dloading.value = false
+        const { data } = res
+        if (data.length) {
+          const hlist = data.map((item) => {
+            return {
+              selected: false,
+              ctn: item.ctn,
+              ctnId: item.ctnId,
+              id: null,
+              ctnNum: item.ctnNum,
+              cntrNo: item.cntrNo,
+              sealNo: item.sealNo,
+              pkgs: item.pkgs,
+              kindPkgs: item.kindPkgs,
+              kindPkgsName: item.kindPkgsName,
+              kgs: item.kgs,
+              cbm: item.cbm,
+              tareWeight: item.tareWeight,
+              note: item.note,
+              pid: props.mainId,
+            }
+          })
+          list.value = hlist
+          hotTb.value.hotInstance.loadData(hlist)
+        }
+      })
+      .catch(() => {
+        dloading.value = false
+      })
+  }
+  // 更新合计
+  const updateCalc = () => {
+    if (list.value.length) {
+      const obj = {
+        pkgs: 0,
+        noPkgs: 0,
+        grossWeight: 0,
+        kgs: 0,
+        measurement: 0,
+        cbm: 0,
+      }
+      list.value.forEach((item) => {
+        if (item.pkgs) {
+          obj.pkgs = obj.pkgs + Number(item.pkgs)
+          obj.noPkgs = obj.pkgs
+        }
+        if (item.kgs) {
+          obj.kgs = obj.kgs + Number(item.kgs)
+          obj.grossWeight = obj.kgs
+        }
+        if (item.cbm) {
+          obj.cbm = obj.cbm + Number(item.cbm)
+          obj.measurement = obj.cbm
+        }
+      })
+      props.setFieldsValue(obj)
+      createMessage.success('更新成功！')
+    }
+  }
+  // 获取 集装箱信息
+  function GetCtnList() {
+    GetOpCtnList({
+      queryCondition: JSON.stringify([
+        {
+          FieldName: 'bsno',
+          FieldValue: props.details.id,
+          ConditionalType: 1,
+        },
+      ]),
+      pageCondition: {
+        pageIndex: 1,
+        pageSize: 999,
+        sortConditions: [],
+      },
+    }).then((res) => {
+      const { data } = res
+      if (data.length == 0) {
+        list.value = []
+      } else {
+        list.value = data
+      }
+      hotTb.value.hotInstance.loadData(list.value)
+    })
+  }
+  onMounted(() => {
+    const hot = hotTb.value.hotInstance
+    hot.addHook('afterOnCellMouseDown', function (event, coords, TD) {})
+    // 定义表格按键处理逻辑
+    hot.addHook('beforeKeyDown', function (event) {
+      // 检查按下的是否是特定的键（例如 'Enter'）
+      if (event.key === 'ArrowDown') {
+        if (hot.getSelected()[0][0] == list.value.length - 1 && !hot.getActiveEditor()?._opened) {
+          list.value.push(JSON.parse(JSON.stringify(row)))
+          nextTick(() => {
+            hot.selectCell(list.value.length - 1, 3)
+          })
+          return false
+        }
+      }
+    })
+    list.value = props.ctnInfo
+    hot.loadData(props.ctnInfo)
+  })
+  watch(
+    () => props.ctnInfo,
+    (v) => {
+      list.value = v
+      const hot = hotTb.value.hotInstance
+      hot.loadData(v)
+    },
+  )
+  defineExpose({
+    list,
+    init,
+  })
+</script>
+
+<style lang="less" scoped>
+  .ds-sea-container-info {
+    .flex {
+      align-items: center;
+      h4 {
+        margin: 0 15px 0 0;
+      }
+    }
+  }
+</style>
diff --git a/src/views/taskmanage/taskList/BLConfirmation/index.vue b/src/views/taskmanage/taskList/BLConfirmation/index.vue
new file mode 100644
index 00000000..c27acf14
--- /dev/null
+++ b/src/views/taskmanage/taskList/BLConfirmation/index.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="Main">
+    <div class="top">
+      <div class="Left">
+        <div class="LeftBox">
+          <div v-if="tasksList.length == 0" class="NoData">
+            <img src="../../../../assets/images/nodata.png" alt="" />
+            <div class="no-message">暂无数据</div>
+          </div>
+          <div v-else>
+            <div
+              v-for="item in tasksList"
+              :key="item.id"
+              class="LeftUnit"
+              @click="ClickTasksUnit(item)"
+            >
+              <!-- active -->
+              <div class="activeBox" :class="activeId == item.id ? 'active' : ''">
+                <span v-if="item.isMainBL" class="type MainBL">主</span>
+                <span v-else class="type NoMainBL">分</span>
+                <p class="CsBlNumber">{{ item.blNumber }}</p>
+              </div>
+              <span class="CsState">{{ item.taskStatusName }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="Right">
+        <Info ref="RefInfo" />
+      </div>
+    </div>
+    <div class="bottom">
+      <a-steps :current="1" class="steps">
+        <a-step>
+          <template #title>客户已确认</template>
+          <!-- <template #description>
+            <span>This is a description.</span>
+          </template> -->
+        </a-step>
+        <a-step>
+          <template #title>国外代理确认中</template>
+          <!-- <template #description>
+            <span>This is a description.</span>
+          </template> -->
+        </a-step>
+        <a-step>
+          <template #title>操作确认</template>
+        </a-step>
+        <a-step>
+          <template #title>发起截单</template>
+        </a-step>
+      </a-steps>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue'
+  import { useRoute } from 'vue-router'
+  import { GetBLConfirmation, GetSeaExportBillManageInfo, BookingOrderGet } from '../../api'
+  import Info from './info.vue'
+  const route = useRoute()
+  const businessId = ref(route.query.id)
+  onMounted(() => {
+    init()
+  })
+  const tasksList = ref([])
+  const activeId = ref(null)
+  async function init() {
+    let ApiData = {
+      businessId: businessId.value,
+      businessType: 1,
+    }
+    const res = await GetBLConfirmation(ApiData)
+    if (res.succeeded) {
+      tasksList.value = res.data.tasks
+      if (res.data.tasks.length) {
+        ClickTasksUnit(res.data.tasks[0])
+      }
+    }
+  }
+  const RefInfo = ref<any>(null)
+  async function ClickTasksUnit(data) {
+    activeId.value = data.id
+    RefInfo.value.dloading = true
+    let res: any = null
+    if (data.isMainBL) {
+      res = await BookingOrderGet({ id: data.businessId })
+    } else {
+      res = await GetSeaExportBillManageInfo({ id: data.businessId })
+    }
+    if (res.succeeded) {
+      RefInfo.value.dloading = false
+      const row = res.data
+      RefInfo.value.setFieldsValue1({
+        ...row,
+      })
+      RefInfo.value.setFieldsValue2({
+        ...row,
+      })
+      RefInfo.value.setFieldsValue3({
+        ...row,
+      })
+      RefInfo.value.setFieldsValue4({
+        ...row,
+      })
+      RefInfo.value.setFieldsValue5({
+        ...row,
+      })
+      RefInfo.value.formData.cntrSealNo = row.cntrSealNo
+      RefInfo.value.formData.description = row.description
+      RefInfo.value.formData.marks = row.marks
+      RefInfo.value.ctnInfo.value = row.ctnInfo
+      console.log(res)
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .Main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    .top {
+      display: flex;
+      flex: 1;
+      .Left {
+        width: 320px;
+        padding: 20px;
+        .LeftBox {
+          border: 1px solid rgba(232, 235, 237, 1);
+          height: 100%;
+          max-height: calc(100vh - 152px);
+          padding: 10px 20px 20px 6px;
+          overflow-y: auto;
+          .NoData {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            color: #999999;
+          }
+          .LeftUnit {
+            display: flex;
+            margin-bottom: 6px;
+            padding: 2px 9px;
+            cursor: pointer;
+
+            .activeBox {
+              flex: 1;
+              display: flex;
+              &.active {
+                border-radius: 2px;
+                background: rgba(245, 249, 252, 1);
+              }
+              .type {
+                width: 16px;
+                height: 16px;
+                margin: 2px 7px 2px 0px;
+                opacity: 1;
+                border-radius: 4px;
+                font-size: 10px;
+                font-weight: 700;
+                letter-spacing: 0px;
+                line-height: 16px;
+                color: rgba(255, 255, 255, 1);
+                text-align: center;
+
+                &.MainBL {
+                  background: rgba(255, 141, 26, 1);
+                }
+                &.NoMainBL {
+                  background: rgba(22, 119, 255, 1);
+                }
+              }
+              .CsBlNumber {
+                height: 20px;
+                flex: 1;
+                margin-bottom: 0;
+                font-size: 12px;
+                font-weight: 400;
+                letter-spacing: 0px;
+                line-height: 20px;
+                color: rgba(51, 56, 61, 1);
+                text-align: left;
+              }
+            }
+            .CsState {
+              width: 80px;
+              height: 20px;
+              margin-left: 8px;
+              opacity: 1;
+              border-radius: 2px;
+              background: rgba(245, 249, 252, 1);
+              font-size: 12px;
+              font-weight: 400;
+              letter-spacing: 0px;
+              line-height: 20px;
+              color: rgba(37, 122, 250, 1);
+              text-align: center;
+            }
+          }
+        }
+      }
+      .Right {
+        flex: 1;
+        padding: 20px;
+        height: 100%;
+        max-height: calc(100vh - 152px);
+        overflow-y: auto;
+      }
+    }
+    .bottom {
+      padding: 10px 60px;
+      display: flex;
+      justify-content: end;
+      box-shadow: 0px -3px 6px rgba(214, 214, 214, 1);
+      .steps {
+        width: 800px;
+      }
+    }
+  }
+</style>
diff --git a/src/views/taskmanage/taskList/BLConfirmation/info.vue b/src/views/taskmanage/taskList/BLConfirmation/info.vue
new file mode 100644
index 00000000..8cfa74ea
--- /dev/null
+++ b/src/views/taskmanage/taskList/BLConfirmation/info.vue
@@ -0,0 +1,409 @@
+<template>
+  <a-spin :spinning="dloading">
+    <!-- 集装箱表单 -->
+
+    <div class="flex mt10">
+      <!-- 收发通表单 -->
+      <BasicForm style="flex: 1" @register="registerForm" />
+      <!-- 集装箱组件 -->
+      <div style="width: 800px" class="ml15">
+        <BasicForm style="margin-bottom: 0" @register="containerForm" />
+        <container
+          ref="contBox"
+          :id="id"
+          :mainId="activeId"
+          :setFieldsValue="setFieldsValue3"
+          :ctnInfo="ctnInfo"
+          @calcPkgs="calcPkgs"
+        ></container>
+        <!-- ETD表单 -->
+        <BasicForm style="margin-top: 8px" @register="ETDForm" @linkageForm="linkageETDForm" />
+      </div>
+    </div>
+    <Divider type="horizontal" />
+    <div>
+      <a-row class="mt15">
+        <a-col :span="7">
+          <a-form
+            v-model="formData"
+            class="ant-form-small cntrSealNo"
+            style="margin-top: -15px"
+            layout="vertical"
+          >
+            <a-col :span="24">
+              <a-form-item label="箱号封号">
+                <a-textarea
+                  v-model:value="formData.cntrSealNo"
+                  :autoSize="{ minRows: 10, maxRows: 10 }"
+                  placeholder="请输入"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+            <a-col :span="24" style="margin-top: 26px">
+              <a-form-item label="唛头">
+                <a-textarea
+                  v-model:value="formData.marks"
+                  :autoSize="{ minRows: 9, maxRows: 9 }"
+                  placeholder="请输入"
+                  allow-clear
+                />
+              </a-form-item>
+            </a-col>
+          </a-form>
+        </a-col>
+        <a-col :span="10">
+          <a-form
+            v-model="formData"
+            class="ant-form-small"
+            style="margin: -15px -12px 0 15px"
+            layout="vertical"
+          >
+            <a-form-item label="货物描述">
+              <a-textarea
+                v-model:value="formData.description"
+                :autoSize="{ minRows: 20, maxRows: 20 }"
+                style="height: 392px"
+                placeholder="请输入"
+                allow-clear
+              />
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :span="7">
+          <BasicForm
+            class="pkg"
+            style="margin: -15px -12px 0 27px"
+            @register="CountForm"
+            @submit="submit"
+          />
+        </a-col>
+      </a-row>
+      <!-- 签单方式表单 -->
+      <BasicForm
+        style="margin-top: 0px"
+        class="issue-form"
+        @register="issueForm"
+        @linkageForm="linkageIssueForm"
+      />
+    </div>
+  </a-spin>
+</template>
+<script lang="ts" setup>
+  import { ref, reactive, defineProps, onMounted, defineAsyncComponent } from 'vue'
+  import { BasicForm, useForm } from '/@/components/Form/index'
+  import { formSchema1, formSchema2, formSchema3, formSchema4, formSchema5 } from './columns'
+  // 集装箱表格
+  const container = defineAsyncComponent(() => import('./container.vue'))
+  const props = defineProps({
+    // 业务id
+    id: {
+      type: String,
+    },
+    activeId: {
+      type: String,
+    },
+    // 详情信息
+    details: { type: Object, default: {} },
+  })
+  const dloading = ref(false)
+  // 集装箱数据
+  const ctnInfo = ref([])
+  // 代理表单
+  const formData = reactive({
+    cntrSealNo: '',
+    description: '',
+    marks: '',
+  })
+  // 集装箱上面的表单
+  const [
+    containerForm,
+    { setFieldsValue: setFieldsValue5, validate: validate5, resetFields: resetFields5 },
+  ] = useForm({
+    labelWidth: 150,
+    schemas: formSchema5,
+    showActionButtonGroup: false,
+  })
+  // 提单信息第一个表单(收发通)
+  const [
+    registerForm,
+    {
+      setFieldsValue: setFieldsValue1,
+      validate: validate1,
+      resetFields: resetFields1,
+      updateSchema,
+    },
+  ] = useForm({
+    labelWidth: 150,
+    schemas: formSchema1,
+    showActionButtonGroup: false,
+  })
+  // 提单信息第二个表单
+  const [
+    ETDForm,
+    {
+      setFieldsValue: setFieldsValue2,
+      validate: validate2,
+      resetFields: resetFields2,
+      getFieldsValue: getFieldsValue2,
+    },
+  ] = useForm({
+    labelWidth: 150,
+    schemas: formSchema2,
+    showActionButtonGroup: false,
+  })
+  // 箱数或件数表单
+  const [
+    CountForm,
+    {
+      setFieldsValue: setFieldsValue3,
+      validate: validate3,
+      resetFields: resetFields3,
+      getFieldsValue: getFieldsValue3,
+    },
+  ] = useForm({
+    labelWidth: 150,
+    schemas: formSchema3,
+    showActionButtonGroup: false,
+  })
+  // 签单方式表单
+  const [
+    issueForm,
+    { setFieldsValue: setFieldsValue4, validate: validate4, resetFields: resetFields4 },
+  ] = useForm({
+    labelWidth: 150,
+    schemas: formSchema4,
+    showActionButtonGroup: false,
+  })
+  // 计算表单件数
+  const calcPkgs = (obj) => {
+    if (obj.value) {
+      if (obj.key == 'pkgs') {
+        setFieldsValue3({
+          noPkgs: obj.value,
+          pkgs: obj.value,
+        })
+      }
+      if (obj.key == 'kgs') {
+        setFieldsValue3({
+          grossWeight: obj.value,
+          kgs: obj.value,
+        })
+      }
+      if (obj.key == 'cbm') {
+        setFieldsValue3({
+          measurement: obj.value,
+          cbm: obj.value,
+        })
+      }
+    }
+  }
+  // 起运港联动签单地
+  const linkageETDForm = (v) => {
+    setFieldsValue4({
+      issuePlace: v.portName,
+    })
+  }
+  async function submit() {
+    setTimeout(() => {
+      let data = getFieldsValue3()
+      let SS = data.pkgs
+      if (SS) {
+        let GetStringNum = (str) => {
+          var num = 0
+          if (str == null || str == '') return num
+          if (str.length == 0) return num
+          var if_find = false
+          var str_num = ''
+          for (var i = 0; i < str.length; i += 1) {
+            var member = str.substr(i, 1)
+            if (
+              member == '0' ||
+              member == '1' ||
+              member == '2' ||
+              member == '3' ||
+              member == '4' ||
+              member == '5' ||
+              member == '6' ||
+              member == '7' ||
+              member == '8' ||
+              member == '9' ||
+              member == '.' ||
+              member == '-'
+            ) {
+              if (!if_find) {
+                str_num = str_num + member
+              }
+            } else {
+              if_find = true
+            }
+          }
+          return str_num
+        }
+        let ToEn = (a) => {
+          // eslint-disable-next-line no-array-constructor
+          const arr1 = new Array('', ' thousand', ' million', ' billion')
+          const b = a.length
+          let f: any = null
+          let h = 0
+          let g = ''
+          const e = Math.ceil(b / 3)
+          const k = b - e * 3
+          g = ''
+          for (f = k; f < b; f += 3) {
+            ++h
+            // eslint-disable-next-line no-undef
+            const num3 = f >= 0 ? a.substring(f, f + 3) : a.substring(0, k + 3)
+            // eslint-disable-next-line no-undef
+            const strEng = English(num3)
+            // eslint-disable-next-line eqeqeq
+            if (strEng != '') {
+              // eslint-disable-next-line eqeqeq
+              if (g != '') g += ' '
+              g += English(num3) + arr1[e - h]
+            }
+          }
+          return g
+        }
+        let English = (a) => {
+          // eslint-disable-next-line no-array-constructor
+          var arr2 = new Array(
+            'zero',
+            'ten',
+            'twenty',
+            'thirty',
+            'forty',
+            'fifty',
+            'sixty',
+            'seventy',
+            'eighty',
+            'ninety',
+          )
+          // eslint-disable-next-line no-array-constructor
+          var arr3 = new Array(
+            'zero',
+            'one',
+            'two',
+            'three',
+            'four',
+            'five',
+            'six',
+            'seven',
+            'eight',
+            'nine',
+          )
+          // eslint-disable-next-line no-array-constructor
+          var arr4 = new Array(
+            'ten',
+            'eleven',
+            'twelve',
+            'thirteen',
+            'fourteen',
+            'fifteen',
+            'sixteen',
+            'seventeen',
+            'eighteen',
+            'nineteen',
+          )
+
+          let strRet = ''
+          // eslint-disable-next-line eqeqeq
+          if (a.length == 3 && a.substr(0, 3) != '000') {
+            if (a.substr(0, 1) != '0') {
+              strRet += arr3[a.substr(0, 1)] + ' hundred'
+              if (a.substr(1, 2) != '00') strRet += ' and '
+            } else {
+              strRet += ' and '
+            }
+            a = a.substring(1)
+          }
+          if (a.length == 2) {
+            if (a.substr(0, 1) == '0') a = a.substring(1)
+            else if (a.substr(0, 1) == '1') strRet += arr4[a.substr(1, 2)]
+            else {
+              strRet += arr2[a.substr(0, 1)]
+              if (a.substr(1, 1) != '0') strRet += '-'
+              a = a.substring(1)
+            }
+          }
+          if (a.length == 1 && a.substr(0, 1) != '0') strRet += arr3[a.substr(0, 1)]
+          return strRet
+        }
+        SS = SS.toString()
+        const i = SS.indexOf('\n')
+        let num = 0
+        let strKind: any = ''
+        let enCapital = ''
+        if (i > 0) {
+          const slist = SS.split('\n')
+          for (let i = 0; i < slist.length; i += 1) {
+            const member = slist[i]
+            const strNum: any = GetStringNum(member)
+            if (i == 0) {
+              strKind = member.substring(strNum.length)
+            }
+            num = parseFloat(num).add(parseFloat(strNum))
+          }
+
+          if (strKind !== '') {
+            enCapital = strKind
+          } else {
+            strKind = data.kindPkgsName ? data.kindPkgsName : ''
+            enCapital = ToEn(num).toUpperCase() + ' ' + strKind + ' ONLY.'
+          }
+        } else {
+          const strNum: any = GetStringNum(SS)
+          strKind = SS.substring(strNum.length) ? SS.substring(strNum.length) : ''
+          if (strKind !== '') {
+            enCapital = strKind
+          } else {
+            strKind = data.kindPkgsName ? data.kindPkgsName : ''
+            enCapital = 'SAY:' + ToEn(strNum).toUpperCase() + ' ' + strKind + ' ONLY.'
+          }
+        }
+        setFieldsValue4({ totalNo: enCapital })
+      } else {
+        setFieldsValue4({ totalNo: '' })
+      }
+    }, 0)
+  }
+  // 签单日期联动开船日期
+  const linkageIssueForm = (v) => {
+    const data = getFieldsValue2()
+    if (v == 'FREIGHT COLLECT') {
+      // 到付
+      setFieldsValue4({
+        payableAt: data.dischargePort,
+        payableAtId: data.dischargePortId,
+        payableAtCode: data.dischargePortCode,
+        prepareAt: null,
+        prepareAtId: null,
+        prepareAtCode: null,
+      })
+    } else if (v == 'FREIGHT PREPAID') {
+      // 预付
+      setFieldsValue4({
+        prepareAt: data.loadPort,
+        prepareAtId: data.loadPortId,
+        prepareAtCode: data.loadPortCode,
+        payableAt: null,
+        payableAtId: null,
+        payableAtCode: null,
+      })
+    } else {
+      setFieldsValue2({
+        etd: v,
+      })
+    }
+  }
+  defineExpose({
+    setFieldsValue1,
+    setFieldsValue2,
+    setFieldsValue3,
+    setFieldsValue4,
+    setFieldsValue5,
+    formData,
+    ctnInfo,
+    dloading,
+  })
+</script>

From 9962976c26c71a919b85c6aaa37795540067bc0e 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, 1 Nov 2024 09:33:33 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E4=BE=9B=E5=BA=94?=
 =?UTF-8?q?=E5=95=86=E4=B8=9A=E5=8A=A1=E6=9D=A5=E6=BA=90=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=20=E4=BB=A5=E5=8F=8A=20=E6=8F=90=E5=8D=95=E7=A1=AE=E8=AE=A4?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/baseinfo/infoclient/columns.tsx     | 137 ++++++++----------
 .../taskList/BLConfirmation/columns.tsx       |   1 -
 .../taskList/BLConfirmation/index.vue         |  20 ++-
 3 files changed, 78 insertions(+), 80 deletions(-)

diff --git a/src/views/baseinfo/infoclient/columns.tsx b/src/views/baseinfo/infoclient/columns.tsx
index f48fdfaa..16055ff7 100644
--- a/src/views/baseinfo/infoclient/columns.tsx
+++ b/src/views/baseinfo/infoclient/columns.tsx
@@ -926,79 +926,43 @@ export const formSchema: FormSchema[] = [
     required: false,
     dynamicDisabled: false,
     colProps: { span: 4 },
+    componentProps: (En) => {
+      return {
+        api: GetClientSourceSelectList,
+        labelField: 'sourceName',
+        valueField: 'id',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: async (e, obj) => {
+          const { formModel, formActionType } = En
+          if (e && obj) {
+            formModel.sourceId = obj.value
+            formModel.sourceName = obj.label
+          }
+          if (!e && !obj) {
+            formModel.sourceId = ''
+            formModel.sourceName = ''
+          }
+          if (e) {
+            const FnsourceDetailId: any = await GetClientSourceDetailSelectList({
+              id: e,
+            })
+            if (FnsourceDetailId.succeeded) {
+              sourceDetailId.value.splice(0)
+              FnsourceDetailId.data.forEach((e) => {
+                sourceDetailId.value.push({ label: e.detailName, value: e.id })
+              })
+            }
+            if (formActionType) {
+              formModel.sourceDetailId = ''
+            }
+          }
+        },
+      }
+    },
   },
-  // {
-  //   label: '业务来源',
-  //   field: 'sourceId',
-  //   component: 'ApiSelect',
-  //   required: false,
-  //   dynamicDisabled: false,
-  //   colProps: { span: 4 },
-  //   componentProps: ({ formActionType, formModel }) => {
-  //     return {
-  //       allowClear: true,
-  //       showSearch: true,
-  //       option: optionsStore.getOptionsByCode('GetClientSourceSelectList'),
-  //       labelField: 'sourceName',
-  //       valueField: 'id',
-  //       filterOption: (input: string, option: any) => {
-  //         return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  //       },
-  //       onChange: async (e, obj) => {
-  //         if (e && obj) {
-  //           formModel.sourceId = obj.value
-  //           formModel.sourceName = obj.label
-  //         }
-  //         if (!e && !obj) {
-  //           formModel.sourceId = ''
-  //           formModel.sourceName = ''
-  //         }
-  //         if (e) {
-  //           if (formActionType) {
-  //             const { updateSchema } = formActionType
-  //             let Arr: any = []
-  //             await GetClientSourceDetailSelectList({ id: e }).then((res) => {
-  //               res.data.forEach((item) => {
-  //                 Arr.push({ label: item.detailName, value: item.id })
-  //               })
-  //             })
-  //             updateSchema({
-  //               label: '来源明细',
-  //               field: 'sourceDetailId',
-  //               component: 'Select',
-  //               required: false,
-  //               dynamicDisabled: ({ values }) => {
-  //                 return !values.sourceId
-  //               },
-  //               colProps: { span: 4 },
-  //               componentProps: ({ formModel }) => {
-  //                 return {
-  //                   allowClear: true,
-  //                   options: Arr,
-  //                   showSearch: true,
-  //                   filterOption: (input: string, option: any) => {
-  //                     return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-  //                   },
-  //                   onChange: (e, obj) => {
-  //                     if (e && obj) {
-  //                       formModel.sourceDetailId = obj.value
-  //                       formModel.sourceDetailName = obj.label
-  //                     }
-  //                     if (!e && !obj) {
-  //                       formModel.sourceDetailId = ''
-  //                       formModel.sourceDetailName = ''
-  //                     }
-  //                   },
-  //                 }
-  //               },
-  //             })
-  //           }
-  //         }
-  //         formModel.sourceDetailId = ''
-  //       },
-  //     }
-  //   },
-  // },
   // 来源明细Name
   {
     label: '',
@@ -1011,8 +975,35 @@ export const formSchema: FormSchema[] = [
     field: 'sourceDetailId',
     component: 'Select',
     required: false,
-
     colProps: { span: 4 },
+    dynamicDisabled: ({ values }) => {
+      return !values.sourceId
+    },
+    componentProps: (En) => {
+      return {
+        allowClear: true,
+        options: sourceDetailId.value,
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          const { formModel } = En
+          if (e && obj) {
+            formModel.sourceDetailId = obj.value
+            formModel.sourceDetailName = obj.label
+          }
+          if (!e && !obj) {
+            formModel.sourceDetailId = ''
+            formModel.sourceDetailName = ''
+          }
+        },
+        onEdit: () => {
+          const { formActionType } = En
+          formActionType ? formActionType.linkageForm(En) : null
+        },
+      }
+    },
   },
 
   {
diff --git a/src/views/taskmanage/taskList/BLConfirmation/columns.tsx b/src/views/taskmanage/taskList/BLConfirmation/columns.tsx
index caf90e68..60b9c608 100644
--- a/src/views/taskmanage/taskList/BLConfirmation/columns.tsx
+++ b/src/views/taskmanage/taskList/BLConfirmation/columns.tsx
@@ -29,7 +29,6 @@ export const formSchema5: FormSchema[] = [
     label: '分提单号',
     field: 'hblno',
     component: 'Input',
-    required: true,
     defaultValue: null,
     colProps: { span: 12 },
   },
diff --git a/src/views/taskmanage/taskList/BLConfirmation/index.vue b/src/views/taskmanage/taskList/BLConfirmation/index.vue
index c27acf14..26e7d699 100644
--- a/src/views/taskmanage/taskList/BLConfirmation/index.vue
+++ b/src/views/taskmanage/taskList/BLConfirmation/index.vue
@@ -31,24 +31,30 @@
     </div>
     <div class="bottom">
       <a-steps :current="1" class="steps">
-        <a-step>
+        <a-step v-for="item in activeSteps" :key="item.id">
+          <template #title>{{ item.typeName }}</template>
+          <template #description>
+            <a-button size="Small">手动确认</a-button>
+          </template>
+        </a-step>
+        <!-- <a-step>
           <template #title>客户已确认</template>
-          <!-- <template #description>
+          <template #description>
             <span>This is a description.</span>
-          </template> -->
+          </template>
         </a-step>
         <a-step>
           <template #title>国外代理确认中</template>
-          <!-- <template #description>
+          <template #description>
             <span>This is a description.</span>
-          </template> -->
+          </template>
         </a-step>
         <a-step>
           <template #title>操作确认</template>
         </a-step>
         <a-step>
           <template #title>发起截单</template>
-        </a-step>
+        </a-step> -->
       </a-steps>
     </div>
   </div>
@@ -65,6 +71,7 @@
   })
   const tasksList = ref([])
   const activeId = ref(null)
+  const activeSteps = ref([])
   async function init() {
     let ApiData = {
       businessId: businessId.value,
@@ -81,6 +88,7 @@
   const RefInfo = ref<any>(null)
   async function ClickTasksUnit(data) {
     activeId.value = data.id
+    activeSteps.value = data.steps
     RefInfo.value.dloading = true
     let res: any = null
     if (data.isMainBL) {