guide_the_message.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>完成项目服务</title>
  6. <link rel="stylesheet" href="../../../css/bootstrap.min.css" />
  7. <link rel="stylesheet" type="text/css" href="../../../css/style.min.css"/>
  8. <link rel="stylesheet" type="text/css" href="../../../css/cross.css"/>
  9. <style type="text/css">
  10. [v-cloak]{display: none;}
  11. .flex-box{display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */
  12. display: -ms-flexbox; /* TWEENER - IE 10 */ /* NEW - Chrome */
  13. display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  14. -webkit-box-pack: center;
  15. -ms-flex-pack: center;
  16. justify-content: center;
  17. -webkit-box-align: center;
  18. -ms-flex-align: center;
  19. align-items: center;
  20. -ms-flex-wrap: wrap;
  21. flex-wrap: wrap;
  22. }
  23. .flex-box-item{-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  24. -moz-box-flex: 1; /* OLD - Firefox 19- */
  25. -webkit-flex: 1; /* Chrome */
  26. -ms-flex: 1; /* IE 10 */
  27. width: 50%; /* For old syntax, otherwise collapses. */
  28. flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  29. position: relative;}
  30. .icon{width: 12px;height: 12px;vertical-align: middle;background-size: 100% auto;background-repeat: no-repeat;display: inline-block;background-position: center center;}
  31. .icon-arrow-down{background-image: url(../images/icon/tiaozhuan_xia_icon.png);}
  32. .icon-gouxuan{background-image: url(../images/icon/gouxuan_lanse_icon.png);}
  33. .icon-check{background-image: url(../images/icon/zhankai_btn.png);}
  34. .icon-arrow-right{background-image: url(../images/icon/tiaozhuan_icon.png);background-size: auto 100%;}
  35. .icon-check,.icon-arrow-down{transition: all .3s ease-in-out;}
  36. .active .icon-check,.collapsed .icon-arrow-down{transform: rotateZ(180deg);}
  37. .icon-16{width: 16px;height: 16px;}
  38. .icon-18{width: 18px;height: 18px;}
  39. .service-top{font-size: 0;line-height: 1;font-weight: 500;}
  40. .service-name span{vertical-align: middle;font-size: 16px;}
  41. .service-name span+span{margin-left: 10px;}
  42. .service-name{line-height: 1.5;margin-bottom: 0;}
  43. .service-index{border: 1px solid #12b7f5;width: 16px;line-height: 1;height: 16px;font-size: 14px;display: inline-block;text-align: center;color: #12b7f5;}
  44. .label-group{padding-left: 26px;}
  45. .label-group span{color: #12b7f5;font-size: 14px;line-height: 1;margin-top: 10px;}
  46. .label-blue{border-radius: 5px;border: solid 1px #12b7f5;padding: 4px 15px;display: inline-block;margin-right: 27px;}
  47. .panel-body{padding: 20px 20px 0;font-size: 14px;color: #999;}
  48. .service-content{line-height: 30px;padding-bottom: 15px;border-bottom: 1px solid #d7dce6;}
  49. .service-address{border-bottom: 1px solid #d7dce6;}
  50. .btn-yuyue{background-color: #02cfb9;color: #fff;}
  51. .btn-yuyue:hover,.btn-yuyue:link{color: #fff;background-color: #01c1ad;}
  52. .btn-fuwuma{background-color: #2dbe55;color: #fff;}
  53. .btn-fuwuma:hover,.btn-fuwuma:link{color: #fff;background-color: #209440;}
  54. .btn-zhidao{background-color: #12b7f5;color: #fff;}
  55. .btn-zhidao:hover,.btn-zhidao:link{color: #fff;background-color: #10a0d6;}
  56. .service-operation .btn{width: 90px;}
  57. .view-detail{color: #12b7f5;cursor: pointer;}
  58. .record-list{max-height: 0;overflow: hidden;transition: all .3s linear;}
  59. .record-list.active{max-height: 999px;}
  60. .record-item{background-color: #f5f5fa;margin-bottom: 10px;padding: 10px;}
  61. .complete-title{font-size: 14px;color: #333;padding: 10px 0;border-bottom: 1px solid #D7DCE6;}
  62. .guanlian-list{border: 1px solid #d7dce6;padding: 3px 5px;}
  63. .upload-box{padding: 10px 0 10px 10px;overflow: hidden;border: 1px solid #d7dce6;}
  64. .upload-box li{width: 60px;height: 60px;position: relative;display: block;float: left;margin-right: 10px;}
  65. .upload-box li img{width: 100%;display: block;}
  66. .upload-img-box{width: 100%;height: 100%;overflow: hidden;}
  67. .delete-img{position: absolute;right: -5px;top: -5px;color: #fff;background-color: #ccc;border-radius: 100%;text-align: center;line-height: 15px;width: 15px;height: 15px;}
  68. .upload-img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;opacity: 0;z-index: 3;font-size: 0;width: 100%;height: 100%;}
  69. .add-img{font-size: 40px;line-height: 60px;font-weight: 500;width: 60px;height: 60px;display: block;text-align: center;border: 1px dashed #d7dce6;color: #bec8d2;}
  70. .yslb>span:after{content: '、';}
  71. .yslb>span:last-child:after{display: none;}
  72. </style>
  73. </head>
  74. <body>
  75. <div id="app" v-cloak role="tablist" aria-multiselectable="true">
  76. <div class="panelcurPage">
  77. <div class="panel-heading" role="tab" @click="changeCollapseIndex(index)">
  78. <h4 class="panel-title">
  79. <a role="button" class="flex-box">
  80. <div class="flex-box-item service-top">
  81. <p class="service-name"><span class="service-index">1</span><span>{{service.title}}</span></p>
  82. <div class="label-group">
  83. <span class="pull-right mt5"><i v-if="service.statusName=='已完成'" class="icon icon-gouxuan icon-18 mr5"></i>{{service.statusName}}</span>
  84. <span class="label-blue">{{service.shortExecuteTime}}</span>
  85. <span class="label-blue" v-for="doctor in service.executeDoctorList">{{doctor}}</span>
  86. </div>
  87. </div>
  88. <!--<span class="icon icon-arrow-down ml50"></span>-->
  89. </a>
  90. </h4>
  91. </div>
  92. <div class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
  93. <div class="panel-body">
  94. <div class="service-content">{{service.content}}</div>
  95. <div class="service-address ptb20">
  96. <div class="flex-box">
  97. <div class="flex-box-item">
  98. <p class="m0">地点:{{service.hospitalName}}</p>
  99. <p class="m0">时间:{{service.executeTime | formatDate}}</p>
  100. </div>
  101. <div class="flex-box-item">
  102. <p class="m0 yslb">执行:<span v-for="(doctor,index) in service.executeDoctorList">{{doctor}}</span></p>
  103. <p class="m0">收费:{{service.expense}}元</p>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="panel-body">
  111. <div class="service-operation pt10">
  112. <p><span class="pull-right view-detail" :class="{active:isCollapse}" @click="chakan"><i class="icon icon-check mr5 icon-16"></i>{{isCollapse?'收起详情':'查看详情'}}</span>指导与汇报记录</p>
  113. <div class="record-list" :class="{active:isCollapse}">
  114. <div class="record-item" v-for="item in service.messageList">
  115. <div class="flex-box c-999 f14">
  116. <div class="flex-box-item">
  117. {{item.adminTeamName}}
  118. </div>
  119. <div class="flex-box-item">
  120. {{item.createTime}}
  121. </div>
  122. </div>
  123. <div class="f14 c-333">{{item.content}}</div>
  124. </div>
  125. </div>
  126. <div class="flex-box btns-group" v-if="service.isMyTask==1 || service.isZD">
  127. <button class="btn btn-yuyue" v-if="service.reserve==1" @click="qwapp">转诊预约</button>
  128. <button class="btn btn-yuyue" v-if="service.itemType==2 && service.operate!=1" @click="jkjy(service.patient,service.planDetaiId)">健康教育</button>
  129. <button class="btn btn-yuyue" v-if="service.itemType==3 && service.operate!=1" @click="jkzd(service.planDetaiId,service.patient)">健康指导</button>
  130. <button class="btn btn-yuyue" v-if="service.itemType==4 && service.operate!=1" @click="zwkf">随访</button>
  131. <button class="btn btn-zhidao" @click="zdly(service)" v-if="service.isZD">指导留言</button>
  132. <button class="btn btn-zhidao" @click="zdly(service)" v-if="service.isCK">查看留言</button>
  133. </div>
  134. </div>
  135. <div class="complete-info pt10">
  136. <div class="complete-title">完成情况</div>
  137. <div class="ptb10">
  138. <p class="f14 mb5"><span class="c-999">完成时间:</span>{{service.completeTime}}</p>
  139. <p class="f14 mb5"><span class="c-999">执行医生:</span>{{service.operatorDoctorName}}</p>
  140. </div>
  141. </div>
  142. <div class="note-info pt10">
  143. <p class="f14 c-333">服务完成笔记</p>
  144. <textarea v-if="service.status!=1" class="form-control" style="resize: none;" rows="4" placeholder="可备注您的服务记录" v-model="service.node"></textarea>
  145. <div v-if="service.status==1">{{service.node}}</div>
  146. </div>
  147. <div class="note-info pt10" style="display: none;">
  148. <p class="f14 c-333">关联记录</p>
  149. <p class="guanlian-list text-center">
  150. <span class="pull-right"><i class="icon icon-arrow-right"></i></span>随访记录sfs
  151. </p>
  152. </div>
  153. <div class="note-info pt10">
  154. <p class="f14 c-333">相关记录</p>
  155. <ul class="upload-box" v-if="service.status!=1">
  156. <li class="flex-box" v-for="(img,index) in upImgs">
  157. <div class="upload-img-box">
  158. <img :src="img.baseUrl" />
  159. </div>
  160. <a class="delete-img" @click="deleteImg(index)">&times;</a>
  161. </li>
  162. <li class="flex-box" v-if="upImgs.length<5">
  163. <span class="add-img">+</span>
  164. <input type="file" @change="upLoadImgToBase64" class="upload-img" />
  165. </li>
  166. </ul>
  167. <ul class="upload-box" v-if="service.status==1">
  168. <li class="flex-box" v-for="img in service.relationRecordImg">
  169. <div class="upload-img-box">
  170. <img :src="img | getImgUrl" />
  171. </div>
  172. </li>
  173. </ul>
  174. </div>
  175. <div class="text-center ptb50" v-if="service.status!=1">
  176. <button class="btn btn-zhidao" @click="qrwc">确认完成</button>
  177. </div>
  178. </div>
  179. </div>
  180. <script type="text/javascript" src="../../../js/vue.js"></script>
  181. <script type="text/javascript" src="../../../js/jquery-2.2.4.js" ></script>
  182. <script type="text/javascript" src="../../../api/http-request.js"></script>
  183. <script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
  184. <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
  185. <script type="text/javascript">
  186. !function(){
  187. var httpData=GetRequest();
  188. new Vue({
  189. el:"#app",
  190. data:{
  191. imgData: {
  192. accept: 'image/gif, image/jpeg, image/png, image/jpg',
  193. },
  194. isCollapse:false,
  195. upImgs:[],
  196. upImgArr:[],
  197. planid:httpData['planid'],
  198. service:[]
  199. },
  200. mounted:function(){
  201. this.getServiceItem();
  202. },
  203. methods:{
  204. zwkf:function(){
  205. top.layer.msg('此功能暂未开放',{icon:1});
  206. },
  207. jkjy:function(patient,planId){
  208. var vm=this
  209. top.layer.open({
  210. type: 2,
  211. // offset: ['100px'], //右下角弹出
  212. area: ['800px', '648px'],
  213. shade: 0.5,
  214. title: '健康教育',
  215. fixed: true, //不固定
  216. maxmin: true,
  217. closeBtn: 1,
  218. shift: 5,
  219. shadeClose: false, //点击遮罩关闭层
  220. content: '../../article/html/article.html?code='+patient+'&planId='+planId+'&isReha=true'
  221. });
  222. },
  223. // 健康指导
  224. jkzd:function(patient,planId){
  225. var vm=this
  226. top.layer.open({
  227. type: 2,
  228. // offset: ['100px'], //右下角弹出
  229. area: ['800px', '648px'],
  230. shade: 0.5,
  231. title: '健康教育',
  232. fixed: true, //不固定
  233. maxmin: true,
  234. closeBtn: 1,
  235. shift: 5,
  236. shadeClose: false, //点击遮罩关闭层
  237. content:'../../guidance/html/index.html#/person-edit-panel?patient='+patient+'&planId='+planId
  238. });
  239. },
  240. qwapp:function(){
  241. top.layer.msg('请前往app处理',{icon:5});
  242. },
  243. getServiceItem:function(){
  244. var vm=this;
  245. var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  246. rehaAPI.serviceItem({planDetailId:vm.planid}).then(function(res){
  247. top.layer.close(loadding);
  248. if(res.status==200){
  249. vm.service=res.data;
  250. }else{
  251. top.layer.msg(res.msg,{icon:5});
  252. }
  253. })
  254. },
  255. zdly:function(data){
  256. var vm = this
  257. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  258. var otherCode,otherName;
  259. var planDetailId=data.planDetaiId;
  260. if(loginDoctor.doctorType==1){
  261. otherCode=data.familyDoctorCode;
  262. otherName=data.familyDoctorName;
  263. }else{
  264. otherCode=data.specialistDoctorCode;
  265. otherName=data.specialistDoctorName;
  266. }
  267. top.layer.open({
  268. type: 2,
  269. // offset: ['100px'], //右下角弹出
  270. area: ['800px', '650px'],
  271. shade: 0.5,
  272. title: '指导留言',
  273. fixed: true, //不固定
  274. maxmin: true,
  275. closeBtn:1,
  276. shift: 5,
  277. shadeClose: false, //点击遮罩关闭层
  278. content: '../../consulting/html/consulting.html?otherCode='+otherCode+'&otherName='+encodeURI(otherName)+'&planDetailId='+planDetailId,
  279. end:function(){ // 未点击确定按钮,点击关闭按钮
  280.       vm.getServiceItemList();
  281.     }
  282. });
  283. },
  284. deleteImg:function(idx){
  285. console.log(idx)
  286. this.upImgs.splice(idx,1)
  287. },
  288. chakan:function(){
  289. this.isCollapse=!this.isCollapse;
  290. },
  291. upLoadImgToBase64:function(){
  292. var vm=this;
  293. var img1=event.target.files[0];
  294. console.log(img1)
  295. var reader =new FileReader();
  296. var type=img1.type;//文件的类型,判断是否是图片
  297. var size=img1.size;//文件的大小,判断图片的大小
  298. if(this.imgData.accept.indexOf(type) == -1){
  299. alert('请选择我们支持的图片格式!');
  300. return false;
  301. }
  302. if(size>3145728){
  303. alert('请选择3M以内的图片!');
  304. return false;
  305. }
  306. reader.readAsDataURL(img1);
  307. reader.onload = function (e) {
  308. vm.upImgs.push({baseUrl:e.target.result});
  309. vm.upImgArr.push(img1);
  310. // vm.uploadImg(vm.upImgArr);
  311. }
  312. },
  313. qrwc:function(){
  314. var vm=this;
  315. vm.uploadImg(vm.upImgArr,vm.updateNoteAndImageRehabilitationOperate);
  316. },
  317. //上传图片
  318. uploadImg:function(data,cb){
  319. var vm=this;
  320. var len = data.length;
  321. if (!len){
  322. cb && cb();
  323. }else{
  324. var file=data[len-1];
  325. var formData = new FormData();
  326. formData.append('file', file);
  327. rehaAPI.upload(formData).then(function(res){
  328. console.log(res)
  329. if(res.status==200){
  330. console.log(vm.upImgs[len-1])
  331. vm.upImgs[len-1].img=res.data;
  332. data.pop();
  333. vm.uploadImg(data,cb);
  334. }
  335. })
  336. }
  337. },
  338. updateNoteAndImageRehabilitationOperate:function(){
  339. var vm=this;
  340. var _image=[];
  341. for(var i in vm.upImgs){
  342. _image.push(vm.upImgs[i].img);
  343. }
  344. var params={
  345. planDetailId:vm.planid,
  346. node:vm.service.node,
  347. image:JSON.stringify(_image)
  348. }
  349. var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  350. rehaAPI.updateNoteAndImageRehabilitationOperate(params).then(function(res){
  351. top.layer.close(loadding);
  352. console.log(res)
  353. if(res.status==200){
  354. vm.getServiceItem();
  355. parent.serviceItem.getServiceItemList();
  356. }
  357. })
  358. },
  359. },
  360. filters:{
  361. formatDate:function(value, format) {
  362. if(!value) return ;
  363. var fmt=format || "yyyy-MM-dd hh:mm";
  364. var date = new Date(value);
  365. if (/(y+)/.test(fmt)) {
  366. fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  367. }
  368. let o = {
  369. 'M+': date.getMonth() + 1,
  370. 'd+': date.getDate(),
  371. 'h+': date.getHours(),
  372. 'm+': date.getMinutes(),
  373. 's+': date.getSeconds()
  374. };
  375. for (let k in o) {
  376. if (new RegExp(`(${k})`).test(fmt)) {
  377. let str = o[k] + '';
  378. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
  379. }
  380. }
  381. return fmt;
  382. },
  383. getImgUrl:function(value){
  384. var url=httpRequest.getImgUrl(value);
  385. return url;
  386. }
  387. }
  388. })
  389. }()
  390. </script>
  391. </body>
  392. </html>