zydx-plus 1.32.192 → 1.32.194

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.32.192",
+  "version": "1.32.194",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

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

@@ -35,7 +35,7 @@
                     <img :src="menusData('signMenu')?.ico" alt=""/>
                     <span>{{ menusData('signMenu')?.text }}</span>
                 </div>
-                <editor-content id="test" class="editing-cont" :editor="editor"></editor-content>
+                <editor-content class="editing-cont" :editor="editor"></editor-content>
             </div>
         </div>
         <div class="complete" v-if="!readOnly && toolbar.length > 0">
@@ -59,6 +59,12 @@
                 <button class="but" @click="imgCancel">取消</button>
             </div>
         </div>
+        <div v-if="loading" class="loading-back">
+            <div class="loading-cont">
+                <div class="loadings">Loading</div>
+            </div>
+        </div>
+        <div class="down-html" id="test" v-html="htmlArr2"></div>
     </div>
 </template>
 
@@ -98,7 +104,9 @@ export default {
             imgType: '', // 图片类型
             htmlArr: [],
             editableShow: true,
-            wit: 0
+            wit: 0,
+            htmlArr2: [],
+            loading: false
         }
     },
     props: {
@@ -248,8 +256,9 @@ export default {
     },
     emits: ['confirm', 'enclosure'],
     methods: {
-        signMenu() { // 签名菜单
+        signMenu(next) { // 签名菜单
             this.signMenuShow = !this.signMenuShow
+            next(this.signMenuShow)
         },
         titleMenu(next) { // 标题菜单
             next(this.classShow('title'))
@@ -269,7 +278,8 @@ export default {
         classShow(v) {
             if(!this.readOnly) return
             let state = false
-            const cls = document.getElementsByClassName(v)
+            const ed = document.getElementsByClassName('z-editor')[0]
+            const cls = ed.getElementsByClassName(v)
             for (let i = 0; i < cls.length; i++) {
                 if (cls[i].style.display === 'none') {
                     cls[i].style.display = 'block'
@@ -282,19 +292,66 @@ export default {
             this.readOnlyPage()
             return state
         },
+        // 下载word
         exportToWord() {
-            const wrap = document.getElementById('test')
-            const config = {
-                addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
-                fileName: this.fileName, // 导出文件名
-                // toImg:['.editor-img'], // 页面哪些部分需要转化成图片，例如echart图表之类
-                success() {
-                    console.log('导出成功')
-                } // 完成之后回调，一般页面篇幅比较大，时间比较长
+            let that = this
+            that.loading = true
+            that.htmlArr2 = ''
+            let arr = []
+            let imgArr = []
+            let imgIndex = 0
+            const data = document.querySelectorAll('.editing-cont')[0].childNodes[0].childNodes
+            for (let i = 0; i < data.length; i++) {
+                if(data[i].firstChild.localName === 'img') {
+                    that.imgBase64(data[i]).then(res => {
+                        imgArr.push(res)
+                    })
+                    arr.push(imgIndex)
+                    imgIndex++
+                }else {
+                    arr.push(data[i].outerHTML)
+                }
             }
-            exportWord(wrap, config)
+            setTimeout(() => {
+                for (let i = 0; i < arr.length; i++) {
+                    if(typeof arr[i] === 'number') {
+                        that.htmlArr2 += imgArr[arr[i]]
+                    }else {
+                        that.htmlArr2 += arr[i]
+                    }
+                }
+                setTimeout(() => {
+                    const wrap = document.getElementById('test')
+                    const config = {
+                        addStyle: true, // 是否导出样式，默认为true，此操作会将所有样式转换成行内样式导出
+                        fileName: this.fileName, // 导出文件名
+                        // toImg:['.editor-img'], // 页面哪些部分需要转化成图片，例如echart图表之类
+                        success() {
+                            that.loading = false
+                        } // 完成之后回调，一般页面篇幅比较大，时间比较长
+                    }
+                    exportWord(wrap, config)
+                },100)
+            },1000)
+
         },
-        readOnlyPage() {
+        imgBase64 (data) {
+            return new Promise((res, rej) => {
+                const img = new Image()
+                img.src = data.firstChild.src
+                img.crossOrigin= 'anonymous' // 解决跨域
+                img.onload = function () {
+                    const canvas = document.createElement('canvas')
+                    canvas.width = img.width
+                    canvas.height = img.height
+                    const ctx = canvas.getContext('2d')
+                    ctx.drawImage(img, 0, 0, img.width, img.height)
+                    const dataURL = canvas.toDataURL('image/png')
+                    res(`<p class="img-cont"><img class="editor-img" src="${dataURL}" alt="" /></p>`)
+                }
+            })
+        },
+        readOnlyPage() { // 只读分页
             this.htmlArr = []
             const data = document.querySelectorAll('.editing-cont')[0].childNodes[0].childNodes
             this.wit = document.getElementsByClassName('editor-content')[0].offsetWidth
@@ -456,8 +513,13 @@ export default {
                         })
                     } else {
                         up.customInsert(res, (data) => {
-                            const html = `<p><img src="${data}" alt="" /></p>`
+                            const cla = this.randomId()
+                            const html = `<p class="imgCont ${cla}"><img src="${data}" alt="" /></p>`
                             this.editor.chain().focus().insertContentAt(this.selection(), html).run()
+                            if(this.selection() <= 6) this.selectionClass2(cla)
+                            if(this.selectionClass(cla)) {
+                                this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
+                            }
                         })
                     }
                     up.onSuccess(file, res) // 上传成功回调
@@ -497,8 +559,40 @@ export default {
         imgConfirm() {
             this.imgPop = false
             if (this.imgUrl === '') return
-            const html = `<p><img src="${this.imgUrl}" alt="" /></p>`
+            const cla = this.randomId()
+            const html = `<p class="imgCont ${cla}"><img src="${this.imgUrl}" alt="" /></p>`
             this.editor.chain().focus().insertContentAt(this.selection(), html).run()
+            if(this.selection() <= 6) this.selectionClass2(cla)
+            if(this.selectionClass(cla)) {
+                this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
+            }
+        },
+        randomId() {
+            const id = Math.random().toString(36).substr(2)
+            return id.replace(/[0-9]/g, '')
+        },
+        // 查询class
+        selectionClass(v) {
+            const json = this.editor.getJSON()
+            for (let i = 0; i < json.content.length; i++) {
+                const val = json.content[i].attrs?.titleId?.split(' ')[1]
+                if (val === v) {
+                    if(json.content[i+1] === undefined) return true
+                    break
+                }
+            }
+            return false
+        },
+        selectionClass2(v) {
+            const json = this.editor.getJSON()
+            for (let i = 0; i < json.content.length; i++) {
+                const val = json.content[i].attrs?.titleId?.split(' ')[1]
+                if (val === v) {
+                    json.content.splice(i - 1, 1)
+                    this.editor?.commands.setContent(json)
+                    break
+                }
+            }
         },
         // 取消图片地址
         imgCancel() {
@@ -698,6 +792,24 @@ export default {
 </script>
 
 <style scoped>
+:deep(.ProseMirror-separator) {
+    display: none !important;
+}
+.down-html{
+    position: fixed;
+    top: -9999px;
+    left: 0;
+    z-index: -1;
+    width: 798px;
+    padding: 100px;
+    background-color: #fff;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    margin: 10px 10px 20px 10px;
+}
+.down-html :deep(img){
+    padding: 5px 0;
+}
 .read-only {
     position: relative;
     margin: 0 auto;
@@ -749,6 +861,9 @@ label {
 :deep(.editor-img) {
     max-width: 100%;
 }
+:deep(.imgCont) {
+    line-height: 0 !important;
+}
 
 .img-pop {
     position: absolute;
@@ -824,7 +939,10 @@ label {
 }
 
 .editing-cont :deep(p) {
-    line-height: 25px;
+    line-height: 30px;
+}
+.editing-cont :deep(img) {
+    padding: 5px 0;
 }
 
 li {
@@ -922,4 +1040,50 @@ li {
     width: 794px;
     min-height: 1123px;
 }
+.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;
+}
+.loadings {
+    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;
+}
+
+.loadings::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/components/editor2/src/editor.vue

@@ -264,6 +264,10 @@ export default {
                 return x
             })
         },
+        randomId() { // 生成随机id
+            const id = Math.random().toString(36).substr(2)
+            return id.replace(/[0-9]/g, '')
+        },
         del(index) {
             if(this.uploadAttData[index].name === undefined) {
                 this.uploadAttData[index].active = false
@@ -339,26 +343,36 @@ export default {
         },
         imgHtml(data) {
             const url = this.uploadImage.url + data
-            const html = [
-                {
-                    node: "element",
-                    tag: "p",
-                    child: [{
-                        attr: {
-                            src: url,
-                            width:"100%"
-                        },
-                        tag: 'img',
-                        node: "element",
-                    }],
-                }
-            ]
-            this.insertContent(html)
+            const cla = this.randomId()
+            const html = `<p class="imgCont ${cla}"><img src="${url}" alt="" /></p>`
+            this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+            console.log(this.selection())
+            if(this.selection() <= 6) this.selectionClass2(cla)
+            if(this.selectionClass(cla)) {
+                this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
+            }
         },
-        insertContent(v) {
-            for(let i=0; i< v.length; i++) {
-                let html = json2html(v[i])
-                this.editor.chain().focus().insertContentAt(this.selection(),html).run()
+        // 查询class
+        selectionClass(v) {
+            const json = this.editor.getJSON()
+            for (let i = 0; i < json.content.length; i++) {
+                const val = json.content[i].attrs?.titleId?.split(' ')[1]
+                if (val === v) {
+                    if(json.content[i+1] === undefined) return true
+                    break
+                }
+            }
+            return false
+        },
+        selectionClass2(v) {
+            const json = this.editor.getJSON()
+            for (let i = 0; i < json.content.length; i++) {
+                const val = json.content[i].attrs?.titleId?.split(' ')[1]
+                if (val === v) {
+                    json.content.splice(i - 1, 1)
+                    this.editor?.commands.setContent(json)
+                    break
+                }
             }
         },
         enclosureContent(v) {
@@ -423,21 +437,27 @@ export default {
 </script>
 
 <style scoped>
+:deep(.imgCont) {
+    line-height: 0 !important;
+}
+:deep(.ProseMirror-separator) {
+    display: none !important;
+}
 .editor :deep(h1) {
-    line-height: 25px;
+    line-height: 30px;
     font-size: 18px;
 }
 .editor :deep(h2) {
-    line-height: 25px;
+    line-height: 30px;
     font-size: 16px;
 }
 .editor :deep(h3) {
-    line-height: 25px;
+    line-height: 30px;
     font-size: 14px;
 }
 .editor :deep(p) {
     font-size: 14px;
-    line-height: 25px;
+    line-height: 30px;
 }
 :deep(.ProseMirror) p.is-editor-empty:first-child::before {
     content: attr(data-placeholder);
@@ -457,7 +477,8 @@ export default {
     pointer-events: none;
 }
 :deep(.editor-img){
-    max-width: 100%;
+    max-width: calc(100% - 4em);
+    padding: 2px 0;
 }
 .editor-but{
     text-align: right;
@@ -512,12 +533,12 @@ export default {
     padding: 5px 0;
 }
 .ed-cont{
-    padding: 10px 0;
+    padding: 5px 0 0;
 }
 .editor{
     border-radius: 3px;
-    padding: 10px;
     outline: none;
+    text-indent: 2em;
 }
 .editor img{
     max-width: 100%;

package/src/components/question/src/question.vue

@@ -176,8 +176,12 @@ export default {
         },
         getContent() {
             let arr = []
+            let state = false
             for(let i=0; i< this.question.length; i++) {
-                if(this.question[i].allScore === '-' || this.question[i].count === '-') continue;
+                if(this.question[i].allScore === '-' || this.question[i].count === '-') {
+                    state = true
+                    continue;
+                }
                 arr.push({
                     ...this.question[i],
                     easyScore: this.question[i].easy? this.question[i].easyScore: '',
@@ -191,6 +195,7 @@ export default {
             return {
                 data: arr,
                 total: this.totalNum,
+                state: state
             }
         },
         // 添加数据

package/src/components/textarea/src/textarea.vue

@@ -89,8 +89,9 @@ export default {
    .text{
        width: 100%;
        border: 1px solid #ccc;
-       padding: 10px;
+       line-height: 30px;
        box-sizing: border-box;
+       text-indent: 2em;
        background-color: #fff;
    }
 .text[contenteditable]:empty:before {

package/src/index.js

@@ -77,7 +77,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.192',
+    version: '1.32.194',
     install,
     Calendar,
     Message,