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

import {Form, Input, InputNumber, message, Modal, Select,} from 'antd';
import {useEffect, useRef} from 'react'
import './modal.scss'
import {useSelector} from "react-redux";
import {getChild} from "@/utils/getDict.js";
import axios from "@/utils/axios.js";


export default function ModalHooks({isModalOpen, closeModal, row, inputVal}) {
    const [messageApi, contextHolder] = message.useMessage();
    // 获取store的数据
    const dictData = useSelector((state) => state.counter.dictData);
    // 表单
    const [form] = Form.useForm();
    // 下拉框数值
    let option = useRef([])
    //状态下拉框
    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
            }
            formData.modelType = inputVal

            let {code, message} = await axios.post('/homePageEdit/editMapElement', 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])
    useEffect(() => {
        option.current = getChild(dictData, inputVal)
    }, [inputVal]);

    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="type"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <Select options={option.current} fieldNames={{label: 'name', value: 'val',}}></Select>
                    </Form.Item>
                    <Form.Item
                        label="元素名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请输入',

                            },
                        ]}

                    >
                        <Input></Input>
                    </Form.Item>
                    <Form.Item
                        label="经度"
                        name="lon"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

                    >
                        <InputNumber min={0} style={{width: '100%'}}></InputNumber>
                    </Form.Item>
                    <Form.Item
                        label="维度"
                        name="lat"
                        rules={[
                            {
                                required: true,
                                message: '请输入',
                            },
                        ]}

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

                </Form>

            </Modal>
        </div>
    )


}