publictransportation/src/pages/facilityManagementChild/informationOfFacilities/components/modal.jsx

import {Form, Input, 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: '充电'},
        {value: 6, label: '公务'},

    ]
    //状态下拉框
    const status = [
        {value: 1, label: '运营'},
        {value: 2, 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('/editFacilityStatistics/editFacilityStatistics', [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="area"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <Input style={{width: '100%'}}></Input>
                    </Form.Item>
                    <Form.Item
                        label="损坏数量"
                        name="damageNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="电子站牌"
                        name="stationNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="车辆"
                        name="vehicleNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="车载部件"
                        name="vehicleComponentsNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="洗车机"
                        name="carWasherNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="充电桩"
                        name="chargingStationNum"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                </Form>

            </Modal>
        </div>
    )


}