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 exampleArray"
                   :key="index">

                <el-row :gutter="10">
                  <el-col style=" text-align: left"
                          :span="9">
                    <span class="span_left_item_title padding_10">{{item.title}}</span>
                  </el-col>
                  <el-col :span="15">
                    <span class="span_left_item_content">{{item.content}}</span>
                  </el-col>
                </el-row>
              </div>

            </div>
          </div>

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

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

          <el-row :gutter="10">
            <div class="div_right_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_right_item_title">标题</span>
              </el-col>
              <el-col :span="18">
                <span class="span_right_item_content">{{dataForm.title}}</span>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter="10">
            <div class="div_right_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_right_item_title">类目</span>
              </el-col>
              <el-col :span="18">
                <span class="span_right_item_content">{{'社区/论坛'}}</span>
              </el-col>
            </div>
          </el-row>
          <el-row :gutter="10">
            <div class="div_right_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_right_item_title">详细内容</span>
              </el-col>
              <el-col :span="18">
                <div v-for="(item,index) in contentArray"
                     :key="index">
                  <el-row :gutter="10">
                    <el-col style=" text-align: left"
                            :span="9">
                      <span class="span_left_item_title">{{item.title}}</span>
                    </el-col>
                    <el-col :span="15">
                      <span class="span_left_item_content">{{item.content}}</span>
                    </el-col>
                  </el-row>
                </div>

              </el-col>
            </div>
          </el-row>
          <el-row :gutter="10">
            <div class="div_right_item_total">
              <el-col style=" text-align: left"
                      :span="6">
                <span class="span_right_item_title">场景说明</span>
              </el-col>
              <el-col :span="18">
                <span class="span_right_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: '',
        example: '',
        type: '',
        kidNames: '',
        sceneDesc: ''
      },

      exampleArray: [],
      contentArray: [],
      kidNamesArray: [],
    }
  },
  created () {
    // this.queryFunctionList()
  },

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

      this.visible = true
      this.loadData()


    },
    loadData () {
      //左侧示例解析
      this.exampleArray = []
      let array = this.dataForm.example.split('\\n')
      for (let i = 0; i < array.length - 1; i++) {
        let oneArray = array[i].split(':')
        let obj = {}
        obj.title = oneArray[0]
        obj.content = oneArray[1]
        this.exampleArray.push(obj)
      }

      //右侧详细内容解析

      this.contentArray = []
      let arrayContent = this.dataForm.content.split('\\n')
      for (let i = 0; i < arrayContent.length - 1; i++) {
        let oneArray = arrayContent[i].split(':')
        let obj = {}
        obj.title = oneArray[0]
        obj.content = oneArray[1]
        this.contentArray.push(obj)
      }
    },

    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' ? 70 : 60
    },
    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;
}
.padding_10 {
  padding-left: 10px;
}
.div_left {
  margin: 40px 20px 20px 20px;
}
.div_left_item {
  background-color: white;
  margin: 0 0 10px 0;
}

.span_left_item_title {
  color: rgb(121, 121, 121);
  font-size: 15px;
}
.span_left_item_content {
  color: rgb(31, 31, 31);
  font-size: 15px;
}

.div_right_item_total {
  margin: 10px 0 10px 20px;
}
.span_right_item_content {
  color: rgb(31, 31, 31);
  font-size: 15px;
}
.span_right_item_title {
  color: rgb(121, 121, 121);
  font-size: 15px;
  padding-left: 40px;
}
</style>