platformFront/src/components/icss/PromptDetail.vue

<template>
    <div class="NoiseTemplateWrapper TemplateWrapper">
        <crumbs title="提示信息维护--详情" class="topBack" linkTo="/admin/LT-YXSJWH-TSXXWH">
        </crumbs>
        <div class="info-container">
            <el-form label-width="130px"
                     ref="groups">
                <el-form-item label="静态知识名称：">
                    {{editData.name}}
                </el-form-item>
                <p class="line"></p>
                <div class="add-prg" v-for="prg in editData.details">
                    <el-form-item label="是否属于诊断：">
                        {{prg.isReason?'是':'否'}}
                    </el-form-item>
                    <el-form-item label="显示位置：">
                        {{parsePosition(prg.position)}}
                    </el-form-item>
                    <el-form-item label="标题：">
                        {{prg.title}}
                    </el-form-item>
                    <el-form-item label="内容：">
                        <div v-html="prg.content"></div>
                    </el-form-item>
                </div>
                <p class="line"></p>
                <el-form-item label="关联标签：">
                    <span class="tag" v-for="it in editData.questionList">
                        {{it.name}}
                    </span>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
  /**
   *
   */
  import api from '@api/icss.js';

  export default {
    name: 'PromptDetail',
    data() {
      return {
        editData:{},
        positions:[],
        position:''
      }
    },
    created:function(){
      const {id} = this.$route.params;
      const pos = localStorage.getItem("icssEnumsData");
      this.positions = JSON.parse(pos)&&JSON.parse(pos).introducePositionEnum;

      api.getPrompDetail({id}).then((res) =>{
        if(res.data.code === '0') {
          this.editData = res.data.data;
        }else{
          this.warning("数据获取失败");
        }
      })
    },
    methods: {
      back() { this.$router.go(-1) },
      parsePosition(item){
        const sit = item||[];
        let text = '';
        this.positions.forEach((it)=>{
          if(sit.split(",").includes(it.key+'')){
            text+=it.name+'，';
          }
        });
        return text.replace(/，$/,'');
      },
      warning(msg, type) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning'
        })
      },
    }
  }
</script>
<style lang="less">
    @import "../../less/common.less";
    .info-container{
        background: #fff;
        padding: 20px;
        margin: 20px 20px -20px 20px;
    .el-input__inner{
        width: 200px;
    }
    .el-form-item__label{
        text-align: left;
    }
    .add-prg .el-form-item{
        margin-bottom: 20px;
    }
    }
    .line{
        border-top:1px #dcdfe6 solid;
        margin-bottom: 25px;
    }
    .tag:before{
        content:'['
    }
    .tag:after{
        content: ']';
        margin-right: 10px;
    }
</style>