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 @@ 加载中... +
检查方法
@@ -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) {