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

<template>
<keep-alive>
<!--    <drag-tool  :unique="data.unique" @delete="deleteModule" :is-edit="isEdit" @copy="copyModule" @active="activeModule">-->
  <div :style="moduleComputedStyle" class="flex">
    <div class="iconfont" :class="data.moduleConfig.dataConfig.iconClass" v-if="data.moduleConfig.showIcon" :style="data.moduleConfig.iconStyle"></div>
    <div :style="titleComputedStyle" v-if="data.moduleConfig.showTitle" class="titlewrap">
      <div class="titleStyle"> {{data.moduleConfig.dataConfig.titleText}}</div>
    </div>
    <div :style="textComputedStyle" class="content_item">
      {{displayText}}
    </div>

  </div>
<!--    </drag-tool>-->
</keep-alive>
    </template>

    <script>
    import DragTool from "../DragTool";
    import mixin from '../../mixinnew'
    import {unix2Date,unix2DateWithTimeZone} from '@/utils/Foundation'
    export default {

        name: "text-display",
        mixins:[mixin],
        components: {DragTool},
        title:'内容显示单元',
        unique:'',
        computed:{
          displayText(){


              if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith==='system.date'){ //系统信息

                  return unix2DateWithTimeZone(this.systemDate,this.data.moduleConfig.dataConfig.textFormat)
              } else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith==='part.name'){ //科室信息
                    let text = this.data.moduleConfig.dataConfig.contentText
                  if(this.bindData){
                      text = this.bindData['part_name']
                  }
                  return text
              }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('patient.')>-1) { //患者信息
                  let text = this.data.moduleConfig.dataConfig.contentText
                  if(this.bindData){
                      text = this.bindData.items[this.childDataIndex][this.data.moduleConfig.dataConfig.textWith.replace('patient.','')]
                      if(this.data.moduleConfig.dataConfig.textType==='日期'){ //格式化日期
                        text = unix2DateWithTimeZone(text*1000,this.data.moduleConfig.dataConfig.textFormat)
                      }
                      if(this.data.moduleConfig.dataConfig.textWith==='patient.sex'){ //格式化性别
                          text=(text===0?'女':text===1?'男':'未知')
                      }
                      if(this.data.moduleConfig.dataConfig.textWith==='patient.age'){
                          text = (text===null?'':text)+this.bindData.items[this.childDataIndex]['age_unit']
                      }
                  }
                  return text
              }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('nurse_config_')>-1){ //护理参数
                    let nurseId = this.data.moduleConfig.dataConfig.textWith.replace('nurse_config_','')
                    let nurseOption = this.bindData.items[this.childDataIndex]['list'].filter(p=>p.nurse_config===parseInt(nurseId))[0]
                  if(nurseOption){
                      return nurseOption['nurse_option_name']
                  }
              }else if(this.data.moduleConfig.dataConfig&&this.data.moduleConfig.dataConfig.textWith.indexOf('statistic_')>-1){
                  let statisticKey = this.data.moduleConfig.dataConfig.textWith.replace('statistic_','')
                  let statisticItem = this.$store.state.statisticData[statisticKey]
                  if(statisticItem){
                      return statisticItem
                  }
              }else  {
                  return this.data.moduleConfig.dataConfig.contentText
              }
          }
        },
        dataTpl:{
            tpl_id: 7,
            tpl_type: 'BOARD_ITEM',
            templateName:'text-display',
            isEdit:true,
            moduleIconClass:'icon-Text',
            moduleConfig:{
                moduleStyle: {
                    borderColor: '',
                    borderWidth:'0px',
                    borderRadius:'0px',
                    borderStyle:'solid',
                    backgroundColor:'',
                    justifyContent:'left',
                    margin:'0px',
                    padding:'0px',
                    height:'20px'
                },
                styleConfig:{
                    borderColorWithNurse:'', //边框颜色跟随的护理信息分类
                    backgroundColorWithNurse:'', //模块背景色跟随的护理信息分类
                    titleColorWithNurse:'',
                    textColorWithNurse:'',
                    textColorToday:'',
                    backgroundColorToday:''
                },
                dataConfig:{
                    titleText:'Title',
                    contentText:'文字',
                    textWith:'',
                    textType:'文本',
                    textFormat:'',
                    iconClass:'' //图标样式类
                },

                titleStyle:{ //标题样式
                    fontSize:'14px',
                    color:'',
                    fontWeight:'normal',
                    marginLeft:'0px',
                    marginRight:'0px',
                    border:'0px',
                    width:'auto',
                    borderColor:'',
                    paddingRight:'10px',
                    paddingLeft:'10px',
                    borderStyle: 'solid',
                    borderRightWidth: '0px'
                },
                textStyle:{ //内容样式
                   fontSize:'14px',
                    color:'',
                    fontWeight:'normal',
                    marginLeft:'0px',
                    marginRight:'0px',
                },
                iconStyle:{
                    fontSize:'14px',
                    color:'',
                    marginLeft:'0px',
                    marginTop:'0px',
                    marginRight:'0px',
                    marginBottom:'0px'
                },
                showTitle:true, //显示标题,
                showIcon:false
            },
            children:[]
        },

    }
</script>

<style scoped>

  .content_item{
    align-self: center;
  }
  .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>