qc-gameDataStatistics/src/pages/gameDataStatistics/adlist/monitor/index.tsx

import { useAjax } from "@/Hook/useAjax"
import { PromotionDataDay, getPromotionDataDatListApi, getPromotionDataDatTotalApi } from "@/services/gameData/adlist"
import React, { useEffect, useState } from "react"
import columns12 from "./tableConfig"
import QueryForm from "@/components/QueryForm"
import TableData from "../../components/TableData"
import moment from "moment"
import { getPresets } from "@/components/QueryForm/const"


const Monitor = () => {

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

    const getPromotionDataDatList = useAjax((params) => getPromotionDataDatListApi(params))
    const getPromotionDataDatTotal = useAjax((params) => getPromotionDataDatTotalApi(params))
    /***************************************/

    useEffect(() => {
        getPromotionDataDatList.run(queryForm)
        getPromotionDataDatTotal.run(queryForm).then(res => {
            res.id = 1
            res.agentName = '总计'
            setTotalData([res])
        })
    }, [queryForm])

    return <div>
        <TableData
            leftChild={<QueryForm
                initialValues={{ sourceSystem: 'ZX_ONE', consumeDay: [moment(), moment()] }}
                onChange={(data: any) => {
                    const { type, gameClassify, costBeginDay, costEndDay, pitcherId, sysUserName, ...params } = data
                    let newQueryForm = JSON.parse(JSON.stringify(queryForm))
                    newQueryForm.pageNum = 1
                    newQueryForm.zxPitcherId = pitcherId
                    newQueryForm.pitcherName = sysUserName
                    newQueryForm.accountType = type
                    newQueryForm.classify = gameClassify
                    if (costBeginDay && costEndDay) {
                        newQueryForm.costBeginDate = costBeginDay
                        newQueryForm.costEndDate = costEndDay
                    } else {
                        delete newQueryForm.costBeginDate
                        delete newQueryForm.costEndDate
                    }

                    setQueryForm({ ...newQueryForm, ...params })
                }}
                isSource
                isAccountId
                isAccount
                isType
                isAgentId
                isBGGameClassify
                isConsumeDay={{ ranges: getPresets() }}
                isCpName
                isGameId
                isSysUserId
                isProjectId
                isProjectName
                isPromotionId
                isPromotionName
                isAdStatus
            />}
            isZj
            totalData={totalData}
            scroll={{ x: 1000, y: 600 }}
            ajax={getPromotionDataDatList}
            fixed={{ left: 3, right: 0 }}
            dataSource={getPromotionDataDatList?.data?.records?.map((item: any, index: number) => ({ ...item, id: item?.orderId?.replace(/\D/g, '') || index }))}
            total={getPromotionDataDatList?.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={'广告监控'}
        />
    </div>
}

export default Monitor