AddUserModal.jsx

import React, { useEffect, useState } from 'react';
import { Modal, Form, Input, notification, message, TreeSelect, Select } from 'antd';
import {
  addUser,
  GetUserRelationListNew,
  GetPasswordRegularization,
} 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, siteList } = 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 [rules, setRules] = useState();
  const onChange = newValue => {
    console.log('onChange ', value);
    setValue(newValue);
  };

  useEffect(() => {
    if (visible) {
      getPasswordRule();
      addUserForm.resetFields();
      getEmptyRoleList();
    } else {
      setPasswordLevel('');
    }
  }, [orgID, visible]);

  const getPasswordRule = () => {
    GetPasswordRegularization().then(res => {
      if (res.code === 0) {
        setRules(res.data);
      }
    });
  };

  // 获取全部未勾选站点列表
  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') || '';
    addUserForm.validateFields().then(validate => {
      // 正则验证
      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 (passwordLevel === '弱') {
        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 (
        noChinese.test(loginName) &&
        password.length >= 6 &&
        userName &&
        (phone === '' || isPhone.test(phone)) &&
        (email === '' || isEmail.test(email))
      ) {
        console.log(addUserForm.getFieldValue('GroupId'), 'afasdf');
        console.log(orgID);
        addUser({
          GroupId: addUserForm.getFieldValue('GroupId') || '',
          OUID: orgID.id,
          loginName,
          userName,
          password: sha1(password).toUpperCase(),
          phone,
          email,
        })
          .then(res => {
            console.log('fasdkljgiodsaujgioasdgi');
            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: rules ? rules.regex : `/^(?=.*[a-zA-Z])(?=.*d)[wS]{6,16}$/`,
                  message: rules ? rules.tip : '长度6-16位，必须包含数字与字母',
                },
                {
                  pattern: /^(?!.*(?:SELECT|UPDATE|INSERT|AND|OR|'|"|;|--|\\)).*$/,
                  message: '当前密码存在sql注入风险，请重新输入', // 防止sql注入
                },
                { 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="GroupId" label="关联站点" rules={[{ required: true }]}>
            {/* <TreeSelect {...tProps} showSearch treeDefaultExpandAll /> */}
            <Select
              allowClear
              showSearch
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              placeholder="请选择关联站点"
              options={siteList}
            />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default AddUserModal;