Skip to content

肖文锋 / clm-admin

Go to a project
Commit ace87dc0 by xiaowenfeng
Options

1、新增面包屑 

2、新增404路由
3、修改侧边栏动态渲染
parent b6ee349e
Inline Side-by-side
Showing with 177 additions and 112 deletions
src/components/LeftNav.vue
...@@ -14,30 +14,8 @@ ...@@ -14,30 +14,8 @@
<template #title> <template #title>
<span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">{{item.name}}</span></span> <span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">{{item.name}}</span></span>
</template> </template>
<a-menu-item :key="sub.id" v-for="(sub) in item.items">{{sub.name}}</a-menu-item> <a-menu-item :key="sub.path" v-for="(sub) in item.items">{{sub.name}}</a-menu-item>
<!-- <a-menu-item key="10">学习地图</a-menu-item>
<a-menu-item key="11">直播</a-menu-item>
<a-menu-item key="12">考试</a-menu-item>
<a-menu-item key="13">混合培训</a-menu-item> -->
</a-sub-menu> </a-sub-menu>
<!-- <a-sub-menu key="sub2">
<template #title>
<span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">资源管理</span></span>
</template>
<a-menu-item key="4">课程资源</a-menu-item>
<a-menu-item key="5">学习计划</a-menu-item>
<a-menu-item key="6">考试资料</a-menu-item>
<a-menu-item key="7">个人成就</a-menu-item>
<a-menu-item key="8">应用</a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub1">
<template #title>
<span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">组织管理</span></span>
</template>
<a-menu-item key="1">学员管理</a-menu-item>
<a-menu-item key="2">管理员</a-menu-item>
<a-menu-item key="3">讲师管理</a-menu-item>
</a-sub-menu> -->
</a-menu> </a-menu>
</div> </div>
</nav> </nav>
...@@ -53,40 +31,7 @@ export default { ...@@ -53,40 +31,7 @@ export default {
}, },
data () { data () {
return { return {
menus: [ menus: [],
{
name: '任务派发',
id: 'top1',
items: [
{ name: '学习项目', id: '1', route: '/s1' },
{ name: '学习地图', id: '2', route: '/s2' },
{ name: '直播', id: '3', route: '/s3' },
{ name: '考试', id: '4', route: '/s4' },
{ name: '混合培训', id: '5', route: '/s5' }
]
},
{
name: '资源管理',
id: 'top2',
items: [
{ name: '课程资源', id: '6', route: '/s6' },
{ name: '学习计划', id: '7', route: '/s7' },
{ name: '考试资料', id: '8', route: '/s8' },
{ name: '个人成就', id: '9', route: '/s9' },
{ name: '应用', id: '10', route: '/s10' }
]
},
{
name: '组织管理',
id: 'top3',
items: [
{ name: '学员管理', id: '11', route: '/traineeManage' },
{ name: '管理员', id: '12', route: '/admin' },
{ name: '讲师管理', id: '13', route: '/s13' }
]
}
],
routes: {},
rootSubmenuKeys: [], rootSubmenuKeys: [],
selectedKeys: [], selectedKeys: [],
openKeys: [] openKeys: []
...@@ -94,18 +39,45 @@ export default { ...@@ -94,18 +39,45 @@ export default {
}, },
mounted () { mounted () {
this.$router.isReady().then(() => { this.$router.isReady().then(() => {
console.log(this.$router) const routes = this.$router.options.routes
const currentRoute = this.$router.currentRoute.value.path const tops = routes[0].tops
this.menus.forEach((item) => { const leftnav = routes.slice(1, routes.length)
const currentRoute = this.$router.currentRoute.value.matched[0]
console.log(leftnav)
console.log(currentRoute)
console.log('tops:', tops)
const newTops = tops.map((item) => {
this.rootSubmenuKeys.push(item.id) this.rootSubmenuKeys.push(item.id)
item.items.forEach((sub) => { const grop = leftnav.filter(i => {
if (sub.route === currentRoute) { if (currentRoute && currentRoute.meta && item.id === currentRoute.meta.parent && i.path === currentRoute.path) {
this.selectedKeys.push(sub.id) this.selectedKeys.push(i.path)
this.openKeys.push(item.id) this.openKeys.push(item.id)
} }
this.routes[sub.id] = sub.route if (i.meta && i.meta.parent) {
return i.meta.parent === item.id
} else {
return false
}
}) })
if (grop) {
item.items = grop
}
return item
}) })
console.log('newTops:', newTops)
console.log('this.selectedKeys:', this.selectedKeys)
console.log('this.openKeys:', this.openKeys)
this.menus = newTops
// this.menus.forEach((item) => {
// this.rootSubmenuKeys.push(item.id)
// item.items.forEach((sub) => {
// if (sub.route === currentRoute) {
// this.selectedKeys.push(sub.id)
// this.openKeys.push(item.id)
// }
// this.routes[sub.id] = sub.route
// })
// })
}) })
}, },
methods: { methods: {
...@@ -118,8 +90,11 @@ export default { ...@@ -118,8 +90,11 @@ export default {
} }
}, },
select (e) { select (e) {
const [key] = e.selectedKeys console.log(e)
this.$router.push(this.routes[key]) // const [key] = e.selectedKeys
// console.log(this.routes[key])
// this.$router.push(this.routes[key])
this.$router.push(e.key)
} }
} }
} }
......
src/components/RightNav.vue
<template> <template>
<div class="nav-list"> <div class="nav-list">
<a-menu v-model:selectedKeys="current" mode="horizontal"> <a-menu v-model:selectedKeys="current" mode="horizontal">
<a-menu-item key="mail"> 学员管理 </a-menu-item> <a-menu-item :key="item.path" v-for="item in $route.matched[0].children"> <router-link :to="{path: item.path}">{{item.name}}</router-link> </a-menu-item>
<a-menu-item key="app"> 部门管理 </a-menu-item>
</a-menu> </a-menu>
</div> </div>
</template> </template>
...@@ -10,8 +9,11 @@ ...@@ -10,8 +9,11 @@
export default { export default {
data () { data () {
return { return {
current: ['mail'] current: []
} }
},
mounted () {
this.current.push(this.$route.path)
} }
} }
</script> </script>
src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue' import App from '../App.vue'
import ErrPage from '../views/ErrPage.vue'
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'App', name: 'App',
component: App, component: App,
redirect: '/traineeManage' redirect: '/traineeManage',
tops: [
{
name: '任务派发',
id: 'top1',
items: []
},
{
name: '资源管理',
id: 'top2',
items: []
},
{
name: '平台运营',
id: 'top3',
items: []
},
{
name: '组织管理',
id: 'top4',
items: []
},
{
name: '系统设置',
id: 'top5',
items: []
},
{
name: '帮助文档',
id: 'top6',
items: []
}
]
}, },
{ {
path: '/traineeManage', path: '/traineeManage',
name: 'TraineeManage', name: '学员管理',
// route level code-splitting component: () => import('../views/origanizationManage/TraineeManage.vue'),
// this generates a separate chunk (about.[hash].js) for this route redirect: '/traineeManage/member',
// which is lazy-loaded when the route is visited. meta: { parent: 'top4' },
component: () => import(/* webpackChunkName: "traineeManage" */ '../views/TraineeManage.vue') children: [
{
path: '/traineeManage/member',
name: '学员管理',
component: () => import('../views/origanizationManage/Member.vue')
},
{
path: '/traineeManage/department',
name: '部门管理',
component: () => import('../views/origanizationManage/Department.vue')
}
]
},
{
path: '/adminManage',
name: '管理员',
meta: { parent: 'top4' },
component: () => import('../views/origanizationManage/AdminManage.vue'),
redirect: '/adminManage/admin',
children: [
{
path: '/adminManage/admin',
name: '管理员',
component: () => import('../views/origanizationManage/Admin.vue')
}
]
},
{
path: '/instructorManage',
name: '讲师管理',
meta: { parent: 'top4' },
component: () => import('../views/origanizationManage/InstructorManage.vue')
},
{
path: '/curriculumResource',
name: '课程资源',
meta: { parent: 'top2' },
component: () => import('../views/recource/CurriculumResource.vue')
},
{
path: '/learningPlan',
name: '学习计划',
meta: { parent: 'top2' },
component: () => import('../views/recource/LearningPlan.vue')
},
{
path: '/examinationMaterials',
name: '考试资料',
meta: { parent: 'top2' },
component: () => import('../views/recource/ExaminationMaterials.vue')
},
{
path: '/personalAchievement',
name: '个人成就',
meta: { parent: 'top2' },
component: () => import('../views/recource/PersonalAchievement.vue')
},
{
path: '/application',
name: '应用',
meta: { parent: 'top2' },
component: () => import('../views/recource/Application.vue')
},
{
path: '/404',
name: 'error-404',
component: ErrPage
}, },
{ {
path: '/admin', path: '/:pathMatch(.*)',
name: 'Admin', redirect: '/404'
component: () => import('../views/Admin.vue')
} }
] ]
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHistory(),
routes routes
}) })
......
src/views/Admin.vue deleted 100644 → 0
<template>
<RightNavSlot>
<p>管理员</p>
</RightNavSlot>
</template>
<script>
import RightNavSlot from '../components/RightNavSlot'
export default {
components: {
RightNavSlot
}
}
</script>
src/views/Home.vue
...@@ -4,11 +4,8 @@ ...@@ -4,11 +4,8 @@
<div class="breadcrumb"> <div class="breadcrumb">
<a-breadcrumb separator=">>"> <a-breadcrumb separator=">>">
<a-breadcrumb-item>{{root}}</a-breadcrumb-item> <a-breadcrumb-item>{{root}}</a-breadcrumb-item>
<a-breadcrumb-item href=""> <a-breadcrumb-item :href="item.path" v-for="item in list" :key="item.path">
组织管理 {{item.name}}
</a-breadcrumb-item>
<a-breadcrumb-item href="">
学员管理
</a-breadcrumb-item> </a-breadcrumb-item>
</a-breadcrumb> </a-breadcrumb>
</div> </div>
...@@ -28,8 +25,27 @@ export default { ...@@ -28,8 +25,27 @@ export default {
required: true required: true
} }
}, },
data () {
return {
list: []
}
},
components: { components: {
Footer Footer
},
watch: {
$route (to, from) {
// console.log('to:', to)
// console.log('from:', from)
this.getBreadcrumb()
}
},
methods: {
getBreadcrumb () {
const matched = this.$route.matched
// console.log(matched)
this.list = matched
}
} }
} }
</script> </script>
......
src/views/TraineeManage.vue deleted 100644 → 0
<template>
<RightNavSlot>
<p>学员管理</p>
</RightNavSlot>
</template>
<script>
import RightNavSlot from '../components/RightNavSlot'
export default {
components: {
RightNavSlot
}
}
</script>
vue.config.js
console.log(process.env.NODE_ENV) console.log(process.env.NODE_ENV)
module.exports = { module.exports = {
productionSourceMap: process.env.NODE_ENV === 'dev', // productionSourceMap: process.env.NODE_ENV === 'dev',
css: { css: {
extract: process.env.NODE_ENV === 'pro' extract: process.env.NODE_ENV === 'pro'
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment