Kane/vue-learning
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存进度！

Browse Source
This commit is contained in:
Kane
2023-01-06 18:08:18 +08:00
parent 1064fce554
commit 75c0ed90ca
9 changed files with 153 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
企业级管理系统/web/admin_system/src/layout/Index.vue
View File

@@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-01-04 11:05:44
* @LastEditors: Kane
* @LastEditTime: 2023-01-05 16:35:15
* @LastEditTime: 2023-01-06 17:45:34
* @FilePath: \admin_system\src\layout\index.vue
* @Description:
*
@@ -44,13 +44,13 @@ export default {
}
#layout-aside {
width: 200px;
background-color: #344a5f;
width: 175px;
background-color: #223142;
overflow: auto;
}
#layout-header {
/* height: 75px; */
height: 50px;
/* background-color: #77bc99; */
padding: 0px;
}

68
企业级管理系统/web/admin_system/src/layout/components/Aside.vue
View File

@@ -2,28 +2,34 @@
* @Author: Kane
* @Date: 2023-01-04 11:30:33
* @LastEditors: Kane
* @LastEditTime: 2023-01-05 21:37:17
* @LastEditTime: 2023-01-06 18:08:03
* @FilePath: \admin_system\src\layout\components\Aside.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<el-menu id="side-bar" default-active="/console" unique-opened="true" background-color="#344a5f" text-color="#fff"
active-text-color="#ffd04b">
<el-menu id="side-bar" router default-active="/desktop" unique-opened="true" background-color="#223142"
text-color="#fff" active-text-color="#ffd04b">
<template v-for="route in this.routers" :key="route.path">
<template v-if="!route.hidden">
<el-menu-item v-if="!route.children" :index="route.path">
<template #title>{{ route.meta && route.meta.title }}</template>
</el-menu-item>
<el-sub-menu v-else :index="route.path">
<template #title>{{ route.meta && route.meta.title }}</template>
<template v-for="child in route.children" :key="child.path">
<el-menu-item v-if="!child.hidden" :index="child.path">
<template #title>{{ child.mate && child.mate.title }}</template>
</el-menu-item>
</template>
</el-sub-menu>
<template v-if="hasOnlyChild(route.children)">
<!-- 当只有一个子路由时，直接渲染子路由 -->
<el-menu-item :index="route.children[0].path">
<template #title>{{ route.children[0].meta && route.children[0].meta.title }}</template>
</el-menu-item>
</template>
<template v-else>
<!-- 不是一个子路由时，有可能没有子路由，或者是多个子路由 -->
<el-sub-menu v-if="route.children && route.children.length" :index="route.path">
<template #title>{{ route.meta && route.meta.title }}</template>
<template v-for="child in route.children" :key="child.path">
<el-menu-item v-if="!child.hidden" :index="child.path">
<template #title>{{ child.meta && child.meta.title }}</template>
</el-menu-item>
</template>
</el-sub-menu>
</template>
</template>
</template>
</el-menu>
@@ -40,6 +46,31 @@ export default {
routers: null,
};
},
methods: {
//用于判断一个路由是否只有一项子路由
hasOnlyChild: function (children)
{
//防御验证
if (!children)
{
return false;
}
//剔除掉hidden的路由
const routes = children.filter((item) =>
{
return item.hidden ? false : true;
});
if (routes.length === 1)
{
return true;
}
return false;
},
},
created()
{
this.routers = useRouter().options.routes;
@@ -55,4 +86,13 @@ export default {
/* border-left: 5px solid #1d74b2; */
overflow: auto;
}
.is-active {
background-color: #ffffff4f !important;
border-left: 5px solid #1d74b2;
}
.is-opened {
border-left: none;
}
</style>

4
企业级管理系统/web/admin_system/src/layout/components/Header.vue
View File

@@ -2,7 +2,7 @@
* @Author: Kane
* @Date: 2023-01-04 11:39:04
* @LastEditors: Kane
* @LastEditTime: 2023-01-05 16:17:43
* @LastEditTime: 2023-01-06 17:10:33
* @FilePath: \admin_system\src\layout\components\Header.vue
* @Description:
*
@@ -13,7 +13,7 @@
<span class="company_name">CPIC</span>
<div class="version_div">
<div>测试版</div>
<div>3.6.7 x64 Build202208301257</div>
<div>3.6.7 x64 Build 202208301257</div>
</div>
<div class="buttons_div"></div>
</div>

4
企业级管理系统/web/admin_system/src/layout/components/Main.vue
View File

@@ -2,14 +2,14 @@
* @Author: Kane
* @Date: 2023-01-04 11:40:03
* @LastEditors: Kane
* @LastEditTime: 2023-01-04 11:40:04
* @LastEditTime: 2023-01-06 12:54:17
* @FilePath: \admin_system\src\layout\components\Main.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
Main
<router-view />
</template>
<script>

39
企业级管理系统/web/admin_system/src/router/index.js
View File

@@ -2,15 +2,16 @@
* @Author: Kane
* @Date: 2022-12-14 15:12:46
* @LastEditors: Kane
* @LastEditTime: 2023-01-05 21:38:13
* @LastEditTime: 2023-01-06 16:44:57
* @FilePath: \admin_system\src\router\index.js
* @Description:
* @Description: 定义应用路由配置
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
//框架路由
{
path: "/",
name: "Root",
@@ -26,22 +27,32 @@ const routes = [
{
path: "/home",
name: "Home",
hidden: true,
meta: {
title: "控制台"
},
component: () => import("../layout/Index.vue"),
},
//侧边导航栏路由
{ //首页
path: "/console",
name: "Console",
meta: {
title: "总览"
},
children: [
{
path: "/console",
name: "Console",
mate: {
title: "首页"
path: "/desktop",
name: "DeskTop",
meta: {
title: "工作台"
},
component: () => import("../layout/Index.vue"),
component: () => import("../views/overview/OverView.vue"),
},
],
component: () => import("../layout/Index.vue"),
},
{
{//信息管理
path: "/news",
name: "News",
meta: {
@@ -51,10 +62,18 @@ const routes = [
{
path: "/newsIndex",
name: "NewsIndex",
mate: {
meta: {
title: "信息列表"
},
component: () => import("../layout/Index.vue"),
component: () => import("../views/news/News.vue"),
},
{
path: "/newsIndex",
name: "NewsIndex",
meta: {
title: "信息编辑"
},
component: () => import("../views/news/News.vue"),
},
],
component: () => import("../layout/Index.vue"),

23
企业级管理系统/web/admin_system/src/views/news/News.vue Normal file
View File

@@ -0,0 +1,23 @@
<!--
* @Author: Kane
* @Date: 2023-01-06 15:26:44
* @LastEditors: Kane
* @LastEditTime: 2023-01-06 15:26:46
* @FilePath: \admin_system\src\views\news\News.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
信息管理
</template>
<script>
export default {
name: "NewsPage"
};
</script>
<style scoped>
</style>

23
企业级管理系统/web/admin_system/src/views/overview/OverView.vue Normal file
View File

@@ -0,0 +1,23 @@
<!--
* @Author: Kane
* @Date: 2023-01-06 15:30:12
* @LastEditors: Kane
* @LastEditTime: 2023-01-06 15:30:14
* @FilePath: \admin_system\src\views\overview\OverView.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
总览
</template>
<script>
export default {
name: "OverVue"
};
</script>
<style scoped>
</style>