epmet-oper-pc-chengyang/epmet-oper-web/src/views/modules/productConfig/subscribe/TempDetail.vue

<template>
  <el-dialog :visible.sync="visible"
             title="订阅消息"
             :close-on-click-modal="false"
             :before-close="handleClose"
             :close-on-press-escape="false"
             :width="diaWidth+'%'"
             :top="diaTop">
    <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">

      <el-row :gutter="20">
        <el-col :span="9">

          <div class="div_left_total"
               :style="{height:rowHeight}">
            <div class=" div_left_title">消息示例</div>

            <div class=" div_keywords_sel div_left">

              <!-- <div class="div_left_item"
                     v-for="(item,index) in kidSelNameList"
                     :key="item">

                  <el-row :gutter="10">
                    <el-col style=" text-align: right"
                            :span="9">
                      <span>{{item}}:</span>
                    </el-col>
                    <el-col :span="15">
                      <span>{{kidSelExampleList[index]}}</span>
                    </el-col>
                  </el-row>
                </div> -->

            </div>
          </div>

        </el-col>
        <el-col :span="15">

          <el-row :gutter="10">
            <div class="div_left_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_left_item_title">模板ID</span>
              </el-col>
              <el-col :span="18">
                <span class="span_left_item_content">{{dataForm.priTmplId}}</span>
              </el-col>
            </div>
          </el-row>

          <el-row :gutter="10">
            <div class="div_left_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_left_item_title">标题</span>
              </el-col>
              <el-col :span="18">
                <span class="span_left_item_content">{{dataForm.title}}</span>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter="10">
            <div class="div_left_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_left_item_title">类目</span>
              </el-col>
              <el-col :span="18">
                <span class="span_left_item_content">{{'社区/论坛'}}</span>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter="10">
            <div class="div_left_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_left_item_title">详细内容</span>
              </el-col>
              <el-col :span="18">
                <span class="span_left_item_content">{{dataForm.content}}</span>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter="10">
            <div class="div_left_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_left_item_title">场景说明</span>
              </el-col>
              <el-col :span="18">
                <span class="span_left_item_content">{{dataForm.sceneDesc}}</span>
              </el-col>
            </div>
          </el-row>

        </el-col>
      </el-row>

    </div>

  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { requestPost } from "@/js/dai/request";
import { Loading } from 'element-ui' // 引入Loading服务

let loading// 加载动画
export default {
  data () {
    return {
      visible: false,

      tid: '',//

      dataForm: {
        priTmplId: '',
        title: '',
        content: '',
        contentShow: [],
        example: '',
        exampleArray: [],
        type: '',
        kidNames: '',
        kidNamesArray: [],
        sceneDesc: ''
      }
    }
  },
  created () {
    // this.queryFunctionList()
  },

  methods: {
    init (row) {
      this.dataForm = row

      this.visible = true
      this.loadData()


    },
    loadData () {
      let array = this.dataForm.example.split('\\n')
      array.forEach(element => {
        let oneArray = element.split(':')
        let obj = Object
        obj.title = oneArray[0]
        obj.content = oneArray[1]
      })
      this.dataForm.exampleArray =
        console.log(this.dataForm.exampleArray)
    },

    handleClose () {

      this.visible = false
    },


    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }

  },
  computed: {

    diaWidth () {
      return this.resolution === 'small' ? 80 : 70
    },
    diaTop () {
      return this.resolution === 'small' ? '20px' : '100px'
    },
    formHeight () {
      return this.clientHeight * 0.6
    },
    rowHeight () {
      return (this.formHeight - 70) + 'px'

    },
    ...mapGetters(['clientHeight', 'resolution']),
  },
}
</script>

<style scope>
.el-row {
  margin-bottom: 0 20px 20px 20px;
}
.el-col {
  border-radius: 4px;
}

.div_keywords_sel {
  max-height: 250px;

  /* overflow-y: auto; */
}

.div_left_total {
  margin-left: 20px;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 5px;
}
.div_left_title {
  margin: 10px 10px;
  font-size: 18px;
}
.div_left {
  margin: 20px 20px 20px 20px;
}
.div_left_item {
  background-color: white;
  margin: 0 0 10px 0;
  padding: 0 0 0 10px;
}

.div_left_item_total {
  margin: 10px 0 10px 20px;

  color: rgb(121, 121, 121);
  font-size: 15px;
}
.span_left_item_content {
  color: rgb(31, 31, 31);
  font-size: 15px;
}
.span_left_item_title {
  padding-left: 40px;
}
</style>