搜索药品按需显示分类

src/components/basicKnow/SearchList.vue

@@ -1,65 +1,82 @@
 <template>
-  <div class="conceptSearch" :style="{'top':top?top:'200px'}" ref="conceptSearch">
-    <h4  class="conceptTitle">{{title||'术语（概念ID）搜索'}}</h4>
-    <img class="closeSearch" src="../../images/close-icon.png" @click="closeSearch" alt="">
+  <div
+    class="conceptSearch"
+    :style="{ top: top ? top : '200px' }"
+    ref="conceptSearch"
+  >
+    <h4 class="conceptTitle">{{ title || "术语（概念ID）搜索" }}</h4>
+    <img
+      class="closeSearch"
+      src="../../images/close-icon.png"
+      @click="closeSearch"
+      alt=""
+    />
     <p class="searchWrap">
-      <img class="search" src="../../images/search.png" alt="搜索">
-      <input v-model.trim="conceptText" @input="searchConcept" type="text" ref="conceptInput" class="searchText" :placeholder="placeTxt||'请输入关键词搜索'">
+      <img class="search" src="../../images/search.png" alt="搜索" />
+      <input
+        v-model.trim="conceptText"
+        @input="searchConcept"
+        type="text"
+        ref="conceptInput"
+        class="searchText"
+        :placeholder="placeTxt || '请输入关键词搜索'"
+      />
     </p>
     <ul class="conceptList" ref="conceptList">
-      <li 
-        v-for="item in conceptList" 
+      <li
+        v-for="item in conceptList"
         class="conceptItem ellipsis"
         :title="item.conceptName"
         @click="selectConcept(item)"
-        :key="item.conceptId">
-        {{item.conceptName}}&nbsp;({{item.drugC}})
+        :key="item.conceptId"
+      >
+        {{ item.conceptName }}&nbsp;<span v-if="item.libType === 101">({{ item.drugC }})</span>
       </li>
-      <li class="noresult" v-if="conceptList.length==0">暂无结果~</li>
+      <li class="noresult" v-if="conceptList.length == 0">暂无结果~</li>
     </ul>
   </div>
 </template>
 <script>
-import api from '@api/knowledgeTree.js';
+import api from "@api/knowledgeTree.js";
 export default {
-  props:['conceptList','addLevel','top','title','placeTxt'],
-  data(){
+  props: ["conceptList", "addLevel", "top", "title", "placeTxt"],
+  data() {
     return {
-      conceptText: '',
+      conceptText: "",
       list: [], //概念列表
-      timer:null
-    }
+      timer: null,
+    };
   },
-  watch:{
-    addLevel:{
+  watch: {
+    addLevel: {
       handler(newName, oldName) {
-        this.conceptText = ''
-        this.list = []
+        this.conceptText = "";
+        this.list = [];
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
-  destroyed(){
-    this.$emit('searchConcept','')
+  destroyed() {
+    this.$emit("searchConcept", "");
   },
-  methods:{
+  methods: {
     closeSearch() {
-      this.$emit('closeSearch')
+      this.$emit("closeSearch");
     },
     selectConcept(item) {
-      this.$emit('selectConcept',{item,txt:this.conceptText})
+      this.$emit("selectConcept", { item, txt: this.conceptText });
       // this.$emit('closeSearch')
     },
     searchConcept() {
-      if(this.timer) {
-        clearTimeout(this.timer)
+      if (this.timer) {
+        clearTimeout(this.timer);
       }
-      this.timer = setTimeout(()=>{
-        this.$emit('searchConcept',this.conceptText)
-      },300)
+      this.timer = setTimeout(() => {
+        this.$emit("searchConcept", this.conceptText);
+      }, 300);
     },
-  }
-}
+  },
+};
 </script>
 <style lang="less" scoped>
 .conceptSearch {
@@ -69,7 +86,7 @@ export default {
   bottom: 10px;
   width: 300px;
   background: #fff;
-  border: 1px solid #C9C9C9;
+  border: 1px solid #c9c9c9;
   text-align: center;
   z-index: 2;
   padding: 30px;
@@ -83,14 +100,14 @@ export default {
     padding: 0 35px 0 15px;
     width: 100%;
     height: 34px;
-    border: 1px solid #C9C9C9;
+    border: 1px solid #c9c9c9;
     box-sizing: border-box;
   }
   .conceptList {
     min-height: 200px;
-    max-height:300px;
+    max-height: 300px;
     margin: -2px auto 0;
-    border: 1px solid #E1DFDF;
+    border: 1px solid #e1dfdf;
     overflow: hidden;
     overflow-y: auto;
   }
@@ -115,7 +132,7 @@ export default {
     .search {
       position: absolute;
       right: 7px;
-      top:8px;
+      top: 8px;
     }
   }
 }