zydx-plus 1.17.78 → 1.18.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.17.78",
+  "version": "1.18.79",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -32,7 +32,9 @@
     "html2json": "^1.0.2",
     "@tiptap/extension-image": "^2.0.3",
     "@tiptap/starter-kit": "^2.0.3",
-    "@tiptap/vue-3": "^2.0.3"
+    "@tiptap/vue-3": "^2.0.3",
+    "@vue-office/docx": "^1.1.3",
+    "@vue-office/excel": "^1.1.3"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/editor2/src/editor.vue

@@ -4,7 +4,7 @@
             <div class="ed-title" v-if="titleShow">{{ title }}</div>
             <div class="ed-but" v-if="readOnly">
                 <div class="ed-head-but" v-for="(item,index) in toolbar">
-                    <button v-if="item.key === 'but'" class="but" @click="item.onClick(item)" :style="{color: (item.active)? '#00ff00' :'#000'}">{{ item.title }}</button>
+                    <button v-if="item.key === 'but'" class="but" @click="item.onClick(item,info)" :style="{color: (item.active)? '#00ff00' :'#000'}">{{ item.title }}</button>
                     <label v-else-if="item.key === 'upImg' || item.key === 'uploadAtt'">
                         <input type="file" @change="upload($event,item.key)" :accept="(item.key === 'upImg')?'image/*':'application/*'" style="display: none;">
                         <span class="but">{{ item.title }}</span>
@@ -105,6 +105,10 @@ export default {
         uploadType: {
             type: Boolean,
             default: false
+        },
+        info: {
+            type: String,
+            default: ''
         }
     },
     emits: ['see','complete','update:data'],
@@ -112,7 +116,7 @@ export default {
         data(e) {
             this.editor.commands.setContent(json2html({node: "root",child: (e.html === undefined)? [] : e.html}))
             this.uploadAttData = (e.enclosure === undefined)? [] : e.enclosure
-        },
+        }
     },
     mounted() {
         this.uploadAttData = (this.data.enclosure === undefined)? [] : this.data.enclosure

package/src/components/read/index.js

@@ -0,0 +1,6 @@
+import main from './src/read.vue';
+
+main.install = function(Vue) {
+    Vue.component(main.name, main);
+};
+export default main;

package/src/components/read/src/read.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="read">
+      <vue-office-docx v-if="fileType === 'docx'" :src="url" style="height: 100%;" />
+      <vue-office-excel v-if="fileType === 'xlsx' || fileType === 'xls'" :src="url" style="height: 100%;" />
+      <div class="view-pdf" v-if="fileType === 'pdf'" id="canvas-wrap"></div>
+      <div class="mp4" v-if="fileType === 'mp4'">
+          <video :src="url" controls></video>
+      </div>
+      <div class="mp3" v-if="fileType === 'mp3'">
+          <audio :src="url" controls></audio>
+      </div>
+  </div>
+</template>
+
+<script>
+import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法
+PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
+//引入VueOfficeDocx组件
+import VueOfficeDocx from '@vue-office/docx'
+//引入VueOfficeExcel组件
+import VueOfficeExcel from '@vue-office/excel'
+//引入相关样式
+import '@vue-office/docx/lib/index.css'
+//引入相关样式
+import '@vue-office/excel/lib/index.css'
+export default {
+    name: "zydx-read",
+    components: {VueOfficeDocx,VueOfficeExcel},
+    data() {
+        return {
+            fileType: null,
+            PdfJs: null,
+            svgArr: [],
+            container: null
+        }
+    },
+    props: {
+        url: {
+            type: String,
+            default: '',
+            pdfPages: 0
+        }
+    },
+    mounted() {
+        this.fileType = this.url.split('.').pop()
+        if(this.fileType === 'pdf') this.init()
+    },
+    methods: {
+        init() {
+            let that = this
+            const loadingTask = PdfJs.getDocument(this.url)
+            loadingTask.promise.then((pdf) => {
+                that.pdfPages = pdf.numPages // 获取pdf文件的总页数
+                for (let i = 0; i < that.pdfPages; i++) {
+                    let inx = i+1
+                    pdf.getPage(inx).then(function (page) {
+                        let viewport = page.getViewport({scale: 1})
+                        return page.getOperatorList().then(function(opList) {
+                            let svgGfx = new PdfJs.SVGGraphics(page.commonObjs, page.objs)
+                            return svgGfx.getSVG(opList, viewport).then(function(svg) {
+                                that.svgArr.push({
+                                    index: inx,
+                                    width: viewport.width,
+                                    height: viewport.height,
+                                    data: svg
+                                })
+                            })
+                        })
+                    })
+                }
+            })
+            setTimeout(() => {
+                that.sortArr()
+            },100)
+        },
+        // 数组根据索引排序
+        sortArr() {
+            for(let j = 0; j < this.svgArr.length;j++){
+                let temp = this.svgArr[j],
+                    val  = temp['index'],
+                    i = j-1;
+                while(i >=0 && this.svgArr[i]['index']>val){
+                    this.svgArr[i+1] = this.svgArr[i];
+                    i = i-1;
+                }
+                this.svgArr[i+1] = temp;
+            }
+            this.svgArr.forEach(x => {
+                let container = document.createElement('div')
+                container.id = 'canvas_' + x.index
+                container.className = 'pageContainer'
+                container.style.width = x.width + 'px'
+                container.style.height = x.height + 'px'
+                container.style.display = 'inline-block'
+                container.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)'
+                container.style.marginBottom = '5px'
+                document.getElementById('canvas-wrap').appendChild(container)
+                container.appendChild(x.data)
+            })
+        },
+    }
+}
+</script>
+
+<style scoped>
+.mp4,.mp3{
+    width: 100%;
+}
+.mp4 video,.mp3 audio{
+    width: 100%;
+}
+.view-pdf{
+    text-align: center;
+    height: 100%;
+    overflow: auto;
+    padding: 10px;
+}
+.view-pdf::-webkit-scrollbar {
+    width: 0
+}
+.read{
+    width: 100%;
+    height: 100%;
+}
+:deep(.vue-office-docx)::-webkit-scrollbar {
+    width: 0
+}
+:deep(.docx-wrapper) {
+    background-color: #fff;
+}
+</style>

package/src/index.js

@@ -20,6 +20,7 @@ import bizHeader from './components/biz_header/index';
 import editor2 from './components/editor2/index';
 import dragPopup from './components/dragPopup/index';
 import bizTaskInfo from './components/biz_taskInfo/index';
+import read from './components/read/index';
 
 const components = [
     Calendar,
@@ -41,7 +42,8 @@ const components = [
     bizHeader,
     editor2,
     dragPopup,
-    bizTaskInfo
+    bizTaskInfo,
+    read
 ];
 
 function install(app) {
@@ -53,7 +55,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.17.77',
+    version: '1.18.79',
     install,
     Calendar,
     Message,
@@ -76,6 +78,7 @@ export default {
     bizHeader,
     editor2,
     dragPopup,
-    bizTaskInfo
+    bizTaskInfo,
+    read
 };