Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
有来技术
vue3-element-admin
提交
b6f228df
V
vue3-element-admin
项目概览
有来技术
/
vue3-element-admin
通知
3
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue3-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b6f228df
编写于
12月 15, 2021
作者:
有
有来技术
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(Perm.vue): 侧边栏调整为setup语法糖,权限修改回显处理完成。
上级
d2570e31
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
78 addition
and
180 deletion
+78
-180
src/layout/components/Sidebar/SidebarItem.vue
src/layout/components/Sidebar/SidebarItem.vue
+63
-173
src/views/system/menu/components/Perm.vue
src/views/system/menu/components/Perm.vue
+15
-7
未找到文件。
src/layout/components/Sidebar/SidebarItem.vue
浏览文件 @
b6f228df
<
template
>
<div
v-if=
"!item.meta || !item.meta.hidden"
:class=
"[isCollapse ? 'simple-mode' : 'full-mode',
{'first-level': !isFirstLevel}]"
>
<div
v-if=
"!item.meta || !item.meta.hidden"
>
<template
v-if=
"
!alwaysShowParent && onlyOneChild && !onlyOneChild.children
"
v-if=
"
hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&(!item.meta|| !item.meta.alwaysShow)
"
>
<AppLink
v-if=
"onlyOneChild.meta"
:to=
"resolvePath(onlyOneChild.path)"
>
<el-menu-item
:index=
"resolvePath(onlyOneChild.path)"
:class=
"
{'submenu-title-noDropdown':!isFirstLevel}"
>
<svg-icon
v-if=
"onlyOneChild.meta&&onlyOneChild.meta.icon"
:icon-class=
"onlyOneChild.meta.icon"
></svg-icon>
<template
v-if=
"onlyOneChild.meta && onlyOneChild.meta.title"
#title
>
{{
onlyOneChild
.
meta
.
title
}}
</
template
>
<app-link
v-if=
"onlyOneChild.meta"
:to=
"resolvePath(onlyOneChild.path)"
>
<el-menu-item
:index=
"resolvePath(onlyOneChild.path)"
:class=
"
{'submenu-title-noDropdown':!isNest}">
<svg-icon
v-if=
"onlyOneChild.meta && onlyOneChild.meta.icon"
:icon-class=
"onlyOneChild.meta.icon"
></svg-icon>
<template
#title
>
{{
onlyOneChild
.
meta
.
title
}}
</
template
>
</el-menu-item>
</
AppL
ink>
</
app-l
ink>
</template>
<el-sub-menu
v-else
:index=
"resolvePath(item.path)"
>
<el-sub-menu
v-else
:index=
"resolvePath(item.path)"
>
<!-- popper-append-to-body -->
<
template
#title
>
<svg-icon
v-if=
"item.meta
&&
item.meta.icon"
:icon-class=
"item.meta.icon"
></svg-icon>
<svg-icon
v-if=
"item.meta
&&
item.meta.icon"
:icon-class=
"item.meta.icon"
></svg-icon>
<span
v-if=
"item.meta && item.meta.title"
>
{{
item
.
meta
.
title
}}
</span>
</
template
>
<
template
v-if=
"item.children"
>
<sidebar-item
v-for=
"child in item.children"
:key=
"child.path"
:item=
"child"
:is-collapse=
"isCollapse"
:is-first-level=
"false"
:base-path=
"resolvePath(child.path)"
class=
"nest-menu"
/>
</
template
>
<sidebar-item
v-for=
"child in item.children"
:key=
"child.path"
:item=
"child"
:is-nest=
"true"
:base-path=
"resolvePath(child.path)"
class=
"nest-menu"
/>
</el-sub-menu>
</div>
</template>
<
script
lang=
"ts"
>
<
script
setup
lang=
"ts"
>
import
path
from
'
path-browserify
'
import
{
defineComponent
,
PropType
,
computed
}
from
"
vue
"
;
import
{
RouteRecordRaw
}
from
'
vue-router
'
import
{
defineProps
,
PropType
,
computed
,
ref
}
from
"
vue
"
;
import
{
isExternal
}
from
'
@utils/validate
'
import
AppLink
from
'
./Link.vue
'
import
SvgIcon
from
'
@/components/SvgIcon/index.vue
'
;
import
{
RouteRecordRaw
}
from
"
vue-router
"
;
export
default
defineComponent
({
props
:
{
item
:
{
type
:
Object
as
PropType
<
RouteRecordRaw
>
,
required
:
true
},
isCollapse
:
{
type
:
Boolean
,
required
:
false
},
isFirstLevel
:
{
type
:
Boolean
,
required
:
false
},
basePath
:
{
type
:
String
,
required
:
true
}
const
props
=
defineProps
({
item
:
{
type
:
Object
as
PropType
<
RouteRecordRaw
>
,
required
:
true
},
components
:
{
AppLink
,
SvgIcon
isNest
:
{
type
:
Boolean
,
required
:
false
},
setup
(
props
)
{
const
alwaysShowParent
=
computed
(()
=>
{
if
(
props
.
item
.
meta
&&
props
.
item
.
meta
.
alwaysShow
)
{
return
true
}
else
{
return
false
}
})
const
showingChildrenNum
=
computed
(()
=>
{
if
(
props
.
item
.
children
)
{
const
showingChildren
=
props
.
item
.
children
.
filter
((
item
)
=>
{
if
(
item
.
meta
&&
item
.
meta
.
hidden
)
{
return
false
}
else
{
return
true
}
})
return
showingChildren
.
length
}
return
0
})
const
onlyOneChild
=
computed
(()
=>
{
if
(
showingChildrenNum
.
value
>
1
)
{
return
null
}
if
(
props
.
item
.
children
)
{
for
(
const
child
of
props
.
item
.
children
)
{
if
(
!
child
.
meta
||
!
child
.
meta
.
hidden
)
{
return
child
}
}
}
// If there is no children, return itself with path removed,
// because this.basePath already contains item's path information
return
{...
props
.
item
,
path
:
''
}
})
const
resolvePath
=
(
routePath
:
string
)
=>
{
if
(
isExternal
(
routePath
))
{
return
routePath
}
if
(
isExternal
(
props
.
basePath
))
{
return
props
.
basePath
}
return
path
.
resolve
(
props
.
basePath
,
routePath
)
}
return
{
alwaysShowParent
,
showingChildrenNum
,
onlyOneChild
,
resolvePath
}
basePath
:
{
type
:
String
,
required
:
true
}
})
</
script
>
<
style
lang=
"scss"
scoped
>
.el-sub-menu.is-active
>
.el-sub-menu__title
{
color
:
#f4f4f5
!
important
;
}
.full-mode
{
.nest-menu
.el-sub-menu
>
.el-sub-menu__title
,
.el-sub-menu
.el-menu-item
{
min-width
:
210px
!
important
;
#
background-color
:
#1f2d3d
!
important
;
const
onlyOneChild
=
ref
({});
&
:hover
{
background-color
:
#001528
!
important
;
}
function
hasOneShowingChild
(
children
=
[]
as
any
,
parent
:
RouteRecordRaw
)
{
if
(
!
children
)
{
children
=
[];
}
.el-menu-item
{
&
>
span
{
display
:
inline-block
;
padding-left
:
5px
;
const
showingChildren
=
children
.
filter
((
item
:
any
)
=>
{
if
(
item
.
mata
&&
item
.
mata
.
hidden
)
{
return
false
}
else
{
// Temp set(will be used if only has one showing child)
onlyOneChild
.
value
=
item
return
true
}
})
// When there is only one child router, the child router is displayed by default
if
(
showingChildren
.
length
===
1
)
{
return
true
}
.el-sub-menu
{
overflow
:
hidden
;
// Show parent if there are no child router to display
if
(
showingChildren
.
length
===
0
)
{
onlyOneChild
.
value
=
{...
parent
,
path
:
''
,
noShowingChildren
:
true
}
return
true
}
&
>
.el-sub-menu__title
{
.el-sub-menu__icon-arrow
{
display
:
none
;
}
return
false
};
&
>
span
{
padding-left
:
5px
;
}
}
function
resolvePath
(
routePath
:
string
)
{
if
(
isExternal
(
routePath
))
{
return
routePath
}
if
(
isExternal
(
props
.
basePath
))
{
return
props
.
basePath
}
return
path
.
resolve
(
props
.
basePath
,
routePath
)
}
.simple-mode
{
&
.first-level
{
.submenu-title-noDropdown
{
padding
:
0
!
important
;
position
:
relative
;
&
>
span
{
display
:
none
;
}
&
>
svg
{
margin-left
:
20px
;
}
}
.el-sub-menu
{
overflow
:
hidden
;
</
script
>
&
>
.el-sub-menu__title
{
padding
:
0px
!
important
;
.el-sub-menu__icon-arrow
{
display
:
none
;
}
<
style
lang=
"scss"
scoped
>
&
>
span
{
visibility
:
hidden
;
}
}
}
}
}
</
style
>
\ No newline at end of file
src/views/system/menu/components/Perm.vue
浏览文件 @
b6f228df
...
...
@@ -19,7 +19,7 @@
@
keyup.enter.native=
"handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button>
<el-button
:icon=
"Search"
@
click=
"handleQuery"
>
搜索
</el-button>
<el-button
:icon=
"Refresh"
@
click=
"resetQuery"
>
重置
</el-button>
</el-form-item>
</el-form>
...
...
@@ -114,7 +114,7 @@
</el-select>
</
template
>
</el-input>
<el-link
v-show=
"state.urlPerm.requestMethod"
>
<el-link
v-show=
"state.urlPerm.requestMethod"
>
{{ state.urlPerm.requestMethod }}:/{{ state.urlPerm.serviceName }}{{ state.urlPerm.requestPath }}
</el-link>
</el-form-item>
...
...
@@ -126,7 +126,7 @@
</el-form>
<
template
#footer
>
<div
class=
"dialog-footer"
>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
type=
"primary"
@
click=
"submitForm"
>
确 定
</el-button>
<el-button
@
click=
"cancel"
>
取 消
</el-button>
</div>
</
template
>
...
...
@@ -137,7 +137,7 @@
<
script
setup
lang=
"ts"
>
import
{
listPermsWithPage
,
getPermDetail
,
addPerm
,
updatePerm
,
deletePerms
}
from
"
@/api/system/perm
"
import
{
Search
,
Plus
,
Edit
,
Refresh
,
Delete
}
from
'
@element-plus/icons
'
import
{
onMounted
,
watch
,
reactive
,
ref
,
unref
,
getCurrentInstance
}
from
'
vue
'
import
{
onMounted
,
watch
,
reactive
,
ref
,
unref
,
getCurrentInstance
}
from
'
vue
'
import
{
ElForm
,
ElMessage
,
ElMessageBox
}
from
"
element-plus
"
const
{
proxy
}:
any
=
getCurrentInstance
();
...
...
@@ -183,7 +183,8 @@ const state = reactive({
id
:
undefined
,
name
:
undefined
,
urlPerm
:
undefined
,
btnPerm
:
undefined
btnPerm
:
undefined
,
menuId
:
undefined
},
rules
:
{
name
:
[
...
...
@@ -240,7 +241,6 @@ function handleSelectionChange(selection: any) {
}
/**
* 字典数据准备
*/
...
...
@@ -272,7 +272,15 @@ function handleUpdate(row: any) {
}
const
id
=
row
.
id
||
state
.
ids
getPermDetail
(
id
).
then
(
response
=>
{
state
.
formData
=
response
.
data
const
{
data
}
=
response
state
.
formData
=
data
if
(
data
&&
data
.
urlPerm
)
{
// GET:/youlai-admin/api/v1/users
const
urlPermArr
=
data
.
urlPerm
.
split
(
'
:
'
)
state
.
urlPerm
.
requestMethod
=
urlPermArr
[
0
]
state
.
urlPerm
.
serviceName
=
urlPermArr
[
1
].
substring
(
1
,
urlPermArr
[
1
].
substring
(
1
).
indexOf
(
'
/
'
)
+
1
)
state
.
urlPerm
.
requestPath
=
urlPermArr
[
1
].
substring
(
urlPermArr
[
1
].
substring
(
1
).
indexOf
(
'
/
'
)
+
1
)
}
})
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录