174 lines
4.3 KiB
Vue
174 lines
4.3 KiB
Vue
<template>
|
||
<div class="component-only-office">
|
||
<div :id="this.id" class="placeholder"></div>
|
||
<div class="office-loading"><Loading v-if="loadIng > 0"/></div>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.component-only-office {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.placeholder {
|
||
flex: 1;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.office-loading {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
</style>
|
||
<script>
|
||
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
name: "OnlyOffice",
|
||
props: {
|
||
id: {
|
||
type: String,
|
||
default: () => {
|
||
return "office_" + Math.round(Math.random() * 10000);
|
||
}
|
||
},
|
||
value: {
|
||
type: [Object, Array],
|
||
default: function () {
|
||
return {}
|
||
}
|
||
},
|
||
},
|
||
|
||
data() {
|
||
return {
|
||
loadIng: 0,
|
||
|
||
fileName: null,
|
||
fileType: null,
|
||
fileUrl: null,
|
||
|
||
docEditor: null,
|
||
}
|
||
},
|
||
|
||
mounted() {
|
||
//
|
||
},
|
||
|
||
beforeDestroy() {
|
||
if (this.docEditor !== null) {
|
||
this.docEditor.destroyEditor();
|
||
this.docEditor = null;
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(['userToken', 'userInfo']),
|
||
},
|
||
|
||
watch: {
|
||
value: {
|
||
handler(val) {
|
||
this.fileUrl = 'http://nginx/api/file/content/?id=' + val.id + '&token=' + this.userToken;
|
||
this.fileType = this.getType(val.type);
|
||
this.fileName = val.name;
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
|
||
fileUrl: {
|
||
handler(url) {
|
||
if (!url) {
|
||
return;
|
||
}
|
||
this.loadIng++;
|
||
$A.loadScript(this.$store.state.method.apiUrl("../office/web-apps/apps/api/documents/api.js"), (e) => {
|
||
this.loadIng--;
|
||
if (e !== null) {
|
||
$A.modalAlert("组件加载失败！");
|
||
return;
|
||
}
|
||
this.loadFile()
|
||
})
|
||
},
|
||
immediate: true,
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
getType(type) {
|
||
switch (type) {
|
||
case 'word':
|
||
return 'docx';
|
||
case 'excel':
|
||
return 'xlsx';
|
||
case 'ppt':
|
||
return 'pptx'
|
||
}
|
||
return '';
|
||
},
|
||
|
||
loadFile() {
|
||
if (!this.fileUrl) {
|
||
return;
|
||
}
|
||
if (this.docEditor !== null) {
|
||
this.docEditor.destroyEditor();
|
||
this.docEditor = null;
|
||
}
|
||
//
|
||
let lang = "zh";
|
||
switch (this.getLanguage()) {
|
||
case 'CN':
|
||
case 'TC':
|
||
lang = "zh";
|
||
break;
|
||
default:
|
||
lang = 'en';
|
||
break;
|
||
}
|
||
//
|
||
const config = {
|
||
"document": {
|
||
"fileType": this.fileType,
|
||
"key": this.fileType + '-' + this.value.id,
|
||
"title": this.fileName + '.' + this.fileType,
|
||
"url": this.fileUrl,
|
||
},
|
||
"editorConfig": {
|
||
"mode": "edit",
|
||
"lang": lang,
|
||
"user": {
|
||
"id": this.userInfo.userid,
|
||
"name": this.userInfo.nickname
|
||
},
|
||
"customization": {
|
||
"uiTheme": "theme-classic-light",
|
||
},
|
||
"callbackUrl": 'http://nginx/api/file/content/office?id=' + this.value.id + '&token=' + this.userToken,
|
||
}
|
||
};
|
||
this.$nextTick(() => {
|
||
this.docEditor = new DocsAPI.DocEditor(this.id, config);
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|