toDoorService.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>上门服务代预约</title>
  7. <link rel="stylesheet" type="text/css" href="../../../css/bootstrap.min.css" />
  8. <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
  9. <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
  10. <link rel="stylesheet" href="../../../plugins/toastr/toastr.min.css" />
  11. <link rel="stylesheet" href="../../../plugins/element-ui/element-ui.css" />
  12. <link rel="stylesheet" type="text/css" href="../css/date.css" />
  13. <link rel="stylesheet" href="../css/common.css" />
  14. <style>
  15. #app {
  16. font-size: 14px;
  17. }
  18. .form-box {
  19. padding: 16px 20px 20px;
  20. }
  21. .form-item {
  22. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  23. padding: 4px 0;
  24. display: flex;
  25. justify-content: space-between;
  26. align-items: center;
  27. height: 44px;
  28. }
  29. .form-label {
  30. }
  31. .service-box {
  32. padding: 4px 0;
  33. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  34. }
  35. .service-item {
  36. margin-left: 20px;
  37. margin-right: 10px;
  38. height: 24px;
  39. }
  40. .address-box {
  41. padding: 4px 0;
  42. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  43. }
  44. .flex {
  45. display: flex;
  46. justify-content: space-between;
  47. align-items: center;
  48. }
  49. .reservation-btn {
  50. display: block;
  51. width: 300px;
  52. margin: 20px auto;
  53. }
  54. .no-service {
  55. text-align: center;
  56. line-height: 40px;
  57. }
  58. .required-icon{
  59. position: relative;
  60. }
  61. .required-icon::after{
  62. content: "*";
  63. position: absolute;
  64. left: -10px;
  65. color: #ed2d2d;
  66. top: 50%;
  67. transform: translateY(-50%);
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div id="app" v-cloak>
  73. <div class="form-box">
  74. <div class="service-box">
  75. <div class="flex">
  76. <div class="form-label">本次预定的服务</div>
  77. <div class="form-value" style="cursor: pointer" @click="toSelectService">
  78. (已造
  79. <span style="color: #11b7f5">{{serviceList.length}}</span>
  80. 项)
  81. <i class="el-icon-arrow-right"></i>
  82. </div>
  83. </div>
  84. <div class="service-list">
  85. <div class="service-item flex" v-for="item in serviceList">
  86. <div style="width: 300px">{{item.title}}</div>
  87. <div style="padding-left: 20px">x{{item.num}}</div>
  88. <div style="color: #ed2d2d">¥{{item.expense}}</div>
  89. </div>
  90. <div v-if="serviceList.length == 0" class="no-service">暂未选择服务</div>
  91. </div>
  92. </div>
  93. <div class="form-item">
  94. <div class="form-label">服务对象</div>
  95. <div class="form-value">{{patientInfo.name}}</div>
  96. </div>
  97. <div class="form-item">
  98. <div class="form-label">签约地区</div>
  99. <div class="form-value">{{patientInfo.townName}}</div>
  100. </div>
  101. <div class="form-item">
  102. <div class="form-label">联系方式</div>
  103. <div class="form-value">{{patientInfo.mobile}}</div>
  104. </div>
  105. <div class="address-box ">
  106. <div class="flex required-icon">
  107. <div>上门地址</div>
  108. <el-input v-model="serveAddress" placeholder="请输入上门地址" size="small" style="width: 200px" @change="getAddressPoint"></el-input>
  109. </div>
  110. <div id="map2" style="height: 200px; margin: 10px"></div>
  111. </div>
  112. <div class="service-box">
  113. <div class="form-label" style="height: 32px; line-height: 32px">请说明居民需要什么服务?</div>
  114. <el-input v-model="serveDesc" placeholder="请简要描述居民的病情..." type="textarea" :maxlength="100" :rows="3" resize="none"></el-input>
  115. </div>
  116. <div class="form-item">
  117. <div class="form-label required-icon">希望服务时间</div>
  118. <div class="form-value">
  119. <el-date-picker v-model="time" type="date" style="width: 150px;" size="small" value-format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>
  120. <el-time-picker
  121. is-range
  122. v-model="time1"
  123. start-placeholder="开始时间"
  124. end-placeholder="结束时间"
  125. placeholder="选择时间范围"
  126. range-separator="-"
  127. value-format="HH:mm"
  128. size="small" style="width: 240px;">
  129. </el-time-picker>
  130. </div>
  131. </div>
  132. <div class="form-item">
  133. <div class="form-label required-icon">服务医生</div>
  134. <div class="form-value" style="width: 200px; text-align: right; cursor: pointer" @click="toSelectDoctor">
  135. {{doctor.name}}
  136. <i class="el-icon-arrow-right"></i>
  137. </div>
  138. </div>
  139. </div>
  140. <el-button type="primary" class="reservation-btn" @click="reservationFn">提交预约</el-button>
  141. </div>
  142. <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&d2GXayjVT86kMvm5FRKvGgY0EjlXdRNx"></script> -->
  143. <script type="text/javascript" src="../../../js/api-map-baidu.lite.js"></script>
  144. <script type="text/javascript" src="../../../js/vue.js"></script>
  145. <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
  146. <script type="text/javascript" src="../../../js/es6-promise.js" charset="utf-8"></script>
  147. <script type="text/javascript" src="../../../plugins/toastr/toastr.min.js"></script>
  148. <script type="text/javascript" src="../../../plugins/element-ui/element-ui.js"></script>
  149. <script type="text/javascript" src="../../../api/http-request.js"></script>
  150. <script type="text/javascript" src="../../../plugins/layer/layer.min.js"></script>
  151. <script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
  152. <script type="text/javascript" src="../../../api/recover_api.js"></script>
  153. <script type="text/javascript" src="../../../js/underscore-1.9.1.js"></script>
  154. <script type="text/javascript" src="../../../js/util.js" charset="utf-8"></script>
  155. <script>
  156. new Vue({
  157. el: '#app',
  158. data() {
  159. return {
  160. patient: null,
  161. patientInfo: {},
  162. serveDesc: '',
  163. time: null,
  164. time1: null,
  165. serviceList: [],
  166. bmap: null,
  167. serveAddress: null,
  168. marker: null,
  169. doctor: { name: '' },
  170. detailId: null,
  171. docInfo: null,
  172. serveLat: null,
  173. serveLon: null,
  174. relationCode: null
  175. }
  176. },
  177. mounted() {
  178. this.patient = GetRequest().patient
  179. this.detailId = GetRequest().detailId
  180. this.relationCode = GetRequest().relationCode
  181. this.docInfo = JSON.parse(localStorage.getItem('docInfo'))
  182. this.getPatientInfo()
  183. this.initMap()
  184. },
  185. methods: {
  186. toSelectService() {
  187. const vm = this
  188. // this.$message.warning('暂无可供选择的服务,请在下方直接描述您所需的服务')
  189. sessionStorage.setItem('serviceList', JSON.stringify(this.serviceList))
  190. top.layer.open({
  191. type: 2,
  192. area: ['600px', '800px'],
  193. shade: 0.5,
  194. title: '选择服务',
  195. fixed: true, //不固定
  196. maxmin: true,
  197. closeBtn: 1,
  198. // shift: 5,
  199. shadeClose: false, //点击遮罩关闭层
  200. content: `../../rehabilitation/html/serviceDialog.html`,
  201. end: function () {
  202. const val = sessionStorage.getItem('serviceList')
  203. if (val) {
  204. sessionStorage.removeItem('serviceList')
  205. vm.serviceList = JSON.parse(val)
  206. }
  207. }
  208. })
  209. },
  210. getPatientInfo() {
  211. const vm = this
  212. httpRequest.post('doctor/patient_label_info/patient', { data: { patient: this.patient } }).then(function (res) {
  213. vm.patientInfo = res.data
  214. })
  215. },
  216. initMap() {
  217. var vm = this
  218. // 初始化地图, 设置中心点坐标和地图级别
  219. vm.bmap = new BMap.Map('map2')
  220. const point = new BMap.Point(116.404, 39.915) // 创建点坐标
  221. vm.bmap.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和缩放级别
  222. // 添加缩放控件
  223. // var zoomCtrl = new BMap.ZoomControl({
  224. // anchor: BMAP_ANCHOR_BOTTOM_RIGHT
  225. // })
  226. // vm.bmap.addControl(zoomCtrl)
  227. vm.marker = new BMap.Marker(point)
  228. vm.bmap.addOverlay(vm.marker)
  229. // vm.bmap.enableScrollWheelZoom()
  230. vm.bmap.addEventListener('click', function (e) {
  231. // return
  232. vm.getAddress(e.point)
  233. vm.bmap.clearOverlays()
  234. vm.marker = new BMap.Marker(e.point) //中心点坐标红点
  235. vm.bmap.addOverlay(vm.marker) // 增加中心点坐标红点
  236. vm.bmap.centerAndZoom(new BMap.Point(e.point.lng, e.point.lat)) // 设置地图中心
  237. })
  238. },
  239. getAddress(center) {
  240. var vm = this
  241. var params = {
  242. ak: 'd2GXayjVT86kMvm5FRKvGgY0EjlXdRNx',
  243. output: 'json',
  244. coordtype: 'bd09ll',
  245. location: center.lat + ',' + center.lng
  246. }
  247. httpRequest.get('https://api.map.baidu.com/reverse_geocoding/v3/', { data: params }, function (res) {
  248. if (res.status == 0) {
  249. vm.serveAddress = res.result.formatted_address
  250. } else {
  251. vm.$message.warning('获取地址失败')
  252. }
  253. })
  254. },
  255. getAddressPoint() {
  256. var vm = this
  257. var params = {
  258. ak: 'd2GXayjVT86kMvm5FRKvGgY0EjlXdRNx',
  259. output: 'json',
  260. address: vm.serveAddress,
  261. city: '厦门市'
  262. }
  263. httpRequest.get('third/door/findAreaMap', { data: params }).then(function (res) {
  264. if (res.status == 200) {
  265. res = JSON.parse(res.data)
  266. if (res.status == 0) {
  267. if (res.result.location) {
  268. vm.bmap.clearOverlays()
  269. vm.serveLat = res.result.location.lat
  270. vm.serveLon = res.result.location.lng
  271. vm.marker = new BMap.Marker(res.result.location) //中心点坐标红点
  272. vm.bmap.addOverlay(vm.marker)
  273. vm.bmap.centerAndZoom(new BMap.Point(res.result.location.lng, res.result.location.lat), 15) // 设置地图中心
  274. }
  275. } else {
  276. vm.$message.warning('获取坐标失败')
  277. }
  278. }
  279. })
  280. },
  281. toSelectDoctor() {
  282. var vm = this
  283. top.layer.open({
  284. type: 2,
  285. area: ['500px', '700px'],
  286. shade: 0.5,
  287. title: '选择服务',
  288. fixed: true, //不固定
  289. maxmin: true,
  290. closeBtn: 1,
  291. // shift: 5,
  292. shadeClose: false, //点击遮罩关闭层
  293. content: `../../rehabilitation/html/selectDoctor.html?patient=${this.patient}`,
  294. end: function () {
  295. const val = sessionStorage.getItem('selectDoctor')
  296. if (val) {
  297. sessionStorage.removeItem('selectDoctor')
  298. vm.doctor = JSON.parse(val)
  299. }
  300. }
  301. })
  302. },
  303. reservationFn() {
  304. var nowDate = new Date().getTime()
  305. var serviceDate = new Date(this.time + " "+ this.time1[0]).getTime()
  306. var vm = this
  307. if (!vm.serveAddress) {
  308. vm.$message.warning('请输入上门地址')
  309. return
  310. }
  311. if (!vm.time) {
  312. vm.$message.warning('请输入希望服务时间')
  313. return
  314. }
  315. if (!vm.doctor.name) {
  316. vm.$message.warning('请选择服务医生')
  317. return
  318. }
  319. if(!this.time1){
  320. vm.$message.warning('请输入希望服务时间')
  321. return
  322. }
  323. if (nowDate >= serviceDate) {
  324. this.$message.warning('服务时间不能早于当前时间')
  325. return
  326. }
  327. var params = {
  328. dataJson: JSON.stringify({
  329. rehabilitationDetailId: this.detailId,
  330. patientCode: this.patient,
  331. patientName: this.patientInfo.name,
  332. doctorCode: vm.docInfo.code,
  333. doctorName: vm.docInfo.name,
  334. relationRecordType: 4,
  335. relationRecordCode: '',
  336. status: 0,
  337. node: '',
  338. relationRecordImg: ''
  339. })
  340. }
  341. var packageItemArr = []
  342. this.serviceList.forEach(function (item) {
  343. packageItemArr.push({
  344. type: 1,
  345. code: item.code,
  346. name: item.title,
  347. fee: item.expense,
  348. feeDiscount: 0,
  349. number: item.num,
  350. status: 1
  351. })
  352. })
  353. var param = {
  354. jsonData: JSON.stringify({
  355. order: {
  356. proxyPatient: vm.docInfo.code,
  357. proxyPatientName: vm.docInfo.name,
  358. proxyPatientPhone: vm.docInfo.mobile,
  359. patient: vm.patient,
  360. patientName: vm.patientInfo.name,
  361. patientPhone: vm.patientInfo.mobile,
  362. patientExpectedServeTime: `${vm.time} ${vm.time1[0]}-${vm.time1[1]}` ,
  363. serveDesc: vm.serveDesc,
  364. serveTown: vm.patientInfo.townName,
  365. serveAddress: vm.serveAddress,
  366. serveLat: vm.serveLat,
  367. serveLon: vm.serveLon,
  368. doctor: vm.docInfo.code,
  369. doctorName: vm.docInfo.name,
  370. doctorType: vm.docInfo.jobName,
  371. id: null, //重新派单增加orderId
  372. relationCode: vm.relationCode
  373. },
  374. deleteItemArr: [], ////重新派单编辑服务项需传原来服务项id
  375. packageItemArr: packageItemArr, //提交的服务项
  376. hospital: {
  377. code: vm.docInfo.hospital
  378. }
  379. })
  380. }
  381. if(this.relationCode){
  382. // 内部 代预约
  383. this.createSend(param)
  384. }else{
  385. // 外部 代预约
  386. this.saveRehabilitationOperateRecord(params, param)
  387. }
  388. },
  389. saveRehabilitationOperateRecord(params, param) {
  390. var vm = this
  391. var url = 'doctor/specialist/rehabilitation/saveRehabilitationOperateRecord'
  392. httpRequest.post(url, { data: params }).then(function (res) {
  393. if (res.status == 200) {
  394. var jsonData = JSON.parse(param.jsonData)
  395. jsonData.order.relationCode = res.data.id
  396. param.jsonData = JSON.stringify(jsonData)
  397. vm.createSend(param)
  398. } else {
  399. vm.$message.error(res.msg || '服务记录失败')
  400. }
  401. })
  402. },
  403. createSend(param) {
  404. var vm = this
  405. var url = 'doctor/serviceOrder/proxyCreate'
  406. httpRequest.post(url, { data: param }).then(function (res) {
  407. if (res.status == 200) {
  408. vm.$message.success('预约成功!')
  409. if(vm.relationCode){
  410. // 内部
  411. vm.createOperateRecord()
  412. }else{
  413. vm.updateNoteAndImageRehabilitationOperate("代预约成功")
  414. // 外部
  415. }
  416. } else {
  417. vm.$message.error(res.msg)
  418. }
  419. })
  420. },
  421. createOperateRecord(cb){
  422. var vm = this
  423. var url = "doctor/specialist/rehabilitation/saveRehabilitationOperateRecord",
  424. obj = {
  425. rehabilitationDetailId: vm.detailId,
  426. patientCode: vm.patient,
  427. patientName: vm.patientInfo.patientName,
  428. doctorCode: vm.docInfo.code,
  429. doctorName: vm.docInfo.name,
  430. relationRecordType: 5, //上传附件
  431. relationRecordCode: "",
  432. status: 0
  433. };
  434. var params = {
  435. dataJson: JSON.stringify(obj)
  436. };
  437. httpRequest.post(url, {data:params}).then(function(res){
  438. if (res.status == 200) {
  439. console.log("vm.done()");
  440. vm.done()
  441. }
  442. })
  443. },
  444. updateNoteAndImageRehabilitationOperate(text) {
  445. var vm = this
  446. var params = {
  447. planDetailId: vm.detailId,
  448. node: text,
  449. image: ''
  450. }
  451. var uRl =
  452. '/doctor/specialist/rehabilitation/updateNoteAndImageRehabilitationOperate'
  453. httpRequest.post(uRl,{data:params}).then(function(res){
  454. if(res.status == 200){
  455. var index = parent.layer.getFrameIndex(window.name)
  456. parent.layer.close(index)
  457. }else{
  458. vm.$message.error(res.msg || '服务记录失败')
  459. }
  460. })
  461. },
  462. done(){
  463. var vm = this
  464. var url = "/doctor/specialist/rehabilitation/updateNoteAndImageRehabilitationOperate"
  465. var params = {
  466. planDetailId: vm.detailId,
  467. node: vm.notes || "",
  468. image: ""
  469. };
  470. if(vm.relationCode){
  471. params.relationCode = vm.relationCode
  472. }
  473. httpRequest.post(url,{data:params}).then(function(res){
  474. if(res.status == 200){
  475. var index = parent.layer.getFrameIndex(window.name)
  476. parent.layer.close(index)
  477. }
  478. })
  479. }
  480. }
  481. })
  482. </script>
  483. </body>
  484. </html>