qc-gameDataStatistics/src/pages/gameDataStatistics/stream/recharge/index.tsx

import { useAjax } from "@/Hook/useAjax"
import { GameRechargeListProps, getGameRechargeCountApi, getGameRechargeListApi } from "@/services/gameData/stream"
import React, { useEffect, useState } from "react"
import TableData from "../../components/TableData"
import QueryForm from "@/components/QueryForm"
import columns12 from "./tableConfig"
import { getPresets } from "@/components/QueryForm/const"
import moment from "moment"
import { Statistic, Table } from "antd"

/**
 * 充值历史
 * @returns 
 */
const Recharge: React.FC = () => {

    /********************************/
    const [queryForm, setQueryForm] = useState<GameRechargeListProps>({ pageNum: 1, pageSize: 50, sourceSystem: 'ZX_ONE', costBeginDate: moment().format('YYYY-MM-DD'), costEndDate: moment().format('YYYY-MM-DD') })
    const [totalData, setTotalData] = useState<any>({})

    const getGameRechargeList = useAjax((params) => getGameRechargeListApi(params))
    const getGameRechargeCount = useAjax((params) => getGameRechargeCountApi(params))
    /********************************/

    useEffect(() => {
        getGameRechargeCount.run(queryForm).then((res) => {
            setTotalData(res)
        })
        getGameRechargeList.run(queryForm)
    }, [queryForm])

    return <div>
        <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', consumeDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    const { costBeginDay, costEndDay, beginOrderTime, endOrderTime, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    if (costBeginDay && costEndDay) {
                        newQueryForm.costBeginDate = costBeginDay
                        newQueryForm.costEndDate = costEndDay
                    } else {
                        delete newQueryForm.costBeginDate
                        delete newQueryForm.costEndDate
                    }
                    if (beginOrderTime && endOrderTime) {
                        newQueryForm.orderBeginDate = beginOrderTime
                        newQueryForm.orderEndDate = endOrderTime
                    } else {
                        delete newQueryForm.orderBeginDate
                        delete newQueryForm.orderEndDate
                    }
                    newQueryForm.pageNum = 1
                    setQueryForm({ ...newQueryForm, ...params })
                }}
                isSource
                isGameIds
                isGameDimension
                isSysUserIds
                isAgentId
                isAccountId
                isAccountIds
                isConsumeDay={{ ranges: getPresets() }}
                isCreateDay={{}}
            />}
            isVirtually={false}
            scroll={{ x: 1000, y: 600 }}
            ajax={getGameRechargeList}
            fixed={{ left: 0, right: 0 }}
            dataSource={getGameRechargeList?.data?.records?.map((item: any, index: number) => ({ ...item, id: Number(queryForm.pageNum.toString() + index.toString()) }))}
            total={getGameRechargeList?.data?.total}
            page={queryForm.pageNum}
            pageSize={queryForm.pageSize}
            title='充值历史'
            onChange={(props: any) => {
                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={'充值历史'}
            summary={() => {
                return <Table.Summary fixed>
                    <Table.Summary.Row>
                        <Table.Summary.Cell index={0}><div style={{ fontSize: 18, fontWeight: 600, textAlign: 'center' }}>总计</div></Table.Summary.Cell>
                        <Table.Summary.Cell index={1}><div style={{ fontWeight: 600, textAlign: 'center', color: '#000000d9' }}>消耗</div></Table.Summary.Cell>
                        <Table.Summary.Cell index={2}><div style={{ textAlign: 'center' }}><Statistic value={totalData?.costCount || 0} /></div> </Table.Summary.Cell>
                        <Table.Summary.Cell index={3}><div style={{ fontWeight: 600, textAlign: 'center', color: '#000000d9' }}>充值</div></Table.Summary.Cell>
                        <Table.Summary.Cell index={4}><div style={{ textAlign: 'center' }}><Statistic value={totalData?.amountCount || 0} /></div></Table.Summary.Cell>
                        <Table.Summary.Cell index={5}><div style={{ fontWeight: 600, textAlign: 'center', color: '#000000d9' }}>回收率</div></Table.Summary.Cell>
                        <Table.Summary.Cell index={6}><div style={{ textAlign: 'center' }}><Statistic precision={2} suffix="%" value={totalData?.recoveryCount || 0} /></div></Table.Summary.Cell>
                    </Table.Summary.Row>
                </Table.Summary>
            }}
        />
    </div>
}

export default Recharge