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
              v-if="reportResult.reportDefinitionType !== 'ExcelReport'"
              class="pull-left"
              style="padding-left: 30px; cursor: pointer;"
              @click="iframeBack(reportResult, index)"
            >
              后退
            </div>
            <div
              v-if="reportResult.reportDefinitionType !== 'ExcelReport'"
              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-if="reportResult.reportDefinitionType !== 'ExcelReport'"
                  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>
                <select
                  v-else-if="reportResult.reportDefinitionType == 'ExcelReport'"
                  v-model="reportResult.previewIndex"
                  class="form-control"
                >
                  <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.reportDefinitionType !== 'ExcelReport'">
                <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 style="width: 100%;height: 500px;">
                <iframe
                  :id="uuid + 'htmlIframe' + index"
                  style="width: 100%;height: 100%;"
                  :src="reportResult.htmlPreviewUrl"
                />
              </div>
            </div>
            <div v-else>
              生成失败
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>

import Common from '../../common/Common.js';
import Uuid from '../../common/Uuid.js';
import Notify from '../../common/Notify.js';
import DownloadService from '../../common/DownloadService.js';
// import ProcessReportArchive from './ProcessReportArchive.vue';

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('#accountId');
      var token = localStorage.getItem('#token');
      let absoluteUrl = null;
      
      absoluteUrl = Common.getFileServerUrl() + 'Files/' + account + '/GeneratedReport/' + url;
      return absoluteUrl;
    },
    /**
             * 下载文件
             */
    download: function (item) {
      if (item.previewIndex == 1) {
        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>