publictransportation/src/pages/linePageChild/summaryData/components/modal.jsx

import {Form, InputNumber, message, Modal,} from 'antd';
import axios from '@/utils/axios.js'
import {useEffect} from 'react'
import './modal.scss'


export default function ModalHooks({isModalOpen, closeModal, row}) {
    const [messageApi, contextHolder] = message.useMessage();
    // 表单
    const [form] = Form.useForm();

    let passengerOption = [
        {value: 1, label: '老年卡'},
        {value: 2, label: '学生卡'},
        {value: 3, label: '电子钱包'},
        {value: 4, label: '现金'},
        {value: 5, label: '其他'},

    ]

    /**
     *确定时候的回调
     */
    function handleOk() {
        // 验证表单
        form.validateFields().then(async () => {
            let formData = JSON.parse(JSON.stringify(form.getFieldsValue()))
            if (row?.id) {
                // 修改数据
                formData.id = row.id
            }
            let {code, message} = await axios.post('/lineOperateEdit/editBusLineStatistics', formData)
            if (code === 200) {
                messageApi.success(message)
                handleCancel()
            } else {
                messageApi.error(message)
            }
        })
    }

    // 关闭页面
    const handleCancel = () => {
        closeModal(false);
        form.resetFields()
    };
    // 表单
    useEffect(() => {
        if (row.id) {
            let formData = JSON.parse(JSON.stringify(row))
            form.setFieldsValue(formData)

        }
    }, [row])


    return (
        <div className="form">

            {contextHolder}
            <Modal title={row?.id ? '修改数据' : '新增数据'} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
                   width={900}
                   cancelText="取消" okText="确定">
                <Form
                    name="statics"
                    form={form}
                    wrapperCol={
                        {span: 30, offset: 0}
                    }
                    layout='inline'
                    initialValues={{
                        remember: true,
                    }}

                    autoComplete="off"
                >
                    <Form.Item
                        label="当前里程"
                        name="currentMileage"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="空驶率"
                        name="unloadedRatio"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="今日客流"
                        name="passengerFlow"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="计划里程"
                        name="planMileage"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="塌班"
                        name="collapseClasses"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="计划班次"
                        name="planClasses"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="已发班次"
                        name="setOutClasses"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>


                </Form>

            </Modal>
        </div>
    )


}