service_item_content.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  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,.icon-arrow-down{transition: all .3s ease-in-out;}
  34. .active .icon-check,.collapsed .icon-arrow-down{transform: rotateZ(180deg);}
  35. .icon-check{background-image: url(../images/icon/zhankai_btn.png);}
  36. .icon-16{width: 16px;height: 16px;}
  37. .icon-18{width: 18px;height: 18px;}
  38. .record-list{max-height: 0;overflow: hidden;transition: all .3s linear;}
  39. .record-list.active{max-height: 9999px;height: auto;}
  40. .record-item{background-color: #f5f5fa;margin-bottom: 10px;padding: 10px;}
  41. .service-top{font-size: 0;line-height: 1;font-weight: 500;}
  42. .service-name span{vertical-align: middle;font-size: 16px;}
  43. .service-name span+span{margin-left: 10px;}
  44. .service-name{line-height: 1.5;margin-bottom: 0;}
  45. .service-index{border: 1px solid #12b7f5;width: 16px;line-height: 1;height: 16px;font-size: 14px;display: inline-block;text-align: center;color: #12b7f5;}
  46. .label-group{padding-left: 26px;}
  47. .label-group span{color: #12b7f5;font-size: 14px;line-height: 1;margin-top: 10px;}
  48. .label-blue{border-radius: 5px;border: solid 1px #12b7f5;padding: 4px 15px;display: inline-block;margin-right: 27px;}
  49. .panel-body{padding: 20px;font-size: 14px;color: #999;}
  50. .panelcurPage{border-bottom: 1px solid #d7dce6;}
  51. .service-content{line-height: 30px;padding-bottom: 15px;}
  52. .service-address{border-bottom: 1px solid #d7dce6;}
  53. .btn-yuyue{background-color: #02cfb9;color: #fff;}
  54. .btn-yuyue:hover,.btn-yuyue:link{color: #fff;background-color: #01c1ad;}
  55. .btn-fuwuma{background-color: #2dbe55;color: #fff;}
  56. .btn-fuwuma:hover,.btn-fuwuma:link{color: #fff;background-color: #209440;}
  57. .btn-zhidao{background-color: #12b7f5;color: #fff;}
  58. .btn-zhidao:hover,.btn-zhidao:link{color: #fff;background-color: #10a0d6;}
  59. .service-operation .btn{width: 90px;}
  60. .view-detail{color: #12b7f5;cursor: pointer;}
  61. .yslb>span:after{content: '、';}
  62. .yslb>span:last-child:after{display: none;}
  63. .btns-group{padding-left: 20px;}
  64. .btns-group .btn{margin-right: 20px;}
  65. .fuwuma-model{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 9;}
  66. .fuwuma-layer{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.35);}
  67. .fuwuma-content{width: 260px;height: 260px;top: 50%;position: absolute;margin-top: -130px;left: 50%;margin-left: -130px;}
  68. .fuwuma-content img{width: 100%;display: block;}
  69. </style>
  70. </head>
  71. <body>
  72. <div class="panel-group" id="app" v-cloak role="tablist" aria-multiselectable="true">
  73. <div class="panelcurPage" v-for="(service,index) in serviceData">
  74. <div class="panel-heading" role="tab" @click="changeCollapseIndex(index)">
  75. <h4 class="panel-title">
  76. <a role="button" class="flex-box">
  77. <div class="flex-box-item service-top">
  78. <p class="service-name"><span class="service-index">{{index+1}}</span><span>{{service.title}}</span></p>
  79. <div class="label-group">
  80. <span class="pull-right mt5"><i v-if="service.statusName=='已完成'" class="icon icon-gouxuan icon-18 mr5"></i>{{service.statusName}}</span>
  81. <span class="label-blue">{{service.shortExecuteTime}}</span>
  82. <span class="label-blue" v-for="doctor in service.executeDoctorList">{{doctor}}</span>
  83. </div>
  84. </div>
  85. <span class="icon icon-arrow-down ml50"></span>
  86. </a>
  87. </h4>
  88. </div>
  89. <div class="panel-collapse collapse" :class="{in:collapseIndex==index}" role="tabpanel" aria-labelledby="headingOne">
  90. <div class="panel-body">
  91. <div class="service-content">{{service.content}}</div>
  92. <div class="service-address ptb20">
  93. <div class="flex-box">
  94. <div class="flex-box-item">
  95. <p class="m0">地点:{{service.hospitalName}}</p>
  96. <p class="m0">时间:{{service.executeTime | formatDate}}</p>
  97. </div>
  98. <div class="flex-box-item">
  99. <p class="m0 yslb">执行:<span v-for="(doctor,index) in service.executeDoctorList">{{doctor}}</span></p>
  100. <p class="m0">收费:{{service.expense}}元</p>
  101. </div>
  102. </div>
  103. </div>
  104. <div class="service-operation pt10">
  105. <p><span class="pull-right view-detail" v-if="service.messageList.length" :class="{active:isCollapse}" @click="chakan"><i class="icon icon-check mr5 icon-16"></i>{{isCollapse?'收起详情':'查看详情'}}</span><span class="pull-right" v-if="!service.messageList.length">暂无记录</span>指导与汇报记录</p>
  106. <div class="record-list" :class="{active:isCollapse}">
  107. <div class="record-item" v-for="item in service.messageList">
  108. <div class="flex-box c-999 f14">
  109. <div class="flex-box-item">
  110. {{item.adminTeamName}}
  111. </div>
  112. <div class="flex-box-item">
  113. {{item.createTime}}
  114. </div>
  115. </div>
  116. <div class="f14 c-333">{{item.content}}</div>
  117. </div>
  118. </div>
  119. <div class="flex-box btns-group" v-if="service.isMyTask==1 || service.isZD">
  120. <!--<button class="btn btn-yuyue" v-if="service.itemType==0 && service.operate!=1">上传附件</button>-->
  121. <button class="btn btn-yuyue" v-if="service.itemType==2 && service.operate!=1" @click="jkjy(service.patient,service.planDetaiId)">健康教育</button>
  122. <button class="btn btn-yuyue" v-if="service.itemType==3 && service.operate!=1" @click="jkzd(service.planDetaiId,service.patient)">健康指导</button>
  123. <button class="btn btn-yuyue" v-if="service.itemType==4 && service.operate!=1" @click="zwkf">随访</button>
  124. <button class="btn btn-zhidao" @click="zdly(service)" v-if="service.isZD">指导留言</button>
  125. <button class="btn btn-zhidao" @click="zdly(service)" v-if="service.isCK">查看留言</button>
  126. <button class="btn btn-fuwuma" v-if="service.itemType==1 && service.operate!=1" @click="fwm(service.planDetaiId,service.patient)">服务码</button>
  127. <!--<button class="btn btn-fuwuma" @click="fwm(service.planDetaiId,service.patient)">服务码</button>-->
  128. <button class="btn btn-fuwuma" v-if="service.operate==1" @click="goToFinish(service.planDetaiId)">完成</button>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </div>
  134. <div class="fuwuma-model" v-show="qrModal">
  135. <div class="fuwuma-layer" @click="qrModal=false"></div>
  136. <div class="fuwuma-content">
  137. <img :src="qrCode" width="300px" />
  138. </div>
  139. </div>
  140. </div>
  141. <script type="text/javascript" src="../../../js/vue.js"></script>
  142. <script type="text/javascript" src="../../../js/jquery-2.2.4.js"></script>
  143. <script type="text/javascript" src="../../../api/http-request.js"></script>
  144. <script type="text/javascript" src="../../../api/rehabilitation-api.js"></script>
  145. <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
  146. <script type="text/javascript" src="../../../js/underscore.js"></script>
  147. <script type="text/javascript">
  148. !function(){
  149. var httpData=GetRequest();
  150. var userInfo = JSON.parse(window.localStorage.getItem(httpRequest.agentName));
  151. window.serviceItem=new Vue({
  152. el:"#app",
  153. data:{
  154. planids:httpData['planids'],
  155. serviceData:[],
  156. isCollapse :false,
  157. collapseIndex:0,
  158. qrCode:'',
  159. qrModal:false,
  160. },
  161. mounted:function(){
  162. this.getServiceItemList();
  163. },
  164. methods:{
  165. chakan:function(){
  166. this.isCollapse=!this.isCollapse;
  167. },
  168. changeCollapseIndex:function(idx){
  169. this.collapseIndex=idx;
  170. },
  171. //获取服务列表
  172. getServiceItemList:function(){
  173. var vm=this;
  174. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  175. var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  176. rehaAPI.serviceItemList({planDetailIds:vm.planids}).then(function(res){
  177. top.layer.close(loadding);
  178. if(res.status==200){
  179. vm.serviceData=_.map(res.data||{},function(o){
  180. if(o.isMyTask==1){//执行者
  181. if(loginDoctor.doctorType!=1){//说明是家医
  182. o.isCK=true;//无法显示按钮
  183. }else{//专科
  184. o.isCK=true;
  185. }
  186. }else{
  187. if(loginDoctor.doctorType==o.specialistDoctorCode){//说明我自己是创建者
  188. o.isZD=false;//无法显示按钮
  189. }
  190. }
  191. return o
  192. })
  193. }else{
  194. top.layer.msg(res.msg,{icon:5});
  195. }
  196. })
  197. },
  198. //健康教育
  199. jkjy:function(patient,planId){
  200. var vm=this
  201. top.layer.open({
  202. type: 2,
  203. // offset: ['100px'], //右下角弹出
  204. area: ['800px', '648px'],
  205. shade: 0.5,
  206. title: '健康教育',
  207. fixed: true, //不固定
  208. maxmin: true,
  209. closeBtn: 1,
  210. shift: 5,
  211. shadeClose: false, //点击遮罩关闭层
  212. content: '../../article/html/article.html?code='+patient+'&planId='+planId+'&isReha=true'
  213. });
  214. },
  215. // 健康指导
  216. jkzd:function(patient,planId){
  217. var vm=this
  218. top.layer.open({
  219. type: 2,
  220. // offset: ['100px'], //右下角弹出
  221. area: ['800px', '648px'],
  222. shade: 0.5,
  223. title: '健康教育',
  224. fixed: true, //不固定
  225. maxmin: true,
  226. closeBtn: 1,
  227. shift: 5,
  228. shadeClose: false, //点击遮罩关闭层
  229. content:'../../guidance/html/index.html#/person-edit-panel?patient='+patient+'&planId='+planId
  230. });
  231. },
  232. // 暂未开放
  233. zwkf:function(){
  234. top.layer.msg('此功能暂未开放',{icon:1});
  235. },
  236. goToFinish:function(planid){
  237. top.layer.open({
  238. type: 2,
  239. // offset: ['100px'], //右下角弹出
  240. area: ['600px', '650px'],
  241. shade: 0.5,
  242. title: '完成项目确认',
  243. fixed: true, //不固定
  244. maxmin: true,
  245. closeBtn:1,
  246. shift: 5,
  247. shadeClose: false, //点击遮罩关闭层
  248. content: '../../rehabilitation/html/guide_the_message.html?planid='+planid
  249. });
  250. },
  251. fwm:function(planid,patient){
  252. this.loadSocket(planid,patient);
  253. },
  254. zdly:function(data){
  255. var vm = this
  256. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  257. var otherCode,otherName;
  258. var planDetailId=data.planDetaiId;
  259. if(loginDoctor.doctorType==1){
  260. otherCode=data.familyDoctorCode;
  261. otherName=data.familyDoctorName;
  262. }else{
  263. otherCode=data.specialistDoctorCode;
  264. otherName=data.specialistDoctorName;
  265. }
  266. top.layer.open({
  267. type: 2,
  268. // offset: ['100px'], //右下角弹出
  269. area: ['800px', '650px'],
  270. shade: 0.5,
  271. title: '指导留言',
  272. fixed: true, //不固定
  273. maxmin: true,
  274. closeBtn:1,
  275. shift: 5,
  276. shadeClose: false, //点击遮罩关闭层
  277. content: '../../consulting/html/consulting.html?otherCode='+otherCode+'&otherName='+encodeURI(otherName)+'&planDetailId='+planDetailId,
  278. end:function(){ // 未点击确定按钮,点击关闭按钮
  279.       vm.getServiceItemList();
  280.     }
  281. });
  282. },
  283. loadSocket:function(planid,patient){
  284. var vm=this;
  285. var imurl=httpRequest.socketUrl;
  286. jQuery.getScript(imurl+"/socket.io/socket.io.js").done(function() {
  287. var type=2;//咨询类型
  288. var socket = io.connect(imurl);
  289. var sessionId = 'system';
  290. socket.emit('login', {userId: userInfo.uid, password: userInfo.uid,sessionId:sessionId,clientType:"doctor"});
  291. socket.on('message', function (data) {
  292. console.log(data);
  293. if(data.type==0){
  294. vm.checkAfterQrCode(planid,patient);
  295. }
  296. });
  297. socket.on('error', function (data) {
  298. console.log(data);
  299. });
  300. socket.on('ack', function (data) {
  301. console.log(data);
  302. vm.getQRCode(planid);
  303. });
  304. function getLocalTime(nS) {
  305. return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
  306. }
  307. })
  308. .fail(function() {
  309. top.layer.msg('服务码创建失败',{icon:5});
  310. });
  311. },
  312. checkAfterQrCode:function(planid,patient){
  313. var vm=this;
  314. var params={
  315. planDetailId:planid,
  316. patientCode: patient
  317. }
  318. rehaAPI.checkAfterQrCode(params).then(function(res){
  319. var icon=5;
  320. if(data.status==200){
  321. if(data.data){
  322. icon=1;
  323. vm.goToFinish(planid);
  324. }
  325. }
  326. top.layer.msg(res.msg,{icon:icon});
  327. })
  328. },
  329. getQRCode:function(planid){
  330. var vm=this;
  331. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  332. var params={
  333. planDetailId:planid,
  334. doctorCode: loginDoctor.uid
  335. }
  336. rehaAPI.createServiceQrCode(params).then(function(res){
  337. console.log(res);
  338. if(res.status==200){
  339. vm.qrCode=res.data;
  340. setTimeout(function(){
  341. vm.qrModal=true;
  342. },100)
  343. }else{
  344. top.layer.msg('服务码获取失败',{icon:5});
  345. }
  346. })
  347. }
  348. },
  349. filters:{
  350. formatDate:function(value, format) {
  351. if(!value) return ;
  352. var fmt=format || "yyyy-MM-dd hh:mm";
  353. var date = new Date(value);
  354. if (/(y+)/.test(fmt)) {
  355. fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  356. }
  357. let o = {
  358. 'M+': date.getMonth() + 1,
  359. 'd+': date.getDate(),
  360. 'h+': date.getHours(),
  361. 'm+': date.getMinutes(),
  362. 's+': date.getSeconds()
  363. };
  364. for (let k in o) {
  365. if (new RegExp(`(${k})`).test(fmt)) {
  366. let str = o[k] + '';
  367. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
  368. }
  369. }
  370. return fmt;
  371. }
  372. }
  373. })
  374. }()
  375. </script>
  376. </body>
  377. </html>