<template>
|
<div class="document-preview-page" v-loading="loading">
|
<DocumentEditor
|
v-if="config"
|
id="inspectionReportOfficeEditor"
|
:documentServerUrl="documentServerUrl"
|
:config="config"
|
height="100%"
|
width="100%"
|
:events_onAppReady="onAppReady"
|
:events_onDocumentReady="onDocumentReady"
|
:events_onDocumentStateChange="onDocumentStateChange"
|
:events_onWarning="onWarning"
|
:events_onError="onError"
|
:onLoadComponentError="onLoadComponentError"
|
/>
|
<el-empty v-else-if="!loading" :description="errorMessage || '缺少文档配置'" />
|
</div>
|
</template>
|
|
<script setup>
|
import { computed, ref, watch } from 'vue'
|
import { useRoute } from 'vue-router'
|
import { ElMessage } from 'element-plus'
|
import { DocumentEditor } from '@onlyoffice/document-editor-vue'
|
import { getOnlyOfficeConfigApi } from '@/api/documentPreview'
|
|
const route = useRoute()
|
const documentServerUrl = import.meta.env.VITE_APP_ONLYOFFICE_DOCUMENT_SERVER_URL
|
const attachId = computed(() => String(route.query.attachId || ''))
|
const mode = computed(() => String(route.query.mode || ''))
|
|
const config = ref(null)
|
const loading = ref(false)
|
const errorMessage = ref('')
|
|
async function getOnlyOfficeConfig() {
|
if (!attachId.value) {
|
config.value = null
|
errorMessage.value = '缺少附件ID'
|
return
|
}
|
|
loading.value = true
|
errorMessage.value = ''
|
|
try {
|
const res = await getOnlyOfficeConfigApi({
|
attachId: attachId.value,
|
mode: mode.value,
|
})
|
const data = res?.data?.data || res?.data
|
if (!data?.document || !data?.editorConfig) {
|
throw new Error('OnlyOffice配置不完整')
|
}
|
config.value = data
|
} catch (error) {
|
console.error('获取OnlyOffice配置失败:', error)
|
config.value = null
|
errorMessage.value = '获取文档配置失败'
|
ElMessage.error(error?.message || '获取文档配置失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
|
watch(attachId, getOnlyOfficeConfig, {
|
immediate: true,
|
})
|
|
function onAppReady(event) {
|
console.log('OnlyOffice app ready:', event)
|
}
|
|
function onDocumentReady(event) {
|
console.log('OnlyOffice document ready:', event)
|
}
|
|
function onDocumentStateChange(event) {
|
console.log('OnlyOffice document state change:', event)
|
}
|
|
function onWarning(event) {
|
console.warn('OnlyOffice warning:', event)
|
}
|
|
function onError(event) {
|
console.error('OnlyOffice error:', event)
|
}
|
|
function onLoadComponentError(errorCode, errorDescription) {
|
console.error('OnlyOffice load error:', errorCode, errorDescription)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.document-preview-page {
|
height: 100vh;
|
min-height: 0;
|
width: 100vw;
|
overflow: hidden;
|
}
|
</style>
|
