his/迁移记录-DB变更记录/就诊历史404错误修复说明.md

就诊历史404错误修复说明

一、问题描述

在患者档案管理页面点击"就诊历史"按钮后，页面显示404错误，无法正常跳转到门诊就诊记录页面。

二、问题原因

2.1 路由配置缺失

患者管理模块的门诊就诊记录页面路径 /patientmanagement/outpatienrecords 在路由配置文件中没有定义。

原代码（问题）

// 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 数组中添加患者管理模块的路由配置。

实现代码

{
  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 获取这些参数：

const route = useRoute();
const patientId = route.query.patientId;
const patientName = route.query.patientName;

六、API配置

6.1 门诊记录API

// @/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 字段：

meta: {
  title: '门诊就诊记录',
  icon: 'record',
  permissions: ['patient:outpatient:list']
}

7.3 路由缓存

如果需要禁用缓存（每次访问都重新加载），可以在 meta 中添加：

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