FE_course_server/src/pages/course.vue

<template>
    <div>
        <breadcrumb :data="'课程资源管理/' + tabs[active]" ref="breadcrumb"></breadcrumb>
        <div class="page">
            <div class="tabs">
                <a class="item" v-for="(item,index) in tabs" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{item}}</a>
            </div>
            <div class="page-content">
                <courselist v-if="active == 'first'"></courselist>
                <classification v-else></classification>
            </div>
        </div>
    </div>
</template>

<script>
import Setting from '@/setting';
import courselist from './courseList.vue';
import classification from './classification.vue';
import breadcrumb from '@/components/breadcrumb'
export default {
    name: 'course',
    data() {
        return {
            active: 'first',
            tabs: {
                first: '课程管理',
                second: '分类管理'
            },
            showTabs: true
        };
    },
    components: {courselist,classification,breadcrumb},
    mounted() {
        Setting.dynamicRoute && this.initTabs()
    },
    methods: {
        tabChange(index){
            this.active = index
            this.$refs.breadcrumb.update('课程资源管理/' + this.tabs[this.active])
        },
        initTabs(){
            let btnPermissions = this.$store.state.btnPermissions
            let showStaff = btnPermissions.includes('课程资源管理:课程管理')
            let showRole = btnPermissions.includes('课程资源管理:分类管理')

            if(!showStaff || !showRole){
                this.showTabs = false
            }
            !showStaff && showRole && (this.active = 'second')
        }
    }
};
</script>

<style lang="scss" scoped>
    
</style>