zydx-plus 1.17.77 → 1.18.79

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.17.77",
+  "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/biz_taskInfo/src/bizTaskInfo.vue

@@ -643,11 +643,6 @@
     align-items: center;
     justify-content: space-between;
 }
-
->>>.el-input__wrapper{
-        height: 30px;
-    }
-
 .el-select .el-input {
     width: 130px;
 }

package/src/components/dragPopup/src/dragPopup.vue

@@ -107,6 +107,8 @@ export default {
             this.isMove = false;
         },
         close() {
+            this.isMove = false
+            this.footIsMove = false
             this.$emit('close');
         }
     }
@@ -140,6 +142,7 @@ export default {
     z-index: 1;
     display: inline-block;
     cursor: ns-resize;
+    user-select: none;
 }
 .in{
     position: absolute;
@@ -150,6 +153,7 @@ export default {
     z-index: 1;
     display: inline-block;
     cursor: nwse-resize;
+    user-select: none;
 }
 .right{
     position: absolute;
@@ -160,6 +164,7 @@ export default {
     z-index: 1;
     display: inline-block;
     cursor: ew-resize;
+    user-select: none;
 }
 .drag-head i {
     position: absolute;
@@ -191,6 +196,7 @@ export default {
     color: #fff;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
+    user-select: none;
 }
 .drag-cont{
     height: calc(100% - 60px);

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

@@ -37,7 +37,7 @@ export default defineComponent({
     },
     readOnly: {
       type: Boolean,
-      default: true
+      default: false
     },
     butShow: {
       type: Boolean,
@@ -61,6 +61,11 @@ export default defineComponent({
     }
   },
   emits: ['confirm'],
+  watch: {
+    html() {
+       this.formData.html = this.html
+    }
+  },
   methods: {
     confirm() {
       this.syncContent() //强制同步数据

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,9 +105,19 @@ export default {
         uploadType: {
             type: Boolean,
             default: false
+        },
+        info: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['see','complete','update:data'],
+    watch:{
+        data(e) {
+            this.editor.commands.setContent(json2html({node: "root",child: (e.html === undefined)? [] : e.html}))
+            this.uploadAttData = (e.enclosure === undefined)? [] : e.enclosure
         }
     },
-    emits: ['see','complete'],
     mounted() {
         this.uploadAttData = (this.data.enclosure === undefined)? [] : this.data.enclosure
         this.heightStyle = (this.height === '100%')? {height: '100%'} : {'min-height': this.height}
@@ -162,7 +172,6 @@ export default {
             const file = e.target.files[0]
             if(this.uploadType) {
                 if(v === 'uploadAtt') {
-                    console.log(file)
                     this.uploadAttData.push(file)
                 }else {
                     this.uploadFile(file).then(r => {
@@ -219,7 +228,7 @@ export default {
         download(index) {
             const url = this.uploadImage.url + this.uploadAttData[index].filePath
             let a = document.createElement('a');
-            a.style = 'display: none';
+            a.style.display = 'none';
             a.download = this.uploadAttData[index].filename;
             a.href = url;
             document.body.appendChild(a);
@@ -308,7 +317,7 @@ export default {
 }
 .editor{
     border-radius: 3px;
-    padding: 20px;
+    padding: 10px;
     outline: none;
 }
 .editor img{

package/src/components/flip/src/flip.vue

@@ -1,16 +1,26 @@
 <template>
   <div id="docView">
-    <div class="pdf-container">
-      <canvas :id="'pdf-canvas'+ index" v-for="(item,index) in pdfPages" class="pdf-canvas"></canvas>
-    </div>
-    <div class="book">
-      <flipbook class="flipbook" :startPage="pageIndex" :pages="imgArr" @flip-left-end="flipLeft($event,false)" @flip-right-end="flipRight($event,false)" v-slot="flipbook" :singlePage="singlePage" :ambient="0" :gloss="1" :dragToFlip="false" :pagesHiRes="0">
-        <div class="but" v-if="butShow">
-          <button class="but-brown" :class="{'but-act': pageIndex === 1}" @click="flipbook.flipLeft">上一页</button>
-          <button class="but-brown" :class="{'but-act': pageIndex === pdfPages}" @click="flipbook.flipRight">下一页</button>
-        </div>
-      </flipbook>
-    </div>
+      <div v-show="show" class="load-pop">
+          <div class="load">
+              <span>文件较大耐心等待</span>
+              <div class="loading">
+                  <div class="loading-cont" :style="{'width': loadWidth +'%'}"></div>
+              </div>
+          </div>
+      </div>
+      <div v-show="!show" style="height: 100%;">
+          <div class="pdf-container">
+              <canvas :id="'pdf-canvas'+ index" v-for="(item,index) in pdfPages" class="pdf-canvas"></canvas>
+          </div>
+          <div class="book">
+              <flipbook class="flipbook" :startPage="pageIndex" :pages="imgArr" @flip-left-end="flipLeft($event,false)" @flip-right-end="flipRight($event,false)" v-slot="flipbook" :singlePage="singlePage" :ambient="0" :gloss="1" :dragToFlip="false" :pagesHiRes="0">
+                  <div class="but" v-if="butShow">
+                      <button class="but-brown" :class="{'but-act': pageIndex === 1}" @click="flipbook.flipLeft">上一页</button>
+                      <button class="but-brown" :class="{'but-act': pageIndex === pdfPages}" @click="flipbook.flipRight">下一页</button>
+                  </div>
+              </flipbook>
+          </div>
+      </div>
   </div>
 </template>
 
@@ -26,7 +36,10 @@ export default {
       pdfPages: 0,
       imgArr: [],
       hei: 0,
-      pageIndex: this.page
+      pageIndex: this.page,
+      show: false,
+      load: 0,
+      loadWidth: 0
     }
   },
   props: {
@@ -74,6 +87,7 @@ export default {
       },
       readPdf() {
           let that = this
+          if(that.pdfPages > 30) that.show = true
           const loadingTask = PdfJs.getDocument(this.source)
           loadingTask.promise.then((pdf) => {
               that.pdfPages = pdf.numPages // 获取pdf文件的总页数
@@ -95,13 +109,28 @@ export default {
                           viewport: viewport
                       }
                       page.render(renderContext)
+                      if(that.pdfPages > 30) {
+                          that.load = i + 1
+                          that.loadWidth = Math.floor(that.load / that.pdfPages * 100)
+                      }
                   });
               }
-              setTimeout(() => {
+              setTimeout(function () {
                   for (let i = 0; i < that.pdfPages; i++) {
                       const canvas = document.getElementById('pdf-canvas' + i)
                       const dataURL = canvas.toDataURL("image/jpeg", 1); //获取Base64编码
                       that.imgArr.push(dataURL)
+                      that.load = i + 1
+                      if(that.pdfPages > 30) {
+                          if(that.load >= that.pdfPages) {
+                              setTimeout(() => {
+                                  that.show = false
+                                  that.load = 0
+                              },100)
+                          }else {
+                              that.loadWidth = Math.floor(that.load / that.pdfPages * 100)
+                          }
+                      }
                   }
               }, 500)
           })
@@ -111,6 +140,40 @@ export default {
 </script>
 
 <style scoped>
+.load-pop{
+  width: 100%;
+  height: 100%;
+    display: flex;
+    align-items: center;
+}
+.load{
+  display: inline-block;
+    margin: 0 auto;
+}
+.load>span{
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 10px;
+    font-size: 14px;
+}
+.loading{
+    width: 200px;
+    height: 10px;
+    border-radius: 20px;
+    position: relative;
+    overflow: hidden;
+    background-color: #ccc;
+}
+.loading-cont{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+    background-color: #5daf34;
+    height: 100%;
+    border-radius: 20px;
+}
 #docView{
   height: 100%;
 }

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/components/tipBox/src/zydxStyle.css

@@ -5,7 +5,7 @@
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.2);
-  z-index: 200;
+  z-index: 2000;
   display: flex;
   align-items: center;
 }

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