1.文件预览

.env.development

@@ -21,7 +21,7 @@ VUE_APP_API_PREFIX=/api
 VUE_APP_API_PORT=80
 
 # 业务服务地址  https://kps.scdayou.com/dfs/2023/08/03/real-report.docx
-VUE_APP_API_SERVER=http://$VUE_APP_HOST
+VUE_APP_API_SERVER=http://$VUE_APP_HOST:81
 
 # Onlyoffice 服务端口号
 VUE_APP_ONLYOFFICE_PORT=8091
@@ -33,16 +33,16 @@ VUE_APP_ONLYOFFICE_SERVER=http://kps.scdayou.com:8091
 VUE_APP_ONLYOFFICE_API_PREFIX=/onlyofficeApi
 
 # Onlyoffice 回调接口地址，相关文档：https://api.onlyoffice.com/editors/callback
-VUE_APP_ONLYOFFICE_CALLBACK=https://kps.scdayou.com/api/onlyoffice/callback
+VUE_APP_ONLYOFFICE_CALLBACK=$VUE_APP_ONLYOFFICE_SERVER/api/onlyoffice/callback
 
 # Onlyoffice 文档构建接口地址，相关文档：https://api.onlyoffice.com/editors/documentbuilderapi
-VUE_APP_ONLYOFFICE_DOCBUILDER=192.168.0.108:8088/api/onlyoffice/callback
+VUE_APP_ONLYOFFICE_DOCBUILDER=$VUE_APP_API_SERVER/api/onlyoffice/callback
 
 # Onlyoffice 文档转换接口地址，相关文档：https://api.onlyoffice.com/editors/conversionapi
-VUE_APP_ONLYOFFICE_CONVERT=192.168.0.108:8088/api/onlyoffice/callback
+VUE_APP_ONLYOFFICE_CONVERT=$VUE_APP_HOST:81/api/onlyoffice/callback
 
 # Onlyoffice 入口 JS 文件
-VUE_APP_ONLYOFFICE_API_URL=http://kps.scdayou.com:8091/web-apps/apps/api/documents/api.js
+VUE_APP_ONLYOFFICE_API_URL=$VUE_APP_ONLYOFFICE_SERVER/web-apps/apps/api/documents/api.js
 
 
 # 只有以VUE_APP_开头的变量才会被webpack.DefinePlugin静态嵌入到客户端侧的包中

src/components/DocumentEditor/index.vue

@@ -59,8 +59,6 @@
           width: 1200,
           // 编辑器高度
           height: 600,
-          // 编辑器类型，支持 word、cell（表格）、slide（PPT）
-          documentType: 'word',
           // 文档配置
           document: {
             // 权限
@@ -69,8 +67,6 @@
               comment: false,
               // 启用下载
               download: true,
-              // 启用编辑
-              edit: true,
               // 启用导出
               print: true,
               // 启用预览
@@ -139,8 +135,9 @@
           this.editor = null
         }
         if (window.DocsAPI) {
+          // 合并配置信息
           let config = merge({}, this.editorConfig, this.config)
-          console.log("config",config)
+          console.log("config",this.config)
           this.editor = new window.DocsAPI.DocEditor(this.id, config)
         }
       }

src/components/OnlyOffice/officeFileView.vue

@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <onlyoffice-editor :loading="loading.editor" :config="editorConfig">
+        </onlyoffice-editor>
+    </div>
+</template>
+    
+<script>
+import OnlyofficeEditor from '@/components/DocumentEditor'
+
+export default {
+    components: {
+        OnlyofficeEditor
+    },
+    data() {
+        return {
+            loading: {
+                editor: false,
+                save: false,
+                forceSave: false
+            },
+            // 支持的word编辑器的类型
+            supportWordFile:['doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fb2', 'fodt', 'htm', 'html', 'mht', 'mhtml', 'odt', 'ott', 'rtf', 'stw', 'sxw', 'txt', 'wps', 'wpt', 'xml'],
+            // 支持的cell编辑器的类型
+            supportCellFile:['csv', 'et', 'ett', 'fods', 'ods', 'ots', 'sxc', 'xls', 'xlsb', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx', 'xml'],
+            // 支持的slide编辑器的类型
+            supportSlideFile:['dps', 'dpt', 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx', 'sxi'],
+            // 支持的pdf编辑器的类型
+            supportPdfFile:['djvu', 'docxf', 'oform', 'oxps', 'pdf', 'xps'],
+            detail: {},
+            // 编辑器配置
+            editorConfig: {
+                // 编辑器宽度
+                width: '100%',
+                // 编辑器高度
+                height: '100%',
+                // 编辑器类型，支持 word（文档）、cell（表格）、slide（PPT）
+                documentType: null,
+                // 文档配置
+                document: {
+                    // 文件类型
+                    fileType: null,
+                    // 文档url地址
+                    url: null,
+                    // 文档标题
+                    title: null,
+                    // 文档权限配置
+                    permissions: {
+                        edit: false, //文件是否可以编辑，false时文件不可编辑
+                    }
+                },
+                //编辑配置
+                editorConfig: {
+                    //文档操作模式 view 视图模式不可编辑  edit 编辑模式可编辑文档
+                    mode: 'view'
+                }
+            }
+        }
+    },
+    created() {
+        this.setConfigInfo();
+    },
+    methods: {
+        // 从路由取参设置文件信息
+        setConfigInfo() {
+            this.editorConfig.document.title = this.$route.query.title;
+            this.editorConfig.document.url = process.env.VUE_APP_API_SERVER + this.$route.query.url;
+
+            const lastIndex = this.$route.query.title.lastIndexOf('.');
+            this.editorConfig.document.fileType = lastIndex !== -1 ? this.$route.query.title.substring(lastIndex + 1) : null;
+            if (this.supportWordFile.includes(this.editorConfig.document.fileType)) {
+                this.editorConfig.documentType = "word";
+            }
+            if (this.supportCellFile.includes(this.editorConfig.document.fileType)) {
+                this.editorConfig.documentType = "cell";
+            }
+            if (this.supportSlideFile.includes(this.editorConfig.document.fileType)) {
+                this.editorConfig.documentType = "slide";
+            }
+            if (this.supportPdfFile.includes(this.editorConfig.document.fileType)) {
+                // 巨坑,官方文档写的编辑器类型可以是pdf,但是实测docker最新镜像documentType设置pdf会报错提示不受支持的类型
+                // this.editorConfig.documentType = "pdf";
+                this.editorConfig.documentType = "word";
+            }
+            console.log(this.editorConfig)
+        }
+    }
+}
+</script>
+<style>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+div {
+    width: 100%;
+    height: 100%;
+}
+</style>

src/router/index.js

@@ -71,6 +71,11 @@ VueRouter.prototype.push = function push(location, onResolve, onReject) {
       path: '/document/window',
       component: () => import('@/components/DocumentWindow')
     },
+    // only office文档预览地址
+    {
+      path: '/office/view/window',
+      component: () => import('@/components/OnlyOffice/officeFileView')
+    },
     {
       path: '/prod/validate',
       component: () => import('@/views/mobile/prodValidate/index'),

src/styles/element-ui.scss

@@ -92,10 +92,10 @@
   color: #FFFFFF;
   //border-right: 0;
 }
-.el-table tbody tr:hover>td {
-  background: rgba(0, 158, 250, 0.219) !important;
-  color: #606266;
-}
+// .el-table tbody tr:hover>td {
+//   background: rgba(0, 158, 250, 0.219) !important;
+//   color: #606266;
+// }
 .el-table th.gutter{
   display: table-cell!important;
 }

src/views/assets/orderDetail.vue

@@ -414,8 +414,6 @@
               :header-row-style="{ color: '#333333' }" border takeNumberItems style="width: 100%; margin-top:20px">
               <el-table-column type="selection" width="55" :selectable="selectable">
               </el-table-column>
-              <!-- <el-table-column prop="id" label="id" width="80" align="center">
-              </el-table-column> -->
               <el-table-column width="220" prop="statementNo" label="意见书号" align="center" show-overflow-tooltip>
                 <template slot-scope="scope">
                   <el-tag type='success' v-if="scope.row.statementNo">
@@ -484,7 +482,8 @@
                   </el-button>
                   <el-button v-if="currentNode.nodeCode === 'SPOT_RECONNAISSANCE_DETERMINE_PRICE'" type="text"
                     size="small" @click="assetsTargetDelete(scope.row.id)">删除</el-button>
-                  <el-button v-if="(currentNode.nodeCode === 'REVIEW_STATEMENT' || currentNode.nodeCode === 'CHECK_REPORT') && !disabledStatus"
+                  <el-button
+                    v-if="(currentNode.nodeCode === 'REVIEW_STATEMENT' || currentNode.nodeCode === 'CHECK_REPORT') && !disabledStatus"
                     type="text" size="small" @click="openCheckValueDialog(scope.row.id);">审核定价</el-button>
                 </template>
               </el-table-column>
@@ -527,113 +526,11 @@
                 </span>
               </span>
             </div>
-            <!-- <el-table ref="multipleTable" :data="assetsProductionData" stripe :header-row-style="{ color: '#333333' }"
-              border takeNumberItems style="width: 100%; margin-top:20px">
-              <el-table-column prop="id" label="id" width="80" align="center">
-              </el-table-column>
-              <el-table-column width="200" prop="productionNo" label="产品号" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="productionType" label="产品类型" align="center" show-overflow-tooltip>
-                <template slot-scope="{row}">
-                  <span v-if="row.productionType === 'STATEMENT'">价值意见书</span>
-                  <span v-if="row.productionType == 'LETTER'">意见函</span>
-                  <span v-if="row.productionType == 'CONSULT'">咨询报告</span>
-                  <span v-if="row.productionType == 'REPORT'">评估报告</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="clientName" label="委托方名称" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="clientTel" label="委托方电话" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="valuationBasisDate" label="评估基准日" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="evaluateAcreage" label="评估面积" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="evaluatePrice" label="评估单价" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="evaluateAmount" label="评估总价" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="owner" label="产权人" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="printCount" label="产品打印数量" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="createProductionDate" label="产品出具日期" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="comment" label="特殊情况说明" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="repertoryState" label="库存状态" align="center" show-overflow-tooltip>
-                <template slot-scope="{row}">
-                  <span v-if="row.repertoryState === null">未入库</span>
-                  <span v-if="row.repertoryState === true">已出库</span>
-                  <span v-if="row.repertoryState === false">已入库</span>
-                </template>
-              </el-table-column>
-              <el-table-column prop="repertoryInTime" label="入库时间" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="repertoryOutTime" label="出库时间" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="saveFileDate" label="归档日期" align="center" show-overflow-tooltip>
-              </el-table-column>
-              <el-table-column prop="delivery" label="送达状态" align="center" show-overflow-tooltip>
-                <template slot-scope="{row}">
-                  <span v-if="!row.delivery">未送达</span>
-                  <span v-if="row.delivery">已送达</span>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" align="center" width="180" fixed="right">
-                <template slot-scope="scope">
-                  <el-button type="text" size="small"
-                    @click="openWriteProductionDialog(true, 'detail'), getAssetsProductionDetail(scope.row.id)">
-                    查看
-                  </el-button>
-                  <el-button v-if="currentNode.nodeCode === 'REVIEW_STATEMENT'" type="text" size="small"
-                    @click="openWriteProductionDialog(false, 'edit'), getAssetsProductionDetail(scope.row.id)">
-                    编辑
-                  </el-button>
-                  <el-button
-                    v-if="currentNode.nodeCode === 'REVIEW_STATEMENT' && scope.row.productionType === 'STATEMENT'"
-                    type="text" size="small"
-                    @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
-                    审核意见书
-                  </el-button>
-                  <el-button
-                    v-if="currentNode.nodeCode === 'REEXAMINE_STATEMENT' && scope.row.productionType === 'STATEMENT'"
-                    type="text" size="small"
-                    @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
-                    复审意见书
-                  </el-button>
-                  <el-button v-if="currentNode.nodeCode === 'CHECK_REPORT' && scope.row.productionType !== 'STATEMENT'"
-                    type="text" size="small"
-                    @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
-                    审核报告
-                  </el-button>
-                  <el-button v-if="currentNode.nodeCode === 'RECHECK_REPORT' && scope.row.productionType !== 'STATEMENT'"
-                    type="text" size="small"
-                    @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
-                    复审报告
-                  </el-button>
-                  <el-button
-                    v-if="currentNode.nodeCode === 'FOURTH_CHECK_REPORT' && scope.row.productionType !== 'STATEMENT'"
-                    type="text" size="small"
-                    @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
-                    四审报告
-                  </el-button>
-                  <el-button
-                    v-if="(currentNode.nodeCode === 'STATEMENT_IN' || currentNode.nodeCode === 'REPORT_IN') && scope.row.repertoryState === null"
-                    type="text" size="small" @click="openWareHouseDialog(scope.row);">产品入库</el-button>
-                  <el-button
-                    v-if="(currentNode.nodeCode === 'STATEMENT_OUT' || currentNode.nodeCode === 'REPORT_OUT') && scope.row.repertoryState === false"
-                    type="text" size="small" @click="openWareHouseDialog(scope.row);">产品出库</el-button>
-                </template>
-              </el-table-column>
-            </el-table> -->
             <el-table :data="assetsProductionData" stripe :header-row-style="{ color: '#333333' }" border takeNumberItems
               style="width: 100%; margin-top:20px">
               <el-table-column type="expand">
                 <template slot-scope="props">
                   <el-form label-position="left">
-                    <!-- <el-tag style="margin-left: 20px;" effect="plain" size="medium" disable-transitions><span
-                        style="font-size:16px">基本信息</span></el-tag> -->
                     <el-row class="row-style">
                       <el-col :xs="24" :sm="12" :lg="6" :span="6" class="postInfo-container-item">
                         <el-form-item label-width="150px" label="委托方名称：">
@@ -688,9 +585,9 @@
                     <el-row class="row-style">
                       <el-col :xs="24" :sm="12" :lg="6" :span="6" class="postInfo-container-item">
                         <el-form-item label-width="150px" label="资料附件：">
-                          <el-link type="primary" v-for="file in props.row.filePath" :key="file.name" :href="file.url">
-                            {{ file.name }}
-                          </el-link>
+                          <span type="primary" v-for="file in props.row.filePath" :key="file.name">
+                            <el-link @click="officeFileView(file.name, file.url)">{{ file.name }}</el-link>
+                          </span>
                         </el-form-item>
                       </el-col>
                     </el-row>
@@ -709,19 +606,9 @@
                         </el-form-item>
                       </el-col>
                     </el-row>
-                    <!-- <el-tag style="margin-left: 20px;" effect="plain" size="medium" disable-transitions><span
-                        style="font-size:16px">库存状态</span></el-tag>
-                    <el-steps :active="props.row.repertoryState == null ? 0 : (props.row.repertoryState ? 2 : 1)"
-                      process-status="success" finish-status="success" simple style="margin: 10px 1% 20px 40px">
-                      <el-step title="未入库"></el-step>
-                      <el-step title="已入库"></el-step>
-                      <el-step title="已出库"></el-step>
-                    </el-steps> -->
                   </el-form>
                 </template>
               </el-table-column>
-              <!-- <el-table-column prop="id" label="id" width="120" align="center">
-              </el-table-column> -->
               <el-table-column prop="productionNo" label="产品号" align="center" show-overflow-tooltip>
                 <template slot-scope="{row}">
                   <el-tag type="success"><span>{{ row.productionNo }}</span></el-tag>
@@ -751,7 +638,7 @@
                     查看
                   </el-button>
                   <el-button
-                    v-if="(currentNode.nodeCode === 'REVIEW_STATEMENT' || (currentNode.nodeCode === 'GENERATE_STATEMENT' && scope.row.productionType === 'STATEMENT') || (currentNode.nodeCode === 'WRITE_REPORT' && scope.row.productionType !== 'STATEMENT'))  && !disabledStatus"
+                    v-if="(currentNode.nodeCode === 'REVIEW_STATEMENT' || (currentNode.nodeCode === 'GENERATE_STATEMENT' && scope.row.productionType === 'STATEMENT') || (currentNode.nodeCode === 'WRITE_REPORT' && scope.row.productionType !== 'STATEMENT')) && !disabledStatus"
                     type="text" size="small"
                     @click="openWriteProductionDialog(false, 'edit'), getAssetsProductionDetail(scope.row.id)">
                     编辑
@@ -768,12 +655,14 @@
                     @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
                     复审意见书
                   </el-button>
-                  <el-button v-if="currentNode.nodeCode === 'CHECK_REPORT' && scope.row.productionType !== 'STATEMENT' && !disabledStatus"
+                  <el-button
+                    v-if="currentNode.nodeCode === 'CHECK_REPORT' && scope.row.productionType !== 'STATEMENT' && !disabledStatus"
                     type="text" size="small"
                     @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
                     审核报告
                   </el-button>
-                  <el-button v-if="currentNode.nodeCode === 'RECHECK_REPORT' && scope.row.productionType !== 'STATEMENT' && !disabledStatus"
+                  <el-button
+                    v-if="currentNode.nodeCode === 'RECHECK_REPORT' && scope.row.productionType !== 'STATEMENT' && !disabledStatus"
                     type="text" size="small"
                     @click="productionPerformanceForm.productionId = scope.row.id, openProductionCheckDialog()">
                     复审报告
@@ -902,9 +791,8 @@
           </el-row>
           <el-row class="row-style">
             <el-col :xs="24" :sm="12" :lg="12" :span="6">
-                        <el-form-item label=" 产权持有人：" prop="theHolder" label-width="200px"
-              class="postInfo-container-item">
-              <el-input v-model="targetForm.theHolder" class="filter-item" style="width: 100%" />
+              <el-form-item label=" 产权持有人：" prop="theHolder" label-width="200px" class="postInfo-container-item">
+                <el-input v-model="targetForm.theHolder" class="filter-item" style="width: 100%" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -2459,9 +2347,9 @@ export default {
     handleExceed() {
       this.$message.warning(`当前限制选择 3个文件！`);
     },
-    // 打开Windows文件选择器
     handleAttachmentPreview(file) {
-      window.open(file.url)
+      // window.open(file.url)
+      this.officeFileView(file.name,file.response.data.url);
     },
     // 移除文件
     beforeRemove(file, fileList) {
@@ -3532,6 +3420,20 @@ export default {
           });
         }
       })
+    },
+    // 文档预览
+    officeFileView(name, url) {
+      const route = this.$router.resolve({
+        path: "/office/view/window",
+        query: {
+          // 文档标题
+          title: name,
+          // 文档url地址
+          url: url
+        }
+      });
+      // 在新窗口打开页面
+      window.open(route.href, "_blank");
     }
   }
 

src/views/major/todoDetail.vue

@@ -2806,7 +2806,8 @@ export default {
       this.$message.warning(`当前限制选择 3个文件，本次选择了 ${files.length} 个文件`);
     },
     handleAttachmentPreview(file) {
-      window.open(file.url)
+      // window.open(file.url)
+      this.officeFileView(file.name,file.response.data.url);
     },
     beforeRemove(file, fileList) {
       let index = fileList[0].index;
@@ -3486,6 +3487,20 @@ export default {
           this.productionFinance = res.data;
         }
       })
+    },
+    // 文档预览
+    officeFileView(name, url) {
+      const route = this.$router.resolve({
+        path: "/office/view/window",
+        query: {
+          // 文档标题
+          title: name,
+          // 文档url地址
+          url: url
+        }
+      });
+      // 在新窗口打开页面
+      window.open(route.href, "_blank");
     }
   },
 }

src/views/personal/todoDetail.vue

@@ -2111,7 +2111,8 @@ export default {
       this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件`);
     },
     handleAttachmentPreview(file) {
-      window.open(file.url)
+      // window.open(file.url)
+      this.officeFileView(file.name,file.response.data.url);
     },
     handleRemoveFile(file, fileList) {
       this.$confirm('请确认是否移除已存在的报告?', '提示', {
@@ -2429,6 +2430,20 @@ export default {
         })
       })
      
+    },
+    // 文档预览
+    officeFileView(name, url) {
+      const route = this.$router.resolve({
+        path: "/office/view/window",
+        query: {
+          // 文档标题
+          title: name,
+          // 文档url地址
+          url: url
+        }
+      });
+      // 在新窗口打开页面
+      window.open(route.href, "_blank");
     }
   }
 }