You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
2.3 KiB
72 lines
2.3 KiB
import { Button, Form, Input, Modal } from 'antd';
|
|
import React, { useState } from 'react';
|
|
|
|
const UserModal = ({ visible, onCreate, onCancel }) => {
|
|
const [form] = Form.useForm();
|
|
const reg_tel = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
title="新建用户"
|
|
okText="新建"
|
|
cancelText="取消"
|
|
onCancel={() => {
|
|
form.resetFields();
|
|
onCancel();
|
|
}}
|
|
onOk={() => {
|
|
form
|
|
.validateFields()
|
|
.then((values) => {
|
|
form.resetFields();
|
|
onCreate(values);
|
|
})
|
|
.catch((info) => {
|
|
console.log('Validate Failed:', info);
|
|
});
|
|
}}
|
|
>
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
name="form_in_modal"
|
|
initialValues={{
|
|
modifier: 'public',
|
|
}}
|
|
>
|
|
<Form.Item
|
|
name="name"
|
|
label="姓名"
|
|
rules={[
|
|
{ required: true, message: '请输入姓名' },
|
|
{ max: 24, message: '姓名不能大于24个字符' },
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="phone"
|
|
label="用户名（手机号）"
|
|
rules={[
|
|
{ required: true, message: '请输入正确的手机号' },
|
|
{ pattern: reg_tel, message: '请输入正确的手机号' },
|
|
]}
|
|
>
|
|
<Input />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
label="密码"
|
|
rules={[
|
|
{ required: true, message: '请填写密码' },
|
|
{ min: 6, message: '请填写至少6位密码' },
|
|
]}
|
|
>
|
|
<Input type="password" />
|
|
</Form.Item>
|
|
</Form>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default UserModal;
|