project-detail.html 8.0 KB

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