diff --git a/src/api/common/index.ts b/src/api/common/index.ts
index 17eff369..0e752d68 100644
--- a/src/api/common/index.ts
+++ b/src/api/common/index.ts
@@ -147,7 +147,7 @@ export function GetFeeCurrencySelectList() {
     method: 'get'
   })
 }
-// 获取币别下拉列表 (Auth)
+// 获取结算单位下拉列表 (Auth)
 export function GetClientListByCode(params) {
   return request<DataResult>({
     url: Api.GetClientListByCode,
diff --git a/src/components/CostEntry/components/feeTable.vue b/src/components/CostEntry/components/feeTable.vue
index b5f46c4a..3540f12c 100644
--- a/src/components/CostEntry/components/feeTable.vue
+++ b/src/components/CostEntry/components/feeTable.vue
@@ -6,6 +6,7 @@
 <template>
   <div class="ds-fee-table">
     <a-table
+      :loading="loading"
       :row-selection="{ selectedRowKeys: state.infoRowKeys, onChange: infoChange }"
       rowKey="id"
       :scroll="{ x: '100%', y: 300 }"
@@ -14,75 +15,21 @@
       :pagination="false"
       :customRow="onRowClick"
     />
+    <!-- 费用申请显示币别合计 -->
+    <div v-if="page == 'apply'">
+      选中金额：<span v-for="(value, key) in currencyList" class="ml10" :key="value">{{ key }}: {{ value }}</span>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { defineEmits, defineProps, ref, reactive, onMounted, defineExpose, watchEffect } from 'vue'
-  import { useMessage } from '/@/hooks/web/useMessage'
-  import { BasicTable, useTable } from '/@/components/Table'
-  // 历史数据表格
-  import { columns, searchFormSchema } from './history'
+  import { ref, reactive, defineExpose, watch } from 'vue'
   // 费用信息表格
   import { feeColumns } from './feeColumns'
+  import { feeStatusList } from '../columns'
   // 根据记录id查询费用
   import { GetList } from '../api'
   // 模版id查询费用
   import { GetFeeTemplateDetailList } from '/@/views/fee/template/api'
-  import { PageDataByBooking } from '/@/views/operation/seaexport/api/bookingLedger.js'
-  import { feeStatusList } from '../columns'
-  const { createMessage } = useMessage()
-  const [registerTable, { reload, getForm, getPaginationRef }] = useTable({
-    api: async (p) => {
-      const res: API.DataResult = await PageDataByBooking(p)
-      console.log(res)
-      return new Promise((resolve) => {
-        resolve({ data: [...res.data], total: res.count })
-      })
-    },
-    beforeFetch: () => {
-      var currentPageInfo: any = getPaginationRef()
-      var data = getForm().getFieldsValue()
-      const postParam: API.PageRequest = {
-        queryCondition: '',
-        pageCondition: {
-          pageIndex: currentPageInfo.current,
-          pageSize: currentPageInfo.pageSize,
-          sortConditions: [],
-        },
-      }
-      let condition: API.ConditionItem[] = []
-      if (!!data.UserName) {
-        condition.push({
-          FieldName: 'UserName',
-          FieldValue: data.UserName,
-          ConditionalType: 1,
-        })
-      }
-      if (!!data.UserCode) {
-        condition.push({
-          FieldName: 'UserCode',
-          FieldValue: data.UserCode,
-          ConditionalType: 1,
-        })
-      }
-      postParam.queryCondition = JSON.stringify(condition)
-      // console.log(postParam);
-      return postParam
-    },
-    columns,
-    formConfig: {
-      labelWidth: 120,
-      schemas: searchFormSchema
-    },
-    isTreeTable: false,
-    pagination: true,
-    striped: true,
-    useSearchForm: true,
-    showTableSetting: false,
-    bordered: true,
-    showIndexColumn: true,
-    canResize: false
-  })
   // 费用信息已选项
   const state = reactive({
     infoRowKeys: []
@@ -90,7 +37,8 @@
   // 选中的数据行
   const list = ref([])
   // 费用表格数据
-  const feeData = ref([])
+  const selectfeeData = ref([])
+  const loading = ref(false)
   // 根据模版id查询费用明细
   const getFeeListByTem = (id) => {
      const postData = {
@@ -103,7 +51,9 @@
         { FieldName: 'TemplateId', FieldValue: id, ConditionalType: 1 }
       ])
     }
+    loading.value = true
     GetFeeTemplateDetailList(postData).then(res => {
+      loading.value = false
       const { data } = res
       data.forEach((item, index) => {
         item['feeStatusText'] = feeStatusList[item.feeStatus]
@@ -127,8 +77,10 @@
         { FieldName: 'FeeType', FieldValue: 1, ConditionalType: 1 }
       ])
     }
+    loading.value = true
     GetList(postData).then(res => {
       const { data } = res
+      loading.value = false
       data.forEach((item, index) => {
         item['feeStatusText'] = feeStatusList[item.feeStatus]
         if (item.createTime) item.createTime = item.createTime.split(' ')[0]
@@ -138,29 +90,44 @@
     }).catch(() => {
     })
   }
+  let currencyList = reactive({})
+  const feeData = ref([])
   // 费用明细选择
   const infoChange = (v) => {
+    console.log(v)
     state.infoRowKeys = v
     list.value = []
+    currencyList = {}
+    selectfeeData.value = []
     const feeCopy = JSON.parse(JSON.stringify(feeData.value))
     v.forEach(item => {
       feeCopy.forEach(row => {
         if (item == row.id) {
-          row.id = ''
-          row.feeStatus = 1
-          row['feeStatusText'] = '录入状态'
-          list.value.push(row)
+          selectfeeData.value.push(row)
+          if (page.value != 'apply') {
+            row.id = ''
+            row.feeStatus = 1
+            row['feeStatusText'] = '录入状态'
+            list.value.push(row)
+          }
+          if (currencyList[row.currency]) {
+            currencyList[row.currency] = currencyList[row.currency] + Number(row.amount) || 0
+          } else {
+            currencyList[row.currency] = row.amount
+          }
         }
       })
     })
   }
+  const page = ref()
   const init = (ids, source) => {
+    page.value = source
     if (ids.length) {
       if (ids[0] == undefined) {
         feeData.value = []
         return
       }
-      if (source == 'history') {
+      if (source == 'history' || source == 'apply') {
         getFeeList(ids[0])
       }
       if (source == 'tem') {
@@ -171,22 +138,54 @@
   const onRowClick = (record, index) => {
     return {
       onClick: () => {
-        // 更新选中状态
-        const newSelectedRowKeys = [...state.infoRowKeys];
-        if (newSelectedRowKeys.includes(record.id)) {
-          newSelectedRowKeys.splice(newSelectedRowKeys.indexOf(record.id), 1);
-        } else {
-          newSelectedRowKeys.push(record.id);
-        }
-        state.infoRowKeys = newSelectedRowKeys
+        setTimeout(() => {
+          // 更新选中状态
+          console.log(state.infoRowKeys)
+          const newSelectedRowKeys = [...state.infoRowKeys];
+          if (newSelectedRowKeys.includes(record.id)) {
+            newSelectedRowKeys.splice(newSelectedRowKeys.indexOf(record.id), 1);
+          } else {
+            newSelectedRowKeys.push(record.id);
+          }
+          list.value = []
+          currencyList = {}
+          const feeCopy = JSON.parse(JSON.stringify(feeData.value))
+          newSelectedRowKeys.forEach(item => {
+            feeCopy.forEach(row => {
+              if (item == row.id) {
+                selectfeeData.value.push(row)
+                if (page.value != 'apply') {
+                  row.id = ''
+                  row.feeStatus = 1
+                  row['feeStatusText'] = '录入状态'
+                  list.value.push(row)
+                }
+                if (currencyList[row.currency]) {
+                  currencyList[row.currency] = currencyList[row.currency] + Number(row.amount) || 0
+                } else {
+                  currencyList[row.currency] = row.amount
+                }
+              }
+            })
+          })
+          state.infoRowKeys = newSelectedRowKeys
+        }, 100)
         console.log(state.infoRowKeys)
+        
       }
     }
   }
+  watch(
+    () => selectfeeData.value,
+    (v) => {
+      console.log(v)
+    }
+  ) 
   defineExpose({
     list,
     feeData,
-    init
+    init,
+    selectfeeData
   })
 </script>
 
diff --git a/src/design/public.less b/src/design/public.less
index 26ba00fa..7c911486 100644
--- a/src/design/public.less
+++ b/src/design/public.less
@@ -105,7 +105,9 @@
     color: #262626!important;
   }
 }
-
+.ant-table-cell {
+  font-size: 12px;
+}
 
 .ds-approve-mian-action-bar {
   .ant-btn-link, .ant-checkbox-wrapper  {
@@ -140,6 +142,7 @@
   }
   .ant-picker {
     height: 28px;
+    width: 100%;
   }
   .ant-btn {
     height: 30px;
diff --git a/src/store/modules/configOptions.ts b/src/store/modules/configOptions.ts
index c723545b..c5a8d19c 100644
--- a/src/store/modules/configOptions.ts
+++ b/src/store/modules/configOptions.ts
@@ -18,10 +18,11 @@ import {
   GetClientFrtSelectList,
   GetServiceSelectList,
   GetPackageSelectList,
-  GetTruckClientList
+  GetTruckClientList,
 } from '/@/views/operation/seaexport/api/BookingLedger'
 import { getList } from '/@/views/flowcenter/flowInstances/api'
-import { GetFeeCurrencySelectList } from '/@/api/common/index'
+import { GetFeeCurrencySelectList, GetClientListByCode } from '/@/api/common/index'
+import { getClientBankList } from '/@/views/baseinfo/infoclient/api'
 export default {
   // 业务来源
   GetClientSourceSelectList: () => {
@@ -125,4 +126,16 @@ export default {
       return res.data
     })
   },
+  // 结算单位
+  GetClientListByCode: () => {
+    return GetClientListByCode().then((res) => {
+      return res.data
+    })
+  },
+  // 银行信息
+  getClientBankList: () => {
+    return getClientBankList().then((res) => {
+      return res.data
+    })
+  },
 }
diff --git a/src/store/modules/options.ts b/src/store/modules/options.ts
index 91c41d68..c9d8c788 100644
--- a/src/store/modules/options.ts
+++ b/src/store/modules/options.ts
@@ -42,8 +42,12 @@ export const useOptionsStore = defineStore({
     GetFeeCurrencySelectList: null,
     // 用户表
     GetUserList: null,
-    // 币别
+    // 车队
     GetTruckClientList: null,
+    // 结算单位/结算对象
+    GetClientListByCode: null,
+    // 银行信息
+    getClientBankList: null,
   }),
   getters: {
     // 通过code获取下拉字典（code)就是接口尾部单词
diff --git a/src/views/baseinfo/infoclient/api.ts b/src/views/baseinfo/infoclient/api.ts
index 9b1e9135..eaeadd3d 100644
--- a/src/views/baseinfo/infoclient/api.ts
+++ b/src/views/baseinfo/infoclient/api.ts
@@ -82,7 +82,7 @@ export function getClientBankList(parameter) {
       queryCondition: JSON.stringify([
         {
           FieldName: 'ClientId',
-          FieldValue: parameter.clientId,
+          FieldValue: parameter?.clientId || '',
           ConditionalType: 1,
         },
       ]),
diff --git a/src/views/operation/paidApply/api.ts b/src/views/operation/paidApply/api.ts
index b8fa3b86..8b05e8c4 100644
--- a/src/views/operation/paidApply/api.ts
+++ b/src/views/operation/paidApply/api.ts
@@ -9,7 +9,8 @@ import { DataResult, PageRequest } from '/@/api/model/baseModel'
 enum Api {
   list = '/feeApi/PaymentApplication/GetList',
   edit = '/feeApi/FeeCurrency/EditFeeCurrency',
-  info = '/feeApi/FeeCurrency/GetFeeCurrencyInfo'
+  info = '/feeApi/FeeCurrency/GetFeeCurrencyInfo',
+  GetBizList = '/feeApi/PaymentApplication/GetBizList'
 }
 // 列表 (Auth)
 export function GetList(data: PageRequest) {
@@ -35,3 +36,11 @@ export function getFeeCurrencyInfo(query) {
     params: query
   })
 }
+// 获取待付费的业务列表
+export function GetBizList(data: PageRequest) {
+  return request<DataResult>({
+    url: Api.GetBizList,
+    method: 'post',
+    data
+  })
+}
diff --git a/src/views/operation/paidApply/columns.tsx b/src/views/operation/paidApply/columns.tsx
index 1f3ef911..74d41dde 100644
--- a/src/views/operation/paidApply/columns.tsx
+++ b/src/views/operation/paidApply/columns.tsx
@@ -303,4 +303,3 @@ export const searchFormSchema: FormSchema[] = [
     }
   },
 ]
-
diff --git a/src/views/operation/paidApply/components/tableActionBar.vue b/src/views/operation/paidApply/components/tableActionBar.vue
index c01b51c3..20051147 100644
--- a/src/views/operation/paidApply/components/tableActionBar.vue
+++ b/src/views/operation/paidApply/components/tableActionBar.vue
@@ -5,7 +5,7 @@
 -->
 <template>
   <div class="ds-table-action-bar">
-    <div class="nav" @click="addBooking">
+    <div class="nav" @click="create">
       <i class="iconfont icon-jiahao2fill"></i>新建
     </div>
     <div class="nav">
@@ -50,9 +50,8 @@
     }
   })
   // 新建
-  function addBooking() {
-    const addNum = Math.round(Math.random() * 1000)
-    go(`/BookingDetail?addNum=${addNum}`)
+  function create() {
+    go(`/paid-apply/create`)
   }
   // 复制
   function copyBooking() {
diff --git a/src/views/operation/paidApply/detail/columns.tsx b/src/views/operation/paidApply/detail/columns.tsx
new file mode 100644
index 00000000..f42111ce
--- /dev/null
+++ b/src/views/operation/paidApply/detail/columns.tsx
@@ -0,0 +1,260 @@
+/*
+ * @Description: 费用代码设置tsx
+ * @Author: lijj
+ * @Date: 2024-04-25 15:48:33
+ */
+import { ref, h, ComponentOptions, resolveComponent } from 'vue'
+import { BasicColumn, FormSchema } from '/@/components/Table'
+import { useOptionsStore } from '/@/store/modules/options'
+const optionsStore = useOptionsStore()
+// 引入字典数据
+import { getDictOption } from '/@/utils/dictUtil'
+
+// 业务表格列
+export const businessColumns: BasicColumn[] = [
+  {
+    title: '委托编号',
+    dataIndex: 'customerNo',
+    width: 150,
+    align: 'left'
+  },
+  {
+    title: '主提单号',
+    dataIndex: 'mblno',
+    width: 150,
+    align: 'left'
+  },
+  {
+    title: '结算单位',
+    dataIndex: 'customerName',
+    width: 150,
+    align: 'left'
+  }
+]
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'applicationNO',
+    label: '申请编号',
+    component: 'Input',
+    defaultValue: '自动生成',
+    colProps: { span: 3 },
+    // render: ({ model, field }) => {
+    //   return h(resolveComponent('span') as ComponentOptions, {
+    //     value: model[field]
+    //   })
+    // }
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Input',
+    defaultValue: '自动生成',
+    colProps: { span: 3 },
+    // render: ({ model, field }) => {
+    //   return h(resolveComponent('span') as ComponentOptions, {
+    //     value: model[field]
+    //   })
+    // }
+  },
+  {
+    field: 'customerId',
+    label: '结算对象',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('GetClientListByCode'),
+        labelField: 'shortName',
+        valueField: 'id',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
+      }
+    }
+  },
+  {
+    field: 'customerBankId',
+    label: '结算对象账户',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('getClientBankList'),
+        labelField: 'bankName',
+        valueField: 'id',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
+      }
+    }
+  },
+  {
+    field: 'customerBank',
+    label: '结算对象账号',
+    component: 'Input',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 }
+  },
+  {
+    field: 'createTime',
+    label: '申请日期',
+    component: 'DatePicker',
+    dynamicDisabled: false,
+    colProps: { span: 3 }
+  },
+  {
+    field: 'currency',
+    label: '币别',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('GetFeeCurrencySelectList'),
+        labelField: 'name',
+        valueField: 'id',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
+      }
+    }
+  },
+  {
+    field: 'amountRMB',
+    label: 'RMB金额',
+    component: 'InputNumber',
+    colProps: { span: 3 },
+    componentProps: {
+      min: 0,
+      precision: 6
+    }
+  },
+  {
+    field: 'amountUSD',
+    label: 'USD金额',
+    component: 'InputNumber',
+    colProps: { span: 3 },
+    componentProps: {
+      min: 0,
+      precision: 6
+    }
+  },
+  {
+    field: 'amountOther',
+    label: '其他外币金额',
+    component: 'InputNumber',
+    colProps: { span: 3 },
+    componentProps: {
+      min: 0,
+      precision: 6
+    }
+  },
+  {
+    field: 'amountUSD',
+    label: '计划结算RMB',
+    component: 'InputNumber',
+    colProps: { span: 3 }
+  },
+  {
+    field: 'amountOther',
+    label: '计划结算USD',
+    component: 'InputNumber',
+    colProps: { span: 3 }
+  },
+  {
+    field: 'settlementType',
+    label: '结算方式',
+    component: 'ApiSelect',
+    required: false,
+    dynamicDisabled: false,
+    colProps: { span: 3 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('GetClientStlModeSelectList'),
+        labelField: 'stlName',
+        valueField: 'id',
+        resultField: 'data',
+        immediate: false,
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
+      }
+    }
+  },
+  {
+    field: 'paymentDate',
+    label: '申请支付日期',
+    component: 'DatePicker',
+    dynamicDisabled: false,
+    colProps: { span: 3 }
+  },
+  {
+    field: 'createBy',
+    label: '申请人',
+    component: 'Input',
+    dynamicDisabled: false,
+    colProps: { span: 3 }
+  },
+  {
+    field: 'createBy',
+    label: '计划结算其他',
+    component: 'Input',
+    dynamicDisabled: false,
+    colProps: { span: 3 }
+  },
+]
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '费用对象',
+    field: 'customerId',
+    component: 'ApiSelect',
+    dynamicDisabled: false,
+    colProps: { span: 4 },
+    componentProps: () => {
+      return {
+        option: optionsStore.getOptionsByCode('GetClientListByCode'),
+        immediate: false,
+        labelField: 'shortName',
+        valueField: 'codeName',
+        resultField: 'data',
+        filterOption: (input: string, option: any) => {
+          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        }
+      }
+    }
+  },
+  {
+    label: '主提单号',
+    field: 'mblno',
+    component: 'Input',
+    dynamicDisabled: false,
+    colProps: { span: 4 }
+  },
+  {
+    label: '主提单号',
+    field: 'mblno',
+    component: 'Input',
+    dynamicDisabled: false,
+    colProps: { span: 4 }
+  },
+  {
+    label: '对账编号',
+    field: 'debitNo',
+    component: 'Input',
+    dynamicDisabled: false,
+    colProps: { span: 4 }
+  }
+]
\ No newline at end of file
diff --git a/src/views/operation/paidApply/detail/components/applyInfo.vue b/src/views/operation/paidApply/detail/components/applyInfo.vue
new file mode 100644
index 00000000..73b49ef7
--- /dev/null
+++ b/src/views/operation/paidApply/detail/components/applyInfo.vue
@@ -0,0 +1,123 @@
+<!--
+ * @Description: 操作管理 -> 付费申请 -> 申请明细
+ * @Author: lijj
+ * @Date: 2024-06-20 11:54:04
+-->
+<template>
+  <div class="ds-pay-apply-detail-fee-info">
+    <a-tabs v-model:activeKey="activeKey">
+      <a-tab-pane key="2" tab="费用明细">
+        <div>
+          <BasicTable @register="registerTable">
+            <template #toolbar>
+              <a-button type="primary" @click="add"> 新建 </a-button>
+            </template>
+          </BasicTable>
+        </div>
+      </a-tab-pane>
+      <a-tab-pane key="3" tab="附件上传" force-render>
+        <DsFile
+          ref="dsFile"
+          :id='id'
+        />
+      </a-tab-pane>
+    </a-tabs>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, defineEmits, defineProps, watch } from 'vue'
+  import { BasicTable, useTable } from '/@/components/Table'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { columns, searchFormSchema } from './applyInfoColumns'
+  // 引入附近上传组件
+  import DsFile from "/@/components/File/index.vue"
+  const { createMessage } = useMessage()
+  const emit = defineEmits(['add'])
+  const activeKey = ref('2')
+  const props = defineProps({
+    feeData: {
+      type: Array
+    },
+    // 业务id
+    id: {
+      type: String
+    }
+  })
+  const [registerTable, { reload, getForm, getPaginationRef, getSelectRows, getDataSource, setTableData }] = useTable({
+    title: '',
+    api: async (p) => {
+      const res = await GetList(p)
+      return new Promise((resolve) => {
+        resolve({ data: [...res.data], total: res.count })
+      })
+    },
+    beforeFetch: () => {
+      var currentPageInfo: any = getPaginationRef()
+      var data = getForm().getFieldsValue()
+      const postParam = {
+        queryCondition: '',
+        pageCondition: {
+          pageIndex: currentPageInfo.current,
+          pageSize: currentPageInfo.pageSize,
+          sortConditions: [],
+        },
+      }
+      let condition: API.ConditionItem[] = []
+      if (!!data.UserName) {
+        condition.push({
+          FieldName: 'UserName',
+          FieldValue: data.UserName,
+          ConditionalType: 1,
+        })
+      }
+      if (!!data.UserCode) {
+        condition.push({
+          FieldName: 'UserCode',
+          FieldValue: data.UserCode,
+          ConditionalType: 1,
+        })
+      }
+      postParam.queryCondition = JSON.stringify(condition)
+      // console.log(postParam);
+      return postParam
+    },
+    columns,
+    isTreeTable: false,
+    pagination: true,
+    striped: false,
+    useSearchForm: false,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: true,
+    canResize: false,
+    rowSelection: { type: 'checkbox' },
+    immediate: false
+  })
+  // 添加明细
+  const add = () => {
+    emit('add')
+  }
+  const tableData = ref([])
+  watch(
+    () => props.feeData,
+    (list) => {
+      console.log(list)
+      setTableData([...list])
+    }
+  )
+  onMounted(() => {
+    //初始化
+  //   reload()
+  })
+  function handleSuccess() {
+  //   reload()
+  }
+</script>
+
+<style lang="less">
+.ds-pay-apply {
+  .vben-basic-table-header__toolbar {
+    justify-content: space-between;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/operation/paidApply/detail/components/applyInfoColumns.tsx b/src/views/operation/paidApply/detail/components/applyInfoColumns.tsx
new file mode 100644
index 00000000..80bcfd80
--- /dev/null
+++ b/src/views/operation/paidApply/detail/components/applyInfoColumns.tsx
@@ -0,0 +1,97 @@
+/*
+ * @Author: lijingjia lijj_xl@163.com
+ * @Date: 2024-06-21 16:59:01
+ * @Description: 
+ */
+import { BasicColumn, FormSchema } from '/@/components/Table'
+export const columns: BasicColumn[] = [
+  {
+    title: '委托编号',
+    dataIndex: 'customerNo',
+    width: 130,
+  },
+  {
+    title: '主提单号',
+    dataIndex: 'mblno',
+    width: 130,
+  },
+  {
+    title: '委托单位',
+    dataIndex: 'customerName',
+    width: 150,
+  },
+  {
+    title: '开船日期',
+    dataIndex: 'etd',
+    width: 120,
+  },
+  {
+    title: '业务来源',
+    dataIndex: 'sourceName',
+    width: 130,
+  },
+  {
+    title: '费用名称',
+    dataIndex: 'feeName',
+    width: 150,
+  },
+  {
+    title: '收付',
+    dataIndex: 'billType',
+    width: 120,
+  },
+  {
+    title: '费用对象',
+    dataIndex: 'customerName',
+    width: 110,
+  },
+  {
+    title: '申请金额',
+    dataIndex: 'amount',
+    width: 100,
+  },
+  {
+    title: '原始币别',
+    dataIndex: 'originalCurrency',
+    width: 100,
+  },
+//   {
+//     title: '原始汇率',
+//     dataIndex: 'originalCurrency',
+//     width: 200,
+//   },
+  {
+    title: '折算汇率',
+    dataIndex: 'exchangeRate',
+    width: 200,
+  },
+  {
+    title: '原始金额',
+    dataIndex: 'originalAmount',
+    width: 100,
+  },
+//   {
+//     title: '进项/销项税率',
+//     dataIndex: 'originalCurrency',
+//     width: 200,
+//   },
+  {
+    title: '揽货人',
+    dataIndex: 'note',
+    width: 110,
+  },
+  {
+    title: '所属分部',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+]
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'CountryName',
+    label: '国家名称',
+    component: 'Input',
+    colProps: { span: 6 }
+  }
+]
diff --git a/src/views/operation/paidApply/detail/components/businessTable.vue b/src/views/operation/paidApply/detail/components/businessTable.vue
new file mode 100644
index 00000000..a3a21f00
--- /dev/null
+++ b/src/views/operation/paidApply/detail/components/businessTable.vue
@@ -0,0 +1,136 @@
+<!--
+ * @Author: lijingjia lijj_xl@163.com
+ * @Date: 2024-06-24 10:08:36
+ * @Description: 
+-->
+<template>
+  <div>
+    <data>
+      <a-button type="link" @click="addInfos">增加结算明细</a-button>
+    </data>
+    <BasicTable
+      :canRowSelect="true"
+      :scroll="{ x: '100%', y: 188 }"
+      :row-selection="{ selectedRowKeys: state.historyRowKeys, onChange: historyChange }"
+      rowKey="id"
+      @register="registerTable"
+      @row-click="onRowClick"
+    >
+    </BasicTable>
+    <div class="info">
+      <h2 style="padding-left: 20px; font-weight: 600;">费用明细</h2>
+      <feeTable
+        ref="feeTabel"
+      ></feeTable>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref, reactive, watch, defineExpose } from 'vue'
+  import { BasicTable, useTable } from '/@/components/Table'
+  import { GetBizList } from '../../api'
+  import { businessColumns, searchFormSchema } from '../columns'
+  import feeTable from '/@/components/CostEntry/components/feeTable.vue'
+  const [registerTable, { reload, getForm, getPaginationRef }] = useTable({
+    api: async (p) => {
+      const res = await GetBizList(p)
+      if (res?.data?.length) state.historyRowKeys = [res.data[0].id]
+      return new Promise((resolve) => {
+        resolve({ data: [...res.data], total: res.count })
+      })
+    },
+    beforeFetch: () => {
+      var currentPageInfo: any = getPaginationRef()
+      var data = getForm().getFieldsValue()
+      const postParam = {
+        queryCondition: '',
+        pageCondition: {
+          pageIndex: currentPageInfo.current,
+          pageSize: currentPageInfo.pageSize,
+          sortConditions: [],
+        },
+      }
+      let condition: API.ConditionItem[] = []
+      if (!!data.customerNo) {
+        condition.push({
+          FieldName: 'customerNo',
+          FieldValue: data.customerNo,
+          ConditionalType: 1
+        })
+      }
+      if (!!data.Etd) {
+        condition.push({
+          FieldName: 'Etd',
+          FieldValue: data.Etd[0],
+          ConditionalType: 3
+        })
+        condition.push({
+          FieldName: 'Etd',
+          FieldValue: data.Etd[1],
+          ConditionalType: 5
+        })
+      }
+      if (!!data.loadPort) {
+        condition.push({
+          FieldName: 'loadPort',
+          FieldValue: data.loadPort,
+          ConditionalType: 1
+        })
+      }
+      if (!!data.dischargePort) {
+        condition.push({
+          FieldName: 'dischargePort',
+          FieldValue: data.dischargePort,
+          ConditionalType: 1
+        })
+      }
+      postParam.queryCondition = JSON.stringify(condition)
+      return postParam
+    },
+    columns: businessColumns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema
+    },
+    isTreeTable: false,
+    pagination: true,
+    striped: false,
+    useSearchForm: true,
+    showTableSetting: false,
+    bordered: true,
+    showIndexColumn: true,
+    canResize: false,
+    immediate: false
+  })
+  // 开关控制器
+  const visible = ref(false)
+  // 费用信息已选项
+  const state = reactive({
+    historyRowKeys: []
+  })
+  const feeTabel = ref(null)
+  const historyChange = (v) => {
+    state.historyRowKeys = v
+  }
+  // 行点击事件
+  const onRowClick = (record) => {
+    state.historyRowKeys = [record?.id]
+  }
+  const feeData = () => {
+    return feeTabel.value.selectfeeData
+  }
+  const addInfos = () => {
+    
+  }
+  watch(() => state.historyRowKeys, (v) => {
+    if (v.length == 1) feeTabel.value.init(v, 'apply')
+  })
+  onMounted(() => {
+    //初始化
+    reload()
+  })
+  defineExpose({
+    feeData
+  })
+</script>
+  
\ No newline at end of file
diff --git a/src/views/operation/paidApply/detail/index.vue b/src/views/operation/paidApply/detail/index.vue
new file mode 100644
index 00000000..0d6d46cb
--- /dev/null
+++ b/src/views/operation/paidApply/detail/index.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Description: 操作管理 -> 付费申请 -> 详情布局
+ * @Author: lijj
+ * @Date: 2024-06-20 11:54:04
+-->
+<template>
+  <div class="ds-pay-apply-detail ds-detail-box">
+    <div>
+      <a-button @click="save">保存</a-button>
+    </div>
+    <!-- 表单区域 -->
+    <BasicForm @register="registerForm" />
+    <!-- 申请明细 -->
+    <div>
+      <ApplyInfo
+        @add="add"
+        :feeData="feeData"
+      ></ApplyInfo>
+    </div>
+    <a-modal
+      class="fee-modal"
+      v-model:visible="visible"
+      title="添加支付结算明细"
+      width="90%"
+      okText="添加申请费用明细"
+      @ok="handleOk"
+    >
+      <!-- 业务表格 -->
+      <BusinessTable
+        ref="busTable"
+      ></BusinessTable>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue'
+  import { BasicTable, useTable } from '/@/components/Table'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { BasicForm, useForm } from '/@/components/Form'
+  import ApplyInfo from './components/applyInfo.vue'
+  // 业务表格
+  import BusinessTable from './components/businessTable.vue'
+  const { createMessage } = useMessage()
+  const visible = ref(false)
+  import { formSchema } from './columns'
+  const [registerForm, { validate }] = useForm({
+    labelWidth: 150,
+    schemas: formSchema,
+    showActionButtonGroup: false
+  })
+  const busTable = ref(null)
+  const feeData = ref([])
+  const handleOk = () => {
+    feeData.value = busTable.value.feeData()
+    visible.value = false
+  }
+  // const [registerTable, { reload, getForm, getPaginationRef, getSelectRows }] = useTable({
+  //   title: '',
+  //   api: async (p) => {
+  //     const res = await GetList(p)
+  //     return new Promise((resolve) => {
+  //       resolve({ data: [...res.data], total: res.count })
+  //     })
+  //   },
+  //   beforeFetch: () => {
+  //     var currentPageInfo: any = getPaginationRef()
+  //     var data = getForm().getFieldsValue()
+  //     const postParam = {
+  //       queryCondition: '',
+  //       pageCondition: {
+  //         pageIndex: currentPageInfo.current,
+  //         pageSize: currentPageInfo.pageSize,
+  //         sortConditions: [],
+  //       },
+  //     }
+  //     let condition: API.ConditionItem[] = []
+  //     if (!!data.UserName) {
+  //       condition.push({
+  //         FieldName: 'UserName',
+  //         FieldValue: data.UserName,
+  //         ConditionalType: 1,
+  //       })
+  //     }
+  //     if (!!data.UserCode) {
+  //       condition.push({
+  //         FieldName: 'UserCode',
+  //         FieldValue: data.UserCode,
+  //         ConditionalType: 1,
+  //       })
+  //     }
+  //     postParam.queryCondition = JSON.stringify(condition)
+  //     // console.log(postParam);
+  //     return postParam
+  //   },
+  //   columns,
+  //   formConfig: {
+  //     labelWidth: 120,
+  //     schemas: searchFormSchema,
+  //   },
+  //   isTreeTable: false,
+  //   pagination: true,
+  //   striped: false,
+  //   useSearchForm: true,
+  //   showTableSetting: true,
+  //   bordered: true,
+  //   showIndexColumn: true,
+  //   canResize: false,
+  //   rowSelection: { type: 'checkbox' },
+  //   immediate: false
+  // })
+  // 打开添加明细弹窗
+  const add = () => {
+    visible.value = true
+  }
+  // 保存
+  const save = () => {
+    
+  }
+  onMounted(() => {
+    //初始化
+  //   reload()
+  })
+  function handleSuccess() {
+  //   reload()
+  }
+</script>
+
+<style lang="less">
+.ds-pay-apply {
+  .vben-basic-table-header__toolbar {
+    justify-content: space-between;
+  }
+}
+.fee-modal {
+  .ant-modal-body {
+    padding-top: 0;
+  }
+}
+</style>
\ No newline at end of file