|
|
@@ -3,6 +3,70 @@
|
|
|
<topBar title="课程建设" detail="智能课程管理 · 数字化教学资源 · AI赋能备课教学"></topBar>
|
|
|
<div class="cardBox">
|
|
|
<card v-for="item in cardArray" :key="item.title" :title="item.title" :icon="item.icon" :to="item.to" :type="item.type"></card>
|
|
|
+ </div>
|
|
|
+ <div class="courseList" v-loading="isLoading">
|
|
|
+ <div class="courseListTit">精品课程</div>
|
|
|
+ <div class="courseListSearch">
|
|
|
+ <div style="display: flex;gap: 25px;">
|
|
|
+ <el-select v-for="(i,index) in typeList" :key="index" v-model="i.typeE" @change="search" :placeholder="i.name">
|
|
|
+ <el-option value="" label="全部"></el-option>
|
|
|
+ <el-option
|
|
|
+ v-for="item in i.child"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select v-model="groupA" @change="search" v-if="role == '1'" placeholder="所有者">
|
|
|
+ <el-option value="4" label="全部"></el-option>
|
|
|
+ <el-option value="2" label="我的课程"></el-option>
|
|
|
+ <el-option value="3" label="协同课程"></el-option>
|
|
|
+ <el-option value="1" label="他人课程"></el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="groupA" @change="search" v-else placeholder="所有者">
|
|
|
+ <el-option value="0" label="全部"></el-option>
|
|
|
+ <el-option value="2" label="我的课程"></el-option>
|
|
|
+ <el-option value="3" label="协同课程"></el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="serachCon">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ @change="search"
|
|
|
+ v-model="courseName">
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="courseDataL">
|
|
|
+ <div class="Conblock" v-for="(i,index) in courseList" :key="index">
|
|
|
+ <div class="ConblockTit">
|
|
|
+ {{ i.title }}
|
|
|
+ </div>
|
|
|
+ <div style="display: flex;gap: 10px;color: #969BA3;font-size: 12px;">
|
|
|
+ <span v-if="i.state == 1">阶段模式</span>
|
|
|
+ <span v-if="i.state == 2">任务模式</span>
|
|
|
+ <span v-if="i.state == 3">极简模式</span>
|
|
|
+ <span v-if="i.state == 4 || i.state == 5">ai模式</span>
|
|
|
+ <span v-if="i.state == 6">上课模式</span>
|
|
|
+ <span>@{{ i.school }}</span>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <img class="PimgL" :src="i.cover != null && i.cover != ''
|
|
|
+ ? JSON.parse(i.cover).length > 0
|
|
|
+ ? JSON.parse(i.cover)[0].url
|
|
|
+ : mr
|
|
|
+ : mr
|
|
|
+ " alt />
|
|
|
+ <div class="foot">
|
|
|
+ <img style="cursor: pointer;" @click="goToCourse(i.courseId)" src="../../../assets/icon/liyuan/courseEdit.svg" alt="">
|
|
|
+ <div class="ent" @click="entCourse(i)">进入</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -10,13 +74,31 @@
|
|
|
<script>
|
|
|
import topBar from './components/topBar'
|
|
|
import card from './components/card.vue';
|
|
|
+import { myMixin } from "@/mixins/mixin.js"
|
|
|
+
|
|
|
export default {
|
|
|
+ mixins: [ myMixin ],
|
|
|
components: {
|
|
|
topBar,
|
|
|
card
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ typeList:[],
|
|
|
+ CourseType:[],
|
|
|
+ CourseTypeJson:[],
|
|
|
+ total:0,
|
|
|
+ isLoading:false,
|
|
|
+ mr: require("../../../assets/icon/kc1.png"),
|
|
|
+ groupA:'', //所有者
|
|
|
+ courseName:'',
|
|
|
+ courseList:[],
|
|
|
+ org:this.$route.query["org"],
|
|
|
+ oid:this.$route.query["oid"],
|
|
|
+ userid:this.$route.query["userid"],
|
|
|
+ role:this.$route.query["role"],
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
cardArray: [
|
|
|
{ title: '课程管理', icon: require('../../../assets/icon/liyuan/niandukaohe.svg'), type: 1, to: "/course" },
|
|
|
{ title: '课程中心', icon: require('../../../assets/icon/liyuan/gerendangan.svg'), type: 4, to: `/pbl-student-table/dist/#/index?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&tType=${this.$route.query.tType}&cid=&screenType=3&gotype=1` },
|
|
|
@@ -27,6 +109,184 @@ export default {
|
|
|
]
|
|
|
}
|
|
|
},
|
|
|
+ methods:{
|
|
|
+ search() {
|
|
|
+ console.log('6666');
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ this.page = 1;
|
|
|
+ this.getCourse();
|
|
|
+ },
|
|
|
+ selectAllType() {
|
|
|
+ let params = {
|
|
|
+ org: this.org && this.org != "" ? this.org : "",
|
|
|
+ oid: this.oid && this.oid != "" ? this.oid : "",
|
|
|
+ stand: "cn"
|
|
|
+ };
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectAllTypeStand", params)
|
|
|
+ .then((res) => {
|
|
|
+
|
|
|
+ if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
|
|
|
+ res.data[0] = [...res.data[0], ...res.data[4]]
|
|
|
+ }
|
|
|
+ this.CourseType = res.data;
|
|
|
+ this.typeList = res.data[0]
|
|
|
+
|
|
|
+ for (var cti = 0; cti < res.data[0].length; cti++) {
|
|
|
+ if (res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86db5" || res.data[0][cti].id == "34628934-d02f-11ec-8c78-005056b86ac5") {
|
|
|
+ res.data[0][cti].name = "年级";
|
|
|
+ } else if (res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86db5" || res.data[0][cti].id == "34629907-d02f-11ec-8c78-005056b86ac5") {
|
|
|
+ res.data[0][cti].name = "学科";
|
|
|
+ } else if (res.data[0][cti].id == "34629bcc-d02f-11ec-8c78-005056b86db5") {
|
|
|
+ res.data[0][cti].name = "主题";
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ for (var i = 0; i < res.data[0].length; i++) {
|
|
|
+ // if (!this.cid) {
|
|
|
+ // this.courseTypeId[res.data[0][i].id] = [];
|
|
|
+ // }
|
|
|
+ if (!this.CourseTypeJson[res.data[0][i].id]) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id] = [];
|
|
|
+ }
|
|
|
+ if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
|
|
|
+ if (res.data[0][i].name == "栏目") {
|
|
|
+ this.CourseType[0][i].name = "主题";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (res.data[2].length == 0 && res.data[3].length == 0) {
|
|
|
+ for (var j = 0; j < res.data[1].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[1][j].pid) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]); // 去除公共分类
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (res.data[2].length > 0) {
|
|
|
+ for (var j = 0; j < res.data[2].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[2][j].pid) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[2][j]); // 去除公共分类
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (res.data[3].length > 0) {
|
|
|
+ for (var j = 0; j < res.data[3].length; j++) {
|
|
|
+ if (res.data[0][i].id == res.data[3][j].pid) {
|
|
|
+ this.CourseTypeJson[res.data[0][i].id].push(res.data[3][j]); // 去除公共分类
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.typeList.forEach(e=>{
|
|
|
+ e.child = this.CourseTypeJson[e.id]
|
|
|
+ e.typeE = ''
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log('typeList',this.typeList);
|
|
|
+
|
|
|
+ this.getCourse()
|
|
|
+ // console.log('CourseTypeJson',this.CourseTypeJson['34629bcc-d02f-11ec-8c78-005056b86db5']);
|
|
|
+ // console.log('CourseType',this.CourseType);
|
|
|
+
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ getCourse() {
|
|
|
+ this.isLoading = true;
|
|
|
+ let params = {
|
|
|
+ type: this.groupA ? this.groupA : 4,
|
|
|
+ uid: this.userid,
|
|
|
+ oid: this.oid,
|
|
|
+ org: this.org,
|
|
|
+ typea: this.typeList.filter(e=> e.id == "34628934-d02f-11ec-8c78-005056b86db5")[0].typeE ? this.typeList.filter(e=> e.id == "34628934-d02f-11ec-8c78-005056b86db5")[0].typeE : '',
|
|
|
+ typeb: this.typeList.filter(e=> e.id == "34629bcc-d02f-11ec-8c78-005056b86db5")[0].typeE ? this.typeList.filter(e=> e.id == "34629bcc-d02f-11ec-8c78-005056b86db5")[0].typeE : '',
|
|
|
+ typec: "",
|
|
|
+ typed: this.typeList.filter(e=> e.id == "34629907-d02f-11ec-8c78-005056b86db5")[0].typeE ? this.typeList.filter(e=> e.id == "34629907-d02f-11ec-8c78-005056b86db5")[0].typeE : '',
|
|
|
+ typeE: '',
|
|
|
+ cu: "",
|
|
|
+ cn: this.courseName,
|
|
|
+ page: this.page,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ };
|
|
|
+ console.log('params',params);
|
|
|
+
|
|
|
+ this.ajax
|
|
|
+ .get(this.$store.state.api + "selectCourseNew2", params)
|
|
|
+ .then((res) => {
|
|
|
+ // this.loading.close();
|
|
|
+ // this.loading = "";
|
|
|
+ this.total = res.data[0].length > 0 ? res.data[0][0].num : 0;
|
|
|
+ this.courseList = res.data[0];
|
|
|
+ this.isLoading = false;
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.isLoading = false;
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ entCourse(item) {
|
|
|
+ let _str = ""
|
|
|
+ if(item.state == 1){
|
|
|
+ _str = "course_stageMode_open"
|
|
|
+ }if(item.state == 2){
|
|
|
+ _str = "course_taskMode_open"
|
|
|
+ }if(item.state == 3){
|
|
|
+ _str = "course_easyMode_open"
|
|
|
+ }if(item.state == 5){
|
|
|
+ _str = "course_aiMode_open"
|
|
|
+ }if(item.state == 6){
|
|
|
+ _str = "course_aiEasyMode_open"
|
|
|
+ }
|
|
|
+ this.addOp3('1', "", { courseid: item.courseId, type: _str }, "success")
|
|
|
+
|
|
|
+ window.topU.postMessage({ cid: item.courseId, screenType: "3" }, "*");
|
|
|
+ },
|
|
|
+ goToCourse(courseId) {
|
|
|
+ sessionStorage.setItem('gotype', 'backCourseCon');
|
|
|
+
|
|
|
+ this.goToCourse4(courseId)
|
|
|
+ },
|
|
|
+ goToCourse4(courseId) {
|
|
|
+ if (courseId) {
|
|
|
+ this.$router.push(
|
|
|
+ "/newAddCourse?cid=" +
|
|
|
+ courseId +
|
|
|
+ "&userid=" +
|
|
|
+ this.userid +
|
|
|
+ "&oid=" +
|
|
|
+ this.oid +
|
|
|
+ "&org=" +
|
|
|
+ this.org +
|
|
|
+ "&role=" +
|
|
|
+ this.role
|
|
|
+ );
|
|
|
+ this.addOp3('1', "", { courseid: courseId ,type: "course_stageMode_edit" }, "success")
|
|
|
+ } else {
|
|
|
+ this.$router.push(
|
|
|
+ "/newAddCourse?userid=" +
|
|
|
+ this.userid +
|
|
|
+ "&oid=" +
|
|
|
+ this.oid +
|
|
|
+ "&org=" +
|
|
|
+ this.org +
|
|
|
+ "&role=" +
|
|
|
+ this.role
|
|
|
+ );
|
|
|
+ this.addOp3('1', "", { type: "course_stageMode_createClick" }, "success")
|
|
|
+ }
|
|
|
+ // this.$router.push(path);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.selectAllType()
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
@@ -35,7 +295,8 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
padding: 40px 90px;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
box-sizing: border-box;
|
|
|
background: #FAFAFA;
|
|
|
|
|
|
@@ -48,4 +309,91 @@ export default {
|
|
|
width: 100%;
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
+.courseList{
|
|
|
+ flex: 1;
|
|
|
+ margin-top: 30px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 30px;
|
|
|
+}
|
|
|
+.courseListTit{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-style: Semibold;
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 100%;
|
|
|
+ letter-spacing: 10%;
|
|
|
+}
|
|
|
+.courseListSearch{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.courseListSearch >>> .el-select .el-input__inner{
|
|
|
+ border-radius: 20px;
|
|
|
+ height: 28px;
|
|
|
+ width: 110px;
|
|
|
+ border: 1px solid #969BA3 !important;
|
|
|
+ color: #969BA3;
|
|
|
+}
|
|
|
+.courseListSearch >>> .el-input__icon{
|
|
|
+ line-height: 28px;
|
|
|
+}
|
|
|
+.serachCon >>> .el-input__inner{
|
|
|
+ height: 28px !important;
|
|
|
+ border-radius: 20px !important;
|
|
|
+ width: 300px !important;
|
|
|
+ border: none;
|
|
|
+ background: #E7E7E7;
|
|
|
+}
|
|
|
+.courseDataL{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+.Conblock{
|
|
|
+ display: flex;
|
|
|
+ width: 300px;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 15px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 14px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0px 4px 10px 0px #0000001A;
|
|
|
+
|
|
|
+}
|
|
|
+.PimgL{
|
|
|
+ width: 100%;
|
|
|
+ height: 126px;
|
|
|
+ border-radius: 10px;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+.ConblockTit{
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+}
|
|
|
+.foot{
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
+.foot > .ent{
|
|
|
+ border: 1px solid #000000;
|
|
|
+ width: 68;
|
|
|
+ height: 28;
|
|
|
+ angle: 0 deg;
|
|
|
+ opacity: 1;
|
|
|
+ gap: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding-top: 4px;
|
|
|
+ padding-right: 20px;
|
|
|
+ padding-bottom: 4px;
|
|
|
+ padding-left: 20px;
|
|
|
+ border-width: 1px;
|
|
|
+}
|
|
|
</style>
|
11wqe1
