Commit 122aeff1 authored by 陈前坚's avatar 陈前坚

perf: UserManage

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