bonus
/
smart-bid-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

文件预览

This commit is contained in:
cwchen 2025-11-26 17:01:59 +08:00
parent 3f9410c01d
commit 6f77396748
4 changed files with 30 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/common/FileOrImageDisplay.vue
View File

@ -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: '',
documentTitle: '',
documentKey: '',
mode: 'view',
type: 'desktop',
fileData: {},
}
},
props: {
@ -141,9 +137,9 @@ export default {
methods: {
// 文件点击事件
handleFileClick() {
this.documentUrl = this.file.filePath
this.documentTitle = this.file.name
this.documentKey = this.file.id + ''
console.log(this.file);
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>

2
src/views/common/ViewFile.vue
View File

@ -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',
}

3
src/views/enterpriseLibrary/personnel/components/child/OtherInfoDetail.vue
View File

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

53
src/views/enterpriseLibrary/technical/components/RightTable.vue
View File

@ -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: '',
documentTitle: '',
documentKey: '',
mode: 'view',
type: 'desktop',
fileData: {},
}
},
watch: {
@ -157,22 +154,17 @@ export default {
/** 查看文件 */
viewFile(row) {
console.log(row);
this.documentTitle = row.technicalName
this.documentKey = row.resourceFileVoList?.[0]?.sourceId + ''
this.fileData = {
fileName: row.technicalName,
id: row.resourceFileVoList?.[0]?.sourceId + ''
}
this.dialogVisible = true
},
handleDocumentReady() {
console.log('文档已准备就绪')
},
handleAppReady() {
console.log('应用已准备就绪')
},
handleError(error) {
console.log('错误：', error)
},
handleInitialized() {
console.log('初始化完成')
handleCloseDialog() {
this.dialogVisible = false
this.fileData = {}
},
/** 删除操作 */
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>