rt-sim-training-client/src/views/organization/index.vue

<template>
  <div>
    <div class="title_content">{{ $store.state.user.companyName + '教学管理' }}</div>
    <el-button type="text" style="position: fixed;right: 20px;top: 70px;" @click="back">返回</el-button>
    <div style="width: 96%;margin: 0 auto;overflow: hidden;">
      <el-menu
        style="width: 200px;float: left;"
        default-active="2-1"
      >
        <el-menu-item index="1" @click="clickMenu">
          <img :src="classIcon" style="width: 18px;height: 18px;margin-right: 8px;">
          <span style="font-size: 18px;" :style="{color: $route.path.includes('classManage')?'#5BDBFF': '#000'}">班级管理</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <img :src="lessonIcon" style="width: 18px;height: 18px;margin-right: 8px;">
            <span style="font-size: 18px;">课程管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" style="font-size: 16px;" :style="{color: $route.path.includes('lessonManage')?'#5BDBFF': '#000'}" @click="clickMenu">发布课程管理</el-menu-item>
            <el-menu-item index="2-2" style="font-size: 16px;" :style="{color: $route.path.includes('draftLessonManage')?'#5BDBFF': '#000'}" @click="clickMenu">草稿课程管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="3" @click="clickMenu">
          <img :src="examIcon" style="width: 18px;height: 18px;margin-right: 8px;">
          <span slot="title" style="font-size: 18px;" :style="{color: $route.path.includes('examManage')?'#5BDBFF': '#000'}">考试管理</span>
        </el-menu-item>
        <el-menu-item index="4" @click="clickMenu">
          <img :src="ruleIcon" style="width: 18px;height: 18px;margin-right: 8px;">
          <span slot="title" :style="{color: $route.path.includes('ruleManage')?'#5BDBFF': '#000'}" style="font-size: 18px;">评价管理</span>
        </el-menu-item>
      </el-menu>
      <div style="width: calc(100% - 200px);margin-left: 200px;">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import ClassIcon from '@/assets/teachManage/class.png';
import LessonIcon from '@/assets/teachManage/lesson.png';
import ExamIcon from '@/assets/teachManage/exam.png';
import RuleIcon from '@/assets/teachManage/rule.png';

export default {
    name: 'Organization',
    data() {
        return {
            classIcon: ClassIcon,
            lessonIcon: LessonIcon,
            examIcon: ExamIcon,
            ruleIcon: RuleIcon,

            mapIdList: [],
            lessonList: [],
            classList: []

        };
    },
    computed: {

    },
    created() {

    },

    methods:{
        clickMenu(val) {
            if (val.index === '2-1') {
                this.$router.replace('/info/organization/lessonManage');
            } else if (val.index === '2-2') {
                this.$router.replace('/info/organization/draftLessonManage');
            } else if (val.index === '1') {
                this.$router.replace('/info/organization/classManage');
            } else if (val.index === '3') {
                this.$router.replace('/info/organization/examManage');
            } else if (val.index === '4') {
                this.$router.replace('/info/organization/ruleManage');
            }
        },
        back() {
            this.$router.go(-1);
        }
    }
};
</script>

<style scoped>
	.back_box {
		height: 20px;
		z-index: 36;
		width: 40px;
		text-align: center;
		position: absolute;
		right: 20px;
		top: -20px;
	}
	.title_content {
		width: 100%;
		margin: 20px 0 30px;
		text-align: center;
		font-size: 28px;
		font-weight: bold;
	}
</style>