lis8.0-vue3/src/views/mzcx/cydj/components/OutPatList.vue

<template>
  <div>
    <el-button @click="handleClick">查询病人</el-button>

    <!-- 病人选择弹窗 -->
    <el-dialog v-model="dialogVisible" :title="props.dialogTitle" width="500px" @close="handleDialogClose">
      <el-input v-model="searchKey" placeholder="搜索（支持姓名、病人ID、简拼）..." class="mb-4" clearable @clear="filteredPatData"
        @input="filteredPatData" @keyup.down="navigateTable('down')" @keyup.up="navigateTable('up')"
        @keyup.enter="selectActiveItem" />

      <el-table :data="filteredPatData" height="300px" border @row-click="selectItem" @row-dblclick="selectItem"
        class="compact-form my-table">
        <template #empty>
          <div v-if="isPatLoading">加载中...</div>
          <div v-else>没有匹配的病人数据</div>
        </template>

        <el-table-column prop="pid" label="病人ID" width="100" show-overflow-tooltip />
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip />
        <el-table-column prop="xb" label="性别" width="80" show-overflow-tooltip />
        <el-table-column prop="nl" label="年龄" width="80" show-overflow-tooltip />
        <el-table-column prop="ks" label="科室" width="100" show-overflow-tooltip />
        <el-table-column prop="ch" label="床号" width="80" show-overflow-tooltip />
        <el-table-column prop="pinyin" label="简拼" width="150" show-overflow-tooltip />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import { queryPatList } from "@/api/mzcx/cydj.js";
import { getFirstLetter } from '@/utils/pinyin.js'; // 引入拼音处理工具
// 组件参数
const props = defineProps({
  pidValue: { type: [String, Number], default: '' },
  PatType: { type: String, required: true },
  placeholder: { type: String, default: '请输入或双击选择' },
  clearable: { type: Boolean, default: true },
  disabled: { type: Boolean, default: false },
  dialogTitle: { type: String, default: '选择病人' }
});

// 组件事件
const emit = defineEmits(['update:pidValue', 'select']);

// 内部状态
const dialogVisible = ref(false);
const searchKey = ref('');
const PatData = ref([]); // 存储带简拼的病人数据
const isPatLoading = ref(true);
const activeRowIndex = ref(-1); // 键盘导航选中行索引


// 加载病人数据
const loadPatData = async () => {
  isPatLoading.value = true;
  queryPatList().then(response => {
    //  console.log('response:', response.data);
    PatData.value = (response.data || []).map(item => ({
      ...item,
      pinyin: getFirstLetter(item.name)
    }));
  }).catch(() => {
    console.error(`加载病人列表失败:`, error);
    PatData.value = [];
  }).finally(() => {
    isPatLoading.value = false;
  });
};

// 过滤病人数据（使用 computed 提高性能）
const filteredPatData = computed(() => {
  const key = searchKey.value.trim().toLowerCase();
  if (!key) return PatData.value;

  return PatData.value.filter(item => {
    const matchName = item.name.toLowerCase().includes(key);
    const matchPid = String(item.pid).toLowerCase().includes(key);
    const matchPinyin = item.pinyin.toLowerCase().includes(key);

    return matchName || matchPid || matchPinyin;
  });
});

// 点击按钮事件处理
const handleClick = () => {
  loadPatData();
  // if (!props.disabled && !isPatLoading.value) {
  dialogVisible.value = true;
  searchKey.value = '';
  activeRowIndex.value = -1;
  // }
};

// 选择病人项
const selectItem = (item) => {
  emit('update:pidValue', item.pid);
  emit('select', item.pid);
  dialogVisible.value = false;
};

// 键盘导航
const navigateTable = (direction) => {
  if (!filteredPatData.value.length) return;

  if (direction === 'down') {
    activeRowIndex.value = (activeRowIndex.value + 1) % filteredPatData.value.length;
  } else if (direction === 'up') {
    activeRowIndex.value = (activeRowIndex.value - 1 + filteredPatData.value.length) % filteredPatData.value.length;
  }
};

// 选择当前活动行
const selectActiveItem = () => {
  if (activeRowIndex.value >= 0 && activeRowIndex.value < filteredPatData.value.length) {
    selectItem(filteredPatData.value[activeRowIndex.value]);
  }
};

// 关闭弹窗
const handleDialogClose = () => {
  dialogVisible.value = false;
  activeRowIndex.value = -1;
};


</script>

<style scoped>
/* 可选：添加活动行样式 */
:deep(.el-table__row.active) {
  background-color: #e6f7ff !important;
}

::v-deep .my-table .el-table__row td {
  padding: 1px 0;
  /* 减小行高 */
}

::v-deep .my-table .el-table__header-wrapper th {
  padding: 6px 0;
  /* 表头内边距 */
  background-color: #b3d8ff !important;
  /* 表头背景色（保留之前的设置） */
  color: #333;
  /* 文字颜色加深，提升可读性 */
  font-weight: 500;
  /* 文字加粗 */
}

::v-deep .my-table .el-table__cell {
  padding: 0 2px;
  /* 减小列间距 */
}

/* 可选：调整表格整体样式 */
::v-deep .my-table {
  font-size: 13px;
  /* 适当减小字体 */
}

::v-deep .my-table .el-table__cell,
::v-deep .my-table .el-table__header-wrapper th {
  border-width: 1px;
  border-color: #ebeef5;
}
</style>