feat(report): 新增PDF报告预览功能并重构报告下载流程

liding

4 天以前 6eeb82e56306d645a290a0f5ba202efe3ef2385d

 src/views/business/materialOrderComponents/materialOrder/downFileDialog.vue

@@ -1,85 +1,58 @@
<template>
  <div>
    <el-dialog title="报告查看下载" v-model="isShow" width="500px" @closed="$emit('closeDownFileDialog')">
      <div style="margin-bottom: 18px">
        <span style="font-size: 16px;">进厂检验报告下载</span>
        <lims-icon name="el-icon-paperclip" style="color:var(--el-color-primary);margin-left: 6px"></lims-icon>
        <el-link :underline="false" style="vertical-align: bottom;font-size: 16px;"
                 :disabled="!downLoadInfo.enterUrlS && !downLoadInfo.enterUrl"
                 type="primary" @click="downLoad0">查看</el-link>
      </div>
      <div>
        <span  style="font-size: 16px;">季度检验报告下载</span>
        <lims-icon name="el-icon-paperclip" style="color:var(--el-color-primary);margin-left: 6px"></lims-icon>
        <el-link :underline="false" style="vertical-align: bottom;font-size: 16px;"
                 :disabled="!downLoadInfo.quarterUrlS && !downLoadInfo.quarterUrl"
                 type="primary" @click="downLoad1">查看</el-link>
    <el-dialog title="报告预览/下载" v-model="isShow" width="520px" @closed="$emit('closeDownFileDialog')">
      <div v-for="item in reports" :key="item.key" class="report-choice">
        <span>{{ item.label }}</span>
        <el-button link type="primary" :disabled="!canView(item)" @click="preview(item)">预览</el-button>
        <el-button link type="primary" :disabled="!canView(item)" @click="download(item)">下载</el-button>
        <span v-if="!canView(item)" class="report-unavailable">未生成或尚未批准</span>
      </div>
    </el-dialog>
    <report-preview ref="reportPreview" />
  </div>
</template>

<script>
import ReportPreview from '@/components/ReportPreview/index.vue'
import { loadReportFile, reportFilename, reportPdfPath } from '@/utils/reportPreview'

export default {
  name: "downFileDialog",
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  name: 'downFileDialog',
  components: { ReportPreview },
  props: {
    downFileDialogVisible: {
      type: Boolean,
      default: () => false
    },
    downLoadInfo: {
      type: Object,
      default: () => {}
    },
    downFileDialogVisible: { type: Boolean, default: false },
    downLoadInfo: { type: Object, default: () => ({}) }
  },
  data() {
    // 这里存放数据
    return {
      isShow: this.downFileDialogVisible,
    return { isShow: this.downFileDialogVisible }
  },
  computed: {
    reports() {
      const info = this.downLoadInfo
      return [
        { key: 'enter', label: '进厂检验报告', url: info.enterUrlS || info.enterUrl, status: info.enterRatifyStatus },
        { key: 'quarter', label: '季度检验报告', url: info.quarterUrlS || info.quarterUrl, status: info.quarterRatifyStatus }
      ]
    }
  },
  // 方法集合
  methods: {
    // 进厂检验报告下载
    downLoad0 () {
      if(this.downLoadInfo.enterRatifyStatus !== 1){
        this.$message.error("报告未审批或审批未通过，无法下载")
        return
      }
      let url = this.downLoadInfo.enterUrlS ? this.downLoadInfo.enterUrlS : this.downLoadInfo.enterUrl
      if(url){
        url = url.split('.')[0]+'.pdf'
        const link = document.createElement('a');
        link.href = this.javaApi + url;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
      }
    canView(item) { return !!item.url && Number(item.status) === 1 },
    preview(item) {
      if (!this.canView(item)) return
      this.$refs.reportPreview.open([{
        key: item.key, label: item.label, format: 'pdf',
        filename: reportFilename(item.label, 'pdf'),
        load: signal => loadReportFile(reportPdfPath(item.url), signal)
      }])
    },
    // 季度检验报告下载
    downLoad1 () {
      if(this.downLoadInfo.quarterRatifyStatus !== 1){
        this.$message.error("报告未审批或审批未通过，无法下载")
        return
      }
      let url = this.downLoadInfo.quarterUrlS ? this.downLoadInfo.quarterUrlS : this.downLoadInfo.quarterUrl
      if(url){
        url = url.split('.')[0]+'.pdf'
        const link = document.createElement('a');
        link.href = this.javaApi + url;
        link.target = '_blank';
        document.body.appendChild(link);
        link.click();
      }
    download(item) {
      if (this.canView(item)) this.$download.url(reportPdfPath(item.url), item.label + '.pdf')
    }
  },
  }
}
</script>

<style scoped>
:deep(.el-dialog) {
  height: 160px;
}
.report-choice { display: flex; align-items: center; gap: 12px; padding: 12px 0; flex-wrap: wrap; }
.report-unavailable { color: var(--el-text-color-secondary); font-size: 12px; }
</style>