medicalTemporary.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <template>
  2. <div id="MyDiv">
  3. <div class="cont-left">
  4. <div class="cont-title-description">滨州医学院烟台附属医院</div>
  5. <div class="cont-title-item">临时医嘱单</div>
  6. <div></div>
  7. <div class="cont-title-name">
  8. <div class="cont-title-item">
  9. <span class="cont-title-text">姓名:</span>
  10. <span class="cont-title-normal" v-if="dataObj.info">{{ dataObj.info.AAA01 }}</span>
  11. </div>
  12. <div class="cont-title-item">
  13. <span class="cont-title-text">性别:</span>
  14. <span class="cont-title-normal" v-if="dataObj.info">{{ dataObj.info.AAA02C }}</span>
  15. </div>
  16. <div class="cont-title-item">
  17. <span class="cont-title-text">年龄:</span>
  18. <span class="cont-title-normal" v-if="dataObj.info">{{ dataObj.info.AAA04 }}</span>
  19. </div>
  20. <div class="cont-title-item">
  21. <span class="cont-title-text cont-title-twidt">科别:</span>
  22. <span class="cont-title-normal" v-if="dataObj.info">{{ dataObj.info.AAB02C }}</span>
  23. </div>
  24. <div class="cont-title-item">
  25. <span class="cont-title-text">床号:</span>
  26. <span class="cont-title-normal"></span>
  27. </div>
  28. <div class="cont-title-item">
  29. <span class="cont-title-text">住院号:</span>
  30. <span class="cont-title-normal" v-if="dataObj.info">{{ dataObj.info.AAA28 }}</span>
  31. </div>
  32. </div>
  33. <div class="table">
  34. <table ref="tables">
  35. <tr style="height: 10px">
  36. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  37. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  38. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  39. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  40. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  41. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  42. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  43. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  44. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  45. <td style="height: 10px" class="table-value m-all" colspan="1"></td>
  46. </tr>
  47. <tr>
  48. <td class="table-label medical-font" colspan="1">日期</td>
  49. <td class="table-label medical-font" colspan="1">时间</td>
  50. <td class="table-label medical-font" colspan="3">医嘱</td>
  51. <td class="table-label medical-font" colspan="1">剂量</td>
  52. <td class="table-label medical-font" colspan="1">用法</td>
  53. <td class="table-label medical-font" colspan="1">医师签名</td>
  54. <td class="table-label medical-font" colspan="1">护士签名</td>
  55. <td class="table-label medical-font" colspan="1">执行时间</td>
  56. </tr>
  57. <tr v-for="(item, index) in dataObj.list" :key="index">
  58. <td class="table-value" colspan="1">{{ item.DATE }}</td>
  59. <td class="table-value" colspan="1">{{ item.TIME }}</td>
  60. <td class="table-value" colspan="3">{{ item.YZMC }}</td>
  61. <td class="table-value" colspan="1">{{ item.YCJL }}</td>
  62. <td class="table-value" colspan="1">{{ item.SYPC }}</td>
  63. <td class="table-value" colspan="1">{{ item.KZYS }}</td>
  64. <td class="table-value" colspan="1">{{ item.XZJDGH }}</td>
  65. <td class="table-value" colspan="1">{{ item.XZJDSJ }}</td>
  66. </tr>
  67. <tr>
  68. <td class="table-value" colspan="1"></td>
  69. <td class="table-value" colspan="1"></td>
  70. <td class="table-value" colspan="5"></td>
  71. <td class="table-value" colspan="1"></td>
  72. <td class="table-value" colspan="1"></td>
  73. <td class="table-value" colspan="1"></td>
  74. </tr>
  75. <tr>
  76. <td class="table-value" colspan="1"></td>
  77. <td class="table-value" colspan="1"></td>
  78. <td class="table-value" colspan="5"></td>
  79. <td class="table-value" colspan="1"></td>
  80. <td class="table-value" colspan="1"></td>
  81. <td class="table-value" colspan="1"></td>
  82. </tr>
  83. <tr>
  84. <td class="table-value" colspan="1"></td>
  85. <td class="table-value" colspan="1"></td>
  86. <td class="table-value" colspan="5"></td>
  87. <td class="table-value" colspan="1"></td>
  88. <td class="table-value" colspan="1"></td>
  89. <td class="table-value" colspan="1"></td>
  90. </tr>
  91. <tr>
  92. <td class="table-value" colspan="1"></td>
  93. <td class="table-value" colspan="1"></td>
  94. <td class="table-value" colspan="5"></td>
  95. <td class="table-value" colspan="1"></td>
  96. <td class="table-value" colspan="1"></td>
  97. <td class="table-value" colspan="1"></td>
  98. </tr>
  99. <tr>
  100. <td class="table-value" colspan="1"></td>
  101. <td class="table-value" colspan="1"></td>
  102. <td class="table-value" colspan="5"></td>
  103. <td class="table-value" colspan="1"></td>
  104. <td class="table-value" colspan="1"></td>
  105. <td class="table-value" colspan="1"></td>
  106. </tr>
  107. </table>
  108. </div>
  109. <div class="bottom-time bottom-time-top">
  110. <div class="bottom-time-list" v-if="dataObj.info.HCRQ">
  111. <span class="bottom-time-bold">护士分床时间:</span>
  112. <span>{{ dataObj.info.HCRQ }}</span>
  113. </div>
  114. <div class="bottom-time-list" v-if="dataObj.info.AAC01">
  115. <span class="bottom-time-bold">出院时间:</span>
  116. <span>{{ dataObj.info.AAC01 }}</span>
  117. </div>
  118. </div>
  119. <div class="bottom-time bottom-time-botom" v-if="dataObj.info.SWSJ">
  120. <div class="bottom-time-list">
  121. <span class="bottom-time-bold">死亡时间:</span>
  122. <span>{{ dataObj.info.SWSJ }}</span>
  123. </div>
  124. </div>
  125. </div>
  126. </div>
  127. </template>
  128. <script>
  129. // import OtherComponent from '@/components/OtherComponent'
  130. export default {
  131. name: 'medicalTemporary',
  132. components: {
  133. // OtherComponent
  134. },
  135. directives: {},
  136. filters: {},
  137. extends: {},
  138. mixins: {},
  139. props: {
  140. dataObj: {
  141. type: Object,
  142. default: null,
  143. },
  144. },
  145. data() {
  146. return {
  147. data: '',
  148. ifFile: false,
  149. };
  150. },
  151. computed: {},
  152. watch: {},
  153. beforeCreate() {
  154. // 生命周期钩子:组件实例刚被创建,组件属性计算之前,如 data 属性等
  155. },
  156. created() {
  157. // 生命周期钩子:组件实例创建完成,属性已绑定,但 DOM 还未生成,el 属性还不存在
  158. // 初始化渲染页面
  159. },
  160. beforeMount() {
  161. // 生命周期钩子:模板编译/挂载之前
  162. },
  163. mounted() {
  164. // 生命周期钩子:模板编译、挂载之后(此时不保证已在 document 中)
  165. },
  166. beforeUpate() {
  167. // 生命周期钩子:组件更新之前
  168. },
  169. updated() {
  170. // 生命周期钩子:组件更新之后
  171. },
  172. activated() {
  173. // 生命周期钩子:keep-alive 组件激活时调用
  174. },
  175. deactivated() {
  176. // 生命周期钩子:keep-alive 组件停用时调用
  177. },
  178. beforeDestroy() {
  179. // 生命周期钩子:实例销毁前调用
  180. },
  181. destroyed() {
  182. // 生命周期钩子:实例销毁后调用
  183. },
  184. errorCaptured(err, vm, info) {
  185. // 生命周期钩子:当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
  186. console.log(err, vm, info);
  187. },
  188. methods: {},
  189. };
  190. </script>
  191. <style lang="scss" scoped>
  192. #MyDiv {
  193. // padding:0 15px;
  194. margin: 0 15px;
  195. }
  196. .cont-title {
  197. display: flex;
  198. justify-content: space-between;
  199. span {
  200. padding: 5px;
  201. }
  202. }
  203. .cont-title-item {
  204. width: 100%;
  205. margin: 0 auto;
  206. display: flex;
  207. justify-content: center;
  208. font-size: 20px;
  209. padding: 20px 0 10px 0;
  210. font-weight: 600;
  211. }
  212. .cont-left {
  213. // flex: 1;
  214. // min-height: 650px;
  215. // margin: 0 15px;
  216. // height: 800px;
  217. // overflow-y: scroll;
  218. background: #ffffff;
  219. // border: 1px solid #e2e2e2;
  220. padding: 10px;
  221. .cont-title-name {
  222. width: 100%;
  223. height: 50px;
  224. display: flex;
  225. // align-items: flex-end;
  226. justify-content: space-between;
  227. .cont-title-item {
  228. flex: 1;
  229. text-align: left;
  230. display: flex;
  231. justify-content: left;
  232. }
  233. .cont-title-text {
  234. font-weight: bold;
  235. }
  236. .cont-title-twidt {
  237. width: 35px;
  238. }
  239. .cont-title-normal {
  240. font-weight: normal;
  241. margin-left: 5px;
  242. }
  243. }
  244. }
  245. .cont-title-description {
  246. margin: 20px;
  247. font-size: 24px;
  248. font-weight: bold;
  249. color: #2c3240;
  250. // width: 1200px;
  251. text-align: center;
  252. }
  253. table {
  254. min-width: 1000px;
  255. table-layout: fixed;
  256. empty-cells: show;
  257. border-collapse: collapse;
  258. margin: 0 auto;
  259. margin-bottom: 30px;
  260. td {
  261. border: 1px solid #dddddd;
  262. // padding-left: 16px;
  263. text-align: center;
  264. font-size: 12px;
  265. box-sizing: border-box;
  266. }
  267. .table-label {
  268. width: 150px;
  269. height: 40px;
  270. color: #666666;
  271. background-color: #f9f9f9;
  272. }
  273. .table-value {
  274. width: 210px;
  275. height: 40px;
  276. color: #333333;
  277. // padding-right: 16px;
  278. text-align: center;
  279. }
  280. }
  281. .m-all {
  282. border: none;
  283. }
  284. .m-left {
  285. border-left: none;
  286. }
  287. .m-right {
  288. border-right: none;
  289. }
  290. .medical-font {
  291. font-weight: bold;
  292. }
  293. </style>