30.前台系统-预约确认
# 需求分析
根据排班id获取排班信息，在页面展示
选择就诊人
预约下单
# 后端实现 service-hosp
# 添加service接口与实现
在ScheduleService添加接口
package com.stt.yygh.hosp.service;
import com.stt.yygh.model.hosp.Schedule;
import com.stt.yygh.vo.hosp.ScheduleQueryVo;
import org.springframework.data.domain.Page;
import java.util.List;
import java.util.Map;
public interface ScheduleService {
...
/**
* 根据id获取排班
* @param id
* @return
*/
Schedule getById(String id);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
添加实现
package com.stt.yygh.hosp.service.impl;
...
@Service
public class ScheduleServiceImpl implements ScheduleService {
@Autowired
private ScheduleRepository repository;
...
@Override
public Schedule getById(String id) {
Schedule schedule = repository.findById(id).get();
return this.packageSchedule(schedule);
}
....
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 添加controller
在 HospitalApiController中添加接口
package com.stt.yygh.hosp.controller;
import com.stt.yygh.common.result.Result;
import com.stt.yygh.hosp.service.DepartmentService;
import com.stt.yygh.hosp.service.HospitalService;
import com.stt.yygh.hosp.service.ScheduleService;
import com.stt.yygh.model.hosp.Hospital;
import com.stt.yygh.vo.hosp.HospitalQueryVo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.Page;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@Api(tags = "医院管理接口")
@RestController
@RequestMapping("/api/hosp/hospital")
public class HospitalApiController {
...
@Autowired
private ScheduleService scheduleService;
...
@ApiOperation(value = "根据排班id获取排班数据")
@GetMapping("getSchedule/{scheduleId}")
public Result getSchedule(@ApiParam(name = "scheduleId", value = "排班id", required = true)
@PathVariable String scheduleId) {
return Result.ok(scheduleService.getById(scheduleId));
}
}
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
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
# 前端实现 yygh-site
# 封装api
在/api/hosp/hospital.js添加方法
import request from '~/utils/request'
const api_name = `/api/hosp/hospital`
...
export function getSchedule(id) {
return request({
url: `${api_name}/getSchedule/${id}`,
method: 'get'
})
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 创建预约确认页面
创建/pages/hospital/booking.vue组件
读取url传递的scheduleId查询预约信息，以及查询就诊人信息
<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"><span class="block"></span>选择就诊人：</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"><span class="block"></span>挂号信息</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"><span class="block"></span>用户信息</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 { findList } from '@/api/user/patient'
import { getSchedule } from '@/api/hosp/hosp'
export default {
data() {
return {
scheduleId: null,
schedule: {
param: {}
},
patientList: [],
patient: {},
form: {},
activeIndex: 0,
submitBnt: '确认挂号'
}
},
created() {
this.scheduleId = this.$route.query.scheduleId
this.init()
},
methods: {
init() {
this.getSchedule()
this.findPatientList()
},
getSchedule() {
getSchedule(this.scheduleId).then(res => {
this.schedule = res.data
})
},
findPatientList() {
findList().then(res => {
this.patientList = res.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;
}
.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
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
Last Updated: 2022/01/16, 11:29:51