thoth-frontend-test/src/views/Platform/presentation/Templates/TestReport.vue

<template>
  <el-dialog :visible.sync="dialogVisible1" width="70vw" class="public_task" title="提测报告" :close-on-click-modal="false" :before-close="handleClose1">
    <div class="blueStripe" />
    <div style="margin: 2% 0%; font-size: 16pt; color: #333B4A;">
      <el-steps :active="active" align-center finish-status="success">
        <el-step style="font-size: 16pt; color: #333B4A;" title="选择模版" />
        <el-step title="填写报告" />
        <el-step style="font-size: 16pt; color: #333B4A;" title="发送报告" />
      </el-steps>
    </div>
    <div v-if="showOne" style="margin: 0 4% 2%;">
      <div style="margin: 0% 14%;  height: 435px;" class="Layout">
        <div style="margin-right:2%;">
          <el-radio v-model="radio" class="_radio" label="1">客户端模版</el-radio><br>
          <el-image style="display: inline-block; width: 80%;" :src="src1" />
        </div>
        <div style="margin-left:2%;">
          <el-radio v-model="radio" class="_radio" label="2">服务端模版</el-radio><br>
          <el-image style="display: inline-block; width: 77%;" :src="src" />
        </div>
      </div>
      <div align="center">
        <el-button size="small" type="primary" @click="NextStep()">下一步</el-button>
      </div>
    </div>
    <div v-if="showTow" style="margin: 0 5%;">
      <div class="descr" style=" margin-bottom: 2%; height: 440px; overflow:scroll; overflow-x: hidden">
        <Present v-if="Present1" ref="Present" :clien-data="clienData" @fatherMethod="fatherMethod" />
        <presentation v-if="presentation1" ref="presentationRef" :clien-data="clienData" @fatherMethod="fatherMethod" />
      </div>
      <div align="center">
        <el-button size="small" type="primary" @click="PreviousStep()">上一步</el-button>
        <el-button size="small" type="primary" @click="created_out()">保存，下一步</el-button>
      </div>
    </div>
    <div v-if="showThree">
      <div style="margin: 2% 5%; font-size: 16pt; color: #333B4A;">
        <div style="margin: 1% 2%;font-size:18px; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(51,59,74,1); line-height:29px;">
          邮件列表
        </div>
        <div style="margin: 1% 2% 3%;">
          <div class="Layout" style="margin-bottom: 10px;"><div class="div1">收件人</div><search-people :value.sync="form.name" :clearable="true" :multiple="true" style="width:100%" /></div>
          <div class="Layout"><div class="div1">抄送</div><searchTeam :value.sync="form.names" :clearable="true" :multiple="true" style="width:100%" /></div>
        </div>
        <div style="margin: 0 2%; font-size:18px; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(51,59,74,1); line-height:29px;">
          报告预览
        </div>
        <div class="descr" style=" margin-bottom: 2%; height:310px; overflow:scroll; overflow-x: hidden">
          <acceptthe id="resumeId" ref="acceptthe" :message="preview" />
        </div>
      </div>
      <div align="center">
        <el-button size="small" type="primary" @click="gou_out()">上一步</el-button>
        <el-button size="small" :disabled="send" :loading="send" type="primary" @click="sendReport(form)">发送</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import '@/views/projectManage/publicCss/index.css'
import '@/styles/PublicStyle/index.scss'
import Present from '@/views/Platform/presentation/PresentReport'
import acceptthe from '@/views/Platform/presentation/acceptTheReport'
import presentation from '@/views/Platform/presentation/presentationReport.vue'
import { launchTestSendmail } from '@/api/ResultPage'
import html2canvas from 'html2canvas'
import testF from '@/assets/testF.png'
import testK from '@/assets/testK.png'
import searchTeam from '@/components/select/searchTeam'
import searchPeople from '@/components/select/searchPeople'

export default {
  components: {
    Present,
    acceptthe,
    presentation,
    searchTeam,
    searchPeople
  },
  data() {
    return {
      form: {},
      Present1: false,
      presentation1: false,
      showOne: true,
      showTow: false,
      showThree: false,
      showClient: false,
      showClientYL: false,
      active: 1,
      radio: '1',
      clienData: {},
      newNum: '',
      present_task: [],
      send: false,
      preview: '',
      src: testF,
      src1: testK,
      dialogVisible1: false,
      clien: ''
    }
  },
  methods: {
    init(index, newData) {
      console.log(newData, '提测tan窗')
      this.dialogVisible1 = true
      const url = location.href // 获取url中"?"符后的字串
      const arr = url.split('=')
      switch (index) {
        case 1:
          this.present_task = [Number(arr[1])]
          this.showOne = true
          this.showTow = false
          this.showThree = false
          this.active = 1
          break
        case 2:
          this.clienData = newData
          this.showOne = false
          this.showThree = false
          this.showTow = true
          this.active = 2
          this.newNum = 2
          if (newData.type === 1) {
            this.radio = '1'
            this.Present1 = true
            this.presentation1 = false
          }
          if (newData.type === 2) {
            this.radio = '2'
            this.Present1 = false
            this.presentation1 = true
          }
          break
        case 3:
          this.clienData = newData
          this.showOne = false
          this.showTow = false
          this.showThree = true
          this.form = {}
          this.preview = newData
          this.active = 3
          break
        case 4:
          this.clienData = newData
          this.present_task = newData.taskIds
          this.showOne = false
          this.showThree = false
          this.showTow = true
          this.active = 2
          this.newNum = 1
          if (newData.type === 1) {
            this.radio = '1'
            this.Present1 = true
            this.presentation1 = false
          }
          if (newData.type === 2) {
            this.radio = '2'
            this.Present1 = false
            this.presentation1 = true
          }
          break
        case 7:
          this.present_task = newData
          this.clienData.taskIds = newData
          this.showOne = true
          this.showTow = false
          this.showThree = false
          this.active = 1
          break
      }
    },
    PreviousStep() {
      this.showTow = false
      this.showOne = true
      this.active = 1
    },
    gou_out() {
      this.$emit('getRouterData')
      this.clienData = this.preview
      this.showOne = false
      this.showThree = false
      this.showTow = true
      this.active = 2
      this.newNum = 2
      if (this.clienData.type === 1) {
        this.radio = '1'
        this.Present1 = true
        this.presentation1 = false
      }
      if (this.clienData.type === 2) {
        this.radio = '2'
        this.Present1 = false
        this.presentation1 = true
      }
    },
    created_out() {
      if (this.radio === '2') { // 服务端
        this.$refs.presentationRef.parentHandleclick(this.newNum, this.present_task, this.clien)
      }
      if (this.radio === '1') { // 客户端
        this.$refs.Present.parentHandleclick(this.newNum, this.present_task, this.clien)
      }
    },
    NextStep() {
      switch (Number(this.radio)) {
        case 1:
          this.clienData = {}
          this.showOne = false
          this.showTow = true
          this.Present1 = true
          this.presentation1 = false
          this.active = 2
          this.newNum = 1
          break
        case 2:
          this.clienData = {}
          this.showOne = false
          this.showTow = true
          this.Present1 = false
          this.presentation1 = true
          this.active = 2
          this.newNum = 1
          break
        case 3:
          this.$message({ message: '请选择要创建的‘模版’', type: 'error', duration: 1000, offset: 150 })
          break
      }
    },
    handleClose1() {
      this.dialogVisible1 = false
      this.radio = '1'
      this.showOne = false
      this.showThree = false
      this.showTow = false
    },
    fatherMethod(e) {
      console.log(e, '新建返回')
      this.clien = e.id
      this.preview = e
      this.showThree = true
      this.form = {}
      this.showTow = false
      this.active = 3
    },
    sendReport(e) {
      if (e.name !== undefined) {
        this.send = true
        const ele = this.preview
        const targetDom = document.getElementById('resumeId')
        const copyDom = targetDom.cloneNode(true)
        document.querySelector('body').appendChild(copyDom)
        setTimeout(() => {
          html2canvas(document.getElementsByClassName('reportContent')[1], { useCORS: true }).then(canvas => {
            const imgData = canvas.toDataURL('image/png')
            const sendImgData = imgData.substring(imgData.indexOf(',') + 1)
            const postData = { 'reportId': ele.id, 'imgStr': sendImgData, 'url': window.location.href, 'emailUser': e.name.join(','), 'copyTo': e.names.join(',') }
            launchTestSendmail(postData).then(res => {
              res.code === 200 ? this.$message.success('报告发送中，请稍后进行邮件查收！') : this.$message.error('发送测试日报失败，请联系管理员！')
              this.handleClose1()
              this.send = false
              document.querySelector('body').removeChild(copyDom)
            })
          })
        }, 500)
      } else {
        this.$message({ message: '请填写邮箱', type: 'error', offset: 150 })
      }
    }
  }
}
</script>

<style>
/* 全局dialog上下左右剧中 */
.el-dialog{
  display: flex;
  flex-direction: column;
  margin:0 !important;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.el-dialog .el-dialog__body{
  flex:1;
  overflow: auto;
}
.descr{
  display: flex;
  justify-content: center;
}
</style>

<style lang="scss" scoped>
._radio {
  margin: 3% 0;
  color: #333B4A;
  font-size: 16pt
}
.flex_start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.Layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.div1 {
  width: 60px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(51,51,51,1);
  line-height: 19px;
}
.descr{
  display: flex;
  justify-content: center;
}
.descr::-webkit-scrollbar{
  width:0;
}
</style>