EditUserModal.jsx 5.8 KB
Newer Older
1
/* eslint-disable import/no-unresolved */
2 3 4
import React, { useEffect } from 'react';
import { Modal, Form, Input, notification, message } from 'antd';
import voca from 'voca';
邓超's avatar
邓超 committed
5
import { editUser } from '@/services/userManage/api';
6 7

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

  // 提交-编辑用户
  const submitEditUser = () => {
29 30 31
    const loginName = voca.stripTags(editUserForm.getFieldValue('loginName'));
    const userName = voca.stripTags(editUserForm.getFieldValue('userName'));
    const phone = voca.stripTags(editUserForm.getFieldValue('phone')) || '';
32 33 34 35 36 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
    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 => {
70
          if (res.msg === '') {
71 72
            onCancel();
            // 重新获取用户表
73
            // eslint-disable-next-line no-unused-expressions
74
            currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
75 76 77 78 79 80 81 82 83 84
            notification.success({
              message: '提交成功',
              duration: 2,
            });
          } else {
            notification.error({
              message: '提交失败',
              description: res.message,
            });
          }
tianfen's avatar
tianfen committed
85 86 87
          editUserForm.setFieldsValue({
            loginName: voca.stripTags(currentUser.loginName),
            userName: voca.stripTags(currentUser.userName),
88 89
            phone: voca.stripTags(currentUser.phone) || '',
            email: currentUser.email || '',
tianfen's avatar
tianfen committed
90
          });
91 92 93 94 95 96
        })
        .catch(err => {
          message.error(err);
        });
    }
  };
97 98 99 100 101 102 103 104 105
  const title = (
    <span>
      编辑用户
      <span style={{ fontWeight: 'bold', color: 'rgb(24, 144, 255)' }}>
{currentUser.userName}
      </span>
      的信息
    </span>
  );
106 107
  return (
    <Modal
108
      title={title}
109
      visible={visible}
110 111
      maskClosable={false}
      destroyOnClose
112 113 114
      // afterClose={() => {
      //   editUserForm.resetFields();
      // }}
115
      onOk={submitEditUser}
tianfen's avatar
tianfen committed
116 117 118 119 120
      onCancel={() => {
        onCancel();
        editUserForm.setFieldsValue({
          loginName: voca.stripTags(currentUser.loginName),
          userName: voca.stripTags(currentUser.userName),
121 122
          phone: voca.stripTags(currentUser.phone) || '',
          email: currentUser.email || '',
tianfen's avatar
tianfen committed
123 124
        });
      }}
125 126 127 128
      okText="确认"
      cancelText="取消"
    >
      <Form form={editUserForm} labelCol={{ span: 4 }}>
129 130 131 132 133 134 135 136 137 138 139 140
        <Form.Item
          hasFeedback
          name="loginName"
          label="登录名称"
          rules={[
            {
              pattern: /^[a-zA-Z0-9_]{0,}$/,
              message: '不支持中文和特殊字符',
            },
            { required: true },
          ]}
        >
141
          <Input placeholder="登录名称不支持中文与特殊字符" maxLength="20" />
142
        </Form.Item>
143 144 145 146 147 148 149 150 151
        <Form.Item
          hasFeedback
          name="userName"
          label="用户姓名"
          rules={[
            { required: true },
            { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不支持特殊字符' },
          ]}
        >
152
          <Input placeholder="用户姓名不支持特殊字符" maxLength="20" />
153 154
        </Form.Item>
        <Form.Item
皮倩雯's avatar
皮倩雯 committed
155
          hasFeedback
156 157 158
          name="phone"
          label="手机号码"
          rules={[
159
            { required: true },
160
            {
161 162
              pattern: new RegExp(/^1[0-9]{10}$/),
              message: '手机号码以1开头11位',
163 164 165
            },
          ]}
        >
166
          <Input placeholder="请输入11位手机号码" autoComplete="off" maxlength="11" />
167 168
        </Form.Item>
        <Form.Item
皮倩雯's avatar
皮倩雯 committed
169
          hasFeedback
170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186
          name="email"
          label="电子邮箱"
          rules={[
            {
              type: 'email',
              message: '请输入正确的电子邮箱!',
            },
          ]}
        >
          <Input placeholder="请输入电子邮箱" autoComplete="off" />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditUserModal;