Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
CivManage
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ReactWeb5
CivManage
Commits
e24f991f
Commit
e24f991f
authored
Nov 19, 2020
by
陈前坚
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
perf: 批量操作
parent
bb5f817d
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
336 additions
and
88 deletions
+336
-88
AppMenu.js
src/pages/appConfig/AppMenu.js
+1
-1
UserManage.js
src/pages/userCenter/UserManage.js
+284
-77
UserManage.less
src/pages/userCenter/UserManage.less
+34
-10
api.js
src/services/userCenter/userManage/api.js
+17
-0
No files found.
src/pages/appConfig/AppMenu.js
View file @
e24f991f
...
@@ -153,7 +153,7 @@ const AppMenu = () => {
...
@@ -153,7 +153,7 @@ const AppMenu = () => {
<
/
>
<
/
>
),
),
key
:
menu
.
menuID
,
key
:
menu
.
menuID
,
icon
:
menu
.
leaf
?
<
FileOutlined
/>
:
<
FolderOpenOutlined
/>
,
//
icon: menu.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
// 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作
// 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作
children
:
haveChildren
?
menu
.
children
.
map
(
i
=>
mapTree
(
i
))
:
[],
children
:
haveChildren
?
menu
.
children
.
map
(
i
=>
mapTree
(
i
))
:
[],
};
};
...
...
src/pages/userCenter/UserManage.js
View file @
e24f991f
...
@@ -14,10 +14,15 @@ import {
...
@@ -14,10 +14,15 @@ import {
Tabs
,
Tabs
,
Button
,
Button
,
Spin
,
Spin
,
Dropdown
,
Menu
,
}
from
'antd'
;
}
from
'antd'
;
import
{
import
{
UserAddOutlined
,
UsergroupAddOutlined
,
UsergroupAddOutlined
,
EditOutlined
,
EditTwoTone
,
EditTwoTone
,
DeleteOutlined
,
DeleteTwoTone
,
DeleteTwoTone
,
ShareAltOutlined
,
ShareAltOutlined
,
UnlockOutlined
,
UnlockOutlined
,
...
@@ -25,12 +30,14 @@ import {
...
@@ -25,12 +30,14 @@ import {
StopOutlined
,
StopOutlined
,
DoubleLeftOutlined
,
DoubleLeftOutlined
,
DoubleRightOutlined
,
DoubleRightOutlined
,
DownOutlined
,
}
from
'@ant-design/icons'
;
}
from
'@ant-design/icons'
;
import
PageContainer
from
'@/components/BasePageContainer'
;
import
PageContainer
from
'@/components/BasePageContainer'
;
import
voca
from
'voca'
;
import
voca
from
'voca'
;
import
zhCN
from
'antd/es/locale/zh_CN'
;
import
zhCN
from
'antd/es/locale/zh_CN'
;
import
{
import
{
addToOrg
,
addToOrg
,
addToOrgs
,
editOrgInfo
,
editOrgInfo
,
getOneOUUserListNew
,
getOneOUUserListNew
,
getUserByKey
,
getUserByKey
,
...
@@ -44,7 +51,9 @@ import {
...
@@ -44,7 +51,9 @@ import {
deleteOrg
as
postDeleteOrg
,
deleteOrg
as
postDeleteOrg
,
updateUserPassword
,
updateUserPassword
,
setUserRelation
,
setUserRelation
,
multiDeleteUsers
,
}
from
'@/services/userCenter/userManage/api'
;
}
from
'@/services/userCenter/userManage/api'
;
import
classnames
from
'classnames'
;
import
ListCardItem
from
'../orgnazation/listCardItem'
;
import
ListCardItem
from
'../orgnazation/listCardItem'
;
import
styles
from
'./UserManage.less'
;
import
styles
from
'./UserManage.less'
;
...
@@ -52,12 +61,13 @@ const UserManage = () => {
...
@@ -52,12 +61,13 @@ const UserManage = () => {
const
[
treeLoading
,
setTreeLoading
]
=
useState
(
false
);
const
[
treeLoading
,
setTreeLoading
]
=
useState
(
false
);
const
[
tableLoading
,
setTableLoading
]
=
useState
(
false
);
const
[
tableLoading
,
setTableLoading
]
=
useState
(
false
);
const
[
loading
,
setLoading
]
=
useState
(
true
);
const
[
loading
,
setLoading
]
=
useState
(
true
);
const
[
multiOperate
,
setMultiOperate
]
=
useState
(
true
);
// 是否禁用用户批量操作
const
[
multiOperateButtonType
,
setMultiOperateButtonType
]
=
useState
(
''
);
// 更改批量操作按钮样式
const
[
treeData
,
setTreeData
]
=
useState
([]);
// 用户机构树
const
[
treeData
,
setTreeData
]
=
useState
([]);
// 用户机构树
const
[
expandedKeys
,
setExpandedKeys
]
=
useState
([
''
]);
//
const [expandedKeys, setExpandedKeys] = useState(['']);
const
[
treeDataCopy
,
setTreeDataCopy
]
=
useState
([]);
// 机构树数据备份,用于更改机构
const
[
treeDataCopy
,
setTreeDataCopy
]
=
useState
([]);
// 机构树数据备份,用于更改机构
const
[
treeState
,
setTreeState
]
=
useState
(
true
);
// 树第一次加载
const
[
treeState
,
setTreeState
]
=
useState
(
true
);
// 树第一次加载
// const [treeDispaly, setTreeDispaly] = useState(''); // 1
const
[
treeVisible
,
setTreeVisible
]
=
useState
(
true
);
// 树是否可见
const
[
treeVisible
,
setTreeVisible
]
=
useState
(
true
);
// 树是否可见
const
[
tableData
,
setTableData
]
=
useState
([]);
// 用户表
const
[
tableData
,
setTableData
]
=
useState
([]);
// 用户表
const
[
orgFilters
,
setOrgFilters
]
=
useState
([]);
// 用户列筛选
const
[
orgFilters
,
setOrgFilters
]
=
useState
([]);
// 用户列筛选
...
@@ -77,12 +87,17 @@ const UserManage = () => {
...
@@ -77,12 +87,17 @@ const UserManage = () => {
const
[
freezeUserVisible
,
setFreezeUserVisible
]
=
useState
(
false
);
// 冻结用户
const
[
freezeUserVisible
,
setFreezeUserVisible
]
=
useState
(
false
);
// 冻结用户
const
[
deleteUserVisible
,
setDeleteUserVisible
]
=
useState
(
false
);
// 删除用户
const
[
deleteUserVisible
,
setDeleteUserVisible
]
=
useState
(
false
);
// 删除用户
const
[
orgTitle
,
setOrgTitle
]
=
useState
(
'机构'
);
// 弹框标题
const
[
orgTitle
,
setOrgTitle
]
=
useState
(
'
当前
机构'
);
// 弹框标题
const
[
tableLength
,
setTableLength
]
=
useState
(
0
);
// 表格标题
const
[
tableLength
,
setTableLength
]
=
useState
(
0
);
// 表格标题
const
[
orgID
,
setOrgID
]
=
useState
();
// 机构ID
const
[
orgID
,
setOrgID
]
=
useState
();
// 机构ID
const
[
newOrgID
,
setNewOrgID
]
=
useState
();
// 更改机构新选择的ID
const
[
newOrgID
,
setNewOrgID
]
=
useState
();
// 更改机构新选择的ID
const
[
currentUser
,
setCurrentUser
]
=
useState
({});
// 当前用户
const
[
currentUser
,
setCurrentUser
]
=
useState
({});
// 当前用户
const
[
userIDs
,
setUserIDs
]
=
useState
(
''
);
// 批量删除的用户
const
[
orgIDs
,
setOrgIDs
]
=
useState
(
''
);
// 批量操作的机构
const
[
multiDelete
,
setMultiDelete
]
=
useState
(
false
);
// 是否批量删除用户
const
[
multiChangeOrgs
,
setMultiChangeOrgs
]
=
useState
(
false
);
// 是否批量更改机构
const
[
rolelist
,
setRolelist
]
=
useState
([]);
// 角色列表
const
[
rolelist
,
setRolelist
]
=
useState
([]);
// 角色列表
const
[
stationlist
,
setStationlist
]
=
useState
([]);
// 站点列表
const
[
stationlist
,
setStationlist
]
=
useState
([]);
// 站点列表
const
[
roleValueList
,
setRoleValueList
]
=
useState
({});
// 勾选的角色列表
const
[
roleValueList
,
setRoleValueList
]
=
useState
({});
// 勾选的角色列表
...
@@ -165,20 +180,44 @@ const UserManage = () => {
...
@@ -165,20 +180,44 @@ const UserManage = () => {
dataIndex
:
'ddid'
,
dataIndex
:
'ddid'
,
key
:
'ddid'
,
key
:
'ddid'
,
width
:
100
,
width
:
100
,
render
:
record
=>
{
if
(
record
)
{
return
(
<
Tooltip
title
=
{
record
}
>
<
span
style
=
{{
color
:
'#50aefc'
,
cursor
:
'pointer'
}}
>
已绑定
<
/span
>
<
/Tooltip
>
);
}
return
<
span
>
未绑定
<
/span>
;
},
},
},
{
{
title
:
'微信账户'
,
title
:
'微信账户'
,
dataIndex
:
'wxid'
,
dataIndex
:
'wxid'
,
key
:
'wxid'
,
key
:
'wxid'
,
width
:
100
,
width
:
100
,
render
:
record
=>
{
if
(
record
)
{
return
(
<
Tooltip
title
=
{
record
}
>
<
span
style
=
{{
color
:
'#50aefc'
,
cursor
:
'pointer'
}}
>
已绑定
<
/span
>
<
/Tooltip
>
);
}
return
<
span
>
未绑定
<
/span>
;
},
},
},
{
{
title
:
'操作'
,
title
:
'操作'
,
key
:
'action'
,
key
:
'action'
,
fixed
:
'right'
,
fixed
:
'right'
,
width
:
2
5
0
,
width
:
2
1
0
,
align
:
'center'
,
align
:
'center'
,
render
:
(
text
,
record
)
=>
(
render
:
record
=>
(
<
Space
size
=
"middle"
>
<
Space
size
=
"middle"
>
<
Tooltip
title
=
"关联角色"
>
<
Tooltip
title
=
"关联角色"
>
<
ShareAltOutlined
<
ShareAltOutlined
...
@@ -238,11 +277,18 @@ const UserManage = () => {
...
@@ -238,11 +277,18 @@ const UserManage = () => {
const
[
selectionType
]
=
useState
(
'checkbox'
);
const
[
selectionType
]
=
useState
(
'checkbox'
);
const
rowSelection
=
{
const
rowSelection
=
{
onChange
:
(
selectedRowKeys
,
selectedRows
)
=>
{
onChange
:
(
selectedRowKeys
,
selectedRows
)
=>
{
console
.
log
(
console
.
log
(
selectedRowKeys
.
toString
());
`selectedRowKeys:
${
selectedRowKeys
}
`
,
console
.
log
(
selectedRows
.
map
(
item
=>
item
.
OUID
).
toString
());
'selectedRows: '
,
setUserIDs
(
selectedRowKeys
.
toString
());
selectedRows
,
setOrgIDs
(
selectedRows
.
map
(
item
=>
item
.
OUID
).
toString
());
);
// 选中行数大于1时设置批量操作可行
if
(
selectedRows
.
length
>
1
)
{
setMultiOperate
(
false
);
setMultiOperateButtonType
(
'primary'
);
}
else
{
setMultiOperate
(
true
);
setMultiOperateButtonType
(
'default'
);
}
},
},
getCheckboxProps
:
record
=>
({
getCheckboxProps
:
record
=>
({
name
:
record
.
name
,
name
:
record
.
name
,
...
@@ -322,9 +368,8 @@ const UserManage = () => {
...
@@ -322,9 +368,8 @@ const UserManage = () => {
setTableLength
(
temp
.
length
);
setTableLength
(
temp
.
length
);
const
table
=
temp
.
map
((
item
,
index
)
=>
{
const
table
=
temp
.
map
((
item
,
index
)
=>
{
item
.
key
=
index
;
item
.
key
=
index
;
item
.
phoneCopy
=
item
.
phone
;
item
.
phone
=
item
.
phone
||
'-'
;
item
.
phone
=
item
.
phone
||
'-'
;
item
.
ddid
=
item
.
ddid
?
'已绑定'
:
'未绑定'
;
item
.
wxid
=
item
.
wxid
?
'已绑定'
:
'未绑定'
;
return
item
;
return
item
;
});
});
setTableData
(
table
);
setTableData
(
table
);
...
@@ -365,15 +410,22 @@ const UserManage = () => {
...
@@ -365,15 +410,22 @@ const UserManage = () => {
const
addUser
=
()
=>
{
const
addUser
=
()
=>
{
setUserVisible
(
true
);
setUserVisible
(
true
);
};
};
//
在根目录下添加
机构
//
添加顶级
机构
const
addOrg
=
(
title
,
id
)
=>
{
const
addOrg
=
()
=>
{
setAddOrgVisible
(
true
);
setAddOrgVisible
(
true
);
setOrgTitle
(
title
);
setOrgID
(
'-1'
);
setOrgID
(
id
);
addOrgForm
.
setFieldsValue
({
OUName
:
''
,
desrciption
:
''
,
});
};
};
// 添加下级机构
// 添加下级机构
const
addSubOrg
=
()
=>
{
const
addSubOrg
=
()
=>
{
setAddOrgVisible
(
true
);
setAddOrgVisible
(
true
);
addOrgForm
.
setFieldsValue
({
OUName
:
''
,
desrciption
:
''
,
});
};
};
// 编辑机构
// 编辑机构
const
editOrg
=
()
=>
{
const
editOrg
=
()
=>
{
...
@@ -396,6 +448,22 @@ const UserManage = () => {
...
@@ -396,6 +448,22 @@ const UserManage = () => {
}
}
},
[
currentUser
]);
},
[
currentUser
]);
/** ***用户批量操作****** */
// 用户关联
const
relateRoles
=
()
=>
{
setRoleVisible
(
true
);
};
// 更改机构
const
changeOrgs
=
()
=>
{
setChangeOrgVisible
(
true
);
setMultiChangeOrgs
(
true
);
};
// 删除用户
const
deleteUsers
=
()
=>
{
setDeleteUserVisible
(
true
);
setMultiDelete
(
true
);
};
/** ***右侧表格相关操作****** */
/** ***右侧表格相关操作****** */
// 用户关联
// 用户关联
const
relateRole
=
record
=>
{
const
relateRole
=
record
=>
{
...
@@ -413,6 +481,8 @@ const UserManage = () => {
...
@@ -413,6 +481,8 @@ const UserManage = () => {
setPasswordVisible
(
true
);
setPasswordVisible
(
true
);
passwordForm
.
setFieldsValue
({
passwordForm
.
setFieldsValue
({
oldpassword
:
record
.
password
,
oldpassword
:
record
.
password
,
newPassword
:
''
,
passwordConfirm
:
''
,
});
});
setCurrentUser
(
record
);
setCurrentUser
(
record
);
};
};
...
@@ -423,7 +493,7 @@ const UserManage = () => {
...
@@ -423,7 +493,7 @@ const UserManage = () => {
editUserForm
.
setFieldsValue
({
editUserForm
.
setFieldsValue
({
loginName
:
voca
.
stripTags
(
record
.
loginName
),
loginName
:
voca
.
stripTags
(
record
.
loginName
),
userName
:
voca
.
stripTags
(
record
.
userName
),
userName
:
voca
.
stripTags
(
record
.
userName
),
phone
:
record
.
phone
||
''
,
phone
:
record
.
phone
Copy
||
''
,
email
:
record
.
email
||
''
,
email
:
record
.
email
||
''
,
});
});
setCurrentUser
(
record
);
setCurrentUser
(
record
);
...
@@ -504,11 +574,13 @@ const UserManage = () => {
...
@@ -504,11 +574,13 @@ const UserManage = () => {
message
:
'提交成功'
,
message
:
'提交成功'
,
});
});
// 重新获取机构树与用户表
// 重新获取机构树与用户表
updateTrees
().
then
(()
=>
{
updateTrees
();
// 只能是字符串,数字没有选择效果
onSelect
([
`
${
res
.
OUID
}
`
]);
onSelect
([
`
${
res
.
OUID
}
`
]);
setExpandedKeys
([
`
${
res
.
OUID
}
`
]);
// updateTrees().then(() => {
});
// // 只能是字符串,数字没有选择效果
// onSelect([`${res.OUID}`]);
// // setExpandedKeys([`${res.OUID}`]);
// });
}
else
{
}
else
{
notification
.
error
({
notification
.
error
({
message
:
'提交失败'
,
message
:
'提交失败'
,
...
@@ -538,7 +610,7 @@ const UserManage = () => {
...
@@ -538,7 +610,7 @@ const UserManage = () => {
// 重新获取机构树与用户表
// 重新获取机构树与用户表
updateTrees
();
updateTrees
();
onSelect
([
orgID
]);
onSelect
([
orgID
]);
setExpandedKeys
([
`
${
orgID
}
`
]);
//
setExpandedKeys([`${orgID}`]);
}
else
{
}
else
{
notification
.
error
({
notification
.
error
({
message
:
'提交失败'
,
message
:
'提交失败'
,
...
@@ -611,7 +683,7 @@ const UserManage = () => {
...
@@ -611,7 +683,7 @@ const UserManage = () => {
setRoleVisible
(
false
);
setRoleVisible
(
false
);
// 跳转到新组织机构下的用户表
// 跳转到新组织机构下的用户表
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
setExpandedKeys
([
`
${
currentUser
.
OUID
}
`
]);
//
setExpandedKeys([`${currentUser.OUID}`]);
notification
.
success
({
notification
.
success
({
message
:
'提交成功'
,
message
:
'提交成功'
,
});
});
...
@@ -634,7 +706,28 @@ const UserManage = () => {
...
@@ -634,7 +706,28 @@ const UserManage = () => {
setChangeOrgVisible
(
false
);
setChangeOrgVisible
(
false
);
// 跳转到新组织机构下的用户表
// 跳转到新组织机构下的用户表
onSelect
([
newOrgID
]);
onSelect
([
newOrgID
]);
setExpandedKeys
([
`
${
newOrgID
}
`
]);
// setExpandedKeys([`${newOrgID}`]);
notification
.
success
({
message
:
'提交成功'
,
});
}
else
{
notification
.
error
({
message
:
'提交失败'
,
description
:
res
.
message
,
});
}
})
.
catch
(
err
=>
{
message
.
error
(
err
);
});
// 提交-批量更改机构
const
submitChangeOrgs
=
()
=>
addToOrgs
(
userIDs
,
orgIDs
,
newOrgID
)
.
then
(
res
=>
{
if
(
res
.
code
===
0
)
{
setChangeOrgVisible
(
false
);
// 跳转到新组织机构下的用户表
onSelect
([
newOrgID
]);
notification
.
success
({
notification
.
success
({
message
:
'提交成功'
,
message
:
'提交成功'
,
});
});
...
@@ -649,12 +742,16 @@ const UserManage = () => {
...
@@ -649,12 +742,16 @@ const UserManage = () => {
message
.
error
(
err
);
message
.
error
(
err
);
});
});
// 提交-修改密码
// 提交-修改密码
const
submitChangePassword
=
()
=>
const
submitChangePassword
=
()
=>
{
const
password
=
passwordForm
.
getFieldValue
(
'password'
);
const
newPassword
=
passwordForm
.
getFieldValue
(
'newPassword'
);
const
passwordConfirm
=
passwordForm
.
getFieldValue
(
'passwordConfirm'
);
if
(
newPassword
&&
passwordConfirm
&&
newPassword
===
passwordConfirm
)
{
updateUserPassword
(
updateUserPassword
(
currentUser
.
userID
,
currentUser
.
userID
,
passwordForm
.
getFieldValue
(
'password'
)
,
password
,
passwordForm
.
getFieldValue
(
'newPassword'
)
,
newPassword
,
passwordForm
.
getFieldValue
(
'passwordConfirm'
)
,
passwordConfirm
,
)
)
.
then
(
res
=>
{
.
then
(
res
=>
{
if
(
res
.
success
)
{
if
(
res
.
success
)
{
...
@@ -672,6 +769,18 @@ const UserManage = () => {
...
@@ -672,6 +769,18 @@ const UserManage = () => {
.
catch
(
err
=>
{
.
catch
(
err
=>
{
message
.
error
(
err
);
message
.
error
(
err
);
});
});
}
else
if
(
newPassword
===
''
||
passwordConfirm
===
''
)
{
notification
.
error
({
message
:
'提交失败'
,
description
:
'带*号为必填项,不能为空'
,
});
}
else
{
notification
.
error
({
message
:
'提交失败'
,
description
:
'确认密码不一致!'
,
});
}
};
// 提交-编辑用户
// 提交-编辑用户
const
submitEditUser
=
()
=>
const
submitEditUser
=
()
=>
postEditUser
(
postEditUser
(
...
@@ -686,7 +795,7 @@ const UserManage = () => {
...
@@ -686,7 +795,7 @@ const UserManage = () => {
setEditUserVisible
(
false
);
setEditUserVisible
(
false
);
// 重新获取用户表
// 重新获取用户表
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
setExpandedKeys
([
`
${
currentUser
.
OUID
}
`
]);
//
setExpandedKeys([`${currentUser.OUID}`]);
notification
.
success
({
notification
.
success
({
message
:
'提交成功'
,
message
:
'提交成功'
,
});
});
...
@@ -715,7 +824,7 @@ const UserManage = () => {
...
@@ -715,7 +824,7 @@ const UserManage = () => {
setFreezeUserVisible
(
false
);
setFreezeUserVisible
(
false
);
// 重新获取用户表
// 重新获取用户表
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
setExpandedKeys
([
`
${
currentUser
.
OUID
}
`
]);
//
setExpandedKeys([`${currentUser.OUID}`]);
notification
.
success
({
notification
.
success
({
message
:
'提交成功'
,
message
:
'提交成功'
,
});
});
...
@@ -731,6 +840,7 @@ const UserManage = () => {
...
@@ -731,6 +840,7 @@ const UserManage = () => {
message
.
error
(
err
);
message
.
error
(
err
);
});
});
};
};
// 提交-删除用户
const
submitDeleteUser
=
()
=>
{
const
submitDeleteUser
=
()
=>
{
postDeleteUser
(
currentUser
.
userID
)
postDeleteUser
(
currentUser
.
userID
)
.
then
(
res
=>
{
.
then
(
res
=>
{
...
@@ -741,7 +851,32 @@ const UserManage = () => {
...
@@ -741,7 +851,32 @@ const UserManage = () => {
});
});
// 重新获取用户表
// 重新获取用户表
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
onSelect
([
`
${
currentUser
.
OUID
}
`
]);
setExpandedKeys
([
`
${
currentUser
.
OUID
}
`
]);
// setExpandedKeys([`${currentUser.OUID}`]);
}
else
{
notification
.
error
({
message
:
'提交失败'
,
description
:
res
.
message
,
});
}
})
.
catch
(
err
=>
{
setTableLoading
(
false
);
message
.
error
(
err
);
});
};
// 提交-批量删除用户
const
submitDeleteUsers
=
()
=>
{
const
temp
=
orgIDs
.
split
(
','
);
const
[
org
]
=
temp
;
multiDeleteUsers
(
userIDs
,
org
)
.
then
(
res
=>
{
if
(
res
.
code
===
0
)
{
setDeleteUserVisible
(
false
);
notification
.
success
({
message
:
'提交成功'
,
});
// 重新获取用户表
onSelect
([
currentSelectOrg
]);
}
else
{
}
else
{
notification
.
error
({
notification
.
error
({
message
:
'提交失败'
,
message
:
'提交失败'
,
...
@@ -755,17 +890,56 @@ const UserManage = () => {
...
@@ -755,17 +890,56 @@ const UserManage = () => {
});
});
};
};
/** ***操作按钮**** */
// 机构操作
const
orgButtonMenu
=
(
<
Menu
>
<
Menu
.
Item
key
=
"1"
onClick
=
{
addUser
}
icon
=
{
<
UserAddOutlined
/>
}
>
添加用户
<
/Menu.Item
>
<
hr
/>
<
Menu
.
Item
key
=
"2"
onClick
=
{
addSubOrg
}
icon
=
{
<
UsergroupAddOutlined
/>
}
>
添加机构
<
/Menu.Item
>
<
Menu
.
Item
key
=
"3"
onClick
=
{
editOrg
}
icon
=
{
<
EditOutlined
/>
}
>
编辑机构
<
/Menu.Item
>
<
Menu
.
Item
key
=
"4"
onClick
=
{
deleteOrg
}
icon
=
{
<
DeleteOutlined
/>
}
>
删除机构
<
/Menu.Item
>
<
/Menu
>
);
// 用户批量操作
const
userButtonMenu
=
(
<
Menu
>
<
Menu
.
Item
key
=
"1"
onClick
=
{
relateRoles
}
icon
=
{
<
ShareAltOutlined
/>
}
>
批量关联角色
<
/Menu.Item
>
<
Menu
.
Item
key
=
"2"
onClick
=
{
changeOrgs
}
icon
=
{
<
ApartmentOutlined
/>
}
>
批量更改机构
<
/Menu.Item
>
<
Menu
.
Item
key
=
"3"
onClick
=
{
deleteUsers
}
icon
=
{
<
DeleteOutlined
/>
}
>
批量删除用户
<
/Menu.Item
>
<
/Menu
>
);
return
(
return
(
<
PageContainer
className
=
{
styles
.
userManageContainer
}
>
<
PageContainer
className
=
{
styles
.
userManageContainer
}
>
<
div
className
=
{
styles
.
contentContainer
}
>
<
div
className
=
{
styles
.
contentContainer
}
>
{
/* 左侧机构树 */
}
{
/* 左侧机构树 */
}
<
Spin
spinning
=
{
treeLoading
}
tip
=
"loading..."
>
<
Spin
spinning
=
{
treeLoading
}
tip
=
"loading..."
>
<
div
className
=
{
treeVisible
?
styles
.
orgContainer
:
styles
.
hide
}
>
<
div
{
/* <div className={styles.orgContainer} style={{ display: treeDispaly }}> */
}
className
=
{
classnames
({
[
styles
.
orgContainer
]:
true
,
[
styles
.
orgContainerHide
]:
!
treeVisible
,
})}
>
<
div
>
<
span
style
=
{{
margin
:
'10px'
}}
>
机构列表
<
/span
>
<
span
style
=
{{
margin
:
'10px'
}}
>
机构列表
<
/span
>
<
Tooltip
title
=
"添加
机构"
>
<
Tooltip
title
=
"添加顶级
机构"
>
<
UsergroupAddOutlined
<
UsergroupAddOutlined
onClick
=
{()
=>
addOrg
(
'根目录'
,
'-1'
)}
onClick
=
{()
=>
addOrg
(
)}
style
=
{{
style
=
{{
float
:
'right'
,
float
:
'right'
,
color
:
'#1890FF'
,
color
:
'#1890FF'
,
...
@@ -786,58 +960,47 @@ const UserManage = () => {
...
@@ -786,58 +960,47 @@ const UserManage = () => {
/
>
/
>
)}
)}
<
/div
>
<
/div
>
<
/Spin
>
<
div
style
=
{{
color
:
'#1890FF'
,
marginTop
:
'35vh'
,
fontSize
:
'18px'
}
}
>
<
div
className
=
{
styles
.
switcher
}
>
{
treeVisible
&&
(
{
treeVisible
&&
(
<
Tooltip
title
=
"隐藏机构列表"
>
<
Tooltip
title
=
"隐藏机构列表"
>
<
DoubleLeftOutlined
<
DoubleLeftOutlined
onClick
=
{()
=>
setTreeVisible
(
false
)}
/
>
onClick
=
{()
=>
{
setTreeVisible
(
false
);
// setTreeDispaly('none');
}}
/
>
<
/Tooltip
>
<
/Tooltip
>
)}
)}
{
!
treeVisible
&&
(
{
!
treeVisible
&&
(
<
Tooltip
title
=
"显示机构列表"
>
<
Tooltip
title
=
"显示机构列表"
>
<
DoubleRightOutlined
<
DoubleRightOutlined
onClick
=
{()
=>
setTreeVisible
(
true
)}
/
>
onClick
=
{()
=>
{
setTreeVisible
(
true
);
// setTreeDispaly('block');
}}
/
>
<
/Tooltip
>
<
/Tooltip
>
)}
)}
<
/div
>
<
/div
>
<
/div
>
<
/Spin
>
{
/* 右侧用户表 */
}
{
/* 右侧用户表 */
}
<
div
className
=
{
styles
.
userContainer
}
>
<
div
className
=
{
styles
.
userContainer
}
>
<
div
style
=
{{
height
:
'50px'
}}
>
<
div
style
=
{{
height
:
'50px'
}}
>
<
p
style
=
{{
margin
:
'16px 0 10px 16px'
,
display
:
'inline-block'
}}
>
<
p
style
=
{{
margin
:
'16px 0 10px 16px'
,
display
:
'inline-block'
}}
>
用户数量(
{
orgTitle
}
(共
{
tableLength
}
人)
<
span
className
=
{
styles
.
redText
}
>
{
tableLength
}
<
/span>
)
<
/p
>
<
/p
>
<
span
style
=
{{
float
:
'right'
,
margin
:
'10px'
}}
>
<
span
style
=
{{
float
:
'right'
,
margin
:
'10px'
}}
>
<
Search
<
Search
style
=
{{
width
:
266
}}
style
=
{{
width
:
300
}}
placeholder
=
"
搜索
登录名称/用户名称/手机号"
placeholder
=
"
请输入
登录名称/用户名称/手机号"
onSearch
=
{
submitSearchUser
}
onSearch
=
{
submitSearchUser
}
onChange
=
{
e
=>
handleSearch
(
e
)}
onChange
=
{
e
=>
handleSearch
(
e
)}
enterButton
enterButton
value
=
{
searchWord
}
value
=
{
searchWord
}
/
>
/
>
<
Button
type
=
"primary"
onClick
=
{
addUser
}
>
<
Dropdown
overlay
=
{
orgButtonMenu
}
>
添加用户
<
Button
type
=
"primary"
>
<
/Button
>
机构操作
<
DownOutlined
/>
<
Button
type
=
"primary"
onClick
=
{
addSubOrg
}
>
添加机构
<
/Button
>
<
Button
type
=
"primary"
onClick
=
{
editOrg
}
>
编辑机构
<
/Button
>
<
/Button
>
<
Button
type
=
"primary"
onClick
=
{
deleteOrg
}
>
<
/Dropdown
>
删除机构
<
Dropdown
overlay
=
{
userButtonMenu
}
disabled
=
{
multiOperate
}
>
<
Button
type
=
{
multiOperateButtonType
}
>
用户批量操作
<
DownOutlined
/>
<
/Button
>
<
/Button
>
<
/Dropdown
>
<
/span
>
<
/span
>
<
/div
>
<
/div
>
<
Table
<
Table
...
@@ -854,8 +1017,10 @@ const UserManage = () => {
...
@@ -854,8 +1017,10 @@ const UserManage = () => {
loading
=
{
tableLoading
}
loading
=
{
tableLoading
}
scroll
=
{{
x
:
'max-content'
}}
scroll
=
{{
x
:
'max-content'
}}
pagination
=
{{
pagination
=
{{
showTotal
:
()
=>
`共
${
tableLength
}
条`
,
showTotal
:
(
total
,
range
)
=>
`第
${
range
[
0
]}
-
${
range
[
1
]}
条/共
${
total
}
条`
,
pageSizeOptions
:
[
10
,
20
,
50
,
100
],
pageSizeOptions
:
[
10
,
20
,
50
,
100
],
defaultPageSize
:
20
,
showQuickJumper
:
true
,
showQuickJumper
:
true
,
showSizeChanger
:
true
,
showSizeChanger
:
true
,
}}
}}
...
@@ -877,9 +1042,9 @@ const UserManage = () => {
...
@@ -877,9 +1042,9 @@ const UserManage = () => {
<
Form
.
Item
<
Form
.
Item
name
=
"loginName"
name
=
"loginName"
label
=
"登录名称"
label
=
"登录名称"
rules
=
{[{
required
:
true
,
message
:
'不能为空'
}]}
rules
=
{[{
required
:
true
,
message
:
'不能为空
且不支持中文
'
}]}
>
>
<
Input
placeholder
=
"
请输入登录名称
"
/>
<
Input
placeholder
=
"
登录名称不支持中文
"
/>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
<
Form
.
Item
name
=
"password"
name
=
"password"
...
@@ -895,17 +1060,35 @@ const UserManage = () => {
...
@@ -895,17 +1060,35 @@ const UserManage = () => {
>
>
<
Input
placeholder
=
"请输入用户姓名"
/>
<
Input
placeholder
=
"请输入用户姓名"
/>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
name
=
"phone"
label
=
"手机号码"
>
<
Form
.
Item
name
=
"phone"
label
=
"手机号码"
rules
=
{[
{
pattern
:
new
RegExp
(
/^1
(
3|4|5|6|7|8|9
)\d{9}
$/
),
message
:
'请输入有效的手机号码!'
,
},
]}
>
<
Input
placeholder
=
"请输入手机号码"
/>
<
Input
placeholder
=
"请输入手机号码"
/>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
name
=
"email"
label
=
"电子邮箱"
>
<
Form
.
Item
<
Input
placeholder
=
"请输入电子邮箱"
/>
name
=
"email"
label
=
"电子邮箱"
rules
=
{[
{
type
:
'email'
,
message
:
'请输入有效的电子邮箱!'
,
},
]}
>
<
Input
placeholder
=
"请输入电子邮箱"
autoComplete
=
"off"
/>
<
/Form.Item
>
<
/Form.Item
>
<
/Form
>
<
/Form
>
<
/Modal
>
<
/Modal
>
{
/* 添加下级机构 */
}
{
/* 添加下级机构 */
}
<
Modal
<
Modal
title
=
{
`在
${
orgTitle
}
下添加机构`
}
title
=
{
orgID
===
'-1'
?
'添加顶级机构'
:
`在
${
orgTitle
}
下添加机构`
}
visible
=
{
addOrgVisible
}
visible
=
{
addOrgVisible
}
onOk
=
{
submitAddOrg
}
onOk
=
{
submitAddOrg
}
onCancel
=
{()
=>
setAddOrgVisible
(
false
)}
onCancel
=
{()
=>
setAddOrgVisible
(
false
)}
...
@@ -1000,8 +1183,11 @@ const UserManage = () => {
...
@@ -1000,8 +1183,11 @@ const UserManage = () => {
<
Modal
<
Modal
title
=
"更改机构"
title
=
"更改机构"
visible
=
{
changeOrgVisible
}
visible
=
{
changeOrgVisible
}
onOk
=
{
submitChangeOrg
}
onOk
=
{
multiChangeOrgs
?
submitChangeOrgs
:
submitChangeOrg
}
onCancel
=
{()
=>
setChangeOrgVisible
(
false
)}
onCancel
=
{()
=>
{
setChangeOrgVisible
(
false
);
setMultiChangeOrgs
(
false
);
}}
okText
=
"确认"
okText
=
"确认"
cancelText
=
"取消"
cancelText
=
"取消"
width
=
"330px"
width
=
"330px"
...
@@ -1076,11 +1262,29 @@ const UserManage = () => {
...
@@ -1076,11 +1262,29 @@ const UserManage = () => {
>
>
<
Input
placeholder
=
"请输入用户姓名"
/>
<
Input
placeholder
=
"请输入用户姓名"
/>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
name
=
"phone"
label
=
"手机号码"
>
<
Form
.
Item
name
=
"phone"
label
=
"手机号码"
rules
=
{[
{
pattern
:
new
RegExp
(
/^1
(
3|4|5|6|7|8|9
)\d{9}
$/
),
message
:
'请输入有效的手机号码!'
,
},
]}
>
<
Input
placeholder
=
"请输入手机号码"
/>
<
Input
placeholder
=
"请输入手机号码"
/>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
name
=
"email"
label
=
"电子邮箱"
>
<
Form
.
Item
<
Input
placeholder
=
"请输入电子邮箱"
/>
name
=
"email"
label
=
"电子邮箱"
rules
=
{[
{
type
:
'email'
,
message
:
'请输入有效的电子邮箱!'
,
},
]}
>
<
Input
placeholder
=
"请输入电子邮箱"
autoComplete
=
"off"
/>
<
/Form.Item
>
<
/Form.Item
>
<
/Form
>
<
/Form
>
<
/Modal
>
<
/Modal
>
...
@@ -1104,8 +1308,11 @@ const UserManage = () => {
...
@@ -1104,8 +1308,11 @@ const UserManage = () => {
<
Modal
<
Modal
title
=
"确认删除用户"
title
=
"确认删除用户"
visible
=
{
deleteUserVisible
}
visible
=
{
deleteUserVisible
}
onOk
=
{
submitDeleteUser
}
onOk
=
{
multiDelete
?
submitDeleteUsers
:
submitDeleteUser
}
onCancel
=
{()
=>
setDeleteUserVisible
(
false
)}
onCancel
=
{()
=>
{
setDeleteUserVisible
(
false
);
setMultiDelete
(
false
);
}}
okText
=
"确认"
okText
=
"确认"
cancelText
=
"取消"
cancelText
=
"取消"
>
>
...
...
src/pages/userCenter/UserManage.less
View file @
e24f991f
...
@@ -30,7 +30,15 @@
...
@@ -30,7 +30,15 @@
display: block;
display: block;
}
}
}
}
.ant-pagination-prev,.ant-pagination-next{
line-height: 8px !important;
}
.ant-input-search-button{
line-height: 1;
}
.ant-dropdown-menu-item > .anticon:first-child {
vertical-align: 0.15em !important;
}
}
}
.redText{
.redText{
color: red;
color: red;
...
@@ -78,9 +86,13 @@
...
@@ -78,9 +86,13 @@
height: calc(100vh - 74px);
height: calc(100vh - 74px);
float: left;
float: left;
padding: 10px;
padding: 10px;
width: 200px;
padding-right: 22px;
width: 240px;
background: white;
background: white;
overflow: auto;
overflow: auto;
margin-right:10px;
transform: translateX(0px);
transition: transform 0.5s;
.ant-tree{
.ant-tree{
padding-top: 6px;
padding-top: 6px;
.ant-tree-switcher{
.ant-tree-switcher{
...
@@ -91,14 +103,23 @@
...
@@ -91,14 +103,23 @@
}
}
}
}
}
}
.switcher{
color: #1890FF;
font-size: 18px;
position: absolute;
left: 220px;
top: 46%;
}
}
}
.hide{
display: none;
.orgContainerHide{
transform: translateX(-230px);
}
}
.userContainer{
.userContainer{
height: calc(100vh -
168
px) !important;
height: calc(100vh -
74
px) !important;
flex: 1;
flex: 1;
min-width:
84
0px;
min-width:
76
0px;
background: white;
background: white;
.ant-table-pagination{
.ant-table-pagination{
padding-right: 12px;
padding-right: 12px;
...
@@ -106,14 +127,13 @@
...
@@ -106,14 +127,13 @@
margin: 1px 0;
margin: 1px 0;
padding:8px;
padding:8px;
padding-right: 20px;
padding-right: 20px;
.ant-pagination-prev,.ant-pagination-next{
line-height: 8px !important;
}
}
}
.ant-btn{
margin: 0px 10px;
.ant-btn-primary{
.ant-btn-primary{
margin-left: 20px;
background: #50aefc;
background: #50aefc;
}
}
}
.ant-input-search-button{
.ant-input-search-button{
margin-left: 0px !important;
margin-left: 0px !important;
}
}
...
@@ -133,6 +153,10 @@
...
@@ -133,6 +153,10 @@
border-right: white;
border-right: white;
overflow: auto !important;
overflow: auto !important;
}
}
.ant-pagination{
z-index: 999;
border-top: 1px solid #f0eded;
}
}
}
}
}
}
}
...
...
src/services/userCenter/userManage/api.js
View file @
e24f991f
...
@@ -100,6 +100,15 @@ export const addToOrg = (userID, orgID, newOrgID) =>
...
@@ -100,6 +100,15 @@ export const addToOrg = (userID, orgID, newOrgID) =>
oldOUID
:
orgID
,
oldOUID
:
orgID
,
newOUID
:
newOrgID
,
newOUID
:
newOrgID
,
});
});
// 批量更改机构
export
const
addToOrgs
=
(
userIDs
,
orgIDs
,
newOrgID
)
=>
get
(
`
${
PUBLISH_SERVICE
}
/UserCenter/ModifyUserRole`
,
{
_version
:
9999
,
_dc
:
Date
.
now
(),
userIds
:
userIDs
,
oldGroupIds
:
orgIDs
,
newGroupId
:
newOrgID
,
});
export
const
updateUserPassword
=
(
export
const
updateUserPassword
=
(
userID
,
userID
,
...
@@ -141,6 +150,14 @@ export const deleteUser = userID =>
...
@@ -141,6 +150,14 @@ export const deleteUser = userID =>
_dc
:
Date
.
now
(),
_dc
:
Date
.
now
(),
userID
,
userID
,
});
});
// 批量删除用户
export
const
multiDeleteUsers
=
(
userIDs
,
orgIDs
)
=>
get
(
`
${
PUBLISH_SERVICE
}
/UserCenter/DeleteUsers`
,
{
_version
:
9999
,
_dc
:
Date
.
now
(),
userIds
:
userIDs
,
groupId
:
orgIDs
,
});
export
const
setUserRelation
=
(
userID
,
roleList
=
[],
stationList
)
=>
export
const
setUserRelation
=
(
userID
,
roleList
=
[],
stationList
)
=>
post
(
post
(
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment