<template>
|
<div class="layoutBox">
|
<Header class="header"></Header>
|
<div class="layoutContentBox clear">
|
<div class="classContentBox clear">
|
<div class="leftList fl">
|
<!-- <div class="main title" @click="goBack()"> -->
|
<div class="main title">
|
<!-- <el-icon><ArrowLeft /></el-icon> -->
|
<span>我的班级</span>
|
</div>
|
<div class="classInfo-box">
|
<div class="iconBox"><img :src="classIcon" /></div>
|
<div class="infoBox">
|
<div class="main">{{ classInfo?.name }}</div>
|
<div class="job" v-if="userData && userData.role == 'Teacher'">
|
<span class="mainbg">助教</span>
|
</div>
|
<div class="job" v-else><span class="mainbg">学生</span></div>
|
</div>
|
</div>
|
<div class="line"></div>
|
<ul class="menu">
|
<li
|
v-for="(item, index) in listMenu"
|
:key="index"
|
@click="goRouter(item, index)"
|
:class="activeIndex == index ? 'activeItem mainbg hover' : 'menuItem hover'"
|
>
|
<span
|
:style="{
|
fill: activeIndex == index ? '#fff' : '#000',
|
}"
|
v-html="item.icon"
|
>
|
</span>
|
<span>{{ item.label }}</span>
|
</li>
|
</ul>
|
</div>
|
<div class="rightContent">
|
<div>
|
<!-- 让主体做子路由的显示 -->
|
<router-view />
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, watch, provide, onMounted, inject } from "vue";
|
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
|
import Header from "./components/headerPage.vue";
|
import { menu } from "./config";
|
import { getPublicImage } from "@/assets/js/middleGround/tool.js";
|
import defaultImg from "@/assets/images/default-book-img.png";
|
|
const router: any = useRouter();
|
const route: any = useRoute();
|
const MG: any = inject("MG");
|
const config: any = inject("config");
|
const routerVal = router.currentRoute.value;
|
const path = ref(routerVal.path);
|
const label = ref("");
|
const classInfo: any = ref();
|
const classIcon: any = ref();
|
const listMenu = ref([]);
|
const activeIndex = ref(0);
|
const userData = ref();
|
|
watch(router.currentRoute, (val) => {
|
path.value = val.path;
|
if (val.query.classInfo) {
|
const data: any = val.query.classInfo;
|
const routerInfo: any = JSON.parse(data);
|
activeIndex.value = routerInfo.index;
|
}
|
});
|
|
watch(classInfo, (val) => {
|
if (val) {
|
activeIndex.value = val.index;
|
}
|
if (!val.index) {
|
activeIndex.value = 0;
|
}
|
});
|
|
onBeforeRouteUpdate(async (to, from) => {
|
path.value = to.path;
|
});
|
|
onMounted(() => {
|
classInfo.value = JSON.parse(route.query.classInfo);
|
classIcon.value = classInfo.value.icon
|
? getPublicImage(classInfo.value.icon, 200)
|
: defaultImg;
|
menu.forEach((item) => {
|
if ("/" + item.path === path.value) {
|
label.value = item.label;
|
}
|
});
|
const userCache: any = localStorage.getItem(config.userInfoKey);
|
const userInfo = JSON.parse(userCache);
|
userData.value = userInfo;
|
if (!userInfo) {
|
router.push({
|
path: "/",
|
});
|
return false;
|
}
|
if (userInfo.role != "Teacher") {
|
const data: any = menu.filter(
|
(item: any) => item.path != "studentManage" && item.path != "jobAnalysis"
|
);
|
listMenu.value = data;
|
} else {
|
const data: any = menu;
|
// if (!classInfo.bookRefCode) {
|
// // 融媒体图书，无数字阅读，无法跳转
|
// const list: any = menu.filter((item: any) => item.path != 'teachingPlan')
|
// listMenu.value = list;
|
// return false
|
// }
|
listMenu.value = data;
|
}
|
});
|
|
const goRouter = (item: any, index: number) => {
|
activeIndex.value = index;
|
if (
|
!localStorage.getItem(config.tokenKey) ||
|
localStorage.getItem(config.tokenKey) == null
|
) {
|
router.push({
|
path: "/home",
|
query: {
|
showLogin: "1",
|
},
|
});
|
} else {
|
label.value = item.label;
|
classInfo.value.index = index;
|
if (item.key == 5) {
|
router.push({
|
path: userData.value.role != "Teacher" ? "/studentJob" : "/jobManage",
|
query: {
|
classInfo: JSON.stringify(classInfo.value),
|
},
|
});
|
} else {
|
router.push({
|
path: item.path,
|
query: {
|
classInfo: JSON.stringify(classInfo.value),
|
},
|
});
|
}
|
}
|
};
|
|
const goBack = () => {
|
router.go(-1);
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.layoutBox {
|
width: 100%;
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #fff;
|
.layoutContentBox {
|
flex: 1;
|
height: auto;
|
}
|
.classContentBox {
|
padding: 10px 40px;
|
display: flex;
|
height: 100%;
|
.leftList {
|
padding: 20px;
|
width: 280px;
|
min-width: 230px;
|
box-shadow: 0px 0px 20px 1px #ccc;
|
border-radius: 3px;
|
background-color: #fff;
|
.title {
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
cursor: pointer;
|
span {
|
margin-left: 10px;
|
}
|
}
|
.classInfo-box {
|
padding: 20px 10px;
|
margin-bottom: 10px;
|
display: flex;
|
.iconBox {
|
width: 90px;
|
height: 120px;
|
img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
}
|
.infoBox {
|
flex: 1;
|
padding-left: 10px;
|
.main {
|
font-size: 16px;
|
line-height: 20px;
|
}
|
.job {
|
// padding:10px;
|
margin-top: 20px;
|
span {
|
padding: 5px 15px;
|
border-radius: 20px;
|
}
|
}
|
}
|
}
|
.line {
|
width: 100%;
|
height: 1px;
|
background: linear-gradient(63deg, #ffffff 0%, #e0f2ff 51%, #ffffff 100%);
|
}
|
.menu {
|
margin-top: 20px;
|
li {
|
height: 36px;
|
padding: 0 40px;
|
margin: 5px 0;
|
font-size: 16px;
|
display: flex;
|
align-items: center;
|
position: relative;
|
|
img {
|
width: 18px;
|
height: 18px;
|
}
|
|
span {
|
margin-left: 10px;
|
font-size: 15px;
|
}
|
}
|
|
.activeItem {
|
background-size: 100% 100%;
|
}
|
}
|
}
|
|
.rightContent {
|
flex: 1;
|
overflow: auto;
|
min-width: 800px;
|
margin-left: 15px;
|
box-shadow: 0px 0px 20px 1px #ccc;
|
border-radius: 3px;
|
background-color: #fff;
|
}
|
}
|
|
.header {
|
flex-shrink: 0;
|
width: 100%;
|
}
|
}
|
|
@media screen and (min-width: 1200px) {
|
.layoutContentBox {
|
flex: 1;
|
overflow: auto;
|
// display: flex;
|
// flex-direction: column;
|
}
|
}
|
</style>
|
