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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
/* eslint-disable import/no-unresolved */
import React, { useEffect } from 'react';
import { Modal, Form, Input, notification, message } from 'antd';
import voca from 'voca';
import { editUser } from '@/services/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(() => {
console.log(currentUser);
editUserForm.setFieldsValue({
loginName: voca.stripTags(currentUser.loginName),
userName: voca.stripTags(currentUser.userName),
phone: voca.stripTags(currentUser.phone) || '',
email: currentUser.email || '',
});
}, [visible]);
// 提交-编辑用户
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);
});
}
};
const title = (
<span>
编辑用户
<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
【{currentUser.userName}】
</span>
的信息
</span>
);
return (
<Modal
title={title}
visible={visible}
maskClosable={false}
destroyOnClose
// afterClose={() => {
// editUserForm.resetFields();
// }}
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={[
{
pattern: /^[a-zA-Z0-9_]{0,}$/,
message: '不支持中文和特殊字符',
},
{ required: true },
]}
>
<Input placeholder="登录名称不支持中文与特殊字符" maxLength="20" />
</Form.Item>
<Form.Item
hasFeedback
name="userName"
label="用户姓名"
rules={[
{ required: true },
{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不支持特殊字符' },
]}
>
<Input placeholder="用户姓名不支持特殊字符" maxLength="20" />
</Form.Item>
<Form.Item
hasFeedback
name="phone"
label="手机号码"
rules={[
{
pattern: new RegExp(/^1[0-9]{10}$/),
message: '手机号码以1开头11位',
},
]}
>
<Input placeholder="请输入11位手机号码" autoComplete="off" maxlength="11" />
</Form.Item>
<Form.Item
hasFeedback
name="email"
label="电子邮箱"
rules={[
{
type: 'email',
message: '请输入正确的电子邮箱!',
},
]}
>
<Input placeholder="请输入电子邮箱" autoComplete="off" />
</Form.Item>
</Form>
</Modal>
);
};
export default EditUserModal;