195 lines
8.0 KiB
Markdown
195 lines
8.0 KiB
Markdown
# Bug #697 诸葛亮分析报告
|
||
|
||
> **文档类型**: Bug分析
|
||
> **分析时间**: 2026-06-13 02:58:52
|
||
> **分析模型**: mimo-v2.5 (LLM深度分析)
|
||
|
||
---
|
||
|
||
## 基本信息
|
||
- **Bug #**: 697
|
||
- **标题**: [门诊管理-门诊挂号] 检索并选择患者后，信息未回填赋值至挂号表单，导致挂号阻断
|
||
- **模块**: 建档挂号管理
|
||
- **提出人**: 陈显精
|
||
|
||
---
|
||
|
||
Now I have a comprehensive understanding of the bug. Let me produce my analysis.
|
||
|
||
---
|
||
|
||
## 一、Bug 理解
|
||
|
||
### 禅道原文引用
|
||
|
||
**Bug 标题**：[门诊管理-门诊挂号] 检索并选择患者后，信息未回填赋值至挂号表单，导致挂号阻断
|
||
|
||
**重现步骤**：
|
||
> 【步骤】登录账号 admin/admin123，进入【门诊管理】→【门诊挂号】。在"患者身份信息"输入框中输入关键字"随子赫"（或就诊卡号 2123123）。系统自动弹出模糊匹配的待选患者悬浮列表。用鼠标左键双击或单击选中列表中的患者"随子赫"这一行数据。观察挂号主界面各患者信息输入框（姓名、性别、年龄、就诊卡号、证件号、电话等）的接收状态。
|
||
|
||
**期望结果**：
|
||
> 选中列表中的患者后，该患者的所有基本信息（包括但不限于：姓名、性别、年龄、就诊卡号、证件号、电话等）应自动回填并正确渲染显示在挂号主界面的对应表单中。
|
||
|
||
**实际结果**：
|
||
> 选中下拉列表后该列表消失，但主界面的姓名、性别、年龄、就诊卡号、证件号、电话等所有患者基本信息字段依然为空，未回显任何数据，导致整个挂号业务无法继续保存。
|
||
|
||
### 附图分析关键信息
|
||
- 截图中红色标注：**"点击选中患者，患者信息未实现赋值至主界面，实现不了挂号业务"**
|
||
- 截图中红色标注：**"未赋值"**（第二个截图中整个挂号表单区域为空白）
|
||
- 患者下拉列表正常显示，数据完整（姓名、就诊卡号、性别、证件号、联系电话、年龄），但选中后主表单所有字段为空
|
||
|
||
### 综合总结
|
||
用户在门诊挂号页面搜索患者后，下拉列表能正常弹出并显示匹配结果。但点击选中某一行后，**列表关闭了，主表单的姓名、性别、年龄、就诊卡号、证件号、电话等字段全部为空**，挂号流程被完全阻断。这是一个典型的**前端数据回填事件链断裂**问题——选中事件触发了列表关闭，但回填逻辑未成功执行。
|
||
|
||
---
|
||
|
||
## 二、根因分析
|
||
|
||
### 根因：el-popover `trigger="manual"` + input `@blur` 导致事件链断裂
|
||
|
||
**完整事件链分析：**
|
||
|
||
1. 用户在搜索输入框输入关键字 → `handleFocus()` 显示 popover → `patientList` 组件通过 watcher 触发 `getList()` → API 返回患者列表正常 ✅
|
||
2. 用户**点击** popover 中的某一行 →
|
||
3. **关键断裂点**：点击 popover 内部内容时，浏览器先处理 input 的 **blur 事件** → `handleBlur()` 立即执行 `showPopover.value = false`
|
||
4. Element Plus 的 `el-popover` 使用 `trigger="manual"` 模式，当 `:visible` 变为 `false` 时，**popover 内容从 DOM 中移除/隐藏**
|
||
5. 由于 popover 内容被移除，vxe-table 的 `@cell-click="clickRow"` 事件**来不及触发**或触发时 DOM 已不可用
|
||
6. `clickRow` → `emit("selsectPatient", params.row)` **未被触发**
|
||
7. 父组件的 `selsectPatient(row)` **未被调用** → 表单字段未赋值
|
||
|
||
**事件时序图：**
|
||
```
|
||
mousedown (table row)
|
||
→ input blur fires (handleBlur)
|
||
→ showPopover = false
|
||
→ popover content removed from DOM
|
||
→ cell-click fires on vxe-table (TOO LATE, DOM gone)
|
||
```
|
||
|
||
**涉及文件：**
|
||
|
||
| 文件 | 作用 | 问题点 |
|
||
|------|------|--------|
|
||
| `healthlink-his-ui/src/views/charge/outpatientregistration/index.vue` (L116-137) | el-popover + input 模板 | `@blur="handleBlur"` 立即关闭 popover |
|
||
| `healthlink-his-ui/src/views/charge/outpatientregistration/index.vue` (L1996-1998) | `handleBlur` 函数 | 无延迟，立即 `showPopover = false` |
|
||
| `healthlink-his-ui/src/views/charge/outpatientregistration/index.vue` (L2228-2241) | `selsectPatient` 函数 | 逻辑正确但未被触发 |
|
||
| `healthlink-his-ui/src/views/charge/outpatientregistration/components/patientList.vue` (L96) | `@cell-click="clickRow"` | click 事件未能触发 |
|
||
| `healthlink-his-ui/src/views/charge/outpatientregistration/components/patientList.vue` (L54) | `@mousedown.prevent` | 绑在组件上，未阻止 input blur |
|
||
|
||
**为什么 `@mousedown.prevent` 没有阻止 blur？**
|
||
|
||
`@mousedown.prevent` 是 Vue 事件修饰符，绑定在 `<patientList>` 组件上，会附加到组件的根元素 `<div>` 上。但 `mousedown` 事件的传播方向是**从目标元素向上冒泡**：
|
||
- 表格单元格 `mousedown` → 表格 `mousedown` → `<div>` 的 Vue mousedown（`preventDefault` 执行）
|
||
- 但 input 的 `blur` 是由浏览器的**焦点管理机制**触发的，不受 `preventDefault` 的完全控制
|
||
- 特别是当 el-popover 使用 Teleport 将内容渲染到 `document.body` 时，popover 内容的 mousedown 事件可能不会冒泡到触发元素的父容器
|
||
|
||
---
|
||
|
||
## 三、修复方案
|
||
|
||
### 修复策略：在 popover 内容区域拦截 mousedown，阻止 input 失焦
|
||
|
||
**修改文件**：`healthlink-his-ui/src/views/charge/outpatientregistration/index.vue`
|
||
|
||
**修改内容**：
|
||
|
||
#### 修改 1：在 popover 内容区域添加 mousedown 阻止事件（约 L116-137）
|
||
|
||
将模板中的 popover 内容区域修改为：
|
||
|
||
```vue
|
||
<!-- 修改前 -->
|
||
<el-popover
|
||
:popper-style="{ padding: '0' }"
|
||
placement="bottom-start"
|
||
:visible="showPopover"
|
||
trigger="manual"
|
||
:width="1200"
|
||
>
|
||
<patientList
|
||
:searchkey="patientSearchKey"
|
||
@selsect-patient="selsectPatient"
|
||
@mousedown.prevent
|
||
/>
|
||
...
|
||
</el-popover>
|
||
|
||
<!-- 修改后 -->
|
||
<el-popover
|
||
:popper-style="{ padding: '0' }"
|
||
placement="bottom-start"
|
||
:visible="showPopover"
|
||
trigger="manual"
|
||
:width="1200"
|
||
>
|
||
<div @mousedown.prevent>
|
||
<patientList
|
||
:searchkey="patientSearchKey"
|
||
@selsect-patient="selsectPatient"
|
||
/>
|
||
</div>
|
||
...
|
||
</el-popover>
|
||
```
|
||
|
||
关键变化：
|
||
- `@mousedown.prevent` 从 `<patientList>` 组件标签移到**包裹 popover 内容的 `<div>`** 上
|
||
- 确保 popover 内任何位置的 mousedown 都会被阻止默认行为，从而**阻止 input 失焦**
|
||
- input 不失焦 → popover 不关闭 → `cell-click` 正常触发 → `selsectPatient` 正常执行 → 表单正确赋值
|
||
|
||
#### 修改 2：添加防御性保障 — 优化 `handleBlur`（约 L1996-1998）
|
||
|
||
```javascript
|
||
// 修改前
|
||
function handleBlur() {
|
||
showPopover.value = false;
|
||
}
|
||
|
||
// 修改后
|
||
function handleBlur() {
|
||
setTimeout(() => {
|
||
showPopover.value = false;
|
||
}, 200);
|
||
}
|
||
```
|
||
|
||
双重保障：即使 `@mousedown.prevent` 在某些边界情况下未完全生效，200ms 延迟也足以让 `cell-click` 事件完成、`selsectPatient` 执行，之后再关闭 popover。
|
||
|
||
#### 修改 3：（可选）增加键盘关闭支持
|
||
|
||
由于 `@mousedown.prevent` 阻止了焦点转移，用户需要其他方式关闭 popover：
|
||
|
||
```javascript
|
||
// 在 onMounted 中添加
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && showPopover.value) {
|
||
showPopover.value = false;
|
||
}
|
||
});
|
||
```
|
||
|
||
### 修改清单
|
||
|
||
| # | 文件 | 行号（约） | 修改内容 |
|
||
|---|------|-----------|---------|
|
||
| 1 | `outpatientregistration/index.vue` | L116-137 | popover 内容包裹 `<div @mousedown.prevent>` |
|
||
| 2 | `outpatientregistration/index.vue` | L1996-1998 | `handleBlur` 增加 200ms setTimeout |
|
||
| 3 | `outpatientregistration/index.vue` | L2228-2241 | `selsectPatient` 函数逻辑无需修改（已正确） |
|
||
|
||
---
|
||
|
||
## 四、路由决策
|
||
|
||
**FIXER**: zhaoyun
|
||
|
||
**REASON**: 纯前端 Bug——el-popover 事件链断裂导致患者信息回填失败，涉及 Vue 模板事件绑定和 el-popover 组件交互逻辑，属于前端 UI 修复范畴，无需数据库变更，不需要后端参与。
|
||
|
||
---
|
||
|
||
## 路由决策
|
||
- **FIXER_ID**: guanyu
|
||
- **修复 Agent**: guanyu（后端）
|
||
- **原因**: LLM 分析决策
|
||
|
||
> ⚠️ 修复人员请先验证以上分析是否正确，再执行修复。
|