常用科室症状上下排序

src/components/icss/AddCommonSymptom.vue

@@ -53,16 +53,20 @@
                 <p class="symptomPoolTitle">常见症状：</p>
                 <ul class="tagList operationPool">
                         <li class = "tagItem"
-                            v-for="(item) in rightTagsList" 
+                            v-for="(item,index) in rightTagsList" 
                             :key='item.id'
-                            :style="getStyle2(item)?styles:null"
-                            @click='selectRightTag(item)'
+                            :style="index === selectRightTagIndex?styles:null"
+                            @click='selectRightTag(index)'
                         >   
                             <p v-if="item.tagName" class="tagName  ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
                         </li>
                     </ul>
 
             </div>
+            <div class="bottomPartMid fl">
+                <p><span class="el-icon-arrow-up" @click="toUp"></span></p>
+                <p><span class="el-icon-arrow-down" @click="toDown"></span></p>
+            </div>
             
         </div>
         <div class="btn">
@@ -94,7 +98,7 @@
             leftTagsList:[],
             rightTagsList:[],
             selectLeftTagsList: [],
-            selectRightTagsList: [],
+            selectRightTagIndex: -1,
             styles:{
                 background:'#eae7e7'
             },
@@ -149,13 +153,8 @@
                 this.selectLeftTagsList.push(tag);
             }
         },
-        selectRightTag(tag) {
-            const hasTag = this.isHasTag(tag, this.selectRightTagsList)
-            if (hasTag) {
-                this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
-            } else {
-                this.selectRightTagsList.push(tag);
-            }
+        selectRightTag(index) {
+            this.selectRightTagIndex = this.selectRightTagIndex === index ? -1 : index
         },
         toRightList(){
             this.rightTagsList.push(...this.selectLeftTagsList);
@@ -172,6 +171,26 @@
             this.getSymptomList()
 
         },
+        toUp(){
+            if(this.selectRightTagIndex === 0 || this.selectRightTagIndex === -1) {
+                return
+            }
+            const tempItem = this.rightTagsList[this.selectRightTagIndex]
+            this.rightTagsList.splice(this.selectRightTagIndex, 1)
+            this.rightTagsList.splice(this.selectRightTagIndex-1, 0,tempItem)
+            this.selectRightTagIndex = -1
+        },
+        toDown(){
+             if(this.selectRightTagIndex === this.rightTagsList.length-1 || this.selectRightTagIndex === -1) {
+                return
+            }
+            const tempItem = this.rightTagsList[this.selectRightTagIndex]
+            this.rightTagsList.splice(this.selectRightTagIndex, 1)
+            this.rightTagsList.splice(this.selectRightTagIndex+1, 0,tempItem)
+            this.selectRightTagIndex = -1
+
+        },
+
         isHasTag(item, arr) {
             for ( let i = 0; i <arr.length; i++) {
                 if(arr[i].id === item.id) {
@@ -298,12 +317,6 @@
             cursor: pointer;
             padding: 0 10px;
         }
-        .operationPool {
-            position: relative;
-            width: 60%;
-            min-height: 300px;
-            padding: 10px 0;
-        }
         .tagName:before {
             content: '['
         }
@@ -330,11 +343,13 @@
             }
         }
         .bottomPartRight {
-            width: 50%;
+            width: 32%;
         }
         .operationPool {
-            width: 60%;
+            position: relative;
+            width: 100%;
             height: 340px;
+            padding: 10px 0;
         }
         .btn {
             position: relative;