preliminary/src/components/Search.vue

<template>
    <portal to="notification-search">
      <div class="searchWrap">
        <div class="searchTop">
          <div class="iptWrap">
            <img
              class="searchImg"
              src="../images/search.png"
              alt=""
            >
            <input
              type="text"
              autofocus
              placeholder="请搜索"
              v-model="searchVal"
            >
          </div>
          <span @click="search">取消</span>
        </div>
        <div class="searchList">
          <!--<p
            class="waring"
            v-if="!searchVal&&!hasMore&&searchLis.length==0"
          >请输入搜索内容</p>-->
          <div
            class="waring"
            v-if="hasMore&&searchVal"
          >
            <img src="../images/empty.png" alt=""/>
            <p>暂无搜索结果</p>
          </div>
          <ul>
            <li
              v-for="(item,idx) in searchLis"
              :key="item.conceptId+idx"
              @click="showDetil(item)"
              :style="{'borderBottom':(idx==searchLis.length-1)?'0':'1px solid #E8E8E8'}"
            ><img
                class="searchImgLis"
                src="../images/search.png"
                alt=""
              >{{item.description||item.name}}{{(item.tagName&&(item.description||item.name != item.tagName))?' ('+item.tagName+')':''}}</li>
          </ul>
        </div>
      </div>
    </portal>
</template>
<script>
import api from '@utils/api.js';
import {mapState} from 'vuex';

export default {
  data() {
    return {
      searchVal: '',
      searchLis: [],
      tmpItem:{},
      hasMore:false
    }
  },
  computed:{
    ...mapState({
      //chooseSymp: state => state.symptom.choose,//已选症状
      pathInfo: state => state.pathInfo
    }),
  },
  watch:{
    searchVal(curVal, oldVal) {
      if (curVal.trim() == "") {
        this.searchVal = "";
        this.searchLis = [];
        this.hasMore = false
        return;
      }
      if (curVal != "" && curVal != oldVal) {
        this.searchList()
      }
    }
  },
  methods: {
    showDetil(item) {
      /*let flg = false;
      if(JSON.stringify(this.tmpItem)==JSON.stringify(item)){//eg:重复点击胸痛bug
        flg = true
      }
      this.tmpItem = item

      if(this.chooseSymp.length == 0){
        item.idx = 1
      }*/
      let timer = setTimeout(() => {
        this.$emit('showDetil',item);
        let obj = {
          "labelName": item.tagName||item.name,//标签名称
          "operationNum": 1,//次数
          "operationType": 2,//1常见2搜索
        };
        this.$store.commit('setText', { type: 1, text: '患者出现'+item.name,textP: '患者出现'+(item.description||item.name), pId: item.questionId,idx:'' });
        this.$store.commit('addBuriedSome', obj);
        clearTimeout(timer)
      }, 250);
      // this.$emit('search', false)
    },
    search() {
      this.$emit('search', false)
    },
    searchList() {
      let tmpArr = []/*, chooseSymp = this.chooseSymp*/;
      /*for (let i = 0; i < chooseSymp.length; i++) {
        if(chooseSymp[i].conceptId){
          tmpArr.push(chooseSymp[i].conceptId)
        }
      }*/
      const param = {
        "age": this.pathInfo.patientAge,
        "inputIds": [],
        "inputStr": this.searchVal,
        "sexType": this.pathInfo.sexType
      }
      api.getTagInfos(param).then((res) => {
        const result = res.data;
        if (result.code == 0) {
          this.searchLis = result.data
          if(result.data.length>0){
            this.hasMore = false
          }else{
            this.hasMore = true
          }
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.searchWrap {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 102;
  font-size: .3rem;
  overflow: hidden;
}
.searchTop {
  padding: 0.4rem 0.4rem 0.15rem;
  padding-right: 1.2rem;
  box-sizing: border-box;
  position: absolute;
  width: 100%;
  top: 0;
  z-index: 999;
  span {
    position: absolute;
    right: 0.32rem;
    top: 0.54rem;
    font-size: 0.24rem;
    color: #666666;
  }
}
.iptWrap {
  height: 0.68rem;
  border-radius: 0.37rem;
  background-color: #F5F5F5;
  overflow: hidden;
  padding: 0.16rem 0.3rem 0.16rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  .searchImg {
    width: 0.44rem;
    height: 0.44rem;
    position: absolute;
    left: 0.2rem;
    top: 0.14rem;
  }
  input {
    width: 100%;
    height: 0.42rem;
    font-size: 0.24rem;
    line-height: 0.42rem;
    background: #F5F5F5;
  }
}
.searchList {
  overflow: scroll;
  position: absolute;
  -webkit-overflow-scrolling: touch;
  top: 0;
  left: 0;
  padding-top: 1.04rem;
  height: 100%;
  width: 100%;
  background-color: #fff;
  .waring {
    width: 100%;
    text-align: center;
    margin-top: 1.6rem;
    p{
      color: #aaa;
      margin-top: .8rem;
      font-size: .24rem;
    }

  }
  ul {
    padding: 0.2rem 0.2rem 0;
    box-sizing: border-box;
    background-color: #fff;
  }
  li {
    height: 1rem;
    line-height: 1rem;
    padding: 0 0.4rem;
    border-bottom: 1px solid #E8E8E8;
    box-sizing: border-box;
    .searchImgLis {
      width: 0.44rem;
      height: 0.44rem;
      float: left;
      margin-top: 0.26rem;
      margin-right: 0.15rem;
    }
  }
}
</style>