From eb5262d33c3543a8212253595c586f67b17b2192 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8D=80=E5=BD=A7?= <荀彧@gentronhealth.com>
Date: Wed, 13 May 2026 20:11:47 +0800
Subject: [PATCH] =?UTF-8?q?Fix=20Bug=20#500:=20=E3=80=90=E9=97=A8=E8=AF=8A?=
 =?UTF-8?q?=E5=8C=BB=E7=94=9F=E7=AB=99=E3=80=91=E6=A3=80=E6=9F=A5=E7=94=B3?=
 =?UTF-8?q?=E8=AF=B7=E5=8F=B3=E4=BE=A7"=E6=A3=80=E6=9F=A5=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE=E5=88=86=E7=B1=BB"=E5=88=87=E6=8D=A2=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E7=95=8C=E9=9D=A2=E5=87=BA=E7=8E=B0=E6=98=8E=E6=98=BE?=
 =?UTF-8?q?=E6=8A=96=E5=8A=A8/=E9=97=AA=E7=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复策略A（直接修复代码逻辑），采用4个手术式修改消除抖动根因：

1. 方法列表区域 v-if → v-show：避免异步加载后 DOM 突然插入导致高度跳变
2. CSS transition: all → height/max-height：明确过渡属性，防止子元素意外动画
3. .collapse-scroll 添加 min-height: 120px：固定最小高度，避免 flex 容器高度突变
4. handleCategoryExpand 添加 currentActiveCategory 守卫：快速切换分类时忽略过期请求响应，防止旧数据覆盖导致闪烁

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../examination/examinationApplication.vue    | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
index e6f1b3904..1a4e4e410 100755
--- a/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
+++ b/openhis-ui-vue3/src/views/doctorstation/components/examination/examinationApplication.vue
@@ -376,8 +376,9 @@
                     加载中...
                   </div>
                   <!-- Bug #428修复: 渲染分类联动加载的检查方法列表 -->
+                  <!-- Bug #500修复: v-if 改为 v-show，避免方法列表加载时 DOM 突然插入导致高度跳变 -->
                   <div
-                    v-if="cat.methods && cat.methods.length > 0"
+                    v-show="cat.methods && cat.methods.length > 0"
                     class="method-section"
                   >
                     <div class="method-section-title">检查方法</div>
@@ -682,6 +683,7 @@ const categoryList = ref([]);   // 原始分类+项目数据
 const dictSearchKey = ref('');
 const activeNames = ref('');    // 当前展开的折叠项
 const categoryLoadingSet = ref(new Set());  // Bug #500: 正在加载方法的分类集合
+const currentActiveCategory = ref(null);  // Bug #500: 记录当前激活的分类，忽略过期请求响应
 const isAnimating = ref(false);  // Bug #500: 防止快速切换时折叠动画重叠导致抖动
 
 const allMethods = ref([]);
@@ -799,15 +801,18 @@ const availableMethods = computed(() => {
 // 当可选方法列表改变时，如果当前选中的方法不在新列表中，则清空
 // #428: 分类展开时联动加载检查方法
 // Bug #500: 使用 categoryLoadingSet 替代 dictLoading，避免切换分类时整个区域闪烁
+// Bug #500: 添加 currentActiveCategory 守卫，忽略过期请求响应，防止快速切换时数据闪烁
 async function handleCategoryExpand(cat) {
   if (!cat || !cat.typeName) return;
 
-  // 如果已加载过或正在加载中，跳过
   if ((cat.methods && cat.methods.length > 0) || categoryLoadingSet.value.has(cat.typeId)) return;
 
   categoryLoadingSet.value.add(cat.typeId);
+  currentActiveCategory.value = cat.typeId;
   try {
     const res = await searchCheckMethod({ checkType: cat.typeName });
+    // 忽略过期请求：用户已切换到其他分类，丢弃当前响应
+    if (currentActiveCategory.value !== cat.typeId) return;
     let data = res?.data?.data || res?.data || res?.rows || res;
     if (!Array.isArray(data) && res?.data && Array.isArray(res.data.data)) {
       data = res.data.data;
@@ -826,18 +831,22 @@ async function handleCategoryExpand(cat) {
       }));
     }
   } catch (err) {
+    if (currentActiveCategory.value !== cat.typeId) return;
     console.error('加载分类检查方法失败', err);
   } finally {
     categoryLoadingSet.value.delete(cat.typeId);
   }
 }
-// Bug #500: 添加防抖逻辑，快速切换时跳过中间状态的动画，避免高度跳变和白屏闪烁
+// Bug #500修复: 添加防抖逻辑，快速切换时跳过中间状态的动画，避免高度跳变和白屏闪烁
 function handleCollapseChange(activeName) {
   if (isAnimating.value) return;  // 动画进行中，忽略后续点击
 
   isAnimating.value = true;
   setTimeout(() => { isAnimating.value = false; }, 300);  // 与 CSS 过渡时长一致
 
+  // Bug #500修复: 记录当前激活的分类，用于 handleCategoryExpand 中忽略过期请求
+  currentActiveCategory.value = activeName || null;
+
   if (activeName) {
     // Bug #428修复: 直接从 categoryList（原始响应式数组）查找分类，
     // 确保后续 handleCategoryExpand 对 cat.methods 的赋值能正确触发 Vue 响应式更新
@@ -1642,6 +1651,7 @@ defineExpose({ getList });
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;  /* Bug #500: 防止切换时水平方向溢出导致抖动 */
+  min-height: 120px;   /* Bug #500: 固定最小高度，避免分类切换时 flex 容器高度突变 */
 }
 .empty-hint {
   color: #909399;
@@ -1914,10 +1924,10 @@ defineExpose({ getList });
   height: auto;
   line-height: 1.5;
 }
-/* Bug #500: 折叠内容添加平滑过渡动画，避免切换时高度跳变 */
+/* Bug #500修复: 折叠内容使用明确属性过渡，避免 transition: all 导致子元素意外动画 */
 :deep(.el-collapse-item__content) {
   padding-bottom: 4px;
-  transition: all 0.3s ease;
+  transition: height 0.3s ease, max-height 0.3s ease;
 }
 /* Bug #500: 折叠面板动画容器，添加 overflow:hidden 防止展开时内容溢出导致闪烁 */
 :deep(.el-collapse-item__wrap) {