From ab3431c53def33df452839dd3407b6bd0be17ac6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8D=8E=E4=BD=97?= Date: Fri, 12 Jun 2026 22:03:57 +0800 Subject: [PATCH] =?UTF-8?q?docs(bug):=20=E8=AF=B8=E8=91=9B=E4=BA=AE?= =?UTF-8?q?=E5=88=86=E6=9E=90=E6=8A=A5=E5=91=8A=20Bug=20#753?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MD/bugs/BUG_753_ANALYSIS.md | 174 ++++++++++++++++++++++++++++++++++++ 1 file changed, 174 insertions(+) create mode 100644 MD/bugs/BUG_753_ANALYSIS.md diff --git a/MD/bugs/BUG_753_ANALYSIS.md b/MD/bugs/BUG_753_ANALYSIS.md new file mode 100644 index 000000000..eff15a2dc --- /dev/null +++ b/MD/bugs/BUG_753_ANALYSIS.md @@ -0,0 +1,174 @@ +# Bug #753 诸葛亮分析报告 + +> **文档类型**: Bug分析 +> **分析时间**: 2026-06-12 22:03:57 +> **分析模型**: mimo-v2.5 (LLM深度分析) + +--- + +## 基本信息 +- **Bug #**: 753 +- **标题**: 【收费工作站-住院登记】“待登记入院”与“已登记入院”页签下页面容器高度异常，系统自动无限下扩产生大量空白区 +- **模块**: 住院登记管理 +- **提出人**: 陈显精 + +--- + +--- + +## 一、Bug 理解 + +**原文引用：** + +> **标题**：【收费工作站-住院登记】"待登记入院"与"已登记入院"页签下页面容器高度异常，系统自动无限下扩产生大量空白区 +> +> **重现步骤**： +> 1. 登录医院信息管理系统账号。 +> 2. 在左侧主菜单栏中依次点击：「收费工作站」->「住院登记」。 +> 3. 在右侧主工作区中，首先查看默认的「待登记入院」页签，往下滑动页面或观察底部数据区域。 +> 4. 接着点击切换至「已登记入院」页签，同样向下滑动并观察底部。 +> +> **结果**：表格与尾底部分页控件（写有"共 59 条 10条/页..."的控制条）之间存在异常巨大的空白间隔。页面右侧纵向滚动条极长，系统自动无限往下拉高窗口，给用户视觉呈瞬间呈现"断层/留白过长"现象。(注：在"待登记入院"和"已登记入院"两个子标签下均存在该问题。) +> +> **期望**：页面各组件高度计算正确，自适应浏览器窗口大小。分页控件行应紧跟紧随在表格区域底部显示，或者将表格区固定在一定高度内（超出出现局部滚动条），不能出现无限制的页面底部空白区和全局滚动条。 + +**附图分析**： +- 已登记入院页签：10行数据的表格下方出现大面积空白区域，分页控件被推到页面最底部，右侧纵向滚动条极长。 +- 待登记入院页签：表格显示"暂无数据"，但页面同样存在高度异常。 +- 两个标签页下均有"系统自动无限往下扩高窗口"的标注。 + +**综合总结**：用户在住院登记页面的两个页签（待登记/已登记）中，表格下方出现大面积异常空白，分页控件与表格严重脱节，页面滚动条极长。这是一个纯前端布局问题，由 CSS 高度约束缺失导致 vxe-table 在无约束父容器中无限撑开高度。 + +--- + +## 二、根因分析 + +**直接原因**：两个组件（`accomplishList.vue` 和 `awaitList.vue`）的 `.table-container` 缺少高度约束和溢出控制。 + +**详细技术分析**： + +布局链条高度约束断裂： + +``` +.app-container (min-height: calc(100vh - 84px), 无固定height, 无overflow) + └─ el-tabs (auto height) + └─ .awaitList-container (height: 100%, 但父元素无固定高度 → 实际等于 auto) + ├─ .operate (height: 40px, 固定) + └─ .table-container (无高度约束, 仅 padding) + ├─ vxe-table (height="100%", 父容器auto → 无法正确约束) + └─ pagination +``` + +关键问题： +1. **`.awaitList-container` 使用 `height: 100%`，但其父元素（el-tabs content）无固定高度**——导致 `100%` 实际解析为 auto，无法约束子元素。 +2. **`.table-container` 无 `overflow` 约束、无 flex 布局**——内容可以无限撑高。 +3. **`vxe-table` 的 `height="100%"` 属性**——在无固定高度的父容器中无法创建滚动区域，表格内容直接撑开容器。 + +**涉及文件**（均为纯前端 CSS 问题）： +- `healthlink-his-ui/src/views/inHospitalManagement/charge/register/components/accomplishList.vue` — 已登记入院列表 +- `healthlink-his-ui/src/views/inHospitalManagement/charge/register/components/awaitList.vue` — 待登记入院列表 + +--- + +## 三、修复方案 + +**核心思路**：用 flexbox 将 `.awaitList-container` 改为纵向弹性布局，让 `.table-container` 自动填充剩余空间并限制溢出，使 vxe-table 的 `height="100%"` 能正确约束在固定高度内。 + +### 修改文件 1：`accomplishList.vue` + +```scss + + + + + +``` + +### 修改文件 2：`awaitList.vue` + +同样的 CSS 修改（两个文件的 style 完全一致）： + +```scss + + +``` + +**修改要点**（3处 CSS 变更，两文件相同）： +1. `.awaitList-container` 加 `display: flex; flex-direction: column;` — 建立纵向弹性布局 +2. `.operate` 加 `flex-shrink: 0;` — 防止搜索栏被压缩 +3. `.table-container` 加 `flex: 1; min-height: 0; overflow: hidden;` — **关键修复**：自动填充剩余空间 + 禁止溢出撑高 + `min-height: 0` 确保 flex 子元素可缩小 + +这样 vxe-table 的 `height="100%"` 就能在固定的 `.table-container` 内正确创建滚动区域，表格内容超出时在表格内部滚动，分页控件紧随表格下方，不再撑开整个页面。 + +--- + +## 四、路由决策 + +**FIXER**: zhaoyun +**REASON**: 这是纯前端 CSS 布局问题，只涉及两个 Vue 组件的 `