qc-gameDataStatistics/src/pages/gameDataStatistics/roleOperate/roleRechargeRanking/sendPackTable.tsx

import { useAjax } from "@/Hook/useAjax"
import { delSendGiftLogApi, getSendGiftLogListApi, getSendGiftLogProps } from "@/services/gameData/roleOperate"
import { Button, DatePicker, Input, Popconfirm, Space, Table, Tag, message } from "antd"
import React, { useEffect, useState } from "react"
import { columnsSendPackLog } from "./tableConfig"
import './index.less'
import moment from "moment"
import SendPack from "./sendPack"

interface Props {
    data: any
    onChange?: () => void
}
const SendPackTable: React.FC<Props> = ({ data, onChange }) => {

    /*********************************/
    const [queryForm, setQueryForm] = useState<getSendGiftLogProps>({ pageNum: 1, pageSize: 20 })
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
    const [sendPackvisible, setSendPackVisible] = useState<boolean>(false)
    const [ids, setIds] = useState<string[]>([])
    const getSendGiftLogList = useAjax((params) => getSendGiftLogListApi(params))
    const delSendGiftLog = useAjax((params) => delSendGiftLogApi(params))
    /*********************************/

    useEffect(() => {
        getSendGiftLogList.run({
            ...queryForm,
            gameId: data.user_reg_game_id,
            roleId: data.role_id,
            serverId: data.server_id,
            userId: data.user_id
        })
    }, [queryForm, data])

    const del = (ids: any[]) => {
        delSendGiftLog.run(ids.toString()).then(res => {
            if (res) {
                onChange?.()
                getSendGiftLogList.refresh()
                message.success('删除成功')
            }
        })
    }

    const update = (ids: any[]) => {
        setIds(ids)
        setSendPackVisible(true)
    }

    return <Space style={{ width: '100%' }} direction="vertical">
        <Space>
            <Input placeholder="礼包名称" style={{ width: 120 }} allowClear value={queryForm.giftName} size="small" onChange={(e) => setQueryForm({ ...queryForm, pageNum: 1, giftName: e.target.value })} />
            <DatePicker.RangePicker
                size="small"
                showTime
                allowClear
                placeholder={['发送开始时间', '发送结束时间']}
                value={queryForm?.startDateTime && queryForm?.endDateTime ? [moment(queryForm?.startDateTime), moment(queryForm?.endDateTime)] as any : undefined}
                onChange={(e) => {
                    if (e && e.length === 2) {
                        setQueryForm({ ...queryForm, pageNum: 1, startDateTime: moment(e[0]).format('YYYY-MM-DD HH:mm:ss'), endDateTime: moment(e[1]).format('YYYY-MM-DD HH:mm:ss') })
                    } else {
                        setQueryForm({ ...queryForm, startDateTime: undefined, endDateTime: undefined })
                    }
                }}
            />
            <Button type="primary" onClick={() => { update(selectedRowKeys) }} disabled={selectedRowKeys.length === 0}>批量更新</Button>
            <Popconfirm
                title="确定删除?"
                disabled={selectedRowKeys.length === 0}
                onConfirm={() => { del(selectedRowKeys) }}
            >
                <Button danger onClick={() => { }} disabled={selectedRowKeys.length === 0}>批量删除</Button>
            </Popconfirm>
        </Space>
        <Table
            dataSource={getSendGiftLogList?.data?.records}
            columns={columnsSendPackLog(update, del)}
            loading={getSendGiftLogList.loading}
            scroll={{ x: 380, y: 300 }}
            className="uuTable"
            rowKey={'id'}
            pagination={
                {
                    total: getSendGiftLogList?.data?.total || 0,//总共多少条数据,服务器给,设置后分页自动计算页数
                    current: getSendGiftLogList?.data?.current || 1,//当前页数,需state控制配合翻页
                    pageSize: getSendGiftLogList?.data?.size || 20,
                    defaultCurrent: 1,//默认初始的当前页数
                    pageSizeOptions: ['10', '20', '30', '40', '50', '60', '70', '80', '90', '100'],
                    showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                    showSizeChanger: true, //手动开启条数筛选器，默认超过50条开启
                    size: 'small',//设置分页尺寸
                    onChange: (page: number, pageSize: number) => {
                        setQueryForm({ ...queryForm, pageNum: page, pageSize })
                    },
                    showLessItems: true
                }
            }
            rowSelection={{
                selectedRowKeys,
                onChange: (selectedRowKeys: React.Key[]) => {
                    setSelectedRowKeys(selectedRowKeys)
                },
            }}
        />

        {/* 发送礼包 */}
        {sendPackvisible && <SendPack
            visible={sendPackvisible}
            ids={ids as any}
            data={[data]}
            onClose={() => setSendPackVisible(false)}
            onChange={() => {
                setSendPackVisible(false);
                getSendGiftLogList?.refresh();
                setIds([])
                setSelectedRowKeys([])
            }}
        />}
    </Space>
}

export default React.memo(SendPackTable)