From 360256e589b8a457e5f2557330a4bf9e47155abb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=85=B3=E7=BE=BD?= <关羽@gentronhealth.com>
Date: Thu, 14 May 2026 12:22:21 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#465:=20[=E4=BD=8F=E9=99=A2?=
 =?UTF-8?q?=E5=8C=BB=E7=94=9F=E5=B7=A5=E4=BD=9C=E7=AB=99-=E6=A3=80?=
 =?UTF-8?q?=E9=AA=8C=E7=94=B3=E8=AF=B7]=20=E6=A3=80=E9=AA=8C=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E9=80=89=E6=8B=A9=E5=88=97=E8=A1=A8=E8=A2=AB=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E4=B8=BA500=E9=A1=B9=EF=BC=8C=E5=AF=BC=E8=87=B4?=
 =?UTF-8?q?=E5=8C=BB=E7=94=9F=E6=97=A0=E6=B3=95=E6=A3=80=E7=B4=A2=E5=B9=B6?=
 =?UTF-8?q?=E5=BC=80=E7=AB=8B=E5=85=B6=E4=BD=99800=E5=A4=9A=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题根因:
- 前端使用 pageSize=500 分页拉取数据，el-transfer 组件客户端过滤在 1400+ 条数据下存在渲染和搜索性能问题
- 数据库实际有 1400 项已启用的检验类诊疗项目，但仅加载了 500 项

修复方案:
1. 改用 pageSize=9999 一次性拉取全部数据，消除分页导致的 500 项截断
2. 新增顶部搜索框，支持按项目名称/拼音首拼/业务编号实时过滤
3. 使用 computed 属性动态生成 transfer 组件数据，搜索时自动过滤
4. 显示总数统计（未搜索时显示总数，搜索时显示匹配数/总数）
5. 移除不再需要的 applicationList 变量引用和 onBeforeMount 空调用

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../order/applicationForm/laboratoryTests.vue | 161 ++++++++++++------
 1 file changed, 112 insertions(+), 49 deletions(-)

diff --git a/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/laboratoryTests.vue b/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/laboratoryTests.vue
index 7bb79f48b..47e1b591e 100755
--- a/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/laboratoryTests.vue
+++ b/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/laboratoryTests.vue
@@ -6,9 +6,26 @@
 <template>
   <div class="LaboratoryTests-container">
     <div v-loading="loading" class="transfer-wrapper">
+      <!-- 远程搜索框 -->
+      <div class="search-bar">
+        <el-input
+          v-model="searchKey"
+          placeholder="输入项目代码/名称搜索"
+          clearable
+          @keyup.enter="handleSearch"
+          @clear="handleSearch"
+          style="width: 300px; margin-bottom: 10px"
+        >
+          <template #append>
+            <el-button @click="handleSearch">搜索</el-button>
+          </template>
+        </el-input>
+        <span v-if="!searchKey" class="total-count">共 {{ totalCount }} 项</span>
+        <span v-else class="total-count">搜索到 {{ filteredCount }} 项 / 共 {{ totalCount }} 项</span>
+      </div>
       <el-transfer
         v-model="transferValue"
-        :data="applicationList"
+        :data="transferData"
         filter-placeholder="项目代码/名称"
         filterable
         :titles="['未选择', '已选择']"
@@ -117,7 +134,7 @@
   </div>
 </template>
 <script setup name="LaboratoryTests">
-import {getCurrentInstance, onBeforeMount, onMounted, reactive, watch} from 'vue';
+import {getCurrentInstance, onMounted, reactive, ref, watch, computed} from 'vue';
 import {patientInfo} from '../../../store/patient.js';
 import {getApplicationList, saveInspection} from './api';
 import {getOrgList} from '@/views/doctorstation/components/api.js';
@@ -140,61 +157,85 @@ const findTreeItem = (list, id) => {
 const emits = defineEmits(['submitOk']);
 const props = defineProps({});
 const state = reactive({});
-const applicationListAll = ref();
-const applicationList = ref();
+const applicationListAll = ref([]);
 const loading = ref(false);
-const orgOptions = ref([]); // 科室选项
-const getList = async () => {
+const orgOptions = ref([]);
+const searchKey = ref('');
+const totalCount = ref(0);
+
+// 将已加载的全部数据转为 transfer 组件所需的格式
+const buildTransferData = (records) => {
+  return records.map((item) => {
+    const priceInfo = item.priceList?.[0] || {};
+    const price = priceInfo.price != null ? Number(priceInfo.price).toFixed(2) : '0.00';
+    const unit = item.unitCode_dictText || item.unitCode || '';
+    return {
+      adviceDefinitionId: item.adviceDefinitionId,
+      orgId: item.orgId,
+      label: item.adviceName + ' (￥' + price + '/' + unit + ')',
+      key: item.adviceDefinitionId,
+    };
+  });
+};
+
+// 加载全部数据（不分页，一次性拉取）
+const loadAllData = async () => {
   if (!patientInfo.value?.inHospitalOrgId) {
-    applicationList.value = [];
+    applicationListAll.value = [];
     return;
   }
   loading.value = true;
   try {
-    const allRecords = [];
-    let currentPage = 1;
-    const pageSize = 500;
-
-    // 分页拉取全部数据（后端单页最多500条）
-    while (true) {
-      const res = await getApplicationList({
-        pageSize,
-        pageNo: currentPage,
-        categoryCode: '22',
-        organizationId: patientInfo.value.inHospitalOrgId,
-        adviceTypes: [3], // 1 药品 2 耗材 3 诊疗
-      });
-      if (res.code !== 200) {
-        proxy.$message.error(res.message);
-        applicationList.value = [];
-        return;
-      }
-      const records = res.data?.records || [];
-      allRecords.push(...records);
-      // 当前页不足 pageSize 或已无数据，说明已全部拉取
-      if (records.length < pageSize) break;
-      currentPage++;
-    }
-
-    applicationListAll.value = allRecords;
-    applicationList.value = allRecords.map((item) => {
-      const priceInfo = item.priceList?.[0] || {};
-      const price = priceInfo.price != null ? Number(priceInfo.price).toFixed(2) : '0.00';
-      const unit = item.unitCode_dictText || item.unitCode || '';
-      return {
-        adviceDefinitionId: item.adviceDefinitionId,
-        orgId: item.orgId,
-        label: item.adviceName + ' (￥' + price + '/' + unit + ')',
-        key: item.adviceDefinitionId,
-      };
+    // 使用大 pageSize 一次性拉取所有启用状态的检验类诊疗项目
+    const res = await getApplicationList({
+      pageSize: 9999,
+      pageNo: 1,
+      categoryCode: '22',
+      organizationId: patientInfo.value.inHospitalOrgId,
+      adviceTypes: [3], // 1 药品 2 耗材 3 诊疗
     });
+    if (res.code !== 200) {
+      proxy.$message.error(res.message);
+      applicationListAll.value = [];
+      return;
+    }
+    applicationListAll.value = res.data?.records || [];
+    totalCount.value = res.data?.total || 0;
   } catch (e) {
     proxy.$message.error('获取检验项目列表失败');
-    applicationList.value = [];
+    applicationListAll.value = [];
   } finally {
     loading.value = false;
   }
 };
+
+// 根据搜索关键词过滤数据
+const filterData = (key) => {
+  if (!key || key.trim() === '') {
+    return applicationListAll.value;
+  }
+  const lowerKey = key.toLowerCase().trim();
+  return applicationListAll.value.filter((item) => {
+    return (
+      item.adviceName?.toLowerCase().includes(lowerKey) ||
+      item.pyStr?.toLowerCase().includes(lowerKey) ||
+      item.adviceBusNo?.toLowerCase().includes(lowerKey)
+    );
+  });
+};
+
+// transfer 组件实际显示的数据（受搜索词影响）
+const transferData = computed(() => buildTransferData(filterData(searchKey.value)));
+// 当前显示的条数
+const filteredCount = computed(() => filterData(searchKey.value).length);
+
+const getList = async () => {
+  await loadAllData();
+};
+
+const handleSearch = () => {
+  // 搜索时保持已选中的项目不受影响
+};
 const transferValue = ref([]);
 const form = reactive({
   // categoryType: '', // 项目类别
@@ -212,7 +253,6 @@ const form = reactive({
   otherDiagnosisList: [], //其他断目录
 });
 const rules = reactive({});
-onBeforeMount(() => {});
 onMounted(() => {
   getList();
 });
@@ -225,12 +265,22 @@ const projectWithDepartment = (selectProjectIds, type) => {
   let isRelease = true;
   // 选中项目的数组
   const arr = [];
-  // 根据选中的项目id查找对应的项目
+  // 根据选中的项目id查找对应的项目（从全部原始数据中查找）
   selectProjectIds.forEach((element) => {
-    const searchData = applicationList.value.find((item) => {
+    const searchData = applicationListAll.value.find((item) => {
       return element == item.adviceDefinitionId;
     });
-    arr.push(searchData);
+    if (searchData) {
+      const priceInfo = searchData.priceList?.[0] || {};
+      const price = priceInfo.price != null ? Number(priceInfo.price).toFixed(2) : '0.00';
+      const unit = searchData.unitCode_dictText || searchData.unitCode || '';
+      arr.push({
+        adviceDefinitionId: searchData.adviceDefinitionId,
+        orgId: searchData.orgId,
+        label: searchData.adviceName + ' (￥' + price + '/' + unit + ')',
+        key: searchData.adviceDefinitionId,
+      });
+    }
   });
   // 保存用户手动选择的发往科室（提交时需要保留）
   const manualDept = type === 2 ? form.targetDepartment : '';
@@ -321,7 +371,7 @@ const submit = () => {
   saveInspection(params).then((res) => {
     if (res.code === 200) {
       proxy.$message.success(res.msg);
-      applicationList.value = [];
+      transferValue.value = [];
       emits('submitOk');
     } else {
       proxy.$message.error(res.message);
@@ -378,6 +428,19 @@ defineExpose({ state, submit, getLocationInfo, getDiagnosisList, getList });
   .transfer-wrapper {
     position: relative;
     min-height: 300px;
+
+    .search-bar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+
+      .total-count {
+        font-size: 13px;
+        color: #909399;
+        white-space: nowrap;
+      }
+    }
   }
 
   .el-transfer {