|
|
@@ -69,11 +69,12 @@
|
|
|
<div class="typeCheck">
|
|
|
<div><el-switch v-model="orderBy"></el-switch><span>按名字排序</span></div>
|
|
|
<div><el-switch v-model="typeCheck"></el-switch><span>分类显示</span></div>
|
|
|
+ <div v-if="oidArray.indexOf(oid) !== -1"><el-switch v-model="typeCheck2"></el-switch><span>按年级显示</span></div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <div class="main_box">
|
|
|
- <div style="display:flex;flex-wrap:wrap" v-if="!typeCheck">
|
|
|
- <div class="box_course" v-for="(item, index) in zoneClass" :key="index" @click="goTo(
|
|
|
+ <div class="main_box">
|
|
|
+ <div :class="zoneClass.length > 5 ? 'claList' : 'claListFlex'" v-if="!typeCheck && !typeCheck2">
|
|
|
+ <div :class="zoneClass.length > 5 ? 'box_course' : 'box_courseFlex'" v-for="(item, index) in zoneClass" :key="index" @click="goTo(
|
|
|
'/courseDetail?courseId=' +
|
|
|
item.courseId +
|
|
|
'&userid=' +
|
|
|
@@ -101,7 +102,7 @@
|
|
|
<el-tooltip effect="light" :content="item.title" placement="top">
|
|
|
<span class="utitle">{{ item.title }}</span>
|
|
|
</el-tooltip>
|
|
|
- <el-tooltip effect="light" :content="item.uname" placement="top">
|
|
|
+ <el-tooltip effect="light" :content="item.uname" placement="top" v-if="oidArray.indexOf(oid) == -1">
|
|
|
<span class="uname">{{ item.uname }}</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
@@ -146,8 +147,8 @@
|
|
|
<div v-else>
|
|
|
<div class="FirstTypeBox" v-for="(type, tindex) in CourseType2" :key="tindex">
|
|
|
<div class="title">{{ type.name }}</div>
|
|
|
- <div style="display: flex;flex-flow: wrap;margin-top: 20px;">
|
|
|
- <div class="box_course" v-for="(item, index) in type.course" :key="tindex + '-' + index" @click="goTo(
|
|
|
+ <div class="typeCheckFlex" style="margin-top: 20px;">
|
|
|
+ <div class="box_courseFlex" v-for="(item, index) in type.course" :key="tindex + '-' + index" @click="goTo(
|
|
|
'/courseDetail?courseId=' +
|
|
|
item.courseId +
|
|
|
'&userid=' +
|
|
|
@@ -175,7 +176,7 @@
|
|
|
<el-tooltip effect="light" :content="item.title" placement="top">
|
|
|
<span class="utitle">{{ item.title }}</span>
|
|
|
</el-tooltip>
|
|
|
- <el-tooltip effect="light" :content="item.uname" placement="top">
|
|
|
+ <el-tooltip effect="light" :content="item.uname" placement="top" v-if="oidArray.indexOf(oid) == -1">
|
|
|
<span class="uname">{{ item.uname }}</span>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
@@ -224,7 +225,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0 && !typeCheck">
|
|
|
+ <div class="student_page" style="margin: 15px 0 0" v-if="zoneClass.length > 0 && !typeCheck && !typeCheck2">
|
|
|
<el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" v-if="page"
|
|
|
@current-change="handleCurrentChange">
|
|
|
</el-pagination>
|
|
|
@@ -270,25 +271,59 @@ export default {
|
|
|
typeE: [],
|
|
|
loading: "",
|
|
|
typeCheck: false,
|
|
|
+ typeCheck2: false,
|
|
|
+ isUpdatingChecks: false,
|
|
|
orderBy: false,
|
|
|
CourseType3: [],
|
|
|
pTypeCheck:[],
|
|
|
pTypeCheckName: [],
|
|
|
+ oidArray: ['91305d49-01ba-11ed-8c78-005056b86db4']
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
typeCheck(newValue, oldValue) {
|
|
|
- this.loading = true
|
|
|
+ if (this.isUpdatingChecks) return;
|
|
|
+
|
|
|
+ this.isUpdatingChecks = true;
|
|
|
+ this.typeCheck2 = false;
|
|
|
+
|
|
|
if (newValue) {
|
|
|
- this.selectAll()
|
|
|
+ this.loading = true;
|
|
|
+ this.selectAll();
|
|
|
+ } else if (!this.typeCheck2) {
|
|
|
+ this.loading = true;
|
|
|
+ this.page = 1;
|
|
|
+ this.selectAll2();
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.isUpdatingChecks = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ typeCheck2(newValue, oldValue) {
|
|
|
+ if (this.isUpdatingChecks) return;
|
|
|
+
|
|
|
+ this.isUpdatingChecks = true;
|
|
|
+ this.typeCheck = false;
|
|
|
+
|
|
|
+ if (newValue) {
|
|
|
+ this.loading = true;
|
|
|
+ this.selectAll();
|
|
|
+ } else if (!this.typeCheck) {
|
|
|
+ this.page = 1;
|
|
|
+ this.loading = true;
|
|
|
+ this.selectAll2();
|
|
|
} else {
|
|
|
- this.page = 1
|
|
|
- this.selectAll2()
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.isUpdatingChecks = false;
|
|
|
+ });
|
|
|
},
|
|
|
orderBy(newValue, oldValue) {
|
|
|
this.loading = true
|
|
|
- if (this.typeCheck) {
|
|
|
+ if (this.typeCheck || this.typeCheck2) {
|
|
|
this.selectAll()
|
|
|
} else {
|
|
|
this.page = 1
|
|
|
@@ -306,7 +341,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
search(){
|
|
|
- if(this.typeCheck){
|
|
|
+ if(this.typeCheck || this.typeCheck2){
|
|
|
this.selectAll()
|
|
|
}else{
|
|
|
this.page = 1
|
|
|
@@ -507,9 +542,9 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
this.loading = true;
|
|
|
- if (this.typeCheck) {
|
|
|
+ if (this.typeCheck || this.typeCheck2) {
|
|
|
this.selectAll();
|
|
|
- } else {
|
|
|
+ }else {
|
|
|
this.selectAll2();
|
|
|
}
|
|
|
},
|
|
|
@@ -533,9 +568,9 @@ export default {
|
|
|
this.typeb = ""
|
|
|
this.typed = ""
|
|
|
this.loading = true;
|
|
|
- if (this.typeCheck) {
|
|
|
+ if (this.typeCheck || this.typeCheck2) {
|
|
|
this.selectAll();
|
|
|
- } else {
|
|
|
+ }else {
|
|
|
this.selectAll2();
|
|
|
}
|
|
|
},
|
|
|
@@ -581,7 +616,16 @@ export default {
|
|
|
this.isListAjax = false;
|
|
|
this.zoneClass = res.data[0];
|
|
|
// this.total = res.data[0].length ? res.data[0][0].num : 0;
|
|
|
- let CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
|
|
|
+ let CourseType2 = []
|
|
|
+ if(this.typeCheck){
|
|
|
+ CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
|
|
|
+ }else if(this.typeCheck2){
|
|
|
+ CourseType2 = JSON.parse(JSON.stringify(this.CourseType[2].filter(item => {
|
|
|
+ return item.pid == "34628934-d02f-11ec-8c78-005056b86db5"
|
|
|
+ })))
|
|
|
+ }else{
|
|
|
+ CourseType2 = JSON.parse(JSON.stringify(this.CourseType[0]))
|
|
|
+ }
|
|
|
if(this.oid == "69893dca-1d47-11ed-8c78-005056b86db5"){
|
|
|
if(this.pTypeCheckName.length){
|
|
|
CourseType2 = this.CourseType3.filter(el => {
|
|
|
@@ -599,8 +643,14 @@ export default {
|
|
|
// }
|
|
|
let pid = CourseType2[i].id
|
|
|
if(typeof pid != "object") pid = pid.split(",")
|
|
|
- if(res.data[0][j].pid && this.arrayToArray(pid,res.data[0][j].pid.split(",")).length){
|
|
|
- CourseType2[i].course.push(res.data[0][j])
|
|
|
+ if(this.typeCheck2){
|
|
|
+ if(res.data[0][j].typeid && this.arrayToArray(pid,res.data[0][j].typeid.split(",")).length){
|
|
|
+ CourseType2[i].course.push(res.data[0][j])
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ if(res.data[0][j].pid && this.arrayToArray(pid,res.data[0][j].pid.split(",")).length){
|
|
|
+ CourseType2[i].course.push(res.data[0][j])
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -817,7 +867,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- if (this.typeCheck) {
|
|
|
+ if (this.typeCheck || this.typeCheck2) {
|
|
|
this.selectAll();
|
|
|
} else {
|
|
|
this.selectAll2();
|
|
|
@@ -914,6 +964,9 @@ export default {
|
|
|
let typea = this.$route.query.typea
|
|
|
let typeb = this.$route.query.typeb
|
|
|
let typed = this.$route.query.typed
|
|
|
+ if(this.oidArray.indexOf(this.oid) !== -1){
|
|
|
+ this.typeCheck2 = true
|
|
|
+ }
|
|
|
if(typea || typeb || typed){
|
|
|
this.typea = typea ? typea : ''
|
|
|
this.typeb = typeb ? typeb : ''
|
|
|
@@ -934,9 +987,16 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
- .box_course {
|
|
|
- margin: 0px 5px 20px 5px !important;
|
|
|
- }
|
|
|
+ /* .box_course {
|
|
|
+ width: 300px !important;
|
|
|
+ } */
|
|
|
+ .typeCheckFlex{
|
|
|
+ display: grid !important;
|
|
|
+ grid-template-columns: repeat(3, 1fr) !important;
|
|
|
+ }
|
|
|
+ .claList{
|
|
|
+ grid-template-columns: repeat(3, 1fr) !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.student_head .imgS {
|
|
|
@@ -1001,9 +1061,10 @@ export default {
|
|
|
flex-direction: column;
|
|
|
flex-wrap: nowrap;
|
|
|
/* margin: 0px 1% 20px; */
|
|
|
- margin: 0 15px 20px 0;
|
|
|
- width: 300px;
|
|
|
+ /* margin: 0 15px 20px 0; */
|
|
|
+ /* width: 300px; */
|
|
|
/* height: 260px; */
|
|
|
+ max-width: 400px;
|
|
|
/*border: 1px solid #cecece; */
|
|
|
border-radius: 10px;
|
|
|
overflow: hidden;
|
|
|
@@ -1361,4 +1422,32 @@ export default {
|
|
|
margin-right: 7px;
|
|
|
background-image: url(../assets/icon/course/icon_return2.png);
|
|
|
} */
|
|
|
+ .claList{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
+ gap: 30px;
|
|
|
+ }
|
|
|
+ .claListFlex{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 30px;
|
|
|
+ }
|
|
|
+ .box_courseFlex{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ /* max-width: 400px; */
|
|
|
+ flex: 1;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%),
|
|
|
+ 0px 2px 1px -1px rgb(0 0 0 / 12%);
|
|
|
+ justify-content: space-between;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .typeCheckFlex{
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, 1fr);
|
|
|
+ gap: 30px;
|
|
|
+ }
|
|
|
</style>
|
SanHQin