easydo-ops/src/layout/index.vue

<template>
	<!-- 通栏布局 -->
    <header class="aminui-header">
        <div class="aminui-header-left">
            <div class="logo-bar">
                <div v-if="!ismobile" class="nav-menu-icon">
                    <el-popover ref="navMenuPopover" popper-class="nav-menu-popover" :width="664" trigger="click" teleported :disabled="!menus.length">
                        <template #reference>
                            <sc-iconify icon="ant-design:appstore-outlined" size="24"></sc-iconify>
                        </template>
                        <el-row class="nav">
                            <el-col :class="currentMenu?.path == item.path && 'active'" v-for="item in menus" :key="item" :span="8" @click="showMenu(item)">
                                <sc-iconify :icon="item.meta.icon" size="24"></sc-iconify>
                                <div>{{ item.meta?.title }}</div>
                            </el-col>
                        </el-row>
                    </el-popover>
                </div>
                <img class="logo" src="img/logo.png">
                <span>{{ $CONFIG.APP_NAME }}</span>
            </div>
        </div>
        <div class="aminui-header-right">
            <userbar></userbar>
        </div>
    </header>
    <section class="aminui-wrapper">
        <div v-if="!ismobile && currentMenu?.children?.length" :class="['aminui-side', menuIsCollapse && 'isCollapse']">
            <div v-if="!menuIsCollapse" class="aminui-side-top">
                <h2><scTooltip :content="currentMenu.meta.title"></scTooltip></h2>
            </div>
            <div class="aminui-side-scroll">
                <el-scrollbar>
                    <el-menu popper-class="side-menu-popper" :default-active="$route.fullPath" router :collapse="menuIsCollapse" :unique-opened="$CONFIG.MENU_UNIQUE_OPENED">
                        <NavMenu :navMenus="menus.find(menu => menu.path == currentMenu.path).children"></NavMenu>
                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="aminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
                <el-icon><el-icon-expand v-if="menuIsCollapse" /><el-icon-fold v-else /></el-icon>
            </div>
        </div>
        <Side-m v-if="ismobile"></Side-m>
        <div class="aminui-body el-container">
            <Tags v-if="!ismobile && layoutTags"></Tags>
            <div class="aminui-main" id="aminui-main">
                <router-view v-slot="{ Component }">
                    <keep-alive :include="this.$store.state.keepAlive.keepLiveRoute">
                        <component :is="Component" :key="$route.fullPath" v-if="$store.state.keepAlive.routeShow"/>
                    </keep-alive>
                </router-view>
            </div>
        </div>
    </section>
</template>

<script>
import XEUtils from "xe-utils";

import SideM from "./components/sideM";
import Tags from "./components/tags";
import NavMenu from "./components/NavMenu";
import userbar from "./components/userbar";
    
export default {
    name: "index",
    components: {
        SideM,
        Tags,
        NavMenu,
        userbar
    },
    data() {
        return {
        }
    },
    computed:{
        ismobile() {
            return this.$store.state.global.ismobile
        },
        layoutTags() {
            return this.$store.state.global.layoutTags
        },
        menuIsCollapse() {
            return this.$store.state.global.menuIsCollapse
        },
        menus() {
            return (this.$TOOL.data.get("MENU") || []).filter(item => item.path !== this.$CONFIG.DASHBOARD_URL && !item.meta?.hidden);
        }, 
        currentMenu() {
            return XEUtils.searchTree(this.menus, item => item.path === this.$route.path)[0] || {};
        }
    },
    created() {
        this.onLayoutResize();
        window.addEventListener("resize", this.onLayoutResize);
    },

    methods: {
        onLayoutResize() {
            this.$store.commit("SET_ismobile", document.body.clientWidth < 992);
        },

        // 点击显示
        showMenu(route) {
            this.$router.push({ path: route.path });
            this.$refs.navMenuPopover?.hide();
        }
    }
}
</script>

<style lang="scss" scoped>
    .aminui-header .aminui-header-left {
        .no-m-r {margin-right: 0;}
        .m-l-20 {margin-left: 20px;}
    }
</style>