lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化office组件

Browse Source
This commit is contained in:
jmal 2022-08-12 19:45:54 +08:00
parent 2336b39a79
commit d1bca43678
9 changed files with 119 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/api/file-api.js
View File

@ -271,4 +271,18 @@ export default {
params
})
},
// 根据id获取文件信息
getFileInfoById: function(id) {
return request({
url: `/file_info/${id}`,
method: 'get'
})
},
// 根据id获取文件信息
getPublicFileInfoById: function(id) {
return request({
url: `/public/file_info/${id}`,
method: 'get'
})
},
}

5
src/components/ShowFile/ShowFile.vue
View File

@ -378,7 +378,6 @@
<image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
<video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
<office-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></office-preview>
<!-- <audio-preview :file="audioPreviewRow" :status.sync="audioPreviewVisible"></audio-preview> -->
<!--文件详细信息-->
<el-drawer
:title="rowContextData.name"
@ -883,7 +882,6 @@ export default {
Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
},
beforeDestroy() {
console.log('beforeDestroy')
window.removeEventListener('keydown', this.keydown, false)
window.removeEventListener('keyup', this.keyup, false)
window.removeEventListener('popstate', this.goBack, false)
@ -965,6 +963,7 @@ export default {
if (index > -1) {
this.fileList[index].size = fileDoc.size
this.fileList[index].agoTime = 1
this.fileList[index].updateDate = fileDoc.updateDate
}
}
if ('deleteFile' === url) {
@ -3114,7 +3113,7 @@ export default {
Bus.$emit('onAddAudio', row, this.audioCoverUrl)
return
}
if (row.contentType.indexOf('office') > -1) {
if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
// office文件
this.officePreviewVisible = true
this.officePreviewRow = row

131
src/components/office/OnlyOfficeEditor.vue
View File

@ -1,13 +1,12 @@
<template>
<div class="component-only-office">
<div :id="this.id" class="placeholder"></div>
<div v-if="loadIng > 0" class="office-loading"></div>
</div>
</template>
<script>
import fileConfig from "@/utils/file-config";
import api from "@/api/file-api"
export default {
name: "OnlyOfficeEditor",
@ -15,7 +14,7 @@ export default {
id: {
type: String,
default: () => {
return "office_" + Math.round(Math.random() * 10000);
return "office_" + Math.round(Math.random() * 10000)
}
},
code: {
@ -23,12 +22,12 @@ export default {
default: ''
},
value: {
type: [Object, Array],
type: Object,
default: function () {
return {}
}
},
readOnly: {
readOnly: {
type: Boolean,
default: false
},
@ -37,101 +36,94 @@ export default {
data() {
return {
loadIng: 0,
docEditor: null,
}
},
mounted() {
},
beforeDestroy() {
if (this.docEditor !== null) {
this.docEditor.destroyEditor();
this.docEditor = null;
this.docEditor.destroyEditor()
this.docEditor = null
}
},
computed: {
fileType() {
return this.getType(this.value.suffix);
return this.getType(this.value.suffix)
},
fileName() {
return this.value.name;
return this.value.name
},
},
watch: {
'value.id': {
handler(id) {
if (!id) {
return;
return
}
this.loadIng++;
$J.loadScript($J.apiUrl("http://nps.jmal.top:18849/web-apps/apps/api/documents/api.js"), (e) => {
this.loadIng--;
$J.loadScript($J.apiUrl("http://192.168.0.188:3454/web-apps/apps/api/documents/api.js"), (e) => {
if (e !== null) {
$J.modalAlert("组件加载失败！");
return;
}
if (!this.documentKey) {
this.handleClose();
$J.modalAlert("组件加载失败！")
return
}
const documentKey = this.documentKey();
if (documentKey && documentKey.then) {
documentKey.then(this.loadFile);
if(this.$store.state.user.token && this.$store.state.user.userId === this.value.userId){
api.getFileInfoById(this.value.id).then(res => {
this.value = res.data
this.loadFile()
})
} else {
this.loadFile();
api.getPublicFileInfoById(this.value.id).then(res => {
this.value = res.data
this.loadFile()
})
}
})
},
immediate: true,
}
},
methods: {
getType(type) {
switch (type) {
case 'doc':
return 'docx'
case 'word':
return 'docx';
return 'docx'
case 'excel':
return 'xlsx';
return 'xlsx'
case 'xls':
return 'xlsx'
case 'ppt':
return 'pptx'
}
return type;
return type
},
loadFile(keyAppend = '') {
loadFile() {
if (this.docEditor !== null) {
this.docEditor.destroyEditor();
this.docEditor = null;
this.docEditor.destroyEditor()
this.docEditor = null
}
let fileKey = this.code || this.value.id;
let fileName = $J.strExists(this.fileName, '.') ? this.fileName : (this.fileName + '.' + this.fileType);
let fileKey = `${new Date(this.value.updateDate).getTime()}-${this.value.id}`
let fileName = $J.strExists(this.fileName, '.') ? this.fileName : (this.fileName + '.' + this.fileType)
const config = {
"document": {
"fileType": this.fileType,
"key": `${this.fileType}-${$J.randNum(0,45678)}`,
"key": fileKey,
"title": fileName,
//"url": window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, this.value, this.$store.getters.token),
"url": "http://nps.jmal.top:19957/download?fileName=new+%281%29.docx&userAddress=%2FUsers%2Fjmal%2FDownloads%2Ftest%2F",
"url": `${window.location.origin}${this.baseUrl}/file/${this.$store.state.user.name}/${encodeURI(this.value.path)}/${encodeURI(this.value.name)}?jmal-token=${this.$store.getters.token}`,
},
"editorConfig": {
"mode": "edit",
"lang": "zh",
"user": {
"id": this.$store.state.user.name,
"id": this.$store.state.user.userId,
"name": this.$store.state.user.name
},
// "customization": {
// "uiTheme": this.themeIsDark ? "theme-dark" : "theme-classic-light",
// },
"customization": {
"logo": null,
"logo": {
"image": "http://localhost:9528/favicon.ico",
"imageEmbedded": "",
"url": window.location.origin
},
"autosave": true,
"comments": true,
"compactHeader": false,
@ -145,34 +137,27 @@ export default {
"about": false,
"feedback": false
},
// "callbackUrl": `${window.location.origin}/api/office/track?jmal-token=${this.$store.getters.token}&fileName=new.docx&userAddress=%2FUsers%2Fjmal%2FDownloads%2Ftest%2F`,
callbackUrl: "http://nps.jmal.top:19957/track?fileName=new+%281%29.docx&userAddress=%2FUsers%2Fjmal%2FDownloads%2Ftest%2F",
"callbackUrl": `http://192.168.0.66:8088/office/track?jmal-token=${this.$store.getters.token}&fileId=${this.value.id}`,
}
}
if (!this.$pc) {
config.type = 'mobile'
}
if (this.readOnly) {
config.editorConfig.mode = "view"
config.editorConfig.callbackUrl = null
if (!config.editorConfig.user.id) {
let viewer = $J.getStorageInt("viewer")
if (!viewer) {
viewer = $J.randNum(1000, 99999)
$J.setStorage("viewer", viewer)
}
config.editorConfig.user.id = "viewer_" + viewer
config.editorConfig.user.name = "Viewer_" + viewer
}
};
if (/\/hideenOfficeTitle\//.test(window.navigator.userAgent)) {
config.document.title = " ";
}
console.log(config.document, config.editorConfig)
// if ($J.leftExists(fileKey, "msgFile_")) {
// config.document.url = `http://nginx/api/dialog/msg/download/?msg_id=${$J.leftDelete(fileKey, "msgFile_")}&token=${this.userToken}`;
// } else if ($J.leftExists(fileKey, "taskFile_")) {
// config.document.url = `http://nginx/api/project/task/filedown/?file_id=${$J.leftDelete(fileKey, "taskFile_")}&token=${this.userToken}`;
// }
// if (this.readOnly) {
// config.editorConfig.mode = "view";
// config.editorConfig.callbackUrl = null;
// if (!config.editorConfig.user.id) {
// let viewer = $J.getStorageInt("viewer")
// if (!viewer) {
// viewer = $J.randNum(1000, 99999);
// $J.setStorage("viewer", viewer)
// }
// config.editorConfig.user.id = "viewer_" + viewer;
// config.editorConfig.user.name = "Viewer_" + viewer
// }
// }
this.$nextTick(() => {
this.docEditor = new DocsAPI.DocEditor(this.id, config);
this.docEditor = new DocsAPI.DocEditor(this.id, config)
})
}
}

45
src/components/preview/OfficePreview.vue
View File

@ -1,14 +1,12 @@
<template>
<div class="preview" v-if="show">
<div class="office-preview" v-if="show">
<van-overlay :show="show">
<div class="block">
<div class="close-bar" @click="close">
<svg-icon class="preview-close" icon-class="close"/>
</div>
<div class="wrapper">
<div class="block">
<only-office-editor v-model="file" :documentKey="documentKey"></only-office-editor>
</div>
<only-office-editor v-model="file" :read-only="readOnly"></only-office-editor>
</div>
</div>
</van-overlay>
@ -16,10 +14,7 @@
</template>
<script>
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
import fileConfig from "@/utils/file-config";
export default {
name: 'OfficePreview',
@ -48,17 +43,14 @@ export default {
return {
pc: this.$pc,
show: this.status,
url: '',
readOnly: true,
}
},
watch: {
status: function(visible){
if(visible){
this.url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
if(this.shareId){
this.url = fileConfig.publicPreviewUrl(this.file.id, window.shareId);
}
this.show = true
this.checkReadOnly(this.file.userId)
}
}
},
@ -67,8 +59,19 @@ export default {
this.show = false
this.$emit('update:status', false)
},
documentKey() {
console.log("documentKey")
checkReadOnly(fileUserId){
if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
this.readOnly = false
}
if (!this.$pc) {
this.readOnly = true
this.$nextTick(() => {
const closeBar = document.querySelector('.office-preview .close-bar');
closeBar.style.right = '2.5rem'
closeBar.style.float = 'left'
closeBar.style.transform = 'rotate(225deg)'
})
}
},
}
}
@ -100,16 +103,16 @@ export default {
z-index: 2006;
background-color: rgba(0,0,0,.5);
position: relative;
top: -36px;
right: -36px;
top: -2.5rem;
right: -2.5rem;
float: right;
width: 0;
height: 0;
border-radius: 36px;
border-width: 36px;
border-radius: 2.5rem;
border-width: 2.5rem;
border-style: solid;
border-color: transparent transparent transparent #d4d4d475;
line-height: 36px;
line-height: 2.5rem;
opacity: 1;
transform: rotate(-45deg);
}
@ -123,7 +126,7 @@ export default {
transform: rotate(-45deg);
z-index: 2009;
position: absolute;
font-size: 18px;
font-size: 1.25rem;
top: -8px;
right: 13px;
}
@ -133,7 +136,7 @@ export default {
>>> .component-only-office {
position: absolute;
top: 36px;
top: 2.5rem;
left: 0;
right: 0;
bottom: 0;

1
src/icons/svg/file-csv.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660273696344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3396" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M145.6 0C100.8 0 64 36.8 64 81.6v860.8C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L656 0H145.6z" fill="#45B058" p-id="3397"></path><path d="M388.8 691.2c1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-3.2 0-6.4 0-8-3.2-11.2-12.8-30.4-22.4-48-22.4-41.6 0-73.6 32-73.6 78.4 0 44.8 32 78.4 73.6 78.4 17.6 0 35.2-8 48-22.4 1.6-1.6 4.8-3.2 8-3.2 6.4 0 11.2 4.8 11.2 11.2 0 3.2-1.6 6.4-3.2 8-14.4 16-35.2 27.2-64 27.2-56 0-99.2-40-99.2-99.2s43.2-99.2 99.2-99.2c28.8 0 49.6 11.2 64 27.2z m108.8 171.2c-28.8 0-51.2-9.6-67.2-24-3.2-1.6-3.2-4.8-3.2-8 0-6.4 3.2-12.8 11.2-12.8 1.6 0 4.8 1.6 6.4 3.2 12.8 11.2 32 20.8 54.4 20.8 33.6 0 44.8-19.2 44.8-33.6 0-49.6-113.6-22.4-113.6-91.2 0-30.4 27.2-52.8 65.6-52.8 24 0 46.4 8 62.4 20.8 1.6 1.6 3.2 4.8 3.2 8 0 6.4-4.8 11.2-11.2 11.2-1.6 0-4.8 0-6.4-1.6-14.4-11.2-32-17.6-49.6-17.6-24 0-40 12.8-40 30.4 0 43.2 113.6 19.2 113.6 91.2 0 27.2-19.2 56-70.4 56z m272-179.2L702.4 848c-3.2 8-9.6 12.8-17.6 12.8h-1.6c-8 0-16-4.8-19.2-12.8l-65.6-164.8c-1.6-1.6-1.6-3.2-1.6-4.8 0-6.4 4.8-12.8 12.8-12.8 4.8 0 9.6 3.2 11.2 8l62.4 160 62.4-160c1.6-4.8 6.4-8 11.2-8 8 0 14.4 6.4 14.4 12.8 0 1.6-1.6 3.2-1.6 4.8z" fill="#FFFFFF" p-id="3398"></path><path d="M960 326.4v16H755.2s-100.8-20.8-97.6-108.8c0 0 3.2 92.8 96 92.8H960z" fill="#349C42" p-id="3399"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" p-id="3400"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/icons/svg/file-docxf.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660274156456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30054" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M145.6 0C100.8 0 64 35.2 64 80v862.4C64 987.2 100.8 1024 145.6 1024h732.8c44.8 0 81.6-36.8 81.6-81.6V324.8L657.6 0h-512z" fill="#673AB7" p-id="30055"></path><path d="M960 326.4v16H755.2s-100.8-20.8-99.2-108.8c0 0 4.8 92.8 97.6 92.8H960z" fill="#45317C" p-id="30056"></path><path d="M657.6 0v233.6c0 25.6 17.6 92.8 97.6 92.8H960L657.6 0z" fill="#FFFFFF" opacity=".5" p-id="30057"></path><path d="M267.2 630.4c0-6.4-4.8-11.2-11.2-11.2h-20.8c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2H256c6.4 0 11.2-4.8 11.2-11.2v-20.8z m300.8 0c0-6.4-4.8-11.2-11.2-11.2H305.6c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2h251.2c6.4 0 11.2-4.8 11.2-11.2v-20.8z m-300.8 100.8c0-6.4-4.8-11.2-11.2-11.2h-20.8c-6.4 0-11.2 4.8-11.2 11.2V752c0 6.4 4.8 11.2 11.2 11.2H256c6.4 0 11.2-4.8 11.2-11.2v-20.8z m300.8 0c0-6.4-6.4-11.2-12.8-11.2H307.2c-6.4 0-12.8 4.8-12.8 11.2V752c0 6.4 6.4 11.2 12.8 11.2h248c6.4 0 12.8-4.8 12.8-11.2v-20.8z m-300.8 99.2c0-6.4-4.8-11.2-11.2-11.2h-20.8c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2H256c6.4 0 11.2-4.8 11.2-11.2v-20.8z m300.8 0c0-6.4-4.8-11.2-11.2-11.2H305.6c-6.4 0-11.2 4.8-11.2 11.2v20.8c0 6.4 4.8 11.2 11.2 11.2h251.2c6.4 0 11.2-4.8 11.2-11.2v-20.8z" fill="#FFFFFF" p-id="30058"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/icons/svg/file-ppt.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1660273634309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1158" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M160 0h512l256 256v704c0 35.3472-28.6528 64-64 64H160c-35.3472 0-64-28.6528-64-64V64c0-35.3472 28.6528-64 64-64z" fill="#FF9333" p-id="1159"></path><path d="M427.8976 768V610.9568H539.776c87.7952 0 132.224-38.1824 132.224-114.016C672 421.6448 628.1024 384 540.3136 384H384v384h43.8976z m109.7408-195.2256H427.8976v-150.592h109.7408c30.5088 0 52.992 5.92 67.9808 18.8288 14.9888 11.2896 22.4832 30.112 22.4832 55.936 0 25.8112-7.488 44.6336-21.952 57.0048-14.9824 12.3648-37.4656 18.816-68.512 18.816z" fill="#FFFFFF" p-id="1160"></path><path d="M672 0l256 256h-192c-35.3472 0-64-28.6528-64-64V0z" fill="#FFD3AD" p-id="1161"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1012 B

4
src/utils/file-type.js
View File

@ -55,6 +55,10 @@ iconClass.set('exe','file-exe')
iconClass.set('word','file-word')
iconClass.set('doc','file-word')
iconClass.set('docx','file-word')
iconClass.set('docxf','file-docxf')
iconClass.set('ppt','file-ppt')
iconClass.set('pptx','file-ppt')
iconClass.set('csv','file-csv')
iconClass.set('pdf','file-pdf')
iconClass.set('zip','zip')
iconClass.set('rar','zip')

18
src/views/public/share/shareList.vue
View File

@ -208,6 +208,7 @@
<sim-text-preview :file.sync="textPreviewRow" :shareId="shareId" :status.sync="textPreviewVisible"></sim-text-preview>
<image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
<video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
<office-preview :file="officePreviewRow" :shareId="shareId" :status.sync="officePreviewVisible"></office-preview>
<el-divider class="grid-divider" content-position="center"><i class="el-icon-folder-opened"></i>&nbsp;{{summaries}}</el-divider>
<el-pagination
background
@ -241,8 +242,10 @@
import AudioPreview from "@/components/preview/AudioPreview";
import fileConfig from "@/utils/file-config";
import Clipboard from "clipboard";
import OfficePreview from "@/components/preview/OfficePreview";
export default {
components: { IconFile, BreadcrumbFilePath,AlLoading,
components: {
OfficePreview, IconFile, BreadcrumbFilePath,AlLoading,
AudioPreview, VideoPreview, ImageViewer, SimTextPreview
},
data() {
@ -353,6 +356,8 @@
imagePreviewVisible : false,
videoPreviewRow: {},
videoPreviewVisible: false,
officePreviewRow: {},
officePreviewVisible: false,
audioPreviewRow: {},
audioPreviewVisible: false,
showUpdateDateItem: this.$pc,// 列表模式下是否显示修改时间
@ -925,13 +930,18 @@
this.videoPreviewRow = row
return
}
// 音频文件
if(row.contentType.indexOf('audio') > -1){
// 音频文件
// this.audioPreviewVisible = true
// this.audioPreviewRow = row
Bus.$emit('onAddAudio',row, this.audioCoverUrl)
return
}
// office文件
if (row.contentType.indexOf('office') > -1 || row.suffix === 'csv') {
// office文件
this.officePreviewVisible = true
this.officePreviewRow = row
return
}
// 打开文件
fileConfig.publicPreview(row.id, this.shareId)
}