|
@@ -1,46 +1,8 @@
|
|
|
<template>
|
|
|
<div class="w-full h-full">
|
|
|
- <el-container>
|
|
|
+ <el-container class="flex flex-row h-full">
|
|
|
<el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
|
|
|
- <div class=" flex flex-row justify-start items-center text-white flex-1">
|
|
|
- <div v-for="routerItem in routerList"
|
|
|
- :class="`border-b-2 border-transparent hover:border-white p-2 mr-4 multipleyHeader ${activeRouter?.path === routerItem.path ? 'border-white' : ''}`"
|
|
|
- :key="routerItem.path">
|
|
|
- <div v-if="!routerItem.children" @click="setCurrentRouter(routerItem)">
|
|
|
- {{ routerItem.name }}
|
|
|
- </div>
|
|
|
- <div v-else class="flex justify-center items-center">
|
|
|
- <el-dropdown>
|
|
|
- <div class="text-white w-full h-full headerText">
|
|
|
- {{ routerItem.name }}
|
|
|
- <el-icon class="el-icon--right">
|
|
|
- <arrow-down />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- <template #dropdown>
|
|
|
- <el-dropdown-menu>
|
|
|
- <el-dropdown-item v-for="child in routerItem.children"
|
|
|
- :key="child.path"
|
|
|
- @click="setCurrentRouter(child)">
|
|
|
- {{ child.name }}
|
|
|
- </el-dropdown-item>
|
|
|
- </el-dropdown-menu>
|
|
|
- </template>
|
|
|
- </el-dropdown>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="flex flex-row justify-start items-center text-white">
|
|
|
- <el-icon :size="26" class="ml-4 cursor-pointer">
|
|
|
- <Bell />
|
|
|
- </el-icon>
|
|
|
- <div>
|
|
|
- <img class="w-8 h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="logout()">
|
|
|
- </div>
|
|
|
- <el-icon :size="26" class="ml-4 cursor-pointer">
|
|
|
- <Grid />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
+ <Header></Header>
|
|
|
</el-header>
|
|
|
<el-main>
|
|
|
<router-view />
|
|
@@ -50,40 +12,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import Header from '@/pages/header/header.vue'
|
|
|
import { onMounted, ref } from 'vue';
|
|
|
-import { RouteRecordRaw, useRouter } from 'vue-router';
|
|
|
-import { useStore } from "@/store"
|
|
|
-import defaultCover from "@/assets/defaultCover.png";
|
|
|
-const { getRoutersList } = useStore()
|
|
|
-const router = useRouter();
|
|
|
-const routerList = ref<RouteRecordRaw[]>([]);
|
|
|
-const activeRouter = ref<RouteRecordRaw>();
|
|
|
-const setCurrentRouter = (item: RouteRecordRaw) => {
|
|
|
- activeRouter.value = item;
|
|
|
- if (item.children && item.children.length > 0) {
|
|
|
- router.push({ path: item.children[0].path });
|
|
|
- return
|
|
|
- }
|
|
|
- router.push({ path: item.path });
|
|
|
-};
|
|
|
-const logout = () => {
|
|
|
- router.push({ path: '/login' });
|
|
|
-};
|
|
|
-onMounted(() => {
|
|
|
- routerList.value = getRoutersList;
|
|
|
- activeRouter.value = routerList.value.find((item) => item.path === router.currentRoute.value.path);
|
|
|
- console.log("routerList", routerList);
|
|
|
-})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.multipleyHeader {
|
|
|
- height: 96%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .headerText {
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
+.el-main {
|
|
|
+ padding: 0;
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
</style>
|