fix:todo
This commit is contained in:
zouzhibing
parent
bdfd41c4d6
commit
6c87ac2508
|
|
@ -5,6 +5,9 @@
|
|||
<div class="menu-wrap">
|
||||
<div
|
||||
class="item-menu-wrap"
|
||||
:class="{
|
||||
'active-menu':activeCurrentMenu===item.path
|
||||
}"
|
||||
v-for="item in menusRoutes"
|
||||
:key="item.path"
|
||||
@click="handleChangeMenu(item)"
|
||||
|
|
@ -23,8 +26,6 @@
|
|||
<el-menu
|
||||
:collapse="isCollapse"
|
||||
:default-active="activeMenu"
|
||||
background-color="#304156"
|
||||
text-color="#bfcbd9"
|
||||
:unique-opened="SettingStore.themeConfig.uniqueOpened"
|
||||
:collapse-transition="false"
|
||||
class="menu-columns"
|
||||
|
|
@ -40,14 +41,13 @@
|
|||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- <div class="layout-header">-->
|
||||
<!-- <div class="header-tool">-->
|
||||
<!-- <HeaderToolLeft/>-->
|
||||
<!-- <HeaderToolRight/>-->
|
||||
<!-- </div>-->
|
||||
<!-- <TagsView v-if="themeConfig.showTag"/>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="layout-header">
|
||||
<div class="header-tool">
|
||||
<HeaderToolLeft/>
|
||||
<HeaderToolRight/>
|
||||
</div>
|
||||
<TagsView v-if="themeConfig.showTag"/>
|
||||
</div>
|
||||
<Main/>
|
||||
</div>
|
||||
|
||||
|
|
@ -76,6 +76,8 @@ const permission_routes = computed(() => PermissionStore.permission_routes)
|
|||
const menusRoutes = computed(()=>{
|
||||
return PermissionStore.permission_routes.filter(item=>!item.hidden)
|
||||
})
|
||||
|
||||
const activeCurrentMenu = ref('')
|
||||
// 主题配置
|
||||
const themeConfig = computed(() =>SettingStore.themeConfig)
|
||||
const isCollapse = computed(() =>!SettingStore.isCollapse)
|
||||
|
|
@ -89,23 +91,18 @@ const activeMenu = computed(() => {
|
|||
const basePath = ref<string>('/')
|
||||
const subMenus = ref([])
|
||||
|
||||
watch(()=>[menusRoutes,route],()=>{
|
||||
console.log('===============================',route,route.path,menusRoutes)
|
||||
watch(()=>[route],()=>{
|
||||
if (!menusRoutes.value.length) return;
|
||||
let menuItem = menusRoutes.value.find(item=>{
|
||||
return item.path === route.path || `/${route.path.split("/")[1]}` === item.path
|
||||
})
|
||||
if(menuItem.children?.length) {
|
||||
const [firstMenu] = route.matched
|
||||
activeCurrentMenu.value = firstMenu.path;
|
||||
let menuItem = menusRoutes.value.find(item=>firstMenu.path === item.path)
|
||||
if(menuItem&&menuItem.children?.length) {
|
||||
subMenus.value = menuItem.children
|
||||
}else {
|
||||
subMenus.value = []
|
||||
}
|
||||
console.log('route.path',route.path.split('/'))
|
||||
basePath.value = `/${route.path.split("/")[1]}`
|
||||
|
||||
|
||||
console.log('menuItem.value',subMenus.value,basePath)
|
||||
|
||||
basePath.value = firstMenu.path
|
||||
console.log('======触发========触发======',subMenus.value)
|
||||
},{
|
||||
deep: true,
|
||||
immediate:true
|
||||
|
|
@ -118,7 +115,6 @@ const handleChangeMenu = (item)=>{
|
|||
}else {
|
||||
subMenus.value = [];
|
||||
}
|
||||
console.log('item.path',item.path)
|
||||
router.push(item.path);
|
||||
|
||||
}
|
||||
|
|
@ -131,10 +127,35 @@ console.log('permission_routes',menusRoutes.value,)
|
|||
<style lang="scss" scoped>
|
||||
.layout-columns-aside{
|
||||
flex-shrink: 0;
|
||||
width: 70px;
|
||||
height: 100vh;
|
||||
|
||||
width: 80px;
|
||||
min-height: 100vh;
|
||||
background-color: #304156;
|
||||
.menu-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.item-menu-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.active-menu{
|
||||
background: #1890ff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.title{
|
||||
color: #e5eaf3;
|
||||
}
|
||||
.el-icon{
|
||||
color: #e5eaf3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-columns{
|
||||
display: flex;
|
||||
|
|
@ -143,18 +164,24 @@ console.log('permission_routes',menusRoutes.value,)
|
|||
.layout-columns-sub{
|
||||
flex-shrink: 0;
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-color: #304156;
|
||||
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
border-right: 1px solid #eee;
|
||||
::v-deep(.el-menu){
|
||||
border-right: none;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
.container{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.layout-header{
|
||||
background: white;
|
||||
|
|
@ -173,21 +200,5 @@ console.log('permission_routes',menusRoutes.value,)
|
|||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.menu-wrap{
|
||||
.item-menu-wrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
.title{
|
||||
color: #e5eaf3;
|
||||
}
|
||||
.el-icon{
|
||||
color: #e5eaf3;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb" mode="out-in">
|
||||
<transition-group name="breadcrumb" >
|
||||
<el-breadcrumb-item :to="{ path: '/' }" key="home" v-if="matched[0].meta.title !== '首页'">
|
||||
<div class="breadcrumb-item">
|
||||
<span class="breadcrumb-title">首页</span>
|
||||
|
|
|
|||
|
|
@ -2,26 +2,26 @@
|
|||
<template v-if="!item.hidden">
|
||||
<template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)">
|
||||
<el-icon :size="20">
|
||||
<component :is="onlyOneChild?.meta.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>
|
||||
</el-menu-item>
|
||||
<!-- <el-menu-item :index="resolvePath(onlyOneChild.path)">-->
|
||||
<!-- <el-icon :size="20">-->
|
||||
<!-- <component :is="onlyOneChild?.meta.icon"></component>-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- <template #title>{{ onlyOneChild.meta && onlyOneChild.meta.title }}</template>-->
|
||||
<!-- </el-menu-item>-->
|
||||
</app-link>
|
||||
</template>
|
||||
<el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>
|
||||
<template #title>
|
||||
<el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>
|
||||
<span>{{ item.meta && item.meta.title }}</span>
|
||||
</template>
|
||||
<sub-item
|
||||
v-for="child in item.children"
|
||||
:key="child.path"
|
||||
:item="child"
|
||||
:base-path="resolvePath(child.path)"
|
||||
/>
|
||||
</el-sub-menu>
|
||||
<!-- <el-sub-menu :index="resolvePath(item.path)" v-else popper-append-to-body>-->
|
||||
<!-- <template #title>-->
|
||||
<!-- <el-icon :size="20"> <component :is="item.meta?.icon"></component></el-icon>-->
|
||||
<!-- <span>{{ item.meta && item.meta.title }}</span>-->
|
||||
<!-- </template>-->
|
||||
<!-- <sub-item-->
|
||||
<!-- v-for="child in item.children"-->
|
||||
<!-- :key="child.path"-->
|
||||
<!-- :item="child"-->
|
||||
<!-- :base-path="resolvePath(child.path)"-->
|
||||
<!-- />-->
|
||||
<!-- </el-sub-menu>-->
|
||||
</template>
|
||||
</template>
|
||||
|
||||
|
|
@ -60,8 +60,8 @@ const hasOneShowingChild = (children = [], parent) => {
|
|||
}
|
||||
// 如果没有要显示的子路由器，则显示父路由器
|
||||
if (showingChildren.length === 0) {
|
||||
// onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
|
||||
onlyOneChild.value = { ...parent, noShowingChildren: true }
|
||||
onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
|
||||
// onlyOneChild.value = { ...parent, noShowingChildren: true }
|
||||
return true
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +76,7 @@ const resolvePath = (routePath) => {
|
|||
return props.basePath
|
||||
}
|
||||
let path2 = path.resolve(props.basePath, routePath)
|
||||
console.log('============',path2)
|
||||
console.log('======path======',props.basePath)
|
||||
return path2
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ export const useSettingStore = defineStore({
|
|||
themeConfig:{
|
||||
// 显示设置
|
||||
showSetting:false,
|
||||
// 菜单展示模式 默认 vertical horizontal / vertical
|
||||
mode: 'vertical',
|
||||
// 菜单展示模式 默认 vertical horizontal / vertical /columns
|
||||
mode: 'columns',
|
||||
// tagsView 是否展示 默认展示
|
||||
showTag:true,
|
||||
// 页脚
|
||||
|
|
|
|||
|
|
@ -43,9 +43,14 @@
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http403-container {
|
||||
transform: translate(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.wscn-http403 {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<div class="bullshit">
|
||||
<div class="bullshit__oops">页面不存在！</div>
|
||||
<div class="bullshit__headline">{{ message }}</div>
|
||||
<div class="bullshit__headline">您没有操作角色...</div>
|
||||
<div class="bullshit__info">请检查URL地址是否正确, 或点击回到首页。</div>
|
||||
<router-link to="/" class="bullshit__return-home">回到首页</router-link>
|
||||
</div>
|
||||
|
|
@ -25,9 +25,14 @@
|
|||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.wscn-http404-container{
|
||||
transform: translate(-50%);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
.wscn-http404 {
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Reference in New Issue