text-display.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. <template>
  2. <keep-alive>
  3. <!-- <drag-tool :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">-->
  4. <div :style="moduleComputedStyle" class="flex">
  5. <div class="iconfont" :class="data.moduleConfig.dataConfig.iconClass" v-if="data.moduleConfig.showIcon" :style="data.moduleConfig.iconStyle"></div>
  6. <div :style="titleComputedStyle" v-if="data.moduleConfig.showTitle" class="titlewrap">
  7. <div class="titleStyle"> {{data.moduleConfig.dataConfig.titleText}}</div>
  8. </div>
  9. <div :style="textComputedStyle" class="content_item">
  10. {{displayText}}
  11. </div>
  12. </div>
  13. <!-- </drag-tool>-->
  14. </keep-alive>
  15. </template>
  16. <script>
  17. import DragTool from "../DragTool";
  18. import mixin from '../../mixinnew'
  19. import {unix2Date,unix2DateWithTimeZone} from '@/utils/Foundation'
  20. export default {
  21. name: "text-display",
  22. mixins:[mixin],
  23. components: {DragTool},
  24. title:'内容显示单元',
  25. unique:'',
  26. computed:{
  27. displayText(){
  28. if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith==='system.date'){ //系统信息
  29. return unix2DateWithTimeZone(this.systemDate,this.data.moduleConfig.dataConfig.textFormat)
  30. } else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith==='part.name'){ //科室信息
  31. let text = this.data.moduleConfig.dataConfig.contentText
  32. if(this.bindData){
  33. text = this.bindData['part_name']
  34. }
  35. return text
  36. }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('patient.')>-1) { //患者信息
  37. let text = this.data.moduleConfig.dataConfig.contentText
  38. if(this.bindData){
  39. text = this.bindData.items[this.childDataIndex][this.data.moduleConfig.dataConfig.textWith.replace('patient.','')]
  40. if(this.data.moduleConfig.dataConfig.textType==='日期'){ //格式化日期
  41. text = unix2DateWithTimeZone(text*1000,this.data.moduleConfig.dataConfig.textFormat)
  42. }
  43. if(this.data.moduleConfig.dataConfig.textWith==='patient.sex'){ //格式化性别
  44. text=(text===0?'女':text===1?'男':'未知')
  45. }
  46. if(this.data.moduleConfig.dataConfig.textWith==='patient.age'){
  47. text = (text===null?'':text)+this.bindData.items[this.childDataIndex]['age_unit']
  48. }
  49. }
  50. return text
  51. }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('nurse_config_')>-1){ //护理参数
  52. let nurseId = this.data.moduleConfig.dataConfig.textWith.replace('nurse_config_','')
  53. let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
  54. if(nurseOption){
  55. return nurseOption['nurse_option_name']
  56. }
  57. }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('statistic_')>-1){
  58. let statisticKey = this.data.moduleConfig.dataConfig.textWith.replace('statistic_','')
  59. let statisticItem = this.$store.state.statisticData[statisticKey]
  60. if(statisticItem){
  61. return statisticItem
  62. }
  63. }else {
  64. return this.data.moduleConfig.dataConfig.contentText
  65. }
  66. }
  67. },
  68. dataTpl:{
  69. tpl_id: 7,
  70. tpl_type: 'BOARD_ITEM',
  71. templateName:'text-display',
  72. isEdit:true,
  73. moduleIconClass:'icon-Text',
  74. moduleConfig:{
  75. moduleStyle: {
  76. borderColor: '',
  77. borderWidth:'0px',
  78. borderRadius:'0px',
  79. borderStyle:'solid',
  80. backgroundColor:'',
  81. justifyContent:'left',
  82. margin:'0px',
  83. padding:'0px',
  84. height:'20px'
  85. },
  86. styleConfig:{
  87. borderColorWithNurse:'', //边框颜色跟随的护理信息分类
  88. backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
  89. titleColorWithNurse:'',
  90. textColorWithNurse:'',
  91. textColorToday:'',
  92. backgroundColorToday:''
  93. },
  94. dataConfig:{
  95. titleText:'Title',
  96. contentText:'文字',
  97. textWith:'',
  98. textType:'文本',
  99. textFormat:'',
  100. iconClass:'' //图标样式类
  101. },
  102. titleStyle:{ //标题样式
  103. fontSize:'14px',
  104. color:'',
  105. fontWeight:'normal',
  106. marginLeft:'0px',
  107. marginRight:'0px',
  108. border:'0px',
  109. width:'auto',
  110. borderColor:'',
  111. paddingRight:'10px',
  112. paddingLeft:'10px',
  113. borderStyle: 'solid',
  114. borderRightWidth: '0px'
  115. },
  116. textStyle:{ //内容样式
  117. fontSize:'14px',
  118. color:'',
  119. fontWeight:'normal',
  120. marginLeft:'0px',
  121. marginRight:'0px',
  122. },
  123. iconStyle:{
  124. fontSize:'14px',
  125. color:'',
  126. marginLeft:'0px',
  127. marginTop:'0px',
  128. marginRight:'0px',
  129. marginBottom:'0px'
  130. },
  131. showTitle:true, //显示标题,
  132. showIcon:false
  133. },
  134. children:[]
  135. },
  136. }
  137. </script>
  138. <style scoped>
  139. .content_item{
  140. align-self: center;
  141. }
  142. .titlewrap{
  143. align-items: center;
  144. display: flex;
  145. flex-direction: column;
  146. overflow: hidden;
  147. overflow-wrap: break-word;
  148. }
  149. .titleStyle{
  150. height: 100%;
  151. display: inline-flex;
  152. align-items: center;
  153. flex-direction: row-reverse;
  154. width: 100%;
  155. overflow-wrap: break-word;
  156. word-break: break-all;
  157. }
  158. </style>