From 81ae47f8c5517dc8624c4d5d1c7df7f683ffe225 Mon Sep 17 00:00:00 2001
From: lijingjia <lijj_xl@163.com>
Date: Thu, 5 Sep 2024 17:58:48 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=B4=B9=E7=94=A8=E5=AE=A1=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../approve/fee/components/mainActionBar.vue  | 32 +++++++++++++++++--
 src/views/approve/fee/index.vue               |  7 +++-
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/views/approve/fee/components/mainActionBar.vue b/src/views/approve/fee/components/mainActionBar.vue
index c7b937d5..553c7567 100644
--- a/src/views/approve/fee/components/mainActionBar.vue
+++ b/src/views/approve/fee/components/mainActionBar.vue
@@ -9,10 +9,10 @@
       <SvgIcon class="ml15" size="18" name="print" />
     </a-tooltip>
     <a-tooltip placement="top" title="所选业务锁定">
-      <SvgIcon class="ml25" size="18" name="lock" />
+      <SvgIcon class="ml25" size="18" name="lock" @click="lockBusiness" />
     </a-tooltip>
     <a-tooltip placement="top" title="所选业务解锁">
-      <SvgIcon class="ml25" size="18" name="openLock" />
+      <SvgIcon class="ml25" size="18" name="openLock" @click="openBusiness" />
     </a-tooltip>
     <a-dropdown>
       <template #overlay>
@@ -71,6 +71,13 @@
         return []
       }
     },
+    // 所选的行
+    selectedBusiness: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
     data: {
       type: Array,
       default: () => {
@@ -81,6 +88,27 @@
       type: Boolean
     }
   })
+  // 业务锁定
+  const lockBusiness = () => {
+    if (props.selectedBusiness.length == 0) {
+      return createMessage.warning('请勾选需要锁定的业务！')
+    }
+    // 只有应付，应收费用状态为审核通过，部分结算，结算完毕才可以锁定
+    const allowData = props.selectedBusiness.filter(item => {
+      return /^(0|8|9)$/.test(item.apFeeStatus) && /^(0|8|9)$/.test(item.arFeeStatus)
+    })
+    if (allowData) {
+
+    } else {
+      return createMessage.warning('所选业务不符合锁定规则！')
+    }
+  }
+  // 业务解锁
+  const openBusiness = () => {
+    if (props.selectedBusiness.length == 0) {
+      return createMessage.warning('请勾选需要解锁的业务！')
+    }
+  }
   // 批量审核
   const approve = (v, parent) => {
     const postData = {
diff --git a/src/views/approve/fee/index.vue b/src/views/approve/fee/index.vue
index 0eb6e72f..7398c4fd 100644
--- a/src/views/approve/fee/index.vue
+++ b/src/views/approve/fee/index.vue
@@ -16,6 +16,7 @@
         <template #toolbar>
           <MainActionBar
             :ids="busId"
+            :selectedBusiness="selectedBusiness"
             :data="data"
             @apporveHandle="mainApprove"
           ></MainActionBar>
@@ -163,7 +164,7 @@
   </a-spin>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, defineExpose } from 'vue'
+  import { onMounted, ref, defineExpose, computed } from 'vue'
   import { BasicTable, useTable } from '/@/components/Table'
   import { formatParams } from '/@/hooks/web/common'
   import { GetList, GetFees } from './api'
@@ -224,6 +225,10 @@
     immediate: false,
     resizeHeightOffset: (innerHeight - 60) / 2
   })
+  // 选中的业务数据
+  const selectedBusiness = computed(() => {
+    return getSelectRows()
+  })
   // 应收应付表格数据整体
   const tableData = ref([])
   const selectHandle = (v) => {

From af52dae87b9e706e4584aaff2620b27d8c15eb1e Mon Sep 17 00:00:00 2001
From: lijingjia <lijj_xl@163.com>
Date: Fri, 6 Sep 2024 13:59:57 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E5=BA=94=E6=94=B6=E5=BA=94=E4=BB=98?=
 =?UTF-8?q?=E5=AE=A1=E6=A0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/approve/fee/components/feeTable.vue | 315 +++++++-----
 .../approve/fee/components/mainActionBar.vue  |  15 +-
 src/views/approve/fee/index.vue               | 464 ++----------------
 3 files changed, 243 insertions(+), 551 deletions(-)

diff --git a/src/views/approve/fee/components/feeTable.vue b/src/views/approve/fee/components/feeTable.vue
index eb3256b3..b22ca99c 100644
--- a/src/views/approve/fee/components/feeTable.vue
+++ b/src/views/approve/fee/components/feeTable.vue
@@ -4,116 +4,114 @@
  * @Date: 2024-06-13 17:08:08
 -->
 <template>
-  <div class="ds-approve-fee-table">
-    <div class="fee-check-opt">
-      <h4>应收应付费用</h4>
-      <a-dropdown>
-        <template #overlay>
-          <a-menu>
-            <a-menu-item @click="check = !check">{{
-              check ? '仅待审核费用' : '显示所有费用'
-            }}</a-menu-item>
-          </a-menu>
-        </template>
-        <a-button type="link">
-          <span
-            style="font-size: 13px"
-            class="iconfont icon-shenhe ml15"
-          ></span>
-          {{ check ? '显示所有费用' : '仅待审核费用' }}
-          <span class="iconfont icon-30jiantouxiangxiafill"></span>
+  <a-spin :spinning="loading">
+    <div class="ds-approve-fee-table">
+      <div class="fee-check-opt">
+        <h4>应收应付费用</h4>
+        <a-dropdown>
+          <template #overlay>
+            <a-menu>
+              <a-menu-item @click="toggleFee">{{
+                check ? '显示所有费用' : '仅待审核费用'
+              }}</a-menu-item>
+            </a-menu>
+          </template>
+          <a-button type="link">
+            <span
+              style="font-size: 13px"
+              class="iconfont icon-shenhe ml15"
+            ></span>
+            {{ check ? '仅待审核费用' : '显示所有费用' }}
+            <span class="iconfont icon-30jiantouxiangxiafill"></span>
+          </a-button>
+        </a-dropdown>
+        <Divider type="vertical" />
+        <a-button type="link" @click="agree('1', 1)">
+          <span class="iconfont icon-chenggong" :style="{fontSize: '13px'}"></span>
+          审核通过
         </a-button>
-      </a-dropdown>
-      <Divider type="vertical" />
-      <!-- <FeeActionBar
-      ></FeeActionBar> -->
-    </div>
-    <div style="padding-left: 20px;">
-      <a-form>
-        <a-row :gutter="15">
-          <a-col v-for="(item, index) in list" :span="item.span" :key='item.value + index'>
-            <a-form-item
-              :label="item.label"
-            >
-              <div class="content">
-                {{ item.value || '-' }}
-              </div>
-            </a-form-item>
-          </a-col>
-        </a-row>
-      </a-form>
-      <div class="flex fee-tables">
-        <!-- 三个表格 -->
-        <ul class="columns-name">
-          <li class="fee-name">费用名称</li>
-          <li v-for="(item, index) in tableData" class="fee-data" :key="'f-n-' + index">
-            {{ item.feeName }}
-          </li>
-          <li>合计</li>
-        </ul>
-        <!-- 应收表格 -->
-        <BasicTable class="ds-mini-table-detail receive-table" @register="registerTable1">
-          <template v-slot:bodyCell="{ column, record }">
-            <!-- 应收费用 -->
-            <template v-if="column.dataIndex == 'feeStatusText'">
-              <span v-if="record.feeStatus == 0" class="ds-green-tag">
-                {{ record.feeStatusText }}</span>
-              <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
-                record.feeStatusText
-              }}</span>
-              <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
-                record.feeStatusText
-              }}</span>
-              <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
-                record.feeStatusText
-              }}</span>
-              <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
+        <!-- <FeeActionBar
+        ></FeeActionBar> -->
+      </div>
+      <div style="padding-left: 20px;">
+        <a-form>
+          <a-row :gutter="15">
+            <a-col v-for="(item, index) in list" :span="item.span" :key='item.value + index'>
+              <a-form-item
+                :label="item.label"
+              >
+                <div class="content">
+                  {{ item.value || '-' }}
+                </div>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form>
+        <div class="flex fee-tables">
+          <!-- 三个表格 -->
+          <ul class="columns-name">
+            <li class="fee-name">费用名称</li>
+            <li v-for="(item, index) in tableData" class="fee-data" :key="'f-n-' + index">
+              {{ item.feeName }}
+            </li>
+            <li v-show="tableData.length" class="fee-statistic">合计</li>
+          </ul>
+          <!-- 应收表格 -->
+          <BasicTable class="ds-mini-table-detail receive-table" @register="registerTable1">
+            <template v-slot:bodyCell="{ column, record }">
+              <!-- 应收费用 -->
+              <template v-if="column.dataIndex == 'feeStatusText'">
+                <span v-if="record.feeStatus == 0" class="ds-green-tag">
+                  {{ record.feeStatusText }}</span>
+                <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
+                  record.feeStatusText
+                }}</span>
+                <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
+                  record.feeStatusText
+                }}</span>
+                <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
+                  record.feeStatusText
+                }}</span>
+                <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
+              </template>
             </template>
-          </template>
-        </BasicTable>
-        <!-- 应付表格 -->
-        <BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2">
-          <template v-slot:bodyCell="{ column, record }">
-            <!-- 应付费用 -->
-            <template v-if="column.dataIndex == 'feeStatusText'">
-              <span v-if="record.feeStatus == 0" class="ds-green-tag">
-                {{ record.feeStatusText }}</span>
-              <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
-                record.feeStatusText
-              }}</span>
-              <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
-                record.feeStatusText
-              }}</span>
-              <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
-                record.feeStatusText
-              }}</span>
-              <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
+          </BasicTable>
+          <!-- 应付表格 -->
+          <BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2">
+            <template v-slot:bodyCell="{ column, record }">
+              <!-- 应付费用 -->
+              <template v-if="column.dataIndex == 'feeStatusText'">
+                <span v-if="record.feeStatus == 0" class="ds-green-tag">
+                  {{ record.feeStatusText }}</span>
+                <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
+                  record.feeStatusText
+                }}</span>
+                <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
+                  record.feeStatusText
+                }}</span>
+                <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
+                  record.feeStatusText
+                }}</span>
+                <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
+              </template>
             </template>
-          </template>
-        </BasicTable>
+          </BasicTable>
+        </div>
       </div>
     </div>
-  </div>
+  </a-spin>
 </template>
 <script lang="ts" setup>
   import { onMounted, ref, reactive, defineProps, watch, defineExpose, defineEmits } from 'vue'
   import { BasicTable, useTable } from '/@/components/Table'
   import { useMessage } from '/@/hooks/web/useMessage'
-  import { GetFees } from '../api'
+  import { GetFees, Audit, SetInvoiceEnabled } from '../api'
   import { Divider } from 'ant-design-vue'
   import FeeActionBar from './feeActionBar.vue'
   import AlterNewValue from './AlterNewValue.vue'
   import { formatTableData } from '/@/hooks/web/common'
   import emitter from '/@/utils/Bus'
   const { createMessage } = useMessage()
-  const props = defineProps({
-    BRows: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  })
   // 过滤显示仅审核费用
   const check = ref(true)
   // 表单详情字段
@@ -193,7 +191,7 @@
   const tableData = ref([])
   const RData = ref([])
   const PData = ref([])
-  const [registerTable1] = useTable({
+  const [registerTable1, { getSelectRows: getSelectRows1, clearSelectedRowKeys: clearSelectedRowKeys1 }] = useTable({
     dataSource: RData,
     columns: feeColumns(1),
     isTreeTable: false,
@@ -224,7 +222,7 @@
       return [sums]
     }
   })
-  const [registerTable2] = useTable({
+  const [registerTable2, { getSelectRows: getSelectRows2, clearSelectedRowKeys: clearSelectedRowKeys2 }] = useTable({
     dataSource: PData,
     columns: feeColumns(2),
     isTreeTable: false,
@@ -255,15 +253,24 @@
       return [sums]
     }
   })
-  const selectHandle = (v) => {
-    if (v.rows && v.rows.length) {
-      ids = v.rows.map(item => {
-        return { id: item.id, businessType: item.businessType }
-      })
-    }
-    // 默认选择当前显示费用的业务类型
-    if (props.busId && props.busId.length) {
-      GetFees(props.busId[0]).then(res => {
+  // 切换显示的费用
+  const toggleFee = () => {
+    if (!selectRows.value?.id) return createMessage.warning('请先选择业务数据！')
+    check.value = !check.value
+    // 切换清空选择
+    clearSelectedRowKeys1()
+    clearSelectedRowKeys2()
+    init(selectRows.value)
+  }
+  const selectRows = ref()
+  // 初始化加载表格数据
+  const init = (record) => {
+    selectRows.value = record
+    if (record && record.id) {
+      const postData = {
+        id: record.id, businessType: record.businessType, auditOnly: check.value
+      }
+      GetFees(postData).then(res => {
         const val = res.data
         // 处理详情信息数据
         if (val.etd) val.etd = val.etd.split(' ')[0]
@@ -319,6 +326,7 @@
         }
       })
     } else {
+      // 没有勾选情况数据
       list.value.forEach(item => {
         item.value = ''
       })
@@ -327,15 +335,82 @@
       RData.value = []
     }
   }
-  watch(
-    () => props.BRows,
-    (v) => {
-      console.log(v)
-    },
-    {
-      deep: true
+  // 校验费用利润
+  const checkProfit = () => {
+    const receiveData = getSelectRows1()
+    const payData = getSelectRows2()
+    let rAmount = 0
+    receiveData.forEach(item => {
+      rAmount = rAmount + Number(item.amount )
+    })
+    let pAmount = 0
+    payData.forEach(item => {
+      pAmount = pAmount + Number(item.amount )
+    })
+    return rAmount - pAmount
+  }
+  // 审核通过 params(v: 1.审核通过、2.批准申请、3.驳回申请), (r: 1.同意、2.驳回)
+  const agree = async(v, r) => {
+    // 应收应付费用勾选集合
+    const arrs = [...getSelectRows1(), ...getSelectRows2()]
+    if (arrs.length == 0) return createMessage.warning('请选择要审核的费用！')
+    const ids = arrs.map(item => {
+      return item.id
+    })
+    // if (v == '3' || v == '2') {
+    //   for(let i = 0; i < props.feeStatus.length; i++) {
+    //     if (props.feeStatus[i] == 2) {
+    //       if (v == 2) {
+    //         return createMessage.warning('只能费用状态为[申请修改]或[申请删除]的费用才能审核通过！')
+    //       } else {
+    //         return createMessage.warning('只能费用状态为[申请修改]或[申请删除]的费用才能驳回提交！')
+    //       }
+    //     }
+    //   }
+    // }
+    // 利润小于0的时候，弹窗提示二次确认
+    const profit = checkProfit()
+    if (profit <= 0 && (v == '1' || v == '2')) {
+      // visible.value = true
+      return
+    }
+    // // 驳回申请的时候弹窗填写驳回原因
+    // if (v == '3') {
+    //   openModal(true, {
+    //     businessType: props?.data[0]?.businessType,
+    //     ids: props.ids
+    //   })
+    //   return
+    // }
+    approve(2, r, ids)
+  }
+  // 费用按钮组loading
+  const loading = ref(false)
+  const approve = (v, r, ids) => {
+    const postData = {
+      result: r,
+      remark: r == 1 ? "同意" : '',
+      ids,
+      businessType: selectRows.value.businessType
     }
-  )
+    loading.value = true
+    Audit(postData).then(res => {
+      loading.value = false
+      init(selectRows.value)
+      // if (v == 1) {
+      //   visible.value = false
+      // }
+      // if (res.succeeded) {
+      //   createMessage.success(res.message)
+      //   emit('refresh')
+      // }
+    }).catch(() => {
+      loading.value = false
+    })
+  }
+  defineExpose({
+    init
+  })
 </script>
 
 <style lang="less">
@@ -420,10 +495,20 @@
       align-items: flex-end;
       padding-bottom: 5px;
     }
+    li {
+      border-bottom: 0.7px solid #e5e7eb;
+    }
     .fee-data {
-      height: 26px;
-      border-top: 1px solid #e5e7eb;
+      height: 26.4px;
+      font-size: 12px;
+      line-height: 26px;
+      padding-left: 9px;
+    }
+    .fee-statistic {
+      height: 26.4px;
+      font-size: 12px;
       line-height: 26px;
+      padding-left: 8px;
     }
   }
   .ant-form-item-label {
diff --git a/src/views/approve/fee/components/mainActionBar.vue b/src/views/approve/fee/components/mainActionBar.vue
index 553c7567..26d5c9b7 100644
--- a/src/views/approve/fee/components/mainActionBar.vue
+++ b/src/views/approve/fee/components/mainActionBar.vue
@@ -36,7 +36,7 @@
     <a-dropdown>
       <template #overlay>
         <a-menu>
-          <a-menu-item @click="check = !check">{{
+          <a-menu-item @click="refreshTable">{{
             check ? '所有业务' : '仅需审核业务'
           }}</a-menu-item>
         </a-menu>
@@ -53,7 +53,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, defineProps, watch, defineEmits } from 'vue'
+  import { onMounted, ref, defineProps, watch, defineEmits, defineExpose } from 'vue'
   import { Divider } from 'ant-design-vue'
   import { SvgIcon } from '/@/components/Icon'
   import { AuditByBiz } from '../api'
@@ -86,6 +86,9 @@
     },
     searchFlag: {
       type: Boolean
+    },
+    reload: {
+      type: Function
     }
   })
   // 业务锁定
@@ -109,6 +112,11 @@
       return createMessage.warning('请勾选需要解锁的业务！')
     }
   }
+  // 切换仅需审核，和全部业务的数据
+  const refreshTable = () => {
+    check.value = !check.value
+    props.reload()
+  }
   // 批量审核
   const approve = (v, parent) => {
     const postData = {
@@ -149,6 +157,9 @@
   onMounted(() => {
    
   })
+  defineExpose({
+    check
+  })
 </script>
 
 <style lang="less">
diff --git a/src/views/approve/fee/index.vue b/src/views/approve/fee/index.vue
index 7398c4fd..28a32f72 100644
--- a/src/views/approve/fee/index.vue
+++ b/src/views/approve/fee/index.vue
@@ -10,14 +10,19 @@
         class="ds-mini-table fee-table"
         height="500px"
         :scroll="{ 'x': '100%', 'y': fheight + 'px' }"
+        :row-selection="{ selectedRowKeys: state.BRowKeys, onChange: BChange }"
+        :canRowSelect="true"
+        rowKey="id"
         @register="registerTable"
-        @selection-change="selectHandle"
+        @row-click="onRowClick"
       >
         <template #toolbar>
           <MainActionBar
+            ref="mainActionBar"
             :ids="busId"
             :selectedBusiness="selectedBusiness"
             :data="data"
+            :reload="reload"
             @apporveHandle="mainApprove"
           ></MainActionBar>
         </template>
@@ -55,102 +60,7 @@
           </template>
         </template>
       </BasicTable>
-      <div class="fee-check-opt">
-        <h4>应收应付费用</h4>
-        <a-dropdown>
-          <template #overlay>
-            <a-menu>
-              <a-menu-item @click="check = !check">{{
-                check ? '仅待审核费用' : '显示所有费用'
-              }}</a-menu-item>
-            </a-menu>
-          </template>
-          <a-button type="link">
-            <span
-              style="font-size: 13px"
-              class="iconfont icon-shenhe ml15"
-            ></span>
-            {{ check ? '显示所有费用' : '仅待审核费用' }}
-            <span class="iconfont icon-30jiantouxiangxiafill"></span>
-          </a-button>
-        </a-dropdown>
-        <Divider type="vertical" />
-        <a-button type="link">
-          <span class="iconfont icon-chenggong" :style="{fontSize: '13px'}"></span>
-          审核通过
-        </a-button>
-        <a-button type="link" @click="openTable">
-          <span class="iconfont icon-Icon-" :style="{fontSize: '13px'}"></span>
-          完整列表
-        </a-button>
-        <!-- <FeeActionBar
-        ></FeeActionBar> -->
-      </div>
-      <div style="padding-left: 20px;">
-        <a-form>
-          <a-row :gutter="15">
-            <a-col v-for="(item, index) in list" :span="item.span" :key='item.value + index'>
-              <a-form-item
-                :label="item.label"
-              >
-                <div class="content">
-                  {{ item.value || '-' }}
-                </div>
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form>
-        <div class="flex fee-tables">
-          <!-- 三个表格 -->
-          <ul class="columns-name">
-            <li class="fee-name">费用名称</li>
-            <li v-for="(item, index) in tableData" class="fee-data" :key="'f-n-' + index">
-              {{ item.feeName }}
-            </li>
-            <li>合计</li>
-          </ul>
-          <!-- 应收表格 -->
-          <BasicTable class="ds-mini-table-detail receive-table" @register="registerTable1">
-            <template v-slot:bodyCell="{ column, record }">
-              <!-- 应收费用 -->
-              <template v-if="column.dataIndex == 'feeStatusText'">
-                <span v-if="record.feeStatus == 0" class="ds-green-tag">
-                  {{ record.feeStatusText }}</span>
-                <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
-                  record.feeStatusText
-                }}</span>
-                <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
-                  record.feeStatusText
-                }}</span>
-                <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
-                  record.feeStatusText
-                }}</span>
-                <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
-              </template>
-            </template>
-          </BasicTable>
-          <!-- 应付表格 -->
-          <BasicTable class="ds-mini-table-detail pay-table" @register="registerTable2">
-            <template v-slot:bodyCell="{ column, record }">
-              <!-- 应付费用 -->
-              <template v-if="column.dataIndex == 'feeStatusText'">
-                <span v-if="record.feeStatus == 0" class="ds-green-tag">
-                  {{ record.feeStatusText }}</span>
-                <span v-else-if="record.feeStatus == 1" class="ds-blue-tag">{{
-                  record.feeStatusText
-                }}</span>
-                <span v-else-if="/^2|3|4|5|6$/.test(record.feeStatus)" class="ds-orange-tag">{{
-                  record.feeStatusText
-                }}</span>
-                <span v-else-if="/^7|8$/.test(record.feeStatus)" class="ds-red-tag">{{
-                  record.feeStatusText
-                }}</span>
-                <span v-else-if="/^9|10$/.test(record.feeStatus)" class="ds-purple-tag">{{ record.feeStatusText }}</span>
-              </template>
-            </template>
-          </BasicTable>
-        </div>
-      </div>
+      <FeeTable ref="mainFeeTable" :BRows="BRows"></FeeTable>
       <!-- <Statistic v-show="busId.length" :id="busId"></Statistic> -->
       <!-- 完整费用弹窗 -->
       <a-modal 
@@ -164,10 +74,10 @@
   </a-spin>
 </template>
 <script lang="ts" setup>
-  import { onMounted, ref, defineExpose, computed } from 'vue'
+  import { onMounted, ref, defineExpose, computed, reactive } from 'vue'
   import { BasicTable, useTable } from '/@/components/Table'
   import { formatParams } from '/@/hooks/web/common'
-  import { GetList, GetFees } from './api'
+  import { GetList } from './api'
   import { Divider } from 'ant-design-vue'
   import FeeActionBar from './components/feeActionBar.vue'
   // import { useModal } from '/@/components/Modal'
@@ -185,13 +95,19 @@
   // 选中的业务id
   const busId = ref([])
   const data = ref([])
-  const check = ref(true)
   const innerHeight = window.innerHeight
   const fheight = (innerHeight / 2) - 97
-  const [registerTable, { reload, getDataSource, getSelectRows }] = useTable({
+  const mainActionBar = ref(null)
+  // 主窗口的费用表格组件
+  const mainFeeTable = ref(null)
+  // 费用信息已选项
+  const state = reactive({
+    BRowKeys: []
+  })
+  const [registerTable, { reload, getDataSource, getSelectRows, setSelectedRows }] = useTable({
     maxHeight: (innerHeight - 60) / 2,
     api: async (p) => {
-      console.log(p)
+      p['otherQueryCondition'] = mainActionBar.value.check
       const res = await GetList(p)
       return new Promise((resolve) => {
         res.data.forEach(item => {
@@ -218,9 +134,8 @@
     pagination: true,
     striped: false,
     useSearchForm: true,
-    showTableSetting: true,
+    showTableSetting: false,
     showIndexColumn: true,
-    rowSelection: { type: 'checkbox' },
     canResize: false,
     immediate: false,
     resizeHeightOffset: (innerHeight - 60) / 2
@@ -231,282 +146,25 @@
   })
   // 应收应付表格数据整体
   const tableData = ref([])
-  const selectHandle = (v) => {
-    let ids = []
-    if (v.rows && v.rows.length) {
-      ids = v.rows.map(item => {
-        return { id: item.id, businessType: item.businessType }
-      })
-    }
-    // 默认选择当前显示费用的业务类型
-    busId.value = ids
-    if (ids && ids.length) {
-      GetFees(ids[0]).then(res => {
-        const val = res.data
-        // 处理详情信息数据
-        if (val.etd) val.etd = val.etd.split(' ')[0]
-        if (val.eta) val.etd = val.eta.split(' ')[0]
-        val.etd = val.etd || '' + (val.etd ? '/' : '') + val.eta || ''
-        val.loadPort = val.loadPort || '' + (val.loadPort ? '/' : '') + val.dischargePort || ''
-        val.vessel = val.vessel || '' + (val.vessel ? '/' : '') + val.voyno || ''
-        list.value.forEach(item => {
-          for(let key in val) {
-            if (item.field === key) {
-              if (key == 'etd' && val[key]) {
-                val[key] = val[key].split(' ')[0]
-              }
-              item.value = val[key]
-            }
-          }
-        })
-        // 处理表格数据
-        tableData.value = val.itemGroups
-        // 应收费用数据
-        if (val.itemGroups) {
-          RData.value = []
-          PData.value = []
-          val.itemGroups.forEach(item => {
-            if (item.items.length == 0) {
-              item.items = [{ feeType: 1 }, { feeType: 2 }]
-            }
-            if (item.items.length == 1) {
-              if (item.items[0].feeType == 1) {
-                item.items[1] = { feeType: 2 } 
-              } else {
-                item.items[1] = { feeType: 1 } 
-              }
-            }
-            item.items.forEach(row => {
-              if (row.currency == 'RMB') {
-                row['RMB'] = row.amount
-              } else if (row.currency == 'USD') {
-                row['USD'] = row.amount
-              } else {
-                row['other'] = row.amount
-              }
-              // 应收
-              if (row.feeType === 1) {
-                RData.value.push(row)
-              }
-              // 应付
-              if (row.feeType === 2) {
-                PData.value.push(row)
-              }
-            })
-          })
-        }
-      })
-    } else {
-      list.value.forEach(item => {
-        item.value = ''
-      })
-      tableData.value = []
-      PData.value = []
-      RData.value = []
-    }
-  }
-  const feeColumns = (v) => {
-    return [
-      {
-        title: v == 1 ? '应收' : '应付',
-        align: 'center',
-        width: 200,
-        children: [
-          {
-            dataIndex: 'RMB',
-            title: 'RMB',
-            align: 'left',
-            minWidth: 80
-          },
-          {
-            dataIndex: 'USD',
-            title: 'USD',
-            align: 'left',
-            minWidth: 80
-          },
-          {
-            dataIndex: 'other',
-            title: '其他币别',
-            align: 'left',
-            minWidth: 80
-          },
-          {
-            dataIndex: 'customerFullName',
-            title: '客户名称',
-            align: 'left',
-            minWidth: 80
-          },
-          {
-            dataIndex: 'feeStatusText',
-            title: '状态',
-            align: 'left',
-            width: 85
-          },
-          {
-            dataIndex: 'unitPrice',
-            title: '单价',
-            align: 'left',
-            width: 100
-          },
-          {
-            dataIndex: 'quantity',
-            title: '数量',
-            align: 'left',
-            width: 50
-          },
-          {
-            dataIndex: 'exchangeRate',
-            title: '汇率',
-            align: 'left',
-            width: 50
-          }
-        ]
-      }
-    ]
+  const BChange = async (v) => {
+    state.BRowKeys = v
   }
-  // 应收费用数据
-  const RData = ref([])
-  // 应付费用数据
-  const PData = ref([])
-  const [registerTable1] = useTable({
-    dataSource: RData,
-    columns: feeColumns(1),
-    isTreeTable: false,
-    pagination: false,
-    showIndexColumn: false,
-    bordered: true,
-    rowSelection: { type: 'checkbox' },
-    canResize: false,
-    showSummary: true,
-    summaryFunc(param) {
-      const sums = {}
-      // 遍历所有列，找出需要合计的列
-      const columns = feeColumns(1)
-      columns[0].children.forEach(column => {
-        if (['RMB', 'USD', 'other'].includes(column.dataIndex)) {
-          console.log(column)
-          // 初始化合计值为0
-          sums[column.dataIndex] = 0
-          // 遍历所有行数据，累加对应字段的值
-          param.forEach(row => {
-            if (!isNaN(row[column.dataIndex])) {
-              sums[column.dataIndex] += Number(row[column.dataIndex])
-            }
-          })
-        }
-      })
-      // 返回合计数据对象
-      return [sums]
-    }
-  })
-  const [registerTable2] = useTable({
-    dataSource: PData,
-    columns: feeColumns(2),
-    isTreeTable: false,
-    pagination: false,
-    showIndexColumn: false,
-    bordered: true,
-    rowSelection: { type: 'checkbox' },
-    canResize: false,
-    showSummary: true,
-    summaryFunc(param) {
-      const sums = {}
-      // 遍历所有列，找出需要合计的列
-      const columns = feeColumns(2)
-      columns[0].children.forEach(column => {
-        if (['RMB', 'USD', 'other'].includes(column.dataIndex)) {
-          console.log(column)
-          // 初始化合计值为0
-          sums[column.dataIndex] = 0
-          // 遍历所有行数据，累加对应字段的值
-          param.forEach(row => {
-            if (!isNaN(row[column.dataIndex])) {
-              sums[column.dataIndex] += Number(row[column.dataIndex])
-            }
-          })
-        }
-      })
-      // 返回合计数据对象
-      return [sums]
-    }
-  })
-  const receiveTable = ref(null)
-  const payTable = ref(null)
-  const mainApprove = () => {
-    loading.value = !loading.value
-    if (!loading.value) {
-      receiveTable.value.reload()
-      payTable.value.reload()
-    }
+  // 行点击事件
+  const onRowClick = (record) => {
+    state.BRowKeys = [record?.id]
+    setSelectedRows([record])
+    // 触发子组件刷新表格数据
+    mainFeeTable.value.init(record)
   }
-  // 业务费用利润
-  const profit = ref(0)
-  // 校验费用利润
-  const checkProfit = () => {
-    const receiveData = receiveTable.value.getDataSource()
-    const payData = payTable.value.getDataSource()
-    let rAmount = 0
-    receiveData.forEach(item => {
-      rAmount = rAmount + Number(item.amount )
-    })
-    let pAmount = 0
-    payData.forEach(item => {
-      pAmount = pAmount + Number(item.amount )
-    })
-    profit.value = rAmount - pAmount
-  }
-  // 表单字段
-  const list = ref([
-    { label: 'M B/L NO', field: 'mblno', span: 5, value: '' },
-    { label: '业务类别', field: 'businessTypeText', span: 5, value: '' },
-    { label: '委托单位', field: 'cntrTotal', span: 5, value: '' },
-    { label: '业务编号', field: 'customerNo', span: 5, value: '' },
-    { label: 'VSL/VOY', field: 'vessel', span: 5, value: '' },
-    { label: 'CARRIER', field: 'carrier', span: 5, value: '' },
-    { label: '会计期间', field: 'accountDate', span: 5, value: '' },
-    { label: 'ETD/ETA', field: 'etd', span: 5, value: '' },
-    { label: '放单方式', field: 'voyno', span: 5, value: '' },
-    { label: 'POL/POD', field: 'loadPort', span: 5, value: '' }
-  ])
   // 选中的业务行数据
   const BRows = ref([])
   const openTable = () => {
     visible.value = true
     BRows.value = getSelectRows()
   }
-  // 记录费用表格表格box的高度
-  // const feeHeight = ref(465)
-  // const oldFeeHeight = ref(465)
-  // // 记录数据按下时候的Y轴坐标
-  // const clientY = ref()
-  // const handleMouseDown = (event) => {
-  //   // 禁止用户选择网页中文字
-  //   document.onselectstart = () => false
-  //   // 禁止用户拖动元素
-  //   document.ondragstart = () => false
-  //   // 保存鼠标最后移动的位置（Y轴）
-  //   clientY.value = event.clientY
-  //   // 绑定鼠标移动事件
-  //   document.addEventListener('mousemove', handleMouseMove)
-  //   // 绑定鼠标放开事件
-  //   document.addEventListener('mouseup', handleMouseUp)
-  // }
-  // // 富文本鼠标按钮移动事件
-  // const handleMouseMove = (event) => {
-  //   feeHeight.value = clientY.value - event.clientY + Number(oldFeeHeight.value) 
-  // }
-  // const handleMouseUp = (event) => {
-  //   oldFeeHeight.value = feeHeight.value
-  //   // 移除鼠标移动事件
-  //   document.removeEventListener('mousemove', handleMouseMove)
-  //   // 移除鼠标放开事件
-  //   document.removeEventListener('mouseup', handleMouseUp)
-  //   // 允许用户选择网页中文字
-  //   document.onselectstart = null
-  //   // 允许用户拖动元素
-  //   document.ondragstart = null
-  // }
-
+  const mainApprove = () => {
+    
+  }
   onMounted(() => {
     //初始化
     reload()
@@ -533,68 +191,6 @@
     height: calc(50vh - 136px);
     overflow-y: auto;
   }
-  .receive-table, .pay-table {
-    flex: 1;
-    th::before {
-      height: 0!important;
-    }
-    .ant-table-footer {
-      .ant-table-measure-row {
-        display: none;
-      }
-      .ant-table-row-level-0 {
-        height: 26px!important;
-        padding-left: 50px;
-        td {
-          padding: 5px 6px!important;
-          font-size: 14px;
-          font-weight: 600!important;
-        }
-      }
-    }
-  }
-  .receive-table {
-    .ant-table-footer {
-      td {
-        color: #17A6A3!important;
-      }
-    }
-  }
-  .pay-table {
-    .ant-table-footer {
-      td {
-        color: #BA3849!important;
-      }
-    }
-  }
-  .receive-table {
-    th {
-      background: #F2FAFA!important;
-    }
-  }
-  .pay-table {
-    th {
-      background: #FCF5F5!important;
-    }
-  }
-  ul {
-    font-size: 12px;
-    .fee-name, .fee-data {
-      background: #FFFDF5;
-      padding-left: 10px;
-    }
-    .fee-name {
-      height: 51px;
-      display: flex;
-      align-items: flex-end;
-      padding-bottom: 5px;
-    }
-    .fee-data {
-      height: 26px;
-      border-top: 1px solid #e5e7eb;
-      line-height: 26px;
-    }
-  }
   .ant-form-item-label {
     label {
       font-size: 12px;