# 就诊历史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错误，添加患者管理路由配置 |