zydx-plus 1.32.191 → 1.32.193

package/package.json

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

package/src/components/editor/src/butJson.js

@@ -18,10 +18,10 @@ export function butJson (editor,data) {
                 {name: '(左)黑体5号', key: 'blackLeft5'},
             ],
             html: {
-                blackCenter4: `<p data-signId="title-1" class="${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
-                blackLeft4: `<p data-signId="title-2" class="${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
-                blackCenter5: `<p data-signId="title-3" class="${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
-                blackLeft5: `<p data-signId="title-4" class="${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackCenter4: `<p data-signId="title-1" class="title ${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackLeft4: `<p data-signId="title-2" class="title ${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 16px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackCenter5: `<p data-signId="title-3" class="title ${randomId()}" style="text-align: center;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
+                blackLeft5: `<p data-signId="title-4" class="title ${randomId()}" style="text-align: left;"><span style="font-weight: 700;color: rgb(0, 0, 0);font-size: 14px;font-family: SimHei">${menusData(data,'titleMenu').text}</span></p>`,
             }
         },
         textMenu: {
@@ -32,8 +32,8 @@ export function butJson (editor,data) {
                 {name: '楷体5号', key: 'regular5'},
             ],
             html: {
-                Song5: `<p style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: SimSun">请输入正文</span></p>`,
-                regular5: `<p style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">请输入正文</span></p>`,
+                Song5: `<p class="text" style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: SimSun">请输入正文</span></p>`,
+                regular5: `<p class="text" style="text-align: left;"><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">请输入正文</span></p>`,
             }
         },
         redMenu: {
@@ -46,7 +46,7 @@ export function butJson (editor,data) {
             name: '添加作者',
             key: 'authorMenu',
             menuKeys: [],
-            html: `<p <p contenteditable="false" data-signId="author" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 14px;">${menusData(data,'authorMenu').text}</span></p>`
+            html: `<p contenteditable="false" class="author" data-signId="author" style="text-align: center;"><span style="color: rgb(0, 0, 0);font-size: 14px;">${menusData(data,'authorMenu').text}</span></p>`
         },
         subjectMenu: {
             name: '添加题目',
@@ -70,13 +70,13 @@ export function butJson (editor,data) {
             name: '关键词',
             key: 'keywordMenu',
             menuKeys: [],
-            html: `<p><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键词：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">关键词内容...</span></p>`
+            html: `<p class="keyword"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关键词：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">关键词内容...</span></p>`
         },
         abstractMenu: {
             name: '添加摘要',
             key: 'abstractMenu',
             menuKeys: [],
-            html: `<p><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;摘要：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">摘要内容...</span></p>`
+            html: `<p class="abstract"><span style="color: rgb(0, 0, 0);font-size: 14px;font-weight: 700;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;摘要：</span><span style="color: rgb(0, 0, 0);font-size: 14px;font-family: KaiTi">摘要内容...</span></p>`
         },
         literatureMenu: {
             name: '添加文献',

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

@@ -29,13 +29,13 @@
                 </div>
             </div>
         </div>
-        <div class="editor-content" v-show="editableShow">
+        <div class="editor-content" :class="{'editor-content-show': !editableShow}">
             <div class="editing">
                 <div class="editing-header" v-if="signMenuShow">
                     <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">
@@ -46,7 +46,7 @@
                 <img :src="menusData('signMenu')?.ico" alt=""/>
                 <span>{{ menusData('signMenu')?.text }}</span>
             </div>
-            <div class="read-only-page" v-for="(item,index) in htmlArr">
+            <div class="read-only-page" :style="{height: wit * 1.4 + 'px',width: wit + 'px'}" v-for="(item,index) in htmlArr">
                 <div class="read-only-p" v-html="item"></div>
                 <div class="read-only-a">{{ index + 1 }}/{{ htmlArr.length }}</div>
             </div>
@@ -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>
 
@@ -97,7 +103,10 @@ export default {
             imgUrl: '', // 图片地址
             imgType: '', // 图片类型
             htmlArr: [],
-            editableShow: true
+            editableShow: true,
+            wit: 0,
+            htmlArr2: [],
+            loading: false
         }
     },
     props: {
@@ -169,7 +178,7 @@ export default {
                 })
                 if (this.page) {
                     this.editableShow = !e
-                    this.readOnlyPage()
+                    this.readOnlyPage() // 只读分页
                 }
             },
             deep: true
@@ -247,25 +256,118 @@ export default {
     },
     emits: ['confirm', 'enclosure'],
     methods: {
+        signMenu(next) { // 签名菜单
+            this.signMenuShow = !this.signMenuShow
+            next(this.signMenuShow)
+        },
+        titleMenu(next) { // 标题菜单
+            next(this.classShow('title'))
+        },
+        authorMenu(next) { // 作者菜单
+            next(this.classShow('author'))
+        },
+        abstractMenu(next) { // 摘要菜单
+            next(this.classShow('abstract'))
+        },
+        keywordMenu(next) { // 关键词菜单
+            next(this.classShow('keyword'))
+        },
+        textMenu(next) { // 文本菜单
+            next(this.classShow('text'))
+        },
+        classShow(v) {
+            if(!this.readOnly) return
+            let state = false
+            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'
+                    state = false
+                } else {
+                    cls[i].style.display = 'none'
+                    state = true
+                }
+            }
+            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
-            let max = 950
+            this.wit = document.getElementsByClassName('editor-content')[0].offsetWidth
+            let max = this.wit * 1.4 - 200
             let pHeight = 0
             let html = ''
             for (let i = 0; i < data.length; i++) {
+                if(data[i].firstChild.localName === 'img') {
+                    const img = data[i].firstChild
+                    const imgHeight = img.offsetHeight
+                    if((pHeight + imgHeight) > max) {
+                        this.htmlArr.push(html)
+                        pHeight = 0
+                        html = ''
+                    }
+                }
                 let text = data[i].offsetHeight
                 if (data[i].dataset?.signid === 'ack') {
                     this.htmlArr.push(html)
@@ -274,14 +376,16 @@ export default {
                 }
                 if ((pHeight + text) > max) {
                     const {start, end} = this.rows(data[i], max - pHeight)
-                    html += `<p>${start}</p>`
+                    html += `<p>${start.data}</p>`
                     this.htmlArr.push(html)
                     pHeight = 0
                     html = ''
-                    html += `<p>${end}</p>`
+                    html += `<p>${end.data}</p>`
+                    pHeight = end.size
+                }else {
+                    pHeight += text
+                    html += data[i].outerHTML
                 }
-                pHeight += text + 5
-                html += data[i].outerHTML
                 if (i === data.length - 1) {
                     this.htmlArr.push(html)
                     pHeight = 0
@@ -294,13 +398,17 @@ export default {
             let size = parseInt(window.getComputedStyle(data, null).fontSize)
             let line = parseInt(window.getComputedStyle(data, null).lineHeight)
             let width = data.offsetWidth
+            let height = data.offsetHeight
             let rows = Math.round(num / line)  // 行数
             let text = data.innerText
-            let len = this.measureText(text,size)
-            let textLen = Math.round((width / (len/text.length)) * rows)
+            let len = this.measureText(text,size) // 文本宽度
+            let textLen = Math.round((width / (len/text.length)) * rows) // 文本长度
             let start = text.slice(0, textLen)
             let end = text.slice(textLen)
-            return {start, end}
+            return {
+                start: {data: start, size: num},
+                end: {data: end, size: height - num}
+            }
         },
         measureText (text, fontSize=10) {
             text = String(text);
@@ -405,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) // 上传成功回调
@@ -446,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() {
@@ -647,21 +792,37 @@ 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;
-    width: 794px;
     margin: 0 auto;
 }
 
 .read-only-page {
     width: 100%;
-    height: 1123px;
     padding: 100px;
     background-color: #fff;
     box-sizing: border-box;
     position: relative;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    margin: 20px 0;
+    border: 1px solid #ccc;
+    margin: 10px 10px 20px 10px;
 }
 
 .read-only-p {
@@ -675,7 +836,7 @@ export default {
 
 .read-only-a {
     position: absolute;
-    bottom: 25px;
+    bottom: 70px;
     left: 50%;
     z-index: 1;
     font-size: 14px;
@@ -700,6 +861,9 @@ label {
 :deep(.editor-img) {
     max-width: 100%;
 }
+:deep(.imgCont) {
+    line-height: 0 !important;
+}
 
 .img-pop {
     position: absolute;
@@ -746,7 +910,7 @@ label {
 .editing-header {
     position: absolute;
     top: 10px;
-    left: 10px;
+    left: 20px;
     display: flex;
     z-index: 1;
 }
@@ -775,7 +939,10 @@ label {
 }
 
 .editing-cont :deep(p) {
-    line-height: 25px;
+    line-height: 30px;
+}
+.editing-cont :deep(img) {
+    padding: 5px 0;
 }
 
 li {
@@ -853,6 +1020,12 @@ li {
     margin: 10px;
     border: 1px solid rgba(204, 204, 204, 1);
 }
+.editor-content-show{
+    position: fixed;
+    top: -9999px;
+    left: 0;
+    z-index: -1;
+}
 
 .editing {
     width: 794px;
@@ -867,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,7 +89,7 @@ export default {
    .text{
        width: 100%;
        border: 1px solid #ccc;
-       padding: 10px;
+       line-height: 30px;
        box-sizing: border-box;
        background-color: #fff;
    }

package/src/index.js

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