zydx-plus 1.19.91 → 1.19.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.19.91",
+  "version": "1.19.93",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -22,7 +22,6 @@
   "dependencies": {
     "vue-draggable-next": "^2.1.1",
     "pdfjs-dist": "^2.0.943",
-    "flipbook-vue": "^1.0.0-beta.4",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/plugin-upload-attachment": "^1.1.0",
     "snabbdom": "^3.5.1",

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

@@ -59,8 +59,8 @@ export default {
         }
     },
     mounted() {
-        let clientWidth = window.outerWidth;
-        let clientHeight = window.outerHeight;
+        let clientWidth = document.documentElement.clientWidth;
+        let clientHeight = document.documentElement.clientHeight;
         this.x = clientWidth / 2 - this.footDownOffset / 2;
         this.y = clientHeight / 2 - this.footRightOffset / 2;
     },

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

@@ -24,7 +24,7 @@
                 <p v-if="editorShow">附件列表：</p>
                 <div class="enclosure-list" v-for="(item,index) in uploadAttData">
                     <div class="enclosure-item">
-                        <span>{{ index + 1 }}. {{ (item.name)? item.name : item.fileName }}</span>
+                        <span>{{ index + 1 }}. {{ (item.name)? item.name : item.annexName }}</span>
                     </div>
                     <div class="enclosure-item en-but">
                         <div style="display: inline-block; height: 21px;">
@@ -73,6 +73,7 @@
     </div>
 </template>
 <script>
+
 import { html2json, json2html } from 'html2json'
 import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
@@ -191,8 +192,16 @@ export default {
         del(index) {
             if(this.uploadAttData[index].name === undefined) {
                 this.uploadAttData[index].active = false
-                this.$emit('del', this.uploadAttData[index], () => {
-                    this.uploadAttData.splice(index, 1)
+                this.$emit('del', this.uploadAttData[index], (e) => {
+                    if(e === undefined) {
+                        this.uploadAttData.splice(index, 1)
+                    }else {
+                        if(e) {
+                            this.uploadAttData.splice(index, 1)
+                        }else {
+                            this.uploadAttData[index].active = true
+                        }
+                    }
                 })
             }else {
                 this.uploadAttData.splice(index, 1)

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

@@ -1,45 +1,46 @@
 <template>
   <div id="docView">
-      <div v-show="show" class="load-pop">
-          <div class="load">
-              <span>文件较大耐心等待</span>
-              <div class="loading">
-                  <div class="loading-cont" :style="{'width': loadWidth +'%'}"></div>
+      <div style="height: 100%;">
+          <div class="book">
+              <div class="pages">
+                  <div class="wrap" id="canvas-wrap"></div>
+                  <div class="page-but-left" :style="{cursor: pageIndex === 1?'default':'pointer'}" @click="flipLeft(pageIndex-=1,false)"></div>
+                  <div class="page-but-right" :style="{cursor: pageIndex === pdfPages?'default':'pointer'}" @click="flipRight(pageIndex+=1,false)"></div>
+<!--                  <div class="paper z-in" :class="{'data-right': pages}">-->
+<!--                      <div class="page page-2" id="canvas-wrap1"></div>-->
+<!--                      <div class="page page-2-back" id="canvas-wrap2"></div>-->
+<!--                  </div>-->
+<!--                  <div class="paper z-in-ac">-->
+<!--                      <div class="page page-2" id="canvas-wrap3"></div>-->
+<!--                      <div class="page page-2-back" id="canvas-wrap4"></div>-->
+<!--                  </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 class="but-wrap" v-if="butShow">
+              <button class="but-brown" :disabled="pageIndex === 1" :class="{'but-act': pageIndex === 1}" @click="flipLeft(pageIndex-=1,false)">上一页</button>
+              <button class="but-brown" :disabled="pageIndex === pdfPages" :class="{'but-act': pageIndex === pdfPages}" @click="flipRight(pageIndex+=1,false)">下一页</button>
           </div>
       </div>
   </div>
 </template>
 
 <script>
-import flipbook from 'flipbook-vue'
 import * as PdfJs from 'pdfjs-dist/legacy/build/pdf.js' // 注意导入的写法
 PdfJs.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')
 export default {
   name: "zydx-flip",
-  components: {flipbook},
   data() {
     return {
       pdfPages: 0,
-      imgArr: [],
+      imgArr: {},
       hei: 0,
       pageIndex: this.page,
       show: false,
       load: 0,
-      loadWidth: 0
+      loadWidth: 0,
+      pages: false,
+      pagesData: [],
+      opacity: 1
     }
   },
   props: {
@@ -60,79 +61,67 @@ export default {
       default: 1
     }
   },
+  watch: {
+      page: {
+         handler: function (val, oldVal) {
+            this.pageIndex = val
+         },
+         immediate: true
+      }
+  },
   emits: ['flip'],
   mounted() {
-    this.$nextTick(() => {
-      this.readPdf()
-    })
+     this.readPdf()
   },
   methods: {
       flipLeft(e,v) {
-          this.pageIndex = e
+          if(e <= 1) {
+              this.pageIndex = 1
+          }else {
+              this.pageIndex = e
+          }
+          this.readPdf()
           if(!v) {
               this.$emit('flip', {
-                  page: e,
+                  page: this.pageIndex,
                   total: this.pdfPages
               })
           }
       },
       flipRight(e,v) {
-          this.pageIndex = e
+          if(e >= this.pdfPages) {
+              this.pageIndex = this.pdfPages
+          }else {
+              this.pageIndex = e
+          }
+          this.readPdf()
           if(!v) {
               this.$emit('flip', {
-                  page: e,
+                  page: this.pageIndex,
                   total: this.pdfPages
               })
           }
       },
       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文件的总页数
-              for (let i = 0; i < that.pdfPages; i++) {
-                  pdf.getPage(i + 1).then(function (page) {
-                      const canvas = document.getElementById('pdf-canvas' + i)
-                      const ctx = canvas.getContext('2d')
-                      const dpr = window.devicePixelRatio || 1
-                      const bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
-                      const ratio = dpr / bsr
-                      const viewport = page.getViewport({scale: 1})
-                      canvas.width = viewport.width * ratio
-                      canvas.height = viewport.height * ratio
-                      canvas.style.width = viewport.width + 'px'
-                      canvas.style.height = viewport.height + 'px'
-                      ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
-                      const renderContext = {
-                          canvasContext: ctx,
-                          viewport: viewport
-                      }
-                      page.render(renderContext)
-                      if(that.pdfPages > 30) {
-                          that.load = i + 1
-                          that.loadWidth = Math.floor(that.load / that.pdfPages * 100)
-                      }
-                  });
-              }
-              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)
+              pdf.getPage(that.pageIndex).then(function (page) {
+                  let viewport = page.getViewport({scale: 1})
+                  document.getElementById('canvas-wrap').innerHTML = ''
+                  let container = document.createElement('div')
+                  container.style.width = viewport.width + 'px'
+                  container.style.height = viewport.height + 'px'
+                  container.style.margin = '0 auto'
+                  document.getElementById('canvas-wrap').appendChild(container)
+                  return page.getOperatorList().then(function(opList) {
+                      let svgGfx = new PdfJs.SVGGraphics(page.commonObjs, page.objs)
+                      return svgGfx.getSVG(opList, viewport).then(function(svg) {
+                          container.appendChild(svg)
+                      })
+                  })
+              })
           })
       }
   }
@@ -140,39 +129,90 @@ export default {
 </script>
 
 <style scoped>
-.load-pop{
-  width: 100%;
-  height: 100%;
-    display: flex;
-    align-items: center;
+.wrap{
+    width: 100%;
+    height: 100%;
 }
-.load{
-  display: inline-block;
-    margin: 0 auto;
+.but-wrap{
+    text-align: center;
 }
-.load>span{
-    display: inline-block;
+.z-in{
+    z-index: 2;
+}
+.z-in-ac{
+    z-index: 1;
+}
+.pages{
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.paper{
+    position: absolute;
+    right: 0;
+    transform-style: preserve-3d;
     width: 100%;
+}
+.page{
+    position: absolute;
     text-align: center;
-    padding-bottom: 10px;
-    font-size: 14px;
 }
-.loading{
-    width: 200px;
-    height: 10px;
-    border-radius: 20px;
-    position: relative;
-    overflow: hidden;
-    background-color: #ccc;
+.page img{
+    width: 100%;
+    height: 100%;
+}
+.data-right {
+    opacity: 1;
+    transform-origin: left center;
+    animation: flip-to-left 1.5s ease-in-out forwards;
 }
-.loading-cont{
+.data-left{
+    right: auto;
+    left: 0;
+}
+@keyframes flip-to-left {
+    0% {
+        transform: perspective(3000px) rotateY(0);
+    }
+    95% {
+        transform: perspective(3000px) rotateY(-180deg);
+    }
+    100% {
+        transform: perspective(3000px) rotateY(-180deg);
+    }
+}
+.page-1-back, .page-2-back {
+    transform: scale(-1, 1);
+}
+.page-1, .page-2 {
+    transform: translateZ(1px);
+}
+
+
+
+
+.page-but-left{
     position: absolute;
     top: 0;
+    bottom: 0;
     left: 0;
     z-index: 1;
-    background-color: #5daf34;
-    height: 100%;
-    border-radius: 20px;
+    width: 10%;
+}
+.page-but-right{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    width: 10%;
+}
+.load>span{
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 10px;
+    font-size: 14px;
 }
 #docView{
   height: 100%;
@@ -189,33 +229,10 @@ export default {
   cursor: pointer;
   margin-left: 10px;
 }
-.but{
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  text-align: center;
-}
 .book{
   width: 100%;
   height: 100%;
 }
-.flipbook {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  padding-bottom: 24px;
-}
-.pdf-container{
-  position: relative;
-}
-  .pdf-canvas{
-    position: absolute;
-    top: -100000px;
-    left: 0;
-    z-index: -100;
-  }
   .but-act{
     background-color: #bbbbbb;
     color: #fff;

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

@@ -1,7 +1,7 @@
 <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%;" />
+      <vue-office-docx v-if="fileType === 'docx'" :src="url" style="height: 100%;" @rendered="renderedHandler" />
+      <vue-office-excel v-if="fileType === 'xlsx'" :src="url" style="height: 100%;" @rendered="renderedHandler" />
       <div class="view-pdf" v-if="fileType === 'pdf'" id="canvas-wrap"></div>
       <div class="mp4" v-if="fileType === 'mp4'">
           <video :src="url" controls></video>
@@ -9,6 +9,11 @@
       <div class="mp3" v-if="fileType === 'mp3'">
           <audio :src="url" controls></audio>
       </div>
+      <div v-if="loading" class="loading-back">
+          <div class="loading-cont">
+              <div class="loading">Loading</div>
+          </div>
+      </div>
   </div>
 </template>
 
@@ -32,7 +37,9 @@ export default {
             PdfJs: null,
             svgArr: [],
             container: null,
-            pdfPages: 0
+            pdfPages: 0,
+            loading: true,
+            repeat: false,
         }
     },
     props: {
@@ -44,17 +51,28 @@ export default {
     watch: {
         url: {
             handler: function (val, oldVal) {
-                this.fileType = val.split('.').pop()
-                if(this.fileType === 'pdf') this.init()
+                this.repeatInit()
             },
             immediate: true
         }
     },
     mounted() {
-        this.fileType = this.url.split('.').pop()
-        if(this.fileType === 'pdf') this.init()
+        this.repeatInit()
     },
     methods: {
+        repeatInit() {
+            if(this.repeat) return // 防止重复加载
+            this.repeat = true
+            this.loading = true
+            this.fileType = this.url.split('.').pop()
+            if(this.fileType === 'pdf') this.init()
+            setTimeout(() => {
+                this.repeat = false
+            },1000)
+        },
+        renderedHandler() {
+            this.loading = false
+        },
         init() {
             let that = this
             const loadingTask = PdfJs.getDocument(this.url)
@@ -106,6 +124,7 @@ export default {
                 document.getElementById('canvas-wrap').appendChild(container)
                 container.appendChild(x.data)
             })
+            this.renderedHandler()
         },
     }
 }
@@ -130,6 +149,7 @@ export default {
 .read{
     width: 100%;
     height: 100%;
+    position: relative;
 }
 :deep(.vue-office-docx)::-webkit-scrollbar {
     width: 0
@@ -137,4 +157,50 @@ export default {
 :deep(.docx-wrapper) {
     background-color: #fff;
 }
+.loading-back{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+}
+.loading-cont{
+    display: inline-block;
+    margin: 0 auto;
+}
+.loading {
+    display: inline-block;
+    font-size: 28px;
+    font-family: Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    color: #fff;
+    text-shadow: 0 0 2px #ff3d00, 0 0 1px #ff3d00, 0 0 1px #ff3d00;
+    letter-spacing: 2px;
+    position: relative;
+}
+
+.loading::after {
+    content: "Loading";
+    position: absolute;
+    left: 0;
+    top: 0;
+    color: #ff3d00;
+    width: 0%;
+    height: 100%;
+    overflow: hidden;
+    animation: loading-animation 6s linear infinite;
+}
+
+@keyframes loading-animation {
+    0% {
+        width: 0%;
+    }
+
+    100% {
+        width: 100%;
+    }
+}
 </style>

package/src/index.js

@@ -57,7 +57,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.19.91',
+    version: '1.19.93',
     install,
     Calendar,
     Message,