化验大小项和公表项优化（搜索不直接操作dom）

src/components/icss/AddChemicalAndCommonMapping.vue

@@ -20,7 +20,11 @@
                     <label  class="itemLabelName">选择公表项：</label>
                     <input class="searchInput"  @focus="focuInput" type="text" v-model = "uniqueText"> 
                     <span class="searchName" @click="searchMealItem(3)">搜索</span>
-                    <ul class="itemList uniqueNameList" ref="uniqueNameList">
+                    <ul 
+                        v-if="showUniqueNameList&&uniqueNameList.length >0"
+                        class="itemList uniqueNameList" 
+                        ref="uniqueNameList"
+                    >
                       <li 
                         v-for="item in uniqueNameList" 
                         class="mealNameItem ellipsis"
@@ -47,7 +51,11 @@
                     <label class="itemLabelName">选择化验大项：</label> 
                     <input class="searchInput" @focus="focuInput" type="text" v-model = "mealText"> 
                     <span class="searchName" @click="searchMealItem(1)">搜索</span>
-                    <ul class="itemList mealNameList" ref="mealNameList">
+                    <ul 
+                        v-if="showMealNameList&&mealNameList.length >0"
+                        class="itemList mealNameList" 
+                        ref="mealNameList"
+                    >
                       <li 
                         v-for="item in mealNameList" 
                         class="mealNameItem ellipsis"
@@ -67,7 +75,11 @@
                     <label  class="itemLabelName">选择化验小项：</label>
                     <input class="searchInput"  @focus="focuInput" type="text" v-model = "itemText"> 
                     <span class="searchName" @click="searchMealItem(2)">搜索</span>
-                    <ul class="itemList itemNameList" ref="itemNameList">
+                    <ul 
+                        v-if="showItemNameList&&itemNameList.length >0"
+                        class="itemList itemNameList" 
+                        ref="itemNameList"
+                    >
                       <li 
                         v-for="item in itemNameList" 
                         class="mealNameItem ellipsis"
@@ -109,6 +121,9 @@ export default {
             mealNameList:[],
             itemNameList: [],
             uniqueNameList:[],
+            showMealNameList: false,
+            showItemNameList: false,
+            showUniqueNameList: false,
             form: {
                 mealName: '', //大项名称
                 itemName: '',   //小项名称
@@ -133,9 +148,7 @@ export default {
             this.mealNameList = [];
             this.itemNameList =[];
             this.uniqueNameList = [];
-            this.$refs['mealNameList'].style.display='none';
-            this.$refs['itemNameList'].style.display='none';
-            this.$refs['uniqueNameList'].style.display='none';
+            this.showSearchList()
         },
         searchMealItem(type) {
             if( type == '1' || type == '2') {
@@ -160,15 +173,11 @@ export default {
                 if (res.data.code === '0') {
                      if (type == 1) {
                         this.mealNameList = res.data.data
-                        if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='block' }
-                        if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='none' }
-                        if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='none'}
+                        this.showSearchList('showMealNameList')
                     } else if (type == 2) {
                        
                         this.itemNameList = res.data.data
-                        if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='block' }
-                        if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='none'}
-                        if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='none' }
+                        this.showSearchList('showItemNameList')
                     }
                 }
             })
@@ -181,26 +190,34 @@ export default {
             api.getAllLisConcept(param).then((res) => {
                 if(res.data.code === '0') {
                     this.uniqueNameList = res.data.data
-                    if(this.uniqueNameList.length > 0){this.$refs['uniqueNameList'].style.display='block'}
-                    if(this.itemNameList.length > 0) { this.$refs['itemNameList'].style.display='none' }
-                    if(this.mealNameList.length > 0){ this.$refs['mealNameList'].style.display='none' }
+                    this.showSearchList('showUniqueNameList')
                 }
             })
         },
         focuInput() {
-            this.$refs['mealNameList'].style.display='none'
-            this.$refs['itemNameList'].style.display='none'
-            this.$refs['uniqueNameList'].style.display='none'
+            this.showSearchList()
+        },
+        showSearchList(type) {
+            this.showMealNameList = false
+            this.showItemNameList = false
+            this.showUniqueNameList = false
+            if(type === 'showMealNameList') {
+                this.showMealNameList = true
+            } else if (type === 'showItemNameList') {
+                this.showItemNameList = true
+            } else if (type === 'showUniqueNameList'){
+                this.showUniqueNameList = true
+            }
         },
         selectMealName(item) {
             this.form.mealName = item.name
-            this.$refs['mealNameList'].style.display='none'
+            // this.$refs['mealNameList'].style.display='none'
             this.mealText = ''
             this.mealNameList = []
         },
         selectItemName(item) {
              this.form.itemName = item.name
-            this.$refs['itemNameList'].style.display='none'
+            // this.$refs['itemNameList'].style.display='none'
             this.itemText = ''
             this.itemNameList = []
         },
@@ -209,7 +226,7 @@ export default {
             let nameArr = item.conceptName.split('--');
             this.form.mealName = nameArr[0]
             this.form.itemName = nameArr[1]
-            this.$refs['uniqueNameList'].style.display='none'
+            // this.$refs['uniqueNameList'].style.display='none'
             this.uniqueText = ''
             this.uniqueNameList = []
         },
@@ -381,7 +398,6 @@ export default {
     }
     .itemList {
         position: absolute;
-        display: none;
         background: #fff;
         width: 162px;
         max-height: 150px;