Bug #753 诸葛亮分析报告

文档类型: Bug分析 分析时间: 2026-06-12 22:03:57 分析模型: mimo-v2.5 (LLM深度分析)

基本信息

Bug #: 753
标题: 【收费工作站-住院登记】“待登记入院”与“已登记入院”页签下页面容器高度异常，系统自动无限下扩产生大量空白区
模块: 住院登记管理
提出人: 陈显精

一、Bug 理解

原文引用：

标题：【收费工作站-住院登记】"待登记入院"与"已登记入院"页签下页面容器高度异常，系统自动无限下扩产生大量空白区

重现步骤：

登录医院信息管理系统账号。

在左侧主菜单栏中依次点击：「收费工作站」->「住院登记」。

在右侧主工作区中，首先查看默认的「待登记入院」页签，往下滑动页面或观察底部数据区域。

接着点击切换至「已登记入院」页签，同样向下滑动并观察底部。

结果：表格与尾底部分页控件（写有"共 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

关键问题：

.awaitList-container 使用 height: 100%，但其父元素（el-tabs content）无固定高度——导致 100% 实际解析为 auto，无法约束子元素。
.table-container 无 overflow 约束、无 flex 布局——内容可以无限撑高。
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`

<!-- 修改前 -->
<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 完全一致）：

<!-- 修改后 -->
<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 变更，两文件相同）：

.awaitList-container 加 display: flex; flex-direction: column; — 建立纵向弹性布局
.operate 加 flex-shrink: 0; — 防止搜索栏被压缩
.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 分析决策

⚠️ 修复人员请先验证以上分析是否正确，再执行修复。

6.2 KiB Raw Permalink Blame History Unescape Escape