index.jsx
2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import { ConfigProvider, Modal, Form, Input, Select } from "antd";
const UserRegistration = ({ _this }) => {
const { userRegisterMode } = _this.state;
if (!userRegisterMode) return "";
const [form] = Form.useForm();
const handleCancel = () => {
_this.setState({
userRegisterMode: false,
});
};
const handleOk = () => {
form.submit();
};
const onFinish = values => {
console.log("=====Success:", values);
};
return (
<ConfigProvider prefixCls="antdV5">
<Modal
title="用户注册"
open={userRegisterMode}
okText="确认"
cancelText="取消"
onOk={handleOk}
onCancel={handleCancel}
width={400}
>
<Form
name="basic"
form={form}
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
autoComplete="off"
labelAlign="left"
>
<Form.Item label="用户名" name="username" rules={[{ required: true, message: "未填写用户名!" }]}>
<Input />
</Form.Item>
<Form.Item
label="手机号"
name="telenumber"
rules={[
{ required: true, message: "未填写手机号!" },
{
pattern: /^1[3-9]\d{9}$/,
message: "请输入有效的中国大陆手机号",
},
]}
>
<Input />
</Form.Item>
<Form.Item label="公司名称" name="company" rules={[{ required: true, message: "未选择公司!" }]}>
<Select
options={[
{ value: "xly", label: "上海小羚羊" },
{ value: "jinjia", label: "深圳劲嘉" },
{ value: "pushi", label: "四川3D" },
]}
/>
</Form.Item>
</Form>
</Modal>
</ConfigProvider>
);
};
export default UserRegistration;