ncs_board_ssr/components/templates/common/text-display2.vue

<template>

    <drag-tool  :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">
        <div :style="moduleComputedStyle" class="flex">

            <div :style="titleComputedStyle" v-if="data.moduleConfig.showTitle"   class="titlewrap"> <div class="titleStyle">{{titleText}}</div>
            </div>
            <div class="flex-sub"  :style="textComputedStyle"> <div class="contentStyle">{{displayText}}</div>
            </div>
        </div>
    </drag-tool>

    </template>

    <script>
    import DragTool from "../DragTool";
    import mixin from '../../mixinnew'
    export default {
        name: "text-display2",
        mixins:[mixin],
        components: {DragTool},
        title:'自定义看板项显示',
        computed:{
            displayText(){
                if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.displayCustomerItem!==null){ //看板项内容

                    let customItem = this.$store.state.boardCustomerItems.filter(p=>p.his_keyval===this.data.moduleConfig.dataConfig.displayCustomerItem)[0]
                    if(customItem){
                        return customItem.area_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.displayCustomerItem!==null){ //看板项内容


                    let customItem = this.$store.state.boardCustomerItems.filter(p=>p.his_keyval===this.data.moduleConfig.dataConfig.displayCustomerItem)[0]
                    if(customItem){
                        return customItem.area_label
                    }

                }
               return '标题'
            }

        },

        dataTpl:{
            tpl_id: 8,
            tpl_type: 'BOARD_ITEM',
            templateName:'text-display2',
            isEdit:true,
            unique:'',
            moduleIconClass:'icon-Text',
            moduleConfig:{
                moduleStyle: {
                    borderColor: '',
                    borderRadius:'0px',
                    borderStyle:'solid',
                    backgroundColor:'',
                    borderTopWidth:'0px',
                    borderRightWidth:'0px',
                    borderBottomWidth:'0px',
                    borderLeftWidth:'0px',
                    margin:'0px',
                    padding:'0px',
                    height:'40px'
                },
                styleConfig:{

                },
                titleStyle:{ //标题样式
                    fontSize:'14px',
                    color:'',
                    fontWeight:'normal',
                    marginLeft:'0px',
                    marginRight:'0px',
                },
                textStyle:{ //内容样式
                    fontSize:'14px',
                    color:'',
                    fontWeight:'normal',
                    marginLeft:'0px',
                    marginRight:'0px',
                },
                dataConfig:{
                   displayCustomerItem:'',
                    titleText:''
                },
                showTitle:true, //显示标题,
            },
            children:([])
        },

    }
</script>

<style scoped>

    .contentStyle{
        margin-left: 10px;
        display: flex;
        align-items: center;
        height: 100%;
        overflow: hidden;
        overflow-wrap: break-word;
        word-break: break-all;
    }
    .titlewrap{
        align-items: center;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        overflow-wrap: break-word;
    }
    .titleStyle{
        height: 100%;
        display: inline-flex;
        align-items: center;
        flex-direction: row-reverse;
        width: 100%;
        overflow-wrap: break-word;
        word-break: break-all;
    }

</style>