gold-vue/src/views/moneyManage/financialAccount/performanceAttribution.vue

<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import request from '@/util/http.js'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import { useI18n } from 'vue-i18n'
import { refundOnline,performanceSelect,exportPerformance } from '@/api/cash/financialAccount.js'
import {useAdminStore} from '@/store/index.js'

const adminStore = useAdminStore()
const {adminData} = storeToRefs(adminStore)

const { t } = useI18n()

const paytypeList = [
    t('cash.payMethods.stripe'),
    t('cash.payMethods.paymentAsia'),
    t('cash.payMethods.ipay88'),
    t('cash.payMethods.bankTransfer'),
    t('cash.payMethods.card'),
    t('cash.payMethods.cash'),
    t('cash.payMethods.check'),
    t('cash.payMethods.grabpay'),
    t('cash.payMethods.nets'),
    t('cash.payMethods.transfer'),
    t('cash.payMethods.paypal'),
]

const payPlatformOptions = ref([...paytypeList])

const statusOptions = [
  { label: '已到账', value: 4 },
  { label: '已退款', value: 6 }
]

// 地区树
const marketOptions = ref([])

// 查询参数
const queryParams = reactive({
  jwcode: '',
  adminMarket: [], // 下拉多选
  timeRange: [], // [startTime, endTime]
  customerMarket: [], // 客户地区
  pageNum: 1,
  pageSize: 20
})

const total = ref(0)
const tableData = ref([])
const loading = ref(false)

// 转换树形结构（参考 coinConsumeDetail.vue）
const transformTree = (nodes) => {
  const allChildren = nodes.flatMap(node => node.children || []);
  return allChildren.map(child => {
    const grandchildren = child.children && child.children.length
      ? transformTree([child])
      : null;
    return {
      value: child.name,
      label: child.name,
      children: grandchildren
    };
  });
};

// 获取地区数据
const getMarket = async () => {
  try {
    const result = await request({ url: '/market/selectMarket' });
    if (result && result.data) {
      marketOptions.value = transformTree(result.data)
    }
  } catch (error) {
    console.error('获取地区失败', error)
  }
}

// 查询列表
const fetchData = async () => {
  loading.value = true
  try {
    // 构建请求参数
    const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      performanceDTO:{
        jwcode: queryParams.jwcode,
        adminMarket: adminData.value.markets.split(',').filter(item => item.trim() !== '') || [],
        customerMarket: queryParams.customerMarket,
        startTime: queryParams.timeRange?.[0] ? dayjs(queryParams.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: queryParams.timeRange?.[1] ? dayjs(queryParams.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '',
      }
    }
    
    console.log('查询参数:', params)
    const res = await performanceSelect(params)
    if (res.code == 200) {
      tableData.value = res.data.list || []
      total.value = res.data.total || 0
      loading.value = false
    } else {
      ElMessage.error(res.msg || '获取数据失败')
      loading.value = false
    }   
  } catch (error) {
    console.error(error)
    loading.value = false
    ElMessage.error('获取数据失败')
  }
}

const handleSearch = () => {
  queryParams.pageNum = 1
  fetchData()
}

const handleReset = () => {
  queryParams.jwcode = ''
  queryParams.adminMarket = []
  queryParams.timeRange = null
  queryParams.customerMarket = []
  handleSearch()
}

const handlePageSizeChange = (val) => {
  queryParams.pageSize = val
  fetchData()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  fetchData()
}

// 退款操作
const handleRefund = (row) => {
  ElMessageBox.confirm(`确定要对订单 ${row.systemTradeNo} 进行退款吗？`, '退款确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {


    ElMessage.success('退款申请已提交')
    // 刷新列表
    fetchData()
  }).catch(() => {})
}

// ==================== 导出相关逻辑 ====================

const exportListVisible = ref(false)
const exportList = ref([])
const exportListLoading = ref(false)

// 导出Excel
const   handleExport = async () => {
  try {
  const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      performanceDTO:{
        jwcode: queryParams.jwcode,
        adminMarket: queryParams.adminMarket,
        startTime: queryParams.timeRange?.[0] ? dayjs(queryParams.timeRange[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTime: queryParams.timeRange?.[1] ? dayjs(queryParams.timeRange[1]).format('YYYY-MM-DD HH:mm:ss') : '',
        customerMarket: queryParams.customerMarket,
      }
    }
    
    // TODO: 确认导出接口 URL
    const res = await exportPerformance(params)
    if(res.code == 200){

        console.log('导出参数', params)
        ElMessage.success(t('elmessage.exportSuccess'))
    }                     
    
  } catch (error) {
    console.error(error)
    ElMessage.error('导出失败')
  }
}

// 打开导出列表弹窗
const openExportList = () => {
  getExportList()
  exportListVisible.value = true
}

// 获取导出列表
const getExportList = async () => {
  exportListLoading.value = true
  try {
    const result = await request({ url: '/export/export' })
    if (result.code === 200) {
      const filteredData = result.data.filter(item => item.type == 13);
      exportList.value = filteredData || []
    } else {
      ElMessage.error(result.msg || t('elmessage.getExportListError'))
    }
  } catch (error) {
    console.error('获取导出列表出错:', error)
    ElMessage.error(t('elmessage.getExportListError'))
  } finally {
    exportListLoading.value = false
  }
}

// 下载导出文件
const downloadExportFile = (item) => {
  if (item.state === 2) {
    const link = document.createElement('a')
    link.href = item.url
    link.download = item.fileName
    link.click()
  } else {
    ElMessage.warning(t('elmessage.exportingInProgress'))
  }
}

// 根据状态返回对应的标签类型
const getTagType = (state) => {
  switch (state) {
    case 0: return 'info';
    case 1: return 'primary';
    case 2: return 'success';
    case 3: return 'danger';
    default: return 'info';
  }
}

// 根据状态返回对应的标签文案
const getTagText = (state) => {
  switch (state) {
    case 0: return t('elmessage.pendingExecution');
    case 1: return t('elmessage.executing');
    case 2: return t('elmessage.executed');
    case 3: return t('elmessage.errorExecution');
    default: return t('elmessage.unknownStatus');
  }
}

onMounted(() => {
  getMarket()
  fetchData()
})
</script>

<template>
  <div class="cash-flow-container">
    <!-- 搜索区域 -->
    <el-card class="search-card">
      <div class="search-bar">
        <!-- 第一行 -->
        <div class="search-row">
          <div class="search-item">
            <span class="label">精网号：</span>
            <el-input v-model="queryParams.jwcode" placeholder="请输入精网号" clearable />
          </div>
          <div class="search-item">
            <span class="label">所属地区：</span>
            <!-- 下拉多选，使用 el-cascader 匹配地区树结构 -->
            <el-cascader
              v-model="queryParams.customerMarket"
              :options="marketOptions"
              :props="{ multiple: true, emitPath: false }"
              collapse-tags
              collapse-tags-tooltip
              placeholder="请选择地区"
              clearable
              style="width: 220px;"
            />
          </div>
          
         <div class="search-item" style="width: auto;">
            <span class="label">付款时间：</span>
            <el-date-picker
              v-model="queryParams.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
              style="width: 350px;"
            />
          </div>

           <div class="search-btn-group">
            <el-button type="primary" @click="handleSearch">{{ t('common.search') }}</el-button>
            <el-button type="primary" @click="handleExport">{{ t('common.exportExcel') }}</el-button>
            <el-button type="primary" @click="openExportList">{{ t('common.viewExportList') }}</el-button>
            <el-button type="success" @click="handleReset">{{ t('common.reset') }}</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card">
      <el-table :data="tableData" v-loading="loading" style="width: 100%; flex: 1;"  :header-cell-style="{ background: '#F3FAFE', color: '#333' }">
        <el-table-column type="index" label="序号" width="60" align="center" fixed="left" />
        <el-table-column prop="jwcode" label="精网号" width="120" fixed="left" />
        <el-table-column prop="name" label="姓名" width="120" show-overflow-tooltip />
        <el-table-column prop="market" label="所属地区" width="120" show-overflow-tooltip />
        <el-table-column prop="orderCode" label="系统交易号" width="180" show-overflow-tooltip />
        
        <el-table-column prop="paymentAmount" label="付款金额" width="150" align="right">
          <!-- <template #default="{ row }">
            {{ row.paymentAmount }} {{ row.paymentCurrency }}
          </template> -->
        </el-table-column>
        <el-table-column prop="paymentCurrency" label="付款币种" width="180" show-overflow-tooltip />
        
        <el-table-column prop="receivedAmount" label="到账金额" width="150" align="right">
          <!-- <template #default="{ row }">
            {{ row.receivedAmount }} {{ row.receivedCurrency }}
          </template> -->
        </el-table-column>
        <el-table-column prop="receivedCurrency" label="到账币种" width="180" show-overflow-tooltip />
        
        <el-table-column prop="handlingCharge" label="手续费" width="100" align="right" />
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 导出列表弹窗 -->
    <el-dialog v-model="exportListVisible" :title="t('common_export.exportList')" width="80%">
      <el-table :data="exportList" style="width: 100% ;height: 60vh;" :loading="exportListLoading">
        <el-table-column prop="fileName" :label="t('common_export.fileName')" />
        <el-table-column prop="state" :label="t('common_export.status')">
          <template #default="scope">
            <el-tag :type="getTagType(scope.row.state)" :effect="scope.row.state === 3 ? 'light' : 'plain'">
              {{ getTagText(scope.row.state) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="t('common_export.createTime')">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column :label="t('common_export.operation')">
          <template #default="scope">
            <el-button type="primary" size="small" @click="downloadExportFile(scope.row)"
              :disabled="scope.row.state !== 2">
              {{ t('common_export.download') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="exportListVisible = false">{{ t('common_export.close') }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.cash-flow-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-card {
  margin-bottom: 10px;
  background: #F3FAFE; // 浅蓝背景
  border: none;
  
  :deep(.el-card__body) {
    padding: 15px;
  }
}

.search-bar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.search-item {
  display: flex;
  align-items: center;

  .label {
    font-size: 15px; // 参考 coinConsumeDetail 的 .text size="large"
    color: #000; // 或 #606266
    white-space: nowrap;
    margin-right: 8px;
    min-width: 60px;
    text-align: right;
  }

  .el-input, .el-select {
    width: 200px;
  }
}

.search-btn-group {
  margin-left: 2vw; 
  display: flex;
  gap: 10px;
}

.table-card {
  background: #E7F4FD;
  flex: 1;
  border: none;
  display: flex;
  flex-direction: column;
  
  :deep(.el-card__body) {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
}

// 表格样式覆盖 (参考 coinConsumeDetail)
:deep(.el-table__header-wrapper),
:deep(.el-table__body-wrapper),
:deep(.el-table__cell),
:deep(.el-table__body td) {
  background-color: #F3FAFE !important; // 如果想完全一致可以加这个，但有时候会影响阅读，暂保留头部颜色
}

:deep(.el-table__row:hover > .el-table__cell) {
  background-color: #E5EBFE !important;
}
</style>