From 8641564ec15d4d06a4fe6d4998d91999c5a7e48a 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, 28 Nov 2024 09:36:42 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=B1=E7=AE=A1=E8=B0=83=E6=95=B4=20=20?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=20=E8=87=AA=E5=8A=A8=E5=BA=94=E4=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../OfflineAudit/index.vue                    |   82 +-
 .../operation/CheckBillAuto/SVG/ExcelSvg.vue  |   33 +
 .../operation/CheckBillAuto/SVG/PrintSvg.vue  |   38 +
 .../operation/CheckBillAuto/SVG/SaveSvg.vue   |   28 +
 src/views/operation/CheckBillAuto/api.ts      |   41 +
 src/views/operation/CheckBillAuto/columns.tsx | 1056 +++++++++++++++++
 src/views/operation/CheckBillAuto/detail.vue  |  558 +++++++++
 src/views/operation/CheckBillAuto/index.vue   |   83 +-
 8 files changed, 1880 insertions(+), 39 deletions(-)
 create mode 100644 src/views/operation/CheckBillAuto/SVG/ExcelSvg.vue
 create mode 100644 src/views/operation/CheckBillAuto/SVG/PrintSvg.vue
 create mode 100644 src/views/operation/CheckBillAuto/SVG/SaveSvg.vue
 create mode 100644 src/views/operation/CheckBillAuto/api.ts
 create mode 100644 src/views/operation/CheckBillAuto/columns.tsx
 create mode 100644 src/views/operation/CheckBillAuto/detail.vue

diff --git a/src/views/ContainerManagement/OfflineAudit/index.vue b/src/views/ContainerManagement/OfflineAudit/index.vue
index e4d000aa..aff1002d 100644
--- a/src/views/ContainerManagement/OfflineAudit/index.vue
+++ b/src/views/ContainerManagement/OfflineAudit/index.vue
@@ -5,7 +5,7 @@
         <template #tableTitle>
           <TableButton :show="{ add: false, del: false }">
             <a-popconfirm
-              title="将会审核选中的最后一条整票，是否确认？"
+              title="将会审核选中的整票业务，是否确认？"
               ok-text="是"
               cancel-text="否"
               @confirm="FnAudit(true, 'confirm')"
@@ -40,7 +40,7 @@
         <template #tableTitle>
           <TableButton :show="{ add: false, del: false }">
             <a-popconfirm
-              title="将会审核选中的最后一条整票，是否确认？"
+              title="将会审核通过此业务中选中的集装箱信息，是否确认？"
               ok-text="是"
               cancel-text="否"
               @confirm="FnAudit(false, 'confirm')"
@@ -83,11 +83,14 @@
       clearSelectedRowKeys()
       getSelectRowsBotton()
       const res: API.DataResult = await ApiList(p)
+
       return new Promise((resolve) => {
         resolve({ data: [...res.data], total: res.count })
       })
     },
     beforeFetch: (p) => {
+      TopSelectLast.value = ''
+      reloadBotton()
       let Rdata = formatParams(p)
       let data = JSON.parse(Rdata.queryCondition)
       data.forEach((item) => {
@@ -126,36 +129,42 @@
     TopSelectLast.value = JSON.stringify(e.data)
     reloadBotton()
   }
-  const [registerTableBotton, { reload: reloadBotton, getVxeSelectRows: getSelectRowsBotton }] =
-    useTable({
-      title: '',
-      api: async (p) => {
-        const res: API.DataResult = await ApiDetailList(p)
+  const [
+    registerTableBotton,
+    {
+      reload: reloadBotton,
+      getVxeSelectRows: getSelectRowsBotton,
+      clearSelectedRowKeys: clearSelectedRowKeysBotton,
+    },
+  ] = useTable({
+    title: '',
+    api: async (p) => {
+      const res: API.DataResult = await ApiDetailList(p)
 
-        return new Promise((resolve) => {
-          resolve({ data: [...res.data], total: res.count })
-        })
-      },
-      beforeFetch: (p) => {
-        // p['Pid'] = getVxeSelectRows()[0].id
-        p['Pid'] = JSON.parse(TopSelectLast.value).id
-        return formatParams(p)
-      },
-      columns: detailColumns,
-      rowSelection: { type: 'checkbox' },
-      pagination: true,
-      striped: true,
-      useSearchForm: false,
-      showTableSetting: false,
-      bordered: true,
-      showIndexColumn: true,
-      canResize: true,
-      immediate: false,
-      resizeHeightOffset: 45,
-      tableComponent: 'vxe',
-      id: '0',
-      autoHeight: window.innerHeight - 780.5,
-    })
+      return new Promise((resolve) => {
+        resolve({ data: [...res.data], total: res.count })
+      })
+    },
+    beforeFetch: (p) => {
+      // p['Pid'] = getVxeSelectRows()[0].id
+      p['Pid'] = JSON.parse(TopSelectLast.value)[0].id
+      return formatParams(p)
+    },
+    columns: detailColumns,
+    rowSelection: { type: 'checkbox' },
+    pagination: true,
+    striped: true,
+    useSearchForm: false,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: true,
+    canResize: true,
+    immediate: false,
+    resizeHeightOffset: 45,
+    tableComponent: 'vxe',
+    id: '0',
+    autoHeight: window.innerHeight - 780.5,
+  })
   const Ctype = ref(true)
   const CApiData = ref('')
   function FnAudit(type, state) {
@@ -166,8 +175,8 @@
     }
     try {
       if (type) {
-        if (JSON.parse(TopSelectLast.value)?.id) {
-          ApiData.id = JSON.parse(TopSelectLast.value).id
+        if (JSON.parse(TopSelectLast.value)[0].id) {
+          ApiData.id = JSON.parse(TopSelectLast.value)[0].id
         } else {
           notification.warning({ message: '请选择一条数据', duration: 3 })
           throw new Error('请选择一条数据')
@@ -177,7 +186,7 @@
           getSelectRowsBotton().forEach((item) => {
             ApiData.ids.push(item.id)
           })
-          ApiData.id = JSON.parse(TopSelectLast.value).id
+          ApiData.id = JSON.parse(TopSelectLast.value)[0].id
         } else {
           notification.warning({ message: '请至少选择一条数据', duration: 3 })
           throw new Error('请至少选择一条数据')
@@ -196,10 +205,6 @@
     }
   }
   async function FnExamine(type, state, ApiData) {
-    // if (state == 'confirm' && type) {
-    //   clearSelectedRowKeys()
-    //   setSelectedRowKeys([JSON.parse(TopSelectLast.value)?.id])
-    // }
     let res: any = state == 'confirm' ? await ApiConfirm(ApiData) : await ApiCancel(ApiData)
     if (res.succeeded) {
       notification.success({ message: res.message, duration: 3 })
@@ -266,6 +271,7 @@
         })
         ApiData.jsonDataStr = [...ApiData.jsonDataStr, ...res.data]
       }
+      console.log(index, getDataSource().length - 1, getDataSource())
       if (index == getDataSource().length - 1) {
         if (ApiData.jsonDataStr.length) {
           ApiData.jsonDataStr = JSON.stringify(ApiData.jsonDataStr)
diff --git a/src/views/operation/CheckBillAuto/SVG/ExcelSvg.vue b/src/views/operation/CheckBillAuto/SVG/ExcelSvg.vue
new file mode 100644
index 00000000..f00e18bf
--- /dev/null
+++ b/src/views/operation/CheckBillAuto/SVG/ExcelSvg.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg
+    t="1732698648835"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="15397"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M960 96H166.4c-32 0-64 25.6-64 64V768c0 32 25.6 64 64 64h371.2s-6.4 0-6.4 6.4L409.6 960H326.4c-19.2 0-32 12.8-32 32s12.8 32 32 32h486.4c19.2 0 32-12.8 32-32s-12.8-32-32-32h-115.2l-115.2-115.2-6.4-6.4h384c32 0 64-25.6 64-64V160c0-32-25.6-64-64-64z"
+      fill="#46B267"
+      p-id="15398"
+    ></path>
+    <path
+      d="M460.8 531.2H70.4C32 531.2 0 499.2 0 460.8V70.4C0 32 32 0 70.4 0h390.4c38.4 0 70.4 32 70.4 70.4v390.4c0 38.4-32 70.4-70.4 70.4z"
+      fill="#239148"
+      p-id="15399"
+    ></path>
+    <path
+      d="M678.4 422.4l83.2 70.4c12.8 12.8 38.4 12.8 57.6 0 83.2-70.4 89.6-70.4 89.6-76.8 12.8-19.2 6.4-44.8-12.8-57.6-19.2-12.8-38.4-12.8-57.6 6.4 0 0-6.4 6.4-12.8 6.4V262.4c0-25.6-19.2-44.8-44.8-44.8s-44.8 19.2-44.8 44.8v102.4l-12.8-12.8c-19.2-12.8-44.8-12.8-57.6 6.4-6.4 19.2-6.4 44.8 12.8 64z"
+      fill="#70D68A"
+      p-id="15400"
+    ></path>
+    <path
+      d="M108.8 448s-6.4-6.4 0 0c0-6.4 0-6.4 0 0l96-179.2-96-179.2v-6.4-6.4c0-6.4 0 0 6.4 0h89.6c6.4 0 6.4 0 6.4 6.4l51.2 96 57.6-89.6c0-6.4 0-6.4 6.4-6.4h96v12.8L326.4 262.4l96 172.8V448c0 6.4 0 0-6.4 0H326.4S320 448 320 441.6l-51.2-96-57.6 96c0 6.4-6.4 6.4-6.4 6.4H108.8z"
+      fill="#FFFFFF"
+      p-id="15401"
+    ></path>
+  </svg>
+</template>
diff --git a/src/views/operation/CheckBillAuto/SVG/PrintSvg.vue b/src/views/operation/CheckBillAuto/SVG/PrintSvg.vue
new file mode 100644
index 00000000..5231e684
--- /dev/null
+++ b/src/views/operation/CheckBillAuto/SVG/PrintSvg.vue
@@ -0,0 +1,38 @@
+<template>
+  <svg
+    t="1732698537779"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="15255"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M928 294.4H102.4C44.8 294.4 0 345.6 0 403.2v512c0 57.6 44.8 108.8 102.4 108.8h70.4v-57.6c0-57.6 44.8-108.8 96-108.8h492.8c51.2 0 96 51.2 96 108.8v57.6h70.4c51.2 0 96-51.2 96-108.8v-512c0-57.6-44.8-108.8-96-108.8z"
+      fill="#635DF7"
+      p-id="15256"
+    ></path>
+    <path
+      d="M768 1024H256c-25.6 0-44.8-19.2-44.8-44.8v-25.6c0-25.6 19.2-44.8 44.8-44.8h512c25.6 0 44.8 19.2 44.8 44.8v25.6c0 25.6-19.2 44.8-44.8 44.8z"
+      fill="#635DF7"
+      p-id="15257"
+    ></path>
+    <path
+      d="M800 633.6H230.4c-51.2 0-96-44.8-96-96V96C134.4 44.8 172.8 0 230.4 0h569.6c51.2 0 96 44.8 96 96v435.2c0 57.6-44.8 102.4-96 102.4z"
+      fill="#AFBAF9"
+      p-id="15258"
+    ></path>
+    <path
+      d="M883.2 768m-51.2 0a51.2 51.2 0 1 0 102.4 0 51.2 51.2 0 1 0-102.4 0Z"
+      fill="#FFFFFF"
+      p-id="15259"
+    ></path>
+    <path
+      d="M736 243.2H294.4c-19.2 0-32-12.8-32-32v-32c0-19.2 12.8-32 32-32h441.6c19.2 0 32 12.8 32 32v32c0 12.8-12.8 32-32 32zM736 467.2H294.4c-19.2 0-32-12.8-32-32v-32c0-19.2 12.8-32 32-32h441.6c19.2 0 32 12.8 32 32v32c0 19.2-12.8 32-32 32z"
+      fill="#FFFFFF"
+      p-id="15260"
+    ></path>
+  </svg>
+</template>
diff --git a/src/views/operation/CheckBillAuto/SVG/SaveSvg.vue b/src/views/operation/CheckBillAuto/SVG/SaveSvg.vue
new file mode 100644
index 00000000..626c5676
--- /dev/null
+++ b/src/views/operation/CheckBillAuto/SVG/SaveSvg.vue
@@ -0,0 +1,28 @@
+<template>
+  <svg
+    t="1732698213414"
+    class="icon"
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    p-id="14976"
+    width="200"
+    height="200"
+  >
+    <path
+      d="M876.8 1024H147.2C64 1024 0 960 0 883.2V140.8C0 64 64 0 147.2 0h627.2c12.8 0 25.6 6.4 32 12.8l204.8 192c6.4 6.4 12.8 19.2 12.8 32v646.4c0 76.8-64 140.8-147.2 140.8z"
+      fill="#FFB636"
+      p-id="14977"
+    ></path>
+    <path
+      d="M633.6 441.6H358.4c-70.4 0-128-57.6-128-121.6V0h531.2v320c0 64-57.6 121.6-128 121.6z"
+      fill="#FF7C0E"
+      p-id="14978"
+    ></path>
+    <path
+      d="M614.4 352H460.8c-32 0-57.6-25.6-57.6-51.2s25.6-51.2 57.6-51.2h153.6c32 0 57.6 25.6 57.6 51.2s-25.6 51.2-57.6 51.2z"
+      fill="#FFFFFF"
+      p-id="14979"
+    ></path>
+  </svg>
+</template>
diff --git a/src/views/operation/CheckBillAuto/api.ts b/src/views/operation/CheckBillAuto/api.ts
new file mode 100644
index 00000000..ca3889d7
--- /dev/null
+++ b/src/views/operation/CheckBillAuto/api.ts
@@ -0,0 +1,41 @@
+import { request } from '/@/utils/request'
+import { DataResult, PageRequest } from '/@/api/model/baseModel'
+enum Api {
+  list = '/checkApi/CheckBillAuto/GetCheckBillAutoList',
+  edit = '/checkApi/CheckBillAuto/EditCheckBillAutoInfo',
+  info = '/checkApi/CheckBillAuto/GetCheckBillAutoInfo',
+  Del = '/checkApi/CheckBillAuto/BatchDelCheckBillAuto',
+}
+// 列表 (Auth)
+export function ApiList(data: PageRequest) {
+  return request<DataResult>({
+    url: Api.list,
+    method: 'post',
+    data,
+  })
+}
+// 编辑 (Auth)
+export function ApiEdit(data: PageRequest) {
+  return request<DataResult>({
+    url: Api.edit,
+    method: 'post',
+    data,
+  })
+}
+// 详情 (Auth)
+export function ApiInfo(query) {
+  return request<DataResult>({
+    url: Api.info,
+    method: 'get',
+    params: query,
+  })
+}
+
+// 批量删除 (Auth)
+export function ApiDel(data: PageRequest) {
+  return request<DataResult>({
+    url: Api.Del,
+    method: 'post',
+    data,
+  })
+}
diff --git a/src/views/operation/CheckBillAuto/columns.tsx b/src/views/operation/CheckBillAuto/columns.tsx
new file mode 100644
index 00000000..a019aee2
--- /dev/null
+++ b/src/views/operation/CheckBillAuto/columns.tsx
@@ -0,0 +1,1056 @@
+import { BasicColumn, FormSchema } from '/@/components/Table'
+import { GetClientListByCode } from '/@/api/common'
+export const columns: BasicColumn[] = [
+  {
+    title: '自动对账编号',
+    dataIndex: 'autoBillNo',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '对账单名称',
+    dataIndex: 'billName',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '对账日期',
+    dataIndex: 'checkDate',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '业务类型',
+    dataIndex: 'businessType',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '对账方式',
+    dataIndex: 'checkType',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '起始时间',
+    dataIndex: 'startTime',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '结束时间',
+    dataIndex: 'endTime',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '收付类型',
+    dataIndex: 'billType',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '对账客户',
+    dataIndex: 'customerName',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '费用范围',
+    dataIndex: 'feeScope',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '结算人',
+    dataIndex: 'settlerName',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '结算日期',
+    dataIndex: 'settlementTime',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '账单编号',
+    dataIndex: 'billNo',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '对账人',
+    dataIndex: 'checkUserName',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+  {
+    title: '备注',
+    dataIndex: 'note',
+    sorter: true,
+    width: 150,
+    align: 'left',
+  },
+]
+// 搜索
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'autoBillNo',
+    label: '自动对账编号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'billName',
+    label: '对账单名称',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'checkDate',
+    label: '对账日期',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'businessType',
+    label: '业务类型',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'checkType',
+    label: '对账方式',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'startTime',
+    label: '起始时间',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'endTime',
+    label: '结束时间',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'billType',
+    label: '收付类型',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'customerName',
+    label: '对账客户',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'feeScope',
+    label: '费用范围',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'settlerName',
+    label: '结算人',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'settlementTime',
+    label: '结算日期',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'billNo',
+    label: '账单编号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'checkUserName',
+    label: '对账人',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'billName',
+    label: '对账单名称',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+]
+export const formSchema: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    defaultValue: '',
+    show: false,
+  },
+  {
+    label: '基础信息',
+    field: '基础信息',
+    component: 'Divider',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'carrierId',
+    label: '',
+    component: 'Input',
+    colProps: { span: 4 },
+    show: false,
+  },
+  {
+    field: 'carrierName',
+    label: '船公司名称',
+    component: 'Input',
+    colProps: { span: 4 },
+    show: false,
+  },
+  {
+    label: '船公司',
+    field: 'carrierCode',
+    component: 'ApiSelect',
+    required: false,
+    defaultValue: null,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: ({ formModel }) => {
+      return {
+        api: GetCarrierSelectList,
+        labelField: 'pinYinCode',
+        showName: 'ediCode',
+        valueField: 'ediCode',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            console.log(e, obj)
+            formModel.carrierId = obj.id
+            formModel.carrierName = obj.cnShortName
+          }
+          if (!e && !obj) {
+            formModel.carrierId = ''
+            formModel.carrierName = ''
+          }
+        },
+      }
+    },
+  },
+  {
+    field: 'ediName',
+    label: 'EDI类型名称',
+    component: 'Input',
+    colProps: { span: 4 },
+    show: false,
+  },
+  {
+    field: 'ediTypeCode',
+    label: 'EDI类型代码',
+    component: 'Select',
+    colProps: { span: 4 },
+    required: true,
+    componentProps: ({ formModel }) => {
+      if (ediTypeDict.value.length == 0) {
+        getDictOption('edi_type').then((res) => {
+          ediTypeDict.value = res
+        })
+      }
+      return {
+        options: ediTypeDict.value,
+        allowClear: true,
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onChange: (e, obj) => {
+          if (obj) {
+            formModel.ediTypeCode = obj.value
+            formModel.ediName = obj.label
+          }
+        },
+      }
+    },
+  },
+
+  {
+    field: 'serverIp',
+    label: '服务器IP',
+    component: 'Input',
+    colProps: { span: 4 },
+    required: true,
+  },
+  {
+    field: 'folderName',
+    label: '文件夹',
+    component: 'Input',
+    colProps: { span: 4 },
+    required: true,
+  },
+  {
+    field: 'userName',
+    label: '用户名',
+    component: 'Input',
+    colProps: { span: 4 },
+    required: true,
+  },
+  {
+    field: 'password',
+    label: '密码',
+    component: 'Input',
+    colProps: { span: 4 },
+    required: true,
+  },
+  {
+    field: 'sendType',
+    label: '发送类型',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'ftpModeActive',
+    label: 'FTP主动模式',
+    component: 'RadioButtonGroup',
+    defaultValue: true,
+    colProps: { span: 4 },
+    componentProps: {
+      options: [
+        { label: '是', value: true },
+        { label: '否', value: false },
+      ],
+    },
+  },
+  {
+    label: '发送方',
+    field: '发送方',
+    component: 'Divider',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'sendName',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendCode',
+    label: '代码',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendAttn',
+    label: '联系人',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendTel',
+    label: '电话',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendEmail',
+    label: '邮箱',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendCompanyCode',
+    label: '公司代码',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendSubCompanyCode',
+    label: '部门代码',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'aliasSendCode',
+    label: '别名代码',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'sendShipperCode',
+    label: '发货方代码',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    label: '接收方',
+    field: '接收方',
+    component: 'Divider',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'receiveCode',
+    label: '代码',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'receiveEmail',
+    label: '邮箱',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'receiveSiEmail',
+    label: 'SI邮箱',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'receiveOp',
+    label: '操作',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'receiveSale',
+    label: '销售',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'receiveDept',
+    label: '部门',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    label: '收发通',
+    field: '收发通',
+    component: 'Divider',
+    colProps: { lg: 24, md: 24 },
+  },
+  {
+    field: 'shipperTel',
+    label: '发件人电话',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'consigneeTel',
+    label: '收货人电话',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'notifypartyTel',
+    label: '通知人电话',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+
+  // {
+  //   field: 'status',
+  //   label: '是否可用',
+  //   component: 'RadioButtonGroup',
+  //   defaultValue: 0,
+  //   colProps: { span: 4 },
+  //   componentProps: {
+  //     options: [
+  //       { label: '禁用', value: 1 },
+  //       { label: '启用', value: 0 },
+  //     ],
+  //   },
+  // },
+]
+//左侧列表
+export const columnsL: BasicColumn[] = [
+  // { title: '对账Id', dataIndex: 'checkId', align: 'left' },
+  // { title: '业务Id', dataIndex: 'businessId', align: 'left' },
+  // { title: '业务类型', dataIndex: 'businessType', align: 'left' },
+  { title: '业务类型', dataIndex: 'businessTypeName', align: 'left' },
+  { title: '委托编号', dataIndex: 'customerNo', align: 'left' },
+  // { title: '委托单位Id', dataIndex: 'customerId', align: 'left' },
+  { title: '委托单位', dataIndex: 'customerName', align: 'left' },
+  { title: '船名', dataIndex: 'vessel', align: 'left' },
+  // { title: '船名Id', dataIndex: 'vesselId', align: 'left' },
+  { title: '航次', dataIndex: 'voyno', align: 'left' },
+  { title: '开船日期', dataIndex: 'etd', align: 'left' },
+  { title: '卸货港', dataIndex: 'dischargePort', align: 'left' },
+  { title: '集装箱', dataIndex: 'cntrTotal', align: 'left' },
+  { title: '财务日期', dataIndex: 'accountDate', align: 'left' },
+  { title: '报关单号', dataIndex: 'customNo', align: 'left' },
+  { title: '销售人', dataIndex: 'saleName', align: 'left' },
+  { title: '操作人员', dataIndex: 'operatorName', align: 'left' },
+  { title: '订舱编号', dataIndex: 'orderNo', align: 'left' },
+  { title: '主提单号', dataIndex: 'mblno', align: 'left' },
+  { title: '分提单号', dataIndex: 'hblno', align: 'left' },
+  { title: '约号', dataIndex: 'serviceContractNo', align: 'left' },
+  { title: 'RMB应收', dataIndex: 'rmbdr', align: 'left' },
+  { title: 'RMB应付', dataIndex: 'rmbcr', align: 'left' },
+  { title: 'RMB未收', dataIndex: 'balrmbdr', align: 'left' },
+  { title: 'RMB未付', dataIndex: 'balrmbcr', align: 'left' },
+  { title: 'USD应收', dataIndex: 'usddr', align: 'left' },
+  { title: 'USD应付', dataIndex: 'usdcr', align: 'left' },
+  { title: 'USD未收', dataIndex: 'balusddr', align: 'left' },
+  { title: 'USD未付', dataIndex: 'balusdcr', align: 'left' },
+  { title: '其他应收', dataIndex: 'otherDR', align: 'left' },
+  { title: '其他应付', dataIndex: 'otherCR', align: 'left' },
+  { title: '其他未收', dataIndex: 'balOtherDR', align: 'left' },
+  { title: '其他未付', dataIndex: 'balOtherCR', align: 'left' },
+  { title: 'TTL应收', dataIndex: 'ttldr', align: 'left' },
+  { title: 'TTL应付', dataIndex: 'ttlcr', align: 'left' },
+  { title: 'TTL未收', dataIndex: 'balttldr', align: 'left' },
+  { title: 'TTL未付', dataIndex: 'balttlcr', align: 'left' },
+  { title: '开票RMB应收', dataIndex: 'orderInvoiceRMBDR', align: 'left' },
+  { title: '开票USD应收', dataIndex: 'orderInvoiceUSDDR', align: 'left' },
+  { title: '开票RMB应付', dataIndex: 'orderInvoiceRMBCR', align: 'left' },
+  { title: '开票USD应付', dataIndex: 'orderInvoiceUSDCR', align: 'left' },
+  // { title: '主提单号', dataIndex: 'testTextarea1', align: 'left' },
+  // { title: '船名', dataIndex: 'testTextarea2', align: 'left' },
+  // { title: '航次', dataIndex: 'testTextarea3', align: 'left' },
+  // { title: '开船日期', dataIndex: 'testTextarea4', align: 'left' },
+  // { title: '操作', dataIndex: 'testTextarea5', align: 'left' },
+  // { title: '费用状态', dataIndex: 'testTextarea6', align: 'left' },
+  // { title: '应收RMB', dataIndex: 'testTextarea7', align: 'left' },
+  // { title: '未收RMB', dataIndex: 'testTextarea8', align: 'left' },
+  // { title: '应收USD', dataIndex: 'testTextarea9', align: 'left' },
+  // { title: 'USD未收', dataIndex: 'testTextarea10', align: 'left' },
+  // { title: '应收合计', dataIndex: 'testTextarea11', align: 'left' },
+  // { title: '未收合计', dataIndex: 'testTextarea12', align: 'left' },
+  // { title: '应付合计', dataIndex: 'testTextarea13', align: 'left' },
+  // { title: 'RMB发票申请', dataIndex: 'testTextarea14', align: 'left' },
+  // { title: 'USD发票申请', dataIndex: 'testTextarea14', align: 'left' },
+  // { title: '卸货港', dataIndex: 'testTextarea14', align: 'left' },
+]
+let businessTypeData = [
+  { label: '全部', value: 0 },
+  { label: '海运出口', value: 1 },
+]
+let checkTypeData = [
+  { label: 'Excel导入', value: 1 },
+  { label: '区间统计', value: 2 },
+]
+let billTypeData = [
+  { label: '全部', value: 0 },
+  { label: '应收', value: 1 },
+  { label: '应付', value: 2 },
+]
+// 表单
+export const schemas: FormSchema[] = [
+  {
+    label: '',
+    field: 'id',
+    component: 'Input',
+    defaultValue: '',
+    show: false,
+  },
+  {
+    field: 'autoBillNo',
+    label: '自动对账编号',
+    component: 'Input',
+    dynamicDisabled: true,
+    colProps: { span: 4 },
+  },
+  {
+    label: '结算人名称',
+    field: 'settlerName',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '结算人',
+    field: 'settlerId',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 4 },
+    componentProps: (a) => {
+      return {
+        api: GetClientListByCode,
+        params: { code: '' },
+        labelField: 'shortName',
+        valueField: 'id',
+        showName: 'description',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            a.formModel.settlerName = obj.shortName
+          }
+        },
+      }
+    },
+  },
+  {
+    field: 'startTime',
+    label: '起始时间',
+    component: 'DatePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      showTime: true,
+      allowClear: true,
+    },
+  },
+  {
+    field: 'endTime',
+    label: '结束时间',
+    component: 'DatePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      showTime: true,
+      allowClear: true,
+    },
+  },
+  {
+    field: 'checkUserName',
+    label: '对账人',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  {
+    field: 'checkDate',
+    label: '对账日期',
+    component: 'DatePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      showTime: true,
+      allowClear: true,
+    },
+  },
+  {
+    field: 'businessType',
+    label: '业务类型',
+    component: 'Select',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      options: businessTypeData,
+      allowClear: true,
+      showSearch: true,
+      filterOption: (input: string, option: any) => {
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+    },
+  },
+  {
+    field: 'feeScope',
+    label: '费用范围',
+    component: 'Select',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      options: billTypeData,
+      allowClear: true,
+      showSearch: true,
+      filterOption: (input: string, option: any) => {
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+    },
+  },
+  {
+    field: 'checkType',
+    label: '对账方式',
+    component: 'Select',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      options: checkTypeData,
+      allowClear: true,
+      showSearch: true,
+      filterOption: (input: string, option: any) => {
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+    },
+  },
+  {
+    field: 'note',
+    label: '备注',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+  // -------------
+  {
+    field: 'billName',
+    label: '对账单名称',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+
+  {
+    field: 'billType',
+    label: '收付类型',
+    component: 'Select',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      options: billTypeData,
+      allowClear: true,
+      showSearch: true,
+      filterOption: (input: string, option: any) => {
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+    },
+  },
+  {
+    label: '对账客户Nmae',
+    field: 'customerName',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '对账客户',
+    field: 'customerId',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 4 },
+    componentProps: (a) => {
+      return {
+        api: GetClientListByCode,
+        params: { code: '' },
+        labelField: 'shortName',
+        valueField: 'id',
+        showName: 'description',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            a.formModel.customerName = obj.shortName
+          }
+        },
+      }
+    },
+  },
+
+  {
+    field: 'settlementTime',
+    label: '结算日期',
+    component: 'DatePicker',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: {
+      showTime: true,
+      allowClear: true,
+    },
+  },
+  {
+    field: 'billNo',
+    label: '账单编号',
+    component: 'Input',
+    colProps: { span: 4 },
+  },
+]
+// 表单
+export const Editschemas: FormSchema[] = [
+  {
+    field: 'billName',
+    label: '对账单名称',
+    component: 'DEdit',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'checkDate',
+    label: '对账日期',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        showTime: true,
+        allowClear: true,
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'businessType',
+    label: '业务类型',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        options: businessTypeData,
+        allowClear: true,
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'checkType',
+    label: '对账方式',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        options: checkTypeData,
+        allowClear: true,
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'startTime',
+    label: '起始时间',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        showTime: true,
+        allowClear: true,
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'endTime',
+    label: '结束时间',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        showTime: true,
+        allowClear: true,
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'billType',
+    label: '收付类型',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        options: billTypeData,
+        allowClear: true,
+        showSearch: true,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    label: '对账客户Nmae',
+    field: 'customerName',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '对账客户',
+    field: 'customerId',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        api: GetClientListByCode,
+        params: { code: '' },
+        labelField: 'shortName',
+        valueField: 'id',
+        showName: 'description',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            e.formModel.customerName = obj.shortName
+          }
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'feeScope',
+    label: '费用范围',
+    component: 'DEdit',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    label: '结算人名称',
+    field: 'settlerName',
+    component: 'Input',
+    show: false,
+  },
+  {
+    label: '结算人',
+    field: 'settlerId',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    // defaultValue: '',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        api: GetClientListByCode,
+        params: { code: '' },
+        labelField: 'shortName',
+        valueField: 'id',
+        showName: 'description',
+        resultField: 'data',
+        immediate: false,
+        onChange: (e, obj) => {
+          if (e && obj) {
+            a.formModel.settlerName = obj.shortName
+          }
+        },
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'settlementTime',
+    label: '结算日期',
+    component: 'DEdit',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        showTime: true,
+        allowClear: true,
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'billNo',
+    label: '账单编号',
+    component: 'DEdit',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'checkUserName',
+    label: '对账人',
+    component: 'DEdit',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+  {
+    field: 'note',
+    label: '备注',
+    component: 'DEdit',
+    colProps: { span: 4 },
+    componentProps: (e) => {
+      return {
+        onEdit: () => {
+          const { formActionType } = e
+          formActionType ? formActionType.linkageForm(e) : null
+        },
+      }
+    },
+  },
+]
diff --git a/src/views/operation/CheckBillAuto/detail.vue b/src/views/operation/CheckBillAuto/detail.vue
new file mode 100644
index 00000000..24b0f2d8
--- /dev/null
+++ b/src/views/operation/CheckBillAuto/detail.vue
@@ -0,0 +1,558 @@
+<template>
+  <div style="height: 100%">
+    <div class="infoclientBox">
+      <div class="buttonBox">
+        <div class="TopUnit" v-if="InfoData.autoBillNo">
+          自动对账编号:{{ InfoData.autoBillNo }}
+        </div>
+        <div class="TopUnit" v-if="InfoData.billNo"> 对账单编号:{{ InfoData.billNo }} </div>
+        <div class="TopUnit" :class="grade == 'A' ? 'blue' : 'Purple'">
+          <a-select class="Select" :bordered="false" v-model:value="grade">
+            <a-select-option value="A">根据导入对账</a-select-option>
+            <a-select-option value="B">根据区间对账</a-select-option>
+          </a-select>
+        </div>
+        <div class="TopUnit"> <SaveSvg class="svg" /> </div>
+        <div class="TopUnit">
+          <PrintSvg class="svg" />
+        </div>
+        <div class="TopUnit">
+          <ExcelSvg class="svg" />
+        </div>
+        <div class="TopUnit">
+          <span class="iconfont icon-gengxinheji-danse"></span>
+          <span>重新对账</span>
+        </div>
+        <div class="TopUnit">
+          <span class="iconfont icon-fendan-danse"></span>
+          <span>拆分</span>
+        </div>
+        <div class="TopUnit">
+          <span class="iconfont icon-fapiao-danse"></span>
+          <a-select class="Select normal" :bordered="false" v-model:value="grade">
+            <a-select-option value="A">生成对账单</a-select-option>
+            <a-select-option value="B">取消生成</a-select-option>
+          </a-select>
+        </div>
+        <div class="TopUnit">
+          <span class="iconfont icon-feiyongmingxi-danse"></span>
+          <span>生成付费申请</span>
+        </div>
+      </div>
+      <div class="TopForm">
+        <BasicForm @register="registerForm" @linkageForm="linkageForm" />
+      </div>
+    </div>
+
+    <!-- <div class="CsMain p-4" id="detail">
+      <a-row class="CsHeader" :gutter="5">
+        <a-col :span="24" class="headerForm">
+          <a-spin :spinning="spinningT">
+            <BasicForm @register="registerForm" @linkageForm="linkageForm" class="ds-form-detail" />
+          </a-spin>
+        </a-col>
+      </a-row>
+      <a-row class="CsBottom">
+        <a-col :span="16" class="bottomTableL">
+          <a-spin :spinning="spinningL">
+            <BasicTable
+              class="ds-table-detail"
+              @register="registerTable"
+              @selection-change="selectionChange"
+            >
+              <template #tableTitle>
+                <p class="tableTitle">账单明细</p>
+                <a-button v-repeat type="link" @click="addDetail">
+                  <span class="iconfont icon-new_document"></span>
+                  添加
+                </a-button>
+                <a-popconfirm
+                  title="确定删除选中数据？"
+                  ok-text="是"
+                  cancel-text="否"
+                  @confirm="DelDetailL"
+                >
+                  <a-button v-repeat type="link">
+                    <span class="iconfont icon-shanchu21"></span>
+                    删除
+                  </a-button>
+                </a-popconfirm>
+                <a-button v-repeat type="link" @click="OpenFileModel">
+                  <span class="iconfont icon-fujian"></span>
+                  附件
+                </a-button>
+              </template>
+            </BasicTable>
+            <div class="totalBox">
+              <div class="unitBox">
+                <a-table
+                  class="ds-table"
+                  :columns="calcColumns"
+                  :data-source="[Ldata]"
+                  :pagination="false"
+                ></a-table>
+              </div>
+            </div>
+          </a-spin>
+        </a-col>
+        <a-col :span="8" class="bottomTableR">
+          <a-spin :spinning="spinningR">
+            <h3>右侧</h3>
+          </a-spin>
+        </a-col>
+      </a-row>
+    </div> -->
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { Divider } from 'ant-design-vue'
+  import { useRoute } from 'vue-router'
+  const route = useRoute()
+  import { useMessage } from '/@/hooks/web/useMessage'
+  const { notification } = useMessage()
+  import { BasicForm, useForm } from '/@/components/Form/index'
+  import { BasicTable, useTable } from '/@/components/Table'
+  import { BasicModal, useModal } from '/@/components/Modal'
+  import { useGo } from '/@/hooks/web/usePage'
+  const go = useGo()
+  import { columnsL, Editschemas, schemas } from './columns'
+  import SaveSvg from './SVG/SaveSvg.vue'
+  import PrintSvg from './SVG/PrintSvg.vue'
+  import ExcelSvg from './SVG/ExcelSvg.vue'
+
+  import {
+    EditCheckBill,
+    GetCheckBillBusinessList,
+    GetCheckBillFeeRecordsList,
+    BatchDelCheckBillDetail,
+    BatchDelCheckBillFeeRecords,
+    CheckBillLocking,
+    CheckBillUnLocking,
+    AddCheckBillDetail,
+    AddCheckBillFeeRecords,
+  } from '/@/views/operation/CustomerReconciliation/api.js'
+  import { ApiInfo } from './api'
+  const id = ref(route.query.id)
+  const spinningL = ref(false)
+  const spinningT = ref(false)
+  const billNo = ref()
+  const isLocking = ref(false)
+  const calcData = ref([])
+  // 新增弹窗
+  const [registerAdd, { openModal: openModalAdd }] = useModal()
+  setTimeout(() => {
+    init()
+  }, 100)
+
+  const Ldata = ref({})
+  const grade = ref('A')
+  const InfoData = ref<any>({})
+  function init() {
+    if (id.value) {
+      spinningL.value = true
+      spinningT.value = true
+      // businessId
+      let ApiData = {
+        queryCondition: `[{"FieldName":"checkId","FieldValue":"${id.value}","ConditionalType":1}]`,
+        pageCondition: {
+          sortConditions: [],
+        },
+      }
+
+      ApiInfo({ id: id.value }).then((res) => {
+        setFieldsValue(res.data)
+        InfoData.value = res.data
+        spinningT.value = false
+        billNo.value = res.data.billNo
+        isLocking.value = res.data.isLocking
+      })
+      GetCheckBillBusinessList(ApiData).then((res) => {
+        setTableData(res.data.list)
+        Ldata.value = res.data.dataTotal
+        spinningL.value = false
+      })
+      // GetCheckBillFeeRecordsList(ApiData).then((res) => {
+      //   setTableDataR(res.data)
+      // })
+    } else {
+      addDetail()
+    }
+  }
+  function RauditClass() {
+    let RData = ''
+    switch (isLocking.value) {
+      case true:
+        RData = 'active'
+        break
+      default:
+        RData = 'rejected'
+        break
+    }
+    return RData
+  }
+
+  // 头部表格
+  const [registerForm, { getFieldsValue, validate, setFieldsValue, updateSchema }] = useForm({
+    labelWidth: 120,
+    schemas: id.value ? Editschemas : schemas,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 5,
+    },
+    // 是否禁用表单所有控件
+    disabled: false,
+  })
+  const linkageForm = (e) => {
+    schemas.forEach((item) => {
+      if (item.field == e.schema.field) {
+        updateSchema(item)
+      }
+    })
+  }
+  // 左侧表格
+  const [registerTable, { getSelectRows, setTableData }] = useTable({
+    title: '',
+    rowSelection: { type: 'checkbox' },
+    columns: columnsL,
+    pagination: true,
+    striped: true,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: true,
+    immediate: false,
+    canResize: true,
+    resizeHeightOffset: 105,
+  })
+  const spinningR = ref(false)
+  // 左侧表格点击查询费用明细
+  let LeftSelectData = ref<any>()
+  function selectionChange(e) {
+    LeftSelectData.value = e
+    if (e.rows.length) {
+      spinningR.value = true
+      let ApiData = {
+        queryCondition: `[{"FieldName":"businessId","FieldValue":"${
+          e.rows[e.rows.length - 1].businessId
+        }","ConditionalType":1},{"FieldName":"checkId","FieldValue":"${
+          e.rows[e.rows.length - 1].checkId
+        }","ConditionalType":1}]`,
+        pageCondition: {
+          sortConditions: [],
+        },
+      }
+      GetCheckBillFeeRecordsList(ApiData).then((res) => {
+        spinningR.value = false
+      })
+    } else {
+    }
+  }
+  // 合计列
+  const calcColumns = [
+    {
+      title: '应收RMB',
+      dataIndex: 'rmbdr',
+    },
+    // {
+    //   title: '应付RMB',
+    //   dataIndex: 'rmbcr',
+    // },
+    {
+      title: '应收USD',
+      dataIndex: 'usddr',
+    },
+    // {
+    //   title: '应付USD',
+    //   dataIndex: 'usdcr',
+    // },
+    {
+      title: '未收RMB',
+      dataIndex: 'balrmbdr',
+    },
+    // {
+    //   title: '未付RMB',
+    //   dataIndex: 'balrmbcr',
+    // },
+    {
+      title: '未收USD',
+      dataIndex: 'balusddr',
+    },
+    // {
+    //   title: '未付USD',
+    //   dataIndex: 'balusdcr',
+    // },
+    // {
+    //   title: '其他应收',
+    //   dataIndex: 'otherDR',
+    // },
+    // {
+    //   title: '其他应付',
+    //   dataIndex: 'otherCR',
+    // },
+    // {
+    //   title: '其他未收',
+    //   dataIndex: 'balOtherDR',
+    // },
+    // {
+    //   title: '其他未付',
+    //   dataIndex: 'balOtherCR',
+    // },
+    // {
+    //   title: 'TTL应收',
+    //   dataIndex: 'ttldr',
+    // },
+    // {
+    //   title: 'TTL应付',
+    //   dataIndex: 'ttlcr',
+    // },
+    // {
+    //   title: 'TTL未收',
+    //   dataIndex: 'balttldr',
+    // },
+    // {
+    //   title: 'TTL未付',
+    //   dataIndex: 'balttlcr',
+    // },
+    {
+      title: '开票RMB应收',
+      dataIndex: 'orderInvoiceRMBDR',
+    },
+    {
+      title: '开票USD应收',
+      dataIndex: 'orderInvoiceUSDDR',
+    },
+    {
+      title: '订单金额RMB应付',
+      dataIndex: 'orderAmountRMBCR',
+    },
+    {
+      title: '订单金额USD应付',
+      dataIndex: 'orderAmountUSDCR',
+    },
+  ]
+
+  // 点击新增 打开弹窗
+  function addDetail() {
+    openModalAdd(true, {
+      customerId: getFieldsValue().customerId,
+      customerName: getFieldsValue().customerName,
+    })
+  }
+  // 新增 编辑
+  function GoDetailed() {
+    go(`/CustomerReconciliationDetails`)
+  }
+  // 点击删除详情
+  function DelDetailL() {
+    // businessId
+    // checkId
+    if (getSelectRows().length) {
+      let Apidata: any = {
+        id: id.value,
+        ids: [],
+      }
+      getSelectRows().forEach((item) => {
+        Apidata.ids.push(item.businessId)
+      })
+      BatchDelCheckBillDetail(Apidata).then((res) => {
+        if (res.succeeded) {
+          notification.success({ message: '删除成功', duration: 3 })
+          init()
+        }
+      })
+    } else {
+      notification.warning({ message: '请至少选择一条数据', duration: 3 })
+    }
+  }
+
+  // 新增弹窗
+  const [registerEdit, { openModal: openModalEdit }] = useModal()
+  // 双击行 打开弹窗
+  function RowClick() {
+    openModalEdit(true)
+  }
+
+  // 附件弹窗
+  const [registerFile, { openModal: openModalFile }] = useModal()
+  // 附件弹窗
+  const [registerFileModel, { openModal: openModalFileModel }] = useModal()
+  function OpenFileModel() {
+    openModalFileModel(true)
+  }
+  // 点击上传附件 打开弹窗
+  function OpenFileModal() {
+    openModalFile(true)
+  }
+
+  const activeKey = ref('1')
+  // 锁定
+  function Lock() {
+    let ApiData = {
+      ids: [id.value],
+    }
+    CheckBillLocking(ApiData).then((res) => {
+      if (res.succeeded) {
+        notification.success({ message: '锁定成功', duration: 3 })
+      }
+    })
+  }
+  // 解除锁定
+  function UnLock() {
+    let ApiData = {
+      ids: [id.value],
+    }
+    CheckBillUnLocking(ApiData).then((res) => {
+      if (res.succeeded) {
+        notification.success({ message: '解除锁定成功', duration: 3 })
+      }
+    })
+  }
+  // 保存
+  async function Save() {
+    const values = await validate()
+    let ApiData = {
+      ...values,
+      businessIds: [],
+    }
+    let res = await EditCheckBill(ApiData)
+    if (res.succeeded) {
+      notification.success({ message: res.message, duration: 3 })
+    }
+    id.value = res.data
+  }
+  function waitFor() {
+    notification.warning({ message: '暂未开发', duration: 3 })
+  }
+  const RefInfo = ref()
+  // 添加对账明细
+  async function AddDetailL(e) {
+    if (!id.value) {
+      setFieldsValue({
+        ...getFieldsValue(),
+        customerId: e.customerId,
+        customerName: e.customerName,
+      })
+      await Save()
+    }
+    e.id = id.value
+    AddCheckBillDetail(e).then(async (res) => {
+      if (res.succeeded) {
+        notification.success({ message: '添加成功', duration: 3 })
+        init()
+        RefInfo.value.handleSubmit()
+        RefInfo.value.closeModal()
+      }
+    })
+  }
+  // 添加对账费用明细
+  async function AddDetailR(e) {
+    console.log(e)
+
+    if (!id.value) {
+      setFieldsValue({
+        ...getFieldsValue(),
+        customerId: e.customerId,
+        customerName: e.customerName,
+      })
+      await Save()
+    }
+    console.log(
+      getSelectRows(),
+      getSelectRows().length,
+      // getSelectRows()[getSelectRows().length - 1].checkId,
+    )
+
+    // e.id = getSelectRows()[getSelectRows().length - 1].checkId
+    e.id = id.value
+    AddCheckBillFeeRecords(e).then((res) => {
+      if (res.succeeded) {
+        notification.success({ message: '添加成功', duration: 3 })
+        init()
+        RefInfo.value.closeModal()
+      }
+    })
+  }
+  const dsPrint = ref()
+  // 打印费用
+  async function printFee() {
+    dsPrint.value.init()
+  }
+</script>
+<style lang="less" scoped>
+  // ----------------------
+  .infoclientBox {
+    // height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #f0f2f5;
+    padding: 8px 20px;
+    .buttonBox {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      height: 32px;
+      .TopUnit {
+        padding: 5px;
+        margin-right: 8px;
+        border-radius: 4px;
+        background: rgba(255, 255, 255, 1);
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 16px;
+        letter-spacing: 0px;
+        color: rgba(18, 24, 38, 1);
+        text-align: left;
+        vertical-align: top;
+        &.blue {
+          background: #4ba1a5;
+        }
+        &.Purple {
+          background: #6a64cc;
+        }
+        .svg {
+          height: 16px;
+          width: 16px;
+        }
+        .iconfont {
+          color: rgba(255, 102, 0, 1);
+        }
+        :deep(.Select) {
+          color: rgba(255, 255, 255, 1);
+          .ant-select-selector {
+            padding: 0;
+            height: 16px;
+            font-size: 12px;
+            font-weight: 400;
+            .ant-select-selection-search {
+              line-height: 16px;
+              .ant-select-selection-search-input {
+                height: auto;
+              }
+            }
+            .ant-select-selection-item {
+              line-height: 16px;
+            }
+          }
+          .ant-select-arrow {
+            color: rgba(255, 255, 255, 1);
+            top: 10px;
+            right: 5px;
+          }
+          &.normal {
+            color: #000;
+            .ant-select-arrow {
+              color: #000;
+            }
+          }
+        }
+      }
+    }
+    .TopForm {
+      padding: 10px 20px;
+      margin-top: 10px;
+      border-radius: 6px;
+      background: rgba(255, 255, 255, 1);
+      border: 1px solid rgba(204, 214, 223, 1);
+    }
+  }
+</style>
diff --git a/src/views/operation/CheckBillAuto/index.vue b/src/views/operation/CheckBillAuto/index.vue
index d45a4d99..e4280cdc 100644
--- a/src/views/operation/CheckBillAuto/index.vue
+++ b/src/views/operation/CheckBillAuto/index.vue
@@ -1,3 +1,84 @@
 <template>
-  <h3>应付自动对账</h3>
+  <div class="p20">
+    <BasicTable class="ds-table" @register="registerTable" @row-dbClick="handleAudit">
+      <template #tableTitle>
+        <TableButton :show="{ add: null, del: null }" @add="handleCreate" @del="handleDel">
+          <!-- <span class="iconfont icon-yiwancheng2" @click="Confirm">确认执行</span> -->
+          <!-- <span class="iconfont icon-weiwancheng" @click="Cancel">取消确认</span> -->
+        </TableButton>
+      </template>
+    </BasicTable>
+  </div>
 </template>
+<script lang="ts" setup name="应付自动对账">
+  import { onMounted } from 'vue'
+  import { BasicTable, useTable } from '/@/components/Table'
+  import { ApiList, ApiDel } from './api'
+  import { columns, searchFormSchema } from './columns'
+  // 引入处理入参方法
+  import { formatParams } from '/@/hooks/web/common'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  const { notification } = useMessage()
+  import { useGo } from '/@/hooks/web/usePage'
+  const go = useGo()
+  const [registerTable, { reload, getForm, getSelectRows }] = useTable({
+    title: '',
+    rowSelection: { type: 'checkbox' },
+    clickToRowSelect: false,
+    api: async (p) => {
+      const res: API.DataResult = await ApiList(p)
+      return new Promise((resolve) => {
+        resolve({ data: [...res.data], total: res.count })
+      })
+    },
+    beforeFetch: (p) => {
+      return formatParams(p, searchFormSchema)
+    },
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    isTreeTable: false,
+    pagination: true,
+    striped: true,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    indexColumnProps: {
+      width: 60,
+    },
+    canResize: true,
+    immediate: true,
+    resizeHeightOffset: 45,
+    tableComponent: 'vxe',
+    id: '0',
+    autoHeight: window.innerHeight - 325.5,
+  })
+  function handleCreate() {
+    go(`/checkBillAutoDetail`)
+  }
+  function handleDel() {
+    const select = getSelectRows()
+    if (select.length === 0) {
+      notification.error({ message: '请选择一条数据', duration: 3 })
+      return false
+    }
+    const removeArr = select.map((item) => {
+      return item.id
+    })
+    ApiDel({ ids: removeArr }).then((res) => {
+      notification.success({ message: res.message, duration: 3 })
+      reload()
+    })
+  }
+  function handleAudit(record: Recordable) {
+    go(`/checkBillAutoDetail?id=${record.id}`)
+  }
+  function handleSuccess() {
+    reload()
+  }
+  onMounted(() => {
+    reload()
+  })
+</script>