小程序排班展示系统

项目介绍

小程序排班展示系统是挂在微信小程序里的医生坐诊排班页面。患者打开小程序后，可以先选科室（整形、皮肤、微创、中医、口腔），再选该科室下的具体项目，最后点开任意一天，就能看到当天哪位医生坐诊、坐诊时段是什么、哪位医生休息。数据来自医院信息中心的排班库，页面只负责查询和展示，不改动排班数据本身。

项目分为两个工程：doctorshift 是基于 Spring Boot 的查询服务，doctorshift-vui 是基于 Vue 3 的移动端页面。页面通过 weixin-js-sdk 的 miniProgram.navigateTo 跳转小程序内部页面，说明它作为 web-view 页面运行在微信小程序环境里，与小程序原生页面无缝衔接。

项目架构

后端使用 Spring Boot 2.4.2 + Java 8，数据访问层基于 MyBatis-Plus，数据库为 SQL Server，连接池使用 HikariCP，并启用了 HTTPS 传输。整体按 Controller、Service、Mapper 三层组织，接口不多但职责清晰：

• POST /getAttendanceByDocterByDate：按部门、项目、日期查询当日排班列表
• GET /getDoctorProjectNames：查询科室与项目配置，用于前端渲染筛选菜单

前端是 Vite 5 构建的 Vue 3 单页应用，组件库选用 Vant 3（van-tabbar、van-tabs、van-nav-bar 等移动端组件），配合 amfe-flexible 与 postcss-pxtorem 做移动端适配。axios 封装了请求与响应拦截，统一携带 token、处理 401 跳转和网络错误提示；路由、状态管理与 API 层独立成模块，通过 provide/inject 注入组件使用。

核心功能

• 三级筛选排班：顶部科室 tabbar 联动下方项目 tab，再配合近七天日期 tab，三个维度组合查询当日排班，切换任一维度都会重新拉取数据
• 近七天日历视图：日期栏动态生成七天的”周X + 几号”，默认定位今天，点击后换算具体日期并刷新列表
• 排班数据去重：核心查询在 SQL 中使用 ROW_NUMBER() OVER (PARTITION BY doctorName, workDate ORDER BY sort) 按医生与工作日分组排序，外层取 top1 = 1，保证每位医生每天只返回一条最新排班记录
• 坐诊状态展示：列表展示医生姓名与班次信息，resetFlag 为假时显示”坐诊时间 + 时段”，为真时显示”休息”，无排班时给出”暂未排班”的空态提示
• 跳转小程序预约：列表项右侧箭头通过微信 JS-SDK 调用 wx.miniProgram.navigateTo 跳转到小程序内部对应医生的页面

后端查询还做了动态条件处理：workDate 用半开区间 workDate >= ? AND workDate < DATEADD(day, 1, ?) 锁定单日，depName、projectName 在非空时才参与过滤，请求参数通过 @NotNull 校验必填，日期格式限定为 yyyy-MM-dd。

功能截图

暂无运行截图。

快速上手

后端为 Maven 工程，在 doctorshift 目录执行 mvn spring-boot:run 启动服务，需要预先在 SQL Server 中建好 attendance_doctor_schedule_ads（医生排班表）和 attendance_project（科室项目配置表）两张表，并在 application.yml 中配置数据库连接与证书信息。前端在 doctorshift-vui 目录执行 npm install 后运行 npm run dev 本地调试，构建产物通过 vite build 输出，base 配置为 /doctor/，部署后嵌入微信小程序 web-view 即可联调跳转功能。

总结

这个项目用最简洁的接口设计解决了”排班怎么给患者看”的问题：后端把复杂的数据去重收敛进一条 SQL，前端用三层联动筛选把操作成本降到最低。整体结构清晰、代码量精炼，排班展示之外还可以继续扩展出预约挂号、医生简介等能力，是一套很实用的医疗机构信息展示样板。