左侧菜单

src/views/study/TaskList.vue

@@ -7,6 +7,10 @@
       <div class="progress"><div class="msg">路径图完成情况</div> <el-progress :text-inside="true" :stroke-width="16" :percentage="porcessData.router" class="progressItem"> </el-progress>  </div>
      
       </div> -->
+      <div v-if="isType == 2" class="title">
+        <div class="item" style="margin-right: 19px;" :class="typeClass == 1?'item1':'item'" @click="learnType(1)">学习项目</div>
+        <div class="item" :class="typeClass == 2?'item1':'item'" @click="learnType(2)">学习路径</div>
+      </div>
     <div style="display: flex; justify-content: space-between; padding: 12px 32px 10px 22px;">
       <div style="display: flex; justify-content: flex-start">
         <div>
@@ -107,14 +111,30 @@ export default {
       keyword:'',
       formatsec,
       couresList:[],
-      total: 0
+      total: 0,
+      isType: null,
+      typeClass: true,
     };
   },
+  watch:{
+    '$route': {
+      handler(to, from) {
+        console.log('type变化了', to.query.type);
+        this.isType = to.query.type;
+        this.loadBoeData();
+      },
+      immediate: true
+    }
+  },
   mounted() {
    this.loadBoeData();
    this.getPossData()
   },
   methods: {
+    learnType(item){
+      this.typeClass = item
+      this.reset()
+    },
     jumpRouter(item) {
       //location.href=`${this.webBaseUrl}/course/boeframe?id=${item.cmtask_id}`;
 
@@ -157,17 +177,59 @@ export default {
           cmtask_name:this.params.cmtask_name,
         }
       this.loading=true;
-      apiManage.userTaskList(params).then(res=>{
-        if(res.code==200){
-             this.total =parseInt(res.data.total);
-             this.couresList = res.data.records;
-           }else{
-             this.$message.error('查询数据失败：'+res.msg);
-           }
-           this.loading=false;
-        }).catch(()=>{
-           this.loading=false;
-        })
+      if(this.isType == 1){
+        //领导力必修
+        apiManage.leadership(params).then(res=>{
+          if(res.code==200){
+               this.total =parseInt(res.data.total);
+               this.couresList = res.data.records;
+             }else{
+               this.$message.error('查询数据失败：'+res.msg);
+             }
+             this.loading=false;
+          }).catch(()=>{
+             this.loading=false;
+          })
+      }else if (this.isType == 2){
+        //定制化学习
+        if(this.typeClass == 1){
+          apiManage.customized(params).then(res=>{
+          if(res.code==200){
+               this.total =parseInt(res.data.total);
+               this.couresList = res.data.records;
+             }else{
+               this.$message.error('查询数据失败：'+res.msg);
+             }
+             this.loading=false;
+          }).catch(()=>{
+             this.loading=false;
+          })
+        }else{
+          apiManage.compulsoryList(params).then(res=>{
+          if(res.code==200){
+               this.total =parseInt(res.data.total);
+               this.couresList = res.data.records;
+             }else{
+               this.$message.error('查询数据失败：'+res.msg);
+             }
+             this.loading=false;
+          }).catch(()=>{
+             this.loading=false;
+          })
+        }
+      }else{
+        apiManage.userTaskList(params).then(res=>{
+          if(res.code==200){
+               this.total =parseInt(res.data.total);
+               this.couresList = res.data.records;
+             }else{
+               this.$message.error('查询数据失败：'+res.msg);
+             }
+             this.loading=false;
+          }).catch(()=>{
+             this.loading=false;
+          })
+      }
     },
     search(){
       this.page=1;
@@ -196,6 +258,31 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.title{
+  display: flex;
+  margin-left: 22px;
+  margin-bottom: 6px;
+  .item{
+    width: 100px;
+    height: 46px;
+    line-height: 46px;
+    text-align: center;
+    font-size: 18px;
+    color: #666666;
+  }
+  .item1{
+    // border-bottom: #409EFF 4px solid;
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 10px;
+      width: 80px;
+      border-bottom: 4px solid #409EFF;
+    }
+  }
+}
 .progress{
   width:calc((100% - 100px) / 3);
   display: flex;