dms-web/src/views/v1/gameLog/regDay/index.vue

<template>
  <div class="ma-content-block">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @search="handleRequestData">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
        <a-col :sm="8" :xs="24">
          <a-form-item label="游戏" field="game_id">
            <game-select v-model="searchForm.game_id" multiple />
          </a-form-item>
        </a-col>
        <a-col :sm="8" :xs="24">
          <a-form-item label="注册日期" field="reg_date">
            <a-range-picker class="w-full" v-model="searchForm.reg_date" :show-time="false" mode="date" />
          </a-form-item>
        </a-col>
      </template>

      <!-- Table 自定义渲染 -->
    </sa-table>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive, nextTick } from 'vue'
import api from '../../api/gameLog/analyse'
import dayjs from 'dayjs'
import commonApi from '../../api/common'
import GameSelect from '@/components/game-select/index.vue'

// 引用定义
const crudRef = ref()
const gameList = ref([])

// 搜索表单
const searchForm = ref({
  game_id: '',
  media_id: '',
  auth_id: '',
  agent_id: '',
  site_id: '',
  reg_date: [],
})

// SaTable 基础配置
const options = reactive({
  api: api.getRegDayDataList,
  pk: 'id',
  rowSelection: { showCheckedAll: true },
  showSummary: true,
  operationColumn: false,
  showSort: false,
  summary: [],
})

// SaTable 列配置
const columns = ref([])

// 页面数据初始化
const initPage = async () => {
  searchForm.value.reg_date = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
  await getGameList()
}

// 获取游戏列表
const getGameList = async () => {
  const res = await commonApi.getGameListTreeApi()
  if (res.code === 200) {
    gameList.value = res.data
  }
}
// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

const handleRequestData = () => {
  // 使用 nextTick 确保在 DOM 更新后再获取数据
  nextTick(() => {
    const res = crudRef.value.getResponseData()
    console.log('完整的响应数据:', res)
    console.log('totalRow 数据:', res?.totalRow)

    // 重新添加动态列，并为每一列添加合计配置
    if (res && res.columns && Array.isArray(res.columns)) {
      columns.value = res.columns
      console.log('columns updated:', columns.value)

      // 动态生成 summary 配置，dataIndex 与 columns 保持一致
      if (Array.isArray(res.columns)) {
        // 只对数值类型的列添加合计
        const numericColumns = res.columns.filter((col) => {
          // 排除日期、文本等非数值列
          const excludeFields = ['reg_date', 'date', 'time', 'name', 'title', 'description', 'game_id', 'game_name']
          return !excludeFields.includes(col.dataIndex)
        })

        // 清空并重新设置 summary 配置
        options.summary.length = 0
        numericColumns.forEach((col) => {
          options.summary.push({
            action: 'totalRow',
            dataIndex: col.dataIndex,
          })
        })

        console.log('summary config:', options.summary)
        console.log(
          'numeric columns:',
          numericColumns.map((col) => col.dataIndex)
        )
        console.log('options.summary length:', options.summary.length)
      }
    }
  })
}

// 页面加载完成执行
onMounted(async () => {
  await initPage()
  // 设置一些默认列，以防API没有返回列信息
  if (columns.value.length === 0) {
    columns.value = [
      { title: '注册日期', dataIndex: 'reg_date', width: 120 },
      { title: '注册数', dataIndex: 'reg_count', width: 100 },
    ]
  }
  refresh()
})
</script>