DVP-VUE 预览组件增加word、excel、pdf、图片的判断和预览

package.json

@@ -27,6 +27,8 @@
     "@logicflow/core": "^1.1.3",
     "@logicflow/extension": "^1.1.3",
     "@vue-office/excel": "^1.6.0",
+    "@vue-office/docx": "^1.6.0",
+    "@vue-office/pdf": "^1.6.5",
     "@vue/composition-api": "^1.7.2",
     "@ztree/ztree_v3": "^3.5.48",
     "ant-design-vue": "^1.7.8",

src/components/index.js

@@ -1,4 +1,7 @@
 import ExceptionPage from '@/components/Exception';
+import ViewOffice from "@/components/viewOffice/viewOffice";
+
 export {
-	ExceptionPage
+	ExceptionPage,
+	ViewOffice
 };

src/components/viewOffice/viewOffice.vue

@@ -0,0 +1,168 @@
+<template>
+  <a-modal
+    class="modal-style"
+    :dialog-style="{ top: '0' }"
+    :title="$t('base.info.watermark.preview')"
+    :visible="isShowModal"
+    @ok="closeModal"
+    @cancel="closeModal"
+    width="100%">
+
+    <!-- Excel 文件预览组件 -->
+    <vue-office-excel
+      v-if="isExcel"
+      class="excel-style"
+      :src="fileUrl"
+      @rendered="$t('plan.dvp.operation-succeeded')"
+      @error="$t('plan.dvp.operation-failed')"/>
+
+    <!-- word 文件预览组件 -->
+    <vue-office-word
+      v-if="isWord"
+      class="excel-style"
+      :src="fileUrl"
+      @rendered="$t('plan.dvp.operation-succeeded')"
+      @error="$t('plan.dvp.operation-failed')"/>
+
+    <!-- pdf 文件预览组件 -->
+    <vue-office-pdf
+      v-if="isPdf"
+      class="excel-style"
+      :src="fileUrl"
+      @rendered="$t('plan.dvp.operation-succeeded')"
+      @error="$t('plan.dvp.operation-failed')"/>
+
+    <!-- 图片预览 -->
+    <div id="imagePreview" style="width: 100%; height: 100%"></div>
+
+  </a-modal>
+</template>
+
+
+<script>
+
+//引入VueOfficeExcel组件
+import VueOfficeExcel from "@vue-office/excel";
+//引入相关样式
+import "@vue-office/excel/lib/index.css";
+
+//引入VueOfficeWord组件
+import VueOfficeWord from "@vue-office/docx";
+//引入相关样式
+import "@vue-office/docx/lib/index.css";
+
+//引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf';
+
+export default {
+  components: {
+    VueOfficeExcel,
+    VueOfficeWord,
+    VueOfficePdf
+  },
+  data() {
+    return {
+      // 文件预览地址
+      fileUrl: undefined,
+      // 模态框显示隐藏
+      isShowModal: false,
+      isWord: false,
+      isExcel: false,
+      isPdf: false,
+      blobUrl: undefined
+    };
+  },
+
+  methods: {
+
+    /**
+     * 关闭预览
+     */
+    closeModal() {
+      this.isShowModal = false;
+      this.isWord = false;
+      this.isExcel = false;
+      this.isPdf = false;
+      // 清理: 当不再需要Blob URL时，应该释放它
+      URL.revokeObjectURL(this.blobUrl);
+      // 清空图片
+      let imagePreview = document.getElementById('imagePreview');
+      imagePreview.innerHTML = '';
+    },
+
+    /**
+     * 判断文件是Word、Excel、还是PDF
+     * @param fileName
+     */
+    getFileExtension(fileName) {
+
+      // 使用'.'字符分割文件名
+      let parts = fileName.split('.');
+
+      // 获取最后一部分，即扩展名
+      let extension = parts.pop();
+
+      switch (extension) {
+        case 'docx':
+          this.isWord = true;
+          break;
+        case 'xlsx':
+          this.isExcel = true;
+          break;
+        case 'pdf':
+          this.isPdf = true;
+          break;
+        case 'png':
+          this.transFromPicture(extension, fileName);
+          break;
+        case 'jpg':
+          this.transFromPicture(extension, fileName);
+        case 'jpeg':
+          this.transFromPicture(extension, fileName);
+          break;
+        default:
+          break;
+      }
+    },
+
+    /**
+     * 转换数据格式，以便于显示图片
+     * @param val
+     */
+    transFromPicture(extension, fileName) {
+      let imagePreview = document.getElementById('imagePreview');
+      // 步骤1: 将ArrayBuffer转换为Blob对象
+      let blob = new Blob([this.fileUrl], { type: 'image/' + extension });
+      // 步骤2: 创建一个表示Blob对象的URL
+      this.blobUrl = URL.createObjectURL(blob);
+      // 步骤3: 创建一个img元素并设置src属性为Blob URL
+      const img = document.createElement('img');
+      // 设置img元素的src属性为读取到的文件数据
+      img.src = this.blobUrl;
+      img.style.height = "100%";
+      img.style.width = "100%";
+      img.style.objectFit = "cover";
+      img.alt = fileName;
+      // 将img元素添加到预览区域
+      imagePreview.innerHTML = ''; // 清空之前的图片
+      imagePreview.appendChild(img);
+    }
+  }
+};
+
+</script>
+
+<style lang="less" scoped>
+.excel-style {
+  height: 88vh;
+  width: calc(100% - 10px);
+}
+</style>
+<style>
+.modal-style ::-webkit-scrollbar {
+  width: 6px !important;
+}
+.modal-style {
+  z-index: 999;
+}
+</style>

src/views/components/TestReportViewModal.vue

@@ -1,64 +0,0 @@
-<template>
-  <a-modal
-    class="modal-style"
-    :dialog-style="{ top: '0' }"
-    :title="$t('base.info.watermark.preview')"
-    :visible="isShowReport"
-    :maskClosable="false"
-    @ok="closeModal"
-    @cancel="closeModal"
-    width="100%"
-  >
-    <!--    文件预览组件-->
-    <vue-office-excel
-      class="excel-style"
-      :src="testReportUrl"
-      @rendered="$t('plan.dvp.operation-succeeded')"
-      @error="$t('plan.dvp.operation-failed')"
-    />
-  </a-modal>
-</template>
-
-
-<script>
-
-//引入VueOfficeExcel组件
-import VueOfficeExcel from "@vue-office/excel";
-//引入相关样式
-import "@vue-office/excel/lib/index.css";
-
-export default {
-  components: {
-    VueOfficeExcel
-  },
-  data() {
-    return {
-      // 文件预览地址
-      testReportUrl: undefined,
-      // 模态框显示隐藏
-      isShowReport: false
-    };
-  },
-
-  methods: {
-
-    closeModal() {
-      this.isShowReport = false;
-    }
-
-  }
-};
-
-</script>
-
-<style lang="less" scoped>
-.excel-style {
-  height: 88vh;
-  width: calc(100% - 10px);
-}
-</style>
-<style>
-.modal-style ::-webkit-scrollbar {
-  width: 6px !important;
-}
-</style>

src/views/componentsDVP/dvpPlan/edit.vue

@@ -141,7 +141,7 @@
           </template>
           <!-- 等效实验报告编号 -->
           <template slot='equivalentTestCode' slot-scope='text, record'>
-            <span class="clickContent" @click="viewReport(record)" :title="text">{{ text }}</span>
+            <span class="clickContent" @click="viewReport(record)" :title="text">{{ record.fileName }}</span>
           </template>
           <!-- 数据来源 -->
           <template slot='dataSource' slot-scope='text, record'>
@@ -207,8 +207,8 @@
 
     <!--申请变更-->
     <apply-change ref="applyChange" :applyFlag="applyFlag" :applyTableData="applyTableData" :dvpType="dvpType" @closeModal="closeModal" @initData="initData"></apply-change>
-    <!--文件预览-->
-    <test-report-view-modal ref="viewModal"/>
+    <!-- 文件预览 -->
+    <view-office ref="viewModal"/>
 
   </div>
 </template>
@@ -222,9 +222,7 @@ import TemplateEdit from "./editModal/templateEdit";
 import EditTableRow from "./editModal/editTableRow";
 import ApplyChange from "./editModal/applyForChange";
 import VueDraggableResizable from 'vue-draggable-resizable';
-import TestReportViewModal from "@/views/components/TestReportViewModal";
-
-
+import ViewOffice from "@/components/viewOffice/viewOffice";
 
 export default {
   components: {
@@ -235,7 +233,7 @@ export default {
     EditTableRow,
     ApplyChange,
     VueDraggableResizable,
-    TestReportViewModal
+    ViewOffice
   },
   data() {
     this.components = {
@@ -1259,12 +1257,15 @@ export default {
       let url = this.$api.baseUrl + '/DFMEA/file/downloadFile.do?id=' + val.equivalentTestId + '&fileType=8';
       fetch(url, {
         method: 'get'
-      }).then(res=>{
+      }).then(res => {
         //读取文件的arrayBuffer
-        res.arrayBuffer().then(res=>{
-          this.$refs.viewModal.testReportUrl = res;
+        res.arrayBuffer().then(res => {
+          this.$refs.viewModal.isShowModal = true;
+          this.$refs.viewModal.fileUrl = res;
+          this.$nextTick(() => {
+            this.$refs.viewModal.getFileExtension(val.fileName);
+          });
         });
-        this.$refs.viewModal.isShowReport = true;
       });
       this.download('/DFMEA/file/downloadFile', {
         id: val.equivalentTestId,

src/views/componentsDVP/dvpPlan/index.vue

@@ -138,8 +138,8 @@
     <!--上传材料清单弹框-->
     <upload-material ref="uploadMaterial" @closeUploadModal="closeUploadModal" @initData="initData" :isUpload="isUpload" ></upload-material>
 
-    <!--文件预览-->
-    <test-report-view-modal ref="viewModal"/>
+    <!-- 文件预览 -->
+    <view-office ref="viewModal"/>
   </div>
 </template>
 
@@ -154,7 +154,7 @@ import UploadMaterial from "./editModal/uploadMaterialList";
 import ApplyChange from "./editModal/applyForChange";
 import utils from '@/utils/urlParamUtil';
 import VueDraggableResizable from 'vue-draggable-resizable';
-import TestReportViewModal from "@/views/components/TestReportViewModal";
+import ViewOffice from "@/components/viewOffice/viewOffice";
 
 
 export default {
@@ -167,7 +167,7 @@ export default {
     UploadMaterial,
     ApplyChange,
     VueDraggableResizable,
-    TestReportViewModal
+    ViewOffice
   },
   data() {
     this.components = {
@@ -744,12 +744,15 @@ export default {
       let url = this.$api.baseUrl + '/DFMEA/file/downloadFile.do?id=' + val.fileId + '&fileType=18';
       fetch(url, {
         method: 'get'
-      }).then(res=>{
+      }).then(res => {
         //读取文件的arrayBuffer
-        res.arrayBuffer().then(res=>{
-          this.$refs.viewModal.testReportUrl = res;
+        res.arrayBuffer().then(res => {
+          this.$refs.viewModal.isShowModal = true;
+          this.$refs.viewModal.fileUrl = res;
+          this.$nextTick(() => {
+            this.$refs.viewModal.getFileExtension(val.fileName);
+          });
         });
-        this.$refs.viewModal.isShowReport = true;
       });
       this.download('/DFMEA/file/downloadFile', {
         id: val.fileId,

src/views/componentsDVP/verify/dvpVerify.vue

@@ -316,8 +316,8 @@
     <upload-test-report
       ref="testReport"
       @init="list()" />
-    <!--文件预览-->
-    <test-report-view-modal ref="viewModal"/>
+    <!-- 文件预览 -->
+    <view-office ref="viewModal"/>
     <!-- 批量编辑模态框 -->
     <batch-edit ref="batchEdit" @initData="list"/>
   </div>
@@ -327,7 +327,7 @@
 import uploadMaterialReport from './components/uploadMaterialReport';
 import uploadTestReport from './components/uploadTestReport';
 import VueDraggableResizable from 'vue-draggable-resizable';
-import TestReportViewModal from "@/views/components/TestReportViewModal";
+import ViewOffice from "@/components/viewOffice/viewOffice";
 import BatchEdit from './components/btachEdit';
 
 export default {
@@ -336,7 +336,7 @@ export default {
     uploadMaterialReport,
     uploadTestReport,
     VueDraggableResizable,
-    TestReportViewModal,
+    ViewOffice,
     BatchEdit
   },
   data() {
@@ -748,10 +748,13 @@ export default {
      */
     viewReport(record, num) {
       let fileId = undefined;
+      let fileName = undefined;
       if (num === 1) { // 试验报告
         fileId = record.testReportId;
+        fileName = record.testReportFileName;
       } else if (num === 2) { // 材料报告
         fileId = record.materialsReportId;
+        fileName = record.materialsFileName;
       }
       let url = this.$api.baseUrl + '/DFMEA/file/downloadFile.do?id=' + parseInt(fileId) + '&fileType=17';
       fetch(url, {
@@ -759,9 +762,12 @@ export default {
       }).then(res => {
         //读取文件的arrayBuffer
         res.arrayBuffer().then(res => {
-          this.$refs.viewModal.testReportUrl = res;
+          this.$refs.viewModal.isShowModal = true;
+          this.$refs.viewModal.fileUrl = res;
+          this.$nextTick(() => {
+            this.$refs.viewModal.getFileExtension(fileName);
+          });
         });
-        this.$refs.viewModal.isShowReport = true;
       });
       this.download('/DFMEA/file/downloadFile', {
         id: fileId,

src/views/fullVehicle/verify/dvpVerify.vue

@@ -265,20 +265,21 @@
         </a-form>
       </a-row>
     </a-modal>
-    <!--文件预览-->
-    <test-report-view-modal ref="viewModal"/>
+
+    <!-- 文件预览 -->
+    <view-office ref="viewModal"/>
   </div>
 </template>
 <script>
 import moment from "moment";
 import VueDraggableResizable from 'vue-draggable-resizable';
-import TestReportViewModal from "@/views/components/TestReportViewModal";
+import ViewOffice from "@/components/viewOffice/viewOffice";
 
 export default {
   name: "dvpVerify",
   components: {
     VueDraggableResizable,
-    TestReportViewModal
+    ViewOffice
   },
   data() {
     this.components = {
@@ -912,9 +913,12 @@ export default {
       }).then(res => {
         //读取文件的arrayBuffer
         res.arrayBuffer().then(res => {
-          this.$refs.viewModal.testReportUrl = res;
+          this.$refs.viewModal.isShowModal = true;
+          this.$refs.viewModal.fileUrl = res;
+          this.$nextTick(() => {
+            this.$refs.viewModal.getFileExtension(val.fileName);
+          });
         });
-        this.$refs.viewModal.isShowReport = true;
       });
       this.download('/DFMEA/file/downloadFile', {
         id: val.fileId,

src/views/systemDVP/verify/dvpVerify.vue

@@ -115,6 +115,10 @@
           <template slot="testResult" slot-scope="text, record">
             <span>{{ passOrNotMap[record.testResult] || '-' }}</span>
           </template>
+          <!-- 试验结果 -->
+          <template slot="testReportCode" slot-scope="text, record">
+            <span :title="text" class="clickContent" @click="viewListReport(record)"> {{ record.testReportCode }}</span>
+          </template>
           <!-- 整改后试验结果 -->
           <template slot="reformVerifyResult" slot-scope="text, record">
             <span>{{ passOrNotMap[record.reformVerifyResult] || '-' }}</span>
@@ -354,21 +358,21 @@
         </div>
       </a-row>
     </a-modal>
-    <!--文件预览-->
-    <test-report-view-modal ref="viewModal"/>
+    <!-- 文件预览 -->
+    <view-office ref="viewModal"/>
   </div>
 </template>
 
 <script>
 import moment from "moment";
 import VueDraggableResizable from 'vue-draggable-resizable';
-import TestReportViewModal from "@/views/components/TestReportViewModal";
+import ViewOffice from "@/components/viewOffice/viewOffice";
 
 export default {
   name: "dvpVerify",
   components: {
     VueDraggableResizable,
-    TestReportViewModal
+    ViewOffice
   },
   data() {
     this.components = {
@@ -541,7 +545,9 @@ export default {
           width: 200,
           align: 'center',
           dataIndex: 'testReportCode',
-          ellipsis: true
+          scopedSlots: {
+            customRender: 'testReportCode'
+          }
         },
         // 整改后验证计划
         {
@@ -1310,7 +1316,7 @@ export default {
     },
 
     /**
-     * 查看报告
+     * 查看报告 编辑-整改记录
      * @param val
      */
     viewReport(val) {
@@ -1319,10 +1325,37 @@ export default {
         method: 'get'
       }).then(res=>{
         //读取文件的arrayBuffer
-        res.arrayBuffer().then(res=>{
-          this.$refs.viewModal.testReportUrl = res;
+        res.arrayBuffer().then(res => {
+          this.$refs.viewModal.isShowModal = true;
+          this.$refs.viewModal.fileUrl = res;
+          this.$nextTick(() => {
+            this.$refs.viewModal.getFileExtension(val.fileName);
+          });
+        });
+      });
+      this.download('/DFMEA/file/downloadFile', {
+        id: val.fileId,
+        fileType: 17
+      });
+    },
+
+    /**
+     * 查看报告
+     * @param val
+     */
+    viewListReport(val) {
+      let url = this.$api.baseUrl + '/DFMEA/file/downloadFile.do?id=' + val.fileId + '&fileType=17';
+      fetch(url, {
+        method: 'get'
+      }).then(res=>{
+        //读取文件的arrayBuffer
+        res.arrayBuffer().then(res => {
+          this.$refs.viewModal.isShowModal = true;
+          this.$refs.viewModal.fileUrl = res;
+          this.$nextTick(() => {
+            this.$refs.viewModal.getFileExtension(val.fileName);
+          });
         });
-        this.$refs.viewModal.isShowReport = true;
       });
       this.download('/DFMEA/file/downloadFile', {
         id: val.fileId,
@@ -1362,4 +1395,10 @@ export default {
   padding-right: 10px;
   background: rgb(250, 250, 250);
 }
+
+/deep/ .clickContent {
+  color: #1890FF;
+  cursor: pointer;
+}
+
 </style>