目录：

（1）前台用户系统-预约挂号详情-接口开发 

（2）前台用户系统-预约挂号详情-前端整合 

（3）前台用户系统-预约挂号-预约确认功能实现

（1）前台用户系统-预约挂号详情-接口开发 

当点击某一个科室进入详情页面，显示可预约的挂号信息

 点击某一个日期，回显示详情内容

 先完成后端接口：在service-hosp模块中

 HospitalApiController：继续添加接口：

 @ApiOperation(value = "获取可预约排班数据")@GetMapping("auth/getBookingScheduleRule/{page}/{limit}/{hoscode}/{depcode}")public Result getBookingSchedule(@ApiParam(name = "page", value = "当前页码", required = true)@PathVariable Integer page,@ApiParam(name = "limit", value = "每页记录数", required = true)@PathVariable Integer limit,@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable String hoscode,@ApiParam(name = "depcode", value = "科室code", required = true)@PathVariable String depcode) {return Result.ok(scheduleService.getBookingScheduleRule(page, limit, hoscode, depcode));}

ScheduleService：接口：

//获取可预约的排班数据Map getBookingScheduleRule(int page,int limit,String hoscode,String depcode);

实现类：

 //获取可预约的排班数据@Overridepublic Map getBookingScheduleRule(int page, int limit, String hoscode, String depcode) {Map result = new HashMap<>();//获取预约规则//根据医院编号获取预约规则Hospital hospital = hospitalService.getByHoscode(hoscode);if (hospital == null) {throw new HospitalException(ResultCodeEnum.DATA_ERROR);}BookingRule bookingRule = hospital.getBookingRule();//获取可预约日期的数据（分页）IPage iPage = this.getListDate(page, limit, bookingRule);//当前可预约日期List dateList = iPage.getRecords();//获取可预约日期里面科室的剩余预约数Criteria criteria = Criteria.where("hoscode").is(hoscode).and("depcode").is(depcode).and("workDate").in(dateList);Aggregation agg = Aggregation.newAggregation(Aggregation.match(criteria),Aggregation.group("workDate").first("workDate").as("workDate").count().as("docCount").sum("availableNumber").as("availableNumber").sum("reservedNumber").as("reservedNumber"));AggregationResults aggregateResult =mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);List scheduleVoList = aggregateResult.getMappedResults();//合并数据  map集合 key日期  value预约规则和剩余数量等Map scheduleVoMap = new HashMap<>();if (!CollectionUtils.isEmpty(scheduleVoList)) {scheduleVoMap = scheduleVoList.stream().collect(Collectors.toMap(BookingScheduleRuleVo::getWorkDate,BookingScheduleRuleVo -> BookingScheduleRuleVo));}//获取可预约排班规则List bookingScheduleRuleVoList = new ArrayList<>();for(int i=0,len=dateList.size();i baseMap = new HashMap<>();//医院名称baseMap.put("hosname", hospitalService.getHospName(hoscode));//科室Department department =departmentService.getDepartment(hoscode, depcode);//大科室名称baseMap.put("bigname", department.getBigname());//科室名称baseMap.put("depname", department.getDepname());//月baseMap.put("workDateString", new DateTime().toString("yyyy年MM月"));//放号时间baseMap.put("releaseTime", bookingRule.getReleaseTime());//停号时间baseMap.put("stopTime", bookingRule.getStopTime());result.put("baseMap", baseMap);return result;}//获取可预约日志分页数据private IPage getListDate(int page, int limit, BookingRule bookingRule) {//获取当天放号时间  年 月 日 小时 分钟DateTime releaseTime = this.getDateTime(new Date(), bookingRule.getReleaseTime());//获取预约周期Integer cycle = bookingRule.getCycle();//如果当天放号时间已经过去了，预约周期从后一天开始计算，周期+1if(releaseTime.isBeforeNow()) {cycle += 1;}//获取可预约所有日期，最后一天显示即将放号List dateList = new ArrayList<>();for(int i=0;i pageDateList = new ArrayList<>();int start = (page-1)*limit;int end = (page-1)*limit+limit;//如果可以显示数据小于7，直接显示if(end > dateList.size()) {end = dateList.size();}for(int i=start;i iPage = new com.baomidou.mybatisplus.extension.plugins.pagination.Page<>(page,7,dateList.size());iPage.setRecords(pageDateList);return iPage;}/*** 将Date日期（yyyy-MM-dd HH:mm）转换为DateTime*/private DateTime getDateTime(Date date, String timeString) {String dateTimeString = new DateTime(date).toString("yyyy-MM-dd") + " "+ timeString;DateTime dateTime = DateTimeFormat.forPattern("yyyy-MM-dd HH:mm").parseDateTime(dateTimeString);return dateTime;}

DepartmentService接口：

//根据科室编号和医院编号查询科室Department getDepartment(String hoscode, String depcode);

实现类：

 //根据科室编号和医院编号查询科室@Overridepublic Department getDepartment(String hoscode, String depcode) {return departmentRepository.getDepartmentByHoscodeAndDepcode(hoscode, depcode);}

另外一个访问接口： HospitalApiController：继续添加接口：

@ApiOperation(value = "获取排班数据")@GetMapping("auth/findScheduleList/{hoscode}/{depcode}/{workDate}")public Result findScheduleList(@ApiParam(name = "hoscode", value = "医院code", required = true)@PathVariable String hoscode,@ApiParam(name = "depcode", value = "科室code", required = true)@PathVariable String depcode,@ApiParam(name = "workDate", value = "排班日期", required = true)@PathVariable String workDate) {return Result.ok(scheduleService.getDetailSchedule(hoscode, depcode, workDate));}

ScheduleService：接口：添加 

 //根据医院编号 、科室编号和工作日期，查询排班详细信息List getDetailSchedule(String hoscode, String depcode, String workDate);

实现类： 

 //根据医院编号 、科室编号和工作日期，查询排班详细信息@Overridepublic List getDetailSchedule(String hoscode, String depcode, String workDate) {//根据参数查询mongodbList scheduleList =scheduleRepository.findScheduleByHoscodeAndDepcodeAndWorkDate(hoscode,depcode,new DateTime(workDate).toDate());//把得到list集合遍历，向设置其他值：医院名称、科室名称、日期对应星期scheduleList.stream().forEach(item->{this.packageSchedule(item);});return scheduleList;}//封装排班详情其他值 医院名称、科室名称、日期对应星期private void packageSchedule(Schedule schedule) {//设置医院名称  调用方法获取医院名称schedule.getParam().put("hosname",hospitalService.getHospName(schedule.getHoscode()));//设置科室名称  根据科室编号和医院编号查询科室名称schedule.getParam().put("depname",departmentService.getDepName(schedule.getHoscode(),schedule.getDepcode()));//设置日期对应星期schedule.getParam().put("dayOfWeek",this.getDayOfWeek(new DateTime(schedule.getWorkDate())));}

（2）前台用户系统-预约挂号详情-前端整合 

在这个页面，点击某一个科室，进行跳转到详情页面 

创建schedule.vue页面 

 在hosp.js中继续添加访问的 接口：

测试：点击第一个科室：

下面完成点击剩余按钮，可以做预约挂号

（3）前台用户系统-预约挂号-预约确认功能实现

• 预约确认

1. 根据排班id获取排班信息，在页面展示
2. 选择就诊人
3. 预约下单

首先开发接口：

在HospiApiController中继续添加：

@ApiOperation(value = "获取排班id获取排班数据")@GetMapping("getSchedule/{scheduleId}")public Result getSchedule(@PathVariable String scheduleId) {Schedule schedule = scheduleService.getScheduleId(scheduleId);return Result.ok(schedule);}

 ScheduleService接口继续添加：

//获取排班id获取排班数据Schedule getScheduleId(String scheduleId);

实习类：

 //获取排班id获取排班数据@Overridepublic Schedule getScheduleId(String scheduleId) {Schedule schedule = scheduleRepository.findById(scheduleId).get();return this.packageSchedule(schedule);}

详情页面：跳转路径

创建booking.vue页面：

 在hosp.js中继续添加访问

 测试:

点击第一个剩余22按钮：

下面完成确认挂号功能 实现