课程多选的处理

src/views/portal/course/Index.vue

@@ -7,7 +7,8 @@
       <div class="xcontent2">
         <div class="xcontent2-main content-div">
           <div class="search-div" style="margin-right:36px">
-            <div class="searchbar" v-if="stagList.length > 0">
+            <div class="searchbar" style="padding-right: 40px;" v-if="stagList.length > 0">
+              <span @click="handleClearTags" style="float: right;margin-top: 6px;margin-right: -20px;color: #858585;cursor: pointer;" title="清除查询条件"><i class="el-icon-close"></i> 清除</span>
               <div style="line-height: 30px;">
                 <span class="item-title"> 搜索条件</span>
                 <el-tag closable v-for="(tag, tagIdx) in stagList" :key="'t'+tagIdx" @close="stagClose(tag,tagIdx)">{{ tag.name }}</el-tag>
@@ -35,7 +36,7 @@
                   </div>
                   <div>
                     <a @click="handleTypeAllClick(11)" class="option-item" :class="{'option-active':oneTagAll}">全部</a>
-                    <a v-for="one in oneList" @click="handleOptionClick(one,oneList)"  class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
+                    <a v-for="one in oneList" @click="handleOptionClick(one,oneList,1)"  class="option-item" :class="{'option-active':one.checked}">{{one.name}}</a>
                     <a class="option-border"> </a>
                     <a class="option-item">
                       <span @click="jumUX()" class="Uxtext" style=""> U选小课堂
@@ -56,7 +57,7 @@
                     <a @click="handleTypeAllClick(12)" class="option-item" :class="{'option-active':twoTagAll}">全部</a>
                   </div>
                   <div>
-                    <a v-for="two in twoList" @click="handleOptionClick(two,twoList)"  class="option-item" :class="{'option-active':two.checked}">{{two.name}}</a>
+                    <a v-for="two in twoList" @click="handleOptionClick(two,twoList,2)"  class="option-item" :class="{'option-active':two.checked}">{{two.name}}</a>
                   </div>
                 </div>
             </div>
@@ -69,7 +70,7 @@
                     <a @click="handleTypeAllClick(13)" class="option-item" :class="{'option-active':threeTagAll}">全部</a>
                   </div>
                   <div>
-                    <a v-for="three in threeList" :key="three.id" @click="handleOptionClick(three,threeList)"  class="option-item" :class="{'option-active':three.checked}">{{three.name}}</a>
+                    <a v-for="three in threeList" :key="three.id" @click="handleOptionClick(three,threeList,3)"  class="option-item" :class="{'option-active':three.checked}">{{three.name}}</a>
                   </div>
                 </div>
             </div>
@@ -353,21 +354,42 @@ export default {
            list.push(item);
          }
        });
-       this.oneList.forEach(item=>{
+       this.oneList.forEach(one=>{
-         if(item.checked){
+           var twoChildChecked=false;//是否有下级
-           list.push(item);
+           one.children.forEach(two=>{
-         }
+              if(two.checked){
-       });
+                twoChildChecked=true;
-       this.twoList.forEach(item=>{
+              }
-         if(item.checked){
+              var threeChildChecked=false;
-           list.push(item);
+              two.children.forEach(three=>{
-         }
+                 if(three.checked){
-       });
+                   list.push(three);
-       this.threeList.forEach(item=>{
+                   threeChildChecked=true;
-         if(item.checked){
+                 }
-           list.push(item);
+              });
-         }
+              if(two.checked && !threeChildChecked){
-       });
+                list.push(two);
+              }
+           });
+           if(one.checked && !twoChildChecked){
+             list.push(one);
+           }
+       })
+       // this.oneList.forEach(item=>{
+       //   if(item.checked){
+       //     list.push(item);
+       //   }
+       // });
+       // this.twoList.forEach(item=>{
+       //   if(item.checked){
+       //     list.push(item);
+       //   }
+       // });
+       // this.threeList.forEach(item=>{
+       //   if(item.checked){
+       //     list.push(item);
+       //   }
+       // });
        //console.log(list,'list');
        return list;
     },
@@ -523,6 +545,7 @@ export default {
       }
       this.searchData();
     },
+
     handleTypeAllClick(t){
       if(t==1){
         this.ctypeList.forEach(ct=>{
@@ -555,42 +578,116 @@ export default {
       }
       this.searchData();
     },
+    handleClearTags(){
+       //清空所有的条件
+       this.keyword='';
+       this.ctypeList.forEach(item=>{
+         item.checked=false;
+       });
+       this.oneList.forEach(one=>{
+         one.checked=false;
+         one.children.forEach(two=>{
+            two.checked=false;
+            two.children.forEach(three=>{
+              three.checked=false;
+            })
+         })
+       });
+       this.twoList=[];
+       this.threeList=[];
+       this.searchData();
+    },
     handleTypeClick(item,list){
-      //item.checked=!item.checked;
+      item.checked=!item.checked;
        //使用上面一行是可以多选，使用下面是单选
-      list.forEach(row=>{
+      // list.forEach(row=>{
-        row.checked=false;
+      //   row.checked=false;
-      })
+      // })
-      item.checked=true;
+      // item.checked=true;
 
       this.searchData();
     },
-    handleOptionClick(item,list){
+    handleOptionClick(item,list,level){
-      //item.checked=!item.checked;
+      item.checked=!item.checked;
       //使用上面一行是可以多选，使用下面是单选
-      list.forEach(row=>{
+      // list.forEach(row=>{
-        row.checked=false;
+      //   row.checked=false;
-      })
+      // })
-      item.checked=true;
+      // item.checked=true;
+      //以下是新的规则的修改，
+      if(!item.checked){
+        //清空它下面的所有的中的
+        item.children.forEach(subItem=>{
+          subItem.checked=false;
+          if(subItem.children){
+            subItem.children.forEach(sub=>{
+              sub.checked=false;
+            })
+          }
+        });
+        if(level==1){
+          this.twoList=[];
+          this.threeList=[];
+        }
+        if(level==2){
+          this.threeList=[];
+        }
+        this.searchData();
+        return;
+      }
 
-      this.handleChangeTypes();
+      let $this=this;
+      if(level==1){ //一级的情况
+        this.twoList=[];
+        this.threeList=[];
+        let lastCheked=null;
+        item.children.forEach(two=>{
+           $this.twoList.push(two);
+           if(two.checked){
+             lastCheked=two;
+           }
+        });
+        if(lastCheked!=null){
+          $this.threeList=lastCheked.children;
+            item.children.forEach(three=>{
+          });
+        }
+      }else if(level==2){ //二级的情况
+          this.threeList=item.children;
+      }else if(level==3){ //三级的情况
+
+      }
+      //this.handleChangeTypes(item);
       this.searchData();
     },
-    handleChangeTypes(){
+    handleChangeTypes(item){
+      console.log(item);
       //重新计算
       this.twoList=[];
       this.threeList=[];
       let $this=this;
+      // this.oneList.forEach(one=>{
+      //   if(one.checked){
+      //      one.children.forEach(two=>{
+      //        $this.twoList.push(two);
+      //        if(two.checked){
+      //           two.children.forEach(three=>{
+      //             $this.threeList.push(three);
+      //           })
+      //        }
+      //      });
+      //   }
+      // })
       this.oneList.forEach(one=>{
         if(one.checked){
-           one.children.forEach(two=>{
+            one.children.forEach(two=>{
-             $this.twoList.push(two);
+              $this.twoList.push(two);
-             if(two.checked){
+              if(two.checked){
                 two.children.forEach(three=>{
                   $this.threeList.push(three);
                 })
-             }
+              }
-           });
+            });
         }
       })
     },
@@ -599,6 +696,7 @@ export default {
       try {
         const { result, status } = await apiType.tree(1);
         if (status === 200) {
+          let tree=[];
           result.forEach(item=>{
              let newItem={
                type:11,
@@ -634,6 +732,7 @@ export default {
              }
              $this.oneList.push(newItem);
           });
+
         }
       } catch (error) {
         console.log(error);