service_item_content.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  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.isCreate">
  120. <button class="btn btn-yuyue" v-if="service.reserve==1" @click="qwapp">转诊预约</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. qwapp:function(){
  172. top.layer.msg('请前往app处理',{icon:5});
  173. },
  174. //获取服务列表
  175. getServiceItemList:function(){
  176. var vm=this;
  177. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  178. var loadding = top.layer.load(0, {shade: false}); //0代表加载的风格,支持0-2
  179. rehaAPI.serviceItemList({planDetailIds:vm.planids}).then(function(res){
  180. top.layer.close(loadding);
  181. if(res.status==200){
  182. vm.serviceData=_.map(res.data||{},function(o){
  183. if(o.isMyTask==1){//执行者
  184. if(loginDoctor.doctorType!=1){//说明是家医
  185. o.isCK=true;//无法显示按钮
  186. }else{//专科
  187. o.isCK=false;
  188. }
  189. }else{
  190. if(loginDoctor.doctorType==o.specialistDoctorCode){//说明我自己是创建者
  191. o.isZD=false;//无法显示按钮
  192. o.isCreate=true;
  193. }
  194. }
  195. return o
  196. })
  197. }else{
  198. top.layer.msg(res.msg,{icon:5});
  199. }
  200. })
  201. },
  202. //健康教育
  203. jkjy:function(patient,planId){
  204. var vm=this
  205. top.layer.open({
  206. type: 2,
  207. // offset: ['100px'], //右下角弹出
  208. area: ['800px', '648px'],
  209. shade: 0.5,
  210. title: '健康教育',
  211. fixed: true, //不固定
  212. maxmin: true,
  213. closeBtn: 1,
  214. shift: 5,
  215. shadeClose: false, //点击遮罩关闭层
  216. content: '../../article/html/article.html?code='+patient+'&planId='+planId+'&isReha=true'
  217. });
  218. },
  219. // 健康指导
  220. jkzd:function(patient,planId){
  221. var vm=this
  222. top.layer.open({
  223. type: 2,
  224. // offset: ['100px'], //右下角弹出
  225. area: ['800px', '648px'],
  226. shade: 0.5,
  227. title: '健康教育',
  228. fixed: true, //不固定
  229. maxmin: true,
  230. closeBtn: 1,
  231. shift: 5,
  232. shadeClose: false, //点击遮罩关闭层
  233. content:'../../guidance/html/index.html#/person-edit-panel?patient='+patient+'&planId='+planId
  234. });
  235. },
  236. // 暂未开放
  237. zwkf:function(){
  238. top.layer.msg('此功能暂未开放',{icon:1});
  239. },
  240. goToFinish:function(planid){
  241. top.layer.open({
  242. type: 2,
  243. // offset: ['100px'], //右下角弹出
  244. area: ['600px', '650px'],
  245. shade: 0.5,
  246. title: '完成项目确认',
  247. fixed: true, //不固定
  248. maxmin: true,
  249. closeBtn:1,
  250. shift: 5,
  251. shadeClose: false, //点击遮罩关闭层
  252. content: '../../rehabilitation/html/guide_the_message.html?planid='+planid
  253. });
  254. },
  255. fwm:function(planid,patient){
  256. this.loadSocket(planid,patient);
  257. },
  258. zdly:function(data){
  259. var vm = this
  260. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  261. var otherCode,otherName;
  262. var planDetailId=data.planDetaiId;
  263. if(loginDoctor.doctorType==1){
  264. otherCode=data.familyDoctorCode;
  265. otherName=data.familyDoctorName;
  266. }else{
  267. otherCode=data.specialistDoctorCode;
  268. otherName=data.specialistDoctorName;
  269. }
  270. top.layer.open({
  271. type: 2,
  272. // offset: ['100px'], //右下角弹出
  273. area: ['800px', '650px'],
  274. shade: 0.5,
  275. title: '指导留言',
  276. fixed: true, //不固定
  277. maxmin: true,
  278. closeBtn:1,
  279. shift: 5,
  280. shadeClose: false, //点击遮罩关闭层
  281. content: '../../consulting/html/consulting.html?otherCode='+otherCode+'&otherName='+encodeURI(otherName)+'&planDetailId='+planDetailId,
  282. end:function(){ // 未点击确定按钮,点击关闭按钮
  283.       vm.getServiceItemList();
  284.     }
  285. });
  286. },
  287. loadSocket:function(planid,patient){
  288. var vm=this;
  289. var imurl=httpRequest.socketUrl;
  290. jQuery.getScript(imurl+"/socket.io/socket.io.js").done(function() {
  291. var type=2;//咨询类型
  292. var socket = io.connect(imurl);
  293. var sessionId = 'system';
  294. socket.emit('login', {userId: userInfo.uid, password: userInfo.uid,sessionId:sessionId,clientType:"doctor"});
  295. socket.on('message', function (data) {
  296. console.log(data);
  297. if(data.type==0){
  298. vm.checkAfterQrCode(planid,patient);
  299. }
  300. });
  301. socket.on('error', function (data) {
  302. console.log(data);
  303. });
  304. socket.on('ack', function (data) {
  305. console.log(data);
  306. vm.getQRCode(planid);
  307. });
  308. function getLocalTime(nS) {
  309. return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
  310. }
  311. })
  312. .fail(function() {
  313. top.layer.msg('服务码创建失败',{icon:5});
  314. });
  315. },
  316. checkAfterQrCode:function(planid,patient){
  317. var vm=this;
  318. var params={
  319. planDetailId:planid,
  320. patientCode: patient
  321. }
  322. rehaAPI.checkAfterQrCode(params).then(function(res){
  323. var icon=5;
  324. if(data.status==200){
  325. if(data.data){
  326. icon=1;
  327. vm.goToFinish(planid);
  328. }
  329. }
  330. top.layer.msg(res.msg,{icon:icon});
  331. })
  332. },
  333. getQRCode:function(planid){
  334. var vm=this;
  335. var loginDoctor = JSON.parse(window.localStorage.getItem('wlyyAgent'));
  336. var params={
  337. planDetailId:planid,
  338. doctorCode: loginDoctor.uid
  339. }
  340. rehaAPI.createServiceQrCode(params).then(function(res){
  341. console.log(res);
  342. if(res.status==200){
  343. vm.qrCode=res.data;
  344. setTimeout(function(){
  345. vm.qrModal=true;
  346. },100)
  347. }else{
  348. top.layer.msg('服务码获取失败',{icon:5});
  349. }
  350. })
  351. }
  352. },
  353. filters:{
  354. formatDate:function(value, format) {
  355. if(!value) return ;
  356. var fmt=format || "yyyy-MM-dd hh:mm";
  357. var date = new Date(value);
  358. if (/(y+)/.test(fmt)) {
  359. fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  360. }
  361. let o = {
  362. 'M+': date.getMonth() + 1,
  363. 'd+': date.getDate(),
  364. 'h+': date.getHours(),
  365. 'm+': date.getMinutes(),
  366. 's+': date.getSeconds()
  367. };
  368. for (let k in o) {
  369. if (new RegExp(`(${k})`).test(fmt)) {
  370. let str = o[k] + '';
  371. fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : ('00' + str).substr(str.length));
  372. }
  373. }
  374. return fmt;
  375. }
  376. }
  377. })
  378. }()
  379. </script>
  380. </body>
  381. </html>