web_dist/src/components/search/Index.vue

<template>
  <div class="component-box-wrapper__half-transparent" :style="{ zIndex }">
    <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 v-if="tip" style="margin: -8px 0 8px 0; color: red">
        {{tip}}
      </div>
      <div style="display: flex;align-items: center;">
        <div>检索依据：</div>
        <div>
          <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>
        </div>
        <div v-if="showMallType" style="margin-left: 4px">
          项目类别：
        </div>
        <div v-if="showMallType">
          <el-select v-model="params.target" style="width: 60px">
            <el-option label="检验" value="JY" />
            <el-option label="检查" value="JC" />
            <el-option label="诊疗" value="ZL" />
          </el-select>
        </div>
        <div>
          <el-input
              ref="inputRef"
              v-model="params.content"
              clearable
              placeholder="请输入检索内容"
              style="width: 180px;margin-left: 4px"
          ></el-input>
        </div>
      </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-column v-if="showYbCode" prop="ybCode" label="医保赋码"></el-table-column>
          <el-table-column v-if="showOpScale" prop="opScale" label="手术/操作级别" align="center"></el-table-column>
          <el-table-column v-if="showOpType" prop="opTypeName" 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 setup>
import { reactive, ref, watch } from 'vue'
import { searchFromServer } from '@/api/inpatient/dictionary'
import { diagTypes } from '@/data'
import Sleep from '@/utils/sleep'
import {useZIndex} from "element-plus";

const props = defineProps({
  width: {
    type: String,
    default: '420px'
  },
  title: {
    type: String,
    required: true,
  },
  tip: {
    type: String,
    required: false,
  },
  target: {
    type: String,
    required: true,
  },
  zyType: {
    type: String,
    default: 'B'
  },
  medType: {
    type: String,
    default: '',
  },
  showEmpDept: {
    type: Boolean,
    default: false
  },
  showYbCode: {
    type: Boolean,
    default: false
  },
  showOpScale: {
    type: Boolean,
    default: false
  },
  showOpType: {
    type: Boolean,
    default: false
  },
  showMallType: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['close', 'clickItem'])
const width = props.width

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,
  zyType: props.zyType,
  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 = () => {
  emits('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 {
    if (props.showMallType) {
      item.type = params.target
    }
    emits('clickItem', item)
  }
}

const close = () => {
  emits('close')
}

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

const zIndex = ref(0)
onMounted(async () => {
  zIndex.value = useZIndex().nextZIndex()
  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
    }
  }
})
</script>

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