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

import {Form, Input, InputNumber, message, Modal, Select, TimePicker} from 'antd';
import axios from '@/utils/axios.js'
import {useEffect} from 'react'
import './modal.scss'
import dayjs from "dayjs";
import customParseFormat from 'dayjs/plugin/customParseFormat'

export default function ModalHooks({isModalOpen, closeModal, row, lineList, option, val}) {
    const [messageApi, contextHolder] = message.useMessage();
    // 表单
    const [form] = Form.useForm();
    const directionOption = [
        {value: 2, label: '下行'},
        {value: 1, label: '上行'}
    ]
    let typeOptions = [
        {value: 1, label: '已完成'},

        {value: 2, label: '执行中'},
        {value: 3, label: '已处理'},
        {value: 4, label: '已下发'},
        {value: 5, label: '待发'},
        {value: 6, label: '调停'},
        {value: 7, label: '非运营'},
    ]

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

    // 关闭页面
    const handleCancel = () => {
        closeModal(false);
        form.resetFields()
    };
    // 表单
    useEffect(() => {
        form.setFieldValue('lineId', val)
        if (row.id) {
            dayjs.extend(customParseFormat)
            let formData = JSON.parse(JSON.stringify(row))
            formData.dispatchTime = dayjs(formData.dispatchTime, 'HH:mm')
            formData.realityTime = dayjs(formData.realityTime, 'HH:mm')
            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="lineId"
                        rules={[
                            {
                                required: true,
                                message: '请输入',

                            },
                        ]}

                    >
                        <Select options={option} style={{width: '100%'}} disabled></Select>
                    </Form.Item>

                    <Form.Item
                        label="电量"
                        name="electricity"
                        rules={[
                            {
                                required: true,
                                message: '请输入',

                            },
                        ]}

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

                    <Form.Item
                        label="车牌号"
                        name="licensePlate"
                        rules={[
                            {
                                required: true,
                                message: '请选择',
                            },
                        ]}
                    >
                        <Input></Input>
                    </Form.Item>

                    <Form.Item
                        label="司机名称"
                        name="driver"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <Input style={{width: '100%'}}/>
                    </Form.Item>


                    <Form.Item
                        label="调度时间"
                        name="dispatchTime"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                                type: "object"
                            },
                        ]}
                    >
                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
                    </Form.Item>
                    <Form.Item
                        label="实际发车时间"
                        name="realityTime"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                                type: "object"
                            },
                        ]}
                    >
                        <TimePicker format={'HH:mm'} style={{width: '100%'}}></TimePicker>
                    </Form.Item>

                    <Form.Item
                        label="发车间隔-分钟"
                        name="intervalTime"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <InputNumber style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="上/下行"
                        name="direction"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}
                    >
                        <Select options={directionOption}></Select>
                    </Form.Item>
                    <Form.Item
                        label="类型"
                        name="type"
                        rules={[
                            {
                                required: true,
                                message: '请输入',

                            },
                        ]}
                    >
                        <Select options={typeOptions}></Select>
                    </Form.Item>

                </Form>

            </Modal>
        </div>
    )


}