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, onCancel, onSelect } = 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: currentUser.phone || '', email: currentUser.email || '', }); }, [currentUser]); // 提交-编辑用户 const submitEditUser = () => { const loginName = editUserForm.getFieldValue('loginName'); const userName = editUserForm.getFieldValue('userName'); const phone = 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.success) { onCancel(); // 重新获取用户表 onSelect([`${currentUser.OUID}`]); // setExpandedKeys([`${currentUser.OUID}`]); notification.success({ message: '提交成功', duration: 2, }); } else { notification.error({ message: '提交失败', description: res.message, }); } }) .catch(err => { message.error(err); }); } }; return ( <Modal title="编辑用户" visible={visible} onOk={submitEditUser} onCancel={onCancel} okText="确认" cancelText="取消" > <Form form={editUserForm} labelCol={{ span: 4 }}> <Form.Item name="loginName" label="登录名称" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入登录名称" /> </Form.Item> <Form.Item name="userName" label="用户姓名" rules={[{ required: true, message: '不能为空' }]} > <Input placeholder="请输入用户姓名" /> </Form.Item> <Form.Item 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 name="email" label="电子邮箱" rules={[ { type: 'email', message: '请输入正确的电子邮箱!', }, ]} > <Input placeholder="请输入电子邮箱" autoComplete="off" /> </Form.Item> </Form> </Modal> ); }; export default EditUserModal;