文件预览

src/views/common/FileOrImageDisplay.vue

@@ -32,32 +32,28 @@
 
             <!-- 空状态 -->
             <span v-else class="empty-text">--</span>
-            <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
+            <!-- <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
                 <OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle"
                     :document-key="documentKey" :mode="mode" :type="type" @document-ready="handleDocumentReady"
                     @app-ready="handleAppReady" @error="handleError" @initialized="handleInitialized" :force-save="true"
                     :save-timeout="15000" />
-            </el-dialog>
+            </el-dialog> -->
-
+            <ViewFile v-if="dialogVisible" :file="fileData" @closeDialog="handleCloseDialog" />
         </div>
     </div>
 </template>
 
 <script>
-import OnlyOfficeViewer from './OnlyOfficeViewer';
+import ViewFile from './ViewFile';
 export default {
     name: 'FileOrImageDisplay',
     components: {
-        OnlyOfficeViewer
+        ViewFile
     },
     data() {
         return {
             dialogVisible: false,
-            documentUrl: '',
+            fileData: {},
-            documentTitle: '',
-            documentKey: '',
-            mode: 'view',
-            type: 'desktop',
         }
     },
     props: {
@@ -141,9 +137,9 @@ export default {
     methods: {
         // 文件点击事件
         handleFileClick() {
-            this.documentUrl = this.file.filePath
+            console.log(this.file);
-            this.documentTitle = this.file.name
+            
-            this.documentKey = this.file.id + ''
+            this.fileData = this.file
             this.dialogVisible = true
         },
         // 图片点击事件
@@ -162,6 +158,10 @@ export default {
         handleInitialized() {
             console.log('初始化完成')
         },
+        handleCloseDialog() {
+            this.dialogVisible = false
+            this.fileData = {}
+        },
     }
 }
 </script>
@@ -278,20 +278,5 @@ export default {
     }
 }
 
-.preview-dialog ::v-deep .el-dialog {
-    height: 88vh;
-    display: flex;
-    flex-direction: column;
-}
 
-.preview-dialog ::v-deep .el-dialog__body {
-    flex: 1;
-    padding: 0;
-    height: 0;
-    /* 重要：让flex布局生效 */
-}
-
-.preview-dialog ::v-deep .onlyoffice-container {
-    height: 100%;
-}
 </style>

src/views/common/ViewFile.vue

@@ -23,7 +23,7 @@ export default {
             dialogVisible: true,
             documentUrl: this.file.filePath,    
             documentTitle: this.file.fileName,
-            documentKey: this.file.sourceId + '',
+            documentKey: (this.file?.sourceId || this.file?.id || '') + '',
             mode: 'view',
             type: 'desktop',
         }

src/views/enterpriseLibrary/personnel/components/child/OtherInfoDetail.vue

@@ -104,7 +104,8 @@ export default {
                     name: item.fileName,
                     filePath: item.filePath,
                     lsFilePath: item.lsFilePath,
-                    fileType: item.fileType
+                    fileType: item.fileType,
+                    id: item.sourceId
                 }));
             }
 

src/views/enterpriseLibrary/technical/components/RightTable.vue

@@ -31,11 +31,12 @@
                 </el-button>
             </template>
         </TableModel>
-        <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
+        <!-- <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" width="50%" class="preview-dialog" title="文件预览">
             <OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle" :document-key="documentKey"
                 :mode="mode" :type="type" @document-ready="handleDocumentReady" @app-ready="handleAppReady"
                 @error="handleError" @initialized="handleInitialized" :force-save="true" :save-timeout="15000" />
-        </el-dialog>
+        </el-dialog> -->
+        <ViewFile v-if="dialogVisible" :file="fileData" @closeDialog="handleCloseDialog" />
     </div>
 </template>
 
@@ -44,13 +45,13 @@ import TableModel from '@/components/TableModel2'
 import { columnsList, formLabel } from './config'
 import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/technical/technical'
 import { encryptWithSM4 } from '@/utils/sm'
-import OnlyOfficeViewer from '@/views/common/OnlyOfficeViewer'
+import ViewFile from '@/views/common/ViewFile'
 
 export default {
     name: 'RightTableTechnical',
     components: {
         TableModel,
-        OnlyOfficeViewer
+        ViewFile
     },
     dicts: ['construction_nature', 'structural_form', 'basic_form'],
     props: {
@@ -69,11 +70,7 @@ export default {
             columnsList,
             listAPI,
             dialogVisible: false,
-            documentUrl: '',
+            fileData: {},
-            documentTitle: '',
-            documentKey: '',
-            mode: 'view',
-            type: 'desktop',
         }
     },
     watch: {
@@ -157,22 +154,17 @@ export default {
         /** 查看文件 */
         viewFile(row) {
             console.log(row);
-            this.documentTitle = row.technicalName
+            this.fileData = {
-            this.documentKey = row.resourceFileVoList?.[0]?.sourceId + ''
+                fileName: row.technicalName,
+                id: row.resourceFileVoList?.[0]?.sourceId + ''
+            }
             this.dialogVisible = true
         },
-        handleDocumentReady() {
+        handleCloseDialog() {
-            console.log('文档已准备就绪')
+            this.dialogVisible = false
-        },
+            this.fileData = {}
-        handleAppReady() {
-            console.log('应用已准备就绪')
-        },
-        handleError(error) {
-            console.log('错误：', error)
-        },
-        handleInitialized() {
-            console.log('初始化完成')
         },
+
         /** 删除操作 */
         handleDelete(raw) {
             this.$confirm(`确定要删除方案名称"${raw.technicalName}"吗？删除后将无法恢复！`, '操作提示', {
@@ -242,21 +234,4 @@ export default {
         margin-right: 0;
     }
 }
-
-.preview-dialog ::v-deep .el-dialog {
-    height: 88vh;
-    display: flex;
-    flex-direction: column;
-}
-
-.preview-dialog ::v-deep .el-dialog__body {
-    flex: 1;
-    padding: 0;
-    height: 0;
-    /* 重要：让flex布局生效 */
-}
-
-.preview-dialog ::v-deep .onlyoffice-container {
-    height: 100%;
-}
 </style>