Front_Team/SPDM
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update:onlyOffice

Browse Source
This commit is contained in:
lijing1
2025-12-31 10:44:44 +08:00
parent 0dba706781
commit 0015cb1303
10 changed files with 115 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.env.development
View File

@@ -8,6 +8,12 @@ VITE_API_WS_URL=ws://192.168.65.161:7100
VITE_API_IMAGE_PREVIEW_URL=http://192.168.65.161:7104
VITE_API_FILE_PREVIEW_URL=http://192.168.65.161:3000/preview/onlinePreview
VITE_API_FILE_URL=http://192.168.65.161:7104
# onlyOffice服务
VITE_API_ONLYOFFICE_URL=http://192.168.65.161:18888
# onlyOffice回调服务
VITE_API_ONLYOFFICE_CALLBACK=http://192.168.65.161:3000/api/simulation/data/data/onlyOfficeCallback
# 基线地址，用于onlyOffice预览
VITE_API_SPDM_URL=http://192.168.65.64:3001/spdm
VITE_API_PREFIX_APPROVE=/
VITE_API_PREFIX_CAPABILITY=/local7107/

6
.env.production
View File

@@ -8,6 +8,12 @@ VITE_API_WS_URL=ws://192.168.190.161:7100
VITE_API_IMAGE_PREVIEW_URL=http://192.168.190.161:7104
VITE_API_FILE_PREVIEW_URL=http://192.168.190.161:3000/preview/onlinePreview
VITE_API_FILE_URL=http://192.168.190.161:7104
# onlyOffice服务
VITE_API_ONLYOFFICE_URL=http://192.168.65.161:18888
# onlyOffice回调服务
VITE_API_ONLYOFFICE_CALLBACK=http://192.168.65.161:3000/api/simulation/data/data/onlyOfficeCallback
# 基线地址，用于onlyOffice预览
VITE_API_SPDM_URL=http://192.168.190.161:3000/spdm
VITE_API_PREFIX_APPROVE=/approve/
VITE_API_PREFIX_CAPABILITY=/capability/

6
.env.test
View File

@@ -8,6 +8,12 @@ VITE_API_WS_URL=ws://192.168.65.161:7100
VITE_API_IMAGE_PREVIEW_URL=http://192.168.65.161:7104
VITE_API_FILE_PREVIEW_URL=http://192.168.65.161:3000/preview/onlinePreview
VITE_API_FILE_URL=http://192.168.65.161:7104
# onlyOffice服务
VITE_API_ONLYOFFICE_URL=http://192.168.65.161:18888
# onlyOffice回调服务
VITE_API_ONLYOFFICE_CALLBACK=http://192.168.65.161:3000/api/simulation/data/data/onlyOfficeCallback
# 基线地址，用于onlyOffice预览
VITE_API_SPDM_URL=http://192.168.65.161:3000/spdm
VITE_API_PREFIX_APPROVE=/approve/
VITE_API_PREFIX_CAPABILITY=/capability/

1
package.json
View File

@@ -34,6 +34,7 @@
"@antv/x6-plugin-transform": "^2.1.8",
"@antv/x6-vue-shape": "^2.1.2",
"@element-plus/icons-vue": "^2.3.2",
"@onlyoffice/document-editor-vue": "^1.6.1",
"axios": "^1.11.0",
"chinese-workday": "^1.10.0",
"dayjs": "^1.11.18",

44
src/components/common/filePreview/index.vue
View File

@@ -2,11 +2,14 @@
<div>
<Dialog v-model="diaVisible" diaTitle="预览文件" width="70%" height="90%" @close="closeFun">
<template v-if="diaVisible">
<div v-if="url && type === 'default'" class="content">
<div v-if="url && type === 'kkFile'" class="content">
<iframe class="iframe" :src="url" />
</div>
<div v-if="fileId && type === 'edit'" class="content">
<OnlyOffiece :fileId="fileId" />
<div v-if="fileId && type === 'onlyOffice'" class="content">
<iframe
class="iframe"
:src="`${env.VITE_API_SPDM_URL}/onlyOffice?fileId=${fileId}&fileData=${fileData}&fileKey=${fileKey}`"
/>
</div>
</template>
</Dialog>
@@ -15,9 +18,9 @@
<script setup lang="ts">
import { ref, watch } from 'vue';
import { getKKFileViewURLFromMinioApi } from '@/api/data/data';
import { getKKFileViewURLFromMinioApi, downloadFileForEditApi } from '@/api/data/data';
import { getUserId } from '@/utils/user';
import Dialog from '@/components/common/dialog/index.vue';
import OnlyOffiece from '@/components/common/onlyOffice/index.vue';
interface Props {
modelValue: boolean;
@@ -28,12 +31,14 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
fileId: 0,
type: 'default', // default默认 edit启动onlyOffice
type: 'onlyOffice', // kkFile onlyOffice
});
const env = import.meta.env;
const diaVisible = ref(false);
const url = ref('');
const fileData = ref<any>('');
const fileKey = ref('fileKey');
const emit = defineEmits(['update:modelValue']);
@@ -43,12 +48,23 @@ watch(
url.value = '';
diaVisible.value = val;
if (val) {
getPreviewUrlFun();
initFun();
}
}
);
const getPreviewUrlFun = () => {
const initFun = () => {
if (!props.fileId) {
return;
}
if (props.type === 'kkFile') {
getKkFileUrlFun();
} else {
getOnlyOfficeFun();
}
};
const getKkFileUrlFun = () => {
const params = {
fileId: props.fileId,
};
@@ -59,6 +75,18 @@ const getPreviewUrlFun = () => {
});
};
const getOnlyOfficeFun = () => {
const params = {
fileId: props.fileId,
};
downloadFileForEditApi(params).then((res: any) => {
if (res.code === 200) {
fileData.value = JSON.stringify(res.data);
fileKey.value = `${props.fileId}_${getUserId()}`;
}
});
};
const closeFun = () => {
emit('update:modelValue', false);
};

58
src/components/common/onlyOffice/index.vue
View File

@@ -1,45 +1,44 @@
<template>
<div class="comp-only-office">
<div id="fileEdit"></div>
<DocumentEditor
v-if="config"
id="fileEdit"
:documentServerUrl="env.VITE_API_ONLYOFFICE_URL"
:config="config"
:events_onDocumentReady="loadedFun"
:onLoadComponentError="errorFun"
/>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
import { downloadFileForEditApi } from '@/api/data/data';
import { getUserId } from '@/utils/user';
import { onMounted, ref } from 'vue';
import { DocumentEditor } from '@onlyoffice/document-editor-vue';
const env = import.meta.env;
// 支持DOCX XLSX PPTX PDF
interface Props {
fileId: any;
fileData: any;
fileKey: any;
}
const props = withDefaults(defineProps<Props>(), {
fileId: '',
fileData: {},
fileKey: '',
});
const win: any = window;
let fileData: any = {};
const config = ref<any>(null);
onMounted(() => {
initFun();
});
const initFun = () => {
const params = {
fileId: props.fileId,
};
downloadFileForEditApi(params).then((res: any) => {
if (res.code === 200) {
fileData = res.data;
editFun();
}
});
};
const editFun = () => {
const { url, fileType, fileName } = fileData;
new win.DocsAPI.DocEditor('fileEdit', {
const { url, fileType, fileName } = props.fileData;
config.value = {
type: 'desktop', // 桌面模式
width: '100%',
height: '100%',
@@ -47,7 +46,7 @@ const editFun = () => {
title: fileName,
url: url, // 文件地址
fileType: fileType,
key: `${props.fileId}_${getUserId()}`,
key: props.fileKey,
permissions: {
// 操作权限
download: true,
@@ -58,7 +57,7 @@ const editFun = () => {
},
editorConfig: {
lang: 'zh-CN', // 语言
callbackUrl: 'http://192.168.65.199:7104/data/onlyOfficeCallback', // 保持回调地址
callbackUrl: env.VITE_API_ONLYOFFICE_CALLBACK, // 保持回调地址
customization: {
anonymous: {
request: false, // 不允许匿名编辑
@@ -67,7 +66,15 @@ const editFun = () => {
forcesave: true, // 强制保存
},
},
});
};
};
const loadedFun = () => {
console.log('文件加载完成');
};
const errorFun = () => {
console.log('文件加载失败');
};
</script>
@@ -75,10 +82,5 @@ const editFun = () => {
.comp-only-office {
width: 100%;
height: 100%;
#fileEdit {
width: 100%;
height: 100%;
background-color: #aaa;
}
}
</style>

5
src/router/index.ts
View File

@@ -21,6 +21,11 @@ const router = createRouter({
},
],
},
{
path: '/onlyOffice',
name: 'OnlyOffice',
component: () => import('@/views/index/onlyOffice.vue'),
},
{
path: '/',
component: window?.__POWERED_BY_WUJIE__ ? CidLayout : DefaultLayout,

3
src/views/data/overview/index.vue
View File

@@ -471,6 +471,9 @@ const editFun = () => {
};
getTaskDetailApi(params).then((res: any) => {
if (res.code === 200) {
if (res.data.beginTime && res.data.endTime) {
res.data.planTime = [res.data.beginTime, res.data.endTime];
}
editData.value = res.data;
}
modalVisible.value = true;

15
src/views/index/onlyOffice.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<OnlyOffiece :fileData="fileData" :fileId="fileId" :fileKey="fileKey" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import OnlyOffiece from '@/components/common/onlyOffice/index.vue';
const route = useRoute();
const data: any = route.query.fileData || '{}';
const fileId = ref(route.query.fileId);
const fileKey = ref(route.query.fileKey);
const fileData = ref(JSON.parse(data));
</script>

7
yarn.lock
View File

@@ -927,6 +927,13 @@
"@nodelib/fs.scandir" "2.1.5"
fastq "^1.6.0"
"@onlyoffice/document-editor-vue@^1.6.1":
version "1.6.1"
resolved "https://registry.yarnpkg.com/@onlyoffice/document-editor-vue/-/document-editor-vue-1.6.1.tgz#e1daec9354f7a5a2a8176a6b028e4540814d9a52"
integrity sha512-sdU7h684ESSdXvGNDcMf73UmToiZGMVO5QRIazTmGfm+bKOnT5ildomeagYFdnQaHQH0J28EJqc4jqXOcQbicA==
dependencies:
lodash "^4.17.21"
"@parcel/watcher-android-arm64@2.5.1":
version "2.5.1"
resolved "https://registry.yarnpkg.com/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz#507f836d7e2042f798c7d07ad19c3546f9848ac1"