123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124 |
- <template>
- <div>
- <drag-tool :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
- <div :style="moduleComputedStyle" >
- <div :style="titleComputedStyle" v-if="data.moduleConfig.showTitle" >
- <div class="titleStyle">{{titleText}}</div>
- </div>
- <div class="ql-editor" >
- <span v-html="displayHtml"></span>
- </div>
- </div>
- </drag-tool>
- </div>
- </template>
- <script>
- import DragTool from "../DragTool";
- import mixin from '../../mixinnew'
- export default {
- name: "html-display",
- mixins:[mixin],
- components: {DragTool},
- title:'富文本',
- unique:'',
- computed:{
- displayHtml(){
- if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayManualItem!==null){ //看板项内容
- let customItem = this.$store.state.manualInputBoardItems.filter(p=>p.item_name_md5===this.data.moduleConfig.dataConfig.displayManualItem)[0]
- if(customItem){
- return customItem.content
- }
- }
- return ''
- },
- titleText(){
- //重写手动输入看板项目看标题
- if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.titleText!=='') {
- return this.data.moduleConfig.dataConfig.titleText
- }
- if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayManualItem!==null){ //看板项内容
- let customItem = this.$store.state.manualInputBoardItems.filter(p=>p.item_name_md5===this.data.moduleConfig.dataConfig.displayManualItem)[0]
- if(customItem){
- return customItem.item_name
- }
- }
- return '标题'
- }
- },
- dataTpl:{
- tpl_id: 11,
- tpl_type: 'BOARD_ITEM',
- templateName:'html-display',
- isEdit:true,
- moduleIconClass:'icon-html1',
- moduleConfig:{
- moduleStyle: {
- borderColor: '',
- borderRadius:'0px',
- borderStyle:'solid',
- borderTopWidth:'0px',
- borderRightWidth:'0px',
- borderBottomWidth:'0px',
- borderLeftWidth:'0px',
- backgroundColor:'',
- justifyContent:'flex-start',
- margin:'0px',
- padding:'0px',
- },
- styleConfig:{
- borderColorWithNurse:'', //边框颜色跟随的护理信息分类
- backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
- titleColorWithNurse:'',
- textColorWithNurse:'',
- textColorToday:'',
- backgroundColorToday:''
- },
- dataConfig:{
- displayManualItem:'',
- titleText:''
- },
- titleStyle:{ //标题样式
- fontSize:'14px',
- color:'',
- fontWeight:'normal',
- margin:'0px',
- border:'0px',
- borderColor:'',
- padding:'0px',
- textAlign:'left',
- borderStyle: 'solid',
- borderBottomWidth: '0px'
- },
- textStyle:{ //内容样式
- color:'',
- fontWeight:'normal',
- marginLeft:'0px',
- marginRight:'0px',
- },
- showTitle:true //显示标题,
- },
- children:[]
- },
- }
- </script>
- <style scoped>
- .titleStyle{
- height: 100%;
- display: block;
- align-items: center;
- flex-direction: row-reverse;
- width: 100%;
- overflow-wrap: break-word;
- word-break: break-all;
- }
- </style>
|