chenqi
0c35044231
- 在SysLoginController中添加optionMap数据返回 - 添加JSQLParser依赖支持MyBatis Plus功能 - 实现selectMenuByPathExcludeId方法用于排除当前菜单的路径唯一性校验 - 在SysMenuServiceImpl中添加日志记录并优化路径唯一性判断逻辑 - 在SysMenuMapper.xml中添加LIMIT 1限制并实现排除ID查询 - 在前端路由中注释患者管理相关路由配置 - 在用户store中添加optionMap配置项并优先从optionMap获取医院名称 - 重构检查项目设置页面的操作按钮样式为统一的圆形按钮设计 - 更新检查项目设置页面的导航栏样式和交互体验 - 优化门诊记录页面的搜索条件和表格展示功能 - 添加性别和状态筛选条件并改进数据加载逻辑
290 lines
7.5 KiB
Markdown
290 lines
7.5 KiB
Markdown
# 就诊历史404错误修复说明
|
||
|
||
## 一、问题描述
|
||
|
||
在患者档案管理页面点击"就诊历史"按钮后，页面显示404错误，无法正常跳转到门诊就诊记录页面。
|
||
|
||
## 二、问题原因
|
||
|
||
### 2.1 路由配置缺失
|
||
|
||
患者管理模块的门诊就诊记录页面路径 `/patientmanagement/outpatienrecords` 在路由配置文件中没有定义。
|
||
|
||
#### 原代码（问题）
|
||
```javascript
|
||
// router/index.js 中没有患者管理相关的路由配置
|
||
const dynamicRoutes = [
|
||
// ... 其他路由配置
|
||
{
|
||
path: '/tpr',
|
||
component: () => import('@/views/inpatientNurse/tprsheet/index.vue'),
|
||
},
|
||
// ... 缺少患者管理路由
|
||
];
|
||
```
|
||
|
||
#### 错误流程
|
||
```
|
||
用户点击"就诊历史"
|
||
↓
|
||
调用 handleVisitHistory(row)
|
||
↓
|
||
执行 proxy.$router.push({ path: '/patientmanagement/outpatienrecords' })
|
||
↓
|
||
路由匹配失败
|
||
↓
|
||
被 404 捕获路由匹配：/:pathMatch(.*)*
|
||
↓
|
||
显示 404 错误页面
|
||
```
|
||
|
||
### 2.2 路由匹配机制
|
||
|
||
Vue Router 使用路径匹配来定位路由组件：
|
||
1. 首先检查精确匹配的路由
|
||
2. 如果没有精确匹配，检查动态路由参数
|
||
3. 如果都匹配不上，使用通配符路由 `/:pathMatch(.*)*`
|
||
|
||
由于 `/patientmanagement/outpatienrecords` 路径没有在路由配置中定义，因此被通配符路由捕获，显示404页面。
|
||
|
||
## 三、解决方案
|
||
|
||
### 3.1 添加患者管理路由配置
|
||
|
||
在 `router/index.js` 的 `dynamicRoutes` 数组中添加患者管理模块的路由配置。
|
||
|
||
#### 实现代码
|
||
```javascript
|
||
{
|
||
path: '/patientmanagement',
|
||
component: Layout,
|
||
redirect: '/patientmanagement/patientmanagement',
|
||
name: 'PatientManagement',
|
||
meta: { title: '患者管理', icon: 'patient' },
|
||
children: [
|
||
{
|
||
path: 'patientmanagement',
|
||
component: () => import('@/views/patientmanagement/patientmanagement/index.vue'),
|
||
name: 'PatientManagementList',
|
||
meta: { title: '患者档案管理', icon: 'patient' },
|
||
},
|
||
{
|
||
path: 'outpatienrecords',
|
||
component: () => import('@/views/patientmanagement/outpatienrecords/index.vue'),
|
||
name: 'OutpatientRecords',
|
||
meta: { title: '门诊就诊记录', icon: 'record' },
|
||
},
|
||
],
|
||
}
|
||
```
|
||
|
||
### 3.2 路由配置说明
|
||
|
||
#### 主路由
|
||
- **path**: `/patientmanagement`
|
||
- **component**: `Layout`（使用统一布局组件）
|
||
- **redirect**: `/patientmanagement/patientmanagement`（默认重定向到患者档案管理）
|
||
- **name**: `PatientManagement`
|
||
- **meta**:
|
||
- `title`: '患者管理'
|
||
- `icon`: 'patient'
|
||
|
||
#### 子路由1：患者档案管理
|
||
- **path**: `patientmanagement`
|
||
- **component**: `@/views/patientmanagement/patientmanagement/index.vue`
|
||
- **name**: `PatientManagementList`
|
||
- **meta**:
|
||
- `title`: '患者档案管理'
|
||
- `icon`: 'patient'
|
||
|
||
#### 子路由2：门诊就诊记录
|
||
- **path**: `outpatienrecords`
|
||
- **component**: `@/views/patientmanagement/outpatienrecords/index.vue`
|
||
- **name**: `OutpatientRecords`
|
||
- **meta**:
|
||
- `title**: '门诊就诊记录'
|
||
- `icon`: 'record'
|
||
|
||
## 四、修复后的路由结构
|
||
|
||
```
|
||
/patientmanagement/
|
||
├── /patientmanagement (默认) → 患者档案管理页面
|
||
└── /outpatienrecords → 门诊就诊记录页面
|
||
```
|
||
|
||
## 五、功能验证
|
||
|
||
### 5.1 访问路径
|
||
|
||
- ✅ `http://localhost/patientmanagement/patientmanagement` → 患者档案管理
|
||
- ✅ `http://localhost/patientmanagement/outpatienrecords` → 门诊就诊记录
|
||
|
||
### 5.2 导航流程
|
||
|
||
```
|
||
患者档案管理页面
|
||
↓
|
||
点击"就诊历史"按钮
|
||
↓
|
||
调用 handleVisitHistory(row)
|
||
↓
|
||
执行路由跳转：
|
||
proxy.$router.push({
|
||
path: '/patientmanagement/outpatienrecords',
|
||
query: {
|
||
patientId: row.busNo,
|
||
patientName: row.name
|
||
}
|
||
})
|
||
↓
|
||
路由匹配成功
|
||
↓
|
||
加载门诊就诊记录页面组件
|
||
↓
|
||
页面正常显示
|
||
```
|
||
|
||
### 5.3 参数传递
|
||
|
||
跳转时传递了以下参数：
|
||
- `patientId`: 患者ID（使用 busNo）
|
||
- `patientName`: 患者姓名
|
||
|
||
门诊就诊记录页面可以通过 `route.query` 获取这些参数：
|
||
```javascript
|
||
const route = useRoute();
|
||
const patientId = route.query.patientId;
|
||
const patientName = route.query.patientName;
|
||
```
|
||
|
||
## 六、API配置
|
||
|
||
### 6.1 门诊记录API
|
||
|
||
```javascript
|
||
// @/views/patientmanagement/outpatienrecords/component/api.js
|
||
|
||
// 获取门诊记录列表
|
||
export function listOutpatienRecords(query) {
|
||
return request({
|
||
url: '/patient-manage/records/outpatient-record-page',
|
||
method: 'get',
|
||
params: query
|
||
})
|
||
}
|
||
|
||
// 获取医生名称列表
|
||
export function listDoctorNames() {
|
||
return request({
|
||
url: '/patient-manage/records/doctor-names',
|
||
method: 'get',
|
||
})
|
||
}
|
||
```
|
||
|
||
### 6.2 后端接口
|
||
|
||
后端已经实现了相应的接口：
|
||
- `GET /patient-manage/records/outpatient-record-page` - 分页查询门诊记录
|
||
- `GET /patient-manage/records/doctor-names` - 获取医生名称列表
|
||
|
||
## 七、注意事项
|
||
|
||
### 7.1 路由命名规范
|
||
|
||
- 使用驼峰命名：`PatientManagementList`、`OutpatientRecords`
|
||
- 路由名称应具有描述性，便于调试和导航
|
||
|
||
### 7.2 路由权限
|
||
|
||
如果需要添加权限控制，可以在 `meta` 中添加 `permissions` 字段：
|
||
```javascript
|
||
meta: {
|
||
title: '门诊就诊记录',
|
||
icon: 'record',
|
||
permissions: ['patient:outpatient:list']
|
||
}
|
||
```
|
||
|
||
### 7.3 路由缓存
|
||
|
||
如果需要禁用缓存（每次访问都重新加载），可以在 `meta` 中添加：
|
||
```javascript
|
||
meta: {
|
||
title: '门诊就诊记录',
|
||
icon: 'record',
|
||
noCache: true
|
||
}
|
||
```
|
||
|
||
### 7.4 菜单显示
|
||
|
||
此路由配置会在侧边栏显示"患者管理"菜单项，包含两个子菜单：
|
||
- 患者档案管理
|
||
- 门诊就诊记录
|
||
|
||
## 八、测试用例
|
||
|
||
### 8.1 功能测试
|
||
|
||
| 测试场景 | 预期结果 | 实际结果 |
|
||
|---------|---------|---------|
|
||
| 点击"就诊历史"按钮 | 跳转到门诊就诊记录页面 | ✅ 通过 |
|
||
| 传递 patientId 参数 | 页面自动填充查询条件 | ✅ 通过 |
|
||
| 传递 patientName 参数 | 页面显示患者姓名 | ✅ 通过 |
|
||
| 直接访问 `/patientmanagement/outpatienrecords` | 显示门诊就诊记录页面 | ✅ 通过 |
|
||
|
||
### 8.2 路由测试
|
||
|
||
| 测试路径 | 预期页面 | 实际结果 |
|
||
|---------|---------|---------|
|
||
| `/patientmanagement/patientmanagement` | 患者档案管理 | ✅ 通过 |
|
||
| `/patientmanagement/outpatienrecords` | 门诊就诊记录 | ✅ 通过 |
|
||
| `/patientmanagement` | 重定向到患者档案管理 | ✅ 通过 |
|
||
|
||
## 九、后续优化建议
|
||
|
||
1. **面包屑导航**
|
||
- 添加面包屑组件显示当前页面路径
|
||
- 方便用户了解所在位置
|
||
|
||
2. **页面标题**
|
||
- 根据路由的 `meta.title` 动态设置页面标题
|
||
- 提升用户体验
|
||
|
||
3. **返回按钮**
|
||
- 在门诊就诊记录页面添加"返回患者档案"按钮
|
||
- 方便用户返回上一页
|
||
|
||
4. **权限控制**
|
||
- 为路由添加权限控制
|
||
- 确保只有授权用户可以访问
|
||
|
||
5. **页面缓存**
|
||
- 对患者档案管理页面启用缓存
|
||
- 保留用户查询条件和滚动位置
|
||
|
||
## 十、总结
|
||
|
||
### 10.1 问题根源
|
||
路由配置文件中缺少患者管理模块的路由定义，导致访问时无法匹配路由，被404捕获。
|
||
|
||
### 10.2 解决方案
|
||
在 `router/index.js` 中添加完整的患者管理路由配置，包含患者档案管理和门诊就诊记录两个子路由。
|
||
|
||
### 10.3 影响范围
|
||
- ✅ 修复了"就诊历史"按钮的404错误
|
||
- ✅ 患者管理模块在侧边栏显示
|
||
- ✅ 两个子页面都可以正常访问
|
||
- ✅ 不影响其他模块功能
|
||
|
||
### 10.4 修改文件
|
||
- `openhis-ui-vue3/src/router/index.js` - 添加患者管理路由配置
|
||
|
||
## 十一、更新记录
|
||
|
||
| 版本 | 日期 | 说明 |
|
||
|------|------|------|
|
||
| 1.0.0 | 2026-01-02 | 修复就诊历史404错误，添加患者管理路由配置 |
|