修改症状和血压标签组样式

src/components/icss/BloodPressTagGroup.vue

@@ -31,7 +31,7 @@
     <div class="bottomPartRight ">
       <p class="poolTitle">操作池</p>
       <ul class="tagList operationPool">
-            <li class = "tagItem"
+            <li class = "tagItem operationItem"
                 v-for="(item) in rightTagsList2" 
                 :key='item.id'
                 :style="getStyle2(item)?styles:null"
@@ -39,7 +39,7 @@
             >   
                 <div>
                     <el-input
-                        v-if="item.text"
+                        v-if="item.type === 'input'"
                         placeholder=""
                         v-model="item.text"
                     >
@@ -152,7 +152,7 @@ export default {
                 this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
             }
             for (let i = 0; i < this.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
-                if (this.selectRightTagsList[i].id) {
+                if (this.selectRightTagsList[i].type !== 'input') {
                     for (let j = 0; j < this.rightTagsList2.length; j++) {
                         if(this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
                                 this.rightTagsList2.splice(j-1, 3)
@@ -181,8 +181,8 @@ export default {
         },
         toRightList() {
             this.rightTagsList.push(...this.selectLeftTagsList);
-            let textItem = { text: ','  }
-            for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框，默认为逗号
+            let textItem = { text: '' ,type:'input' }
+            for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个前后加入输入框
                 let textItem1 = JSON.parse(JSON.stringify(textItem))
                 textItem1.id = this.selectLeftTagsList[i].id + ',,'
                 this.rightTagsList2.push(textItem1)
@@ -265,7 +265,7 @@ export default {
     }
     .operationPool {
         position: relative;
-        width: 60%;
+        width: 100%;
     }
     .tagName:before {
         content: '['
@@ -289,15 +289,14 @@ export default {
     }
     .bottomPartRight {
         float: left;
-        width: 40%;
-    }
-    .buttonBox {
-        width: 10%;
-        float: left;
+        width: 60%;
     }
-    .followButton {
+    Button {
         margin-top: 20px;
     }
+    .operationItem {
+        float: left;
+    }
     .active {
         color: #aBcdef;
     }

src/components/icss/SymptomTagGroup.vue

@@ -12,7 +12,7 @@
                 class="el-input__icon el-icon-search"
             ></i>
         </el-input>
-        <ul class="tagList">
+        <ul class="tagList tagPool">
             <li v-for="(item, index) in leftTagsList"
                 class = "tagItem"
                 :key='item.id'
@@ -39,15 +39,17 @@
             >   
                 <div>
                     <el-input
-                        v-if="item.text"
+                        v-if="item.type === 'input'"
                         placeholder=""
                         v-model="item.text"
                     >
                     </el-input>
                 </div>
                 <p v-if="item.tagName" class="tagName">{{item.tagName}} </p>
-                <p v-if="item.symptomType === 1" class="tagAttribute">跟主症状</p>
-                <p v-if="item.symptomType === 2" class="tagAttribute">跟伴随症状</p>
+                <div class="attributeBox">
+                    <p v-if="item.symptomType === 1" class="tagAttribute">跟主症状</p>
+                    <p v-if="item.symptomType === 2" class="tagAttribute">跟伴随症状</p>
+                </div>
             </li>
         </ul>
     </div>
@@ -162,7 +164,7 @@ export default {
                 this.rightTagsList = this.rightTagsList.filter(item => item.id !== this.selectRightTagsList[i].id)
             }
             for (let i = 0; i < this.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
-                if (this.selectRightTagsList[i].id) {
+                if (this.selectRightTagsList[i].type !== 'input') {
                     for (let j = 0; j < this.rightTagsList2.length; j++) {
                         if(this.selectRightTagsList[i].id === this.rightTagsList2[j].id) {
                             if(this.rightTagsList2.length === 3) {
@@ -195,7 +197,7 @@ export default {
         },
         toRightList() {
             this.rightTagsList.push(...this.selectLeftTagsList);
-            let textItem = { text: ','  }
+            let textItem = { text: ',' ,type:'input' }
             for (let i = 0; i < this.selectLeftTagsList.length; i++) { //选中标签每个加入输入框，默认为逗号
                 if(this.rightTagsList2.length === 0) {
                     let textItem1 = JSON.parse(JSON.stringify(textItem))
@@ -235,6 +237,7 @@ export default {
             }
             api.searchTagList(param).then((res) => {
                 if (res.data.code === '0') {
+                    console.log('data', res)
                     this.leftTagsList = res.data.data
                     this.selectLeftTagsList = []
                     this.selectRightTagsList = []
@@ -296,16 +299,26 @@ export default {
     }
     .tagList {
         padding: 10px 10px;
+        border: 1px solid @icssBorder;
+    }
+    .tagPool {
         height: 300px;
         overflow-y: auto;
-        border: 1px solid @icssBorder;
+
+    }
+    .attributeBox {
+        position: absolute;
+        right: -100px;
+        top: 10px;
     }
     .tagItem {
-        line-height: 20px;
+        position: relative;
+        line-height: 40px;
     }
     .operationPool {
         position: relative;
         width: 60%;
+        min-height: 300px;
     }
     .tagName:before {
         content: '['
@@ -338,6 +351,11 @@ export default {
     .followButton {
         margin-top: 20px;
     }
+    .tagAttribute {
+       border: 1px solid @icssBorder;
+       height: 20px;
+       line-height: 20px;
+    }
     .active {
         color: #aBcdef;
     }