ncs_board_ssr/components/templates/common/html-display.vue

<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>