保存进度！
This commit is contained in:
43
企业级管理系统/web/项目源码/src/layout/Index.vue
Normal file
43
企业级管理系统/web/项目源码/src/layout/Index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<el-container id="layout-container">
|
||||
<el-aside id="layout-aside" :width="collapse === true ? '60px' : '250px'"><layout-aside /></el-aside>
|
||||
<el-container>
|
||||
<el-header id="layout-header" height="75px"><layout-header /></el-header>
|
||||
<el-main id="layout-main"><layout-main /></el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutAside from "./components/Aside";
|
||||
import LayoutHeader from "./components/Header";
|
||||
import LayoutMain from "./components/Main";
|
||||
import { useStore } from "vuex";
|
||||
import { computed } from "vue";
|
||||
export default {
|
||||
name: "Layout",
|
||||
components: { LayoutAside, LayoutHeader, LayoutMain },
|
||||
props: {},
|
||||
setup(props){
|
||||
const store = useStore();
|
||||
const collapse = computed(() => store.state.app.collapse);
|
||||
return {
|
||||
collapse
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scpoed>
|
||||
#layout-container { height: 100vh; }
|
||||
#layout-aside {
|
||||
background-color: #344a5f;
|
||||
@include webkit(transition, all .3s ease 0s);
|
||||
}
|
||||
#layout-header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background-color: $color_main;
|
||||
@include webkit(box-shadow, 0 0 10px 0 rgba(0, 0, 0, .1));
|
||||
}
|
||||
#layout-main { background-color: #f7f7f7; }
|
||||
</style>
|
||||
97
企业级管理系统/web/项目源码/src/layout/components/Aside.vue
Normal file
97
企业级管理系统/web/项目源码/src/layout/components/Aside.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<h1 class="logo"><img :src="logo" alt=""></h1>
|
||||
<el-menu :collapse="collapse" :default-active="currentPath" background-color="#344a5f" text-color="#fff" active-text-color="#ffffff" router>
|
||||
<template v-for="item in routers" :key="item.path">
|
||||
<template v-if="!item.hidden">
|
||||
<!-- 一级菜单 -->
|
||||
<template v-if="hasOnlyChild(item.children)">
|
||||
<el-menu-item :index="item.children[0].path">
|
||||
<img class="menu-icon" :src="item.meta.icon" alt="">
|
||||
<template #title>{{ item.children[0].meta && item.children[0].meta.title }}</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
<!-- 子级菜单 -->
|
||||
<template v-else>
|
||||
<el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" >
|
||||
<template #title>
|
||||
<img class="menu-icon" :src="item.meta && item.meta.icon" alt="">
|
||||
<span>{{ item.meta && item.meta.title }}</span>
|
||||
</template>
|
||||
<template v-for="child in item.children" :key="child.path">
|
||||
<el-menu-item v-if="!child.hidden" :index="child.path">{{ child.meta && child.meta.title }}</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { reactive, computed, toRefs } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
export default {
|
||||
name: "Aside",
|
||||
components: {},
|
||||
props: {},
|
||||
setup(){
|
||||
const { options } = useRouter();
|
||||
const { path } = useRoute();
|
||||
const store = useStore();
|
||||
const routers = options.routes;
|
||||
/**
|
||||
* 数据
|
||||
*/
|
||||
const data = reactive({
|
||||
logo: computed(() => {
|
||||
return store.state.app.collapse ? require("@/assets/images/logo-min.png") : require("@/assets/images/logo.png")
|
||||
}),
|
||||
collapse: computed(() => store.state.app.collapse)
|
||||
})
|
||||
|
||||
/**
|
||||
* 判断是否只有一个子级菜单
|
||||
*/
|
||||
const hasOnlyChild = (children) => {
|
||||
|
||||
if(!children) { return false; }
|
||||
// 存储路由
|
||||
if(!children) { return false; }
|
||||
const childRouter = children.filter(item => {
|
||||
return item.hidden ? false : true;
|
||||
})
|
||||
|
||||
// 只有一个子级路由
|
||||
if(childRouter.length === 1) {
|
||||
return true;
|
||||
}
|
||||
// 否则
|
||||
return false;
|
||||
}
|
||||
/**
|
||||
* 获取当前路由路径
|
||||
*/
|
||||
const currentPath = computed(() => path);
|
||||
return {
|
||||
...toRefs(data),
|
||||
routers,
|
||||
hasOnlyChild,
|
||||
currentPath
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.logo {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #2d4153;
|
||||
img { margin: auto; }
|
||||
}
|
||||
.menu-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: inline-block;
|
||||
margin:0 5px 0 0;
|
||||
}
|
||||
</style>
|
||||
102
企业级管理系统/web/项目源码/src/layout/components/Header.vue
Normal file
102
企业级管理系统/web/项目源码/src/layout/components/Header.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="header-wrap">
|
||||
<div class="wrap">
|
||||
<span class="menu-btn" @click="switchAside">
|
||||
<svg-icon iconName="menuBtn" className="icon-menu-svg"></svg-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="wrap">
|
||||
<div class="user-info">
|
||||
<div class="face-info">
|
||||
<img src="../../assets/images/logo-min.png" alt="409019683@qq.com">
|
||||
<span class="name">{{ username }}</span>
|
||||
</div>
|
||||
<span class="logout" @click="handlerLogout">
|
||||
<svg-icon iconName="logout" className="icon-logout"></svg-icon>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, getCurrentInstance } from "vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useRouter } from "vue-router";
|
||||
export default {
|
||||
name: "Header",
|
||||
components: {},
|
||||
props: {},
|
||||
setup(){
|
||||
// 获取实例上下文
|
||||
const { proxy } = getCurrentInstance();
|
||||
// Vuex
|
||||
const store = useStore();
|
||||
// 引入router
|
||||
const { replace } = useRouter();
|
||||
// 菜单按钮
|
||||
const switchAside = (() => { store.commit('app/SET_COLLAPSE'); })
|
||||
// 用户名
|
||||
const username = ref(store.state.app.username);
|
||||
// 登出
|
||||
const handlerLogout = (() => {
|
||||
proxy.$confirm('确认退出管理后台', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
store.dispatch('app/logoutAction').then(response => {
|
||||
proxy.$message({
|
||||
message: response.message,
|
||||
type: "success"
|
||||
})
|
||||
// 刷新页面清除数据
|
||||
location.reload();
|
||||
replace({
|
||||
name: "Login"
|
||||
})
|
||||
})
|
||||
}).catch(error => {});
|
||||
})
|
||||
|
||||
return {
|
||||
switchAside,
|
||||
handlerLogout,
|
||||
username
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header-wrap {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.user-info {
|
||||
float: right;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.face-info {
|
||||
span, img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span { margin-left: 15px;}
|
||||
}
|
||||
.logout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-btn { cursor: pointer; } // 手势
|
||||
.icon-menu-svg { font-size: 24px; }
|
||||
.icon-logout { font-size: 24px; }
|
||||
</style>
|
||||
25
企业级管理系统/web/项目源码/src/layout/components/Main.vue
Normal file
25
企业级管理系统/web/项目源码/src/layout/components/Main.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div id="main-content">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Main",
|
||||
components: {},
|
||||
props: {},
|
||||
setup(){
|
||||
return {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#main-content {
|
||||
background-color: #fff; // 背景色
|
||||
padding: 20px; // 内边距（4个边都为20px）
|
||||
min-height: 100%; // 高度
|
||||
@include webkit(box-sizing, border-box); // css3阴影
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user