thoth-frontend-test/src/views/reportManagement/components/TestingReport.vue

<template>
  <el-dialog :visible.sync="dialogDaliy" width="70vw" class="public_task report-dialog" :title="reportHome ? '提测报告' : `创建提测报告模版`" :close-on-click-modal="false" :destroy-on-close="true" :before-close="handleClose">
    <div v-if="reportHome" class="blueStripe" />
    <i v-if="!reportHome" class="el-icon-arrow-left report-return didi-hover" @click="reportReturn" />

    <el-steps v-if="reportHome" :active="active" align-center finish-status="success" class="report-steps">
      <el-step title="选择模版" />
      <el-step title="填写报告" />
      <el-step title="发送报告" />
    </el-steps>

    <div class="report-leftRight">
      <div v-if="showOne" style="min-height: 50vh;">
        <el-row type="flex" justify="center">
          <el-col :span="19" class="creator">模版名称</el-col>
          <el-col :span="5" class="creator">创建人</el-col>
        </el-row>

        <div ref="refName" style="max-height: 260px; overflow:scroll; overflow-x: hidden">
          <el-row v-for="(item, index) in selectTemplate" :key="index" type="flex" justify="center" @mouseover.native="item.operation = true" @mouseleave.native="item.operation = false">
            <el-col :span="19">
              <el-radio v-model="fromData.radio" class="creatorList" :label="item.id">{{ item.moduleName }}</el-radio>
            </el-col>
            <el-col :span="5" class="creatorList">
              {{ item.creatorObject.name }}
              <span v-if="item.creator !== 'SYSTEM' && item.creator !== '系统'" class="operation">
                <i class="el-icon-edit-outline didi-hover" @click="open_new_template(item)" />
                <el-popover :ref="item.id" placement="bottom" width="300" trigger="click">
                  <div><div class="blur-column" /> 删除模版</div>
                  <div class="blueStripe" />
                  <div class="deletreport">是否要删除模版{{ item.moduleName }}?</div>
                  <div style="text-align: right; margin: 0">
                    <el-button size="mini" type="danger" @click="settingDeleteReportModule(item)">确定</el-button>
                    <el-button size="mini" @click="closeDefaultPopover()">取消</el-button>
                  </div>
                  <i slot="reference" class="el-icon-delete reportModel didi-hover" />
                </el-popover>
              </span>
            </el-col>
          </el-row>
        </div>
        <el-row type="flex" justify="center">
          <el-col :span="24">
            <span class="didi-hover" @click="open_new_template()"><i class="el-icon-circle-plus-outline creatorList didi-hover" /> <span style="margin-left: 8px">新建模版</span></span>
          </el-col>
        </el-row>
      </div>

      <!-- new模版 -->
      <newTestingTemplate v-if="reportTamplate" ref="newReportTemplate" class="daily" :template-id="templateId" @getreportTemplate="getreportTemplate" @reportReturn="reportReturn" />
      <!-- new模版 -->

      <!-- 新建日报模版 -->
      <newTestingTemplate v-if="newDailyTemplate" ref="dailyTemplate" class="daily" :template-id="fromData.radio" :task-ids="daily_taskIds" @SaveNextStep="SaveNextStep" />
      <!-- 新建日报模版 -->

      <!-- 日报预览 -->
      <TestingPreview v-if="dailyPreview" ref="dailyPreview" class="daily" :daily-id="dailyId" @handleClose="handleClose" />
      <!-- 日报预览 -->

    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <!-- 新建模版 -->
      <el-button v-if="reportTamplate" size="small" type="primary" @click="created_out()">保存</el-button>
      <!-- 第一步 -->
      <el-button v-if="showOne" size="small" type="primary" @click="NextStep()">下一步</el-button>
      <!-- 第二步 -->
      <el-button v-if="newDailyTemplate" size="small" type="primary" @click="reportReturn">上一步</el-button>
      <el-button v-if="newDailyTemplate" size="small" type="primary" @click="getCreateData">保存, 下一步</el-button>
      <!-- 第三步 -->
      <el-button v-if="dailyPreview" size="small" type="primary" @click="sendReportReturn">上一步</el-button>
      <el-button v-if="dailyPreview" size="small" type="primary" @click="sendReport">发送</el-button>
    </div>

  </el-dialog>
</template>

<script>
import '@/styles/PublicStyle/index.scss'
import { settingQueryReportModuleList, settingDeleteReportModule, reportdelivertestGetReportById } from '@/api/reportTemplate'
import newTestingTemplate from '@/views/reportManagement/Testing/newTestingTemplate.vue'
import TestingPreview from '@/views/reportManagement/Testing/TestingPreview.vue'

export default {
  components: {
    newTestingTemplate,
    TestingPreview
  },
  data() {
    return {
      reportHome: true, // 报告主页
      templateId: '', // 模版id
      modelId: '', // 下一步选择的模版id
      selectTemplate: [], // 模版option
      fromData: {
        radio: 1
      },
      newDailyTemplate: false, // 新建日报模版
      reportTamplate: false, // new模版
      dailyPreview: false, // 日报预览
      dailyId: '', // 当前创建报告的id
      updateDaily: false, // 编辑
      dialogDaliy: false,
      showOne: true,
      active: 1,
      daily_taskIds: [] // 选择的任务ID
    }
  },
  created() {
    this.getreportTemplate()
  },
  methods: {
    async getreportTemplate() { // 获取模版list
      const res = await settingQueryReportModuleList({ bizId: localStorage.getItem('bizId'), type: 1 }) // 1 提测
      if (res.code === 200) {
        this.$nextTick(() => {
          const data = res.data
          this.selectTemplate = data.map(item => ({
            ...item,
            operation: false
          }))
          this.fromData.radio = this.selectTemplate[0].id
        })
      }
    },

    init(index, newData) {
      console.log(index, newData, '测试')
      this.dialogDaliy = true
      switch (index) {
        case 2: // 编辑
          reportdelivertestGetReportById(newData.id).then(res => {
            if (res.code === 200) {
              this.daily_taskIds = res.data.taskIds // 关联任务
              this.fromData.radio = res.data // 选择的模块
            }
          })
          this.reportHome = true // 步骤条
          this.active = 2 // 步骤条状态第三步
          this.showOne = false // 隐藏第一步
          this.newDailyTemplate = true // 隐藏第二步
          this.dailyPreview = false // 展示第三部
          this.updateDaily = true // 编辑
          break
        case 4: // 重新提测
          reportdelivertestGetReportById(newData.id).then(res => {
            if (res.code === 200) {
              this.daily_taskIds = res.data.taskIds // 关联任务
              this.fromData.radio = res.data // 选择的模块
              this.reportHome = true // 步骤条
              this.active = 2 // 步骤条状态第三步
              this.showOne = false // 隐藏第一步
              this.newDailyTemplate = true // 隐藏第二步
              this.dailyPreview = false // 展示第三部
              this.updateDaily = false // 编辑
            }
          })
          break
        case 3: // 发送报告
          this.dailyId = newData.id
          this.reportHome = true // 步骤条
          this.active = 3 // 步骤条状态第三步
          this.showOne = false // 隐藏第一步
          this.newDailyTemplate = false // 隐藏第二步
          this.dailyPreview = true // 展示第三部
          break
        case 7: // 新建
          this.daily_taskIds = newData
          this.reportHome = true // 步骤条
          this.active = 1 // 步骤条状态第三步
          this.showOne = true // 展示第一步
          this.newDailyTemplate = false // 隐藏第二步
          this.dailyPreview = false // 隐藏第三部
          break
      }
    },

    report_update() { // 编辑模版
      this.$refs.DailyReport.getQueryData(1)
    },

    created_out() { // 新建模版
      this.$refs.newReportTemplate.getCreateData(1)
    },

    reportReturn() { // 新建模版点击返回
      this.reportHome = true // 步骤条
      this.showOne = true // 模版选择
      this.reportTamplate = false // 编辑区域
      this.newDailyTemplate = false // 隐藏第二步
      this.dailyPreview = false // 隐藏第三步
    },

    open_new_template(val) { // 点击新建模版
      val ? this.templateId = val.id : this.templateId = '新建模版'
      this.reportTamplate = true // 编辑区域
      this.reportHome = false // 步骤条
      this.showOne = false // 模版选择
    },

    async settingDeleteReportModule(item) {
      const res = await settingDeleteReportModule({ id: item.id }, item.id)
      if (res.code === 200) {
        this.getreportTemplate()
        this.closeDefaultPopover()
        this.$message({ message: '已删除’', type: 'success', duration: 1000, offset: 150 })
      }
    },

    closeDefaultPopover() { // 模拟点击
      this.$refs.refName.click()
    },

    getCreateData() { // 保存，下一步
      this.$refs.dailyTemplate.reportreleaseCreate(this.updateDaily)
    },

    NextStep() { // 第一步到第二步
      this.reportHome = true // 步骤条
      this.active = 2 // 步骤条状态第二步
      this.showOne = false // 隐藏第一步
      this.newDailyTemplate = true // 展示第二步
      this.dailyPreview = false // 隐藏第三步
    },

    SaveNextStep(ele) { // 第二步到第三部
      console.log(ele, 'xsaxasxasxsaxsa')
      this.dailyId = ele.id // 新建报告id
      this.reportHome = true // 步骤条
      this.active = 3 // 步骤条状态第三步
      this.showOne = false // 隐藏第一步
      this.newDailyTemplate = false // 隐藏第二步
      this.dailyPreview = true // 展示第三部
    },

    async sendReportReturn() { // 第三步返回第二部
      const res = await reportdelivertestGetReportById(this.dailyId)
      if (res.code === 200) {
        this.daily_taskIds = res.data.taskIds // 关联任务
        this.fromData.radio = res.data // 选择的模块
      }
      this.reportHome = true // 步骤条
      this.active = 2 // 步骤条状态第三步
      this.showOne = false // 隐藏第一步
      this.newDailyTemplate = true // 隐藏第二步
      this.dailyPreview = false // 展示第三部
      this.updateDaily = true // 编辑
    },

    sendReport() { // 截图
      this.$refs.dailyPreview.sendReport()
    },

    handleClose() {
      this.dialogDaliy = false
      this.$emit('getList')
    }
  }
}
</script>

<style lang="scss" scoped>
.report-leftRight {
  margin: 0 8%;
  >>> .el-row .el-col {
    margin: 0;
}
}

.titIcon {
    width: 4px;
    height: 17px;
    background: #409EFF;
    border-radius: 1px;
}

.el-dialog__header {
    padding: 0 !important;
}

.reportModel {
    margin-left: 10px;
}

.operation {
    margin-left: 30px;
}

.creator {
  display: inline-block;
  font-size:16px;
  font-family:Microsoft Sans Serif;
  font-weight:400;
  line-height:22px;
  color:rgba(51,51,51,1);
  opacity:1;
}

.creatorList {
  display: inline-block;
  font-size:14px;
  font-family:Microsoft Sans Serif;
  font-weight:400;
  line-height: 2.8;
  color:rgba(51,51,51,1);
  opacity:1;
}

.deletreport {
  font-size:14px;
  text-align: center;
  margin: 30px 0;
  font-family:MicrosoftYaHei;
  color:rgba(51,59,74,1);
  opacity:1;
}

.report-dialog {
  >>>.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid rgba(238,238,238,1);
    opacity:1;
  }
  >>>.el-dialog__footer {
    padding: 15px 20px;
    text-align: right;
    border-top: 1px solid rgba(238,238,238,1);
    opacity:1;
  }
}
.report-return {
  font-size: 18px;
  position: absolute;
  top: 23px;
  left: 11px;
}
.report-steps {
  margin-bottom: 20px;
  font-size:16px;
  font-family:PingFang SC;
  font-weight:500;
  line-height:22px;
  color:rgba(51,51,51,1);
  opacity:1;
}
.daily {
   max-height: 460px;
   overflow:scroll;
   overflow-x: hidden
}

.blur-column {
  width:4px;
  height:15px;
  display:inline-block;
  vertical-align: middle;
  background:#409EFF;
  border-radius:1px;
}
</style>