zydx-plus 1.28.139 → 1.29.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.28.139",
+  "version": "1.29.140",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [
@@ -36,7 +36,8 @@
     "@tiptap/extension-text-style": "^2.0.3",
     "@tiptap/extension-color": "^2.0.3",
     "@vue-office/docx": "^1.1.3",
-    "@vue-office/excel": "^1.1.3"
+    "@vue-office/excel": "^1.1.3",
+    "fabric": "^5.3.0"
   },
   "peerDependencies": {
     "vue": "^3.2.13"

package/src/components/choice/src/choice.vue

@@ -40,7 +40,7 @@ export default {
     props: {
         value: {
             type: Array,
-            default: true
+            default: []
         }
     },
     watch: {
@@ -48,7 +48,8 @@ export default {
             handler(val) {
                 this.list = this.organize(val)
             },
-            deep: true
+            deep: true,
+            immediate: true
         }
     },
     mounted() {
@@ -113,6 +114,7 @@ export default {
     border: none;
     outline: none;
     padding: 0 30px 0 10px;
+    box-sizing: border-box;
 }
 .list-cont-input img{
     width: 18px;

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

@@ -104,12 +104,6 @@ export default defineComponent({
             this.syncContent() //强制同步数据
             const data = this.formData.html
             for(let i=0; i<data.length; i++) {
-                if(i === data.length - 1) {
-                    this.htmlArr.push(onePage)
-                    onePage = ''
-                    page = 0
-                    break
-                }
                 if(page >= 1162) {
                     this.htmlArr.push(onePage)
                     onePage = ''
@@ -160,6 +154,12 @@ export default defineComponent({
                     onePage += `<p onclick="closeMaker('${data[i].link}')" style="height: 24px;line-height: 24px; margin: 5px 0;display: inline-block; position: relative;"><img style="width: 20px; height: 22px; position: absolute; top: 0; left: 0;" src="${pdf}" alt="" /><span style="display: inline-block; padding-left: 25px;font-size: 14px;">${data[i].fileName}</span></p>`
                     page += 34
                 }
+                if(i === data.length - 1) {
+                    this.htmlArr.push(onePage)
+                    onePage = ''
+                    page = 0
+                    break
+                }
             }
         },
         closeMaker(data) {

package/src/components/preface/src/preface.vue

@@ -48,11 +48,12 @@ export default {
             handler: function (val, oldVal) {
                 this.updateData(val)
             },
+            deep: true,
             immediate: true
         }
     },
     mounted() {
-        this.updateData(this.value)
+        // this.updateData(this.value)
     },
     emits: ['change'],
     methods: {

package/src/components/sketchpad/src/sketchpad.vue

@@ -0,0 +1,434 @@
+<template>
+    <div class="sketchpad">
+        <canvas id="canvas"></canvas>
+        <div class="tool">
+            <div class="tool-list" @click="set">
+                <img src="./img/shezi.png" alt="" />
+                <div v-if="setShow" class="set">
+                    <div class="set-list">
+                        <span>线条粗细</span>
+                        <em v-for="(item,index) in strokeData" @click="strokeTap(item)">{{ item }}</em>
+                    </div>
+                    <div class="set-list">
+                        <span>线条颜色</span>
+                        <i v-for="(item,index) in strokeColor" @click="strokeColTap(item)" :style="{'background-color': item}"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="tool-list" @click="brush">
+                <img src="./img/huabi.png" alt="" />
+            </div>
+            <div class="tool-list" @click="rectangle">
+                <img src="./img/juxing.png" alt="" />
+            </div>
+            <div class="tool-list" @click="addTextBox">
+                <img src="./img/wenzi.png" alt="" />
+                <div v-if="textShow" class="set">
+                    <div class="set-list">
+                        <span>字号</span>
+                        <em style="font-size: 13px;" v-for="(item,index) in textData" @click.stop="sizeTap(item)">{{ item }}</em>
+                    </div>
+                    <div class="set-list">
+                        <span>内容</span>
+                        <input type="text" v-model="text" @click.stop="false" />
+                    </div>
+                    <div class="set-list set-right">
+                        <button class="but" @click="textBox">确认</button>
+                    </div>
+                </div>
+            </div>
+            <div class="tool-list" @click="rotundity">
+                <img src="./img/yuan.png" alt="" />
+            </div>
+            <div class="tool-list" @click="addLine">
+                <img src="./img/jian.png" alt="" />
+            </div>
+            <div class="tool-list" @click="arrow">
+                <img src="./img/jiantou.png" alt="" />
+            </div>
+            <div class="tool-list" @click="save">
+                <img src="./img/baocun.png" alt="" />
+            </div>
+            <div class="tool-list" @click="clear">
+                <img src="./img/xiangpi.png" alt="" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { fabric } from 'fabric'
+export default {
+    name: "zydx-sketchpad",
+    data() {
+        return {
+            canvas: null,
+            strokeWidth: 2, // 线条粗细
+            color: '#000', // 线条颜色
+            line: null, // 线条
+            isDown: false, // 是否按下
+            state: null, // 状态
+            rect: null, // 矩形
+            circle: null, // 圆形
+            fontSize: 14, // 字体大小
+            setShow: false, // 设置
+            strokeData: ['1','2','3','4','5','6','7'], // 画笔数据
+            strokeColor: ['#000','#f00','#0f0','#00f','#f0f','#ff0','#0ff'], // 画笔颜色
+            textShow: false, // 文本
+            textData: ['14','16','18','20','22','24','28','30'], // 文本数据
+            text: ''
+        }
+    },
+    props: {
+        width: {
+            type: Number,
+            default: 800
+        },
+        height: {
+            type: Number,
+            default: 800
+        }
+    },
+    emits: ['save'],
+    mounted() {
+        this.init()
+        window.addEventListener('keydown', this.handleKeyEvent)
+    },
+    beforeDestroy() {
+        window.removeEventListener('keydown', this.handleKeyEvent)
+    },
+    methods: {
+        sizeTap(v) {
+            this.fontSize = Number(v)
+        },
+        addTextBox() {
+            this.state = 'text'
+            this.setShow = false
+            this.textShow = !this.textShow
+        },
+        strokeColTap(v) {
+            this.color = v
+        },
+        strokeTap(v) {
+            this.strokeWidth = Number(v)
+        },
+        set() {
+            this.textShow = false
+            this.setShow = !this.setShow
+        },
+        init() {
+            this.canvas = new fabric.Canvas("canvas", {
+                isDrawingMode: false,
+                width: this.width,
+                height: this.height,
+            });
+            this.canvas.selectionColor = "rgba(255,255,255,0)";
+            // this.canvas.loadFromJSON(v)
+        },
+        // 画笔
+        brush() {
+            this.state = 'brush'
+            this.canvas.isDrawingMode = !this.canvas.isDrawingMode
+            this.canvas.freeDrawingBrush.width = this.strokeWidth
+            this.canvas.freeDrawingBrush.color = this.color
+        },
+        // 直线
+        addLine() {
+            this.canvas.isDrawingMode = false
+            this.state = 'line'
+            const id = Date.now()
+            this.canvas.on('mouse:down', (o) => {
+                if(o.target !== null) return
+                if(this.state !== 'line') return
+                this.isDown = true
+                const pointer = this.canvas.getPointer(o.e)
+                const points = [pointer.x, pointer.y, pointer.x, pointer.y]
+                this.line = new fabric.Line(points, {
+                    id: id,
+                    strokeWidth: this.strokeWidth,
+                    fill: this.color,
+                    stroke: this.color,
+                    originX: 'center',
+                    originY: 'center'
+                })
+                this.canvas.add(this.line)
+            })
+            this.canvas.on('mouse:move', (o) => {
+                if(this.state !== 'line') return
+                if (!this.isDown) return
+                const pointer = this.canvas.getPointer(o.e)
+                this.line.set({ x2: pointer.x, y2: pointer.y })
+                this.canvas.renderAll()
+            })
+
+            this.canvas.on('mouse:up', (o) => {
+                this.isDown = false
+                this.line.setCoords()
+            })
+        },
+        // 矩形
+        rectangle() {
+            this.canvas.isDrawingMode = false
+            this.state = 'rectangle'
+            const id = Date.now()
+            let origX, origY
+            this.canvas.on('mouse:down', (o) => {
+                if(o.target !== null) return
+                if(this.state !== 'rectangle') return
+                this.isDown = true
+                let pointer = this.canvas.getPointer(o.e)
+                origX = pointer.x
+                origY = pointer.y
+                this.rect = new fabric.Rect({
+                    id: id,
+                    left: origX,
+                    top: origY,
+                    originX: 'left',
+                    originY: 'top',
+                    width: pointer.x - origX,
+                    height: pointer.y - origY,
+                    angle: 0,
+                    fill: '',
+                    stroke: this.color,
+                    strokeWidth: this.strokeWidth
+                })
+                this.canvas.add(this.rect)
+            })
+            this.canvas.on('mouse:move', (o) => {
+                if(this.state !== 'rectangle') return
+                if (!this.isDown) return
+                let pointer = this.canvas.getPointer(o.e)
+
+                if (origX > pointer.x) {
+                    this.rect.set({ left: Math.abs(pointer.x) })
+                }
+                if (origY > pointer.y) {
+                    this.rect.set({ top: Math.abs(pointer.y) })
+                }
+                this.rect.set({ width: Math.abs(origX - pointer.x) })
+                this.rect.set({ height: Math.abs(origY - pointer.y) })
+                this.canvas.renderAll()
+            })
+            this.canvas.on('mouse:up', (o) => {
+                this.isDown = false
+                this.rect.setCoords()
+            })
+        },
+        // 圆形
+        rotundity() {
+            this.canvas.isDrawingMode = false
+            this.state = 'rotundity'
+            let origX, origY
+            this.canvas.on('mouse:down', (o) => {
+                if(o.target !== null) return
+                if(this.state !== 'rotundity') return
+                this.isDown = true
+                let pointer = this.canvas.getPointer(o.e)
+                origX = pointer.x
+                origY = pointer.y
+                this.circle = new fabric.Circle({
+                    left: origX,
+                    top: origY,
+                    originX: 'left',
+                    originY: 'top',
+                    radius: pointer.x - origX,
+                    angle: 0,
+                    fill: '',
+                    stroke: this.color,
+                    strokeWidth: this.strokeWidth
+                })
+                this.canvas.add(this.circle)
+            })
+            this.canvas.on('mouse:move', (o) => {
+                if(this.state !== 'rotundity') return
+                if (!this.isDown) return
+                let pointer = this.canvas.getPointer(o.e)
+                let radius =
+                    Math.max(
+                        Math.abs(origY - pointer.y),
+                        Math.abs(origX - pointer.x)
+                    ) / 2
+                if (radius > this.circle.strokeWidth) {
+                    radius -= this.circle.strokeWidth / 2
+                }
+                this.circle.set({ radius: radius })
+
+                if (origX > pointer.x) {
+                    this.circle.set({ originX: 'right' })
+                } else {
+                    this.circle.set({ originX: 'left' })
+                }
+                if (origY > pointer.y) {
+                    this.circle.set({ originY: 'bottom' })
+                } else {
+                    this.circle.set({ originY: 'top' })
+                }
+                this.canvas.renderAll()
+            })
+            this.canvas.on('mouse:up', () => {
+                this.isDown = false
+                this.circle.setCoords()
+            })
+        },
+        // 箭头
+        arrow() {
+            const id = Date.now()
+            const triangle = new fabric.Triangle({
+                width: 9,
+                height: 15,
+                fill: 'black',
+                left: 150,
+                top: 137,
+                angle: 90
+            })
+            const line = new fabric.Rect({
+                left: 100,
+                top: 140,
+                width: 40,
+                height: 3,
+                fill: 'black',
+                originX: 'left',
+                originY: 'top',
+                centeredRotation: true
+            })
+            const arrow = new fabric.Group([line, triangle], {
+                id: id,
+                left: this.canvas.width / 2,
+                top: this.canvas.height / 2,
+                angle: 0
+            })
+            this.canvas.add(arrow)
+        },
+        // 文本框
+        textBox() {
+            const id = Date.now()
+            this.textbox = new fabric.Textbox(this.text, {
+                id: id,
+                top: 200,
+                left: 200,
+                width: 10,
+                fill: this.color,
+                fontSize: this.fontSize,
+                color: this.color,
+                fontWeight: 400,
+                lineHeight: 1.5,
+                fontFamily: '微软雅黑',
+                textDecoration: 'none',
+                textAlign: 'left'
+            })
+            this.canvas.add(this.textbox)
+        },
+        save() {
+            this.$emit('save', this.canvas.toJSON())
+        },
+        clear() {
+            this.canvas.clear()
+        },
+        handleKeyEvent (e) {
+            const { key } = e
+            if (key === 'Backspace' || key === 'Delete') {
+                const el = this.canvas.getActiveObject()
+                if(el) this.canvas.remove(el)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+.sketchpad{
+    position: relative;
+}
+.tool{
+    position: absolute;
+    top: 50%;
+    left: -55px;
+    z-index: 1;
+    width: 50px;
+    padding: 15px;
+    border-radius: 10px;
+    box-shadow: 0 0 5px 3px rgba(0,0,0,0.3);
+    box-sizing: border-box;
+    background: #fff;
+    margin-top: -200px;
+}
+.tool-list{
+    width: 100%;
+    margin-bottom: 20px;
+    cursor: pointer;
+    position: relative;
+}
+.tool-list:last-child{
+    margin-bottom: 0;
+}
+.tool-list img{
+    width: 100%;
+}
+.set{
+    position: absolute;
+    top: 0;
+    left: 40px;
+    width: 280px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 5px 3px rgba(0,0,0,0.3);
+    padding: 10px;
+    z-index: 1;
+}
+.set-list{
+    padding: 5px 0;
+    font-size: 15px;
+}
+.set-list:after{
+    content: '';
+    display: block;
+    clear: both;
+}
+.set-list span{
+    margin-right: 10px;
+    float: left;
+}
+.set-list em{
+    font-style: normal;
+    font-size: 15px;
+    width: 16px;
+    display: inline-block;
+    margin-right: 10px;
+    text-align: center;
+}
+.set-list em:hover{
+    color: #5daf34;
+}
+.set-list i{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-color: #000;
+    margin: 2px 10px 0 0;
+    float: left;
+}
+.set-list input{
+    width: calc(100% - 60px);
+    height: 22px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 0 10px;
+    box-sizing: border-box;
+    float: left;
+}
+.but{
+    margin-left: 5px;
+    font-size: 12px;
+    background-color: transparent;
+    border: 1px solid #000;
+    border-radius: 3px;
+    padding: 2px 5px;
+    cursor: pointer;
+    min-width: 60px;
+    height: 21px;
+    margin-right: 20px;
+}
+.set-right{
+    text-align: right;
+}
+</style>

package/src/components/tipBox/index.js

@@ -8,7 +8,7 @@ render(divNode, document.body)
 const container = divNode.el
 
 // 导出函数可通过调用 Confirm() 函数动态创建 XtxConfirm 组件
-const Confirm = ({ type, url ,title,radioArr, promptContent, middle, cancelShow, inputArr }) => {
+const Confirm = ({ type, url ,title,radioArr,submitText, promptContent, middle, cancelShow, inputArr }) => {
     // 返回 Promise 对象
     return new Promise((resolve, reject) => {
         // 2. 点击确认按钮，触发resolve同时销毁组件
@@ -39,7 +39,7 @@ const Confirm = ({ type, url ,title,radioArr, promptContent, middle, cancelShow,
             reject('点击取消')
         }
         // 1. 创建 XtxConfirm 组件
-        const VNode = createVNode(XtxConfirm, { type, url ,title, promptContent,radioArr, middle, cancelShow, inputArr, submit, cancel })
+        const VNode = createVNode(XtxConfirm, { type, url ,title, submitText, promptContent,radioArr, middle, cancelShow, inputArr, submit, cancel })
         render(VNode, container)
     })
 }

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

@@ -63,7 +63,7 @@
                     </div>
                 </div>
                 <div class="tip-btnBox">
-                    <div @click="submit">确认</div>
+                    <div @click="submit">{{ submitText }}</div>
                     <div v-if="cancelShow" @click="cancel">取消</div>
                 </div>
             </div>
@@ -117,6 +117,10 @@ export default {
             type: Array,
             default: []
         },
+        submitText: { // 确认按钮
+            type: String,
+            default: '确认'
+        },
         // 确认按钮
         submit: {
             type: Function,

package/src/components/word/src/word.vue

@@ -6,7 +6,7 @@
                    <div class="subject-title">
                        <label>
                            <input v-if="multipleShow" type="checkbox" @change="checkboxChange($event,index)" name="check" />
-                           <span>{{ index + 1 }}.<em v-html="item.title"></em></span>
+                           <span>{{ item.order }}.<em v-html="item.title"></em></span>
                        </label>
                    </div>
                    <div class="subject-but" v-if="butShow">

package/src/index.js

@@ -27,6 +27,7 @@ import time from './components/time/index';
 import preface from './components/preface/index';
 import choice from './components/choice/index';
 import word from './components/word/index';
+import sketchpad from './components/sketchpad/index';
 
 const components = [
     Calendar,
@@ -55,7 +56,8 @@ const components = [
     time,
     preface,
     choice,
-    word
+    word,
+    sketchpad
 ];
 
 function install(app) {
@@ -67,7 +69,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.28.139',
+    version: '1.29.140',
     install,
     Calendar,
     Message,
@@ -97,6 +99,7 @@ export default {
     time,
     preface,
     choice,
-    word
+    word,
+    sketchpad
 };