ZYT/zyt

Fork 0

Files

T

Your Name ab77f5488d 新增功能

2026-03-04 15:32:30 +08:00

5.6 KiB

Raw Blame History

患者预约挂号功能实现总结

实现完成 ✅

已成功实现基于医生排班的患者预约挂号系统，界面设计参考提供的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

更新内容:

✅ 导入预约组件
✅ 添加预约组件引用
✅ 实现挂号按钮点击处理函数
✅ 挂号成功后刷新列表

界面特性

视觉设计

医生选择
- 单选按钮形式
- 每个医生显示可用号源标签
- 有号源：绿色标签 + 数字
- 无号源：灰色标签 + "无"
日期选择
- 横向按钮布局
- 显示格式：02月26日 (四)
- 选中状态：蓝色按钮高亮
时间段显示
- 4列网格布局
- 每个时间段包含时间和号源标签
- 可预约：白色背景 + 蓝色标签
- 不可预约：灰色背景 + 灰色"无"标签
- 已选择：蓝色背景 + 白色文字

交互逻辑

级联选择
- 选择医生 → 加载该医生的可用时间段
- 选择日期 → 刷新时间段列表
- 选择时间段 → 高亮显示
数据验证
- 必须选择医生
- 必须选择日期
- 必须选择时间段
- 不可预约的时间段禁止点击
用户反馈
- 加载状态显示
- 操作成功/失败提示
- 空状态友好提示

技术实现

时间段生成

// 30分钟间隔
// 上午: 09:00-12:00
// 下午: 13:00-20:30

状态管理

- 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 表

- 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)

使用方法

在诊断列表中调用

<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测试

响应式布局在不同屏幕尺寸下正常
选中状态视觉反馈明显
加载状态显示正确
空状态提示友好

后续优化建议

功能增强

智能推荐: 根据患者历史推荐医生
快速预约: 一键预约最近可用时间
预约提醒: 预约前发送提醒通知
预约改期: 支持修改预约时间
候补机制: 号源满时支持候补

性能优化

缓存策略: 缓存医生列表和排班数据
懒加载: 时间段按需加载
防抖处理: 避免频繁请求

用户体验

日历视图: 提供月历视图
收藏医生: 快速访问常用医生
历史记录: 显示患者预约历史
评价系统: 就诊后评价医生

文档

APPOINTMENT_SYSTEM.md - 完整系统设计文档
APPOINTMENT_UI_UPDATE.md - UI更新说明
本文件 - 实现总结

状态

✅ 前端实现完成 ⏳ 等待后端API实现 ⏳ 等待集成测试

创建时间: 2024-02-26 最后更新: 2024-02-26

5.6 KiB Raw Blame History