thoth-frontend-test/src/views/Platform/presentation/acceptTheReport.vue

<template>
  <!-- 提测预览 -->
  <div class="eleStyle_one">
    <div class="reportContent">
      <div style="display: flex; white-space: nowrap; font-family:SimSuncss">
        <span style="flex:1;font-weight: bold;font-size: 24px;color: #3a8ee6">{{ fromCreateData.name }}</span>
        <span style="flex:2;margin:1% 0 0 20px;font-size: 17px;">by {{ fromCreateData.submitter }}</span>
      </div>
      <div class="titleStyle" style="margin:1% 0;">一. 提测详情</div>
      <div v-if="oneShow">
        <el-form :model="fromCreateData">
          <div style="display: flex;">
            <div style="flex:1" class="marage">是否延期 : <span :style="lateStatus1">{{ lateStatus }}</span></div><br>
            <div v-show="showDelay" style="flex:1" class="marage">延期原因 : {{ fromCreateData.lateReason }}</div><br>
          </div>

          <div style="display: flex;">
            <div style="flex:1" class="marage">涉及安全项 : <span :style="safeStatus1">{{ safeStatus }}</span></div><br>
            <div v-show="showData" style="flex:1" class="marage">完成结果 : {{ fromCreateData.safeInfo }}</div><br>
          </div>

          <div style="display: flex;">
            <div style="flex:1">
              <div class="marage">SDL链接 : <a href="http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=237016271" style="color:blue;">普惠SDL准入标准</a></div><br>
              <div class="marage">是否跟版 : {{ fromCreateData.isEdition }}</div><br>
              <div class="marage">优 先 级 : {{ fromCreateData.priority }}</div><br>
            </div>
            <div style="flex:1;">
              <div class="marage">开发时间 : {{ fromCreateData.devTimeStart }} 至 {{ fromCreateData.devTimeEnd }}</div><br>
              <div class="marage">计划提测时间 : {{ fromCreateData.planLaunchTime }}</div><br>
              <div class="marage">实际提测时间 : {{ fromCreateData.launchTime }}</div><br>
            </div>
          </div>
          <div class="marage">prd地址 : {{ fromCreateData.prdUrl }}</div><br>
          <div class="marage">设计方案 : {{ fromCreateData.devUrl }}</div><br>
          <div class="marage">自测结果 : {{ fromCreateData.selfTestInfo }}</div><br>
          <div class="marage">测试建议 : {{ fromCreateData.testSuggest }}</div><br>
          <el-form-item label="提测模块" style="margin: 2px 0;" />
          <div class="rich" v-html=" moduleInfoOne" />
        </el-form>
      </div>

      <div v-if="towShow">
        <el-form :model="fromCreateData">
          <div style="display:flex;">
            <div style="flex:1">
              <el-form-item label="测试地址 : ">{{ fromCreateData.packageUrl }}</el-form-item><br>
              <el-form-item label="提测环境 : ">{{ fromCreateData.env }}</el-form-item><br>
              <el-form-item label="自测结果 : ">{{ fromCreateData.selfTestInfo }}</el-form-item><br>
            </div>
            <div style="flex:1">
              <el-form-item label="打包分支 : ">{{ fromCreateData.packageBranch }}</el-form-item><br>
              <el-form-item label="优 先 级 : ">{{ fromCreateData.priority }}</el-form-item><br>
            </div>
          </div>

          <div style="display: flex;">
            <el-form-item style="flex:1" label="新增Apollo : "><span :style="configInfo1">{{ config }}</span></el-form-item><br>
            <el-form-item v-show="showDelay1" style="flex:1" label="Apollo名称 : ">{{ fromCreateData.configInfo }}</el-form-item><br>
          </div>

          <div style="display: flex;">
            <el-form-item style="flex:1;margin: 1% 0;" label="依赖组件 : "><span :style="dependentComponents1">{{ dependentCom }}</span></el-form-item>
            <el-form-item v-show="showDelay2" style="flex:1" label="组件名称 : ">{{ fromCreateData.dependentComponents }}</el-form-item>
          </div>

          <div style="display: flex;">
            <el-form-item style="flex:1;margin: 0 0 1%;" label="是否延期 : "><span :style="lateStatus1">{{ lateStatus }}</span></el-form-item>
            <el-form-item v-show="showDelay" style="flex:1" label="延期原因 : ">{{ fromCreateData.lateReason }}</el-form-item>
          </div>

          <el-form-item label="PM & UI : ">{{ fromCreateData.pmUi }}</el-form-item><br>
          <div class="noWrap">
            <el-form-item label="测试建议 :">{{ fromCreateData.testSuggest }}</el-form-item><br>
            <el-form-item label="需求list :">{{ fromCreateData.functionInfo }}</el-form-item><br>
            <el-form-item label="涉及接口 :">{{ fromCreateData.interfaceInfo }}</el-form-item><br>
          </div>
        </el-form>
      </div>
      <div class="titleStyle">二. 联调详情</div>
      <div class="rich" v-html="joinTestOne" />

      <div class="titleStyle">三. 其他</div>
      <div v-if="oneShow" class="marage">新增配置 : {{ fromCreateData.configInfo }}</div><br>
      <div class="marage">其他 : {{ fromCreateData.others }}</div><br>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AcceptTheReport',
  props: {
    message: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      configInfo1: { color: 'green' },
      dependentComponents1: { color: 'green' },
      lateStatus1: { color: 'red' },
      safeStatus1: { color: 'green' },
      form: {},
      dependentCom: '',
      config: '',
      showDelay: false,
      showDelay1: false,
      showDelay2: false,
      towShow: false,
      oneShow: false,
      showData: false,
      joinTestOne: '',
      lateStatus: '',
      safeStatus: '',
      name: '',
      haha: '',
      moduleInfoOne: '',
      fromCreateData: {}
    }
  },
  created() {
    this.idGet()
  },
  methods: {
    idGet() {
      this.fromCreateData = this.message
      if (this.fromCreateData.type === 2) {
        this.towShow = false
        this.oneShow = true
      } else {
        this.oneShow = false
        this.towShow = true
      }
      this.name = this.fromCreateData.name
      this.joinTestOne = this.fromCreateData.joinTest
      this.moduleInfoOne = this.fromCreateData.moduleInfo
      if (this.fromCreateData.safeInfo !== '') {
        this.showData = true
        this.safeStatus = '是'
        this.safeStatus1.color = 'red'
      } else {
        this.showData = false
        this.safeStatus = '否'
        this.safeStatus1.color = 'green'
      }
      if (this.fromCreateData.lateReason !== '') {
        this.showDelay = true
        this.lateStatus = '是'
      } else {
        this.showDelay = false
        this.lateStatus = '否'
        this.lateStatus1.color = 'green'
      }
      if (this.fromCreateData.configInfo !== '') {
        this.showDelay1 = true
        this.config = '是'
      } else {
        this.showDelay1 = false
        this.config = '否'
        this.configInfo1.color = 'red'
      }
      if (this.fromCreateData.dependentComponents !== '') {
        this.showDelay2 = true
        this.dependentCom = '是'
      } else {
        this.showDelay2 = false
        this.dependentCom = '否'
        this.dependentComponents1.color = 'red'
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .reportContent {
    margin:20px 0;
  }
  .marage {
    margin: 1.5% 0;
  }
  .eleStyle_one {
    width: 80%;
    padding: 0 2%;
    height:100%;
    display: inline-block;
    font-size: 14px;
    color: #606266;
  }
   .eleStyle_one .el-form-item {
      margin-bottom: -15px;
    }
  .titleStyle {
    color: #333B4A;
    margin: 1% 0;
    font-size: 19px;
    font-weight: bold;
  }
  .rich>>> table tr td{border:1px solid #ccc;font-size: 15px; color: #606266}
  .rich>>> table th{border:1px solid #ccc; font-size: 15px; color: #606266}
  .rich>>> table {border:1px solid #ccc; border-collapse: collapse;line-height: 30px; text-align: center;font-size: 15px; color: #606266}

</style>
<style lang="stylus" scoped>
 .noWrap >>> .el-form-item
  display flex
 .eleStyle_one  >>> .el-form-item__label
  text-align left
  font-weight 400 !important
</style>