AddUserModal.jsx

import React, { useEffect } from 'react';
import { Modal, Form, Input, notification, message } from 'antd';
import { addUser } from '@/services/userCenter/userManage/api';
import { ok } from '../../../assets/images/icons/ok.svg';

const AddUserModal = props => {
  const { title, visible, orgID, onCancel, 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,}$/,
  ); // 邮箱

  useEffect(() => {
    addUserForm.resetFields();
    console.log(orgID)
  }, [orgID]);

  // 提交-添加用户
  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, phone, email })
        .then(res => {
          if (res.msg==='') {
            addUserForm.resetFields();
            onCancel(); // 设置Modal不可见
            notification.success({
              message: '提交成功',
              duration: 2,
            });
            // 重新获取用户表
            onSelect();
          } else {
            notification.error({
              message: '提交失败',
              description: res.message,
            });
          }
        })
        .catch(err => {
          message.error(err);
        });
    }
  };
  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      onOk={submitAddUser}
      okText="确认"
      cancelText="取消"
    >
      <Form form={addUserForm} labelCol={{ span: 4 }}>
        <Form.Item
          hasFeedback 
          name="loginName"
          label="登录名称"
          rules={[{ 
            pattern:new RegExp(/^[^\u4e00-\u9fa5]+$/),
            message: '不支持中文' },
          {
            pattern: new RegExp(/^[^\s]*$/),
            message: '不能为空' }
          ]}
        >
          <Input placeholder="登录名称不支持中文" />
        </Form.Item>
        <Form.Item
          hasFeedback 
          name="password"
          label="账户密码"
          rules={[{ 
            pattern: /^[^\s]*$/,
            message: '不能为空' 
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/,
            message: '密码长度必须大于6，且必须包含数字和字母'
          }
          ] 
        }
        >
          <Input placeholder="请输入账户密码,至少6位" />
        </Form.Item>
        <Form.Item
          hasFeedback 
          name="userName"
          label="用户名称"
          rules={[{
            pattern: /^[^\s]*$/,
            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 AddUserModal;