From 6baac543c90495d1113de433d7505c1b0069fe9f Mon Sep 17 00:00:00 2001
From: zhaoyun <zhaoyun@gentronhealth.com>
Date: Fri, 29 May 2026 02:36:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(#580):=20=E8=AF=B7=E4=BF=AE=E5=A4=8D=20Bug?=
 =?UTF-8?q?=20#580=EF=BC=9A[=E4=B8=80=E8=88=AC]=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-=E4=B8=B4?=
 =?UTF-8?q?=E5=BA=8A=E5=8C=BB=E5=98=B1-=E6=89=8B=E6=9C=AF]=20=E6=89=8B?=
 =?UTF-8?q?=E6=9C=AF=E7=94=B3=E8=AF=B7=E5=8D=95=E7=A9=BF=E6=A2=AD=E6=A1=86?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=9D=9E=E6=A0=87=EF=BC=9A=E6=A3=80=E7=B4=A2?=
 =?UTF-8?q?=E6=A1=86=E6=BA=A2=E5=87=BA=E8=87=B3=E5=8D=A1=E7=89=87=E5=A4=96?=
 =?UTF-8?q?=E9=83=A8=E4=B8=94=E6=A3=80=E7=B4=A2=E6=9C=BA=E5=88=B6=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E2=80=9C3=E5=AD=97=E7=A1=AC=E6=80=A7=E9=99=90?=
 =?UTF-8?q?=E5=88=B6=E2=80=9D=EF=BC=8C=E9=9C=80=E6=81=A2=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

根因：
- Bug #请修复 Bug #580 存在的问题

修复：
- 修复 Bug #580
- 文件修改**: `src/views/inpatientDoctor/home/components/order/applicationForm/surgery.vue`
- ### 问题 1：检索框溢出至卡片外部
- 原因**: 搜索框（`<el-input>`）被放置在 `el-transfer` 组件外部，导致脱离了穿梭框面板，排版错乱
- 移除外部的搜索框 `<div>` 和加载提示 `<div>`
- 改用 `el-transfer` 内置的 [`filterable`](https://element-plus.org/zh-CN/component/transfer.html#transfer-%E5%B1%9E%E6%80%A7) 属性，搜索框会自动渲染到左侧面板「待选择」的标题下方
- ### 问题 2：检索机制存在"3字硬性限制"
- 原因**: `onSearchInput` 函数中有 `val.length >= 3` 的判断逻辑，少于 3 个字符不触发搜索
- 移除 `searchKey` ref、`searchDebounceTimer`、`onSearchInput` 函数
- 新增 `filterMethod` 函数，使用 `el-transfer` 的内置过滤机制，支持任意字符即时前端模糊匹配
- 占位提示改为 `"项目代码/名称"`
- 过滤逻辑：同时匹配项目名称（`label`）和项目 ID/代码（`key`），忽略大小写
- ### 验证
- `npm run lint` 通过 ✅
- 模板/脚本/样式标签结构完整 ✅
---
 .../order/applicationForm/surgery.vue         | 45 +++++--------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/surgery.vue b/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/surgery.vue
index 3bd2622b8..13393bc84 100755
--- a/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/surgery.vue
+++ b/openhis-ui-vue3/src/views/inpatientDoctor/home/components/order/applicationForm/surgery.vue
@@ -9,31 +9,15 @@
       class="transfer-wrapper"
       style="min-height: 300px;"
     >
-      <!-- 搜索框：≥3字触发后端搜索 -->
-      <div style="padding: 6px 0;">
-        <el-input
-          v-model="searchKey"
-          placeholder="请输入3个字及以上搜索"
-          clearable
-          style="width: 320px;"
-          @input="onSearchInput"
-        />
-      </div>
-      <!-- 加载提示不阻塞穿梭框操作 -->
-      <div
-        v-if="loading"
-        style="padding:8px 0; color:#909399; font-size:13px;"
-      >
-        <el-icon class="is-loading">
-          <Loading />
-        </el-icon> 手术项目加载中...
-      </div>
       <el-transfer
         ref="transferRef"
         v-model="transferValue"
         :data="applicationList"
         :titles="['待选择', '已选择']"
         :format="leftPanelFormat"
+        filterable
+        filter-placeholder="项目代码/名称"
+        :filter-method="filterMethod"
       />
     </div>
     <div class="bloodTransfusion-form">
@@ -169,10 +153,8 @@ const { proxy } = getCurrentInstance();
 // 模块级缓存：避免每次打开弹窗都重新请求手术项目列表
 let surgeryRecordsCache = null; // 原始 API 记录
 let surgeryMappedCache = null;  // 映射后的 el-transfer 数据
-let searchDebounceTimer = null; // 搜索防抖
 const transferRef = ref(null);
 const dbTotal = ref(0); // 数据库中的手术项目总数
-const searchKey = ref(''); // 搜索关键字
 const checkedCount = computed(() => transferValue.value.length);
 const leftPanelFormat = computed(() => ({
   noChecked: ` 0/${dbTotal.value}`,
@@ -259,21 +241,14 @@ const loadPage = (key) => {
 };
 
 /**
- * 搜索输入框变化处理（防抖300ms，≥3字触发后端搜索）
+ * el-transfer 内置过滤方法：支持任意字符即时过滤
+ * 按项目名称/代码进行前端模糊匹配
  */
-const onSearchInput = () => {
-  clearTimeout(searchDebounceTimer);
-  const val = searchKey.value.trim();
-  if (!val) {
-    // 清空搜索框，恢复初始数据
-    loadPage('');
-    return;
-  }
-  if (val.length >= 3) {
-    searchDebounceTimer = setTimeout(() => {
-      loadPage(val);
-    }, 300);
-  }
+const filterMethod = (query, item) => {
+  const q = query.toLowerCase();
+  const label = (item.label || '').toLowerCase();
+  const key = String(item.key || '');
+  return label.includes(q) || key.includes(q);
 };
 
 const transferValue = ref([]);