AddUserModal.jsx 5.84 KB
Newer Older
1 2
import React, { useEffect } from 'react';
import { Modal, Form, Input, notification, message } from 'antd';
邓超's avatar
邓超 committed
3
import { addUser } from '@/services/userManage/api';
皮倩雯's avatar
皮倩雯 committed
4
import { ok } from '../../../assets/images/icons/ok.svg';
陈前坚's avatar
陈前坚 committed
5

6
const AddUserModal = props => {
7
  const { visible, orgID, onCancel, updateTrees1, orgTitle1, onSelect } = props;
陈前坚's avatar
陈前坚 committed
8 9 10 11 12 13 14 15 16 17
  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();
18
    console.log(orgID);
陈前坚's avatar
陈前坚 committed
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
  }, [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: '登录名不支持中文!',
      });
39
    } else if (password === '') {
陈前坚's avatar
陈前坚 committed
40 41
      notification.error({
        message: '提交失败',
42
        description: '密码不能为空!',
陈前坚's avatar
陈前坚 committed
43
      });
44
    } else if (password.length < 6) {
45 46
      notification.error({
        message: '提交失败',
47
        description: '密码至少为6位,且包含数字和字母!',
48
      });
49
    } else if (userName === '') {
陈前坚's avatar
陈前坚 committed
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
      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))
    ) {
皮倩雯's avatar
皮倩雯 committed
73
      addUser({ OUID: orgID.id, loginName, userName, password, phone, email })
陈前坚's avatar
陈前坚 committed
74
        .then(res => {
75
          if (res.code === 0) {
陈前坚's avatar
陈前坚 committed
76
            addUserForm.resetFields();
77
            onCancel(); // 设置Modal不可见
陈前坚's avatar
陈前坚 committed
78 79 80 81
            notification.success({
              message: '提交成功',
              duration: 2,
            });
82 83 84
            updateTrees1(orgID.id);
            onSelect([`${orgID.id}`]);

陈前坚's avatar
陈前坚 committed
85 86 87 88
            // 重新获取用户表
          } else {
            notification.error({
              message: '提交失败',
89
              description: res.msg,
陈前坚's avatar
陈前坚 committed
90 91 92 93 94 95 96 97
            });
          }
        })
        .catch(err => {
          message.error(err);
        });
    }
  };
98 99
  const title = (
    <span>
100 101
<span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>{orgTitle1}</span>
      下添加用户
102 103 104
    </span>
  );

105 106 107 108 109
  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
110 111 112 113 114
      maskClosable={false}
      destroyOnClose
      afterClose={() => {
        addUserForm.resetFields();
      }}
115 116 117
      onOk={submitAddUser}
      okText="确认"
      cancelText="取消"
陈前坚's avatar
陈前坚 committed
118
    >
119 120
      <Form form={addUserForm} labelCol={{ span: 4 }}>
        <Form.Item
121
          hasFeedback
122 123
          name="loginName"
          label="登录名称"
124 125
          rules={[
            {
126
              pattern: /^[a-zA-Z0-9_]{0,}$/,
邓超's avatar
邓超 committed
127
              message: '长度小于16位,支持字母与数字,允许下划线',
128
            },
129
            { required: true },
皮倩雯's avatar
皮倩雯 committed
130
          ]}
131
        >
邓超's avatar
邓超 committed
132
          <Input placeholder="请输入登录名称(小于16位)" maxLength="16" />
133 134
        </Form.Item>
        <Form.Item
135
          hasFeedback
136
          name="password"
邓超's avatar
邓超 committed
137
          label="账号密码"
138 139
          rules={[
            {
邓超's avatar
邓超 committed
140 141
              pattern: /^[a-zA-Z0-9_]{6,16}$/,
              message: '长度6-16位,支持字母与数字,允许下划线',
142
            },
143
            { required: true },
144
          ]}
145
        >
邓超's avatar
邓超 committed
146
          <Input placeholder="请输入账号密码(6~16位)" maxlength="16" />
147
        </Form.Item>
148 149 150 151 152 153
        <Form.Item
          hasFeedback
          name="userName"
          label="用户姓名"
          rules={[
            { required: true },
邓超's avatar
邓超 committed
154 155 156 157
            {
              pattern: /^[A-Za-z0-9_\u4e00-\u9fa5]+$/,
              message: '长度小于16位,支持字母、中文与数字,允许下划线',
            },
158 159
          ]}
        >
邓超's avatar
邓超 committed
160
          <Input placeholder="请输入用户姓名(小于16位)" maxLength="16" />
161 162
        </Form.Item>
        <Form.Item
163
          hasFeedback
164 165 166
          name="phone"
          label="手机号码"
          rules={[
167
            { required: true },
168
            {
169
              pattern: new RegExp(/^1[0-9]{10}$/),
邓超's avatar
邓超 committed
170
              message: '请输入正确的手机号码!',
171 172 173
            },
          ]}
        >
邓超's avatar
邓超 committed
174
          <Input placeholder="请输入手机号码" maxlength="11" autoComplete="off" />
175 176
        </Form.Item>
        <Form.Item
177
          hasFeedback
178 179 180 181 182
          name="email"
          label="电子邮箱"
          rules={[
            {
              type: 'email',
邓超's avatar
邓超 committed
183
              message: '请输入正确的电子邮箱!',
184 185 186 187 188 189 190 191 192
            },
          ]}
        >
          <Input placeholder="请输入电子邮箱" autoComplete="off" />
        </Form.Item>
      </Form>
    </Modal>
  );
};
陈前坚's avatar
陈前坚 committed
193 194

export default AddUserModal;