Skip to content

C
CivManage
Commit 287c5901 authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: 用户管理模块划分

parent 7b571f25
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 651 additions and 62 deletions
src/pages/userCenter/userManage/AddSubOrgModal.jsx 0 → 100644
View file @ 287c5901
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
View file @ 287c5901
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,60 +86,64 @@ const AddUserModal = props =>{
});
}
};
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: '不能为空且不支持中文' }]}
return (
<Modal
title={title}
visible={visible}
onCancel={onCancel}
onOk={submitAddUser}
okText="确认"
cancelText="取消"
>
<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>)
}
<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/ChangePasswordModal.jsx 0 → 100644
View file @ 287c5901
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 0 → 100644
View file @ 287c5901
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 0 → 100644
View file @ 287c5901
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 0 → 100644
View file @ 287c5901
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 0 → 100644
View file @ 287c5901
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
View file @ 287c5901
......@@ -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(),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment