充值渠道汇总调整

src/views/v1/customer/reconciliation/payChannelIncome/index.vue

@@ -1,65 +1,42 @@
 <template>
-  <a-layout-content class="flex flex-col lg:h-full relative w-full">
-    <a-card :bordered="false">
-      <a-row>
-        <a-col :flex="1">
-          <a-form :model="searchForm" ref="searchFormRef" :auto-label-width="true">
-            <a-row :gutter="10">
-              <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="pay_channel_id">
-                  <a-select
-                    v-model="searchForm.pay_channel_id"
-                    :options="payChannelOptions"
-                    allow-clear
-                    placeholder="请选择充值渠道"
-                    multiple>
-                    <a-option v-for="item in payChannelOptions" :key="item.id" :value="item.id">{{
-                      item.name
-                    }}</a-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col :sm="8" :xs="24">
-                <a-form-item label="日期" field="pay_date">
-                  <a-range-picker
-                    v-model="searchForm.pay_date"
-                    type="date"
-                    format="YYYY-MM-DD"
-                    allow-clear
-                    :max-date="new Date()"
-                    :min-date="new Date('2025-01-01')"
-                    :allow-clear="false" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
+  <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 :xs="24" :sm="8" :style="{ textAlign: 'right', marginBottom: '15px' }">
-          <a-space direction="horizontal" :size="20">
-            <a-button type="primary" @click="getChannelIncome">
-              <template #icon>
-                <icon-search />
-              </template>
-              {{ '搜索' }}
-            </a-button>
-            <a-button @click="resetSearch">
-              <template #icon>
-                <icon-refresh />
-              </template>
-              {{ '重置' }}
-            </a-button>
-          </a-space>
+        <a-col :sm="8" :xs="24">
+          <a-form-item label="充值渠道" field="pay_channel_id">
+            <a-select
+              v-model="searchForm.pay_channel_id"
+              allow-clear
+              :max-tag-count="1"
+              placeholder="请选择充值渠道"
+              multiple>
+              <a-option v-for="item in payChannelOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
+            </a-select>
+          </a-form-item>
         </a-col>
-      </a-row>
-      <a-divider style="margin-top: 0; margin-bottom: 15px" />
-      <a-table border :columns="columns" :data="data" :pagination="false" />
-    </a-card>
-  </a-layout-content>
+        <a-col :sm="8" :xs="24">
+          <a-form-item label="日期" field="pay_date">
+            <a-range-picker
+              v-model="searchForm.pay_date"
+              type="date"
+              format="YYYY-MM-DD"
+              allow-clear
+              :max-date="new Date()"
+              :min-date="new Date('2025-01-01')"
+              :allow-clear="false" />
+          </a-form-item>
+        </a-col>
+      </template>
+
+      <!-- Table 自定义渲染 -->
+    </sa-table>
+  </div>
 </template>
 
 <script setup>
@@ -68,6 +45,7 @@ import api from '../../../api/customer/reconciliation'
 import commonApi from '../../../api/common'
 import dayjs from 'dayjs'
 import GameSelect from '@/components/game-select/index.vue'
+import { nextTick } from 'vue'
 
 // 引用定义
 const crudRef = ref()
@@ -79,11 +57,18 @@ const payChannelOptions = ref([])
 const searchForm = ref({
   game_id: '',
   pay_channel_id: '',
+  pay_date: [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
 })
 
 // SaTable 基础配置
 const options = reactive({
-  rowSelection: { showCheckedAll: false },
+  singleLine: true,
+  api: api.getPageList,
+  pk: 'id',
+  showSummary: true,
+  operationColumn: false,
+  showSort: false,
+  summary: [],
 })
 
 // SaTable 列配置
@@ -92,9 +77,7 @@ const columns = ref([])
 // 页面数据初始化
 const initPage = async () => {
   await getPayChannelOptions()
-  // 默认充值日期最近7天
-  searchForm.value.pay_date = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
-  await getChannelIncome()
+  // await getChannelIncome()
 }
 
 const getPayChannelOptions = async () => {
@@ -102,16 +85,27 @@ const getPayChannelOptions = async () => {
   payChannelOptions.value = res.data
 }
 
-const getChannelIncome = async () => {
-  let params = {
-    ...searchForm.value,
-  }
-  if (params.pay_channel_id) {
-    params.pay_channel_id = params.pay_channel_id.join(',')
-  }
-  const res = await api.getPageList(params)
-  columns.value = res.data.columns
-  data.value = res.data.data
+const handleRequestData = () => {
+  // 使用 nextTick 确保在 DOM 更新后再获取数据
+  nextTick(() => {
+    const res = crudRef.value.getResponseData()
+
+    // 重新添加动态列，并为每一列添加合计配置
+    if (res && res.columns && Array.isArray(res.columns)) {
+      console.log(res.columns)
+      columns.value = res.columns
+
+      // 动态生成 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)
+        })
+      }
+    }
+  })
 }
 
 // SaTable 数据请求