<script lang="ts" setup>
|
import type { DmsCompareSession } from '#/api/x/dms/compare';
|
|
import { nextTick, onMounted, onUnmounted, ref } from 'vue';
|
|
import { Spin } from 'ant-design-vue';
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { loadDocsApi } from '#/components/OnlyOfficeEditor/src/loadDocsApi';
|
|
const props = defineProps<{ session: DmsCompareSession }>();
|
const emit = defineEmits<{ close: [] }>();
|
const containerId = `onlyoffice-compare-${uuidv4()}`;
|
const loading = ref(true);
|
const error = ref('');
|
let editor: any;
|
let disposed = false;
|
let timer: ReturnType<typeof setTimeout> | undefined;
|
|
onMounted(async () => {
|
timer = setTimeout(() => {
|
if (loading.value) error.value = '文档加载超时，请关闭窗口后重新比较';
|
}, 90_000);
|
try {
|
const config = props.session.config;
|
if (config.editorConfig?.mode !== 'view' || config.document?.permissions?.edit !== false || config.document?.permissions?.review !== false) {
|
throw new Error('比较窗口仅允许只读查看，请更新服务后重试');
|
}
|
if (Date.now() >= props.session.expiresAt) throw new Error('比较会话已过期，请关闭窗口后重新选择版本');
|
await loadDocsApi();
|
await nextTick();
|
if (disposed) return;
|
editor = new (window as any).DocsAPI.DocEditor(containerId, {
|
...props.session.config,
|
events: {
|
onDocumentReady() {
|
if (disposed) return;
|
loading.value = false;
|
clearTimeout(timer);
|
},
|
onError(event: { data?: { errorDescription?: string } }) {
|
if (disposed) return;
|
error.value = event.data?.errorDescription || '文档比较失败，请关闭窗口后重试';
|
loading.value = false;
|
clearTimeout(timer);
|
},
|
onRequestClose() {
|
emit('close');
|
},
|
},
|
});
|
} catch (error_) {
|
if (!disposed) {
|
loading.value = false;
|
error.value = error_ instanceof Error ? error_.message : '比较窗口加载失败';
|
}
|
clearTimeout(timer);
|
}
|
});
|
|
onUnmounted(() => {
|
disposed = true;
|
clearTimeout(timer);
|
editor?.destroyEditor();
|
editor = undefined;
|
});
|
</script>
|
|
<template>
|
<div class="compare-editor">
|
<a-alert v-if="error" type="error" show-icon :message="error" class="compare-editor__error" />
|
<div v-if="loading && !error" class="compare-editor__loading"><Spin size="large" tip="正在加载比较文档…" /></div>
|
<div :id="containerId" class="compare-editor__frame"></div>
|
</div>
|
</template>
|
|
<style scoped>
|
.compare-editor {
|
position: relative;
|
height: 100%;
|
min-height: 0;
|
}
|
.compare-editor__frame {
|
width: 100%;
|
height: 100%;
|
}
|
.compare-editor__loading {
|
position: absolute;
|
inset: 0;
|
display: grid;
|
place-items: center;
|
background: white;
|
z-index: 1;
|
}
|
.compare-editor__error {
|
position: absolute;
|
top: 12px;
|
left: 12px;
|
right: 12px;
|
z-index: 2;
|
}
|
</style>
|
