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

保存进度！

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
企业级管理系统/web/admin_system/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "admin_system",
"version": "0.1.0",
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"axios": "^1.2.1",
"core-js": "^3.8.3",
"element-plus": "^2.2.26",
@ -1734,7 +1735,7 @@
},
"node_modules/@element-plus/icons-vue": {
"version": "2.0.10",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
"integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
"peerDependencies": {
"vue": "^3.2.0"
@ -6783,9 +6784,9 @@
"dev": true
},
"node_modules/json5": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true,
"bin": {
"json5": "lib/cli.js"
@ -6893,9 +6894,9 @@
}
},
"node_modules/loader-utils/node_modules/json5": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"dependencies": {
"minimist": "^1.2.0"
@ -12268,7 +12269,7 @@
},
"@element-plus/icons-vue": {
"version": "2.0.10",
"resolved": "https://registry.npmmirror.com/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.0.10.tgz",
"integrity": "sha512-ygEZ1mwPjcPo/OulhzLE7mtDrQBWI8vZzEWSNB2W/RNCRjoQGwbaK4N8lV4rid7Ts4qvySU3njMN7YCiSlSaTQ==",
"requires": {}
},
@ -16359,9 +16360,9 @@
"dev": true
},
"json5": {
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.1.tgz",
"integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true
},
"jsonfile": {
@ -16443,9 +16444,9 @@
},
"dependencies": {
"json5": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.1.tgz",
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"

1
企业级管理系统/web/admin_system/package.json
View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"@element-plus/icons-vue": "^2.0.10",
"axios": "^1.2.1",
"core-js": "^3.8.3",
"element-plus": "^2.2.26",

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;
}

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

@ -2,30 +2,36 @@
* @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>
<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>
<el-sub-menu v-else :index="route.path">
</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.mate && child.mate.title }}</template>
<template #title>{{ child.meta && child.meta.title }}</template>
</el-menu-item>
</template>
</el-sub-menu>
</template>
</template>
</template>
</el-menu>
</template>
@ -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>

2
企业级管理系统/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:
*

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: "控制台"
},
children: [
{
component: () => import("../layout/Index.vue"),
},
//侧边导航栏路由
{ //首页
path: "/console",
name: "Console",
mate: {
title: "首页"
meta: {
title: "总览"
},
component: () => import("../layout/Index.vue"),
children: [
{
path: "/desktop",
name: "DeskTop",
meta: {
title: "工作台"
},
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>