前端问题修改

src/views/common/FileOrImageDisplay.vue

@@ -11,8 +11,8 @@
 
             <!-- 图片类型 -->
             <div v-else-if="imageUrl" class="image-display" @click="handleImageClick">
-                <el-image :src="imageUrl" :preview-src-list="finalPreviewList" class="license-image"
+                <el-image :src="imageUrl" :preview-src-list="finalPreviewList" class="license-image" fit="cover"
-                    fit="cover" hide-on-click-modal>
+                    hide-on-click-modal>
                     <div slot="error" class="image-error">
                         <i class="el-icon-picture"></i>
                         <span>图片加载失败</span>
@@ -26,13 +26,34 @@
 
             <!-- 空状态 -->
             <span v-else class="empty-text">--</span>
+            <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>
+
         </div>
     </div>
 </template>
 
 <script>
+import OnlyOfficeViewer from './OnlyOfficeViewer';
 export default {
     name: 'FileOrImageDisplay',
+    components: {
+        OnlyOfficeViewer
+    },
+    data() {
+        return {
+            dialogVisible: false,
+            documentUrl: '',
+            documentTitle: '',
+            documentKey: '',
+            mode: 'view',
+            type: 'desktop',
+        }
+    },
     props: {
         // 标签名称
         label: {
@@ -96,15 +117,27 @@ export default {
     methods: {
         // 文件点击事件
         handleFileClick() {
-            /* if (this.filePath) {
+            this.documentUrl = this.file.filePath
-                window.open(this.filePath, '_blank')
+            this.documentTitle = this.file.name
-            }
+            this.documentKey = this.file.id + ''
-            this.$emit('file-click', this.file) */
+            this.dialogVisible = true
         },
         // 图片点击事件
         handleImageClick() {
             this.$emit('image-click', this.imageUrl)
-        }
+        },
+        handleDocumentReady() {
+            console.log('文档已准备就绪')
+        },
+        handleAppReady() {
+            console.log('应用已准备就绪')
+        },
+        handleError(error) {
+            console.log('错误：', error)
+        },
+        handleInitialized() {
+            console.log('初始化完成')
+        },
     }
 }
 </script>
@@ -220,4 +253,21 @@ 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/enterpriseLibrary/personnel/components/child/BasicInfoDetail.vue

@@ -184,7 +184,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

@@ -6,6 +6,9 @@
             <template slot="tableTitle">
                 <h3>数据列表</h3>
             </template>
+            <template slot="technicalName" slot-scope="{ data }">
+                <span style="color: #1F72EA;cursor: pointer;" @click="viewFile(data)">{{ data.technicalName }}</span>
+            </template>
             <template slot="tableActions">
                 <el-button @click="handleAdd" :disabled="disabled" v-hasPermi="['enterpriseLibrary:technical:add']"
                     class="add-btn"><i class="el-icon-plus"></i> 新增</el-button>
@@ -28,6 +31,11 @@
                 </el-button>
             </template>
         </TableModel>
+        <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>
     </div>
 </template>
 
@@ -36,11 +44,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'
 
 export default {
     name: 'RightTableTechnical',
     components: {
         TableModel,
+        OnlyOfficeViewer
     },
     dicts: ['construction_nature', 'structural_form', 'basic_form'],
     props: {
@@ -58,6 +68,12 @@ export default {
             formLabel,
             columnsList,
             listAPI,
+            dialogVisible: false,
+            documentUrl: '',
+            documentTitle: '',
+            documentKey: '',
+            mode: 'view',
+            type: 'desktop',
         }
     },
     watch: {
@@ -138,6 +154,25 @@ export default {
         handleQuery() {
             this.$refs.technicalTableRef.getTableList()
         },
+        /** 查看文件 */
+        viewFile(row) {
+            console.log(row);
+            this.documentTitle = row.technicalName
+            this.documentKey = row.resourceFileVoList?.[0]?.sourceId + ''
+            this.dialogVisible = true
+        },
+        handleDocumentReady() {
+            console.log('文档已准备就绪')
+        },
+        handleAppReady() {
+            console.log('应用已准备就绪')
+        },
+        handleError(error) {
+            console.log('错误：', error)
+        },
+        handleInitialized() {
+            console.log('初始化完成')
+        },
         /** 删除操作 */
         handleDelete(row) {
             this.$confirm(`确定要删除方案类型"${raw.technicalSolutionName}"吗？删除后将无法恢复！`, '操作提示', {
@@ -207,4 +242,21 @@ 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>

src/views/enterpriseLibrary/technical/components/config.js

@@ -33,7 +33,7 @@ export const formLabel = [
 ]
 
 export const columnsList = [
-    { t_props: 'technicalName',t_width: 350, t_label: '方案名称' },
+    { t_slot: 'technicalName',t_width: 350, t_label: '方案名称' },
     { t_props: 'natureConstruction', t_label: '建设性质' },
     { t_props: 'structuralForm', t_label: '结构形式' },
     { t_props: 'basicForm', t_label: '基础形式' },