稽查文档预览
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
b76d157fca
commit
1fb76ca72d
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
width: 99%;
|
||||
height: 99%;
|
||||
}
|
||||
</style>
|
||||
<title></title>
|
||||
<!-- 引入外部JavaScript文件 -->
|
||||
<script type="text/javascript"
|
||||
src="https://onlyoffice.test.extimaging.com/web-apps/apps/api/documents/api.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="placeholder"></div>
|
||||
<script language="javascript" type="text/javascript">
|
||||
var obj = {}
|
||||
var str = window.location.search.substr(1)
|
||||
str = str.split('?')[1]
|
||||
var url = window.location.search.substr(1).split('?')[0].split('=')[1]
|
||||
var arrList = str.split('&')
|
||||
arrList.forEach(function (item) {
|
||||
var arr = item.split('=')
|
||||
obj[arr[0]] = window.decodeURIComponent(arr[1])
|
||||
})
|
||||
var docEditor = new window.DocsAPI.DocEditor("placeholder", {
|
||||
"document": {
|
||||
"fileType": obj.type,
|
||||
"key": "Khirz6zTPdfd7" + Date.now(),
|
||||
"title": obj.title,
|
||||
"url": url
|
||||
},
|
||||
permissions: {
|
||||
edit: false, // 👈 禁止编辑
|
||||
download: false, // 允许下载
|
||||
print: false, // 允许打印
|
||||
review: false, // 关闭审阅模式
|
||||
comment: false, // 禁用评论
|
||||
copy: false, // 禁用内容复制
|
||||
modifyFilter: false // 禁止修改格式
|
||||
},
|
||||
editorConfig: {
|
||||
mode: 'view', // 强制进入查看模式
|
||||
user: {
|
||||
name: obj.userName,
|
||||
permissions: "Read Only"
|
||||
},
|
||||
customization: {
|
||||
features: {
|
||||
edit: false, // 隐藏编辑按钮
|
||||
save: false, // 隐藏保存按钮
|
||||
print: false, // 显示打印按钮
|
||||
download: false, // 显示下载按钮
|
||||
comment: false, // 隐藏评论功能
|
||||
rightMenu: false, // 禁用右键菜单
|
||||
showReviewChanges: false, // 隐藏修订标记
|
||||
toolbar: false, // 完全隐藏工具栏（可选）
|
||||
downloadAs: false, // 隐藏"另存为"按钮
|
||||
plugins: false, //定义是否将启动插件并可用。默认值为true
|
||||
},
|
||||
},
|
||||
events: {
|
||||
onRequestDownload: () => {
|
||||
console.warn('下载请求已被阻止');
|
||||
return false;
|
||||
},
|
||||
onRequestPrint: () => {
|
||||
console.warn('打印请求已被阻止');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
"documentType": obj.documentType,
|
||||
"height": "100%"
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue