zydx-plus 1.5.24 → 1.7.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.5.24",
+  "version": "1.7.25",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -21,7 +21,9 @@
   "author": "",
   "peerDependencies": {
     "vue": "^3.2.13",
-    "vue-draggable-next": "^2.1.1"
+    "vue-draggable-next": "^2.1.1",
+    "pdfjs-dist": "^3.4.120",
+    "flipbook-vue": "^1.0.0-beta.4"
   },
   "devDependencies": {
     "@vue/component-compiler-utils": "^2.6.0",

package/src/components/flip/index.js

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

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

@@ -0,0 +1,134 @@
+<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" :pages="imgArr" @flip-left-end="flipLeft" @flip-right-end="flipRight" v-slot="flipbook" :singlePage="singlePage" :ambient="0" :gloss="1" :dragToFlip="false" :pagesHiRes="0">
+        <div class="but">
+          <button class="but-brown" @click="flipbook.flipLeft">上一页</button>
+          <button class="but-brown" @click="flipbook.flipRight">下一页</button>
+        </div>
+      </flipbook>
+    </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: [],
+      hei: 0
+    }
+  },
+  props: {
+    source: {
+      type: String,
+      default: ''
+    },
+    singlePage: {
+      type: Boolean,
+      default: false
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.readPdf()
+    })
+  },
+  methods: {
+    flipLeft(e) {
+      this.$emit('flip',e)
+    },
+    flipRight(e) {
+      this.$emit('flip',e)
+    },
+    readPdf() {
+      let that = this
+      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)
+          });
+        }
+        setTimeout(() => {
+          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)
+          }
+        },0)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+#docView{
+  height: 100%;
+}
+.but-brown{
+  background-color: #c64c10;
+  padding: 0 20px;
+  font-size: 12px;
+  color: #fff;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 5px;
+  border: 0;
+  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;
+  }
+</style>

package/src/components/tipBox/index.js

@@ -16,7 +16,7 @@ const Confirm = ({ type, url ,title, promptContent, middle, cancelShow, inputArr
             let val = []
             if(type === 'input') {
                 for(let i=0; i< inputArr.length; i++) {
-                    if(inputArr[i].type === 'input') {
+                    if(inputArr[i].type === 'input' || inputArr[i].type === 'calender') {
                         val.push(inputArr[i].value)
                     }else {
                         val.push(inputArr[i].selectValue)

package/src/components/tipBox/src/main.vue

@@ -18,6 +18,10 @@
                 <div style="display: inline-block;">
                   <Select v-if="item.type === 'select'" :options="item.option" v-model:value="item.selectValue"></Select>
                 </div>
+                <div class="cal" v-if="item.type === 'calender'">
+                  <input type="text" :placeholder="item.placeholder" @focus="focus" v-model="item.value" :disabled="item.disabled" />
+                  <Calendar v-if="tip" style="top: 35px;" @confirm="confirm($event,item)"></Calendar>
+                </div>
                 <div v-if="item.type === 'text'" class="text">{{ item.value }}</div>
               </div>
             </div>
@@ -34,9 +38,15 @@
 
 <script>
 import Select from '../../select/src/select.vue'
+import Calendar from '../../calendar/src/Calendar'
 export default {
   name: 'zydx-tip-box',
-  components: {Select},
+  components: {Select,Calendar},
+  data() {
+    return {
+      tip: false
+    }
+  },
   props: {
     type: { // 弹窗的提示标题
       type: String,
@@ -75,6 +85,15 @@ export default {
       type: Function,
       default: () => {}
     }
+  },
+  methods: {
+    focus() {
+      this.tip = true
+    },
+    confirm(e,data) {
+      data.value = e.start
+      this.tip = false
+    },
   }
 }
 </script>

package/src/components/tipBox/src/zydxStyle.css

@@ -100,7 +100,7 @@ font-size: 12px;
   line-height: 30px;
   padding-right: 10px;
 }
-.tip-input>input{
+.tip-input input{
   width: 211px;
   height: 32px;
   box-sizing: border-box;
@@ -126,3 +126,7 @@ font-size: 12px;
   width: 210px;
   text-align: left;
 }
+.cal{
+  display: inline-block;
+  position: relative;
+}

package/src/components/treeList/index.js

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

package/src/components/treeList/src/treeList.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="list">
+    <div class="list-cont">
+      <div class="list-li" @click="listTap(item,index)" :class="{'list-active': active === index}" v-for="(item,index) in list" :key="index">
+        <div class="list-title">
+          <span>{{ index + 1 }}. {{ item[column[0].label] }}</span>
+          <button v-if="delShow" @click="del(item)">删除</button>
+        </div>
+        <div class="list-li-cont" v-if="active === index">
+          <p v-for="(it,ind) in column.slice(1, column.length)" :key="ind">{{ it.name }}：{{ item[it.label] }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "zydx-tree-list",
+  data() {
+    return {
+      active: 0,
+    }
+  },
+  props: {
+    list: { // 数据列表
+      type: Array,
+      default: () => []
+    },
+    column: { // 数据列表
+      type: Array,
+      default: () => []
+    },
+    delShow: { //是否显示取消按钮
+      type: Boolean,
+      default: false
+    },
+  },
+  methods: {
+    del() {
+      this.$emit('del',data)
+    },
+    listTap(data,index) {
+      this.active = index
+      this.$emit('confirm',data)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.list-title{
+  display: flex;
+  justify-content: center;
+  line-height: 30px;
+}
+.list-title>span{
+  flex: 1;
+}
+.list-title>button{
+  margin-left: 5px;
+  margin-top: 4px;
+  font-size: 12px;
+  background-color: transparent;
+  border: 1px solid #000;
+  border-radius: 3px;
+  padding: 2px 5px;
+  cursor: pointer;
+  height: 22px;
+  min-width: 60px;
+}
+.list{
+  padding: 0 10px;
+  cursor: pointer;
+}
+.list-li>span{
+  font-size: 16px;
+  line-height: 30px;
+}
+.list-li-cont{
+  font-size: 14px;
+  padding-left: 10px;
+}
+.list-active{
+  color: #e20808;
+}
+</style>

package/src/index.js

@@ -10,6 +10,8 @@ import Year from './components/year/index';
 import Table from './components/data_table/index';
 import buttonGroup from './components/buttonGroup/index';
 import spinner from './components/spinner/index';
+import treeList from './components/treeList/index';
+import flip from './components/flip/index';
 
 const components = [
     Calendar,
@@ -21,7 +23,9 @@ const components = [
     Select,
     Year,
     Table,
-    buttonGroup
+    buttonGroup,
+    treeList,
+    flip
 ];
 
 function install(app) {
@@ -33,7 +37,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.5.24',
+    version: '1.7.25',
     install,
     Calendar,
     Message,
@@ -46,6 +50,8 @@ export default {
     Select,
     Year,
     Table,
-    buttonGroup
+    buttonGroup,
+    treeList,
+    flip
 };