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

<template>
  <el-dialog :visible.sync="dialogDaliy" width="70vw" class="public_task report-dialog" :title="reportHome ? '测试日报' : `${tipName}测试日报模版`" :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: 34vh;">
        <el-row type="flex" justify="center">
          <el-col :span="19" class="creator">模版名称</el-col>
          <el-col :span="5" class="creator" style="margin-right: 17px;"> 创建人 </el-col>
        </el-row>

        <div ref="refName" style="max-height: 260px; overflow:scroll; overflow-x: hidden; margin: 20px 0;">
          <el-row v-for="(item, index) in selectTemplate" :key="index" type="flex" justify="center" style="padding-right: 15px;">
            <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">
              <div class="Layout_space_between">
                <span>{{ item.creatorObject.name }}</span>
                <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" :visible-arrow="false" 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>
              </div>
            </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; color: #333;">新建模版</span></span>
          </el-col>
        </el-row>
      </div>

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

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

      <!-- 日报预览 -->
      <dailyPreview 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, dailyReportGetV2 } from '@/api/reportTemplate'
import dailyTemplate from '@/views/reportManagement/daily/dailyTemplate.vue'
import newReportTemplate from '@/views/reportManagement/daily/newReportTemplate.vue'
import dailyPreview from '@/views/reportManagement/daily/dailyPreview.vue'

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

    init(index, newData) {
      this.dialogDaliy = true
      switch (index) {
        case 2: // 编辑
          dailyReportGetV2(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 3: // 发送报告
          this.dailyId = newData.id
          this.reportHome = true // 步骤条
          this.active = 3 // 步骤条状态第三步
          this.showOne = false // 隐藏第一步
          this.newDailyTemplate = false // 隐藏第二步
          this.dailyPreview = true // 展示第三部
          break
        case 4: // 复制
          dailyReportGetV2(newData.id).then(res => {
            if (res.code === 200) {
              const data = res.data
              this.daily_taskIds = res.data.taskIds // 关联任务
              data.updateDaily = false
              this.fromData.radio = data // 选择的模块
              this.reportHome = true // 步骤条
              this.active = 2 // 步骤条状态第2步
              this.showOne = false // 隐藏第一步
              this.newDailyTemplate = true // 第二步
              this.dailyPreview = false // 第三部
              this.updateDaily = false // 新建
            }
          })
          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(3)
    },

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

    reportReturn() { // 新建模版点击返回
      this.fromData.radio = this.selectTemplate[0].id
      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 = null
      if (this.templateId === null) {
        this.tipName = '创建'
        this.reportTamplate = true // 编辑区域
        this.reportHome = false // 步骤条
        this.showOne = false // 模版选择
      } else {
        if (val.creator === localStorage.getItem('username')) {
          this.tipName = '编辑'
          this.reportTamplate = true // 编辑区域
          this.reportHome = false // 步骤条
          this.showOne = false // 模版选择
        } else {
          this.$message({ message: '没有权限，请联系创建人执行操作！', type: 'warning', duration: 1000, offset: 150 })
        }
      }
    },

    async settingDeleteReportModule(item) {
      if (item.creator === localStorage.getItem('username')) {
        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 })
        }
      } else {
        this.$message({ message: '没有权限，请联系创建人执行操作！', type: 'warning', duration: 1000, offset: 150 })
      }
    },

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

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

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

    SaveNextStep(ele) { // 第二步到第三部
      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 dailyReportGetV2(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: 20px 9% 0%;
  >>> .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;
  margin-bottom: 15px;
  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>