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

import { useAjax } from "@/Hook/useAjax"
import { getPackListApi } from "@/services/gameData"
import { addOrUpdateGiftApi } from "@/services/gameData/roleOperate"
import { DatePicker, Form, Modal, Select, message } from "antd"
import React, { useEffect } from "react"
import moment from "moment"

interface Props {
    data: any[]
    ids?: any[];
    visible?: boolean
    onClose?: () => void
    onChange?: () => void
}
/**
 * 发送Email
 * @returns 
 */
const SendPack: React.FC<Props> = ({ data = [], ids, visible, onClose, onChange }) => {

    /************************************/
    const [form] = Form.useForm()
    const getPackList = useAjax((params) => getPackListApi(params))
    const addOrUpdateGift = useAjax((params) => addOrUpdateGiftApi(params))
    /************************************/

    useEffect(() => {
        if (ids?.length === 1) {
            const { sendTime, giftId } = ids?.[0]
            form.setFieldsValue({ sendTime: sendTime ? moment(sendTime) : undefined, giftId })
        }
    }, [ids])

    useEffect(() => {
        getPackList.run({})
    }, [data])

    const handleOk = async () => {
        let validate = await form.validateFields()
        const { sendTime, giftId } = validate
        let params: any = { giftId, sendTime: moment(sendTime).format('YYYY-MM-DD HH:mm:ss') }
        if (ids) {
            params.ids = ids.map((item: any) => item.id)
        }
        let roleInfoList = data.map(item => {
            return {
                gameId: item.user_reg_game_id,
                roleId: item.role_id,
                serverId: item.server_id,
                userId: item.user_id
            }
        })
        params.roleInfoList = roleInfoList
        addOrUpdateGift.run(params).then(res => {
            if (res) {
                message.success('成功')
                onChange?.()
            }
        })
    }

    return <Modal
        title={`${ids && ids?.length > 0 ? '修改' : '发送'}礼包记录`}
        visible={visible}
        onCancel={onClose}
        onOk={handleOk}
        confirmLoading={addOrUpdateGift.loading}
    >
        <Form
            name="basicExportPack"
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            autoComplete="off"
        >
            <Form.Item
                label="发送时间"
                name="sendTime"
                rules={[{ required: true, message: '请选择发送时间' }]}
            >
                <DatePicker style={{ width: '100%' }} showTime />
            </Form.Item>
            <Form.Item
                label="礼包"
                name="giftId"
                rules={[{ required: true, message: '请选择礼包' }]}
            >
                <Select
                    maxTagCount={1}
                    showSearch
                    style={{ minWidth: 140 }}
                    allowClear
                    placeholder={'请选择礼包'}
                    filterOption={(input, option) =>
                        (option?.children as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }
                >
                    {getPackList?.data?.map((item: { id: React.Key | null | undefined; giftName: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined }) => <Select.Option value={item.id} key={item.id}>{item.giftName}</Select.Option>)}
                </Select>
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(SendPack)