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

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

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

    /************************/
    const [queryForm, setQueryForm] = useState<UserRechargeListType>({ pageNum: 1, pageSize: 50, sourceSystem: 'ZX_ONE', beginDay: moment().format('YYYY-MM-DD'), endDay: moment().format('YYYY-MM-DD') })
    const getRechargeUserList = useAjax((params) => getRechargeUserListApi(params))
    /************************/

    useEffect(() => {
        getRechargeUserList.run(queryForm)
    }, [queryForm])

    return <div>
        {/* <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', rechargeDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    console.log(data)
                    const { rechargeDay, beginDay, endDay, regPayIntervalTime, ...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']
                        }
                    }
                    if (regPayIntervalTime?.length > 0 && (regPayIntervalTime[0] || regPayIntervalTime[1])) {
                        newQueryForm.latestAmountUntilNowTimeMin = regPayIntervalTime[0]
                        newQueryForm.latestAmountUntilNowTimeMax = regPayIntervalTime[1]
                    } else {
                        delete newQueryForm.latestAmountUntilNowTimeMin
                        delete newQueryForm.latestAmountUntilNowTimeMax
                    }
                    setQueryForm({ ...newQueryForm, ...par })
                }}
                isSource
                rechargeDay={{ ranges: getPresetsRanking() }}
                isPayIntervalTime={{ tips: '最近充值时间距今的间隔时间(分)' }}
            />}
            scroll={{ x: 1000, y: 600 }}
            ajax={getRechargeUserList}
            fixed={{ left: 1, right: 0 }}
            dataSource={getRechargeUserList?.data?.records}
            page={getRechargeUserList?.data?.current || 1}
            pageSize={getRechargeUserList?.data?.size || 20}
            total={getRechargeUserList?.data?.total || 0}
            title='玩家充值排行榜'
            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()}
            configName={'玩家充值排行榜'}
        /> */}

        <TablePro
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', rechargeDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    console.log(data)
                    const { rechargeDay, beginDay, endDay, regPayIntervalTime, ...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']
                        }
                    }
                    if (regPayIntervalTime?.length > 0 && (regPayIntervalTime[0] || regPayIntervalTime[1])) {
                        newQueryForm.latestAmountUntilNowTimeMin = regPayIntervalTime[0]
                        newQueryForm.latestAmountUntilNowTimeMax = regPayIntervalTime[1]
                    } else {
                        delete newQueryForm.latestAmountUntilNowTimeMin
                        delete newQueryForm.latestAmountUntilNowTimeMax
                    }
                    setQueryForm({ ...newQueryForm, ...par })
                }}
                isSource
                rechargeDay={{ ranges: getPresetsRanking() }}
                isPayIntervalTime={{ tips: '最近充值时间距今的间隔时间(分)' }}
            />}
            config={columns12()}
            configName={'玩家充值排行榜'}
            fixed={{ left: 1, right: 0 }}
            scroll={{ x: 1000, y: 600 }}
            title='玩家充值排行榜'
            loading={getRechargeUserList.loading}
            ajax={getRechargeUserList}
            page={getRechargeUserList?.data?.current || 1}
            pageSize={getRechargeUserList?.data?.size || 20}
            total={getRechargeUserList?.data?.total || 0}
            dataSource={getRechargeUserList?.data?.records}
            onChange={(pagination: any, _: any, sortData: any) => {
                console.log('props--->', pagination, sortData)
                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 })
            }}
        />
    </div>
}

export default Gamer