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

<template>
  <modal :visible="dialogDaliy" :title="reportHome" :showline="reportHome === '创建准出报告模版' || reportHome === '编辑准出报告模版'?false:true" @close="handleClose">
    <div v-if="reportHome === '准出报告' || reportHome === '模版管理' || reportHome === '自定义字段'" class="blueStripe" />
    <i v-else 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>

    <modules v-if="showOne" style="min-height: 34vh;" :data="selectTemplate" :report-home="reportHome" :fromradio="fromData.radio" @getFromData="getFromData" @createModule="open_new_template" @deleModule="settingDeleteReportModule" />

    <div class="report-leftRight">
       <!-- 自定义字段组件 -->
      <custom v-if="reportHome === '自定义字段'" ref="custom" :custom="customList" @content="getCustom" @close="closeCustom" />

      <!-- new模版 -->
      <newReleaeTemplate
        v-if="reportHome === '创建准出报告模版' || reportHome === '编辑准出报告模版'"
        ref="newReleaeTemplate"
        class="daily"
        :custom="customList"
        :template-id="templateId"
        :task-ids="daily_taskIds"
        @getreportTemplate="getreportTemplate"
        @reportReturn="reportReturn"
        @setCustom="setCustom"
      />

      <!-- 准出报告 -->
      <newReleaeTemplate v-if="newDailyTemplate" ref="dailyTemplate" class="daily" :custom="customList" :template-id="fromData.radio" :task-ids="daily_taskIds" @SaveNextStep="SaveNextStep" />

      <!-- 准出预览 -->
      <releaePreview v-if="dailyPreview" ref="dailyPreview" class="daily" :daily-id="dailyId" @handleClose="handleClose" @loading="loading = false" />

    </div>
    <div slot="footer" class="dialog-footer" :align="reportHome === `模版管理` || reportHome === `自定义字段` ? 'right' : 'center'">
      <div v-if="reportHome === `自定义字段`">
        <el-button size="small" @click="closeCustom">取消</el-button>
        <el-button size="small" type="primary" @click="$refs.custom.confirmUpload()">确定</el-button>
      </div>
      <el-button v-if="reportHome === `模版管理`" size="small" type="primary" @click="handleClose">确认</el-button>
      <!-- 新建模版 -->
      <el-button v-if="reportHome === '创建准出报告模版' || reportHome === '编辑准出报告模版'" size="small" type="primary" @click="created_out()">保存</el-button>
      <div v-if="reportHome === `准出报告`">
        <!-- 第一步 -->
        <el-button v-if="showOne" size="small" type="primary" @click="NextStep()">下一步</el-button>
        <!-- 第二步 -->
        <el-button v-if="newDailyTemplate" size="small" type="primary" @click="report_return">上一步</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" :loading="loading" @click="sendReport">发送</el-button>
      </div>
    </div>
  </modal>
</template>

<script>
import { mapGetters } from 'vuex'
import custom from '@/views/reportManagement/components/Custom'
import { settingQueryReportModuleList, settingDeleteReportModule, reportreleaseGetReportById } from '@/api/reportTemplate'
import newReleaeTemplate from '@/views/reportManagement/ReleaseReport/newReleaeTemplate.vue'
import releaePreview from '@/views/reportManagement/ReleaseReport/releaePreview.vue'
import modal from '@/components/modal'
import modules from './template/index.vue'
export default {
  components: {
    releaePreview,
    newReleaeTemplate,
    modal,
    modules,
    custom
  },
  data() {
    return {
      customList: [],
      temporary: {},
      templateStatus: false, // 模版状态
      reportHome: '准出报告', // 报告主页
      templateId: '', // 模版id
      modelId: '', // 下一步选择的模版id
      selectTemplate: [],
      loading: false,
      fromData: {
        radio: 0
      },
      preview: {},
      tits: '',
      newDailyTemplate: false, // 新建日报模版
      reportTamplate: false, // new模版
      dailyPreview: false, // 日报预览
      dailyId: '', // 当前创建报告的id
      updateDaily: false, // 编辑
      dialogDaliy: false,
      showOne: true,
      showTow: false,
      active: 1,
      daily_taskIds: [], // 选择的任务ID
      num: 0
    }
  },
  computed: {
    ...mapGetters(['bizId'])
  },
  methods: {
    async getreportTemplate() { // 获取模版list
      const res = await settingQueryReportModuleList({ bizId: this.bizId, type: 4 })
      if (res.code === 200) {
        this.$nextTick(() => {
          this.selectTemplate = res.data
          this.fromData.radio = this.selectTemplate[0].id
        })
      }
    },
    getFromData(e) {
      this.fromData.radio = e
    },
    init(index, newData) {
      this.dialogDaliy = true
      console.log(newData, 'fjids')
      switch (index) {
        case 2: // 编辑
          this.customList = newData.customFields
          this.daily_taskIds = null // 关联任务
          this.fromData.radio = newData // 选择的模块
          this.reportHome = '准出报告' // 步骤条
          this.active = 2 // 步骤条状态第三步
          this.showOne = false // 隐藏第一步
          this.newDailyTemplate = true // 展示第二步
          this.dailyPreview = false // 隐藏第三部
          this.updateDaily = true // 编辑
          this.reportTamplate = false // 隐藏模版
          break
        case 3: // 发送报告
          this.getreportTemplate()
          this.dailyId = newData.id
          this.reportHome = '准出报告' // 步骤条
          this.active = 3 // 步骤条状态第三步
          this.showOne = false // 隐藏第一步
          this.newDailyTemplate = false // 隐藏第二步
          this.dailyPreview = true // 展示第三部
          break
        case 7: // 新建
          this.getreportTemplate()
          this.daily_taskIds = newData // taskList
          this.reportHome = '准出报告' // 步骤条
          this.active = 1 // 步骤条状态第一步
          this.showOne = true // 展示第一步
          this.newDailyTemplate = false // 隐藏第二步
          this.dailyPreview = false // 隐藏第三部
          this.reportTamplate = false // 隐藏模版
          break
        case 8: // 新建
          this.getreportTemplate()
          this.daily_taskIds = newData
          this.reportHome = '准出报告' // 步骤条
          this.active = 1 // 步骤条状态第三步
          this.showOne = true // 展示第一步
          this.newDailyTemplate = false // 隐藏第二步
          this.dailyPreview = false // 隐藏第三部
          break
        case 'module': // 模版管理
          this.getreportTemplate()
          this.reportHome = '模版管理'
          this.showOne = true
          this.reportTamplate = false
      }
    },

    created_out() { // 新建模版
      // if (this.tits === '模版管理') {
      //   this.getreportTemplate()
      //   this.reportHome = '模版管理'
      //   this.showOne = true
      // }
      this.$refs.newReleaeTemplate.getCreateData(this.templateId)
    },

    report_return() {
      this.reportHome = '准出报告' // 步骤条
      this.showOne = true // 模版选择
      this.reportTamplate = false // 编辑区域
      this.newDailyTemplate = false // 隐藏第二步
      this.dailyPreview = false // 隐藏第三步
      this.customList = []
      this.getreportTemplate()
    },

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

    open_new_template(val, show) { // 点击新建模版
      !val ? this.templateId = { 'name': '新建模版', from: this.customList.length !== 0 ? this.temporary.from : {}} : this.templateId = { 'name': '编辑模版', 'set_up': val.id }
      this.tits = this.reportHome
      if (this.templateId.name === '新建模版') {
        this.reportTamplate = true // 编辑区域
        this.reportHome = '创建准出报告模版' // 步骤条
        this.showOne = false // 模版选择
      } else {
        if (val.creator === localStorage.getItem('username') || show) {
          this.reportTamplate = true // 编辑区域
          this.reportHome = '编辑准出报告模版' // 步骤条
          this.showOne = false // 模版选择
        } else {
          this.$message({ message: '没有权限，请联系创建人执行操作！', type: 'warning', duration: 1000, offset: 150 })
        }
      }
    },

    async settingDeleteReportModule(item, show) {
      if (item.creator === localStorage.getItem('username') || show) {
        const res = await settingDeleteReportModule({ id: item.id }, item.id)
        if (res.code === 200) {
          this.getreportTemplate()
          this.$message({ message: '已删除’', type: 'success', duration: 1000, offset: 150 })
        }
      } else {
        this.$message({ message: '没有权限，请联系创建人执行操作！', type: 'warning', duration: 1000, offset: 150 })
      }
    },

    closeCustom() { // 自定义取消
      this.reportHome = this.temporary.name
    },

    getCustom(arr) { // 自定义确认
      console.log(arr, this.temporary.name, '结果')
      this.templateId = { 'from': this.temporary.from, 'name': this.temporary.name === '创建准出报告模版' ? '新建模版' : '编辑模版' }
      this.customList = [...arr]
      this.reportHome = this.temporary.name
    },

    setCustom(modules, from) {
      this.temporary = { 'name': this.reportHome, 'from': from }
      this.customList = [...modules]
      this.reportHome = '自定义字段'
    },

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

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

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

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

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

    handleClose() {
      this.loading = false
      this.dialogDaliy = false
      this.updateDaily = false
      this.showOne = false // 隐藏第一步
      this.newDailyTemplate = false // 隐藏第二步
      this.dailyPreview = false // 展示第三部
      this.customList = []
      this.$emit('getList')
    }
  }
}
</script>

<style lang="less" scoped>
.report-leftRight {
  margin: 20px 9% 0%;
  /deep/ .el-row .el-col {
    margin: 0;
}
}

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

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

.report-dialog {
  /deep/.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid rgba(238,238,238,1);
    opacity:1;
  }
  /deep/.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;
}
</style>