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

<template>
    <div>
        <el-container>
            <el-container>
                <el-aside :class="show ? 'width' : 'width1'">
                    <el-menu router background-color="#282c34" 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="items.code" :key="items.id" v-for="items in item.children">{{
                                        items.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 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;
        });
    },
    data() {
        return {
            menu: [], // 侧边栏
            show: true, // 导航栏折叠
            levelData: [], // table导航栏
            titie: [], // 面包线
            head: "", // 路由name
            onindex: 0, // 索引
            openeds: ["GOODS_MANAGE"],
        };
    },
    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: {
        /**
         * @author: czw (725551805@qq.com)
         * @description: 滚动条下一个
         * @param {*}
         * @return {*}
         * @Date: 2022-03-02 19:50:50
         */
        next() {
            this.hanletop();
        },
        /**
         * @author: czw (725551805@qq.com)
         * @description: 滚动最底部
         * @param {*}
         * @return {*}
         * @Date: 2022-03-02 19:51:03
         */
        hanletop() {
            document.getElementById("bottom").scrollIntoView({ behavior: "smooth" });
        },
        /**
         * @author: czw (725551805@qq.com)
         * @description: 滚动最顶部
         * @param {*}
         * @return {*}
         * @Date: 2022-03-02 19:51:07
         */
        hanlebottom() {
            document.getElementById("top").scrollIntoView({ behavior: "smooth" });
        },
        /**
         * @author: czw (725551805@qq.com)
         * @description: 退出登录
         * @param {*}
         * @return {*}
         * @Date: 2022-03-02 09:41:37
         */
        hanleLogout() {
            removeToken();
            this.$router.push({ path: "/Login" });
        },
        /**
         * @author: czw (725551805@qq.com)
         * @description: table页跳转
         * @param {*}
         * @return {*}
         * @Date: 2022-03-01 22:27:27
         */
        handlerclick(e) {
            if (this.$route.path !== e) {
                this.$router.push({ path: e });
            }
        },
        /**
         * @author: czw (725551805@qq.com)
         * @description: 导航栏折叠
         * @param {*}
         * @return {*}
         * @Date: 2022-03-01 22:25:47
         */
        add() {
            this.show = !this.show;
        },
        /**
         * @author: czw (725551805@qq.com)
         * @description: 删除
         * @param {*}
         * @return {*}
         * @Date: 2022-03-01 16:53:49
         */
        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">
.table {
    background-color: #fff;

    ul {
        li {
            padding: 20px 10px;

            .Navigation {
                display: flex;

                span {
                    padding: 5px 30px;
                    border: 1px solid #dcdfe6;
                    font-size: 14px;
                    font-weight: 500;
                    color: #303133;
                    border-radius: 4px;
                    cursor: pointer;
                    margin-right: 10px;
                }

                .tab {
                    margin-right: 10px;
                    flex-shrink: 0;
                }

                .red {
                    color: #5470c6;
                    border: 1px solid #5470c6;
                }

                .closure {
                    display: inline-block;
                    text-align: center;
                    cursor: pointer;
                    width: 15px;
                    height: 15px;
                    line-height: 15px;
                    background-color: #ddd;
                    color: #000;
                    border-radius: 50%;
                    font-size: 12px;
                }

                .red_1 {
                    background-color: #5470c6;
                    color: #fff;
                }
            }
        }

        li:nth-child(2) {
            overflow-x: auto;
        }

        display: flex;
    }
}

.width {
    transition: all 0.3s;
    opacity: 0;
    width: 0px !important;
}

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

.el-container {
    height: 100vh;
}

.el-header {
    background-color: #b3c0d1;
    color: #333;
    text-align: center;
}

.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    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 {
    background-color: #fff;
    min-height: calc(100vh - 120px);
    margin: 10px;
    padding: 20px;
}

.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 {
//   margin: 0 20px 10px;
// }
.el-menu-item:hover {
    outline: 0 !important;
    background: #5470c6 !important;
    border-radius: 5px !important;
}

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

.el-menu-item-group__title {
    padding: 0 0 !important;
}

.table {
    margin-top: 20px;
}

.block {
    margin-top: 30px;
}

.from-btn {
    display: flex;
    justify-content: space-around;
    align-content: center;
}
</style>