select-patient.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203
  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/select-patient.css" />
  10. </head>
  11. <body class="m0">
  12. <div id="app" style="height: 100%;" v-cloak>
  13. <div class="plr20 ptb10 c-border-b">
  14. <div class="clearfix c-border">
  15. <input class="fl search-input plr10" type="text" placeholder="输入居民姓名或身份证号码" :value="keyword" />
  16. <span class="fr search-btn"></span>
  17. </div>
  18. </div>
  19. <div style="overflow: hidden; height: calc(100% - 59px);">
  20. <ul class="pat-list p0 m0" style="overflow: auto; height: 100%;" v-if="isSearch">
  21. <li class="clearfix lh40 plr20 ptb10" v-for="(pati, index) in patiList" :key="index" @click="getPatientInfo(pati)">
  22. <div class="fl set-img">
  23. <img :src="setPatImg(pati.photo)" alt="居民头像" />
  24. </div>
  25. <span class="fl ml20 mr10 c-333 c-f16">{{pati.patientName}}</span>
  26. <span class="fl c-999">({{pati.sex}}&emsp;{{pati.age}}岁)</span>
  27. </li>
  28. </ul>
  29. <ul class="label-list p0 m0" style="overflow: auto; height: 100%;" v-if="isLabel">
  30. <li v-for="(label, index) in labelList" :key="index">
  31. <h4 class="c-border-b m0 lh40 pl10 pr50 clearfix" @click="selectIndexFn(index, label)" :class="{'active':selectIndex == index}">{{label.labelName}}<span class="fr">{{label.count}}</span></h4>
  32. <ul class="pat-list p0 m0" v-if="selectIndex == index">
  33. <li class="clearfix lh40 plr20 ptb10" v-for="(pati, ind) in patiList" @click="getPatientInfo(pati)">
  34. <div class="fl set-img">
  35. <img :src="setPatImg(pati.photo)" alt="居民头像" />
  36. </div>
  37. <span class="fl ml20 mr10 c-333 c-f16">{{pati.patientName}}</span>
  38. <span class="fl c-999">({{pati.sex}}&emsp;{{pati.age == 0 ? "<1" : pati.age}}岁)</span>
  39. </li>
  40. </ul>
  41. </li>
  42. </ul>
  43. <div class="selected-patient c-h100" v-if="!isSearch && !isLabel">
  44. <div class="clearfix plr20 ptb10">
  45. <div class="fl set-img">
  46. <img :src="setPatImg(patiInfo.photo)" alt="居民头像" />
  47. </div>
  48. <div class="fl ml10 set-txt c-999 clearfix">
  49. <p class="m0 lh22 clearfix"><span class="c-333 c-f16">{{patiInfo.patientName}}</span>&emsp;{{patiInfo.sex}}&emsp;{{patiInfo.age}}岁<strong class="fr mr20 c-333">出院医嘱:<span>0</span></strong></p>
  50. <p class="m0">身份证号: <span class="c-333">{{patiInfo.idcard}}</span></p>
  51. </div>
  52. </div>
  53. <div class="result plr20" style="overflow: hidden; height: calc(100% - 60px);">
  54. <div class="no-result c-t-center c-border-t ptb20" v-if="true">
  55. <img src="../images/wushuju01_img.png" alt="" />
  56. <p class="c-999 mt10 mb20">暂无相关信息</p>
  57. <span class="c-fff btn cur-pit plr10 ptb5 bgc-12b7f5 b-r-3" @click="selectPatient()">同步居民</span>
  58. </div>
  59. <ul class="p0 m0 c-333 c-border-t" style="overflow: auto; height: 100%;" v-if="false">
  60. <li class="ptb10 c-border-b">
  61. <div class="clearfix">
  62. <p class="fl p0 m0 w-100-70"><span class="c-999">出院医嘱:</span>这是出院医学征服世界爱的色放卡大V阿大V撒<span class="ml10 c-12b7f5 txt-underline cur-pit" @click="showLayer()">查看</span></p>
  63. <span class="fr w40 c-t-center c-fff btn cur-pit plr10 ptb5 bgc-12b7f5 b-r-3" @click="selectPatient()">提取</span>
  64. </div>
  65. <div class="clearfix mt5">
  66. <p class="fl m0"><span class="c-999">主治医生:</span>名字</p>
  67. <p class="fr m0"><span class="c-999">出院时间:</span>2018-08-28</p>
  68. </div>
  69. </li>
  70. </ul>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
  76. <script src="../../../js/jquery-2.2.4.js"></script>
  77. <script src="../../../plugins/layer/layer.min.js"></script>
  78. <script src="../../../js/bootstrap.min.js"></script>
  79. <script src="../../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
  80. <script src="../../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
  81. <script src="../../../js/util.js" type="text/javascript" charset="utf-8"></script>
  82. <script src="../../../api/http-request.js" type="text/javascript"></script>
  83. <script src="../../../api/recover_api.js" type="text/javascript"></script>
  84. <script type="text/javascript">
  85. var doctorType = (JSON.parse(window.localStorage.getItem('wlyyAgent'))||{}).doctorType,
  86. doctorCode = (JSON.parse(window.localStorage.getItem('wlyyAgent'))||{}).uid
  87. var httpData=GetRequest()
  88. function showSuccessMessage(msg) {
  89. layer.msg(msg, {
  90. icon: 1
  91. })
  92. }
  93. function showErrorMessage(msg) {
  94. layer.msg(msg, {
  95. icon: 5
  96. })
  97. }
  98. function showWarningMessage(msg) {
  99. layer.msg(msg, {
  100. icon: 2
  101. })
  102. }
  103. function showInfoMessage(msg) {
  104. layer.msg(msg, {
  105. icon: 6
  106. })
  107. }
  108. selectVue = new Vue({
  109. el: "#app",
  110. data: {
  111. page: 1,
  112. keyword: null,
  113. selectIndex: null,
  114. labelList: [],
  115. isLabel: true,
  116. isSearch: false,
  117. patiList: [],
  118. patiInfo: null
  119. },
  120. mounted: function() {
  121. this.findLabelAndPatientCountByDoctor()
  122. },
  123. methods: {
  124. showLayer: function() {
  125. top.layer.open({
  126. type: 1,
  127. area: ['400px', '500px'],
  128. shade: 0.5,
  129. title: "出院医嘱",
  130. closeBtn: 1,
  131. shift: 5,
  132. shadeClose: true, //点击遮罩关闭层
  133. content: "<div class='plr10 ptb10'>&emsp;&emsp;" + "这是医嘱大的大爱大" + "</div>"
  134. })
  135. },
  136. findLabelAndPatientCountByDoctor: function() {
  137. var vm = this,
  138. loadding = layer.load(0, {shade: false}),
  139. params = {
  140. doctor: doctorCode
  141. }
  142. recoverAPI.findLabelAndPatientCountByDoctor(params).then(function(res) {
  143. layer.close(loadding)
  144. if(res.status == 200) {
  145. vm.labelList = res.data
  146. } else {
  147. showErrorMessage(res.msg);
  148. }
  149. })
  150. },
  151. getPatientInfoByDoctor: function(label) {
  152. var vm = this,
  153. loadding = layer.load(0, {shade: false}),
  154. params = {
  155. doctor: doctorCode,
  156. patientInfo: this.keyword, // 居民身份证或者姓名
  157. disease: label.label,
  158. page: vm.page,
  159. size: 50
  160. }
  161. recoverAPI.getPatientInfoByDoctor(params).then(function(res) {
  162. layer.close(loadding)
  163. if(res.status == 200) {
  164. vm.patiList = res.data
  165. } else {
  166. showErrorMessage(res.msg);
  167. }
  168. })
  169. },
  170. getPatientInfo: function(pati) {
  171. this.isSearch = false
  172. this.isLabel = false
  173. this.patiInfo = pati
  174. },
  175. selectIndexFn: function(index, label) {
  176. if(this.selectIndex == index) {
  177. this.selectIndex = null
  178. } else {
  179. this.selectIndex = index
  180. this.getPatientInfoByDoctor(label)
  181. }
  182. },
  183. selectPatient: function() {
  184. top.recoverVue.selectPatientOk(this.patiInfo)
  185. top.layer.close(top.selectPatientIndex)
  186. },
  187. setPatImg: function(src) {
  188. if(!src) {
  189. return "../../../images/p-female.png"
  190. } else {
  191. var str = httpRequest.getImgUrl(src);
  192. return str
  193. }
  194. }
  195. }
  196. })
  197. </script>
  198. </body>
  199. </html>