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 @@
<template #title>
<span> <i class="iconfont iconquanquanb"></i> <span class="sub-name">{{item.name}}</span></span>
</template>
<a-menu-item :key="sub.id" 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-menu-item :key="sub.path" v-for="(sub) in item.items">{{sub.name}}</a-menu-item>
</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>
</div>
</nav>
......@@ -53,40 +31,7 @@ export default {
},
data () {
return {
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: {},
menus: [],
rootSubmenuKeys: [],
selectedKeys: [],
openKeys: []
......@@ -94,18 +39,45 @@ export default {
},
mounted () {
this.$router.isReady().then(() => {
console.log(this.$router)
const currentRoute = this.$router.currentRoute.value.path
this.menus.forEach((item) => {
const routes = this.$router.options.routes
const tops = routes[0].tops
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)
item.items.forEach((sub) => {
if (sub.route === currentRoute) {
this.selectedKeys.push(sub.id)
const grop = leftnav.filter(i => {
if (currentRoute && currentRoute.meta && item.id === currentRoute.meta.parent && i.path === currentRoute.path) {
this.selectedKeys.push(i.path)
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: {
......@@ -118,8 +90,11 @@ export default {
}
},
select (e) {
const [key] = e.selectedKeys
this.$router.push(this.routes[key])
console.log(e)
// 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>
<div class="nav-list">
<a-menu v-model:selectedKeys="current" mode="horizontal">
<a-menu-item key="mail"> 学员管理 </a-menu-item>
<a-menu-item key="app"> 部门管理 </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>
</div>
</template>
......@@ -10,8 +9,11 @@
export default {
data () {
return {
current: ['mail']
current: []
}
},
mounted () {
this.current.push(this.$route.path)
}
}
</script>
src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
import { createRouter, createWebHistory } from 'vue-router'
import App from '../App.vue'
import ErrPage from '../views/ErrPage.vue'
const routes = [
{
path: '/',
name: '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',
name: 'TraineeManage',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "traineeManage" */ '../views/TraineeManage.vue')
name: '学员管理',
component: () => import('../views/origanizationManage/TraineeManage.vue'),
redirect: '/traineeManage/member',
meta: { parent: 'top4' },
children: [
{
path: '/traineeManage/member',
name: '学员管理',
component: () => import('../views/origanizationManage/Member.vue')
},
{
path: '/traineeManage/department',
name: '部门管理',
component: () => import('../views/origanizationManage/Department.vue')
}
]
},
{
path: '/admin',
name: 'Admin',
component: () => import('../views/Admin.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: '/:pathMatch(.*)',
redirect: '/404'
}
]
const router = createRouter({
history: createWebHashHistory(),
history: createWebHistory(),
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 @@
<div class="breadcrumb">
<a-breadcrumb separator=">>">
<a-breadcrumb-item>{{root}}</a-breadcrumb-item>
<a-breadcrumb-item href="">
组织管理
</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>
</div>
......@@ -28,8 +25,27 @@ export default {
required: true
}
},
data () {
return {
list: []
}
},
components: {
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>
......
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)
module.exports = {
productionSourceMap: process.env.NODE_ENV === 'dev',
// productionSourceMap: process.env.NODE_ENV === 'dev',
css: {
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