pc-component-v5/packages/process/src/ProcessReportResultPreview.vue

<template>
  <div>
    <div
      v-if="processReportResult.processResult != undefined"
      class="form-group"
    >
      <textarea
        v-if="isTextAreaShowProcessResult"
        class="processResult-textarea"
        rows="10"
        style="width:100%"
      >1.{{ processReportResult.processResult.result }}</textarea>
      <div v-if="isDivShowProcessResult">
        <h3 class="control-label">1.{{ processReportResult.processResult.result }}</h3>
      </div>
    </div>
    <div
      v-if="processReportResult.processResult != undefined && pdfOnly != true"
      class="form-group"
    >
      <a
        v-if="processReportResult.processResult.modelData&&processReportResult.processResult.modelData.data"
        target="_blank"
        role="button"
        class="btn btn-info"
      >
        Excel报表
      </a>
    </div>
    <ProcessReportArchive
      v-if="processReportResult.reportResults != undefined"
      :process-report-result="processReportResult"
    />
    <div
      v-for="(reportResult, index) in processReportResult.reportResults"
      v-if="processReportResult.reportResults != undefined"
      id="pr.id"
      class="form-group"
    >
      <div class="panel panel-default">
        <div
          class="panel-heading"
          style="height: 50px;"
          @click.self="reportResult.showPreview = !reportResult.showPreview"
        >
          <div class="pull-left">
            {{ index + 1 + (processReportResult.processResult == undefined ? 0 : 1) }}.{{ reportResult.reportName }}
          </div>
          <div
            class="pull-left"
            style="padding-left: 30px; cursor: pointer;"
            @click="iframeBack(reportResult, index)"
          >
            后退
          </div>
          <div
            class="pull-left"
            style="padding-left: 30px; cursor: pointer;"
            @click="iframeForward(reportResult, index)"
          >
            前进
          </div>
          <div
            v-if="reportResult.reportDefinitionType == 'UReport2'"
            class="pull-left"
            style="padding-left: 30px; cursor: pointer;"
            @click="editReport(reportResult, index)"
          >
            编辑
          </div>
          <div
            class="pull-right"
            style="width: 200px;"
          >
            <div class="input-group m-input-group">
              <select
                v-model="reportResult.previewIndex"
                class="form-control"
              >
                <option
                  v-if="excelOnly != true"
                  value="1"
                >
                  PDF
                </option>
                <option
                  v-if="pdfOnly != true"
                  value="2"
                >
                  Excel
                </option>
              </select>
              <span
                class="input-group-addon btn-download"
                @click="download(reportResult)"
              >下载</span>
            </div>
          </div>
        </div>
        <div
          v-if="reportResult.showPreview"
          class="panel-body"
        >
          <div v-if="reportResult.isSuccess">
            <div
              v-if="reportResult.previewIndex == 1"
              class="embed-responsive embed-responsive-4by3"
            >
              <embed
                :id="uuid + 'pdfIframe' + index"
                class="embed-responsive-item"
                type="application/pdf"
                :src="getReport(reportResult.pdfDownLoadUrl, '#' + uuid + 'pdfIframe' + index)"
              />
            </div>
            <div
              v-else
              class="embed-responsive embed-responsive-4by3"
            >
              <iframe
                :id="uuid + 'htmlIframe' + index"
                class="embed-responsive-item"
                :src="getReport(reportResult.htmlPreviewUrl, '#' + uuid + 'htmlIframe' + index)"
              />
            </div>
          </div>
          <div v-else>
            生成失败
          </div>
        </div>
      </div>

      <!-- <h3 class = "control-label">
	          {{index + 1 + (processReportResult.processResult == undefined ? 0 : 1)}}.{{reportResult.reportName}}
	        </h3>
	        <div>
	        	<a v-if="reportResult.isSuccess" v-bind:href="reportResult.excelDownLoadUrl" target="_blank" role="button" class="btn btn-info">	
	        		Excel报表
	        	</a>
	        	<a v-if="reportResult.isSuccess" v-bind:href="reportResult.pdfDownLoadUrl" target="_blank" role="button" class="btn btn-info">
	        		PDF报表
	        	</a>
	        	<span class = "control-label label-danger" v-else>生成失败</span>
	        </div> -->
    </div>
  </div>
</template>

<script>

var Common = require('../../common/Common.js')
var Uuid = require('../../common/Uuid.js')

var DownloadService = require('../../common/DownloadService.js')

var ProcessReportArchive = require('./ProcessReportArchive.vue').default

export default {
  name: 'ProcessReportResultPreview',

  components: {
    ProcessReportArchive,
  },
    
  props: ['processReportResult', 'pdfOnly', 'excelOnly'],

  data: function () {
    return {
      'uuid': Uuid.createUUID(),
    }
  },

  computed: {
    // 是否文本区域显示流程结果
    isTextAreaShowProcessResult: function () {
      var result = this.processReportResult.processResult.result
      if (result != undefined && result.length > 100) {
        return true
      } else {
        return false
      }
    },

    // 是否Div显示流程个结果
    isDivShowProcessResult: function () {
      var result = this.processReportResult.processResult.result
      if (result != undefined && result.length <= 100) {
        return true
      } else {
        return false
      }
    },

  },
    
  methods: {
    /**
         * 根据id和url获取文件，请求头增加token
         * @author GuoZhiBo 20200507
         * @param {Object} url
         * @param {Object} id
         */
    getReport: function (url, id) {
      var _self = this
      var account = localStorage.getItem('account')
      var token = localStorage.getItem('token')
      let absoluteUrl = null
      if (url.indexOf('ureport') > 0) {
        absoluteUrl = Common.getRootPath() + url

        _self.$nextTick(function () {
          var iframe = document.querySelector(id)
          iframe.src = absoluteUrl
        })
      } else {
        absoluteUrl = Common.getFileServerUrl() + 'Files/' + account + '/GeneratedReport/' + url

        _self.$nextTick(function () {
          var iframe = document.querySelector(id)
          var headers = [['token', token, 'account', account]]
          var xhr = new XMLHttpRequest()
          xhr.open('GET', absoluteUrl)
          xhr.responseType = 'blob'
          headers.forEach(function (header) {
            xhr.setRequestHeader(header[0], header[1])
            xhr.setRequestHeader(header[2], header[3])
          })
          xhr.onload = function () {// 请求完成处理函数
            if (this.status === 200) {
              var blob = this.response// 获取返回值
              iframe.src = window.URL.createObjectURL(this.response)
            }
          }
          xhr.send()
        })
      }


    },
    /**
         * 下载文件
         */
    download: function (item) {
      if (item.previewIndex == 1) {
        console.log(item.pdfDownLoadUrl)
        DownloadService.reportDownload(item.pdfDownLoadUrl)
      } else {
        DownloadService.reportDownload(item.excelDownLoadUrl)
      }
    },

    /**
         * 后退
         */
    iframeBack: function (reportResult, index) {
      if (reportResult.previewIndex == 1) {
        document.getElementById('pdfIframe' + index).contentWindow.history.back()
      } else {
        document.getElementById('htmlIframe' + index).contentWindow.history.back()
      }
    },


    /**
         * 前进
         */
    iframeForward: function (reportResult, index) {
      if (reportResult.previewIndex == 1) {
        document.getElementById('pdfIframe' + index).contentWindow.history.forward()
      } else {
        document.getElementById('htmlIframe' + index).contentWindow.history.forward()
      }
    },


    /**
         * 打开报表编辑界面
         */
    editReport: function (reportResult) {
      var _self = this
      if (reportResult.reportDefinitionType != 'UReport2') {
        Notify.error('错误', '当前的报表不支持用户自定义', false)
        return
      }
      let reportDesignerUrl = reportResult.htmlPreviewUrl.replace('preview', 'designer')
      window.open(reportDesignerUrl)
    },
  },
}
</script>
<style scoped>
.btn-download {
    cursor: pointer;
}
</style>