web_dist/src/components/search/Index.vue

<template>
  <div class="component-box-wrapper__half-transparent">
    <div class="component-content-box__dialog-like box-width">
      <div class="component-header-box">
        <div class="component-header__title">{{ title }}</div>
        <div class="component-header__close-button">
          <el-button plain icon="Close" circle title="关闭" @click="close"></el-button>
        </div>
      </div>
      <div>
        <span>检索依据：</span>
        <el-select v-model="params.method" style="width: 70px">
          <el-option v-for="item in allMethods" :key="item.code" :label="item.name" :value="item.code"></el-option> </el-select
        >&nbsp;
        <el-input ref="inputRef" v-model="params.content" style="width: 240px" clearable placeholder="请输入检索内容"></el-input>
      </div>
      <div class="data-box">
        <el-table ref="resultRef" :data="data.list" stripe height="360px" highlight-current-row @row-click="clickItem">
          <el-table-column prop="code" label="编码"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column v-if="showEmpDept" prop="deptName" label="科室"></el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-size="params.pageSize"
          layout="total, pager, next"
          :total="data.totalSize"
        ></el-pagination>
      </div>
    </div>

    <el-dialog title="请确认诊断类别" v-model="showDiagType" width="360px">
      <div style="margin-top: 8px">
        诊断编码：
        <el-input v-model="diagItem.icdCode" disabled style="width: 220px"></el-input>
      </div>
      <div style="margin-top: 8px">
        诊断名称：
        <el-input v-model="diagItem.icdText" disabled style="width: 220px"></el-input>
      </div>
      <div style="margin-top: 8px">
        诊断类别：
        <el-select v-model="diagItem.diagType" style="width: 220px">
          <el-option v-for="item in diagTypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
        </el-select>
      </div>
      <div style="margin-top: 8px; width: 100%; text-align: right; padding: 8px 20px 8px 0">
        <el-button type="primary" icon="Check" @click="confirmDiaginfo">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue'
import { searchFromServer } from '@/api/inpatient/dictionary'
import { diagTypes } from '@/data/index'
import Sleep from '@/utils/sleep'

export default {
  props: {
    title: {
      type: String,
      required: true,
    },
    target: {
      type: String,
      required: true,
    },
    medType: {
      type: String,
      default: '',
    },
    showEmpDept: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'clickItem'],
  setup(props, ctx) {
    const inputRef = ref(null)
    const resultRef = ref(null)
    const allMethods = [
      { code: 'alpha', name: '拼音' },
      { code: 'code', name: '编码' },
      { code: 'name', name: '名称' },
    ]
    const params = reactive({
      method: 'alpha',
      target: props.target,
      medType: props.medType,
      page: 1,
      pageSize: 10,
      content: '',
    })
    const data = reactive({
      list: [],
      totalSize: 0,
    })

    const showDiagType = ref(false)
    const diagItem = reactive({
      icdCode: null,
      icdText: null,
      diagType: null,
    })

    const executeSearch = () => {
      if (params.content.trim().length > 1) {
        searchFromServer(params).then((res) => {
          data.list = res.list
          data.totalSize = res.totalSize
          currentIndex.value = currentIndex.value > data.list.length - 1 ? data.list.length - 1 : currentIndex.value
          resultRef.value.setCurrentRow(data.list[currentIndex.value])
        })
      } else {
        data.list = []
        data.totalSize = 0
      }
    }

    const currentIndex = ref(0)

    const handleCurrentChange = (val) => {
      params.page = val
      executeSearch()
    }

    const confirmDiaginfo = () => {
      ctx.emit('clickItem', diagItem)
    }

    const clickItem = (item) => {
      if (props.target === 'diag' || props.target === 'injurydiag') {
        diagItem.icdCode = item.code
        diagItem.icdText = item.name
        diagItem.diagType = '1'
        showDiagType.value = true
      } else {
        ctx.emit('clickItem', item)
      }
    }

    const close = () => {
      ctx.emit('close')
    }

    watch(
      () => params.content,
      () => {
        executeSearch()
      }
    )

    onMounted(async () => {
      await Sleep(100)
      inputRef.value.focus()

      document.onkeydown = (e) => {
        switch (e.code) {
          case 'ArrowUp':
            resultRef.value.setCurrentRow(data.list[currentIndex.value === 0 ? 0 : --currentIndex.value])
            return false
          case 'ArrowDown':
            resultRef.value.setCurrentRow(data.list[currentIndex.value === data.list.length - 1 ? data.list.length - 1 : ++currentIndex.value])
            return false
          case 'ArrowLeft':
            if (params.page > 1) {
              handleCurrentChange(params.page - 1)
            }
            return false
          case 'ArrowRight':
            if (params.page * params.pageSize < data.totalSize) {
              handleCurrentChange(params.page + 1)
            }
            return false
          case 'Enter':
            clickItem(data.list[currentIndex.value])
            break
          case 'Escape':
            close()
            break
        }
      }
    })

    return {
      inputRef,
      resultRef,
      data,
      params,
      allMethods,
      diagItem,
      diagTypes,
      showDiagType,
      confirmDiaginfo,
      executeSearch,
      handleCurrentChange,
      clickItem,
      close,
    }
  },
}
</script>

<style scoped>
.box-width {
  width: 420px;
}
.data-box {
  margin-top: 16px;
  overflow-y: auto;
  border-top: 1px solid rgb(231, 231, 231);
}
</style>