108 lines
3.0 KiB
Vue
108 lines
3.0 KiB
Vue
<template>
|
|
<div style="width: 100%; height: 100%">
|
|
<div id="placeholder"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice";
|
|
import { setToken } from "@/utils/auth";
|
|
import store from "@/store";
|
|
import axios from "axios";
|
|
export default {
|
|
props: [],
|
|
data() {
|
|
return {
|
|
config: {},
|
|
flag: 0,
|
|
userId: store.getters.userId,
|
|
websock: null,
|
|
};
|
|
},
|
|
destroyed() {
|
|
//页面销毁时关闭ws连接
|
|
if (this.websock) {
|
|
this.websock.close(); // 关闭websocket
|
|
}
|
|
},
|
|
methods: {
|
|
getConfig(id) {
|
|
let edit = "edit";
|
|
if (this.flag == 0) {
|
|
edit = "view";
|
|
} else {
|
|
edit = "edit";
|
|
}
|
|
axios
|
|
.get(
|
|
`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true/zhongcai`
|
|
)
|
|
.then((res) => {
|
|
this.config = res.data;
|
|
this.config.editorConfig.callbackUrl = this.config.editorConfig.callbackUrl + "/" + id;
|
|
// this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
|
|
var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
|
|
});
|
|
},
|
|
//初始化weosocket
|
|
initWebSocket() {
|
|
if (typeof WebSocket === "undefined") {
|
|
alert("您的浏览器不支持WebSocket");
|
|
return false;
|
|
}
|
|
const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}`; // websocket地址
|
|
this.websock = new WebSocket(wsuri);
|
|
this.websock.onopen = this.websocketonopen;
|
|
this.websock.onmessage = this.websocketonmessage;
|
|
this.websock.onerror = this.websocketonerror;
|
|
this.websock.onclose = this.websocketclose;
|
|
},
|
|
//连接成功
|
|
websocketonopen() {
|
|
console.log("WebSocket连接成功");
|
|
},
|
|
//接收后端返回的数据
|
|
websocketonmessage(e) {
|
|
let dataJson = e.data;
|
|
if (dataJson != "conn_success") {
|
|
dataJson = JSON.parse(dataJson);
|
|
}
|
|
if (dataJson.caseId) {
|
|
saveOnlyOfficeFile({
|
|
caseAppliId: Number(dataJson.caseId),
|
|
annexName: dataJson.fileName,
|
|
annexPath: dataJson.filePath,
|
|
onlyOfficeFileId: dataJson.fileId,
|
|
}).then((res) => {
|
|
this.websock.send();
|
|
});
|
|
}
|
|
// 在这里使用后端返回的数据，对数据进行处理渲染
|
|
},
|
|
//连接建立失败重连
|
|
websocketonerror(e) {
|
|
console.log(`连接失败的信息：`, e);
|
|
this.initWebSocket(); // 连接失败后尝试重新连接
|
|
},
|
|
//关闭连接
|
|
websocketclose(e) {
|
|
console.log("断开连接", e);
|
|
},
|
|
/**是否从视频会议跳转，是处理token */
|
|
async getToken() {
|
|
setToken(this.$route.query.token);
|
|
},
|
|
},
|
|
async mounted() {
|
|
if (this.$route.query.token) {
|
|
await this.getToken();
|
|
}
|
|
let id = this.$route.query.id;
|
|
this.flag = this.$route.query.flag;
|
|
this.getConfig(id);
|
|
this.initWebSocket();
|
|
},
|
|
watch: {},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style> |