方案筹划部分提交，添加了插件，更新注意

package.json

@@ -64,6 +64,9 @@
     "wangeditor": "^4.7.15"
   },
   "devDependencies": {
+    "@vue-office/docx": "^1.6.1",
+    "@vue-office/excel": "^1.7.8",
+    "@vue-office/pdf": "^1.6.5",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-eslint": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
@@ -89,6 +92,7 @@
     "stylelint-config-recess-order": "^4.0.0",
     "svg-sprite-loader": "^6.0.11",
     "vue-cropper": "^0.5.5",
+    "vue-demi": "^0.14.7",
     "webpackbar": "^5.0.2"
   },
   "keywords": [

src/main.js

@@ -8,6 +8,13 @@ import router from "./router";
 import "./plugins";
 import "@/layouts/export";
 
+// 全局引入预览组件及相关样式供全局使用
+import VueOfficeDocx from "@vue-office/docx";
+import VueOfficeExcel from "@vue-office/excel";
+import VueOfficePdf from "@vue-office/pdf";
+import "@vue-office/docx/lib/index.css";
+import "@vue-office/excel/lib/index.css";
+
 //导入全局组件
 import "@/components";
 //引入全局时间组件
@@ -20,7 +27,7 @@ import "@/styles/tailwind.scss";
 //引入弹窗和抽屉组件样式
 import "@/styles/ownStyle.scss";
 //引入全局布局容器组件
-import container from "@/views/testEnvironmentMage/deviceCheck/components/container.vue"
+import container from "@/views/testEnvironmentMage/deviceCheck/components/container.vue";
 //引入全局查询/内容布局容器组件
 import DarkLayout from "@/views/command/taskEdit/components/DarkLayout.vue";
 /**
@@ -43,6 +50,10 @@ Vue.use($dict);
 Vue.use($publicKey);
 //注册全局时间组件
 Vue.component("MenuTime", MenuTime);
+// 注册全局docx和excel预览组件
+Vue.component("VueOfficeDocx", VueOfficeDocx);
+Vue.component("VueOfficeExcel", VueOfficeExcel);
+Vue.component("VueOfficePdf", VueOfficePdf);
 //注册全局布局容器组件
 Vue.component("Container", container);
 Vue.component("AllDarkLayout", DarkLayout);

src/views/planningSchem/comprehensive/index.vue

@@ -69,6 +69,7 @@
           accept=".doc,.docx"
           :auto-upload="false"
           :on-change="handleInteFileChange"
+          :before-upload="beforeUploadHandle"
           :limit="1"
         >
           <!-- ,.pdf,.xlsx,.xls -->
@@ -83,15 +84,19 @@
       </div>
 
       <div v-else>
-        <el-table :data="grFileList" border>
-          <el-table-column label="文件名称" prop="fileName"></el-table-column>
-          <el-table-column label="文件类型" prop="fileType"></el-table-column>
-          <el-table-column label="操作" width="120px" align="center">
-            <template slot-scope="{row}">
-              <el-button @click="downFile(row)">下载</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+        <VueOfficeDocx
+          :src="grFileList[0].fileHttp"
+          class="preview-container"
+        />
+        <!--<el-table :data="grFileList" border>-->
+        <!--  <el-table-column label="文件名称" prop="fileName"></el-table-column>-->
+        <!--  <el-table-column label="文件类型" prop="fileType"></el-table-column>-->
+        <!--  <el-table-column label="操作" width="120px" align="center">-->
+        <!--    <template slot-scope="{row}">-->
+        <!--      <el-button @click="downFile(row)">下载</el-button>-->
+        <!--    </template>-->
+        <!--  </el-table-column>-->
+        <!--</el-table>-->
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="showInteUpload = false">取消</el-button>
@@ -101,17 +106,18 @@
     <!-- 靶标方案上传弹窗 -->
     <el-dialog
       :visible.sync="showTargetUpload"
-      :title="hasFile"
+      :title="bbHasFile"
       width="50%">
-      <div v-if="hasFile === '上传靶标方案'">
+      <div v-if="bbHasFile === '上传靶标方案'">
         <el-upload
           class="upload-demo"
           ref="targetUpload"
           action="#"
           :file-list="targetFileList"
-          accept=".doc,.docx"
+          accept=".docx"
           :auto-upload="false"
           :on-change="handleTargetFileChange"
+          :before-upload="beforeUploadHandle"
           :limit="1"
         >
           <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
@@ -119,20 +125,24 @@
             上传到服务器
           </el-button>
           <div slot="tip" class="el-upload__tip">
-            只能上传doc、docx格式的文件
+            只能上传docx格式的文件
           </div>
         </el-upload>
       </div>
       <div v-else>
-        <el-table :data="bbFileList" border>
-          <el-table-column label="文件名称" prop="fileName"></el-table-column>
-          <el-table-column label="文件类型" prop="fileType"></el-table-column>
-          <el-table-column label="操作" width="120px" align="center">
-            <template slot-scope="{row}">
-              <el-button @click="downFile(row)">下载</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+        <VueOfficeDocx
+          :src="bbFileList[0].fileHttp"
+          class="preview-container"
+        />
+        <!--<el-table :data="bbFileList" border>-->
+        <!--  <el-table-column label="文件名称" prop="fileName"></el-table-column>-->
+        <!--  <el-table-column label="文件类型" prop="fileType"></el-table-column>-->
+        <!--  <el-table-column label="操作" width="120px" align="center">-->
+        <!--    <template slot-scope="{row}">-->
+        <!--      <el-button @click="downFile(row)">下载</el-button>-->
+        <!--    </template>-->
+        <!--  </el-table-column>-->
+        <!--</el-table>-->
       </div>
 
       <span slot="footer" class="dialog-footer">
@@ -176,17 +186,19 @@ import {exportSolutionToWord} from "@/views/planningSchem/comprehensive/wordExpo
 import {baseURL, contentType, tokenName} from "@/config";
 import store from "@/store";
 import {doUpload} from "@/api/tool/ossTool";
-// import Docx from 'docxjs'
+// import VueOfficeDocx from '@vue-office/docx'
+// import '@vue-office/docx/lib/index.css'
 
 export default {
   components: {
     DarkDialog,
     DarkLayout,
-    InterferenceCard
+    InterferenceCard,
+    // VueOfficeDocx
   },
   data() {
     return {
-      hasFile: '上传靶标方案',
+      bbHasFile: '上传靶标方案',
       inteHasFile: '上传干扰方案',
       bbFileList: [],
       grFileList: [],
@@ -292,7 +304,7 @@ export default {
       showInteUpload: false,    // 干扰方案上传弹窗
       showTargetUpload: false,  // 靶标方案上传弹窗
       inteFileList: [],         // 干扰方案文件列表
-      targetFileList: []        // 靶标方案文件列表
+      targetFileList: [],       // 靶标方案文件列表
     }
   },
   mounted() {
@@ -324,6 +336,41 @@ export default {
       }
     },
 
+    // 上传之前
+    beforeUploadHandle(file) {
+      let Xls = file.name.split('.')[file.name.split('.').length - 1];
+      const isLt4M = file.size / 1024 / 1024 < 4;
+      if (
+        // Xls === "xls" ||
+        Xls === "docx"
+        // Xls === "doc" ||
+        // Xls === "xlsx" ||
+        // Xls === "txt" ||
+        // Xls === "png" ||
+        // Xls === "jpg" ||
+        // Xls === "gif" ||
+        // Xls === "pdf" ||
+        // Xls === "ppt" ||
+        // Xls === "pptx"
+        // Xls != 'exe' &&
+        // Xls != 'bat' &&
+        // Xls != 'sh'
+      ) {
+        if (!isLt4M) {
+          this.$message({
+            message: '上传文件大小不能超过4MB!',
+            type: 'warning',
+          });
+          return false;
+        } else {
+          return file;
+        }
+      } else {
+        this.$message.error('上传文件格式不正确!');
+        return false;
+      }
+    },
+
     // 干扰方案上传成功处理
     async handleInteUploadSuccess(response, file, fileList) {
       if (response.code !== 200) {
@@ -585,7 +632,7 @@ export default {
         this.showInteUpload = true;
       } else if (val.type === "target" && plan.targetSchemeStatus === '未导入') {
         console.log("靶标方案未导入，显示上传组件")
-        this.hasFile = '上传靶标方案'
+        this.bbHasFile = '上传靶标方案'
         this.selectPlan = plan;
         this.showTargetUpload = true;
       } else if (val.type === "meas" && plan.measurementSchemeStatus === '未编制') {
@@ -598,7 +645,7 @@ export default {
         this.showInteUpload = true;
       } else if (val.type === "target" && plan.targetSchemeStatus === '已导入') {
         this.bbFileList = JSON.parse(plan.schemeSubPlan)
-        this.hasFile = '查看靶标方案'
+        this.bbHasFile = '查看靶标方案'
         this.showTargetUpload = true;
       } else {
         // 已导入/已编制状态正常跳转
@@ -641,6 +688,21 @@ export default {
 }
 </script>
 
+<style scoped>
+.preview-container {
+  width: 100%;
+  min-height: 300px;
+  max-height: 500px;
+  border: 1px solid #eee;
+}
+
+::v-deep .el-dialog__body {
+  max-height: calc(100vh - 150px);
+  overflow: auto;
+  padding: 20px;
+}
+</style>
+
 <style scoped>
 
 </style>