project-detail.html 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>服务项目内容</title>
  6. <link rel="stylesheet" type="text/css" href="../../../css/cross.css" />
  7. <link rel="stylesheet" type="text/css" href="../../../css/cross.ui.css" />
  8. <link rel="stylesheet" type="text/css" href="../../../css/style.min.css" />
  9. <link rel="stylesheet" type="text/css" href="../css/project-detail.css" />
  10. </head>
  11. <body class="m0">
  12. <div id="app" style="height: 100%;" v-cloak>
  13. <h4 class="p0 pt10 pb5 m0 plr30">{{planDetail.title}}</h4>
  14. <p class="p0 m0 plr30 pb5 c-border-b c-333 clearfix">
  15. <span class="fl plr10 lh18 c-border border-c12b7f5 c-12b7f5 mr10 b-r-3">{{planDetail.shortExecuteTime}}</span>
  16. <span class="fl plr10 lh18 c-border border-c12b7f5 c-12b7f5 mr10 b-r-3" v-for="(name, index) in planDetail.executeDoctorList" :key="index">{{name}}</span>
  17. <span class="fr pl20 c-12b7f5 set-finish">{{planDetail.statusName}}</span>
  18. </p>
  19. <div style="overflow: hidden; height: calc(100% - 60px);">
  20. <div class="plr15 c-999" style="overflow: auto; height: 100%;">
  21. <p class="p0 m0 ptb10 c-border-b">项目内涵:{{planDetail.content}}</p>
  22. <div class="ptb10 c-border-b clearfix">
  23. <span class="fl w-50 mb5">服务地点:{{planDetail.hospitalName}}</span>
  24. <span class="fl w-50 mb5">执&ensp;行&ensp;人:{{handleArr(planDetail.executeDoctorList)}}</span>
  25. <span class="fl w-50">服务时间:{{handleTime(planDetail.executeTime)}}</span>
  26. <span class="fl w-50">服务费用:{{planDetail.expense}}元</span>
  27. </div>
  28. <p class="p0 m0 ptb10 c-333 clearfix">指导与汇报记录<span class="fr pl15 set-show c-12b7f5" :class="{'active':isShowMore}" @click="changeShow()">{{isShowMore ? "收起详情" : "查看详情"}}</span></p>
  29. <ul class="p0 m0" v-show="isShowMore">
  30. <li class="bgc-f2fcfe plr10 ptb10 mb10" v-for="(record, index) in planDetail.messageList" :key="index">
  31. <p class="m0 p0 mb10 clearfix">
  32. <span class="fl w-50">{{record.doctorName}}&emsp;{{record.adminTeamName}}</span>
  33. <span class="fl w-50">{{record.createTime}}</span>
  34. </p>
  35. <p class="m0 p0 c-333">{{record.content}}</p>
  36. </li>
  37. <li class="c-t-center" v-if="!planDetail.messageList.length">暂无记录</li>
  38. </ul>
  39. <p class="m0 p0 ptb10 c-333 c-border-b">完成信息</p>
  40. <div class="ptb10">
  41. <p class="m0 p0 mb5">完成时间:<span class="c-333">{{planDetail.completeTime}}</span></p>
  42. <p class="m0 p0">执行医生:<span class="c-333">{{planDetail.operatorDoctorName}}</span></p>
  43. </div>
  44. <p class="m0 p0 ptb10 c-333 c-border-b">服务完成笔记</p>
  45. <div class="ptb10">
  46. {{planDetail.node}}
  47. </div>
  48. <p class="m0 p0 ptb10 c-333">相关记录</p>
  49. <ul class="p0 m0 ptb10 plr10 mb10 c-border b-r-3 clearfix">
  50. <li class="fl set-photo c-border mr10 cur-pit clearfix" v-for="(record, index) in planDetail.relationRecordImg" :key="index">
  51. <img class="fl" :src="handleImg(record)" alt="记录图" @click="lookPhoto(record)" />
  52. </li>
  53. <li class="c-t-center" v-if="planDetail.relationRecordImg && !planDetail.relationRecordImg.length">暂无相关记录</li>
  54. </ul>
  55. <div class="mb20" v-if="(planDetail.type==2 || planDetail.type==3 || planDetail.type==4) && planDetail.relationRecordCode">
  56. <p class="m0 p0 ptb10 f14 c-333">关联记录</p>
  57. <p class="m0 p0 ptb10 c-border b-r-3 c-t-center cur-pit c-333 clearfix" @click="viewDetial(planDetail.type,planDetail.relationRecordCode)">
  58. <span class="fl"><i class="icon icon-arrow-right"></i></span>{{planDetail.type==2?'健康文章':(planDetail.type==3?'健康指导':'随访记录')}}&emsp;{{planDetail.completeTimeShort}}
  59. </p>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
  65. <script src="../../../js/jquery-2.2.4.js"></script>
  66. <script src="../../../plugins/layer/layer.min.js"></script>
  67. <script src="../../../plugins/toastr/toastr.min.js"></script>
  68. <script src="../../../js/bootstrap.min.js"></script>
  69. <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
  70. <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
  71. <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
  72. <script src="../../../api/http-request.js" type="text/javascript"></script>
  73. <script src="../../../api/recover_api.js" type="text/javascript"></script>
  74. <script type="text/javascript">
  75. var doctorType = (JSON.parse(window.localStorage.getItem('wlyyAgent'))||{}).doctorType
  76. var httpData=GetRequest()
  77. function showSuccessMessage(msg) {
  78. layer.msg(msg, {
  79. icon: 1
  80. })
  81. }
  82. function showErrorMessage(msg) {
  83. layer.msg(msg, {
  84. icon: 5
  85. })
  86. }
  87. function showWarningMessage(msg) {
  88. layer.msg(msg, {
  89. icon: 2
  90. })
  91. }
  92. function showInfoMessage(msg) {
  93. layer.msg(msg, {
  94. icon: 6
  95. })
  96. }
  97. selectVue = new Vue({
  98. el: "#app",
  99. data: {
  100. isShowMore: false,
  101. planDetail: null
  102. },
  103. mounted: function() {
  104. this.serviceItem()
  105. },
  106. methods: {
  107. changeShow: function() {
  108. this.isShowMore = !this.isShowMore
  109. },
  110. serviceItem: function() {
  111. var vm = this,
  112. loadding = layer.load(0, {shade: false}),
  113. params = {
  114. planDetailId: httpData.planId
  115. }
  116. recoverAPI.serviceItem(params).then(function(res) {
  117. layer.close(loadding)
  118. if(res.status == 200) {
  119. vm.planDetail = res.data
  120. } else {
  121. showErrorMessage(res.msg);
  122. }
  123. })
  124. },
  125. handleArr: function(arr) {
  126. return arr.join()
  127. },
  128. handleTime: function(time) {
  129. var getTime = new Date(time),
  130. morth = getTime.getMonth() + 1
  131. return getTime.getFullYear() + '-' + this.addZero(morth) + '-' + this.addZero(getTime.getDay()) + " " + this.addZero(getTime.getHours()) + ":" + this.addZero(getTime.getMinutes())
  132. },
  133. addZero: function(num) {
  134. return num >= 10 ? num : '0' + num
  135. },
  136. lookPhoto: function(src) {
  137. parent.photoLayerIndex = parent.layer.open({
  138. type: 2,
  139. area: ['400px', '400px'],
  140. title: false,
  141. shade: 0.5,
  142. shadeClose: true,
  143. content: '../html/photo_show.html?src=' + src
  144. })
  145. },
  146. handleImg: function(src) {
  147. var str = httpRequest.getImgUrl(src);
  148. return str
  149. },
  150. viewDetial:function(type,code){
  151. var vm=this;
  152. if (type==3 || type==4){
  153. top.layer.msg('客户端暂不支持查询随访记录');
  154. } else {
  155. top.layer.open({
  156. type: 2,
  157. // offset: ['100px'], //右下角弹出
  158. area: ['80%', '600px'],
  159. shade: 0.5,
  160. title: '指导教育',
  161. fixed: true, //不固定
  162. maxmin: true,
  163. closeBtn: 1,
  164. shift: 5,
  165. shadeClose: false, //点击遮罩关闭层
  166. content: '../../article/html/article-info.html?articleId=' + code,
  167. end: function() { // 未点击确定按钮,点击关闭按钮
  168. vm.getServiceItem();    
  169. }
  170. });
  171. }
  172. }
  173. }
  174. })
  175. </script>
  176. </body>
  177. </html>