Skip to content

C
CivManage
Commit 122aeff1 authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: UserManage

parent fb805444
Hide whitespace changes
Inline Side-by-side
Showing with 307 additions and 29 deletions
src/pages/userCenter/UserManage.js
View file @ 122aeff1
......@@ -15,6 +15,10 @@ import {
FolderAddTwoTone,
EditTwoTone,
DeleteTwoTone,
PlayCircleOutlined,
ShareAltOutlined,
KeyOutlined,
ApartmentOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
// import classnames from 'classnames';
......@@ -32,6 +36,10 @@ const UserManage = () => {
const [addOrgVisible, setAddOrgVisible] = useState(false);
const [editOrgVisible, setEditOrgVisible] = useState(false);
const [deleteOrgVisible, setDeleteOrgVisible] = useState(false);
const [passwordVisible, setPasswordVisible] = useState(false);
const [editUserVisible, setEditUserVisible] = useState(false);
const [userState, setUserState] = useState(0);
const [freezeUserVisible, setFreezeUserVisible] = useState(false);
const [deleteUserVisible, setDeleteUserVisible] = useState(false);
const [orgTitle, setOrgTitle] = useState('机构');
const [orgID, setOrgID] = useState();
......@@ -39,6 +47,12 @@ const UserManage = () => {
const [addUserForm] = Form.useForm();
const [addOrgForm] = Form.useForm();
const [editOrgForm] = Form.useForm();
const [editUserForm] = Form.useForm();
const [passwordForm] = Form.useForm();
let freezeText = '即将冻结该用户，是否确认冻结？';
if (userState) {
freezeText = '即将激活该用户，是否确认激活？';
}
// 渲染机构目录树
const mapTree = org => {
const haveChildren = Array.isArray(org.children) && org.children.length > 0;
......@@ -101,11 +115,56 @@ const UserManage = () => {
align: 'center',
render: (text, record) => (
<Space size="middle">
<a>关联角色 {record.name}</a>
<a>更改机构</a>
<a>编辑</a>
<a>冻结</a>
<a onClick={() => deleteUser(record)}>删除</a>
<Tooltip title="关联角色">
<ShareAltOutlined
onClick={() => relateRole(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="更改机构">
<ApartmentOutlined
onClick={() => changeOrg(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="修改密码">
<KeyOutlined
onClick={() => changePassword(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="编辑用户">
<EditTwoTone
onClick={() => editUser(record)}
style={{ fontSize: '16px' }}
/>
</Tooltip>
<Tooltip title="冻结用户">
<PlayCircleOutlined
onClick={() => freezeUser(record)}
style={{ fontSize: '16px', color: '#1890FF' }}
/>
</Tooltip>
<Tooltip title="删除用户">
<DeleteTwoTone
onClick={() => deleteUser(record)}
style={{ fontSize: '16px' }}
/>
</Tooltip>
{/* <a onClick={() => relateRole(record)}>关联角色 {record.name}</a>
<a onClick={() => changeOrg(record)}>更改机构</a>
<a onClick={() => changePassword(record)}>修改密码</a>
<a onClick={() => editUser(record)}>编辑</a>
<a
onClick={() => freezeUser(record)}
className={classnames({
[styles.freeze]: userState,
[styles.freezeGray]: !userState,
})}
>
冻结
</a>
<a onClick={() => deleteUser(record)}>删除</a> */}
</Space>
),
},
......@@ -155,6 +214,8 @@ const UserManage = () => {
setTableLoading(false);
const table = res.root.map((item, index) => {
item.key = index;
item.ddid = item.ddid ? '已绑定' : '未绑定';
item.wxid = item.wxid ? '已绑定' : '未绑定';
return item;
});
setTableData(table);
......@@ -165,6 +226,7 @@ const UserManage = () => {
});
};
// 左侧目录树相关操作
const addUser = (e, title, id) => {
// e.stopPropagation();
setUserVisible(true);
......@@ -191,6 +253,42 @@ const UserManage = () => {
setOrgTitle(`在${title}下添加用户`);
setOrgID(id);
};
// 右侧表格相关操作
const relateRole = record => {
// setDeleteUserVisible(true);
setUserID(record.userID);
};
const changeOrg = record => {
// setDeleteUserVisible(true);
setUserID(record.userID);
};
const changePassword = record => {
setPasswordVisible(true);
passwordForm.setFieldsValue({
oldpassword: record.password,
});
setUserID(record.userID);
};
const editUser = record => {
// console.log(record);
setEditUserVisible(true);
editUserForm.setFieldsValue({
loginName: record.loginName,
userName: record.userName,
phone: record.phone || '',
email: record.email || '',
});
setUserID(record.userID);
};
const freezeUser = record => {
setFreezeUserVisible(true);
setUserID(record.userID);
};
const deleteUser = record => {
setDeleteUserVisible(true);
setUserID(record.userID);
};
// 提交-添加用户
const submitAddUser = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_AddUser`, {
......@@ -198,13 +296,13 @@ const UserManage = () => {
_dc: time.getTime(),
OUID: orgID,
loginName: addUserForm.getFieldValue('loginName'),
password: addUserForm.getFieldValue('password'),
userName: addUserForm.getFieldValue('userName'),
password: addUserForm.getFieldValue('password'),
phone: addUserForm.getFieldValue('phone') || '',
email: addUserForm.getFieldValue('email') || '',
})
.then(res => {
if (res.message === '') {
if (res.success) {
setUserVisible(false);
notification.success({
message: '提交成功',
......@@ -233,7 +331,7 @@ const UserManage = () => {
comment: '',
})
.then(res => {
if (res.message === '') {
if (res.success) {
setAddOrgVisible(false);
notification.success({
message: '提交成功',
......@@ -267,7 +365,7 @@ const UserManage = () => {
comment: '',
})
.then(res => {
if (res.message === '') {
if (res.success) {
setEditOrgVisible(false);
notification.success({
message: '提交成功',
......@@ -293,7 +391,7 @@ const UserManage = () => {
OUID: orgID,
})
.then(res => {
if (res.message === '') {
if (res.success) {
setDeleteOrgVisible(false);
notification.success({
message: '提交成功',
......@@ -314,9 +412,91 @@ const UserManage = () => {
});
};
const deleteUser = record => {
setDeleteUserVisible(true);
setUserID(record.userID);
const submitChangePassword = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_UpdatePassword`, {
_version: 9999,
_dc: time.getTime(),
userID,
oldpassword: passwordForm.getFieldValue('password'),
newPassword: passwordForm.getFieldValue('newPassword'),
passwordConfirm: passwordForm.getFieldValue('passwordConfirm'),
})
.then(res => {
if (res.success) {
setPasswordVisible(false);
// 重新获取用户表
onSelect([orgID]);
notification.success({
message: '提交成功',
});
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
message.error(err);
});
};
const submitEditUser = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_EditUser`, {
_version: 9999,
_dc: time.getTime(),
userID,
loginName: editUserForm.getFieldValue('loginName'),
userName: editUserForm.getFieldValue('userName'),
phone: editUserForm.getFieldValue('phone') || '',
email: editUserForm.getFieldValue('email') || '',
})
.then(res => {
if (res.success) {
setEditUserVisible(false);
// 重新获取用户表
onSelect([orgID]);
notification.success({
message: '提交成功',
});
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
setTableLoading(false);
message.error(err);
});
};
const submitFreezeUser = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_UserStateOU`, {
_version: 9999,
_dc: time.getTime(),
OUID: userID,
state: +!userState,
})
.then(res => {
if (res.success) {
setFreezeUserVisible(false);
// 重新获取用户表
onSelect([orgID]);
notification.success({
message: '提交成功',
});
setUserState(+!userState);
} else {
notification.error({
message: '提交失败',
description: res.message,
});
}
})
.catch(err => {
setTableLoading(false);
message.error(err);
});
};
const submitDeleteUser = () => {
get(`/Cityinterface/rest/services/OMS.svc/U_DeleteUser`, {
......@@ -325,14 +505,17 @@ const UserManage = () => {
userID,
})
.then(res => {
if (res.message === '') {
if (res.success) {
setDeleteUserVisible(false);
notification.success({
message: '提交成功',
});
// 重新获取用户表
onSelect([orgID]);
} else {
Modal.error({
title: '删除失败',
content: res.message,
notification.error({
message: '提交失败',
description: res.message,
});
}
})
......@@ -390,7 +573,7 @@ const UserManage = () => {
},
]}
>
<Input placeholder="情输入登录名称" />
<Input placeholder="请输入登录名称" />
</Form.Item>
<Form.Item
name="password"
......@@ -401,7 +584,7 @@ const UserManage = () => {
},
]}
>
<Input placeholder="情输入账户密码" />
<Input placeholder="请输入账户密码" />
</Form.Item>
<Form.Item
name="userName"
......@@ -412,13 +595,13 @@ const UserManage = () => {
},
]}
>
<Input placeholder="情输入用户姓名" />
<Input placeholder="请输入用户姓名" />
</Form.Item>
<Form.Item name="phone" label="手 机 号 码">
<Input placeholder="情输入手机号码" />
<Input placeholder="请输入手机号码" />
</Form.Item>
<Form.Item name="email" label="电 子 邮 箱">
<Input placeholder="情输入电子邮箱" />
<Input placeholder="请输入电子邮箱" />
</Form.Item>
</Form>
</Modal>
......@@ -441,10 +624,10 @@ const UserManage = () => {
},
]}
>
<Input placeholder="情输入机构名称" />
<Input placeholder="请输入机构名称" />
</Form.Item>
<Form.Item name="description" label="--描---述--">
<Input placeholder="情输入相关描述" />
<Input placeholder="请输入相关描述" />
</Form.Item>
</Form>
</Modal>
......@@ -467,10 +650,10 @@ const UserManage = () => {
},
]}
>
<Input placeholder="情输入机构名称" />
<Input placeholder="请输入机构名称" />
</Form.Item>
<Form.Item name="description" label="--描---述--">
<Input placeholder="情输入相关描述" />
<Input placeholder="请输入相关描述" />
</Form.Item>
</Form>
</Modal>
......@@ -484,6 +667,93 @@ const UserManage = () => {
>
<p>即将删除该机构，是否确认删除？</p>
</Modal>
{/* 修改密码 */}
<Modal
title="编辑用户"
visible={passwordVisible}
onOk={submitChangePassword}
onCancel={() => setPasswordVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={passwordForm}>
<Form.Item name="oldpassword" label="原 始 密 码">
<Input disabled />
</Form.Item>
<Form.Item
name="newPassword"
label="新- 密-码"
rules={[
{
required: true,
},
]}
>
<Input placeholder="请输入新密码" />
</Form.Item>
<Form.Item
name="passwordConfirm"
label="确认密码"
rules={[
{
required: true,
},
]}
>
<Input placeholder="再次确认新密码" />
</Form.Item>
</Form>
</Modal>
{/* 编辑用户 */}
<Modal
title="编辑用户"
visible={editUserVisible}
onOk={submitEditUser}
onCancel={() => setEditUserVisible(false)}
okText="确认"
cancelText="取消"
>
<Form form={editUserForm}>
<Form.Item
name="loginName"
label="登录名称"
rules={[
{
required: true,
},
]}
>
<Input placeholder="请输入登录名称" />
</Form.Item>
<Form.Item
name="userName"
label="用户姓名"
rules={[
{
required: true,
},
]}
>
<Input placeholder="请输入用户姓名" />
</Form.Item>
<Form.Item name="phone" label="手 机 号 码">
<Input placeholder="请输入手机号码" />
</Form.Item>
<Form.Item name="email" label="电 子 邮 箱">
<Input placeholder="请输入电子邮箱" />
</Form.Item>
</Form>
</Modal>
<Modal
title="请确认冻结用户"
visible={freezeUserVisible}
onOk={submitFreezeUser}
onCancel={() => setFreezeUserVisible(false)}
okText="确认"
cancelText="取消"
>
<p>{freezeText}</p>
</Modal>
<Modal
title="确认删除用户"
visible={deleteUserVisible}
......
src/pages/userCenter/UserManage.less
View file @ 122aeff1
.userManageContainer{
.ant-tree-treenode{
width: 100%;
.ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal{
width: 100% !important;
.ant-tree-node-content-wrapper{
display: inline-block;
width: 100%;
}
.iconWraper1{
float: right;
span{
......@@ -13,6 +14,13 @@
}
}
.freeze{
color:gray;
}
.freezeGray{
color:#1890FF;
}
.ant-tree-treenode:hover{
.iconWraper1>span{
margin-left: 12px;
......@@ -28,7 +36,7 @@
height: calc(100vh - 194px);
float: left;
padding: 10px;
min-width: 330px;
min-width: 300px;
background: white;
.ant-tree{
padding-top: 6px;
......
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