Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
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
常超
founder_vue
Commits
7b275455
Commit
7b275455
authored
Nov 09, 2021
by
maxiaohan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
用户组管理
样式调整 角色设置和用户设置
parent
5a2faa21
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
531 additions
and
36 deletions
+531
-36
src/views/SystemManage/GroupManage.vue
+197
-32
src/views/SystemManage/UserManage.vue
+1
-0
src/views/SystemManage/scss/group.scss
+332
-4
src/views/cxyrd/QueryConfirm.vue
+1
-0
No files found.
src/views/SystemManage/GroupManage.vue
View file @
7b275455
...
...
@@ -42,7 +42,7 @@
></el-input>
</div>
<div
class=
"search-item"
>
<div
class=
"label"
>
用户所属单位
代码
:
</div>
<div
class=
"label"
>
用户所属单位
名称
:
</div>
<!--
<el-select-->
<!-- v-model="searchParams.unitcode"-->
<!-- class="search-info"-->
...
...
@@ -52,7 +52,7 @@
<el-input
v-model=
"searchParams.unitcode"
class=
"search-info"
placeholder=
"请输入单位
代码
"
placeholder=
"请输入单位
名称
"
></el-input>
</div>
<div
class=
"search-item"
>
...
...
@@ -130,9 +130,11 @@
</
template
>
</el-table-column>
<el-table-column
:width=
"btnwidth"
>
<div
class=
"set-btn"
@
click=
"setRole"
>
<
template
slot-scope=
"scope"
>
<div
class=
"set-btn"
@
click=
"setRole(scope.row)"
>
角色设置
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"username"
label=
"组成员"
:width=
"width3"
>
<
template
slot-scope=
"scope"
>
...
...
@@ -149,9 +151,11 @@
</
template
>
</el-table-column>
<el-table-column>
<div
class=
"set-btn"
:width=
"btnwidth"
@
click=
"setUser"
>
<
template
slot-scope=
"scope"
>
<div
class=
"set-btn"
:width=
"btnwidth"
@
click=
"setUser(scope.row)"
>
用户设置
</div>
</
template
>
</el-table-column>
<el-table-column
prop=
"status"
label=
"启用状态"
:width=
"width3"
>
<
template
slot-scope=
"scope"
>
...
...
@@ -340,31 +344,127 @@
</div>
</div>
<!-- 角色设置 -->
<el-dialog
class=
"dialog"
:title=
"title.roletitle"
:visible
.
sync=
"visible.setRoleVisible"
>
<div
slot=
"title"
>
<div
class=
"roleDialogBg"
v-show=
"isShowRoleDialogBg"
@
click=
"cancelrole"
></div>
<div
class=
"roleDialog"
v-show=
"isShowRoleDialog"
>
<div
class=
"head-title"
>
<div
class=
"left"
>
<img
class=
"title-img"
:src=
"src"
alt=
""
/>
<span>
{{ title.roletitle }}
</span>
{{ title.unitname }}
</div>
<div
class=
"close"
@
click=
"cancelrole"
>
<img
src=
"@/assets/img/manage/close.png"
alt=
""
/>
</div>
</div>
<div
class=
"info"
>
<div
class=
"header"
>
<div>
组角色
</div>
<div>
完成
</div>
</div>
<div
class=
"default-role-group"
>
<div
class=
"default-btn"
>
指纹入库员
</div>
<div
class=
"default-btn"
>
综合认定员
</div>
<div
class=
"default-btn"
>
高级认定员
</div>
</div>
<div
class=
"add-btn"
>
添加完成
</div>
<div
class=
"add-role-group"
>
<div
class=
"default-btn"
>
指纹入库员
</div>
<div
class=
"default-btn"
>
综合认定员
</div>
<div
class=
"default-btn"
>
高级认定员
</div>
<div
class=
"default-btn"
>
指纹入库员
</div>
<div
class=
"default-btn"
>
综合认定员
</div>
<div
class=
"default-btn"
>
高级认定员
</div>
</div>
</div>
<div
class=
"addbtns"
>
<div
class=
"btn1"
>
保存
</div>
<div
class=
"btn2"
@
click=
"cancelrole"
>
取消
</div>
</div>
</el-dialog>
</div>
<!-- 用户设置 -->
<el-dialog
class=
"dialog"
:title=
"title.usertitle"
:visible
.
sync=
"visible.setUserVisible"
>
<div
slot=
"title"
>
<div
class=
"userDialogBg"
v-show=
"isShowUserDialogBg"
@
click=
"canceluser"
></div>
<div
class=
"userDialog"
v-show=
"isShowUserDialog"
>
<div
class=
"head-title"
>
<div
class=
"left"
>
<img
class=
"title-img"
:src=
"src"
alt=
""
/>
<span>
{{ title.usertitle }}
</span>
{{ title.unitname }}
</div>
<div
class=
"close"
@
click=
"canceluser"
>
<img
src=
"@/assets/img/manage/close.png"
alt=
""
/>
</div>
</div>
<div
class=
"info"
>
<div
class=
"header"
>
<div
class=
"btn"
@
click=
"userBatch"
>
批量操作
</div>
<div
class=
"btn-right"
>
<el-checkbox
v-model=
"userStatus"
@
click=
"handleCheckChange"
>
停用
</el-checkbox
>
<div
class=
"btn"
@
click=
"delUserDatas"
>
删除
</div>
<div
class=
"btn"
@
click=
"addUserDatas"
>
<svg-icon
style=
"width: .8125rem;height: .8125rem;margin-bottom: -0.0625rem;margin-right: -.25rem"
icon-class=
"ic_add"
/>
添加组成员
</div>
</div>
</div>
<el-tag
class=
"tag"
v-show=
"isShowUserTip"
>
<i
class=
"el-icon-info"
style=
"color:#055FE7;font-size:.9375rem"
></i>
已选择
<span
style=
"color:#055FE7"
>
{{ userMultipleSelection.length }}
</span>
项
<span
v-html=
"' '"
></span>
服务调用总计:
<span
v-html=
"' '"
></span>
36.4万
<el-link
type=
"primary"
:underline=
"false"
style=
"margin-left: 1.25rem"
@
click=
"toggleUserSelection()"
>
清除
</el-link
>
</el-tag>
<div
class=
"user-table"
>
<el-table
ref=
"userMultipleTable"
highlight-current-row
:data=
"userTableData"
@
selection-change=
"userHandleSelectionChange"
>
<el-table-column
type=
"selection"
height
width=
"auto"
v-if=
"isUserSelected"
>
</el-table-column>
<el-table-column
prop=
"username"
label=
"用户名"
>
</el-table-column>
<el-table-column
prop=
"truename"
label=
"姓名"
>
</el-table-column>
<el-table-column
prop=
"policemanid"
label=
"警号"
>
</el-table-column>
<el-table-column
prop=
"group"
label=
"用户组"
>
</el-table-column>
<el-table-column
prop=
"unitname"
label=
"所属单位"
>
</el-table-column>
</el-table>
</div>
</div>
<div
class=
"addbtns"
>
<div
class=
"btn1"
>
确认
</div>
<div
class=
"btn2"
@
click=
"canceluser"
>
取消
</div>
</div>
<div
class=
"user-dialog"
>
<div
class=
"header"
>
1
</div>
<div
class=
"user-table"
>
2
</div>
</div>
</el-dialog>
</el-container>
</template>
...
...
@@ -422,8 +522,8 @@ export default {
width2
:
400
,
width1
:
200
,
height
:
565
,
btnwidth
:
15
0
,
title
:
{
roletitle
:
"角色设置"
,
usertitle
:
"用户设置"
},
btnwidth
:
20
0
,
title
:
{
roletitle
:
"角色设置"
,
usertitle
:
"用户设置"
,
unitname
:
""
},
visible
:
{
setRoleVisible
:
false
,
setUserVisible
:
false
},
src
:
require
(
"@/assets/img/police-badge.png"
),
// 选中数据
...
...
@@ -493,7 +593,18 @@ export default {
{
validator
:
validateRoleId
,
trigger
:
"blur"
,
required
:
true
}
],
//角色ID
status
:
[{
validator
:
validateStatus
,
trigger
:
"blur"
,
required
:
true
}]
// 启用状态
}
},
// 用户设置
userStatus
:
false
,
// 是否停用
userTableData
:
[],
// 用户设置 table数据
userMultipleSelection
:
[],
// 用户设置 选中的用户
isShowUserTip
:
false
,
// 用户设置 是否清空选项
allUserList
:
[],
// 用户设置 全部用户
isUserSelected
:
false
,
// 用户设置 批量操作
isShowUserDialogBg
:
false
,
// 用户设置 背景
isShowUserDialog
:
false
,
// 用户设置 弹窗
isShowRoleDialogBg
:
false
,
// 角色设置 背景
isShowRoleDialog
:
false
// 角色设置 弹窗
};
},
computed
:
{
...
...
@@ -528,7 +639,7 @@ export default {
}
console
.
log
(
this
.
multipleSelection
);
},
// 选择数据
// 选择
用户组
数据
handleSelectionChange
(
val
)
{
this
.
multipleSelection
=
val
;
console
.
info
(
this
.
multipleSelection
);
...
...
@@ -538,9 +649,48 @@ export default {
this
.
isShowTip
=
false
;
}
},
// 用户设置的清除所有选项
toggleUserSelection
(
rows
)
{
if
(
rows
)
{
rows
.
forEach
(
row
=>
{
this
.
$refs
.
userMultipleTable
.
toggleRowSelection
(
row
);
});
}
else
{
this
.
$refs
.
userMultipleTable
.
clearSelection
();
}
console
.
log
(
this
.
userMultipleSelection
);
},
// 用户设置的选择用户数据
userHandleSelectionChange
(
val
)
{
this
.
userMultipleSelection
=
val
;
console
.
info
(
this
.
userMultipleSelection
);
if
(
this
.
userMultipleSelection
.
length
)
{
this
.
isShowUserTip
=
true
;
}
else
{
this
.
isShowUserTip
=
false
;
}
},
// 用户设置 批量操作
userBatch
()
{
this
.
isUserSelected
=
!
this
.
isUserSelected
;
this
.
toggleUserSelection
();
},
// 用户设置 是否可用
handleCheckChange
()
{
// if(this.userStatus === true){
//
// }
// if (this.userStatus=== false)
console
.
info
(
this
.
userStatus
);
},
// 用户设置 删除用户
delUserDatas
()
{},
// 用户设置 新增用户
addUserDatas
()
{},
//是否是批量操作
batch
()
{
this
.
isSelected
=
!
this
.
isSelected
;
this
.
toggleSelection
();
},
// 当期页发生变化
handleCurrPageChange
:
function
(
val
)
{
...
...
@@ -595,15 +745,30 @@ export default {
this
.
isShowEditGroupDialog
=
false
;
this
.
isShowEditGroupDialogBg
=
false
;
},
// 关闭角色设置弹窗
cancelrole
()
{
this
.
isShowRoleDialog
=
false
;
this
.
isShowRoleDialogBg
=
false
;
},
// 关闭用户设置弹窗
canceluser
()
{
this
.
isShowUserDialog
=
false
;
this
.
isShowUserDialogBg
=
false
;
},
// 打开用户设置弹窗
setUser
()
{
this
.
visible
.
setUserVisible
=
true
;
setUser
(
row
)
{
// this.visible.setUserVisible = true;
this
.
isShowUserDialog
=
true
;
this
.
isShowUserDialogBg
=
true
;
this
.
title
.
unitname
=
row
.
groupname
;
},
// 打开角色弹窗
setRole
()
{
this
.
visible
.
setRoleVisible
=
true
;
setRole
(
row
)
{
// this.visible.setRoleVisible = true;
this
.
isShowRoleDialog
=
true
;
this
.
isShowRoleDialogBg
=
true
;
this
.
title
.
unitname
=
row
.
groupname
;
},
// 新增用户组
submitForm
(
formName
)
{
this
.
$refs
.
addFormParams
.
validate
(
valid
=>
{
...
...
src/views/SystemManage/UserManage.vue
View file @
7b275455
...
...
@@ -788,6 +788,7 @@ export default {
//是否是批量操作
batch
()
{
this
.
isSelected
=
!
this
.
isSelected
;
this
.
toggleSelection
();
},
// 当期页发生变化
handleCurrPageChange
:
function
(
val
)
{
...
...
src/views/SystemManage/scss/group.scss
View file @
7b275455
...
...
@@ -15,7 +15,7 @@
line-height
:
24px
;
}
.clear-btn
{
width
:
2
8px
;
width
:
3
8px
;
border
:
none
;
height
:
22px
;
padding
:
0
;
...
...
@@ -243,10 +243,56 @@
.user-dialog
{
.header
{
//border: saddlebrown 1px solid;
width
:
823px
;
height
:
40px
;
width
:
780px
;
height
:
45px
;
padding
:
0
;
.btn
{
width
:
96px
;
height
:
32px
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
text-align
:
center
;
cursor
:
pointer
;
}
.btn-right
{
//border: 1px solid darkblue;
position
:
absolute
;
right
:
24px
;
.btn
{
width
:
96px
;
height
:
32px
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
line-height
:
32px
;
text-align
:
center
;
margin-left
:
15px
;
}
}
// 未选中字体颜色
/
deep
/
.el-checkbox
{
font-size
:
14px
;
color
:
#333333
;
font-weight
:
400
;
}
/
deep
/
.el-checkbox__input
.el-checkbox__inner
:hover
{
border-color
:
#055fe7
;
}
// 选中样式
/
deep
/
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
font-size
:
14px
;
font-weight
:
400
;
color
:
#333333
;
}
/
deep
/
.el-checkbox__input.is-checked
.el-checkbox__inner
{
background
:
#055fe7
;
border-color
:
#055fe7
;
}
}
.user-table
{}
}
}
/
deep
/
.el-dialog
{
...
...
@@ -356,3 +402,284 @@
}
}
}
// 用户设置
.userDialogBg
{
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
500
;
width
:
100%
;
height
:
100%
;
background
:
rgba
(
$color
:
#fff
,
$alpha
:
0
.65
);
filter
:
blur
(
2px
);
}
.userDialog
{
box-sizing
:
border-box
;
position
:
absolute
;
top
:
calc
(
50%
-
257px
);
left
:
calc
(
50%
-
471
.5px
);
z-index
:
1000
;
width
:
890px
;
height
:
540px
;
background
:
#ffffff
;
box-shadow
:
0px
14px
30px
0px
rgba
(
0
,
21
,
51
,
0
.25
);
border-radius
:
6px
;
.head-title
{
box-sizing
:
border-box
;
width
:
100%
;
height
:
50px
;
display
:
flex
;
justify-content
:
space-between
;
padding
:
14px
32px
;
border-bottom
:
1px
solid
#EEEEEE
;
.left
{
font-size
:
16px
;
color
:
#282f3c
;
.title-img
{
width
:
21px
;
height
:
21px
;
margin-right
:
8px
;
}
}
.close
{
cursor
:
pointer
;
width
:
13px
;
height
:
13px
;
img
{
object-fit
:
contain
;
}
}
}
.info
{
padding
:
12px
24px
12px
24px
;
.header
{
width
:
780px
;
height
:
45px
;
padding
:
0
;
.btn
{
width
:
96px
;
height
:
32px
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
text-align
:
center
;
cursor
:
pointer
;
}
.btn-right
{
//border: 1px solid darkblue;
position
:
absolute
;
right
:
24px
;
.btn
{
width
:
96px
;
height
:
32px
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
line-height
:
32px
;
text-align
:
center
;
margin-left
:
15px
;
}
}
// 未选中字体颜色
/
deep
/
.el-checkbox
{
font-size
:
14px
;
color
:
#333333
;
font-weight
:
400
;
}
/
deep
/
.el-checkbox__input
.el-checkbox__inner
:hover
{
border-color
:
#055fe7
;
}
// 选中样式
/
deep
/
.el-checkbox__input.is-checked
+
.el-checkbox__label
{
font-size
:
14px
;
font-weight
:
400
;
color
:
#333333
;
}
/
deep
/
.el-checkbox__input.is-checked
.el-checkbox__inner
{
background
:
#055fe7
;
border-color
:
#055fe7
;
}
}
.tag
{
width
:
100%
;
color
:
#666666
;
margin-bottom
:
1rem
}
.user-table
{
width
:
100%
;
}
}
.addbtns
{
width
:
100%
;
text-align
:
center
;
.btn1
{
width
:
72px
;
height
:
40px
;
background
:
#FFFFFF
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
line-height
:
40px
;
margin-right
:
15px
;
cursor
:
pointer
;
}
.btn2
{
width
:
72px
;
height
:
40px
;
background
:
#055FE7
;
border-radius
:
4px
;
font-size
:
14px
;
color
:
#FFFFFF
;
line-height
:
40px
;
cursor
:
pointer
;
}
}
}
// 角色设置 背景
.roleDialogBg
{
position
:
absolute
;
top
:
0
;
left
:
0
;
z-index
:
500
;
width
:
100%
;
height
:
100%
;
background
:
rgba
(
$color
:
#fff
,
$alpha
:
0
.65
);
filter
:
blur
(
2px
);
}
.roleDialog
{
box-sizing
:
border-box
;
position
:
absolute
;
top
:
calc
(
50%
-
257px
);
left
:
calc
(
50%
-
471
.5px
);
z-index
:
1000
;
width
:
626px
;
height
:
440px
;
background
:
#ffffff
;
box-shadow
:
0px
14px
30px
0px
rgba
(
0
,
21
,
51
,
0
.25
);
border-radius
:
6px
;
.head-title
{
box-sizing
:
border-box
;
width
:
100%
;
height
:
50px
;
display
:
flex
;
justify-content
:
space-between
;
padding
:
14px
32px
;
border-bottom
:
1px
solid
#EEEEEE
;
.left
{
font-size
:
16px
;
color
:
#282f3c
;
.title-img
{
width
:
21px
;
height
:
21px
;
margin-right
:
8px
;
}
}
.close
{
cursor
:
pointer
;
width
:
13px
;
height
:
13px
;
img
{
object-fit
:
contain
;
}
}
}
.info
{
padding
:
24px
;
.header
{
width
:
100%
;
display
:
flex
;
flex-direction
:
row
;
justify-content
:
space-between
;
margin-bottom
:
10px
}
//border: saddlebrown 1px solid;
.default-role-group
{
width
:
578px
;
height
:
auto
;
background
:
#FDFEFF
;
box-shadow
:
1px
0px
3px
0px
rgba
(
5
,
95
,
231
,
0
.3
)
,
-1px
1px
3px
0px
rgba
(
5
,
95
,
231
,
0
.24
);
border-radius
:
4px
;
padding
:
16px
;
margin
:
0
;
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:wrap
;
.default-btn
{
width
:
160px
;
height
:
32px
;
background
:
#F6F8FA
;
border-radius
:
4px
;
font-size
:
14px
;
color
:
#333333
;
line-height
:
32px
;
text-align
:
center
;
margin-right
:
16px
;
}
}
.add-btn
{
width
:
80px
;
height
:
22px
;
font-size
:
14px
;
font-family
:
MicrosoftYaHei
;
color
:
#055FE7
;
line-height
:
22px
;
margin
:
16px
0
16px
0
;
}
.add-role-group
{
width
:
578px
;
height
:
111px
;
background
:
#F6F8FA
;
box-shadow
:
1px
0px
3px
0px
rgba
(
5
,
95
,
231
,
0
.3
)
,
-1px
1px
3px
0px
rgba
(
5
,
95
,
231
,
0
.24
);
border-radius
:
4px
;
padding
:
16px
;
margin
:
0
;
display
:
flex
;
flex-direction
:
row
;
flex-wrap
:wrap
;
.default-btn
{
width
:
160px
;
height
:
32px
;
background
:
#F6F8FA
;
box-shadow
:
4px
4px
4px
0px
rgba
(
193
,
216
,
251
,
0
.8
)
,
-4px
-4px
4px
0px
#FFFFFF
;
border-radius
:
4px
;
font-size
:
14px
;
color
:
#333333
;
line-height
:
32px
;
text-align
:
center
;
margin-right
:
16px
;
}
}
}
.addbtns
{
width
:
100%
;
text-align
:
center
;
.btn1
{
width
:
72px
;
height
:
40px
;
background
:
#FFFFFF
;
border-radius
:
4px
;
border
:
1px
solid
#AEB5C2
;
font-size
:
14px
;
color
:
#2E3846
;
line-height
:
40px
;
cursor
:
pointer
;
margin-right
:
15px
;
}
.btn2
{
width
:
72px
;
height
:
40px
;
background
:
#055FE7
;
border-radius
:
4px
;
font-size
:
14px
;
color
:
#FFFFFF
;
line-height
:
40px
;
cursor
:
pointer
;
}
}
}
\ No newline at end of file
src/views/cxyrd/QueryConfirm.vue
View file @
7b275455
...
...
@@ -958,6 +958,7 @@ export default {
// 批量操作
batch
()
{
this
.
isSelected
=
!
this
.
isSelected
;
this
.
toggleSelection
();
},
/**
* @description: 清除所有选项
...
...
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