<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('jesk-userInfo')
|
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('jsek-token') || localStorage.getItem('jsek-token') == 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>
|
