import React, { useEffect, useState } from 'react'; import { Modal, Form, Input, notification, message, TreeSelect } from 'antd'; import { addUser, GetUserRelationListNew } from '@/services/userManage/api'; import classNames from 'classnames'; import sha1 from 'sha1'; import { ok } from '../../../assets/images/icons/ok.svg'; import styles from './AddUserModal.less'; const { SHOW_CHILD } = TreeSelect; const AddUserModal = props => { const { visible, orgID, onCancel, updateTrees1, orgTitle1, onSelect } = props; const [addUserForm] = 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,}$/, ); // 邮箱 const [value, setValue] = useState(['0-1-1']); const [treeData, setTreeData] = useState([]); const [passwordLevel, setPasswordLevel] = useState(''); // 密码等级 const onChange = newValue => { console.log('onChange ', value); setValue(newValue); }; useEffect(() => { if (visible) { addUserForm.resetFields(); getEmptyRoleList(); } else { setPasswordLevel(''); } }, [orgID, visible]); // 获取全部未勾选站点列表 const getEmptyRoleList = () => { GetUserRelationListNew({ userID: 0 }) .then(res => { if (res.code === 0) { let aa = {}; console.log(res.data.stationList); res.data.stationList.map(i => { aa.title = i.visibleTitle; aa.value = i.visibleValue; aa.key = i.visibleValue; aa.children = []; i.stationList.map(j => { let bb = {}; bb.title = j.stationName; bb.value = j.stationID; bb.key = j.stationID; aa.children.push(bb); }); }); console.log(aa); let data = []; data.push(aa); setTreeData(data); } else { notification.error({ message: '获取失败', description: res.msg, }); } }) .catch(err => { message.error(err); }); }; // 提交-添加用户 const submitAddUser = () => { const loginName = addUserForm.getFieldValue('loginName') || ''; const userName = addUserForm.getFieldValue('userName') || ''; const password = addUserForm.getFieldValue('password') || ''; const phone = addUserForm.getFieldValue('phone') || ''; const email = addUserForm.getFieldValue('email') || ''; // 正则验证 if (loginName === '') { notification.error({ message: '提交失败', description: '登录名不能为空!', }); } else if (!noChinese.test(loginName)) { notification.error({ message: '提交失败', description: '登录名不支持中文!', }); } else if (password === '') { notification.error({ message: '提交失败', description: '密码不能为空!', }); } else if (password.length < 6) { notification.error({ message: '提交失败', description: '密码至少为6位,且包含数字和字母!', }); } 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 ( noChinese.test(loginName) && password.length >= 6 && userName && (phone === '' || isPhone.test(phone)) && (email === '' || isEmail.test(email)) ) { addUser({ OUID: orgID.id, loginName, userName, password: sha1(password).toUpperCase(), phone, email, }) .then(res => { if (res.code === 0) { addUserForm.resetFields(); onCancel(); // 设置Modal不可见 notification.success({ message: '提交成功', duration: 2, }); updateTrees1(orgID.id); onSelect([`${orgID.id}`]); // 重新获取用户表 } else { notification.error({ message: '提交失败', description: res.msg, }); } }) .catch(err => { message.error(err); }); } }; // 密码强度验证 const changeValue = changedFields => { if (changedFields[0].name[0] === 'password') { // console.log(changedFields[0].value); checkStrong(changedFields[0].value); // console.log(checkStrong(changedFields[0].value)); } }; const checkStrong = sValue => { let modes = 0; // 正则表达式验证符合要求的 if (sValue.length < 1) return modes; if (/\d/.test(sValue)) modes++; // 数字 if (/[a-z]/.test(sValue)) modes++; // 小写 if (/[A-Z]/.test(sValue)) modes++; // 大写 if (/[_\W]/.test(sValue)) modes++; // 特殊字符 console.log(modes, 'modes'); // 逻辑处理 // eslint-disable-next-line default-case switch (modes) { case 1: setPasswordLevel('弱'); break; case 2: if (sValue.length > 8) { setPasswordLevel('中'); } else { setPasswordLevel('弱'); } break; case 3: if (sValue.length > 8) { setPasswordLevel('强'); } else { setPasswordLevel('中'); } break; case 4: setPasswordLevel('强'); break; } }; const title = ( <span> 在<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>【{orgTitle1}】</span> 下添加用户 </span> ); const tProps = { treeData, value, onChange, treeCheckable: true, showCheckedStrategy: SHOW_CHILD, placeholder: '请选择关联站点', style: { width: '100%', }, }; return ( <Modal title={title} visible={visible} onCancel={onCancel} maskClosable={false} destroyOnClose afterClose={() => { addUserForm.resetFields(); setPasswordLevel(''); }} onOk={submitAddUser} okText="确认" cancelText="取消" > <div className={styles.modalContent}> <Form form={addUserForm} labelCol={{ span: 4 }} onFieldsChange={changeValue}> <Form.Item hasFeedback name="loginName" label="登录名称" rules={[ { pattern: /^[a-zA-Z0-9_]{0,}$/, message: '长度小于16位,支持字母与数字,允许下划线', }, { required: true }, ]} > <Input placeholder="请输入登录名称(小于16位)" maxLength="16" /> </Form.Item> <div className={styles.formBox}> <Form.Item hasFeedback name="password" label="账号密码" rules={[ { pattern: /^[a-zA-Z0-9_]{6,16}$/, message: '长度6-16位,支持字母与数字,允许下划线', }, { required: true }, ]} > <Input.Password placeholder="请输入账号密码(6~16位)" maxLength="16" onCopy={e => { e.preventDefault(); }} onPaste={e => { // 禁止粘贴 e.preventDefault(); }} /> </Form.Item> <div style={{ right: '70px' }} className={classNames(styles.tipsText, { [styles.tipsRed]: passwordLevel === '弱', [styles.tipsOrange]: passwordLevel === '中', [styles.tipsGreen]: passwordLevel === '强', })} > {passwordLevel} </div> </div> <Form.Item hasFeedback name="userName" label="用户姓名" rules={[ { required: true }, { pattern: /^[A-Za-z0-9_\u4e00-\u9fa5]+$/, message: '长度小于16位,支持字母、中文与数字,允许下划线', }, ]} > <Input placeholder="请输入用户姓名(小于16位)" maxLength="16" /> </Form.Item> <Form.Item hasFeedback name="phone" label="手机号码" rules={[ { required: true }, { pattern: new RegExp(/^1[0-9]{10}$/), message: '请输入正确的手机号码!', }, ]} > <Input placeholder="请输入手机号码" maxlength="11" autoComplete="off" /> </Form.Item> <Form.Item hasFeedback name="email" label="电子邮箱" rules={[ { type: 'email', message: '请输入正确的电子邮箱!', }, ]} > <Input placeholder="请输入电子邮箱" autoComplete="off" /> </Form.Item> {/* <Form.Item name="stationList" label="关联站点" rules={[{ required: true }]}> <TreeSelect {...tProps} showSearch treeDefaultExpandAll /> </Form.Item> */} </Form> </div> </Modal> ); }; export default AddUserModal;