<template>
|
<el-container class="page-view">
|
<el-aside v-if="isDev" width="200px" style="background-color: #393d49">
|
<el-tree
|
:data="routesList"
|
default-expand-all
|
:props="defaultProps"
|
@node-click="handleNodeClick"
|
></el-tree>
|
</el-aside>
|
<el-container style="min-width: 1070px;height:100%;">
|
<el-header v-if="isDev" style="text-align: right;">
|
<span>王小虎</span>
|
</el-header>
|
<el-main class="page-main">
|
<keep-alive>
|
<router-view v-if="$route.meta.keepAlive"></router-view>
|
</keep-alive>
|
<router-view v-if="!$route.meta.keepAlive"></router-view>
|
</el-main>
|
</el-container>
|
</el-container>
|
</template>
|
<script>
|
import { routes } from '@/router/index'
|
|
export default {
|
data() {
|
return {
|
isDev: this.$projectInfo.isDev,
|
// isDev: false,
|
defaultProps: {
|
children: 'children',
|
label: 'resourceName'
|
},
|
// 起始路由（过滤部分路由）
|
startIndex: -1
|
}
|
},
|
methods: {
|
handleNodeClick(data) {
|
// const { resourceUrl, id } = data
|
// sessionStorage.setItem('g_menu_id', id)
|
// this.$router.push(resourceUrl)
|
this.$router.push(data.path)
|
},
|
madeRoutes(routes, parentPath) {
|
const { startIndex } = this
|
return routes.map(item => {
|
const { path, children, meta = {} } = item
|
const { title } = meta
|
const currPath = path.startsWith('/') ? path : `${parentPath}/${path}`
|
if (Array.isArray(children) && children.length > 0) {
|
return {
|
resourceName: title,
|
path: currPath,
|
children: this.madeRoutes(
|
children.filter((c, i) => i > startIndex),
|
path
|
)
|
}
|
}
|
return {
|
resourceName: title,
|
path: currPath
|
}
|
})
|
}
|
},
|
computed: {
|
routesList() {
|
return this.madeRoutes(routes)
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.page-view {
|
height: 100%;
|
& .page-main {
|
padding: 0 0 0 20px;
|
&::-webkit-scrollbar {
|
width: 10px;
|
height: 10px;
|
background-color: #fff;
|
}
|
&::-webkit-scrollbar-thumb {
|
border-radius: 1em;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
&::-webkit-scrollbar-track {
|
border-radius: 1em;
|
background-color: transparent;
|
}
|
}
|
}
|
</style>
|
