perf: 用户管理模块划分

src/pages/userCenter/userManage/AddSubOrgModal.jsx

+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
+import { addOrg } from '@/services/userCenter/userManage/api';
+
+const AddUserModal = props => {
+  const { title, visible, orgID, onCancel, updateTrees, onSelect } = props;
+  const [addOrgForm] = Form.useForm(); // 添加用户
+
+  useEffect(() => {
+    addOrgForm.resetFields();
+  }, [orgID]);
+
+  // 提交-添加下级机构
+  const submitAddOrg = () => {
+    addOrg(
+      orgID,
+      addOrgForm.getFieldValue('OUName'),
+      addOrgForm.getFieldValue('desrciption') || '',
+      '',
+    )
+      .then(res => {
+        if (res.success) {
+          onCancel();
+          notification.success({
+            message: '提交成功',
+            duration: 2,
+          });
+          // 重新获取机构树与用户表
+          updateTrees();
+          onSelect([`${res.OUID}`]);
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={submitAddOrg}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={addOrgForm} labelCol={{ span: 4 }}>
+        <Form.Item
+          name="OUName"
+          label="机构名称"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input placeholder="请输入机构名称" />
+        </Form.Item>
+        <Form.Item name="description" label="描述">
+          <Input placeholder="请输入相关描述" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddUserModal;

src/pages/userCenter/userManage/AddUserModal.jsx

-import React, { useState, useEffect } from 'react';
-import { Modal, Form, Input, notification, message, Select } from 'antd';
+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
 import { addUser } from '@/services/userCenter/userManage/api';
-const { Option } = Select;
 
-const AddUserModal = props =>{
-  const {title,visible,orgID,onCancel} = props;
+const AddUserModal = props => {
+  const { title, visible, orgID, onCancel, onSelect } = props;
   const [addUserForm] = Form.useForm(); // 添加用户
   /** ***正则验证**** */
   const noChinese = new RegExp(/^[^\u4e00-\u9fa5]+$/); // 不能包含中文
@@ -68,13 +67,13 @@ const AddUserModal = props =>{
         .then(res => {
           if (res.success) {
             addUserForm.resetFields();
-            onCancel;
+            onCancel(); // 设置Modal不可见
             notification.success({
               message: '提交成功',
               duration: 2,
             });
             // 重新获取用户表
-            // onSelect([orgID]);
+            onSelect();
           } else {
             notification.error({
               message: '提交失败',
@@ -87,12 +86,15 @@ const AddUserModal = props =>{
         });
     }
   };
-  return (<Modal
+  return (
+    <Modal
       title={title}
       visible={visible}
       onCancel={onCancel}
       onOk={submitAddUser}
->
+      okText="确认"
+      cancelText="取消"
+    >
       <Form form={addUserForm} labelCol={{ span: 4 }}>
         <Form.Item
           name="loginName"
@@ -140,7 +142,8 @@ const AddUserModal = props =>{
           <Input placeholder="请输入电子邮箱" autoComplete="off" />
         </Form.Item>
       </Form>
-</Modal>)
-}
+    </Modal>
+  );
+};
 
 export default AddUserModal;

src/pages/userCenter/userManage/ChangePasswordModal.jsx

+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
+import { updateUserPassword } from '@/services/userCenter/userManage/api';
+
+const ChangePasswordModal = props => {
+  const { visible, currentUser, onCancel } = props;
+  const [passwordForm] = Form.useForm(); // 修改密码
+
+  useEffect(() => {
+    passwordForm.setFieldsValue({
+      oldPassword: currentUser.password,
+      newPassword: '',
+      passwordConfirm: '',
+    });
+  }, [currentUser]);
+
+  // 提交-修改密码
+  const submitChangePassword = () => {
+    const oldPassword = passwordForm.getFieldValue('oldPassword');
+    const newPassword = passwordForm.getFieldValue('newPassword');
+    const passwordConfirm = passwordForm.getFieldValue('passwordConfirm');
+    if (
+      newPassword &&
+      newPassword.length >= 6 &&
+      passwordConfirm &&
+      newPassword.length >= 6 &&
+      newPassword === passwordConfirm
+    ) {
+      updateUserPassword({
+        UserId: +currentUser.userID,
+        OldPassWord: oldPassword,
+        NewPassWord: newPassword,
+      })
+        .then(res => {
+          if (res.code === 0) {
+            onCancel();
+            notification.success({
+              message: '提交成功',
+              duration: 2,
+            });
+          } else {
+            notification.error({
+              message: '提交失败',
+              description: res.message,
+            });
+          }
+        })
+        .catch(err => {
+          message.error(err);
+        });
+    } else if (newPassword === '' || passwordConfirm === '') {
+      notification.error({
+        message: '提交失败',
+        description: '带*号为必填项，不能为空',
+      });
+    } else if (
+      (newPassword && newPassword.length < 6) ||
+      (passwordConfirm && passwordConfirm < 6)
+    ) {
+      notification.error({
+        message: '提交失败',
+        description: '密码至少为6位!',
+      });
+    } else if (newPassword !== passwordConfirm) {
+      notification.error({
+        message: '提交失败',
+        description: '确认密码不一致!',
+      });
+    }
+  };
+  return (
+    <Modal
+      title="修改密码"
+      visible={visible}
+      onOk={submitChangePassword}
+      onCancel={onCancel}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={passwordForm} labelCol={{ span: 4 }}>
+        <Form.Item name="oldPassword" label="原始密码">
+          <Input disabled />
+        </Form.Item>
+        <Form.Item
+          name="newPassword"
+          label="新密码"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input
+            placeholder="请输入新密码"
+            type="password"
+            autoComplete="off"
+          />
+        </Form.Item>
+        <Form.Item
+          name="passwordConfirm"
+          label="确认密码"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input
+            placeholder="再次确认新密码"
+            type="password"
+            autoComplete="off"
+          />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default ChangePasswordModal;

src/pages/userCenter/userManage/DeleteOrgModal.jsx

+import React from 'react';
+import { Modal, notification, message } from 'antd';
+import { deleteOrg } from '@/services/userCenter/userManage/api';
+
+const DeleteOrgModal = props => {
+  const { title, visible, orgID, onCancel, updateTrees } = props;
+
+  // 提交-删除机构
+  const submitDeleteOrg = () =>
+    deleteOrg(orgID)
+      .then(res => {
+        if (res.success) {
+          onCancel();
+          notification.success({
+            message: '提交成功',
+            duration: 2,
+          });
+          // 重新获取机构树与用户表
+          updateTrees();
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={submitDeleteOrg}
+      okText="确认"
+      cancelText="取消"
+    >
+      <p>即将删除该机构，是否确认删除？</p>
+    </Modal>
+  );
+};
+
+export default DeleteOrgModal;

src/pages/userCenter/userManage/EditOrgModal.jsx

+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
+import { editOrgInfo } from '@/services/userCenter/userManage/api';
+
+const EditOrgModal = props => {
+  const {
+    title,
+    visible,
+    orgID,
+    orgTitle,
+    description,
+    onCancel,
+    updateTrees,
+    onSelect,
+  } = props;
+  const [editOrgForm] = Form.useForm(); // 添加用户
+
+  useEffect(() => {
+    editOrgForm.setFieldsValue({
+      OUName: orgTitle,
+      description,
+    });
+  }, [orgTitle, description]);
+
+  // 提交-编辑当前机构
+  const submitEditOrg = () =>
+    editOrgInfo(
+      orgID,
+      editOrgForm.getFieldValue('OUName'),
+      editOrgForm.getFieldValue('description') || '',
+      '',
+    )
+      .then(res => {
+        if (res.success) {
+          onCancel();
+          notification.success({
+            message: '提交成功',
+            duration: 2,
+          });
+          // 重新获取机构树与用户表
+          updateTrees();
+          onSelect([orgID]);
+          // setExpandedKeys([`${orgID}`]);
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  return (
+    <Modal
+      title={title}
+      visible={visible}
+      onCancel={onCancel}
+      onOk={submitEditOrg}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={editOrgForm} labelCol={{ span: 4 }}>
+        <Form.Item
+          name="OUName"
+          label="机构名称"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input placeholder="请输入机构名称" />
+        </Form.Item>
+        <Form.Item name="description" label="描述">
+          <Input placeholder="请输入相关描述" />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditOrgModal;

src/pages/userCenter/userManage/EditUserModal.jsx

+import React, { useEffect } from 'react';
+import { Modal, Form, Input, notification, message } from 'antd';
+import voca from 'voca';
+import { editUser } from '@/services/userCenter/userManage/api';
+
+const EditUserModal = props => {
+  const { visible, currentUser, onCancel, onSelect } = props;
+  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(() => {
+    editUserForm.setFieldsValue({
+      loginName: voca.stripTags(currentUser.loginName),
+      userName: voca.stripTags(currentUser.userName),
+      phone: currentUser.phone || '',
+      email: currentUser.email || '',
+    });
+  }, [currentUser]);
+
+  // 提交-编辑用户
+  const submitEditUser = () => {
+    const loginName = editUserForm.getFieldValue('loginName');
+    const userName = editUserForm.getFieldValue('userName');
+    const phone = editUserForm.getFieldValue('phone') || '';
+    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 => {
+          if (res.success) {
+            onCancel();
+            // 重新获取用户表
+            onSelect([`${currentUser.OUID}`]);
+            // setExpandedKeys([`${currentUser.OUID}`]);
+            notification.success({
+              message: '提交成功',
+              duration: 2,
+            });
+          } else {
+            notification.error({
+              message: '提交失败',
+              description: res.message,
+            });
+          }
+        })
+        .catch(err => {
+          message.error(err);
+        });
+    }
+  };
+  return (
+    <Modal
+      title="编辑用户"
+      visible={visible}
+      onOk={submitEditUser}
+      onCancel={onCancel}
+      okText="确认"
+      cancelText="取消"
+    >
+      <Form form={editUserForm} labelCol={{ span: 4 }}>
+        <Form.Item
+          name="loginName"
+          label="登录名称"
+          rules={[{ required: true, message: '不能为空' }]}
+        >
+          <Input placeholder="请输入登录名称" />
+        </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 EditUserModal;

src/pages/userCenter/userManage/RelateRoleModal.jsx

+import React, { useState, useCallback } from 'react';
+import { Modal, Spin, Tabs, notification, message } from 'antd';
+import {
+  setUserRelation,
+  setUserRelations,
+} from '@/services/userCenter/userManage/api';
+import ListCardItem from '../../orgnazation/listCardItem';
+
+const RelateRoleModal = props => {
+  const {
+    currentUser,
+    currentSelectOrg,
+    userIDs,
+    visible,
+    rolelist,
+    stationlist,
+    multiRelateRoles,
+    onCancel,
+    onSelect,
+    loading,
+  } = props;
+  const { TabPane } = Tabs;
+  const [roleValueList, setRoleValueList] = useState({}); // 勾选的角色列表
+  const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表
+
+  const getRoleValueCallback = useCallback((value, index) => {
+    roleValueList[index] = value;
+    setRoleValueList({ ...roleValueList });
+  }, []);
+
+  const getStationValueCallback = useCallback((value, index) => {
+    stationValueList[index] = value;
+    setStationValueList({ ...stationValueList });
+  }, []);
+
+  // 提交-关联角色
+  const submitRole = () => {
+    setUserRelation(
+      currentUser.userID,
+      Object.keys(roleValueList)
+        .map(k => roleValueList[k])
+        .flat(),
+      Object.keys(stationValueList)
+        .map(k => stationValueList[k])
+        .flat(),
+    )
+      .then(res => {
+        if (res.success) {
+          onCancel();
+          // 跳转到新组织机构下的用户表
+          onSelect([`${currentUser.OUID}`]);
+          // setExpandedKeys([`${currentUser.OUID}`]);
+          notification.success({
+            message: '提交成功',
+            duration: 2,
+          });
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.message,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  // 提交-批量关联角色
+  const submitRoles = () => {
+    setUserRelations(
+      userIDs,
+      Object.keys(roleValueList)
+        .map(k => roleValueList[k])
+        .flat()
+        .toString(),
+      Object.keys(stationValueList)
+        .map(k => stationValueList[k])
+        .flat()
+        .toString(),
+    )
+      .then(res => {
+        if (res.code === 0) {
+          onCancel();
+          // 跳转到组织
+          onSelect([currentSelectOrg]);
+          notification.success({
+            message: '提交成功',
+            duration: 2,
+          });
+        } else {
+          notification.error({
+            message: '提交失败',
+            description: res.msg,
+          });
+        }
+      })
+      .catch(err => {
+        message.error(err);
+      });
+  };
+  return (
+    <Modal
+      title="关联角色"
+      visible={visible}
+      onOk={multiRelateRoles ? submitRoles : submitRole}
+      onCancel={onCancel}
+      okText="确认"
+      cancelText="取消"
+      width="920px"
+    >
+      <Spin spinning={loading} tip="loading">
+        <Tabs defaultActiveKey="1" style={{ marginTop: '-16px' }}>
+          <TabPane tab="角色" key="1">
+            {visible &&
+              rolelist.map((role, index) => (
+                <ListCardItem
+                  itemid={index}
+                  key={`item${index}key`}
+                  userList={role.roleList}
+                  OUName={role.visibleTitle}
+                  getValueCallback={getRoleValueCallback}
+                />
+              ))}
+          </TabPane>
+          <TabPane tab="站点" key="2">
+            {visible &&
+              stationlist.map((station, index) => (
+                <ListCardItem
+                  itemid={index}
+                  key={`item${index}key`}
+                  userList={station.stationList}
+                  OUName={station.visibleTitle}
+                  getValueCallback={getStationValueCallback}
+                />
+              ))}
+          </TabPane>
+        </Tabs>
+      </Spin>
+    </Modal>
+  );
+};
+
+export default RelateRoleModal;

src/services/userCenter/userManage/api.js

@@ -58,7 +58,7 @@ export const addUser = ({
     email,
   });
 
-export const submitAddOrg = (orgID, OUName, description, comment) =>
+export const addOrg = (orgID, OUName, description, comment) =>
   get(`${CITY_SERVICE}/OMS.svc/U_AddOU`, {
     _version: 9999,
     _dc: Date.now(),