案例筛选条件多选控制

src/views/portal/case/Index.vue

@@ -7,10 +7,10 @@
       <div class="xcontent2-main" style="margin-right: 30px;">
             <div class="left-div">
               <div class="search-div">
-                <div class="searchbar" v-if="searchTags.length > 0">
+                <div class="searchbar" v-if="fieldData.length > 0">
                   <div style="line-height: 30px;">
                     <span class="item-title">搜索条件</span>
-                    <el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</el-tag>
+                    <el-tag closable v-for="(tag, tagIdx) in fieldData" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
                   </div>
                 </div>
                 <div class="search-item">
@@ -21,10 +21,14 @@
                         <span class="item-line"></span>
                       </div>
                       <div style="flex:1;">
-                        <el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
+                        <div class="field">
-                          <el-radio-button :label="null">全部</el-radio-button>
+                           <div :class="fielclass ? 'fieldactive' :''  ">全部</div>
-                          <el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
+                           <div :class="item.fielclass ? 'fieldactive' :''  " @click="fieldswich(item)" v-for="item in domain" :key="item.code">{{item.name}}</div>
-                        </el-radio-group>
+                        </div>
+                        <!-- <el-checkbox-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
+                          <el-checkbox-button :label="null">全部</el-checkbox-button>
+                          <el-checkbox-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-checkbox-button>
+                        </el-checkbox-group> -->
                       </div>
                     </div>
                 </div>
@@ -38,12 +42,16 @@
                       <span class="item-line"></span>
                        </div>
                        <div style="flex:1" id="searchBox">
-                          <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
+                         <div class="field">
+                           <div :class="fielclass ? 'fieldactive' :''  ">全部</div>
+                           <div :class="item.fielclass ? 'fieldactive' :''  " @click="fieldmajor(item)" v-for="item in speciData" :key="item.code">{{item.name}}</div>
+                        </div>
+                          <!-- <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
                             <el-radio-button :label="null">全部</el-radio-button>
                             <div>
                               <el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
                             </div>
-                          </el-radio-group>
+                          </el-radio-group> -->
                        </div>
                       </div>
 
@@ -278,8 +286,8 @@ export default {
         orderField: "views",
         // breCommend:null,
         keyWord: "",
-        majorType:null, //专业分类
+        majorType:'', //专业分类
-        orgDomain: null, // 组织领域
+        orgDomain: '', // 组织领域
         orderAsc: false,
         excellent:false
       },
@@ -292,10 +300,20 @@ export default {
       isFind: false,
       searchTags: [],
       orgData: [],
+      fieldData:[],
+      fielclass:true,
+      orgDomainData:'',
+      orgsto:[],
+      majorTypeData:'',
+      majsto:[],
+      Domarr:[],
+      majarr:[],
     };
   },
 
   mounted() {
+    
+    
     if(this.searchTags.length == 0){
       this.queryCondition.majorType = null;
       this.queryCondition.orgDomain = null;
@@ -337,6 +355,39 @@ export default {
     window.removeEventListener("scroll", this.handleScroll);
   },
   methods: {
+    fieldmajor(item){//专业分类
+      this.majarr.push(item);//搜索条件
+      this.fieldData = Array.from(new Set(this.majarr))//过滤重复的数据
+      this.majsto.push(item.code);
+      this.majorTypeData = this.majsto.toString()//传给后端
+      this.queryCondition.majorType = this.majorTypeData
+      item.fielclass = !item.fielclass;
+      this.getCaseData();
+      // this.lmj();
+    },
+    fieldswich(item){//组织领域
+      this.Domarr.push(item);//搜索条件
+      this.fieldData = Array.from(new Set(this.Domarr))//过滤重复的数据
+      this.orgsto.push(item.code);
+      this.orgDomainData = this.orgsto.toString()//传给后端
+      this.queryCondition.orgDomain = this.orgDomainData;
+      item.fielclass = !item.fielclass;
+      this.getCaseData();
+      this.lmj();
+    },
+     lmj(){
+      this.fieldData.forEach((item,idx) =>{
+      if(item.fielclass == false){
+        console.log(item,'lll')
+        let index = this.fieldData.indexOf(item);
+        console.log(index,'index')
+        //  删除这个为false的item
+        this.fieldData.splice(index,1)
+        // console.log(this.fieldData)
+        this.fieldData.splice(item,1)
+      }
+    })
+    },
     banJump() {
       if(this.resonimg.JumpUrl) {
         window.open(this.resonimg.JumpUrl);
@@ -353,6 +404,12 @@ export default {
     let $this=this;
     apiCase.majorTypes().then(res =>{
       if(res.status == 200){
+        if (res.status == 200) {
+          res.result.forEach(item =>{
+            item.fielclass = false;
+            
+          })
+        }
         this.speciData = res.result;
         this.$nextTick(function() {
           $this.initHeight = document.getElementById("searchBox").offsetHeight;
@@ -432,6 +489,9 @@ export default {
       let key = "org_domain";
       apiDict.items(key).then(res => {
         if (res.status == 200) {
+          res.result.forEach(item =>{
+            item.fielclass = false;
+          })
           this.domain = res.result;
           if(res.result.length > 0) {
            this.orgDomainLevel(res.result)
@@ -567,6 +627,7 @@ export default {
       this.getCaseData();
     },
     async getCaseData() {
+      // this.fieldData
       this.getTags();
       if (this.queryCondition.pageIndex == 1) {
         this.caseList.list = [];
@@ -637,9 +698,7 @@ export default {
       }
     },
     tagsClose(tag, index) {
-
       for (let i in this.queryCondition) {
-
         if (tag.type === i) {
           if (i == "majorType") {
              this.queryCondition.majorType = '';
@@ -659,7 +718,6 @@ export default {
           if (i == "orgDomain") {
             this.queryCondition.orgDomain = null;
           }
-
           this.getCaseData();
         }
       }
@@ -734,6 +792,31 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.field{
+  display: flex;
+  div{
+    margin-right: 25px;
+    font-size: 16px;
+    line-height: 25px;
+    color: #333;
+  }
+  .fieldactive{
+    color: #387DF7;
+  }
+}
+::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner{
+  box-shadow: none !important;
+}
+::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner{
+  color: #387df7 !important;
+  background-color: #fff !important;
+}
+::v-deep .el-checkbox-button--mini .el-checkbox-button__inner{
+  font-size: 14px;
+}
+::v-deep .el-checkbox-button .el-checkbox-button__inner{
+  border: none !important;
+}
 .notcoures{
   text-align: center;
   img{