175 lines
6.2 KiB
Markdown
175 lines
6.2 KiB
Markdown
# 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
|
||
<!-- 修改前 -->
|
||
<style lang="scss" scoped>
|
||
.awaitList-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
.operate {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
align-items: center;
|
||
}
|
||
.table-container {
|
||
padding: 8px 16px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<!-- 修改后 -->
|
||
<style lang="scss" scoped>
|
||
.awaitList-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.operate {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
align-items: center;
|
||
}
|
||
.table-container {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
padding: 8px 16px;
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|
||
### 修改文件 2：`awaitList.vue`
|
||
|
||
同样的 CSS 修改（两个文件的 style 完全一致）：
|
||
|
||
```scss
|
||
<!-- 修改后 -->
|
||
<style lang="scss" scoped>
|
||
.awaitList-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
.operate {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
align-items: center;
|
||
}
|
||
.table-container {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
padding: 8px 16px;
|
||
}
|
||
}
|
||
</style>
|
||
```
|
||
|
||
**修改要点**（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 组件的 `<style>` 块修改，无后端变更、无数据库变更，由前端开发修复最合适。
|
||
|
||
---
|
||
|
||
## 路由决策
|
||
- **FIXER_ID**: guanyu
|
||
- **修复 Agent**: guanyu（后端）
|
||
- **原因**: LLM 分析决策
|
||
|
||
> ⚠️ 修复人员请先验证以上分析是否正确，再执行修复。
|