选中状态

src/components/icss/SymptomTagGroup.vue

@@ -16,9 +16,10 @@
             <li v-for="(item, index) in leftTagsList"
                 class = "tagItem"
                 :key='item.id'
+                :style="getStyle(item)?styles:null"
                 @click='selectLeftTag(item, index, $event)'
             >
-                <p class="tagName"  @click='selectTag($event)'>{{item.tagName}} </p>
+                <p class="tagName" >{{item.tagName}} </p>
             </li>
         </ul>
       </div>
@@ -31,18 +32,27 @@
       <p class="poolTitle">操作池</p>
       <ul class="tagList">
             <li class = "tagItem"
-                v-for="item in rightTagsList" 
-                :key='item.id'
+                v-for="(item, index) in rightTagsList" 
+                :key='item.id+item.tagName+index'
+                :style="getStyle2(item)?styles:null"
                 @click='selectRightTag(item)'
             >
-                <p class="tagName" @click='selectTag($event)'>{{item.tagName}} </p>
+                <p class="tagName">{{item.tagName}} </p>
+                <p v-if="item.symptomType === 1">跟主症状</p>
+                <p v-if="item.symptomType === 2">跟伴随症状</p>
             </li>
         </ul>
     </div>
+    <div :style="{widt: '20%'}">
+        <el-button type="primary" @click="mainSymptom">跟主症状</el-button>
+        <el-button type="primary" @click="followSymptom">跟伴随症状</el-button>
+    </div>
   </div>
 </template>
 <script>
 import api from '@api/icss.js';
+import utils from '@api/utils.js';
+
 export default {
     name: "SymptomTagGroup",
     props: {
@@ -62,7 +72,9 @@ export default {
             rightTagsList: [],
             selectRightTagsList: [],
             searchVal: '',
-
+            styles:{
+                background:'#eae7e7'
+            },
         }
     },
     mounted() {
@@ -89,10 +101,8 @@ export default {
         selectTag(e) {
              if (e.target.className.indexOf("active") == -1) {
                 e.target.className = "tagName active"; //切换按钮样式
-                //写逻辑
             } else {
                 e.target.className = "tagName";//切换按钮样式
-                //写逻辑
             }
         },
         selectLeftTag(tag, index, e) {
@@ -139,16 +149,26 @@ export default {
             }
             console.log(arr)
         },
+        getStyle(item){       //左侧选中状态
+            console.log('selected',utils.filterArr(this.leftTagsList,item,2))
+            return utils.filterArr(this.selectLeftTagsList,item,2)
+        },
+        getStyle2(item) {
+            return utils.filterArr(this.selectRightTagsList,item,2)
+        },
         toLeftList() {
-            if(!this.searchVal) {
-                this.leftTagsList = this.pool
-            }
+            // if(!this.searchVal) {
+            //     this.leftTagsList = this.searchTagList()
+            // }
+            
+            this.searchTagList()
             for (let i = 0; i < this.selectRightTagsList.length; i++) {
                 this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
             }
             for (let i = 0; i < this.rightTagsList.length; i++) {
                 this.leftTagsList = this.leftTagsList.filter(item => item.id !== this.rightTagsList[i].id)
             }
+            this.selectLeftTagsList = []
             this.selectRightTagsList = []
             this.searchTagList()
         },
@@ -159,6 +179,7 @@ export default {
             }
             console.log(this.rightTagsList)
             this.selectLeftTagsList = []
+            this.selectRightTagsList = []
         },
         searchTagList() {
             let notIds = []
@@ -176,9 +197,17 @@ export default {
             api.searchTagList(param).then((res) => {
                 if (res.data.code === '0') {
                     this.leftTagsList = res.data.data
+                    this.selectLeftTagsList = []
+                    this.selectRightTagsList = []
                 }
             })
            
+        },
+        mainSymptom() {
+
+        },
+        followSymptom() {
+            
         }
 
     }
@@ -198,7 +227,7 @@ export default {
         margin-bottom: 20px;
     }
     .pool {
-        border:1px solid @icssBorder;
+        // border:1px solid @icssBorder;
     
     }
     .search {
@@ -211,6 +240,8 @@ export default {
         padding: 10px 10px;
         height: 300px;
         overflow-y: auto;
+        // width: 80%;
+        border: 1px solid @icssBorder;
     }
     .tagItem {
         line-height: 20px;
@@ -236,7 +267,7 @@ export default {
     }
     }
     .bottomPartRight {
-        width: 60%;
+        width: 40%;
     }
     .active {
         color: #aBcdef;