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

liding

7 天以前 6eeb82e56306d645a290a0f5ba202efe3ef2385d

 src/views/business/reportPreparation/index.vue

@@ -48,7 +48,8 @@
                  :isSelection="true" :handleSelectionChange="handleChange" :height="'calc(100vh - 290px)'"
                  @pagination="pagination" key="valueTableData">
        <template #action="scope"><div>
          <!--          <el-button size="small" type="text" @click="viewIssued(scope.row)">查看报告</el-button>-->
          <el-button link type="primary" size="small" :disabled="!scope.row.url && !scope.row.urlS"
                     @click="previewReport(scope.row)">预览</el-button>
          <el-upload ref='upload1' style="display: inline;margin: 0 6px" :action="fileAction1 + '?id=' + scope.row.id"
                     :auto-upload="true" :before-upload="fileBeforeUpload1" :headers="uploadHeader" :on-error="onError1"
                     :on-success="handleSuccessUp1" :show-file-list="false" accept='.doc,.docx'>
@@ -59,7 +60,8 @@
          <el-button v-if="scope.row.urlS && !isBrowserEditedReportUrl(scope.row.urlS)" link type="primary" size="small"
                     :disabled="scope.row.state != 0 || nickName !== scope.row.writeUserName || !scope.row.url"
                     @click="handleRestore(scope.row)">还原系统报告</el-button>
          <el-button link type="primary" size="small" @click="sendBackTask(scope.row)">退回任务</el-button>
          <el-button v-if="scope.row.state == 1" link type="primary" size="small"
                     @click="openSendBack(scope.row)">退回任务</el-button>
          <el-button link type="primary" size="small" :disabled="scope.row.state != 0 || nickName !== scope.row.writeUserName"
                     @click="handle(scope.row)">提交
          </el-button>
@@ -68,7 +70,7 @@
                     @click="handleIssued(scope.row)">审核
          </el-button>
          <el-button link type="primary" size="small"
                     :disabled="scope.row.state == null || scope.row.state == 0 || scope.row.isExamine == 0 || scope.row.isExamine == null || scope.row.isRatify == 1 || nickName !== scope.row.ratifyUser"
                     :disabled="scope.row.state == null || scope.row.state == 0 || scope.row.isExamine != 1 || scope.row.isRatify == 1 || nickName !== scope.row.ratifyUser"
                     @click="handleApprove(scope.row)">批准
          </el-button>
          <el-button style="margin-left: 10px" link type="primary" size="small"
@@ -84,6 +86,25 @@
        </div></template>
      </lims-table>
    </div>
    <el-dialog v-model="sendBackVisible" title="退回任务" width="460px" :close-on-click-modal="false">
      <el-form label-width="90px">
        <el-form-item label="退回位置">
          <el-radio-group v-if="sendBackRow && sendBackRow.isRatify == 1" v-model="sendBackForm.target">
            <el-radio value="INSPECTION_TASK">退回到检验任务</el-radio>
            <el-radio value="REPORT_REVIEW">退回到报告审核</el-radio>
          </el-radio-group>
          <span v-else>退回到检验任务</span>
        </el-form-item>
        <el-form-item label="退回原因">
          <el-input v-model="sendBackForm.reason" type="textarea" :rows="4" maxlength="1000"
                    show-word-limit placeholder="请输入退回原因" />
        </el-form-item>
      </el-form>
      <template #footer><span class="dialog-footer">
        <el-button :disabled="sendBackLoading" @click="sendBackVisible = false">取消</el-button>
        <el-button type="primary" :loading="sendBackLoading" @click="submitSendBack">确定退回</el-button>
      </span></template>
    </el-dialog>
    <el-dialog :fullscreen="fullscreen" :modal-append-to-body="false" v-model="claimVisible" title="在线编制"
               width="22cm">
      <div class="full-screen">
@@ -160,7 +181,7 @@
        <img v-else alt="" src="@/assets/images/no-full.svg" style="cursor: pointer;" @click="fullscreen = false;">
      </div>
      <div v-if="approveVisible" class="approve-preview">
        <onlyoffice ref="onlyoffice" :options="option" style="width: 100%;height: 100%;"/>
        <pdf-viewer :key="currentInfo.id" :load="loadApprovalPdf" />
      </div>
      <div class="seal-select-block" v-loading="sealLoading">
        <div class="seal-select-title">
@@ -247,18 +268,7 @@
    </el-dialog>
    <!--产业链信息查看-->
    <!--    <ShowInfo v-if="showInfoDialog" ref="showInfoDialog" :showInfoDialog="showInfoDialog"></ShowInfo>-->
    <!--报告查看-->
    <el-dialog :fullscreen="fullscreen" :modal-append-to-body="false" v-model="viewIssuedVisible" title="报告查看"
               width="80vw">
      <div class="full-screen">
        <lims-icon name="el-icon-full-screen" v-if="!fullscreen" style="cursor: pointer;font-size: 18px"
           @click="fullscreen = true;"></lims-icon>
        <img v-else alt="" src="@/assets/images/no-full.svg" style="cursor: pointer;" @click="fullscreen = false;">
      </div>
      <div v-if="viewIssuedVisible" style="height: 80vh;">
        <onlyoffice ref="onlyoffice" :options="option" style="width: 100%;height: 100%;"/>
      </div>
    </el-dialog>
    <report-preview ref="reportPreview" />
    <!--附件查看-->
    <el-dialog v-model="filesDialogVisible" title="附件查看" width="80%" @closed="closeFilesLook">
      <div style="margin-bottom: 10px">
@@ -285,6 +295,7 @@
      </el-form>
      <template #footer><span  class="dialog-footer">
        <el-button @click="downloadDialogVisible = false">取 消</el-button>
        <el-button :disabled="!downloadRow" @click="previewReport(downloadRow, selectedReportType)">预 览</el-button>
        <el-button type="primary" :loading="downloadingReportType !== null"
                   :disabled="selectedReportType === null || downloadingReportType !== null"
                   @click="downloadSelectedReport(selectedReportType)">下 载</el-button>
@@ -294,12 +305,15 @@
</template>

<script>
import onlyoffice from "@/components/Onlyoffice/onlyoffice.vue";
import PdfViewer from '@/components/ReportPreview/PdfViewer.vue'
import ReportWordEditor from "@/components/ReportWordEditor/index.vue";
import ReportPreview from '@/components/ReportPreview/index.vue'
import { reportFilename } from '@/utils/reportPreview'
// import ShowInfo from "../do/b1-material-ins-order/showInfo.vue";
import {
  downAll,
  downloadReport,
  previewReportPdf,
  examineReport,
  getReportEditDocument,
  saveReportEditDocument,
@@ -321,10 +335,11 @@

export default {
  name: 'ReportPreparation',
  components: {limsTable, onlyoffice, ReportWordEditor},
  components: {limsTable, PdfViewer, ReportWordEditor, ReportPreview},
  dicts: ['material_prop_type'],
  data() {
    return {
      hasActivated: false,
      entity: {
        queryStatus: null,
        code: null,
@@ -345,6 +360,13 @@
      issuedReasonVisible: false,
      approveVisible: false,
      approveReasonVisible: false,
      sendBackVisible: false,
      sendBackLoading: false,
      sendBackRow: null,
      sendBackForm: {
        target: null,
        reason: ''
      },
      sealOptions: [],
      sealPositions: [
        { key: 'maSealId', label: 'MA标志章', description: 'PDF 第1页左上角' },
@@ -418,11 +440,11 @@
      customsInspection: {},
      currentId: null,
      examine: null,
      viewIssuedVisible: false,
      queryStatusList: [
        {label: '待提交', value: 0},
        {label: '待审核', value: 1},
        {label: '待批准', value: 2},
        {label: '已退回', value: 3},
      ],
      state: 0,
      orderId: 0,
@@ -580,6 +602,8 @@
              return "不通过";
            } else if (params == 1) {
              return "通过";
            } else if (params == 2) {
              return "已退回";
            } else {
              return null
            }
@@ -589,6 +613,8 @@
              return "danger";
            } else if (params == 1) {
              return "success";
            } else if (params == 2) {
              return "warning";
            } else {
              return undefined
            }
@@ -607,6 +633,8 @@
              return "不批准";
            } else if (params == 1) {
              return "批准";
            } else if (params == 2) {
              return "已退回";
            } else {
              return null
            }
@@ -616,6 +644,8 @@
              return "danger";
            } else if (params == 1) {
              return "success";
            } else if (params == 2) {
              return "warning";
            } else {
              return undefined
            }
@@ -647,6 +677,13 @@
  },
  mounted() {
    this.refreshTable()
  },
  activated() {
    // 首次进入由 mounted 加载，缓存页面再次激活时刷新列表。
    if (this.hasActivated) {
      this.refreshTable()
    }
    this.hasActivated = true
  },
  methods: {
    refreshTable() {
@@ -1103,52 +1140,47 @@
      this.auditDocument = null
      done()
    },
    // 查看报告
    viewIssued(row) {
      console.log('this.javaApi', this.javaApi)
      this.currentInfo = row;
      let fileName = (row.urlS === null || row.urlS === '') ? row.url : row.urlS
      let fileType = "docx"
      if (row.tempUrlPdf != null || row.tempUrlPdf === '') {
        fileName = row.tempUrlPdf
        fileType = "pdf"
      }
      fileName = fileName.replace('/word/', '')
      const userName = this.nickName
      this.option = {
        url: this.javaApi + "/word/" + fileName,
        isEdit: false,
        fileType: fileType,
        title: fileName,
        lang: 'zh-CN',
        isPrint: false,
        user_id: 1,
        user_name: userName,
        editUrl: this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName
      }
      this.viewIssuedVisible = true;
    // 使用服务端按 Word 版式生成的 PDF，复杂表格不在浏览器中重新排版。
    previewReport(row, reportType = 0) {
      const variants = [{ key: 0, label: '检测报告' }]
      if (row.inspectionUrl) variants.push({ key: 1, label: '检验报告' })
      this.$refs.reportPreview.open(variants.map(item => ({
        ...item, format: 'pdf',
        filename: reportFilename((row.code || '报告') + (row.inspectionUrl ? '-' + item.label : ''), 'docx'),
        load: signal => previewReportPdf(row.id, item.key, signal),
        download: signal => downloadReport(row.id, item.key, signal), downloadFormat: 'docx'
      })), reportType)
    },
    // 退回到任务
    sendBackTask(row) {
      this.$confirm('确认退回到检验任务?退回后需重新提交复核', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    openSendBack(row) {
      this.sendBackRow = row
      this.sendBackForm = {
        target: row.isRatify == 1 ? null : 'INSPECTION_TASK',
        reason: ''
      }
      this.sendBackVisible = true
    },
    submitSendBack() {
      if (!this.sendBackForm.target) {
        return this.$message.error('请选择退回位置')
      }
      if (!this.sendBackForm.reason || !this.sendBackForm.reason.trim()) {
        return this.$message.error('请输入退回原因')
      }
      if (this.sendBackLoading || !this.sendBackRow) return
      this.sendBackLoading = true
      const targetName = this.sendBackForm.target === 'REPORT_REVIEW' ? '报告审核' : '检验任务'
      sendBackTask({
        id: this.sendBackRow.id,
        target: this.sendBackForm.target,
        reason: this.sendBackForm.reason.trim()
      }).then(() => {
        this.upLoad = true
        sendBackTask({id: row.id}).then(res => {
          this.upLoad = false
          this.$message.success('退回成功！')
          this.refreshTable('page')
        }).catch(err => {
          this.upLoad = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
        this.$message.success(`已退回到${targetName}`)
        this.sendBackVisible = false
        this.sendBackRow = null
        this.refreshTable('page')
      }).finally(() => {
        this.sendBackLoading = false
      })
    },
    // 审核通过
    async submitAddApprover() {
@@ -1228,26 +1260,11 @@
    handleApprove(row) {
      this.currentInfo = row;
      this.loadEnabledSeals(row);
      let fileName = (row.urlS === null || row.urlS === '') ? row.url : row.urlS
      let fileType = "docx"
      if (row.tempUrlPdf != null || row.tempUrlPdf === '') {
        fileName = row.tempUrlPdf
        fileType = "pdf"
      }
      fileName = fileName.replace('/word/', '')
      const userName = this.nickName
      this.option = {
        url: this.javaApi + "/word/" + fileName,
        isEdit: false,
        fileType: fileType,
        title: fileName,
        lang: 'zh-CN',
        isPrint: false,
        user_id: 1,
        user_name: userName,
        editUrl: this.javaApi + "/insReport/onlyOffice/save?fileName=" + fileName
      }
      this.fullscreen = false;
      this.approveVisible = true;
    },
    loadApprovalPdf(signal) {
      return previewReportPdf(this.currentInfo.id, 0, signal)
    },
    // 批准通过
    subApprove() {
@@ -1368,7 +1385,7 @@
        ratifyTell: this.reason
      }).then(res => {
        this.loadingApproveReason = false
        this.$message.success('操作成功')
        this.$message.success('已退回报告审核')
        this.refreshTable('page')
        this.currentInfo = null;
        this.reason = '';