qc-gameDataStatistics/src/pages/gameDataStatistics/rankingList/game/index.tsx

import { useAjax } from "@/Hook/useAjax"
import { GameRechargeListType, getRechargeGameListApi } from "@/services/gameData/rankingList"
import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import columns12 from "./tableConfig"
import moment from "moment"
import QueryForm from "@/components/QueryForm"
import { getPresetsRanking } from "@/components/QueryForm/const"
import { getGameChoiceParentListType1Api } from "@/services/gameData"


const Game: React.FC = () => {

    /************************/
    const [queryForm, setQueryForm] = useState<GameRechargeListType>({ pageNum: 1, pageSize: 100, sourceSystem: 'ZX_ONE', beginDay: moment().format('YYYY-MM-DD'), endDay: moment().format('YYYY-MM-DD') })
    const [gameType, setGameType] = useState<any>({})

    const getRechargeGameList = useAjax((params) => getRechargeGameListApi(params))
    const getGameChoiceParentListType1 = useAjax(() => getGameChoiceParentListType1Api())
    /************************/

    useEffect(() => {
        getRechargeGameList.run(queryForm)
    }, [queryForm])
    useEffect(() => {
        getGameChoiceParentListType1.run().then((res: { id: number; name: string }[]) => {
            let newType: any = {}
            res.forEach((item: { id: number, name: string }) => {
                newType[item.id] = item.name
            })
            setGameType(newType)
        })
    }, [])

    return <div>
        <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', rechargeDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    console.log(data)
                    const { rechargeDay, beginDay, endDay, ...par } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    if (rechargeDay && rechargeDay?.length === 2) {
                        newQueryForm['beginDay'] = moment(rechargeDay[0]).format('YYYY-MM-DD')
                        newQueryForm['endDay'] = moment(rechargeDay[1]).format('YYYY-MM-DD')
                    } else {
                        if (beginDay && endDay) {
                            newQueryForm['beginDay'] = beginDay
                            newQueryForm['endDay'] = endDay
                        } else {
                            delete newQueryForm['beginDay']
                            delete newQueryForm['endDay']
                        }
                    }
                    setQueryForm({ ...newQueryForm, ...par })
                }}
                isSource
                rechargeDay={{ ranges: getPresetsRanking() }}
            />}
            scroll={{ x: 1200, y: 600 }}
            ajax={getRechargeGameList}
            fixed={{ left: 1, right: 0 }}
            dataSource={getRechargeGameList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
            page={getRechargeGameList?.data?.current || 1}
            pageSize={getRechargeGameList?.data?.size || 20}
            total={getRechargeGameList?.data?.total || 0}
            title='游戏充值排行榜(T+1)'
            onChange={(props: any) => {
                console.log('props--->', props)
                let { pagination, sortData } = props
                let { current, pageSize } = pagination
                let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                if (sortData && sortData?.order) {
                    newQueryForm['sortType'] = sortData?.order === 'ascend' ? 'asc' : 'desc'
                    newQueryForm['sortFiled'] = sortData?.field
                } else {
                    delete newQueryForm['sortType']
                    delete newQueryForm['sortFiled']
                }
                newQueryForm.pageNum = current
                newQueryForm.pageSize = pageSize
                setQueryForm({ ...newQueryForm })
            }}
            config={columns12(gameType)}
            configName={'游戏充值排行榜'}
        />
    </div>
}

export default Game