irc_web/src/components/TrialsSelect/index.vue

<template>
  <el-popover
    v-model="visible"
    class="trials-select"
    placement="top"
    trigger="manual"
    width="300"
  >
    <div class="trials-select-box">
      <div style="position: absolute;top: 0;left: 0;width: 300px;background: #fff;padding: 15px 15px 0">
        <el-input v-model="inputValue" prefix-icon="el-icon-search" clearable @input="inputChange" />
        <div style="display:flex;justify-content: space-between;align-items: center;line-height: 36px;padding: 0 5px">
          <div style="display:inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 80px;">{{$t('trials:trials-list:table:researchNumber')}}</div>
          <div style="display:inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 160px;">{{ $t('trials:trials-list:table:experimentName') }}</div>
        </div>
      </div>
      <el-tooltip
        placement="left"
        class="trials-select"
        width="300"
        trigger="hover"
        :open-delay="500"
        v-for="(item, index) of resultFilter"
        :key="item.Id"
      >
        <div slot="content">
          {{$t('trials:trials-list:table:researchNumber')}}:  {{ item.ResearchProgramNo }}
          <br>
          {{ $t('trials:trials-list:table:experimentName') }}: {{ item.ExperimentName }}
        </div>
        <div class="options_item" :class="{ selected: item.Id === tabTrialsId , selectedIndex: selectIndex === index}" @click="selectTrials(item.Id)">
          <div style="display:inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 80px;">
            {{ item.ResearchProgramNo }}
          </div>
          <div style="display:inline-block;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 160px;">
            {{ item.ExperimentName }}
          </div>
        </div>
      </el-tooltip>
    </div>
    <div slot="reference" class="trials-select-reference" @click="visible=!visible">
      <el-tooltip content="Top center" placement="top">
        <div slot="content">
          {{$t('trials:trials-list:table:researchNumber')}}: {{ options.find(v => { return v.Id === tabTrialsId}) ? options.find(v => { return v.Id === tabTrialsId}).ResearchProgramNo : '' }}
          <br>
          {{ $t('trials:trials-list:table:experimentName') }}: {{ options.find(v => { return v.Id === tabTrialsId}) ? options.find(v => { return v.Id === tabTrialsId}).ExperimentName : '' }}
        </div>
        <button style="background: #fff;border: none;outline: none">{{ options.find(v => { return v.Id === tabTrialsId}) ? options.find(v => { return v.Id === tabTrialsId}).ResearchProgramNo : '' }}</button>
      </el-tooltip>
      <span class="el-icon-arrow-down" :class="{ 'selected': visible }" />
    </div>
  </el-popover>
</template>

<script>
import { getTrialSelect } from '@/api/trials'
export default {
  name: 'TrialsTab',
  props: {
  },
  data() {
    return {
      visible: false,
      trialsRouter: this.$store.getters.routes.find(v => { return v.name === 'Trials' }),
      trialsTab: null,
      trialsTabChild: null,
      tabTrialsId: null,
      options: [],
      resultFilter: [],
      inputValue: null,
      selectIndex: null
    }
  },
  watch: {
    visible(v) {
      if (v) {
        setTimeout(() => {
          document.querySelector('.trials-select-box').scrollTo(0, document.querySelector('.options_item.selectedIndex').offsetTop - 200)
        }, 100)
      }
    }
  },
  mounted() {
    this.getTrialList()
    document.onkeydown =  (e) => {
      if (!this.visible) return
      //事件对象兼容
      let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
      //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
      //左
      if (e1 && e1.keyCode == 40) {
        // 按下箭头
        if (this.resultFilter.length - 1 === this.selectIndex) return
        this.selectIndex++
      } else if (e1 && e1.keyCode == 38) {
        // 按上箭头
        if (this.selectIndex === 0) return
        this.selectIndex--
      } else if (e1 && e1.keyCode == 13) {
        this.selectTrials(this.resultFilter[this.selectIndex].Id)
      }
      document.querySelector('.trials-select-box').scrollTo(0, document.querySelector('.options_item.selectedIndex').offsetTop - 200)
    }
    window.addEventListener('click', (event) => {
      var box1 = document.querySelector('.trials-select-box')
      var box2 = document.querySelector('.trials-select-reference')
      const path = event.path || (event.composedPath && event.composedPath())
      if (path.includes(box1) || path.includes(box2)) {
        return
      } else {
        this.visible = false
      }
    })
  },
  methods: {
    selectTrials(v) {
      var trial = this.options.find(o => {
        return o.Id === v
      })
      this.tabTrialsId = v
      this.visible = false
      this.$router.push({ path: `/trials/trials-panel?trialId=${trial.Id}&trialCode=${trial.TrialCode}&researchProgramNo=${trial.ResearchProgramNo}` })
    },
    inputChange(v) {
      this.resultFilter = this.options.filter((o) => {
        var reg = new RegExp(v, 'ig')
        return reg.test(o.ResearchProgramNo) || reg.test(o.Indication) || reg.test(o.ExperimentName)
      })
    },
    getTrialList() {
      getTrialSelect()
        .then(res => {
          this.options = res.Result
          this.resultFilter = this.options.filter((num) => {
            return true
          })
          this.tabTrialsId = this.$route.query.trialId
          this.resultFilter.forEach((v, i) => {
            if (this.tabTrialsId === v.Id) {
              this.selectIndex = i
            }
          })
        })
        .catch(() => {
        })
    }
  }
}
</script>
<style lang="scss">
.trials-select{
  cursor: pointer;
}
.trials-select-box{
  width: 100%;height: 400px;overflow-y: auto;padding-top: 76px;
}
.trials-select-box::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.trials-select-reference{
  line-height: 40px;
  height: 40px;
  .el-icon-arrow-down{
    transition: all .3s;
  }
  .el-icon-arrow-down.selected{
    transform: rotate(180deg);
  }
}
.options_item{
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  line-height: 30px;
  padding: 0 5px;
  transition: all 0.3s;
  &:hover{
    background: #eee;
  }
}
.options_item.selected{
  color:#428bca;
  background: #eee;
}
.options_item.selectedIndex {
  background: #eee;
}
</style>