html-display.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <div>
  3. <drag-tool :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
  4. <div :style="moduleComputedStyle" >
  5. <div :style="titleComputedStyle" v-if="data.moduleConfig.showTitle" >
  6. <div class="titleStyle">{{titleText}}</div>
  7. </div>
  8. <div class="ql-editor" >
  9. <span v-html="displayHtml"></span>
  10. </div>
  11. </div>
  12. </drag-tool>
  13. </div>
  14. </template>
  15. <script>
  16. import DragTool from "../DragTool";
  17. import mixin from '../../mixinnew'
  18. export default {
  19. name: "html-display",
  20. mixins:[mixin],
  21. components: {DragTool},
  22. title:'富文本',
  23. unique:'',
  24. computed:{
  25. displayHtml(){
  26. if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayManualItem!==null){ //看板项内容
  27. let customItem = this.$store.state.manualInputBoardItems.filter(p=>p.item_name_md5===this.data.moduleConfig.dataConfig.displayManualItem)[0]
  28. if(customItem){
  29. return customItem.content
  30. }
  31. }
  32. return ''
  33. },
  34. titleText(){
  35. //重写手动输入看板项目看标题
  36. if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.titleText!=='') {
  37. return this.data.moduleConfig.dataConfig.titleText
  38. }
  39. if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayManualItem!==null){ //看板项内容
  40. let customItem = this.$store.state.manualInputBoardItems.filter(p=>p.item_name_md5===this.data.moduleConfig.dataConfig.displayManualItem)[0]
  41. if(customItem){
  42. return customItem.item_name
  43. }
  44. }
  45. return '标题'
  46. }
  47. },
  48. dataTpl:{
  49. tpl_id: 11,
  50. tpl_type: 'BOARD_ITEM',
  51. templateName:'html-display',
  52. isEdit:true,
  53. moduleIconClass:'icon-html1',
  54. moduleConfig:{
  55. moduleStyle: {
  56. borderColor: '',
  57. borderRadius:'0px',
  58. borderStyle:'solid',
  59. borderTopWidth:'0px',
  60. borderRightWidth:'0px',
  61. borderBottomWidth:'0px',
  62. borderLeftWidth:'0px',
  63. backgroundColor:'',
  64. justifyContent:'flex-start',
  65. margin:'0px',
  66. padding:'0px',
  67. },
  68. styleConfig:{
  69. borderColorWithNurse:'', //边框颜色跟随的护理信息分类
  70. backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
  71. titleColorWithNurse:'',
  72. textColorWithNurse:'',
  73. textColorToday:'',
  74. backgroundColorToday:''
  75. },
  76. dataConfig:{
  77. displayManualItem:'',
  78. titleText:''
  79. },
  80. titleStyle:{ //标题样式
  81. fontSize:'14px',
  82. color:'',
  83. fontWeight:'normal',
  84. margin:'0px',
  85. border:'0px',
  86. borderColor:'',
  87. padding:'0px',
  88. textAlign:'left',
  89. borderStyle: 'solid',
  90. borderBottomWidth: '0px'
  91. },
  92. textStyle:{ //内容样式
  93. color:'',
  94. fontWeight:'normal',
  95. marginLeft:'0px',
  96. marginRight:'0px',
  97. },
  98. showTitle:true //显示标题,
  99. },
  100. children:[]
  101. },
  102. }
  103. </script>
  104. <style scoped>
  105. .titleStyle{
  106. height: 100%;
  107. display: block;
  108. align-items: center;
  109. flex-direction: row-reverse;
  110. width: 100%;
  111. overflow-wrap: break-word;
  112. word-break: break-all;
  113. }
  114. </style>