ad-manage/src/pages/launchSystemNew/launchManage/createAd/submitModal.tsx

import { SpeedMode } from "@/services/launchAdq/enum"
import { QuestionCircleOutlined } from "@ant-design/icons"
import { Form, Input, Modal, InputNumber, Tooltip, Select } from "antd"
import React, { useState } from "react"


/**
 * 设置名称
 * @returns 
 */
interface Props {
    data: any,
    visible?: boolean,
    onClose?: () => void,
    onChange?: (data: any) => void
    ajax?: any
}
const SubmitModal: React.FC<Props> = (props) => {

    /********************/
    const { visible, onClose, onChange, ajax, data } = props
    const [form] = Form.useForm()
    const [initialValues, setInitialValues] = useState<{ speedMode: string, count?: number }>({ count: 1, speedMode: 'SPEED_MODE_STANDARD' })

    const handleOk = async () => {
        form.submit()
        let data = await form.validateFields()
        onChange && onChange(data)
    }

    return <Modal title="设置名称" visible={visible} confirmLoading={ajax?.loading} onOk={handleOk} onCancel={() => { onClose && onClose() }}>
        <Form
            name="basic"
            form={form}
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 20 }}
            autoComplete="off"
            initialValues={{ ...initialValues }}
        >
            <Form.Item label={<strong>计划名称</strong>} name="campaignName">
                <Input placeholder="请输入计划名称" />
            </Form.Item>
            <Form.Item label={<strong>投放方式</strong>} name="speedMode" rules={[{ required: true, message: '请选择投放方式!' }]}>
                <Select
                    style={{ width: 200 }}
                    placeholder="请选择投放方式"
                    showSearch
                    filterOption={(input: any, option: any) =>
                        (option!.children as unknown as string).toLowerCase().includes(input.toLowerCase())
                    }
                >
                    {Object.keys(SpeedMode).map(key => {
                        return <Select.Option value={key} key={key}>{SpeedMode[key]}</Select.Option>
                    })}
                </Select>
            </Form.Item>
            <Form.Item label={<strong>创建数量<Tooltip title='每条计划创建的数量!'><QuestionCircleOutlined /></Tooltip></strong>} name="count">
                <InputNumber placeholder="创建数量" min={1} max={30} />
            </Form.Item>
        </Form>
    </Modal>
}

export default React.memo(SubmitModal)