选中状态+搜索

src/components/icss/NoiseTemplate.vue

@@ -14,7 +14,7 @@
     <div class="main">
       <p class="title"> <i>*</i> 标签明细：</p>
       <PubTagPartDetail :pool="dataPub.tagPool" :type="dataPub.region1" :sign="dataPub.region2" v-show="dataPub.region2 == 2"></PubTagPartDetail>
-      <SymptomTagGroup v-if="dataPub.region2 == 4" :dataPub ="this.dataPub"></SymptomTagGroup>
+      <SymptomTagGroup v-if="dataPub.region2 == 4" :pool="dataPub.tagPool" :type="dataPub.region1"></SymptomTagGroup>
       <div class="btn">
         <el-button
           type="primary"

src/components/icss/SymptomTagGroup.vue

@@ -3,14 +3,22 @@
     <div class="bottomPartLeft fl">
       <p class="poolTitle">标签池</p>
       <div class="pool">
-        <input class="search" @input="searchTag"/>
+        <el-input
+          placeholder="请输入搜索内容"
+          v-model="searchVal"
+        >
+            <i
+                slot="prefix"
+                class="el-input__icon el-icon-search"
+            ></i>
+        </el-input>
         <ul class="tagList">
-            <li class = "tagItem"
-                v-for="item in leftTagsList" 
+            <li v-for="(item, index) in leftTagsList"
+                class = "tagItem"
                 :key='item.id'
-                @click='selectLeftTag(item)'
+                @click='selectLeftTag(item, index, $event)'
             >
-                <p class="tagName">{{item.tagName}} </p>
+                <p class="tagName"  @click='selectTag($event)'>{{item.tagName}} </p>
             </li>
         </ul>
       </div>
@@ -27,7 +35,7 @@
                 :key='item.id'
                 @click='selectRightTag(item)'
             >
-                <p class="tagName">{{item.tagName}} </p>
+                <p class="tagName" @click='selectTag($event)'>{{item.tagName}} </p>
             </li>
         </ul>
     </div>
@@ -38,7 +46,14 @@ import api from '@api/icss.js';
 export default {
     name: "SymptomTagGroup",
     props: {
-        dataPub: {},
+        pool: {
+            default: () => [],
+            type: Array
+        },
+        type: {
+            default: '',
+            type: String
+        },
     },
     data() {
         return {
@@ -46,15 +61,42 @@ export default {
             selectLeftTagsList: [],
             rightTagsList: [],
             selectRightTagsList: [],
+            searchVal: '',
 
         }
     },
     mounted() {
-        this.leftTagsList = this.dataPub.tagPool
-        console.log('TAGPOOL', this.dataPub)
+        this.leftTagsList = this.pool
+        console.log('TAGPOOL', this.pool)
+    },
+    watch: {
+        pool(newVal, preVal) {
+            if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+                this.leftTagsList = newVal
+            }
+        },
+        searchVal(newVal, preVal){
+            if(newVal.trim() == ''){
+                this.searchTagList()
+            }else if(newVal.trim() != preVal.trim()){
+                this.searchTagList()
+            }
+        },
+        
+        
     },
     methods: {
-        selectLeftTag(tag) {
+        selectTag(e) {
+             if (e.target.className.indexOf("active") == -1) {
+                e.target.className = "tagName active"; //切换按钮样式
+                //写逻辑
+            } else {
+                e.target.className = "tagName";//切换按钮样式
+                //写逻辑
+            }
+        },
+        selectLeftTag(tag, index, e) {
+           
             const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
             console.log(hasTag)
             if (hasTag) {
@@ -91,14 +133,16 @@ export default {
             console.log(hasTag)
             if (hasTag) {
                 // arr = arr.filter(item => item.id !== tag.id)
-                arr = arr.filter((item) => {console.log('aaa',item.id === tag.id); return item.id !== tag.id})
+                arr = arr.filter((item) => { return item.id !== tag.id})
             } else {
                 arr.push(tag);
             }
             console.log(arr)
         },
         toLeftList() {
-            this.leftTagsList = this.tagPool
+            if(!this.searchVal) {
+                this.leftTagsList = this.pool
+            }
             for (let i = 0; i < this.selectRightTagsList.length; i++) {
                 this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
             }
@@ -106,6 +150,7 @@ export default {
                 this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
             }
             this.selectRightTagsList = []
+            this.searchTagList()
         },
         toRightList() {
             this.rightTagsList.push(...this.selectLeftTagsList);
@@ -115,19 +160,18 @@ export default {
             console.log(this.rightTagsList)
             this.selectLeftTagsList = []
         },
-        searchTag(value) {
-            console.log('value', value)
+        searchTagList() {
             let notIds = []
             for (let i = 0; i < this.rightTagsList.length; i++) {
-                notIds.push(rightTagsList[i].id)
+                notIds.push(this.rightTagsList[i].id)
             }
-            console.log(this.dataPub)
             let param = {
-                "tagName": value.data,
-                "tagType": [
-                    4
-                ],
-                "type": this.dataPub.region1 || ''
+                "tagName": this.searchVal,
+                "tagType": [],
+                "controlType": [],
+                "type": this.type || '',
+                "notIds": notIds,
+
             }
             api.searchTagList(param).then((res) => {
                 if (res.data.code === '0') {
@@ -194,5 +238,8 @@ export default {
     .bottomPartRight {
         width: 60%;
     }
+    .active {
+        color: #aBcdef;
+    }
 }
 </style>