thoth-frontend-test/src/views/reportManagement/Testing/TestingPreview.vue

<template>
  <!-- 预览提测报告 -->
  <div class="parent-style">
    <div class="backStyle"> 邮件列表</div>
    <div class="Layout_space_between" style="margin-bottom: 10px;">
      <div class="div1">收件人</div>
      <searchTeam :value.sync="form.name" :clearable="true" :multiple="true" style="width:100%" />
    </div>
    <div class="Layout_space_between">
      <div class="div1">抄送</div>
      <searchTeam :value.sync="form.names" :clearable="true" :multiple="true" style="width:100%" />
    </div>
    <span class="backStyle"> 关联任务</span>
    <div v-for="(item, index) in fromCreateData.taskDetailList" :key="index" class="Layout_flex_start report-taskList">
      <span>{{ item.taskId }}</span>
      <span>{{ item.name }}</span>
    </div>
    <div class="backStyle"> 报告预览</div>
    <div id="repot-list">
      <div class="Layout_space_between" style="border-bottom: 0.5px solid #eee;margin-bottom: 15px;">
        <div class="report-tit">{{ fromCreateData.reportName }}</div>
        <div>报告人：{{ userNames }}</div>
      </div>

      <el-row>
        <el-col :span="12" class="Layout_space_between">
          <span class="parent-style">计划提测时间：{{ fromCreateData.deliverTestPlanTime }}</span>
        </el-col>
        <el-col :span="12">
          <span class="parent-style">实际提测时间：{{ fromCreateData.deliverTestActualTime }}</span>
        </el-col>
      </el-row>

      <el-row v-if="fromCreateData.deliverTestPlanTime < fromCreateData.deliverTestActualTime ">
        <el-col :span="24" class="Layout_space_between">
          <span class="parent-style">提测延期原因 : {{ fromCreateData.delayReason }}</span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" class="Layout_space_between">
          <span class="parent-style">计划开发时间：{{ fromCreateData.devPlanTimeStart !== null ? fromCreateData.devPlanTimeStart + '至' + fromCreateData.devPlanTimeEnd : '' }}</span>
        </el-col>
        <el-col :span="12" class="Layout_space_between">
          <span class="parent-style">实际开发时间：{{ fromCreateData.devActualTimeStart !== null ? fromCreateData.devActualTimeStart + '至' + fromCreateData.devActualTimeEnd : '' }}</span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" class="Layout_space_between">
          <span class="parent-style">是否跟版：{{ fromCreateData.followVersion === 2 ? '否' : '是' }} </span>
        </el-col>
        <el-col v-if="fromCreateData.followVersion === 1" :span="12" class="Layout_space_between">
          <span class="parent-style">跟版客户端：{{ fromCreateData.involveAppString }}</span>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12" class="Layout_space_between">
          <span class="parent-style">CodeReview：{{ fromCreateData.isCodeReview === 0 ? '否' : '是' }}</span>
        </el-col>
        <el-col v-if="fromCreateData.isCodeReview === 1" :span="12" class="Layout_space_between">
          <div class="parent-style">执行人：
            <span v-for="(item, index) in fromCreateData.codeReviewExecutorObject" :key="index">
              {{ item.name }}
              <span v-if="index < fromCreateData.codeReviewExecutorObject.length - 1">,</span>
            </span>
          </div>
        </el-col>
      </el-row>
      <div class="backStyle">需求列表</div>

      <el-table
        :data="tableData"
        border
        size="mini"
        :header-cell-style="{ backgroundColor: 'rgba(241,241,241,1)', color: 'rgba(51,59,74,1)', fontSize: '14px', fontWeight: '400'}"
        style="width: 100%; margin-bottom: 20px;"
      >
        <el-table-column prop="name" label="需求" min-width="250">
          <template slot-scope="scope">
            <span class="didi-hover" @click="goRequired(scope.row.id)">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="priorityName" label="优先级" min-width="100" />
        <el-table-column label="PM" min-width="100">
          <template slot-scope="scope">
            <span class="didi-hover">{{ scope.row.pmMemberInfoResponse.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="referredClientTypeName" label="跟版客户端" min-width="90" />
      </el-table>

      <div v-html="fromCreateData.content" />

    </div>
  </div>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import html2canvas from 'html2canvas'
import searchTeam from '@/components/select/searchTeam'
import { reportdelivertestGetReportById, reportdelivertestSendmail, reportdelivertestGetRequiresByTaskIds } from '@/api/reportTemplate' // 模版添删改查

export default {
  name: 'DailyNewsAdded',
  components: {
    searchTeam
  },
  props: {
    dailyId: { type: [String, Number], default: null }
  },
  data() {
    return {
      form: {}, // 发送报告content
      userNames: localStorage.getItem('realname'),
      fromCreateData: {}, // listAll
      tasksOptions: [], // 任务下拉选项
      tasksDetailList: [], // 已有任务项目
      taskid_arr: [], // taskIds
      moduleId: '', // 模块id
      tableData: [],
      daily_Id: '' // daily_Id
    }
  },
  watch: {
    dailyId: {
      handler(newV) {
        this.daily_Id = newV
        this.reportdelivertestGetReportById(newV)
      },
      immediate: true
    }
  },
  methods: {
    async reportdelivertestGetReportById(val) { // 获取提测报告数据
      const res = await reportdelivertestGetReportById(val)
      if (res.code === 200) {
        this.fromCreateData = res.data
        if (res.data.sendTo) {
          this.$set(this.form, 'name', [res.data.sendTo])
        }
        if (res.data.sendCc) {
          this.$set(this.form, 'names', [res.data.sendCc])
        }
        this.reportdelivertestGetRequiresByTaskIds(this.fromCreateData.taskIds)
      }
    },

    async reportdelivertestGetRequiresByTaskIds(val) {
      const res2 = await reportdelivertestGetRequiresByTaskIds({ taskIds: val })
      if (res2.code === 200) {
        this.tableData = res2.data
      }
    },

    goRequired(id) {
      this.$router.push({ name: '需求详情', query: { id: id }})
    },

    sendReport() {
      if (this.form.name !== undefined) {
        setTimeout(() => {
          html2canvas(document.getElementById('repot-list'), { useCORS: true }).then(canvas => {
            const imgData = canvas.toDataURL('image/png', 1)
            const sendImgData = imgData.toString().substring(imgData.indexOf(',') + 1)
            const postData = { 'reportId': this.daily_Id, 'imgStr': sendImgData, 'url': window.location.href, 'emailUser': this.form.name ? this.form.name.join(',') : null, 'copyTo': this.form.names ? this.form.names.join(',') : null }
            reportdelivertestSendmail(postData).then(res => {
              res.code === 200 ? this.$message.success('报告发送中，请稍后进行邮件查收！') : this.$message.error('发送测试日报失败，请联系管理员！')
              this.$emit('handleClose')
            })
          })
        }, 500)
      } else {
        this.$message({ message: '请填写邮箱', type: 'error', offset: 150 })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.parent-style {
    width: 100%;
    display: inline-block;
    font-size:14px;
    font-family:Microsoft Sans Serif;
    font-weight:400;
    line-height:22px;
    color:#666666;
    opacity:1;
    margin-bottom: 10px;
  .report-taskList{
    font-size:14px;
    font-family:MicrosoftYaHei;
    line-height:17px;
    color:rgba(102,102,102,1);
    margin-top: 10px;
    opacity:1;
  }
}
.div1 {
    width: 60px;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    line-height: 19px;
}
  .backStyle {
    color: #333;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    margin: 10px 0;
  }
  .report-tit {
    font-size: 20px;
    font-weight: bold;
    border-radius: 4px;
    margin: 15px 0;
     color:#409EFF;
  }
  .report-margin {
    margin-bottom: 20px;
  }
</style>