duoji-frontend/src/layouts/AsideMenu.vue

<template>
    <a-layout-sider :class="['aside', collapsed ? 'merge' :'']" v-model="collapsed" theme="dark" :trigger="null" collapsible :style="styles.menu.default">
        <div class="logo" :style="styles.title.style">
<!--            <img src="@/assets/logo1.png" alt />-->
            <span class="logo-title">{{ styles.title.text }}</span>
        </div>
        <a-menu :selectedKeys="selectedKeys"
                :openKeys.sync="openKeys"
                @click="clickMenu"
                mode="inline"
                theme="dark"
                :inline-collapsed="aside_collapsed"
                :style="styles.menu.default"
        >
            <template v-for="item in routes">
                <!-- 如果没有子路由 -->
                <a-menu-item
                    :key="item.name"
                    v-if="!item.meta.unfold"
                    :style="(selectedKeys[0] === item.name || item.name === mouseItemKey) ? styles.menu.select : styles.menu.default"
                    @mouseenter="menuItemHover"
                    @mouseleave="menuItemOut"
                >
                    <a-icon :type="item.meta.icon" />
                    <span>{{ item.meta.name }}</span>
                </a-menu-item>
                <!-- 存在子路由 -->
                <aside-item :key="item.name" :menuInfo="item" v-else></aside-item>
            </template>
        </a-menu>
    </a-layout-sider>
</template>

<script>
import { mapState,mapGetters } from "vuex";
export default {
    name: "AsideMenu",
    computed: {
        ...mapState(["aside_collapsed", "userInfo"]),
        ...mapGetters(['getAside_collapsed', 'styles'])
    },
    watch: {
        $route() {
            console.log("123");
            this.setRoute();
        },
        getAside_collapsed: function (newValue) {
            console.log(newValue)
            this.collapsed = newValue
        },
    },
    data() {
        return {
            collapsed:this.$store.state.aside_collapsed,
            selectedKeys: [],
            openKeys: [],
            routes: [],
            mouseItemKey: "", // 鼠标在那个item上
        };
    },
    methods: {
        clickMenu(item) {
            this.$router.push({
                name: item.key
            },onComplete => { }, onAbort => { });
        },
        // 设置路由
        setRoute() {
            let parents = [];
            if (this.userInfo.id) {
                parents = this.$router.options.routes[0].children.filter(ele => {
                    if (
                        this.userInfo.permissionList.some(item => {
                            return item.rights === ele.name && ele.name.indexOf("center") < 0 && item.rights === ele.name && ele.name.indexOf("ioTable") < 0 && item.rights === ele.name && ele.name.indexOf("realTimeMonitoringModel") < 0 && item.rights === ele.name && ele.name.indexOf("plcStatus") < 0 && item.rights === ele.name && ele.name.indexOf("cameraManageModel") < 0 && item.rights === ele.name && ele.name.indexOf("checkOperation") < 0;
                        })
                    ) {
                        return ele;
                    }
                });
                // // 递归权限路由
                let recursionRoute = parents => {
                    for (let i = 0; i < parents.length; i++) {
                        let isAuth = this.userInfo.permissionList.some(item => {
                            return parents[i].name === item.rights;
                        });
                        parents[i].meta.auth = isAuth;
                        parents[i].children &&
                            parents[i].children.length > 0 &&
                            recursionRoute(parents[i].children);
                    }
                };
                recursionRoute(parents);
            }else {
                parents = this.$router.options.routes[0].children.filter(item => {
                    return !item.name.startsWith("center") && !item.name.startsWith("ioTable") && !item.name.startsWith("realTimeMonitoringModel") && !item.name.startsWith("plcStatus") && !item.name.startsWith("cameraManageModel") && !item.name.startsWith("checkOperation");
                });
            }
            this.routes = parents;

            this.initialKeys();
        },
        initialKeys() {
            console.log("this.$route.matched", this.$route.matched);
            // 选中
            if (this.$route.matched[1].meta.unfold) {
                if (this.$route.matched.length > 3) {
                    this.selectedKeys = [this.$route.matched[2].name];
                } else {
                    this.selectedKeys = [this.$route.matched[this.$route.matched.length - 1].name];
                }
            } else {
                this.selectedKeys = [this.$route.matched[1].name];
            }
            console.log("selectedKeys", this.selectedKeys);
            // this.$route.matched[1].meta.unfold ? this.selectedKeys = [this.$route.matched[2].name] : this.selectedKeys = [this.$route.matched[1].name]
            // 展开
            this.$route.matched[1].meta.unfold
                ? this.openKeys.push(this.$route.matched[1].name)
                : (this.openKeys = [""]);

            this.$forceUpdate();
        },
        // 动态修改item的 hover背景颜色
        menuItemHover(e) {
            this.mouseItemKey = e.key;
        },
        menuItemOut() {
            this.mouseItemKey = '';
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setRoute();
        });
    }
};
</script>
<style lang="scss">
.aside {
    flex: 0 0 270px!important;
    max-width: 270px!important;
    min-width: 270px!important;
    width: 270px!important;
    height: 100vh;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 2px 0px 6px 0px rgba(0, 21, 41, 0.35);
    z-index: 1000;
    .logo{
        width: 100%;
        height:64px;
        overflow: hidden;
        line-height: 64px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
        // background:#022342;
        /*text-align: center;*/
        img{
            width: 24px;
            height: 24px;
            margin:10px 10px 10px 15px;
        }
        .logo-title{
            transition-delay: 0.5s;
            margin-left: 25px;
        }
    }
    .ant-menu-inline {
        width:100%;
        height: 100%;
    }
    .ant-menu-inline-collapsed {
        width: 80px;
    }
}
.merge{
    flex: 0 0 80px!important;
    max-width: 80px!important;
    min-width: 80px!important;
    width: 80px!important;
    .logo{
        img{
            margin:0 30px;
        }
       .logo-title{
           display: none;
           height: 30px;
           overflow: hidden;
       }
    }
}
</style>