publictransportation/src/pages/settingPageChild/user/components/modal.jsx

import {Form, Input, message, Modal, Select} from 'antd';
import axios from '@/utils/axios.js'
import {useEffect} from 'react'

export default function ModalHooks({isModalOpen, closeModal, row}) {
    const [messageApi, contextHolder] = message.useMessage();
    // 表单
    const [form] = Form.useForm();
    // 下拉选项
    const selectOption = [
        {value: 0, label: '管理员'},
        {value: 1, label: '访客'}
    ]

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

    // 关闭页面
    const handleCancel = () => {
        closeModal(false);
        form.resetFields()
    };
    // 表单
    useEffect(() => {
        // console.log(row)
        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="basic"
                    form={form}
                    wrapperCol={
                        {span: 30, offset: 0}
                    }
                    layout='inline'
                    initialValues={{
                        remember: true,
                    }}

                    autoComplete="off"
                >


                    <Form.Item
                        label="用户名"
                        name="account"
                        rules={[
                            {
                                required: true,
                                message: '请输入用户名',

                            },
                        ]}

                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '请输入6位以上密码',
                                min: 6
                            },
                        ]}
                    >
                        <Input.Password disabled={row?.id}/>
                    </Form.Item>

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

                    <Form.Item
                        label="手机号"
                        name="phone"
                        rules={[
                            {
                                required: true,
                                message: '请输入11位手机号',
                                len: 11

                            },
                        ]}
                    >
                        <Input style={{width: 183}}/>
                    </Form.Item>


                    <Form.Item
                        label="类型"
                        name="type"
                        rules={[
                            {
                                required: true,
                                message: '请输入类型',

                            },
                        ]}
                    >
                        <Select options={selectOption} style={{width: 205}}>

                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="备注"
                        name="remark"
                        rules={[
                            {
                                required: false,
                                message: '请输入备注',

                            },
                        ]}
                    >
                        <Input.TextArea style={{width: 188}}/>
                    </Form.Item>

                </Form>

            </Modal>
        </div>
    )


}