flyLong/pc/src/components/Navside.vue

<template>
    <div class="Navside">
        <div class="logoContainer">
            <img src="../assets/img/nav/logo.png" height="40" width="180"/>
        </div>
        <div class="userContainer">
            <img src="../assets/img/nav/head.png" height="51" width="51"/>
            <span>{{shopName}}</span>
            <em>{{userLevelText}}</em>
        </div>
        <el-row :class="[{'shortnav':isCollapse},{'longNav':!isCollapse}]">
            <el-col :span="24">
                <el-menu
                        :default-active="userLevelDeafult"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        @select="handleSelect"
                        background-color="#ffffff"
                        text-color="#777777"
                        active-text-color="#fff"
                        router
                >
                    <el-menu-item :index="nav.clmid" :route="nav.clmurl" v-for="nav in navs" v-if="nav.show == userLevel">
                        <i :class="nav.icon"></i>
                        <span slot="title">{{nav.clmname}}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import Navs from '../api/Navs';
    import {ManagerSelfQuery} from '../api/getApiRes.js'

    let qs = require('qs');
    export default {
        data() {
            return {
                wildState: 0,
                navs: [],
                shopName: 'xx店',
                userLevelText: '',
                userLevel: 0,
                userLevelDeafult: "11",
            }
        },
        props: ['isCollapse'],
        mounted() {
            this.getTableQuery();
            this.getManagerSelfQuery();
        },
        methods: {
            handleSelect(i, s, t) {
                // this.$emit('TabsAdd', i);//触发事件
            },
            getTableQuery() {
                // 菜单
                this.navs = Navs;
            },
            getManagerSelfQuery(){
                let that = this;
                let param = {
                token: localStorage.token,
                };
                let postdata = qs.stringify(param);
                ManagerSelfQuery(postdata).then(res => {
                    let json = res;
                    if (json.Code == 0) {
                        that.userLevelText = json.Rs.Role.Name;
                        that.userLevel = json.Rs.Role.State;
                        localStorage.shopId = json.Rs.ShopId;
                    } else {
                        that.$message.error(json.Memo);
                    }
                })
            },
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
        },
        watch: {
            $route(to,from){
              this.userLevelDeafult = to.meta.clmid
            },
        },
    }
</script>
<style scoped>
    /*注释*/
    .Navside {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        overflow-y: scroll;
        background-color: #fff;
    }
    .logoContainer {
        width: 256px;
        height: 72px;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #3799FF;
    }
    .logoContainer img {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-top: 1px;
    }
    .userContainer {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 16px;
        padding-top: 19px;
        padding-bottom: 19px;
        border-bottom: 1px solid #F0F2F5;
        background: #fff;
    }
    .userContainer img {
        overflow: hidden;
        display: block;
        margin: 0 auto;
        margin-bottom: 16px;
    }
    .userContainer span {
        width: 100%;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        color: #565656;
        font-size: 16px;
    }
    .userContainer em {
        width: 125px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        display: block;
        margin: 0 auto;
        background: #E75296;
        border-radius: 250px;
        font-style: normal;
        margin-top: 8px;
    }
    /deep/ .el-menu {
        border: none;
    }
    /deep/ .el-menu-item.is-active {
        background-color:#3799FF!important;
        color: #fff!important;
    }
    /deep/ .el-menu-item:hover {
        background-color:#3799FF!important;
        color: #fff!important;
    }
    /deep/ .el-menu-item:hover i {
        color: #fff!important;
    }
</style>