• YYGH-8-预约挂号

    挂号列表

    image-20220626222106817

    我们要做成这样的效果.

    分析

    1.首先我们要根据参数在mongodb中读出医院,然后根据医院编号和参数读出科室。同时在医院中有预约规则根据预约规则。计算出周期和要显示的天数。

    service中的getBookingScheduleRule方法

        //根据医院编号获取预约规则
    Hospital hospital = hospitalService.getByHoscode(hoscode);
    if (ObjectUtils.isEmpty(hospital)) {
        throw new YyghException(ResultCodeEnum.DATA_ERROR);
    }
    BookingRule bookingRule = hospital.getBookingRule();
    //获取可预约日期的数据(分页)
    IPage iPage = this.getListDate(page, limit, bookingRule);
    //获取当前可预约的时间
    List<Date> dateList = iPage.getRecords();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    获取可预约时间的方法

    //获取可预约日期的数据(分页)
private IPage getListDate(Integer page, Integer limit, BookingRule bookingRule) {
    //当天放号时间
    DateTime releaseTime = this.getDateTime(new Date(), bookingRule.getReleaseTime());
    //预约周期
    Integer cycle = bookingRule.getCycle();
    //如果当天放号时间已过，则预约周期后一天为即将放号时间，周期加1
    if (releaseTime.isAfterNow()) {
        cycle += 1;
    }
    //可预约所有日期，最后一天显示即将放号倒计时
    List<Date> dateList = new ArrayList<>();
    for (int i = 0; i < cycle; i++) {
        //计算当前预约日期
        DateTime curDateTime = new DateTime().plusDays(i);
        String dateString = curDateTime.toString("yyyy-MM-dd");
        dateList.add(new DateTime(dateString).toDate());
    }
    //因为周期不同,每页显示的日期最多7天时间,超过七天分页
    List<Date> 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 < end; i++) {
        pageDateList.add(dateList.get(i));
    }
    //如果大于7,进行分页
    IPage<Date> 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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    2.根据计算出来的可预约时间找到对应的排班信息,同时利用mongoTemplate.aggregate的sum方法,来计算可用的预约数，为了方便我们之后演示我们需要建立一个map,key是工作时间value是预约规则和剩余数量

    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<BookingScheduleRuleVo> bookingScheduleRuleVos = mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);
List<BookingScheduleRuleVo> scheduleVoList = bookingScheduleRuleVos.getMappedResults();
        HashMap<Date, BookingScheduleRuleVo> scheduleRuleVoMap = new HashMap<>();
        if (!CollectionUtils.isEmpty(scheduleVoList)) {
            scheduleRuleVoMap = (HashMap<Date, BookingScheduleRuleVo>) scheduleVoList.stream().collect(Collectors.toMap(BookingScheduleRuleVo::getWorkDate,
                    BookingScheduleRuleVo -> BookingScheduleRuleVo));
        }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    3.根据日期对应排班的map,整理出可预约的

    //获取可预约的排班规则
private ArrayList<BookingScheduleRuleVo> getScheduleRuleVos(Integer page, BookingRule bookingRule, IPage iPage, List<Date> dateList, HashMap<Date, BookingScheduleRuleVo> scheduleRuleVoMap) {
    ArrayList<BookingScheduleRuleVo> bookingScheduleRuleVoList = new ArrayList<>();
    for (int i = 0, len = dateList.size(); i < len; i++) {
        Date date = dateList.get(i);

        BookingScheduleRuleVo bookingScheduleRuleVo = scheduleRuleVoMap.get(toDate(date));
        if (null == bookingScheduleRuleVo) { // 说明当天没有排班医生
            bookingScheduleRuleVo = new BookingScheduleRuleVo();
            //就诊医生人数
            bookingScheduleRuleVo.setDocCount(0);
            //科室剩余预约数  -1表示无号
            bookingScheduleRuleVo.setAvailableNumber(-1);
        }
        bookingScheduleRuleVo.setWorkDate(date);
        bookingScheduleRuleVo.setWorkDateMd(date);
        //计算当前预约日期为周几
        String dayOfWeek = this.getDayOfWeek(new DateTime(date));
        bookingScheduleRuleVo.setDayOfWeek(dayOfWeek);

        //最后一页最后一条记录为即将预约   状态 0：正常 1：即将放号 -1：当天已停止挂号
        if (i == len - 1 && page == iPage.getPages()) {
            bookingScheduleRuleVo.setStatus(1);
        } else {
            bookingScheduleRuleVo.setStatus(0);
        }
        //当天预约如果过了停号时间， 不能预约
        if (i == 0 && page == 1) {
            DateTime stopTime = this.getDateTime(new Date(), bookingRule.getStopTime());
            if (stopTime.isBeforeNow()) {
                //停止预约
                bookingScheduleRuleVo.setStatus(-1);
            }
        }
        bookingScheduleRuleVoList.add(bookingScheduleRuleVo);
    }
    return bookingScheduleRuleVoList;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    4.把数据都封装到map里面返回

    //可预约日期规则数据
result.put("bookingScheduleList", bookingScheduleRuleVoList);
result.put("total", iPage.getTotal());
//其他基础数据
Map<String, String> 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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    image-20220626222125823

    controller

    @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.getScheduleDetail(hoscode, depcode, workDate));
}

@GetMapping("getSchedule/{scheduleId}")
public Result getSchedule(@PathVariable String scheduleId) {
    return Result.ok(scheduleService.getSchedule(scheduleId));
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    3.1封装api请求

    在/api/hosp.js添加方法

    getBookingScheduleRule(page, limit, hoscode, depcode) {
    return request({
        url: `${api_name}/auth/getBookingScheduleRule/${page}/${limit}/${hoscode}/${depcode}`,
        method: 'get'
    })
},
    
findScheduleList(hoscode, depcode, workDate) {
    return request({
        url: `${api_name}/auth/findScheduleList/${hoscode}/${depcode}/${workDate}`,
        method: 'get'
    })
},


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    3.2 页面展示

    创建/pages/hospital/schedule.vue组件

    <template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item selected">
        <span class="v-link selected dark" :onclick="'javascript:window.location=\'/hosp/'+hoscode+'\''">预约挂号 </span>
      </div>
      <div class="nav-item ">
        <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hosp/detail/'+hoscode+'\''"> 医院详情 </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hosp/notice/'+hoscode+'\''"> 预约须知 </span>
      </div>
      <div class="nav-item "><span
        class="v-link clickable dark"> 停诊信息 </span>
      </div>
      <div class="nav-item "><span
        class="v-link clickable dark"> 查询/取消 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="hospital-source-list">
        <div class="header-wrapper" style="justify-content:normal">
          <span class="v-link clickable" @click="show()">{{ baseMap.hosname}}</span>
          <div class="split"></div>
          <div>{{ baseMap.bigname }}</div>
        </div>
        <div class="title mt20"> {{ baseMap.depname }}</div>
        <!-- 号源列表 #start -->
        <div class="mt60">
          <div class="title-wrapper">{{ baseMap.workDateString }}</div>
          <div class="calendar-list-wrapper">
            <!-- item.depNumber == -1 ? 'gray space' : item.depNumber == 0 ? 'gray' : 'small small-space'-->
            <!-- selected , index == activeIndex ? 'selected' : ''-->
            <div :class="'calendar-item '+item.curClass" style="width: 124px;"
                 v-for="(item, index) in bookingScheduleList" :key="item.id"
                 @click="selectDate(item, index)">
              <div class="date-wrapper"><span>{{ item.workDate }}</span><span class="week">{{ item.dayOfWeek }}</span></div>
              <div class="status-wrapper" v-if="item.status == 0">{{ item.availableNumber == -1 ? '无号' : item.availableNumber == 0 ? '约满' : '有号' }}</div>
              <div class="status-wrapper" v-if="item.status == 1">即将放号</div>
              <div class="status-wrapper" v-if="item.status == -1">停止挂号</div>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
             class="pagination"
             layout="prev, pager, next"
             :current-page="page"
             :total="total"
             :page-size="limit"
             @current-change="getPage">
          </el-pagination>
        </div>
        <!-- 即将放号 #start-->
        <div class="countdown-wrapper mt60" v-if="!tabShow">
          <div class="countdonw-title"> {{ time }}<span class="v-link selected">{{ baseMap.releaseTime }} </span>放号</div>
          <div class="countdown-text"> 倒 计 时
            <div>
              <span class="number">{{ timeString }}</span>
            </div>
          </div>
        </div>
        <!-- 即将放号 #end-->
        <!-- 号源列表 #end -->
        <!-- 上午号源 #start -->
        <div class="mt60" v-if="tabShow">
          <div class="">
            <div class="list-title">
              <div class="block"></div>
              上午号源
            </div>
            <div v-for="item in scheduleList" :key="item.id" v-if="item.workTime == 0">
              <div class="list-item">
                <div class="item-wrapper">
                  <div class="title-wrapper">
                    <div class="title">{{ item.title }}</div>
                    <div class="split"></div>
                    <div class="name"> {{ item.docname }}</div>
                  </div>
                  <div class="special-wrapper">{{ item.skill }}</div>
                </div>
                <div class="right-wrapper">
                  <div class="fee"> ￥{{ item.amount }}
                  </div>
                  <div class="button-wrapper">
                    <div class="v-button" @click="booking(item.id, item.availableNumber)" :style="item.availableNumber == 0 || pageFirstStatus == -1 ? 'background-color: #7f828b;' : ''">
                      <span>剩余<span class="number">{{ item.availableNumber }}</span></span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 上午号源 #end -->
        <!-- 下午号源 #start -->
        <div class="mt60" v-if="tabShow">
          <div class="">
            <div class="list-title">
              <div class="block"></div>
              下午号源
            </div>
            <div v-for="item in scheduleList" :key="item.id" v-if="item.workTime == 1">
              <div class="list-item">
                <div class="item-wrapper">
                  <div class="title-wrapper">
                    <div class="title">{{ item.title }}</div>
                    <div class="split"></div>
                    <div class="name"> {{ item.docname }}</div>
                  </div>
                  <div class="special-wrapper">{{ item.skill }}</div>
                </div>
                <div class="right-wrapper">
                  <div class="fee"> ￥{{ item.amount }}
                  </div>
                  <div class="button-wrapper">
                    <div class="v-button" @click="booking(item.id, item.availableNumber)" :style="item.availableNumber == 0 || pageFirstStatus == -1 ? 'background-color: #7f828b;' : ''">
                      <span>剩余<span class="number">{{ item.availableNumber }}</span></span></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 下午号源 #end -->
      </div>
    </div>
    <!-- 右侧内容 #end -->
  </div>
  <!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'

import hospitalApi from '@/api/hosp'
export default {
  data() {
    return {
      hoscode: null,
      depcode: null,
      workDate: null,
      bookingScheduleList: [],
      scheduleList : [],
      baseMap : {},
      nextWorkDate: null, // 下一页第一个日期
      preWorkDate: null, // 上一页第一个日期
      tabShow: true, //挂号列表与即将挂号切换
      activeIndex: 0,

      page: 1, // 当前页
      limit: 7, // 每页个数
      total: 1, // 总页码

      timeString: null,
      time: '今天',
      timer: null,

      pageFirstStatus: 0 // 第一页第一条数据状态
    }
  },

  created() {
    this.hoscode = this.$route.query.hoscode
    this.depcode = this.$route.query.depcode
    this.workDate = this.getCurDate()
    this.getBookingScheduleRule()
  },

  methods: {
    getPage(page = 1) {
      this.page = page
      this.workDate = null
      this.activeIndex = 0

      this.getBookingScheduleRule()
    },

    getBookingScheduleRule() {
      hospitalApi.getBookingScheduleRule(this.page, this.limit, this.hoscode, this.depcode).then(response => {
        this.bookingScheduleList = response.data.bookingScheduleList
        this.total = response.data.total
        this.baseMap = response.data.baseMap

        this.dealClass()

        // 分页后workDate=null，默认选中第一个
        if (this.workDate == null) {
          this.workDate = this.bookingScheduleList[0].workDate
        }
        //判断当天是否停止预约 status == -1 停止预约
        if(this.workDate == this.getCurDate()) {
          this.pageFirstStatus = this.bookingScheduleList[0].status
        } else {
          this.pageFirstStatus = 0
        }
        this.findScheduleList()
      })
    },

    findScheduleList() {
      hospitalApi.findScheduleList(this.hoscode, this.depcode, this.workDate).then(response => {
        this.scheduleList = response.data
      })
    },

    selectDate(item, index) {
      this.workDate = item.workDate
      this.activeIndex = index

      //清理定时
      if(this.timer != null) clearInterval(this.timer)

      // 是否即将放号
      if(item.status == 1) {
        this.tabShow = false
        // 放号时间
        let releaseTime = new Date(this.getCurDate() + ' ' + this.baseMap.releaseTime).getTime()
        let nowTime = new Date().getTime();
        this.countDown(releaseTime, nowTime)

        this.dealClass();
      } else {
        this.tabShow = true

        this.getBookingScheduleRule()
      }
    },

    dealClass() {
      //处理样式
      for (let i = 0; i < this.bookingScheduleList.length; i++) {
        // depNumber -1:无号 0：约满 >0：有号
        let curClass = this.bookingScheduleList[i].availableNumber == -1 ? 'gray space' : this.bookingScheduleList[i].availableNumber == 0 ? 'gray' : 'small small-space'
        curClass += i == this.activeIndex ? ' selected' : ''
        this.bookingScheduleList[i].curClass = curClass
      }
    },

    getCurDate() {
      let datetime = new Date()
      let year = datetime.getFullYear()
      let month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
      let date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
      return year + '-' + month + '-' + date
    },

    countDown(releaseTime, nowTime) {
      //计算倒计时时长
      let secondes = 0;
      if(releaseTime > nowTime) {
        this.time = '今天'
        //当前时间到放号时间的时长
        secondes = Math.floor((releaseTime - nowTime) / 1000);
      } else {
        this.time = '明天'
        //计算明天放号时间
        let releaseDate = new Date(releaseTime)
        releaseTime = new Date(releaseDate.setDate(releaseDate.getDate() + 1)).getTime()
        //当前时间到明天放号时间的时长
        secondes = Math.floor((releaseTime - nowTime) / 1000);
      }

      //定时任务
      this.timer = setInterval(() => {
        secondes = secondes - 1
        if(secondes <= 0) {
          clearInterval(timer);
          this.init()
        }
        this.timeString = this.convertTimeString(secondes)
      }, 1000);
      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
      })
    },

    convertTimeString(allseconds) {
      if(allseconds <= 0) return '00:00:00'
      // 计算天数
      let days = Math.floor(allseconds / (60 * 60 * 24));
      // 小时
      let hours = Math.floor((allseconds - (days * 60 * 60 * 24)) / (60 * 60));
      // 分钟
      let minutes = Math.floor((allseconds - (days * 60 * 60 * 24) - (hours * 60 * 60)) / 60);
      // 秒
      let seconds = allseconds - (days * 60 * 60 * 24) - (hours * 60 * 60) - (minutes * 60);

      //拼接时间
      let timString = "";
      if (days > 0) {
        timString = days + "天:";
      }
      return timString += hours + " 时 " + minutes + " 分 " + seconds + " 秒 ";
    },

    show() {
      window.location.href = '/hospital/' + this.hoscode
    },

    booking(scheduleId, availableNumber) {
      debugger
      if(availableNumber == 0 || this.pageFirstStatus == -1) {
        this.$message.error('不能预约')
      } else {
        window.location.href = '/hospital/booking?scheduleId=' + scheduleId
      }
    }
  }
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314

    预约确认

    image-20220627003546997

    Controller

    @GetMapping("inner/getScheduleOrderVo/{scheduleId}")
public ScheduleOrderVo getScheduleOrderVo(@PathVariable String scheduleId) {
    return scheduleService.getScheduleOrderVo(scheduleId);
}

    • 1
    • 2
    • 3
    • 4

    service

    @Override
public ScheduleOrderVo getScheduleOrderVo(String scheduleId) {
    ScheduleOrderVo scheduleOrderVo = new ScheduleOrderVo();
    //获取排班信息
    Schedule schedule = scheduleRepository.findById(scheduleId).get();
    if (ObjectUtils.isEmpty(schedule)) {
        throw new YyghException(ResultCodeEnum.PARAM_ERROR);
    }
    //获取预约挂号的规则
    Hospital hoscode = hospitalService.getByHoscode(schedule.getHoscode());
    if (ObjectUtils.isEmpty(hoscode)) {
        throw new YyghException(ResultCodeEnum.PARAM_ERROR);
    }
    BookingRule bookingRule = hoscode.getBookingRule();
    if (ObjectUtils.isEmpty(bookingRule)) {
        throw new YyghException(ResultCodeEnum.PARAM_ERROR);
    }

    //把获取的数据设置到scheduleOrderVo
    BeanUtils.copyProperties(schedule, scheduleOrderVo);
    scheduleOrderVo.setHosname(hospitalService.getHospName(schedule.getHoscode()));
    scheduleOrderVo.setDepname(departmentService.getDepName(schedule.getHoscode(), schedule.getDepcode()));
    //退号截止天数（如：就诊前一天为-1，当天为0）
    int quitDay = bookingRule.getQuitDay();
    DateTime startTime = getDateTime(scheduleOrderVo, schedule, bookingRule, quitDay);
    scheduleOrderVo.setStartTime(startTime.toDate());
    return scheduleOrderVo;
}

private DateTime getDateTime(ScheduleOrderVo scheduleOrderVo, Schedule schedule, BookingRule bookingRule, int quitDay) {
    DateTime quitTime = this.getDateTime(new DateTime(schedule.getWorkDate()).plusDays(quitDay).toDate(), bookingRule.getQuitTime());
    scheduleOrderVo.setQuitTime(quitTime.toDate());

    //预约开始时间
    DateTime startTime = this.getDateTime(new Date(), bookingRule.getReleaseTime());
    scheduleOrderVo.setStartTime(startTime.toDate());

    //预约截止时间
    DateTime endTime = this.getDateTime(new DateTime().plusDays(bookingRule.getCycle()).toDate(), bookingRule.getStopTime());
    scheduleOrderVo.setEndTime(endTime.toDate());

    //当天停止挂号时间
    DateTime stopTime = this.getDateTime(new Date(), bookingRule.getStopTime());
    return startTime;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    前端

    在/api/hosp/hospital.js添加方法

    getSchedule(id) {
return request({
  url: `${api_name}/getSchedule/${id}`,
  method: 'get'
})
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    创建/pages/hospital/booking.vue组件

    <template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item selected">
        <span class="v-link selected dark" :onclick="'javascript:window.location=\'/hospital/'+schedule.hoscode+'\''">预约挂号 </span>
      </div>
      <div class="nav-item ">
        <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hospital/detail/'+schedule.hoscode+'\''"> 医院详情 </span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark" :onclick="'javascript:window.location=\'/hospital/notice/'+schedule.hoscode+'\''"> 预约须知 </span>
      </div>
      <div class="nav-item "><span
        class="v-link clickable dark"> 停诊信息 </span>
      </div>
      <div class="nav-item "><span
        class="v-link clickable dark"> 查询/取消 </span>
      </div>
    </div>
    <!-- 左侧导航 #end -->

    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="hospital-order">
        <div class="header-wrapper">
          <div class="title mt20"> 确认挂号信息</div>
          <div>
            <div class="sub-title">
              <div class="block"></div>
              选择就诊人：
            </div>
            <div class="patient-wrapper">
              <div >
                <div class="v-card clickable item ">
                  <div class="inline" v-for="(item,index) in patientList" :key="item.id"
                       @click="selectPatient(index)" style="margin-right: 10px;">
                    <!-- 选中 selected  未选中去掉selected-->
                    <div :class="activeIndex == index ? 'item-wrapper selected' : 'item-wrapper'">
                      <div>
                        <div class="item-title">{{ item.name }}</div>
                        <div>{{ item.param.certificatesTypeString }}</div>
                        <div>{{ item.certificatesNo }}</div>
                      </div>
                      <img src="//img.114yygh.com/static/web/checked.png" class="checked">
                    </div>
                  </div>
                </div>
              </div>
              <div class="item space add-patient v-card clickable">
                <div class="">
                  <div class="item-add-wrapper" @click="addPatient()"> +
                    添加就诊人
                  </div>
                </div>
              </div>
              <div class="el-loading-mask" style="display: none;">
                <div class="el-loading-spinner">
                  <svg viewBox="25 25 50 50" class="circular">
                    <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                  </svg>
                </div>
              </div>
            </div>
            <!-- 就诊人，选中显示 -->
            <div class="sub-title" v-if="patientList.length > 0">
              <div class="block"></div>
              选择就诊卡： <span class="card-tips"><span
              class="iconfont"></span> 如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销</span>
            </div>

            <el-card class="patient-card" shadow="always" v-if="patientList.length > 0">
              <div slot="header" class="clearfix">
                <div><span class="name"> {{ patient.name }} {{ patient.certificatesNo }} 居民身份证</span></div>
              </div>
              <div class="card SELF_PAY_CARD">
                <div class="info"><span class="type">{{ patient.isInsure == 0 ? '自费' : '医保'}}</span><span class="card-no">{{ patient.certificatesNo }}</span><span
                  class="card-view">居民身份证</span></div>
                <span class="operate"></span></div>
              <div class="card">
                <div class="text bind-card"></div>
              </div>
            </el-card>

            <div class="sub-title">
              <div class="block"></div>
              挂号信息
            </div>
            <div class="content-wrapper">
              <el-form ref="form">
                <el-form-item label="就诊日期：">
                  <div class="content"><span>{{ schedule.workDate }} {{ schedule.param.dayOfWeek }} {{ schedule.workTime == 0 ? '上午' : '下午' }}</span></div>
                </el-form-item>
                <el-form-item label="就诊医院：">
                  <div class="content"><span>{{ schedule.param.hosname }} </span></div>
                </el-form-item>
                <el-form-item label="就诊科室：">
                  <div class="content"><span>{{ schedule.param.depname }} </span></div>
                </el-form-item>
                <el-form-item label="医生姓名：">
                  <div class="content"><span>{{ schedule.docname }} </span></div>
                </el-form-item>
                <el-form-item label="医生职称：">
                  <div class="content"><span>{{ schedule.title }} </span></div>
                </el-form-item>
                <el-form-item label="医生专长：">
                  <div class="content"><span>{{ schedule.skill }}</span></div>
                </el-form-item>
                <el-form-item label="医事服务费：">
                  <div class="content">
                    <div class="fee">{{ schedule.amount }}元</div>
                  </div>
                </el-form-item>
              </el-form>
            </div>

            <!-- 用户信息 #start-->
            <div>
              <div class="sub-title">
                <div class="block"></div>
                用户信息
              </div>
              <div class="content-wrapper">
                <el-form ref="form" :model="form">
                  <el-form-item class="form-item" label="就诊人手机号：">
                    {{ patient.phone }}
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <!-- 用户信息 #end -->
            <div class="bottom-wrapper">
              <div class="button-wrapper">
                <div class="v-button" @click="submitOrder()">{{ submitBnt }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
  </div>
  <!-- footer -->
</template>

<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'

import hospitalApi from '@/api/hosp/hospital'
import patientApi from '@/api/user/patient'

export default {

  data() {
    return {
      scheduleId: null,
      schedule: {
        param: {}
      },
      patientList: [],
      patient: {},

      activeIndex: 0,
      submitBnt: '确认挂号'
    }
  },

  created() {
    this.scheduleId = this.$route.query.scheduleId

    this.init()
  },

  methods: {
    init() {
      this.getSchedule()

      this.findPatientList()
    },

    getSchedule() {
      hospitalApi.getSchedule(this.scheduleId).then(response => {
        this.schedule = response.data
      })
    },

    findPatientList() {
      patientApi.findList().then(response => {
        this.patientList = response.data
        if(this.patientList.length > 0) {
          this.patient = this.patientList[0]
        }
      })
    },

    selectPatient(index) {
      this.activeIndex = index;
      this.patient = this.patientList[index]
    },

    submitOrder() {
      
    },

    addPatient() {
      window.location.href = '/patient/add'
    }
  }
}
</script>
<style>
  .hospital-order .header-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: block !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .hospital-order .sub-title {
    letter-spacing: 1px;
    color: #999;
    margin-top: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .hospital-order .content-wrapper .content {
    color: #333;
  }
  .el-form-item {
    margin-bottom: 5px;
  }
  .hospital-order .content-wrapper {
    margin-left: 140px;
    margin-top: 20px;
  }
</style>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243

  • 相关阅读:
    百度飞桨(PaddlePaddle) - PP-OCRv3 文字检测识别系统 预测部署简介与总览
    Redis实战篇（六）附近商铺、用户签到、UV统计
    软件项目管理期中准备（自用，仅供参考）
    如何搭建一套完整的数据指标体系？_光点科技
    136. 只出现一次的数字
    JavaWeb项目部署到服务器并连接本地数据库(超详细！)
    正则表达式
    （包治百病）江湖老中医治疗oracal序列重复
    经典面试题-小于N的最大数
    记一次针对excel导出的优化(实际开发遇到的情况)
  • 原文地址：https://blog.csdn.net/weixin_53227758/article/details/125484624