Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
飞鱼0526
gin-vue-admin
提交
83f1933b
G
gin-vue-admin
项目概览
飞鱼0526
/
gin-vue-admin
与 Fork 源项目一致
Fork自
FLIPPED-AURORA / gin-vue-admin
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
83f1933b
编写于
12月 13, 2019
作者:
Mr.奇淼(
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
更改了用户设置角色 和角色设置菜单 角色设置权限的前端交互体验
上级
343a468b
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
246 addition
and
190 deletion
+246
-190
QMPlusVuePage/src/view/superAdmin/authority/authority.vue
QMPlusVuePage/src/view/superAdmin/authority/authority.vue
+40
-146
QMPlusVuePage/src/view/superAdmin/authority/components/apis.vue
...VuePage/src/view/superAdmin/authority/components/apis.vue
+99
-0
QMPlusVuePage/src/view/superAdmin/authority/components/menus.vue
...uePage/src/view/superAdmin/authority/components/menus.vue
+76
-0
QMPlusVuePage/src/view/superAdmin/menu/menu.vue
QMPlusVuePage/src/view/superAdmin/menu/menu.vue
+5
-5
QMPlusVuePage/src/view/superAdmin/user/user.vue
QMPlusVuePage/src/view/superAdmin/user/user.vue
+26
-39
未找到文件。
QMPlusVuePage/src/view/superAdmin/authority/authority.vue
浏览文件 @
83f1933b
<
template
>
<div>
<div
class=
"authority"
>
<div
class=
"button-box clearflex"
>
<el-button
@
click=
"addAuthority"
type=
"primary"
>
新增角色
</el-button>
</div>
...
...
@@ -9,8 +9,7 @@
<el-table-column
label=
"角色名称"
min-width=
"180"
prop=
"authorityName"
></el-table-column>
<el-table-column
fixed=
"right"
label=
"操作"
width=
"500"
>
<template
slot-scope=
"scope"
>
<el-button
@
click=
"addAuthMenu(scope.row)"
size=
"small"
type=
"text"
>
变更角色菜单
</el-button>
<el-button
@
click=
"addAuthApi(scope.row)"
size=
"small"
type=
"text"
>
变更角色Api
</el-button>
<el-button
@
click=
"opdendrawer(scope.row)"
size=
"small"
type=
"text"
>
设置权限
</el-button>
<el-button
@
click=
"deleteAuth(scope.row)"
size=
"small"
type=
"text"
>
删除角色
</el-button>
</
template
>
</el-table-column>
...
...
@@ -25,6 +24,7 @@
@
size-change=
"handleSizeChange"
layout=
"total, sizes, prev, pager, next, jumper"
></el-pagination>
<!-- 新增角色弹窗 -->
<el-dialog
:visible.sync=
"dialogFormVisible"
title=
"新增角色"
>
<el-form
:model=
"form"
>
...
...
@@ -41,43 +41,16 @@
</div>
</el-dialog>
<!-- 关联menu弹窗 -->
<el-dialog
:visible.sync=
"menuDialogFlag"
title=
"关联菜单"
>
<el-tree
:data=
"menuTreeData"
:default-checked-keys=
"menuTreeIds"
:props=
"menuDefaultProps"
default-expand-all
highlight-current
node-key=
"ID"
ref=
"menuTree"
show-checkbox
v-if=
"menuDialogFlag"
></el-tree>
<div
class=
"dialog-footer"
slot=
"footer"
>
<el-button
@
click=
"closeDialog"
>
取 消
</el-button>
<el-button
@
click=
"relation"
type=
"primary"
>
确 定
</el-button>
</div>
</el-dialog>
<!-- 关联api弹窗 -->
<el-dialog
:visible.sync=
"apiDialogFlag"
title=
"关联api"
>
<el-tree
:data=
"apiTreeData"
:default-checked-keys=
"apiTreeIds"
:props=
"apiDefaultProps"
default-expand-all
highlight-current
node-key=
"path"
ref=
"apiTree"
show-checkbox
v-if=
"apiDialogFlag"
></el-tree>
<div
class=
"dialog-footer"
slot=
"footer"
>
<el-button
@
click=
"closeDialog"
>
取 消
</el-button>
<el-button
@
click=
"authApiEnter"
type=
"primary"
>
确 定
</el-button>
</div>
</el-dialog>
<el-drawer
:visible.sync=
"drawer"
v-if=
"drawer"
:with-header=
"false"
size=
"40%"
title=
"角色配置"
>
<el-tabs
class=
"role-box"
type=
"border-card"
>
<el-tab-pane
label=
"角色菜单"
>
<Menus
:row=
"activeRow"
/>
</el-tab-pane>
<el-tab-pane
label=
"角色api"
>
<apis
:row=
"activeRow"
/>
</el-tab-pane>
</el-tabs>
</el-drawer>
</div>
</template>
...
...
@@ -89,9 +62,10 @@ import {
deleteAuthority
,
createAuthority
}
from
'
@/api/authority
'
import
{
getBaseMenuTree
,
addMenuAuthority
,
getMenuAuthority
}
from
'
@/api/menu
'
import
{
getAllApis
}
from
'
@/api/api
'
import
{
casbinPUpdata
,
getPolicyPathByAuthorityId
}
from
'
@/api/casbin
'
import
Menus
from
'
@/view/superAdmin/authority/components/menus
'
import
Apis
from
'
@/view/superAdmin/authority/components/apis
'
import
infoList
from
'
@/components/mixins/infoList
'
export
default
{
name
:
'
Authority
'
,
...
...
@@ -100,22 +74,10 @@ export default {
return
{
listApi
:
getAuthorityList
,
listKey
:
'
list
'
,
drawer
:
false
,
activeRow
:
{},
activeUserId
:
0
,
menuTreeData
:
[],
menuTreeIds
:
[],
menuDefaultProps
:
{
children
:
'
children
'
,
label
:
'
nickName
'
},
apiTreeData
:
[],
apiTreeIds
:
[],
apiDefaultProps
:
{
children
:
'
children
'
,
label
:
'
description
'
},
dialogFormVisible
:
false
,
menuDialogFlag
:
false
,
apiDialogFlag
:
false
,
form
:
{
authorityId
:
''
,
...
...
@@ -123,7 +85,15 @@ export default {
}
}
},
components
:
{
Menus
,
Apis
},
methods
:
{
opdendrawer
(
row
)
{
this
.
drawer
=
true
this
.
activeRow
=
row
},
// 删除角色
deleteAuth
(
row
)
{
this
.
$confirm
(
'
此操作将永久删除该角色, 是否继续?
'
,
'
提示
'
,
{
...
...
@@ -158,7 +128,6 @@ export default {
closeDialog
()
{
this
.
initForm
()
this
.
dialogFormVisible
=
false
this
.
menuDialogFlag
=
false
this
.
apiDialogFlag
=
false
},
// 确定弹窗
...
...
@@ -179,98 +148,23 @@ export default {
// 增加角色
addAuthority
()
{
this
.
dialogFormVisible
=
true
},
// 关联用户列表关系
async
addAuthMenu
(
row
)
{
const
res1
=
await
getMenuAuthority
({
authorityId
:
row
.
authorityId
})
const
menus
=
res1
.
data
.
menus
const
arr
=
[]
menus
.
map
(
item
=>
{
// 防止直接选中父级造成全选
if
(
!
menus
.
some
(
same
=>
same
.
parentId
===
item
.
menuId
))
{
arr
.
push
(
Number
(
item
.
menuId
))
}
})
this
.
menuTreeIds
=
arr
this
.
activeUserId
=
row
.
authorityId
this
.
menuDialogFlag
=
true
},
// 关联树 确认方法
async
relation
()
{
const
checkArr
=
this
.
$refs
.
menuTree
.
getCheckedNodes
(
false
,
true
)
const
res
=
await
addMenuAuthority
({
menus
:
checkArr
,
authorityId
:
this
.
activeUserId
})
if
(
res
.
success
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
添加成功!
'
})
}
this
.
closeDialog
()
},
// 创建api树方法
buildApiTree
(
apis
)
{
const
apiObj
=
new
Object
()
apis
&&
apis
.
map
(
item
=>
{
if
(
apiObj
.
hasOwnProperty
(
item
.
group
))
{
apiObj
[
item
.
group
].
push
(
item
)
}
else
{
Object
.
assign
(
apiObj
,
{
[
item
.
group
]:
[
item
]
})
}
})
const
apiTree
=
[]
for
(
const
key
in
apiObj
)
{
const
treeNode
=
{
ID
:
key
,
description
:
key
+
'
组
'
,
children
:
apiObj
[
key
]
}
apiTree
.
push
(
treeNode
)
}
return
apiTree
},
// 关联用户api关系
async
addAuthApi
(
row
)
{
const
res
=
await
getPolicyPathByAuthorityId
({
authorityId
:
row
.
authorityId
})
this
.
activeUserId
=
row
.
authorityId
this
.
apiTreeIds
=
res
.
data
.
paths
||
[]
this
.
apiDialogFlag
=
true
},
// 关联关系确定
async
authApiEnter
()
{
const
checkArr
=
this
.
$refs
.
apiTree
.
getCheckedKeys
(
true
)
const
res
=
await
casbinPUpdata
({
authorityId
:
this
.
activeUserId
,
paths
:
checkArr
})
if
(
res
.
success
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
res
.
msg
})
this
.
closeDialog
()
}
}
},
async
created
()
{
// 获取所有菜单树
const
res
=
await
getBaseMenuTree
()
this
.
menuTreeData
=
res
.
data
.
menus
// 获取api并整理成树结构
const
res2
=
await
getAllApis
()
const
apis
=
res2
.
data
.
apis
this
.
apiTreeData
=
this
.
buildApiTree
(
apis
)
}
}
</
script
>
<
style
scoped
lang=
"scss"
>
.button-box
{
padding
:
10px
20px
;
.el-button
{
float
:
right
;
<
style
lang=
"scss"
>
.authority
{
.button-box
{
padding
:
10px
20px
;
.el-button
{
float
:
right
;
}
}
}
.role-box
{
.el-tabs__content
{
height
:
calc
(
100vh
-
150px
);
overflow
:
auto
;
}
}
</
style
>
\ No newline at end of file
QMPlusVuePage/src/view/superAdmin/authority/components/apis.vue
0 → 100644
浏览文件 @
83f1933b
<
template
>
<div>
<div
class=
"clearflex"
>
<el-button
@
click=
"authApiEnter"
class=
"fl-right"
size=
"small"
type=
"primary"
>
确 定
</el-button>
</div>
<el-tree
:data=
"apiTreeData"
:default-checked-keys=
"apiTreeIds"
:props=
"apiDefaultProps"
default-expand-all
highlight-current
node-key=
"path"
ref=
"apiTree"
show-checkbox
></el-tree>
</div>
</
template
>
<
script
>
import
{
getAllApis
}
from
'
@/api/api
'
import
{
casbinPUpdata
,
getPolicyPathByAuthorityId
}
from
'
@/api/casbin
'
export
default
{
name
:
'
Apis
'
,
props
:
{
row
:
{
default
:
function
()
{
return
{}
},
type
:
Object
}
},
data
()
{
return
{
apiTreeData
:
[],
apiTreeIds
:
[],
apiDefaultProps
:
{
children
:
'
children
'
,
label
:
'
description
'
}
}
},
methods
:
{
// 创建api树方法
buildApiTree
(
apis
)
{
const
apiObj
=
new
Object
()
apis
&&
apis
.
map
(
item
=>
{
if
(
apiObj
.
hasOwnProperty
(
item
.
group
))
{
apiObj
[
item
.
group
].
push
(
item
)
}
else
{
Object
.
assign
(
apiObj
,
{
[
item
.
group
]:
[
item
]
})
}
})
const
apiTree
=
[]
for
(
const
key
in
apiObj
)
{
const
treeNode
=
{
ID
:
key
,
description
:
key
+
'
组
'
,
children
:
apiObj
[
key
]
}
apiTree
.
push
(
treeNode
)
}
return
apiTree
},
// 关联用户api关系
async
addAuthApi
(
row
)
{
const
res
=
await
getPolicyPathByAuthorityId
({
authorityId
:
this
.
row
.
authorityId
})
this
.
activeUserId
=
this
.
row
.
authorityId
this
.
apiTreeIds
=
res
.
data
.
paths
||
[]
},
// 关联关系确定
async
authApiEnter
()
{
const
checkArr
=
this
.
$refs
.
apiTree
.
getCheckedKeys
(
true
)
const
res
=
await
casbinPUpdata
({
authorityId
:
this
.
activeUserId
,
paths
:
checkArr
})
if
(
res
.
success
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
res
.
msg
})
}
}
},
async
created
()
{
// 获取api并整理成树结构
const
res2
=
await
getAllApis
()
const
apis
=
res2
.
data
.
apis
this
.
apiTreeData
=
this
.
buildApiTree
(
apis
)
const
res
=
await
getPolicyPathByAuthorityId
({
authorityId
:
this
.
row
.
authorityId
})
this
.
activeUserId
=
this
.
row
.
authorityId
this
.
apiTreeIds
=
res
.
data
.
paths
||
[]
}
}
</
script
>
<
style
lang=
"scss"
>
</
style
>
\ No newline at end of file
QMPlusVuePage/src/view/superAdmin/authority/components/menus.vue
0 → 100644
浏览文件 @
83f1933b
<
template
>
<div>
<div
class=
"clearflex"
>
<el-button
@
click=
"relation"
class=
"fl-right"
size=
"small"
type=
"primary"
>
确 定
</el-button>
</div>
<el-tree
:data=
"menuTreeData"
:default-checked-keys=
"menuTreeIds"
:props=
"menuDefaultProps"
default-expand-all
highlight-current
node-key=
"ID"
ref=
"menuTree"
show-checkbox
></el-tree>
</div>
</
template
>
<
script
>
import
{
getBaseMenuTree
,
getMenuAuthority
,
addMenuAuthority
}
from
'
@/api/menu
'
export
default
{
name
:
'
Menus
'
,
props
:
{
row
:
{
default
:
function
()
{
return
{}
},
type
:
Object
}
},
data
()
{
return
{
menuTreeData
:
[],
menuTreeIds
:
[],
menuDefaultProps
:
{
children
:
'
children
'
,
label
:
'
nickName
'
}
}
},
methods
:
{
// 关联树 确认方法
async
relation
()
{
const
checkArr
=
this
.
$refs
.
menuTree
.
getCheckedNodes
(
false
,
true
)
const
res
=
await
addMenuAuthority
({
menus
:
checkArr
,
authorityId
:
this
.
row
.
authorityId
})
if
(
res
.
success
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
添加成功!
'
})
}
}
},
async
created
()
{
// 获取所有菜单树
const
res
=
await
getBaseMenuTree
()
this
.
menuTreeData
=
res
.
data
.
menus
const
res1
=
await
getMenuAuthority
({
authorityId
:
this
.
row
.
authorityId
})
const
menus
=
res1
.
data
.
menus
const
arr
=
[]
menus
.
map
(
item
=>
{
// 防止直接选中父级造成全选
if
(
!
menus
.
some
(
same
=>
same
.
parentId
===
item
.
menuId
))
{
arr
.
push
(
Number
(
item
.
menuId
))
}
})
this
.
menuTreeIds
=
arr
}
}
</
script
>
<
style
lang=
"scss"
>
</
style
>
\ No newline at end of file
QMPlusVuePage/src/view/superAdmin/menu/menu.vue
浏览文件 @
83f1933b
...
...
@@ -43,7 +43,7 @@
layout=
"total, sizes, prev, pager, next, jumper"
></el-pagination>
<el-dialog
:visible.sync=
"dialogFormVisible"
title=
"新增菜单"
>
<el-dialog
:
before-close=
"handleClose"
:
visible.sync=
"dialogFormVisible"
title=
"新增菜单"
>
<el-form
:inline=
"true"
:model=
"form"
label-width=
"80px"
>
<el-form-item
label=
"路径"
>
<el-input
autocomplete=
"off"
v-model=
"form.path"
></el-input>
...
...
@@ -116,6 +116,10 @@ export default {
}
},
methods
:
{
handleClose
(
done
){
this
.
initForm
()
done
()
},
// 懒加载子菜单
load
(
tree
,
treeNode
,
resolve
)
{
resolve
([
...
...
@@ -172,7 +176,6 @@ export default {
},
// 关闭弹窗
closeDialog
()
{
this
.
initForm
()
this
.
dialogFormVisible
=
false
},
// 添加menu
...
...
@@ -189,15 +192,12 @@ export default {
message
:
'
添加成功!
'
})
this
.
getTableData
()
this
.
closeDialog
()
}
else
{
this
.
$message
({
type
:
'
error
'
,
message
:
'
添加失败!
'
})
this
.
closeDialog
()
}
this
.
initForm
()
this
.
dialogFormVisible
=
false
},
// 添加菜单方法,id为 0则为添加根菜单
...
...
QMPlusVuePage/src/view/superAdmin/user/user.vue
浏览文件 @
83f1933b
...
...
@@ -12,14 +12,20 @@
<el-table-column
label=
"uuid"
min-width=
"250"
prop=
"uuid"
></el-table-column>
<el-table-column
label=
"用户名"
min-width=
"150"
prop=
"userName"
></el-table-column>
<el-table-column
label=
"昵称"
min-width=
"150"
prop=
"nickName"
></el-table-column>
<el-table-column
label=
"用户
级别
"
min-width=
"150"
>
<el-table-column
label=
"用户
角色
"
min-width=
"150"
>
<
template
slot-scope=
"scope"
>
<div>
{{
scope
.
row
.
authority
.
authorityName
}}
</div>
</
template
>
</el-table-column>
<el-table-column
fixed=
"right"
label=
"操作"
width=
"200"
>
<
template
slot-scope=
"scope"
>
<el-button
@
click=
"changeAuth(scope.row)"
size=
"small"
type=
"text"
>
修改权限
</el-button>
<el-select
@
change=
"changeAuthority(scope.row)"
placeholder=
"请选择"
v-model=
"scope.row.authority.authorityId"
>
<el-option
:key=
"item.authorityId"
:label=
"item.authorityName"
:value=
"item.authorityId"
v-for=
"item in authOptions"
></el-option>
</el-select>
</
template
>
</el-table-column>
</el-table>
...
...
@@ -40,6 +46,7 @@
<
script
>
// 获取列表内容封装在mixins内部 getTableData方法 初始化已封装完成
import
{
getUserList
,
setUserAuthority
}
from
'
@/api/user
'
import
{
getAuthorityList
}
from
'
@/api/authority
'
import
infoList
from
'
@/components/mixins/infoList
'
export
default
{
...
...
@@ -49,43 +56,23 @@ export default {
return
{
listApi
:
getUserList
,
listKey
:
'
userList
'
,
dialogFormVisible
:
false
,
type
:
''
authOptions
:
[]
}
},
methods
:
{
initForm
()
{
this
.
form
=
{
path
:
''
,
group
:
''
,
description
:
''
}
},
changeAuth
(
row
)
{
this
.
$prompt
(
'
请输入级别ID
'
,
'
提示
'
,
{
confirmButtonText
:
'
确定
'
,
cancelButtonText
:
'
取消
'
async
changeAuthority
(
row
)
{
const
res
=
await
setUserAuthority
({
uuid
:
row
.
uuid
,
authorityId
:
row
.
authority
.
authorityId
})
.
then
(
async
({
value
})
=>
{
const
res
=
await
setUserAuthority
({
uuid
:
row
.
uuid
,
authorityId
:
value
})
if
(
res
.
success
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
设置成功
'
})
this
.
getTableData
()
}
})
.
catch
(()
=>
{
this
.
$message
({
type
:
'
info
'
,
message
:
'
取消输入
'
})
})
if
(
res
.
success
)
{
this
.
$message
({
type
:
'
success
'
,
message
:
'
角色设置成功
'
})
}
}
},
async
created
()
{
const
res
=
await
getAuthorityList
({
page
:
1
,
pageSize
:
999
})
this
.
authOptions
=
res
.
data
.
list
}
}
</
script
>
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录