1

src/components/icss/BloodPressTagGroup.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="symptomTagGroupWrapper clearfix">
+  <div class="symptomTagGroupWrapper clearfix">
     <div class="bottomPartLeft">
       <p class="poolTitle">标签池</p>
       <div class="pool">
@@ -7,48 +7,60 @@
           placeholder="请输入搜索内容"
           v-model="searchVal"
         >
-            <i
-                slot="prefix"
-                class="el-input__icon el-icon-search"
-            ></i>
+          <i
+            slot="prefix"
+            class="el-input__icon el-icon-search"
+          ></i>
         </el-input>
         <ul class="tagList">
-            <li v-for="(item, index) in leftTagsList"
-                class = "tagItem"
-                :key='item.id'
-                :title="'[ '+item.tagName+' ]'"
-                :style="getStyle(item)?styles:null"
-                @click='selectLeftTag(item, index, $event)'
-            >
-                <p class="tagName ellipsis" >{{item.tagName}} </p>
-            </li>
+          <li
+            v-for="(item, index) in leftTagsList"
+            class="tagItem"
+            :key='item.id'
+            :title="'[ '+item.tagName+' ]'"
+            :style="getStyle(item)?styles:null"
+            @click='selectLeftTag(item, index, $event)'
+          >
+            <p class="tagName ellipsis">{{item.tagName}} </p>
+          </li>
         </ul>
       </div>
     </div>
     <div class="bottomPartMid fl">
-        <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
-        <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
+      <p><span
+          class="el-icon-arrow-right"
+          @click="toRightList"
+        ></span></p>
+      <p><span
+          class="el-icon-arrow-left"
+          @click="toLeftList"
+        ></span></p>
     </div>
     <div class="bottomPartRight ">
       <p class="poolTitle">操作界面：</p>
       <ul class="tagList operationPool templateTagList">
-            <li class = "tagItem operationItem"
-                v-for="(item) in rightTagsList2" 
-                :key='item.id'
-                :style="getStyle2(item)?styles:null"
-                @click='selectRightTag(item)'
-            >   
-                <div class="inputBox">
-                    <el-input
-                        v-if="item.type === 'input'"
-                        placeholder=""
-                        v-model="item.text"
-                    >
-                    </el-input>
-                </div>
-                <p v-if="item.tagName"  class="tagName  ellipsis" :title="'[ '+item.tagName+' ]'">{{item.tagName}} </p>
-            </li>
-        </ul>
+        <li
+          class="tagItem operationItem"
+          v-for="(item) in rightTagsList2"
+          :key='item.id'
+          :style="getStyle2(item)?styles:null"
+          @click='selectRightTag(item)'
+        >
+          <div class="inputBox">
+            <el-input
+              v-if="item.type === 'input'"
+              placeholder=""
+              v-model="item.text"
+            >
+            </el-input>
+          </div>
+          <p
+            v-if="item.tagName"
+            class="tagName  ellipsis"
+            :title="'[ '+item.tagName+' ]'"
+          >{{item.tagName}} </p>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -57,307 +69,306 @@ import api from '@api/icss.js';
 import utils from '@api/utils.js';
 
 export default {
-    name: "BloodPressTagGroup",
-    props: {
-        pool: {
-            default: () => [],
-            type: Array
-        },
-        type: {
-            default: '',
-            type: String
-        },
-        sexType: {
-            default: '',
-            type: String
-        },
-        options: {
-            default: () => [],
-            type: Array
-        },
+  name: "BloodPressTagGroup",
+  props: {
+    pool: {
+      default: () => [],
+      type: Array
     },
-    data() {
-        return {
-            leftTagsList: [],
-            selectLeftTagsList: [],
-            rightTagsList: [],
-            rightTagsList2: [],
-            selectRightTagsList: [],
-            searchVal: '',
-            styles:{
-                background:'#eae7e7'
-            },
-        }
+    type: {
+      default: '',
+      type: String
     },
-    mounted() {
-        this.rightTagsList2 = this.options
-        let newArr = []
-        for (let i = 0; i < this.rightTagsList2.length; i++) {
-            if(this.rightTagsList2[i].tagType == 8) {
-                newArr.push({ text: this.rightTagsList2[i].tagName ,type:'input' ,id: i+',,,'})
-            } else {
-                if(i === 0 ) {
-                    newArr.push({ text: '' ,type:'input' ,id: i+',,,'})
-                }
-                newArr.push(this.rightTagsList2[i])
-                if(!this.rightTagsList2[i+1] || this.rightTagsList2[i+1]&&this.rightTagsList2[i+1].tagType != 8) {
-                    newArr.push({ text: '' ,type:'input' ,id: i+',,,,'})
-                }
-            }
+    sexType: {
+      default: '',
+      type: String
+    },
+    options: {
+      default: () => [],
+      type: Array
+    },
+  },
+  data() {
+    return {
+      leftTagsList: [],
+      selectLeftTagsList: [],
+      rightTagsList: [],
+      rightTagsList2: [],
+      selectRightTagsList: [],
+      searchVal: '',
+      styles: {
+        background: '#eae7e7'
+      },
+    }
+  },
+  mounted() {
+    this.rightTagsList2 = this.options
+    let newArr = []
+    for (let i = 0; i < this.rightTagsList2.length; i++) {
+      if (this.rightTagsList2[i].tagType == 8) {
+        newArr.push({ text: this.rightTagsList2[i].tagName, type: 'input', id: i + ',,,' })
+      } else {
+        if (i === 0) {
+          newArr.push({ text: '', type: 'input', id: i + ',,,' })
         }
-        this.rightTagsList2 = newArr
-        this.$emit('changeActionData',this.rightTagsList2, false);
+        newArr.push(this.rightTagsList2[i])
+        if (!this.rightTagsList2[i + 1] || this.rightTagsList2[i + 1] && this.rightTagsList2[i + 1].tagType != 8) {
+          newArr.push({ text: '', type: 'input', id: i + ',,,,' })
+        }
+      }
+    }
+    this.rightTagsList2 = newArr
+    this.$emit('changeActionData', this.rightTagsList2, false);
+    this.searchTagList()
+    // this.leftTagsList = this.pool
+    // console.log('TAGPOOL', this.pool)
+  },
+  watch: {
+    pool(newVal, preVal) {
+      this.leftTagsList = newVal
+    },
+    searchVal(newVal, preVal) {
+      if (newVal.trim() == '') {
+        this.searchTagList()
+      } else if (newVal.trim() != preVal.trim()) {
         this.searchTagList()
-        // this.leftTagsList = this.pool
-        // console.log('TAGPOOL', this.pool)
+      }
     },
-    watch: {
-        pool(newVal, preVal) {
-          this.leftTagsList = newVal
-        },
-        searchVal(newVal, preVal){
-            if(newVal.trim() == ''){
-                this.searchTagList()
-            }else if(newVal.trim() != preVal.trim()){
-                this.searchTagList()
-            }
-        },
-        sexType(newVal, preVal) {
-            if (newVal != preVal) {
-                if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
-                    this.leftTagsList = [];
-                    this.selectLeftTagsList = [];
-                    this.rightTagsList = [];
-                    this.rightTagsList2 = [];
-                    this.selectRightTagsList = [];
-                    this.searchVal = '';
-                     this.searchTagList();
-                }
-            }
-        },
-        
-        
+    sexType(newVal, preVal) {
+      if (newVal != preVal) {
+        if (JSON.stringify(newVal) != JSON.stringify(preVal)) {
+          this.leftTagsList = [];
+          this.selectLeftTagsList = [];
+          this.rightTagsList = [];
+          this.rightTagsList2 = [];
+          this.selectRightTagsList = [];
+          this.searchVal = '';
+          this.searchTagList();
+        }
+      }
     },
-    methods: {
-        selectLeftTag(tag, index, e) {
-           
-            const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
-            if (hasTag) {
-                this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
-            } else {
-                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);
-            }
-            
-        },
-        isHasTag(item, arr) {
-            for ( let i = 0; i <arr.length; i++) {
-                if(arr[i].id === item.id) {
-                    return true;
-                }
-            }
-            return false;
-        },
-        getStyle(item){       //左侧选中状态
-            // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
-            // return utils.filterArr(this.selectLeftTagsList,item,2)
-            return this.isHasTag(item, this.selectLeftTagsList)
-        },
-        getStyle2(item) {
-            // return utils.filterArr(this.selectRightTagsList,item,2)
-            return this.isHasTag(item, this.selectRightTagsList)
-        },
-        toLeftList() {
-            // if(!this.searchVal) {
-            //     this.leftTagsList = 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.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
-                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) {
-                                this.rightTagsList2 = []
-                            } else {
-                                this.rightTagsList2.splice(j, 2)
-                            }
-                        }
-                    }
-                }
-            }
 
-            // this.rightTagsList2 = [];
-            // let textItem = { text: ','  }
-            // for (let i = 0; i < this.rightTagsList.length; i++) {
-            //     if(this.rightTagsList2.length === 0) {
-            //         this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
-            //     }
-            //     this.rightTagsList2.push(this.rightTagsList[i]);
-            //     this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
-            // }
-            // 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()
-            this.$emit('changeActionData',this.rightTagsList2, false);
-        },
-        toRightList() {
-            this.rightTagsList.push(...this.selectLeftTagsList);
-            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))
-                    textItem1.id = this.selectLeftTagsList[i].id + ',,'
-                    this.rightTagsList2.push(textItem1)
-                }
-                this.rightTagsList2.push(this.selectLeftTagsList[i]);
-                let textItem2 = JSON.parse(JSON.stringify(textItem))
-                    textItem2.id = this.selectLeftTagsList[i].id + ','
-                this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
-            }
-            
-            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.$emit('changeActionData',this.rightTagsList2, false);
-        },
-        searchTagList() {
-            let notIds = []
-            for (let i = 0; i < this.rightTagsList2.length; i++) {
-                 if(typeof this.rightTagsList2[i].id === 'number') {
-                    notIds.push(this.rightTagsList2[i].id)
-                }
-                
-            }
-            
-            let param1 = api.getGroupParams(3);            
-            let param2 = {
-                "tagName": this.searchVal,
-                "type": this.type || '',
-                "notIds": notIds,
-                "sexType": this.sexType,
+
+  },
+  methods: {
+    selectLeftTag(tag, index, e) {
+
+      const hasTag = this.isHasTag(tag, this.selectLeftTagsList)
+      if (hasTag) {
+        this.selectLeftTagsList = this.selectLeftTagsList.filter(item => item.id !== tag.id)
+      } else {
+        this.selectLeftTagsList.push(tag);
+      }
+
+    },
+    selectRightTag(tag) {
+      const hasTag = this.isHasTag(tag, this.selectRightTagsList)
+      console.log(tag)
+      if (hasTag) {
+        this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
+      } else {
+        this.selectRightTagsList.push(tag);
+      }
+
+    },
+    isHasTag(item, arr) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i].id === item.id) {
+          return true;
+        }
+      }
+      return false;
+    },
+    getStyle(item) {       //左侧选中状态
+      // console.log('selected',utils.filterArr(this.leftTagsList,item,2))
+      // return utils.filterArr(this.selectLeftTagsList,item,2)
+      return this.isHasTag(item, this.selectLeftTagsList)
+    },
+    getStyle2(item) {
+      // return utils.filterArr(this.selectRightTagsList,item,2)
+      return this.isHasTag(item, this.selectRightTagsList)
+    },
+    toLeftList() {
+      // if(!this.searchVal) {
+      //     this.leftTagsList = 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.selectRightTagsList.length; i++) {//每次往回移时同时删掉下面输入框
+        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) {
+                this.rightTagsList2 = []
+              } else {
+                this.rightTagsList2.splice(j, 2)
+              }
             }
-            let param = Object.assign({},param1,param2)
-            api.searchTagList(param).then((res) => {
-                if (res.data.code === '0') {
-                    this.leftTagsList = res.data.data
-                    this.selectLeftTagsList = []
-                    this.selectRightTagsList = []
-                }
-            })
-           
+          }
+        }
+      }
+
+      // this.rightTagsList2 = [];
+      // let textItem = { text: ','  }
+      // for (let i = 0; i < this.rightTagsList.length; i++) {
+      //     if(this.rightTagsList2.length === 0) {
+      //         this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
+      //     }
+      //     this.rightTagsList2.push(this.rightTagsList[i]);
+      //     this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem)))
+      // }
+      // 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()
+      this.$emit('changeActionData', this.rightTagsList2, false);
+    },
+    toRightList() {
+      this.rightTagsList.push(...this.selectLeftTagsList);
+      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))
+          textItem1.id = this.selectLeftTagsList[i].id + ',,'
+          this.rightTagsList2.push(textItem1)
         }
+        this.rightTagsList2.push(this.selectLeftTagsList[i]);
+        let textItem2 = JSON.parse(JSON.stringify(textItem))
+        textItem2.id = this.selectLeftTagsList[i].id + ','
+        this.rightTagsList2.push(JSON.parse(JSON.stringify(textItem2)))
+      }
+
+      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.$emit('changeActionData', this.rightTagsList2, false);
+    },
+    searchTagList() {
+      let notIds = []
+      for (let i = 0; i < this.rightTagsList2.length; i++) {
+        if (typeof this.rightTagsList2[i].id === 'number') {
+          notIds.push(this.rightTagsList2[i].id)
+        }
+
+      }
+
+      let param1 = api.getGroupParams(3);
+      let param2 = {
+        "tagName": this.searchVal,
+        "type": this.type || '',
+        "notIds": notIds,
+        "sexType": this.sexType,
+      }
+      let param = Object.assign({}, param1, param2)
+      api.searchTagList(param).then((res) => {
+        if (res.data.code === '0') {
+          this.leftTagsList = res.data.data
+          this.selectLeftTagsList = []
+          this.selectRightTagsList = []
+        }
+      })
 
     }
+
+  }
 }
 </script>
 
 <style lang="less" scoped>
-@import '../../less/common.less';
+@import "../../less/common.less";
 .symptomTagGroupWrapper {
-    .bottomPartLeft {
-        width: 30%;
-        box-sizing: border-box;
-        float: left;
-    }
-    .poolTitle {
-        // border-bottom: 1px solid @icssBorder;
-        box-sizing: border-box;
-        margin-bottom: 20px;
-    }
-    .pool {
-        // border:1px solid @icssBorder;
-    
-    }
-    .inputBox {
-        width: 100px;
-    }
-    .search {
-        width: 100%;
-        border-bottom: 1px solid @icssBorder;
-        box-sizing: border-box;
-        height: 30px;
-    }
-    .tagList {
-        height: 300px;
-        overflow-y: auto;
-        border: 1px solid @icssBorder;
-    }
-    .tagItem {
-        line-height: 30px;
-        padding: 0px 10px;
-
-    }
-    .operationPool {
-        position: relative;
-        width: 85%;
-        padding: 10px;
-    }
-    .tagName {
-        line-height: 30px;
-    }
-    .tagName:before {
-        content: '['
-    }
-    .tagName::after {
-        content: ']'
-    }
-    .bottomPartMid {
-        width: 8%;
-        margin-top: 60px;
-        p {
-        width: 100%;
-        text-align: center;
-        span {
-            cursor: pointer;
-            display: inline-block;
-            width: 30px;
-            height: 40px;
-            line-height: 40px;
-            margin: 0 auto;
-            border: 1px solid @icssBorder;
-            margin-bottom: 15px;
-            font-size: 18px;
-        }
-        }
-    }
-    .bottomPartRight {
-        float: left;
-        width: 60%;
-    }
-    Button {
-        margin-top: 20px;
-    }
-    .operationItem {
+  .bottomPartLeft {
+    width: 30%;
+    box-sizing: border-box;
+    float: left;
+  }
+  .poolTitle {
+    // border-bottom: 1px solid @icssBorder;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+  }
+  .pool {
+    // border:1px solid @icssBorder;
+  }
+  .inputBox {
+    width: 100px;
+  }
+  .search {
+    width: 100%;
+    border-bottom: 1px solid @icssBorder;
+    box-sizing: border-box;
+    height: 30px;
+  }
+  .tagList {
+    height: 300px;
+    overflow-y: auto;
+    border: 1px solid @icssBorder;
+  }
+  .tagItem {
+    line-height: 30px;
+    padding: 0px 10px;
+  }
+  .operationPool {
+    position: relative;
+    width: 85%;
+    padding: 10px;
+  }
+  .tagName {
+    line-height: 30px;
+  }
+  .tagName:before {
+    content: "[";
+  }
+  .tagName::after {
+    content: "]";
+  }
+  .bottomPartMid {
+    width: 8%;
+    margin-top: 60px;
+    p {
+      width: 100%;
+      text-align: center;
+      span {
+        cursor: pointer;
         display: inline-block;
+        width: 30px;
+        height: 40px;
         line-height: 40px;
-        margin: 0 5px 10px 0;
-        float: left;
-        text-align: center;
-        p {
-          padding: 5px 0;
-        }
-    }
-    .templateTagList {
-      height: 318px;
+        margin: 0 auto;
+        border: 1px solid @icssBorder;
+        margin-bottom: 15px;
+        font-size: 18px;
+      }
     }
-    .active {
-        color: #aBcdef;
+  }
+  .bottomPartRight {
+    float: left;
+    width: 60%;
+  }
+  button {
+    margin-top: 20px;
+  }
+  .operationItem {
+    display: inline-block;
+    line-height: 40px;
+    margin: 0 5px 10px 0;
+    float: left;
+    text-align: center;
+    p {
+      padding: 5px 0;
     }
+  }
+  .templateTagList {
+    height: 318px;
+  }
+  .active {
+    color: #abcdef;
+  }
 }
 </style>

src/components/icss/SymptomTagGroup.vue

@@ -62,6 +62,10 @@
             <el-button type="primary" @click="followSymptom">跟伴随症状</el-button>
         </div>
     </div>
+    <!-- <div class="bottomPartMid fl">
+        <p><span class="el-icon-arrow-right" @click="toRightList"></span></p>
+        <p><span class="el-icon-arrow-left" @click="toLeftList"></span></p>
+    </div> -->
   </div>
 </template>
 <script>
@@ -170,6 +174,16 @@ export default {
             }
         },
         selectRightTag(tag) {
+            // if(tag.type == 'input'){
+            //   return;
+            // }
+            // let tmpArr = [];
+            // tmpArr.push(tag);
+            // if (this.selectRightTagsList.length > 0 && tag.id == this.selectRightTagsList[0].id) {
+            //   this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)
+            // }else{
+            //   this.selectRightTagsList = tmpArr;
+            // }
             const hasTag = this.isHasTag(tag, this.selectRightTagsList)
             if (hasTag) {
                 this.selectRightTagsList = this.selectRightTagsList.filter(item => item.id !== tag.id)