foreign-admin-ui/src/views/capital/fundFlow/index.vue

<template>
  <div class="table_form-container">
    <!-- 搜索 -->
    <FundDetailSearch :search-form="searchForm" :search-options="searchOptions" :buttonLoading="loading" @search="handleSearch"
      @reset="handleReset">
      <template #button="{ form }">
        <el-button type="primary" @click="handleExport()"> 导出 </el-button>
      </template>
    </FundDetailSearch>
    <!-- 表格 -->
    <FundDetailTable :table-data="tableTree" :columns="tableColumnsOptions" row-key="id" :loading="loading" />
    <!-- 分页 -->
    <FundDetailPagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
      @pagination-change="handlePaginationChange" />
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'FundFlow'
})
// 组件
import FundDetailSearch from '@/components/common/Search.vue'
import FundDetailTable from '@/components/common/Table.vue'
import FundDetailPagination from '@/components/common/Pagination.vue'
import { usePageLoading } from '@/composables/useLoading'
// 配置以及表单验证
import { search, tableColumns } from './options'
// 接口
import { getFundDetailListApi, getEnumDicOptionsApi } from '@/api/modules/funding/fundDetail'
import { getRecentSevenDays, utcToUtc8 } from '@/utils/handleTime.ts'

// 导出表格
import { exportToExcel } from '@/utils/exportToExcel'
/**
 * @description: 定义搜索数据
 */
const initTime = getRecentSevenDays('YYYY-MM-DD')
const searchOptions = ref(search)
const searchForm = ref({
  username: '',
  subAccountId: '',
  type: '',
  startTime: initTime.start,
  endTime: initTime.end,
})

/**
 * @description: 获取操作类型枚举选项
 */
const getEnumDicOptions = async () => {
  const res: any = await getEnumDicOptionsApi()
  const typeIndex = searchOptions.value.findIndex((item: any) => item.prop === 'type')
  if (typeIndex !== -1 && res) {
    searchOptions.value[typeIndex]!.options = res.map((item: any) => ({
      label: item.value,
      value: item.id
    }))
  }
}
const { loading, startLoading, stopLoading } = usePageLoading()
/**
 * @description: 定义表格数据
 */
const tableTree = ref([])
const tableColumnsOptions = ref(tableColumns)
/**
 * @description: 定义分页数据
 */
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

/**
 * @description: 定义公共请求数据方法
 */
//获取资金明细列表
const getFundDetailList = async () => {
  startLoading()
  try {
    const params = {
      page: currentPage.value,
      page_size: pageSize.value,
      start_time:
        searchForm.value.startTime?.length > 0
          ? `${searchForm.value.startTime} 0:00:00`
          : '2026-01-01 0:00:00',
      end_time:
        searchForm.value.endTime?.length > 0
          ? `${searchForm.value.endTime} 23:59:59`
          : '2026-03-15 23:59:59',
      user_name: searchForm.value.username,
      account_id: searchForm.value.subAccountId,
      type: searchForm.value.type || '',
    }
    // 调用接口获取数据
    const data: any = await getFundDetailListApi(params)
    console.log(data)
    tableTree.value = data.data.map((item: any) => ({
      ...item,
      // 用户名
      username: item.user.username,
      //单号
      orderNo: item.trade_id,
      //操作类型
      type: item.enum_dic.value,
      //创建时间
      createTime: utcToUtc8(item.created_at),
      //钱包类型
      walletType: item.wallet_type === '1' ? '主钱包' : '子钱包',
    }))
    //分页数据
    total.value = data.total
    currentPage.value = data.current_page
    pageSize.value = Number(data.per_page)
  } finally {
    stopLoading()
  }
}

/**
 * @description: 页面加载完成需要请求的数据
 */
onMounted(async () => {
  await getEnumDicOptions()
  getFundDetailList()
})
/**
 * @description: 定义搜索方法
 */
const handleSearch = () => {
  getFundDetailList()
}
const handleReset = () => {
  searchForm.value = {
    username: '',
    subAccountId: '',
    type: '',
    startTime: initTime.start,
    endTime: initTime.end,
  }
  getFundDetailList()
}
const handleExport = () => {
  console.log('tableColumnsOptions.value:', tableColumnsOptions.value);
  exportToExcel({
    tableData: tableTree.value,
    columns: tableColumnsOptions.value,
    title: '导出资金明细',
    defaultFileNamePrefix: '资金明细',
  })
}
/**
 * @description: 定义分页方法
 */
const handlePaginationChange = (page: any) => {
  currentPage.value = page.currentPage
  getFundDetailList()
}
</script>