dq_webcode/src/components/page/SystemManagement.vue

<template>
    <div class="container_bg">
        <div class="border-b flex-between ht50">
            <div class="flex-center">
                <img src="../../assets/img/manpower-icon.png" alt class="top-module-icon mgr10" />
                <p class="head-text">系统管理</p>
            </div>
        </div>
        <div class="df mgt20 main self">
            <Left-sidebar class="flex-column-end " :title="leftSidebarData" @getSidebarVal="getIndex" :pitchOn="active"></Left-sidebar>
            <div class="right-main self">
                <Jurisdiction v-if="active === '1'"></Jurisdiction>
                <SupertubePwd v-if="active === '2'"></SupertubePwd>
                <PlatformLog v-if="active === '3'"></PlatformLog>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                leftSidebarData: [
                    {name:'角色权限管理',index: '1'},
                    {name:'修改密码管理',index: '2'},
                    {name:'平台日志',index: '3'}
            ],
                active: '1',
                systemData: [],
                pageNo: 1,
                totals: 1
            }
        },
        created(){
            this.leftSidebarData = this.getSideBar()
        },
        methods: {
            activeClick(index) {
                this.active = index;
            },
            SelectionChange(){},
            getRowKeys(){},
            currentChange(){},

            // 侧边栏切换组件用
            getIndex(index) {
                this.active = index;
                // 状态保存
                // sessionStorage.setItem('background-manpower-leftsidebar', index);
            },
            getSideBar(){
                let items = [],
                    btns = this.$router.currentRoute.meta.btn,
                    len=btns.length,
                    index
                for(let i=0;i<len;i++){
                    let obj = {name:btns[i]}
                    switch (btns[i]) {
                        case '角色权限管理': obj.index = '1'
                            break;
                        case '修改密码管理': obj.index = '2'
                            break;
                        case '平台日志': obj.index = '3'
                            break;
                    }
                    items.push(obj)
                }
                return items
            }
        }
    }
</script>

<style lang="scss" scoped>
@import url('../../assets/css/common.scss');
.main {
    min-height: 38.7vw;
    margin-bottom: 20px;
}
.right-main {
    margin-left: 30px;
    width: 89%;
    min-height: 100%;
}
.systemManagement{
   
    /deep/ .el-col-3 .el-card__body{
        padding-right: 0;
    }
   
}
</style>