稽查文档预览

src/components/Preview_onlyoffice/fun.js

@@ -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;

src/components/Preview_onlyoffice/index.js

@@ -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;
+};

src/components/Preview_onlyoffice/index.vue

@@ -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>

src/main.js

@@ -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'

src/utils/onlyOffice_type.js

@@ -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

src/views/trials/trials-workbench/components/auditDocument/index.vue

@@ -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.push(row.Id)
-                    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]
-                    this.checkList = [row.Id]
-                } else {
-                    if (!!~index) {
-                        this.checkList.splice(index, 1)
-                    } else {
-                        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;
 }

static/onlyOffice/viewer.html

@@ -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>