247 lines
5.6 KiB
Markdown
247 lines
5.6 KiB
Markdown
# 患者预约挂号功能实现总结
|
|
|
|
## 实现完成 ✅
|
|
|
|
已成功实现基于医生排班的患者预约挂号系统，界面设计参考提供的UI原型图。
|
|
|
|
## 核心文件
|
|
|
|
### 1. API接口文件
|
|
**文件**: `admin/src/api/doctor.ts`
|
|
|
|
新增接口:
|
|
- `getAvailableSlots()` - 获取医生可用时间段
|
|
- `createAppointment()` - 创建预约
|
|
- `cancelAppointment()` - 取消预约
|
|
- `appointmentLists()` - 获取预约列表
|
|
- `appointmentDetail()` - 获取预约详情
|
|
|
|
### 2. 预约弹窗组件
|
|
**文件**: `admin/src/views/tcm/diagnosis/appointment.vue`
|
|
|
|
主要功能:
|
|
- ✅ 显示患者上次就诊记录
|
|
- ✅ 预约方式选择（选择时段/选择医生）
|
|
- ✅ 预约类型选择（视频问诊）
|
|
- ✅ 患者信息显示
|
|
- ✅ 医生列表选择（带可用号源数量标签）
|
|
- ✅ 日期选择（未来7天，横向按钮布局）
|
|
- ✅ 时间段网格显示（4列布局，30分钟间隔）
|
|
- ✅ 备注输入
|
|
|
|
### 3. 诊断列表页面
|
|
**文件**: `admin/src/views/tcm/diagnosis/index.vue`
|
|
|
|
更新内容:
|
|
- ✅ 导入预约组件
|
|
- ✅ 添加预约组件引用
|
|
- ✅ 实现挂号按钮点击处理函数
|
|
- ✅ 挂号成功后刷新列表
|
|
|
|
## 界面特性
|
|
|
|
### 视觉设计
|
|
1. **医生选择**
|
|
- 单选按钮形式
|
|
- 每个医生显示可用号源标签
|
|
- 有号源：绿色标签 + 数字
|
|
- 无号源：灰色标签 + "无"
|
|
|
|
2. **日期选择**
|
|
- 横向按钮布局
|
|
- 显示格式：02月26日 (四)
|
|
- 选中状态：蓝色按钮高亮
|
|
|
|
3. **时间段显示**
|
|
- 4列网格布局
|
|
- 每个时间段包含时间和号源标签
|
|
- 可预约：白色背景 + 蓝色标签
|
|
- 不可预约：灰色背景 + 灰色"无"标签
|
|
- 已选择：蓝色背景 + 白色文字
|
|
|
|
### 交互逻辑
|
|
1. **级联选择**
|
|
- 选择医生 → 加载该医生的可用时间段
|
|
- 选择日期 → 刷新时间段列表
|
|
- 选择时间段 → 高亮显示
|
|
|
|
2. **数据验证**
|
|
- 必须选择医生
|
|
- 必须选择日期
|
|
- 必须选择时间段
|
|
- 不可预约的时间段禁止点击
|
|
|
|
3. **用户反馈**
|
|
- 加载状态显示
|
|
- 操作成功/失败提示
|
|
- 空状态友好提示
|
|
|
|
## 技术实现
|
|
|
|
### 时间段生成
|
|
```typescript
|
|
// 30分钟间隔
|
|
// 上午: 09:00-12:00
|
|
// 下午: 13:00-20:30
|
|
```
|
|
|
|
### 状态管理
|
|
```typescript
|
|
- selectedDoctorId: 选中的医生ID
|
|
- form.date: 选中的日期
|
|
- form.appointmentTime: 选中的时间
|
|
- timeSlots: 可用时间段列表
|
|
```
|
|
|
|
### 数据流
|
|
```
|
|
1. 打开弹窗 → 加载医生列表
|
|
2. 选择医生 + 日期 → 加载时间段
|
|
3. 选择时间段 → 更新表单
|
|
4. 确认预约 → 调用API → 成功提示 → 关闭弹窗
|
|
```
|
|
|
|
## 后端API要求
|
|
|
|
### 1. 获取可用时间段
|
|
```
|
|
GET /doctor.appointment/availableSlots
|
|
参数: { doctor_id, date, period }
|
|
返回: { slots: [{ time, available, quota }] }
|
|
```
|
|
|
|
### 2. 创建预约
|
|
```
|
|
POST /doctor.appointment/create
|
|
参数: {
|
|
patient_id,
|
|
doctor_id,
|
|
appointment_date,
|
|
period,
|
|
appointment_time,
|
|
appointment_type,
|
|
remark
|
|
}
|
|
```
|
|
|
|
### 3. 医生可用号源统计（建议新增）
|
|
```
|
|
GET /doctor.appointment/doctorAvailability
|
|
参数: { doctor_id, date }
|
|
返回: { available_count }
|
|
```
|
|
|
|
## 数据库设计
|
|
|
|
### doctor_appointment 表
|
|
```sql
|
|
- id: 主键
|
|
- patient_id: 患者ID
|
|
- doctor_id: 医生ID
|
|
- roster_id: 排班ID
|
|
- appointment_date: 预约日期
|
|
- period: 时段(morning/afternoon)
|
|
- appointment_time: 预约时间
|
|
- appointment_type: 预约类型(video/text/phone)
|
|
- status: 状态(1=已预约,2=已取消,3=已完成)
|
|
- remark: 备注
|
|
- create_time: 创建时间
|
|
- update_time: 更新时间
|
|
|
|
唯一索引: (doctor_id, appointment_date, appointment_time, status)
|
|
```
|
|
|
|
## 使用方法
|
|
|
|
### 在诊断列表中调用
|
|
```vue
|
|
<template>
|
|
<!-- 挂号按钮 -->
|
|
<el-button
|
|
v-perms="['tcm.diagnosis/guahao']"
|
|
type="success"
|
|
link
|
|
@click="handleAppointment(row)"
|
|
>
|
|
挂号
|
|
</el-button>
|
|
|
|
<!-- 预约组件 -->
|
|
<appointment-popup ref="appointmentRef" @success="getLists" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import AppointmentPopup from './appointment.vue'
|
|
|
|
const appointmentRef = ref()
|
|
|
|
const handleAppointment = (row) => {
|
|
appointmentRef.value?.open(row)
|
|
}
|
|
</script>
|
|
```
|
|
|
|
## 权限配置
|
|
|
|
需要在后端添加权限节点:
|
|
- `tcm.diagnosis/guahao` - 挂号权限
|
|
|
|
## 测试要点
|
|
|
|
### 功能测试
|
|
- [ ] 医生列表正确加载
|
|
- [ ] 日期选择器显示未来7天
|
|
- [ ] 时间段根据医生和日期正确加载
|
|
- [ ] 已占用时间段不可选择
|
|
- [ ] 预约成功后列表刷新
|
|
- [ ] 表单验证正确工作
|
|
|
|
### 边界测试
|
|
- [ ] 医生无排班时的处理
|
|
- [ ] 所有时间段已满时的提示
|
|
- [ ] 网络错误时的错误处理
|
|
- [ ] 并发预约的冲突处理
|
|
|
|
### UI测试
|
|
- [ ] 响应式布局在不同屏幕尺寸下正常
|
|
- [ ] 选中状态视觉反馈明显
|
|
- [ ] 加载状态显示正确
|
|
- [ ] 空状态提示友好
|
|
|
|
## 后续优化建议
|
|
|
|
### 功能增强
|
|
1. **智能推荐**: 根据患者历史推荐医生
|
|
2. **快速预约**: 一键预约最近可用时间
|
|
3. **预约提醒**: 预约前发送提醒通知
|
|
4. **预约改期**: 支持修改预约时间
|
|
5. **候补机制**: 号源满时支持候补
|
|
|
|
### 性能优化
|
|
1. **缓存策略**: 缓存医生列表和排班数据
|
|
2. **懒加载**: 时间段按需加载
|
|
3. **防抖处理**: 避免频繁请求
|
|
|
|
### 用户体验
|
|
1. **日历视图**: 提供月历视图
|
|
2. **收藏医生**: 快速访问常用医生
|
|
3. **历史记录**: 显示患者预约历史
|
|
4. **评价系统**: 就诊后评价医生
|
|
|
|
## 文档
|
|
|
|
- `APPOINTMENT_SYSTEM.md` - 完整系统设计文档
|
|
- `APPOINTMENT_UI_UPDATE.md` - UI更新说明
|
|
- 本文件 - 实现总结
|
|
|
|
## 状态
|
|
|
|
✅ 前端实现完成
|
|
⏳ 等待后端API实现
|
|
⏳ 等待集成测试
|
|
|
|
---
|
|
|
|
**创建时间**: 2024-02-26
|
|
**最后更新**: 2024-02-26
|