@@ -0,0 +1,23 @@
|
||||
import Vue from "vue";
|
||||
import OnlyOffice from "./index.vue";
|
||||
|
||||
const PreviewConstructor = Vue.extend(OnlyOffice);
|
||||
|
||||
const onlyOffice = options => {
|
||||
const { path, type, title } = options;
|
||||
if (!path) throw `path is requred.but ${path}`
|
||||
const id = `OnlyOffice_${new Date().getTime()}`;
|
||||
const instance = new PreviewConstructor();
|
||||
instance.id = id;
|
||||
instance.vm = instance.$mount();
|
||||
if (instance.vm.visible) return;
|
||||
document.body.appendChild(instance.vm.$el);
|
||||
instance.vm.open(path, type, title);
|
||||
instance.vm.$on("closed", () => {
|
||||
instance.vm.docEditor = null
|
||||
document.body.removeChild(instance.vm.$el);
|
||||
instance.vm.$destroy();
|
||||
});
|
||||
return instance.vm;
|
||||
}
|
||||
export default onlyOffice;
|
||||
@@ -0,0 +1,7 @@
|
||||
import OnlyOffice from "./index.vue";
|
||||
import onlyOffice from "./fun";
|
||||
|
||||
export default Vue => {
|
||||
Vue.component(OnlyOffice.name, OnlyOffice);
|
||||
Vue.prototype.$onlyOffice = onlyOffice;
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<el-dialog v-if="visible" :visible.sync="visible" :title="title" :fullscreen="true" append-to-body
|
||||
custom-class="base-dialog-wrapper" @close="handleClose">
|
||||
<div class="base-modal-body" style="border: 2px solid #ccc; padding: 10px">
|
||||
<iframe v-if="visible"
|
||||
:src="`/static/onlyOffice/viewer.html?url=${OSSclientConfig.basePath}${path}?type=${type}&title=${title}&documentType=${documentType}&userName=${currentUser}`"
|
||||
width="100%" height="99%" frameborder="0" crossorigin="anonymous" />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
import DOCUMENTTYPE from "@/utils/onlyOffice_type.js"
|
||||
export default {
|
||||
name: "OnlyOffice",
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
path: null,
|
||||
type: null,
|
||||
title: null,
|
||||
documentType: null,
|
||||
currentUser: zzSessionStorage.getItem('userName'),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
open(path, type, title) {
|
||||
this.path = path;
|
||||
this.type = type.toLowerCase();
|
||||
this.documentType = DOCUMENTTYPE[`.${this.type}`]
|
||||
this.title = title;
|
||||
this.visible = true;
|
||||
},
|
||||
handleClose() {
|
||||
this.$emit("closed");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -54,6 +54,8 @@ import upload from '@/components/element-ui/upload'
|
||||
Vue.use(upload)
|
||||
import Preview from '@/components/Preview/index'
|
||||
Vue.use(Preview)
|
||||
import Onlyoffice from '@/components/Preview_onlyoffice/index'
|
||||
Vue.use(Onlyoffice)
|
||||
import MFA from '@/components/MFA/index'
|
||||
Vue.use(MFA)
|
||||
import FB from '@/components/feedBack/index'
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
let TYPES = ['word', 'cell', 'slide', 'pdf']
|
||||
|
||||
let DOCUMENTTYPE = {
|
||||
'.doc': TYPES[0],
|
||||
'.docm': TYPES[0],
|
||||
'.docx': TYPES[0],
|
||||
'.dot': TYPES[0],
|
||||
'.dotm': TYPES[0],
|
||||
'.dotx': TYPES[0],
|
||||
'.epub': TYPES[0],
|
||||
'.fb2': TYPES[0],
|
||||
'.fodt': TYPES[0],
|
||||
'.htm': TYPES[0],
|
||||
'.html': TYPES[0],
|
||||
'.mht': TYPES[0],
|
||||
'.mhtml': TYPES[0],
|
||||
'.odt': TYPES[0],
|
||||
'.ott': TYPES[0],
|
||||
'.pages': TYPES[0],
|
||||
'.rtf': TYPES[0],
|
||||
'.stw': TYPES[0],
|
||||
'.sxw': TYPES[0],
|
||||
'.txt': TYPES[0],
|
||||
'.wps': TYPES[0],
|
||||
'.wpt': TYPES[0],
|
||||
'.xml': TYPES[0],
|
||||
'.csv': TYPES[1],
|
||||
'.et': TYPES[1],
|
||||
'.ett': TYPES[1],
|
||||
'.fods': TYPES[1],
|
||||
'.numbers': TYPES[1],
|
||||
'.ods': TYPES[1],
|
||||
'.ots': TYPES[1],
|
||||
'.sxc': TYPES[1],
|
||||
'.xls': TYPES[1],
|
||||
'.xlsb': TYPES[1],
|
||||
'.xlsm': TYPES[1],
|
||||
'.xlsx': TYPES[1],
|
||||
'.xlt': TYPES[1],
|
||||
'.xltm': TYPES[1],
|
||||
'.xltx': TYPES[1],
|
||||
'.xml': TYPES[1],
|
||||
'.dps': TYPES[2],
|
||||
'.dpt': TYPES[2],
|
||||
'.fodp': TYPES[2],
|
||||
'.key': TYPES[2],
|
||||
'.odp': TYPES[2],
|
||||
'.otp': TYPES[2],
|
||||
'.pot': TYPES[2],
|
||||
'.potm': TYPES[2],
|
||||
'.potx': TYPES[2],
|
||||
'.pps': TYPES[2],
|
||||
'.ppsm': TYPES[2],
|
||||
'.ppsx': TYPES[2],
|
||||
'.ppt': TYPES[2],
|
||||
'.pptm': TYPES[2],
|
||||
'.pptx': TYPES[2],
|
||||
'.sxi': TYPES[2],
|
||||
'.djvu': TYPES[3],
|
||||
'.docxf': TYPES[3],
|
||||
'.oform': TYPES[3],
|
||||
'.oxps': TYPES[3],
|
||||
'.pdf': TYPES[3],
|
||||
'.xps': TYPES[3]
|
||||
}
|
||||
export default DOCUMENTTYPE
|
||||
@@ -67,6 +67,8 @@
|
||||
<div class="name_layout" v-if="renameId !== scope.row.Id">
|
||||
<span class="name_box">
|
||||
<i class="icon icon_folder" v-if="!scope.row.AuditDocumentTypeEnum" />
|
||||
<img v-else-if="['png', 'jpg', 'jpeg'].includes(scope.row.FileFormat.toLowerCase())"
|
||||
:src="OSSclientConfig.basePath + scope.row.FilePath" alt="" class="icon_image">
|
||||
<i v-else :class="`icon icon_file icon_${scope.row.FileFormat}`" />
|
||||
<span class="name" :title="scope.row.Name">{{ scope.row.Name }}</span>
|
||||
<i class="el-icon-edit icon_edit" v-if="hoverId === scope.row.Id"
|
||||
@@ -102,6 +104,12 @@
|
||||
v-if="config.visible" @close="close" @uplaodFile="uplaodFile" />
|
||||
<detail ref="versionDetail" v-if="visible" :visible.sync="visible" :rowData="rowData"
|
||||
@openContextmenu="openContextmenu" @openFileNewVersion="openFileNewVersion" @delData="delData" />
|
||||
<viewer ref="picture_perview" style="margin: 0 10px"
|
||||
:images="[`${OSSclientConfig.basePath}${rowData.FilePath}`]">
|
||||
|
||||
<img v-show="false" crossorigin="anonymous" :src="`${OSSclientConfig.basePath}${rowData.FilePath}`"
|
||||
alt="Image" />
|
||||
</viewer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@@ -687,6 +695,28 @@ export default {
|
||||
this.faccept = ['.pdf']
|
||||
this.limitLength = 0
|
||||
},
|
||||
// 预览文件
|
||||
perview(data) {
|
||||
if (['.pdf',
|
||||
'.ppt',
|
||||
'.pptx',
|
||||
'.doc',
|
||||
'.docx',
|
||||
'.xls',
|
||||
'.xlsx'].includes(`.${data.FileFormat.toLowerCase()}`)) {
|
||||
this.$onlyOffice({
|
||||
path: data.FilePath,
|
||||
type: data.FileFormat,
|
||||
title: data.Name
|
||||
})
|
||||
}
|
||||
if (['.jpg',
|
||||
'.jpeg',
|
||||
'.png'].includes(`.${data.FileFormat.toLowerCase()}`)) {
|
||||
this.$refs['picture_perview'].$viewer.show()
|
||||
}
|
||||
|
||||
},
|
||||
// 版本记录（右键菜单）
|
||||
openContextmenu(data) {
|
||||
let { e, row, type, zIndex } = data
|
||||
@@ -707,31 +737,38 @@ export default {
|
||||
this.resetOpt()
|
||||
this.getList()
|
||||
this.getBreadcrumbData()
|
||||
} else {
|
||||
this.perview(this.rowData)
|
||||
}
|
||||
},
|
||||
// 单行左键单击
|
||||
handleRowClick(row, column, e) {
|
||||
e.stopPropagation();
|
||||
this.rowData = row
|
||||
let index = this.checkList.indexOf(row.Id)
|
||||
// let index = this.checkList.indexOf(row.Id)
|
||||
if (this.ctrlKey) {
|
||||
if (!!~index) {
|
||||
this.checkList.splice(index, 1)
|
||||
} else {
|
||||
this.checkList.push(row.Id)
|
||||
}
|
||||
this.checkList.push(row.Id)
|
||||
} else {
|
||||
if (this.checkList.length > 1 || this.checkList.length <= 0) {
|
||||
this.checkList = [row.Id]
|
||||
} else {
|
||||
if (!!~index) {
|
||||
this.checkList.splice(index, 1)
|
||||
} else {
|
||||
this.checkList = [row.Id]
|
||||
}
|
||||
}
|
||||
|
||||
this.checkList = [row.Id]
|
||||
}
|
||||
// if (this.ctrlKey) {
|
||||
// if (!!~index) {
|
||||
// this.checkList.splice(index, 1)
|
||||
// } else {
|
||||
// this.checkList.push(row.Id)
|
||||
// }
|
||||
// } else {
|
||||
// if (this.checkList.length > 1 || this.checkList.length <= 0) {
|
||||
// this.checkList = [row.Id]
|
||||
// } else {
|
||||
// if (!!~index) {
|
||||
// this.checkList.splice(index, 1)
|
||||
// } else {
|
||||
// this.checkList = [row.Id]
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
},
|
||||
@@ -758,6 +795,8 @@ export default {
|
||||
this.resetOpt()
|
||||
this.getList()
|
||||
this.getBreadcrumbData()
|
||||
} else {
|
||||
this.perview(this.rowData)
|
||||
}
|
||||
}
|
||||
if (key === 'del') {
|
||||
@@ -984,12 +1023,20 @@ export default {
|
||||
background-color: #e5f3ff
|
||||
}
|
||||
|
||||
.icon_image {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 0px;
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
padding: 0px;
|
||||
line-height: 20px;
|
||||
// min-width: 20px;
|
||||
margin-right: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user