pbl-teacher-table/src/components/pages/liyuan/CourseCon.vue

<template>
  <div class="teacherDevelop">
    <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" clearable :key="index" v-model="i.typeE" @change="search" :placeholder="i.name">
              <el-option :value="false" 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" clearable @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" clearable @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: 14px;">
              <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,i.userid)" src="../../../assets/icon/liyuan/courseEditC.svg" alt="">
            <div class="ent" @click="entCourse(i)">进入</div>
          </div>
        </div>
      </div>
      <div class="moreL" @click="lookMore">
        <div>查看更多</div>
        <img style="margin-top: 1px;" src="../../../assets/icon/liyuan/arrow-up.svg" alt="">
      </div>

    </div>
  </div>
</template>

<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 {
      betaL:'beta',
      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:8,
      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` },
        { title: 'AI应用', icon: require('../../../assets/icon/liyuan/jiaoshihuaxiang.svg'), type: 3, to: `?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tab=0&gotype=1` },
        { title: '工作空间', icon: require('../../../assets/icon/liyuan/ketangguancha.svg'), type: 3, to:`?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tab=1&gotype=1` },
        { title: '知识库', icon: require('../../../assets/icon/liyuan/zhinengbiaodan.svg'), type:3, to: `?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tab=2&gotype=1`  },
        { title: '协同建构', icon: require('../../../assets/icon/liyuan/zhinengbiaodan.svg'), type: 1, to: "/synergyCourse" },
      ]
    }
  },
  methods:{
    search() {
      console.log('6666');
      this.isLoading = true;
      
      this.page = 1;
      this.getCourse();
    },
    lookMore(){
        sessionStorage.setItem('gotype', this.$route.path);
        let to = `/pbl-student-table/dist/#/index?userid=${this.$route.query.userid}&oid=${this.$route.query.oid}&org=${this.$route.query.org}&role=${this.$route.query.role}&tType=${this.$route.query.tType}&cid=&screenType=3&gotype=1`
        let con = this.betaL =='beta'? 'https://beta.pbl.cocorobo.cn' : 'https://pbl.cocorobo.cn'
        console.log( `${con}${to}`);
        window.location.href = `${con}${to}`;
    },
    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 + "selectCourseNew2Liyuan", 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,uid) {
        if (this.userid != uid) return this.$message.info('课程创建者才可编辑哦')
        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.betaL = window.location.href.includes("beta") ? "beta" : "cloud"
    this.selectAllType()
  }
}
</script>

<style scoped>
.teacherDevelop{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 40px 90px;
  box-sizing: border-box;
  background: #FAFAFA;

}

.cardBox{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  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: 40px;
  width: 110px;
  /* border: 1px solid #969BA3 !important; */
  color: #606266;
}
.courseListSearch>>> .el-input__inner::-webkit-input-placeholder {
  color: #606266 !important;
}
/* .courseListSearch >>> .el-input__placeholder{
  color: #606266 !important;
} */
.courseListSearch >>> .el-input__icon{
  line-height: 40px;
}
.serachCon >>> .el-input__inner{
  height: 40px !important;
  border-radius: 20px !important;
  width: 300px !important;
  border: none;
  background: #E7E7E7;
}
.courseDataL{
  display: grid;
  grid-template-columns: repeat(4, 1fr);  
  gap: 20px;
}
.Conblock{
  display: flex;
  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{
  font-size: 18px;
  -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 #bcbcbc;
  color: #606266;
  opacity: 1;
  gap: 10px;
  cursor: pointer;
  border-radius: 20px;
  padding-top: 4px;
  padding-right: 20px;
  padding-bottom: 4px;
  padding-left: 20px;
  border-width: 1px;
}
.ent:hover{
    border: 1px solid #4080FF;
    background: #4080FF;
    color: #fff;
}
.moreL{
  font-family: PingFang HK;
  font-size: 16px;
  display: flex;
  align-items: center;
  color: #969BA3;
  justify-content: flex-end;
}
</style>