EditUserModal.jsx 6.3 KB
Newer Older
1
/* eslint-disable import/no-unresolved */
2
import React, { useEffect, useState } from 'react';
3
import { Modal, Form, Input, notification, message } from 'antd';
4
import voca from 'voca';
5
import classNames from 'classnames';
6
import { editUser } from '@/services/userManage/api';
7 8
import sha1 from 'sha1';
import styles from './AddUserModal.less';
9 10

const EditUserModal = props => {
11
  const { visible, currentUser, currentSelectOrg, onCancel, onSelect, submitSearchUser } = props;
12 13 14 15 16 17 18 19 20
  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(() => {
21 22 23 24 25 26 27 28
    if (visible) {
      editUserForm.setFieldsValue({
        loginName: voca.stripTags(currentUser.loginName),
        userName: voca.stripTags(currentUser.userName),
        phone: voca.stripTags(currentUser.phone) || '',
        email: currentUser.email || '',
      });
    }
29
  }, [visible]);
30 31 32

  // 提交-编辑用户
  const submitEditUser = () => {
33 34 35
    const loginName = voca.stripTags(editUserForm.getFieldValue('loginName'));
    const userName = voca.stripTags(editUserForm.getFieldValue('userName'));
    const phone = voca.stripTags(editUserForm.getFieldValue('phone')) || '';
36
    const email = editUserForm.getFieldValue('email') || '';
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
    editUserForm.validateFields().then(validate => {
      // 正则验证
      if (loginName === '') {
        notification.error({
          message: '提交失败',
          description: '登录名称不能为空!',
        });
        return;
      }
      if (!noChinese.test(loginName)) {
        notification.error({
          message: '提交失败',
          description: '登录名不支持中文!',
        });
        return;
      }
      if (userName === '') {
        notification.error({
          message: '提交失败',
          description: '用户姓名不能为空!',
        });
        return;
      }
      if (phone !== '' && !isPhone.test(phone)) {
        notification.error({
          message: '提交失败',
          description: '请输入11位手机号!',
        });
        return;
      }
      if (email !== '' && !isEmail.test(email)) {
        notification.error({
          message: '提交失败',
          description: '邮箱格式不正确!',
        });
        return;
      }
      // 所有验证通过才可以提交,phone/email为空时不验证
      if (
        loginName &&
        noChinese.test(loginName) &&
        userName &&
        (phone === '' || isPhone.test(phone)) &&
        (email === '' || isEmail.test(email))
      ) {
        editUser(currentUser.userId, loginName, userName, phone, email)
          .then(res => {
皮倩雯's avatar
皮倩雯 committed
84
            if (res.code === 0) {
85 86
              onCancel();
              // 重新获取用户表
87 88 89

              // eslint-disable-next-line no-unused-expressions
              currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
90

91 92 93 94 95 96 97
              notification.success({
                message: '提交成功',
                duration: 2,
              });
            } else {
              notification.error({
                message: '提交失败',
98
                description: res.msg,
99 100 101 102 103 104 105
              });
            }
            editUserForm.setFieldsValue({
              loginName: voca.stripTags(currentUser.loginName),
              userName: voca.stripTags(currentUser.userName),
              phone: voca.stripTags(currentUser.phone) || '',
              email: currentUser.email || '',
106
            });
107 108 109
          })
          .catch(err => {
            message.error(err);
tianfen's avatar
tianfen committed
110
          });
111 112
      }
    });
113
  };
114 115 116 117 118 119 120 121 122
  const title = (
    <span>
      编辑用户
      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
{currentUser.userName}
      </span>
      的信息
    </span>
  );
123

124 125
  return (
    <Modal
126
      title={title}
127
      visible={visible}
128 129
      maskClosable={false}
      destroyOnClose
130 131 132
      // afterClose={() => {
      //   editUserForm.resetFields();
      // }}
133
      onOk={submitEditUser}
tianfen's avatar
tianfen committed
134 135 136 137 138
      onCancel={() => {
        onCancel();
        editUserForm.setFieldsValue({
          loginName: voca.stripTags(currentUser.loginName),
          userName: voca.stripTags(currentUser.userName),
139 140
          phone: voca.stripTags(currentUser.phone) || '',
          email: currentUser.email || '',
tianfen's avatar
tianfen committed
141 142
        });
      }}
143 144 145 146
      okText="确认"
      cancelText="取消"
    >
      <Form form={editUserForm} labelCol={{ span: 4 }}>
147 148 149 150 151 152 153
        <Form.Item
          hasFeedback
          name="loginName"
          label="登录名称"
          rules={[
            {
              pattern: /^[a-zA-Z0-9_]{0,}$/,
邓超's avatar
邓超 committed
154
              message: '长度小于16位,支持字母与数字,允许下划线',
155 156 157 158
            },
            { required: true },
          ]}
        >
邓超's avatar
邓超 committed
159
          <Input placeholder="请输入登录名称(小于16位)" maxLength="16" />
160
        </Form.Item>
161 162 163 164 165 166
        <Form.Item
          hasFeedback
          name="userName"
          label="用户姓名"
          rules={[
            { required: true },
邓超's avatar
邓超 committed
167 168 169 170
            {
              pattern: /^[A-Za-z0-9_\u4e00-\u9fa5]+$/,
              message: '长度小于16位,支持字母、中文与数字,允许下划线',
            },
171 172
          ]}
        >
邓超's avatar
邓超 committed
173
          <Input placeholder="请输入用户姓名(小于16位)" maxLength="16" />
174 175
        </Form.Item>
        <Form.Item
皮倩雯's avatar
皮倩雯 committed
176
          hasFeedback
177 178 179
          name="phone"
          label="手机号码"
          rules={[
180
            { required: true },
181
            {
182
              pattern: new RegExp(/^1[0-9]{10}$/),
邓超's avatar
邓超 committed
183
              message: '请输入正确的手机号码!',
184 185 186
            },
          ]}
        >
邓超's avatar
邓超 committed
187
          <Input placeholder="请输入手机号码" autoComplete="off" maxlength="11" />
188 189
        </Form.Item>
        <Form.Item
皮倩雯's avatar
皮倩雯 committed
190
          hasFeedback
191 192 193 194 195
          name="email"
          label="电子邮箱"
          rules={[
            {
              type: 'email',
邓超's avatar
邓超 committed
196
              message: '请输入正确的电子邮箱!',
197 198 199 200 201 202 203 204 205 206 207
            },
          ]}
        >
          <Input placeholder="请输入电子邮箱" autoComplete="off" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditUserModal;