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

<template>
  <div>
    <div
      v-if="processReportResult.processResult != undefined"
      class="form-group"
    >
      <textarea
        v-if="isTextAreaShowProcessResult"
        :value="processReportResult.processResult.result"
        class="processResult-textarea"
        rows="10"
        style="width:100%"
      />
      <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"
    />

    <template
      v-for="(reportResult, index) in processReportResult.reportResults"
      :key="'reportResult-' + index"
    >
      <div
        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>
      </div>
    </template>
  </div>
</template>

<script>

var Common = require('../../common/Common.js').default;
var Uuid = require('../../common/Uuid.js').default;
var Notify = require('../../common/Notify.js').default;
var DownloadService = require('../../common/DownloadService.js').default;
var ProcessReportArchive = require('./ProcessReportArchive.vue').default;

export default {
  name: 'ProcessReportResultPreview',

  components: {
    ProcessReportArchive,
  },

  props: {
    'processReportResult': {
      type: Object,
      default: null,
    }, 'pdfOnly': {
      type: Boolean,
      default: false,
    }, 'excelOnly': {
      type: Boolean,
      default: false,
    },
  },

  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) {
      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>