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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
import React, { useEffect } from 'react';
import { Modal, Form, Input, notification, message } from 'antd';
import voca from 'voca';
import { editUser } from '@/services/userCenter/userManage/api';
const EditUserModal = props => {
const {
visible,
currentUser,
currentSelectOrg,
onCancel,
onSelect,
submitSearchUser,
} = props;
const [editUserForm] = Form.useForm(); // 编辑用户
/** ***正则验证**** */
const noChinese = new RegExp(/^[^\u4e00-\u9fa5]+$/); // 不能包含中文
const isPhone = new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/); // 手机号
const isEmail = new RegExp(
/^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/,
); // 邮箱
useEffect(() => {
editUserForm.setFieldsValue({
loginName: voca.stripTags(currentUser.loginName),
userName: voca.stripTags(currentUser.userName),
phone: voca.stripTags(currentUser.phone) || '',
email: currentUser.email || '',
});
}, [currentUser]);
// 提交-编辑用户
const submitEditUser = () => {
const loginName = voca.stripTags(editUserForm.getFieldValue('loginName'));
const userName = voca.stripTags(editUserForm.getFieldValue('userName'));
const phone = voca.stripTags(editUserForm.getFieldValue('phone')) || '';
const email = editUserForm.getFieldValue('email') || '';
// 正则验证
if (loginName === '') {
notification.error({
message: '提交失败',
description: '登录名称不能为空!',
});
} else if (!noChinese.test(loginName)) {
notification.error({
message: '提交失败',
description: '登录名不支持中文!',
});
} else if (userName === '') {
notification.error({
message: '提交失败',
description: '用户姓名不能为空!',
});
} else if (phone !== '' && !isPhone.test(phone)) {
notification.error({
message: '提交失败',
description: '请输入11位手机号!',
});
} else if (email !== '' && !isEmail.test(email)) {
notification.error({
message: '提交失败',
description: '邮箱格式不正确!',
});
}
// 所有验证通过才可以提交,phone/email为空时不验证
else if (
loginName &&
noChinese.test(loginName) &&
userName &&
(phone === '' || isPhone.test(phone)) &&
(email === '' || isEmail.test(email))
) {
editUser(currentUser.userID, loginName, userName, phone, email)
.then(res => {
if (res.msg==='') {
onCancel();
// 重新获取用户表
// eslint-disable-next-line no-unused-expressions
currentSelectOrg === '-1'
? submitSearchUser()
: onSelect([currentSelectOrg]);
notification.success({
message: '提交成功',
duration: 2,
});
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
editUserForm.setFieldsValue({
loginName: voca.stripTags(currentUser.loginName),
userName: voca.stripTags(currentUser.userName),
phone: voca.stripTags(currentUser.phone) || '',
email: currentUser.email || '',
});
})
.catch(err => {
message.error(err);
});
}
};
return (
<Modal
title="编辑用户"
visible={visible}
onOk={submitEditUser}
onCancel={() => {
onCancel();
editUserForm.setFieldsValue({
loginName: voca.stripTags(currentUser.loginName),
userName: voca.stripTags(currentUser.userName),
phone: voca.stripTags(currentUser.phone) || '',
email: currentUser.email || '',
});
}}
okText="确认"
cancelText="取消"
>
<Form form={editUserForm} labelCol={{ span: 4 }}>
<Form.Item
hasFeedback
name="loginName"
label="登录名称"
rules={[{ message: '不能为空' }]}
>
<Input placeholder="请输入登录名称" />
</Form.Item>
<Form.Item
hasFeedback
name="userName"
label="用户姓名"
rules={[{ message: '不能为空' }]}
>
<Input placeholder="请输入用户姓名" />
</Form.Item>
<Form.Item
hasFeedback
name="phone"
label="手机号码"
rules={[
{
pattern: new RegExp(/^1(3|4|5|6|7|8|9)\d{9}$/),
message: '请输入11位手机号码!',
},
]}
>
<Input placeholder="请输入11位手机号码" autoComplete="off" />
</Form.Item>
<Form.Item
hasFeedback
name="email"
label="电子邮箱"
rules={[
{
type: 'email',
message: '请输入正确的电子邮箱!',
},
]}
>
<Input placeholder="请输入电子邮箱" autoComplete="off" />
</Form.Item>
</Form>
</Modal>
);
};
export default EditUserModal;