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
222985a6
Commit
222985a6
authored
Nov 16, 2021
by
liyuhang19990520
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
页面ui交互
parent
7acfd8b7
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
227 additions
and
82 deletions
+227
-82
src/assets/img/qbryk/del333.png
+0
-0
src/assets/img/qbryk/delcolor.png
+0
-0
src/views/SystemManage/RoleManage.vue
+206
-63
src/views/SystemManage/scss/role.scss
+21
-19
No files found.
src/assets/img/qbryk/del333.png
0 → 100644
View file @
222985a6
185 Bytes
src/assets/img/qbryk/delcolor.png
0 → 100644
View file @
222985a6
190 Bytes
src/views/SystemManage/RoleManage.vue
View file @
222985a6
...
...
@@ -25,49 +25,82 @@
"
/>
</div>
<div
class=
"img-btn"
@
click=
"del(diyRoleItemIndex)"
>
<img
src=
"../../assets/img/role/delete.png"
style=
"
height: 0.9375rem;
width: 0.9375rem;
margin-left: 0.0625rem;
margin-top: 0.25rem;
"
/>
</div>
</div>
<div
class=
"default-role"
>
<div
class=
"default-role-item"
v-for=
"item in defaultRoleBtns"
:key=
"item.id"
:class=
"
{ active: item.id === d
efault
RoleItemIndex }"
:class=
"
{ active: item.id === d
iy
RoleItemIndex }"
@click="chooseDefaultRoleItem(item)"
>
{{
item
.
name
}}
</div>
</div>
<div
class=
"diy-roles"
>
<div
class=
"delbtns"
>
<div
class=
"diy-role-item"
v-for=
"(item, index) in diyRoleList"
:key=
"item.id"
:class=
"
{ active: item.id === diyRoleItemIndex }"
@click="chooseDiyRoleItem(item.id)"
class=
"delicon"
v-if=
"!delimgBoo"
@
click=
"delimgBoo = !delimgBoo"
>
<img
style=
"width: 0.85rem; height: 0.85rem; cursor: pointer"
src=
"../../assets/img/qbryk/del333.png"
/>
<span>
删除
</span>
</div>
<Confirmation
@
onConfirm=
"del(scope.row.id)"
content=
"删除"
v-if=
"delimgBoo"
:hintBoo=
"true"
>
<div
slot=
"reference"
class=
"delicon2"
>
<img
style=
"width: 0.85rem; height: 0.85rem; cursor: pointer"
src=
"../../assets/img/qbryk/delcolor.png"
/>
<span>
删除
</span>
</div>
</Confirmation>
</div>
<div
class=
"autoPlay"
ref=
"diyRoles"
>
<el-checkbox-group
v-model=
"btnCheckList"
>
<div
v-for=
"item in diyRoleList"
:key=
"item.id"
class=
"chooseItem"
>
<el-checkbox
:label=
"item.id"
class=
"checkChoose"
v-if=
"delimgBoo"
>
1
</el-checkbox
>
<div
:class=
"
{
'diy-role-item': true,
active: item.id === diyRoleItemIndex,
delWidth: delimgBoo,
}"
>
<div
v-show=
"!item.edit"
class=
"diy-edit-title"
@
click=
"chooseDiyRoleItem(item)"
>
<div
v-show=
"item.id !== diyRoleItemIndex"
class=
"diy-edit-title"
>
{{
item
.
name
}}
</div>
<el-input
v-show=
"item.id === diyRoleItemIndex
"
v-show=
"item.edit
"
size=
"mini"
class=
"diy-edit-title"
v-model=
"item.name"
></el-input>
<div
class=
"diy-edit-btn"
>
<img
class=
"img"
:src=
"editurl"
@
click=
"editDiyRoleItem(index)"
/>
<img
class=
"img"
:src=
"editurl"
@
click
.
stop=
"editDiyRoleItem(item)"
/>
</div>
</div>
</div>
</el-checkbox-group>
</div>
</div>
</div>
...
...
@@ -85,47 +118,48 @@
<div
class=
"btn"
@
click=
"save"
>
保存
</div>
</div>
</div>
<el-checkbox-group
v-model=
"checkList"
:disabled=
"disabled"
>
<div
class=
"role-info"
>
<!-- 角色权限菜单列-->
<div
class=
"menus"
>
<div
class=
"div3"
>
<el-checkbox
v-mod
el=
"permissionDataList[0].id"
>
<el-checkbox
:lab
el=
"permissionDataList[0].id"
>
{{
permissionDataList
[
0
].
name
}}
</el-checkbox>
<el-checkbox
v-mod
el=
"permissionDataList[1].id"
>
<el-checkbox
:lab
el=
"permissionDataList[1].id"
>
{{
permissionDataList
[
1
].
name
}}
</el-checkbox>
<el-checkbox
v-mod
el=
"permissionDataList[2].id"
>
<el-checkbox
:lab
el=
"permissionDataList[2].id"
>
{{
permissionDataList
[
2
].
name
}}
</el-checkbox>
</div>
<div
class=
"div3"
>
<el-checkbox
v-mod
el=
"permissionDataList[3].id"
>
<el-checkbox
:lab
el=
"permissionDataList[3].id"
>
{{
permissionDataList
[
3
].
name
}}
</el-checkbox>
</div>
<div
class=
"div1"
>
<el-checkbox
v-mod
el=
"permissionDataList[4].id"
>
<el-checkbox
:lab
el=
"permissionDataList[4].id"
>
{{
permissionDataList
[
4
].
name
}}
</el-checkbox>
</div>
<div
class=
"div1"
>
<el-checkbox
v-mod
el=
"permissionDataList[5].id"
>
<el-checkbox
:lab
el=
"permissionDataList[5].id"
>
{{
permissionDataList
[
5
].
name
}}
</el-checkbox>
</div>
<div
class=
"div1"
>
<el-checkbox
v-mod
el=
"permissionDataList[6].id"
>
<el-checkbox
:lab
el=
"permissionDataList[6].id"
>
{{
permissionDataList
[
6
].
name
}}
</el-checkbox>
</div>
<div
class=
"div2"
>
<el-checkbox
v-mod
el=
"permissionDataList[7].id"
>
<el-checkbox
:lab
el=
"permissionDataList[7].id"
>
{{
permissionDataList
[
7
].
name
}}
</el-checkbox>
</div>
<div
class=
"div3"
>
<el-checkbox
v-mod
el=
"permissionDataList[8].id"
>
<el-checkbox
:lab
el=
"permissionDataList[8].id"
>
{{
permissionDataList
[
8
].
name
}}
</el-checkbox>
</div>
...
...
@@ -137,7 +171,7 @@
v-for=
"item in permissionDataList[0].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
<br
/>
<div
...
...
@@ -145,7 +179,7 @@
v-for=
"item in permissionDataList[1].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
<br
/>
<div
...
...
@@ -153,7 +187,7 @@
v-for=
"item in permissionDataList[2].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
<div
class=
"div3"
>
...
...
@@ -162,7 +196,7 @@
v-for=
"item in permissionDataList[3].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
<div
class=
"div1"
>
...
...
@@ -171,7 +205,7 @@
v-for=
"item in permissionDataList[4].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
<div
class=
"div1"
>
...
...
@@ -180,7 +214,7 @@
v-for=
"item in permissionDataList[5].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
<div
class=
"div1"
>
...
...
@@ -189,7 +223,7 @@
v-for=
"item in permissionDataList[6].children"
:key=
"item.id"
>
<el-checkbox
v-model=
"item.flag
"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:label=
"item.id
"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
<div
class=
"div2"
>
...
...
@@ -198,7 +232,7 @@
v-for=
"item in permissionDataList[7].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
<div
class=
"div3"
>
...
...
@@ -207,23 +241,38 @@
v-for=
"item in permissionDataList[8].children"
:key=
"item.id"
>
<el-checkbox
v-mod
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
<el-checkbox
:lab
el=
"item.id"
>
{{
item
.
name
}}
</el-checkbox>
</div>
</div>
</div>
</div>
</el-checkbox-group>
</div>
</el-container>
</
template
>
<
script
>
import
"@/icons/ic_add.svg"
;
import
Confirmation
from
"@/components/Confirmation.vue"
;
export
default
{
name
:
"RoleManage"
,
components
:
{
Confirmation
,
},
watch
:
{
roleMenusSelection
:
function
(
val
)
{
console
.
info
(
val
);
},
btnType
:
{
immediate
:
true
,
handler
(
val
)
{
if
(
val
==
"default"
)
{
this
.
disabled
=
true
;
}
else
{
this
.
disabled
=
false
;
}
},
},
},
data
()
{
return
{
...
...
@@ -231,6 +280,7 @@ export default {
editurl
:
require
(
"@/assets/img/edit.png"
),
funFlag
:
true
,
dataFlag
:
false
,
checkList
:
[],
roles
:
[],
addRoleParams
:
[],
// 角色按钮
...
...
@@ -241,8 +291,12 @@ export default {
roleMenusSelection
:
[],
// 自定义的角色组
diyRoleList
:
[],
diyRoleItemIndex
:
-
1
,
defaultRoleItemIndex
:
-
1
,
diyRoleItemIndex
:
2
,
defaultRoleItemIndex
:
2
,
btnType
:
"default"
,
disabled
:
true
,
delimgBoo
:
false
,
btnCheckList
:
[],
};
},
methods
:
{
...
...
@@ -315,6 +369,12 @@ export default {
}
else
{
this
.
diyRoleList
.
push
(
item
);
}
if
(
res
.
data
.
length
>
0
)
{
this
.
checkList
=
res
.
data
[
0
].
permissions
.
map
((
i
)
=>
i
.
id
);
}
else
{
this
.
checkList
=
[];
}
});
console
.
info
(
"角色权限===》"
,
this
.
defaultRoleBtns
);
...
...
@@ -333,14 +393,17 @@ export default {
},
// 新增
add
()
{
this
.
resetEdit
();
var
roleitem
=
{
name
:
"自定义"
+
(
this
.
diyRoleList
.
length
+
1
),
flag
:
false
,
code
:
this
.
diyRoleList
.
length
,
edit
:
fals
e
,
edit
:
tru
e
,
};
this
.
diyRoleList
.
push
(
roleitem
);
console
.
info
(
"新增数据"
);
setTimeout
(()
=>
{
this
.
$refs
.
diyRoles
.
scrollTop
=
this
.
$refs
.
diyRoles
.
scrollHeight
;
},
20
);
},
// 编辑
edit
()
{
...
...
@@ -348,31 +411,44 @@ export default {
},
// 选中默认权限
chooseDefaultRoleItem
(
item
)
{
this
.
defaultRoleItemIndex
=
item
.
id
;
this
.
defaultRoleBtns
.
forEach
((
roleitem
,
idx
)
=>
{
if
(
idx
===
item
.
id
)
{
roleitem
.
flag
=
true
;
}
else
{
roleitem
.
flag
=
false
;
}
});
this
.
btnType
=
"default"
;
this
.
viewSelect
(
item
);
this
.
diyRoleItemIndex
=
item
.
id
;
},
viewSelect
(
item
)
{
this
.
checkList
=
(
item
.
permissions
&&
item
.
permissions
.
map
((
i
)
=>
i
.
id
))
||
[];
},
// 选中自定义某个权限
chooseDiyRoleItem
(
index
)
{
this
.
diyRoleItemIndex
=
index
;
this
.
diyRoleList
.
forEach
((
roleitem
,
idx
)
=>
{
if
(
idx
===
index
)
{
roleitem
.
flag
=
true
;
}
else
{
roleitem
.
flag
=
false
;
chooseDiyRoleItem
(
item
)
{
this
.
btnType
=
"custom"
;
if
(
item
.
id
!==
this
.
diyRoleItemIndex
)
{
this
.
resetEdit
();
}
})
;
// this.diyRoleList[index].flag = true
;
this
.
diyRoleItemIndex
=
item
.
id
;
this
.
viewSelect
(
item
)
;
},
// 编辑
editDiyRoleItem
(
id
)
{
this
.
diyRoleList
[
id
].
edit
=
true
;
console
.
info
(
"编辑方法"
);
editDiyRoleItem
(
item
)
{
let
edit
=
item
.
edit
;
let
index
=
this
.
diyRoleList
.
findIndex
((
i
)
=>
i
.
id
==
item
.
id
);
if
(
!
edit
&&
typeof
edit
!=
Boolean
)
edit
=
false
;
edit
=
!
edit
;
this
.
$set
(
this
.
diyRoleList
[
index
],
"edit"
,
edit
);
this
.
btnType
=
"custom"
;
if
(
item
.
id
!==
this
.
diyRoleItemIndex
)
{
this
.
resetEdit
();
}
this
.
diyRoleItemIndex
=
item
.
id
;
this
.
viewSelect
(
item
);
},
//重置编辑状态
resetEdit
()
{
let
newArr
=
this
.
diyRoleList
.
map
((
i
)
=>
{
i
.
edit
=
false
;
return
i
;
});
this
.
diyRoleList
=
newArr
;
},
funAuth
()
{
this
.
funFlag
=
true
;
...
...
@@ -390,7 +466,9 @@ export default {
this
.
getPermissionDataLists
();
},
mounted
()
{
this
.
defaultRoleBtns
[
0
].
flag
=
true
;
setTimeout
(()
=>
{
console
.
log
(
66666666
,
this
.
permissionDataList
);
},
2000
);
this
.
funFlag
=
true
;
},
};
...
...
@@ -398,4 +476,69 @@ export default {
<
style
scoped
lang=
"scss"
>
@import
"scss/role"
;
.delicon
{
font-size
:
10px
;
display
:
flex
!important
;
align-items
:
center
;
cursor
:
pointer
;
position
:
absolute
;
right
:
0
;
padding-right
:
10px
;
>
img
{
margin-right
:
5px
;
}
}
.delicon2
{
font-size
:
10px
;
display
:
flex
!important
;
align-items
:
center
;
cursor
:
pointer
;
padding-right
:
5px
;
color
:
#055fe7
;
>
img
{
margin-right
:
5px
;
}
}
.delbtns
{
position
:
absolute
;
top
:
0
;
left
:
0
;
height
:
21px
;
width
:
100%
;
text-align
:
right
;
padding-right
:
5px
;
margin-top
:
10px
;
color
:
#333333
!important
;
}
.diy-roles
{
position
:
relative
;
padding-top
:
25px
;
padding-left
:
0
!important
;
overflow
:
hidden
!important
;
display
:
flex
!important
;
justify-content
:
space-between
;
flex-flow
:
column
nowrap
;
}
.autoPlay
{
height
:
calc
(
100%
-
40px
);
margin-top
:
10px
;
padding-left
:
20px
;
overflow
:
auto
;
}
.chooseItem
{
position
:
relative
;
width
:
100%
;
}
.checkChoose
{
position
:
absolute
;
left
:
-20px
;
top
:
50%
;
transform
:
translateY
(
-30%
);
/deep/
.el-checkbox__label
{
display
:
none
;
}
}
.delWidth
{
width
:
170px
!important
;
}
</
style
>
src/views/SystemManage/scss/role.scss
View file @
222985a6
...
...
@@ -62,8 +62,7 @@
color
:
#666666
;
font-size
:
14px
;
background
:
#f6f8fa
;
box-shadow
:
4px
4px
4px
0px
rgba
(
193
,
216
,
251
,
0
.8
)
,
-4px
-4px
4px
0px
#ffffff
;
box-shadow
:
4px
4px
4px
0px
rgba
(
193
,
216
,
251
,
0
.8
)
,
-4px
-4px
4px
0px
#ffffff
;
border-radius
:
4px
;
margin-top
:
10px
;
cursor
:
pointer
;
...
...
@@ -77,7 +76,7 @@
}
}
}
.diy-roles
{
.diy-roles
{
//border: saddlebrown 1px solid;
width
:
215px
;
height
:
366px
;
...
...
@@ -85,12 +84,16 @@
padding-left
:
20px
;
//display: flex;
//flex-direction: column;
overflow
:scroll
;
.diy-role-item
{
overflow
:
scroll
;
.diy-role-item
{
float
:
right
;
box-sizing
:
border-box
;
padding-right
:
40px
;
position
:
relative
;
width
:
190px
;
height
:
40px
;
border-radius
:
4px
;
border
:
1px
solid
#
AEB5C
2
;
border
:
1px
solid
#
aeb5c
2
;
font-size
:
14px
;
color
:
#333333
;
line-height
:
40px
;
...
...
@@ -98,30 +101,30 @@
margin-left
:
-22px
;
cursor
:
pointer
;
overflow
:
hidden
;
&
.active
{
border
:
1px
solid
#055
FE
7
;
color
:
#055
FE
7
;
&
.active
{
border
:
1px
solid
#055
fe
7
;
color
:
#055
fe
7
;
}
.diy-edit-title
{
.diy-edit-title
{
width
:
146px
;
height
:
19px
;
font-size
:
14px
;
color
:
#333333
;
line-height
:
19px
;
}
.diy-edit-btn
{
.diy-edit-btn
{
width
:
40px
;
height
:
30px
;
background
:
#
DDEBFF
;
background
:
#
ddebff
;
box-shadow
:
0px
0px
4px
0px
rgba
(
5
,
95
,
231
,
0
.3
);
border-bottom-left-radius
:
250px
;
position
:
relativ
e
;
border-bottom-left-radius
:
250px
;
position
:
absolut
e
;
right
:
0
;
top
:
-3px
;
.img
{
top
:
0
;
.img
{
width
:
13px
;
height
:
14px
;
margin-bottom
:
13px
;
margin-bottom
:
13px
;
cursor
:
pointer
;
}
}
...
...
@@ -184,8 +187,7 @@
width
:
100%
;
height
:
690px
;
background
:
#ffffff
;
box-shadow
:
1px
0px
3px
0px
rgba
(
5
,
95
,
231
,
0
.3
)
,
-1px
1px
3px
0px
rgba
(
5
,
95
,
231
,
0
.24
);
box-shadow
:
1px
0px
3px
0px
rgba
(
5
,
95
,
231
,
0
.3
)
,
-1px
1px
3px
0px
rgba
(
5
,
95
,
231
,
0
.24
);
border-radius
:
10px
;
display
:
flex
;
flex-direction
:
row
;
...
...
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