perf: 代码结构分块

src/pages/userCenter/roleManage/RoleManage.jsx

@@ -39,7 +39,7 @@ import AddModal from './AddModal';
 import DelModal from './DelModal';
 import EditModal from './EditModal';
 import EditGroup from './EditGroup';
-import userStyles from '../UserManage.less';
+import userStyles from '@/pages/userCenter/userManage/UserManage.less';
 import iconStyles from '@/assets/font/omsfont/iconfont.css';
 
 const { Search } = Input;

src/pages/userCenter/siteManage/SiteManage.jsx

@@ -29,7 +29,7 @@ import classnames from 'classnames';
 import AddModal from './AddModal';
 import DelModal from './DelModal';
 import EditModal from './EditModal';
-import userStyles from '../UserManage.less';
+import userStyles from '@/pages/userCenter/userManage/UserManage.less';
 
 const { Search } = Input;
 const placeholder = '请输入人员姓名';

src/pages/userCenter/userManage/AddUserModal.jsx

+import React, { useState, useEffect } from 'react';
+import { Modal, Form, Input, notification, message, Select } from 'antd';
+import { addUser } from '@/services/userCenter/userManage/api';
+const { Option } = Select;
+
+const AddUserModal = props =>{
+  const {title,visible,orgID,onCancel} = 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();
+  }, [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.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, loginName, userName, password, phone, email })
+        .then(res => {
+          if (res.success) {
+            addUserForm.resetFields();
+            onCancel;
+            notification.success({
+              message: '提交成功',
+              duration: 2,
+            });
+            // 重新获取用户表
+            // onSelect([orgID]);
+          } else {
+            notification.error({
+              message: '提交失败',
+              description: res.message,
+            });
+          }
+        })
+        .catch(err => {
+          message.error(err);
+        });
+    }
+  };
+  return (<Modal
+  title={title}
+  visible={visible}
+  onCancel={onCancel}
+  onOk={submitAddUser}
+>
+  <Form form={addUserForm} labelCol={{ span: 4 }}>
+    <Form.Item
+      name="loginName"
+      label="登录名称"
+      rules={[{ required: true, message: '不能为空且不支持中文' }]}
+    >
+      <Input placeholder="登录名称不支持中文" />
+    </Form.Item>
+    <Form.Item
+      name="password"
+      label="账户密码"
+      rules={[{ required: true, message: '不能为空' }]}
+    >
+      <Input placeholder="请输入账户密码,至少6位" />
+    </Form.Item>
+    <Form.Item
+      name="userName"
+      label="用户名称"
+      rules={[{ required: true, message: '不能为空' }]}
+    >
+      <Input placeholder="请输入用户姓名" />
+    </Form.Item>
+    <Form.Item
+      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
+      name="email"
+      label="电子邮箱"
+      rules={[
+        {
+          type: 'email',
+          message: '请输入正确的电子邮箱!',
+        },
+      ]}
+    >
+      <Input placeholder="请输入电子邮箱" autoComplete="off" />
+    </Form.Item>
+  </Form>
+</Modal>)
+}
+
+export default AddUserModal;

src/pages/userCenter/UserManage.js → src/pages/userCenter/userManage/UserManage.js

@@ -53,7 +53,8 @@ import {
   multiDeleteUsers,
 } from '@/services/userCenter/userManage/api';
 import classnames from 'classnames';
-import ListCardItem from '../orgnazation/listCardItem';
+import ListCardItem from '../../orgnazation/listCardItem';
+import AddUserModal from './AddUserModal';
 import styles from './UserManage.less';
 
 const UserManage = () => {
@@ -89,7 +90,7 @@ const UserManage = () => {
   const [orgTitle, setOrgTitle] = useState('当前机构'); // 弹框标题
   const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置
   const [tableLength, setTableLength] = useState(0); // 当前机构用户总数
-  const [orgID, setOrgID] = useState(); // 机构ID
+  const [orgID, setOrgID] = useState(); // 当前选择的机构ID
   const [newOrgID, setNewOrgID] = useState(); // 更改机构新选择的ID
   const [currentUser, setCurrentUser] = useState({}); // 当前用户
 
@@ -386,7 +387,7 @@ const UserManage = () => {
             setTableLoading(false);
             notification.error({
               message: '获取失败',
-              description: res.message,
+              description: res.msg,
             });
           }
         })
@@ -421,13 +422,13 @@ const UserManage = () => {
   // 添加用户
   const addUser = () => {
     setUserVisible(true);
-    addUserForm.setFieldsValue({
-      loginName: '',
-      userName: '',
-      password: '',
-      phone: '',
-      email: '',
-    });
+    // addUserForm.setFieldsValue({
+    //   loginName: '',
+    //   userName: '',
+    //   password: '',
+    //   phone: '',
+    //   email: '',
+    // });
   };
   // 添加顶级机构
   const addOrg = () => {
@@ -814,7 +815,7 @@ const UserManage = () => {
         } else {
           notification.error({
             message: '提交失败',
-            description: '角色不能为空',
+            description: res.msg,
           });
         }
       })
@@ -863,7 +864,7 @@ const UserManage = () => {
         } else {
           notification.error({
             message: '提交失败',
-            description: res.message,
+            description: res.msg,
           });
         }
       })
@@ -1062,7 +1063,7 @@ const UserManage = () => {
         } else {
           notification.error({
             message: '提交失败',
-            description: res.message,
+            description: res.msg,
           });
         }
       })
@@ -1223,7 +1224,16 @@ const UserManage = () => {
         {/* Modal弹框 */}
 
         {/* 添加用户 */}
-        <Modal
+        <AddUserModal
+          title={`在${orgTitle}下添加用户`}
+          visible={userVisible}
+          orgID={orgID}
+          onCancel={() => setUserVisible(false)}
+          // closeModal={() => setUserVisible(false)}
+          okText="确认"
+          cancelText="取消"
+        />
+        {/* <Modal
           title={`在${orgTitle}下添加用户`}
           visible={userVisible}
           onOk={submitAddUser}
@@ -1278,7 +1288,7 @@ const UserManage = () => {
               <Input placeholder="请输入电子邮箱" autoComplete="off" />
             </Form.Item>
           </Form>
-        </Modal>
+        </Modal> */}
         {/* 添加下级机构 */}
         <Modal
           title={orgID === '-1' ? '添加顶级机构' : `在${orgTitle}下添加机构`}

src/routes/config.js

@@ -19,7 +19,7 @@ import InitDataBase from '../pages/database/InitDataBase';
 import ManagementDataBase from '../pages/database/ManagementDataBase';
 import DatabaseConnectConfig from '@/pages/database/databaseConfig/DatabaseConfig';
 import CurrentSolution from '@/pages/database/CurrentSolution';
-import UserManage from '../pages/userCenter/UserManage';
+import UserManage from '../pages/userCenter/userManage/UserManage';
 import RoleManage from '@/pages/userCenter/roleManage/RoleManage';
 import SiteManage from '../pages/userCenter/siteManage/SiteManage';
 import Dictionary from '../pages/dataCenter/dictionary';