erp/resources/frontend/src/views/index.vue

<template>
    <div>
        <el-container>
            <el-container>
                <el-aside :class="show ? 'aside-show' : 'aside-hide'">
                    <el-menu router background-color="#282c34" :unique-opened="true" text-color="#fff" :default-active="$route.path"
                        :default-openeds="openeds">
                        <div v-for="item in menu" :key="item.id">
                            <el-menu-item :index="'/' + item.code" v-if="!item.children">
                                <span>{{ item.name }}</span>
                            </el-menu-item>
                            <el-submenu v-else :index="'/' + item.code">
                                <template slot="title">
                                    <span>{{ item.name }}</span>
                                </template>
                                <el-menu-item :index="'/' + children.code" :key="children.id" v-for="children in item.children">{{
                                    children.name }}
                                </el-menu-item>
                            </el-submenu>
                        </div>
                    </el-menu>
                </el-aside>

                <el-main>
                    <div class="head">
                        <ul>
                            <li>
                                <div @click="add" class="add">
                                    <i class="el-icon-s-unfold" v-if="show"></i>
                                    <i class="el-icon-s-fold" v-else></i>
                                </div>
                                <div class="right">
                                    <el-breadcrumb separator-class="el-icon-arrow-right">
                                        <el-breadcrumb-item v-for="(item, index) in titie" :key="index">{{ item.name }}
                                        </el-breadcrumb-item>
                                    </el-breadcrumb>
                                </div>
                            </li>
                            <li>
                                <div style="margin-right: 10px;">{{ usernmae }}</div>
                                <div class="token" @click="hanleLogout">登出</div>
                            </li>
                        </ul>
                    </div>

                    <div class="box-card">
                        <router-view></router-view>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { removeToken } from "@/util/auth";
import { getMenu } from "../api/menu.js";
export default {
    mounted() {
        getMenu().then((res) => {
            this.menu = res.data.data;
            console.log(this.menu)
        });
        this.usernmae = localStorage.getItem('userName');
    },
    data() {
        return {
            menu: [], // 侧边栏
            show: false, // 导航栏折叠
            levelData: [], // table导航栏
            titie: [], // 面包屑
            head: "", // 路由name
            onindex: 0, // 索引
            openeds: ["GOODS_MANAGE"],
            usernmae: ''
        };
    },
    watch: {
        // table构造
        $route: {
            handler: function (val) {
                this.titie = val.matched;
                this.head = val.name;
                this.levelData.push({ name: val.name, path: val.path });
                const newArr = [];
                const obj = {};
                for (var i = 0; i < this.levelData.length; i++) {
                    if (!obj[this.levelData[i].name]) {
                        newArr.push(this.levelData[i]);
                        obj[this.levelData[i].name] = true;
                    }
                }

                this.levelData = newArr;
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        next() {
            this.hanletop();
        },
        hanletop() {
            document.getElementById("bottom").scrollIntoView({ behavior: "smooth" });
        },
        hanlebottom() {
            document.getElementById("top").scrollIntoView({ behavior: "smooth" });
        },
        hanleLogout() {
            removeToken();
            this.$router.push({ path: "/Login" });
        },
        handlerclick(e) {
            if (this.$route.path !== e) {
                this.$router.push({ path: e });
            }
        },
        add() {
            this.show = !this.show;
        },
        hanblDelete(index, titie) {
            var list = this.levelData[index].name;

            this.onindex = index;
            this.levelData.splice(this.onindex, 1);
            if (titie === this.head) {
                var item;
                var name;
                for (let i = 0; i < this.levelData.length; i++) {
                    item = this.levelData[i].path;
                    name = this.levelData[i].name;
                }
                if (this.levelData.length) {
                    if (name !== list) {
                        this.$router.push({ path: item });
                    }
                }
            }
        },
    },
};
</script>
<style scoped lang="scss">
.aside-show {
    transition: all 0.3s;
    opacity: 0;
    width: 0px !important;
}

.aside-hide {
    transition: all 0.3s;
    opacity: 1;
    width: 200px !important;
}

.el-container {
    height: 100vh;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    overflow-x: hidden;
}

.el-aside::-webkit-scrollbar {
    width: 8px;
    /*对垂直流动条有效*/
}

.el-aside::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    border-radius: 20px;
}

.el-main {
    background-color: #f0f2f5;
    color: #333;
    padding: 0 0 !important;
}

.el-main::-webkit-scrollbar {
    width: 10px;
    /*对垂直流动条有效*/
}

.el-main::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
}

.box-card {
    min-height: calc(100vh - 120px);
    margin: 10px;
}

.conent {
    width: 100%;
    min-height: calc(100vh - 200px);
    position: relative;
}

.add {
    cursor: pointer;
    font-size: 25px;
    color: #606266;
}

.head {
    padding: 10px;
    background-color: #fff;
    border-bottom: 1px solid #f6f6f6;
    box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

    ul {
        display: flex;
        justify-content: space-between;

        li {
            display: flex;
            align-items: center;

            .right {
                margin-left: 20px;
            }

            .token {
                cursor: pointer;
            }
        }
    }
}

.el-aside {
    background: #282c34;
    box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
}

::v-deep .el-menu {
    border: none;
}

.el-menu-item:hover {
    outline: 0 !important;
    background: #5470c6 !important;
}

.el-menu-item.is-active {
    color: #fff !important;
    background: #5470c6 !important;
}

.el-menu-item-group__title {
    padding: 0 0 !important;
}
</style>