zydx-plus 1.32.246 → 1.32.248

package/package.json

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

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="z-editor">
+    <div class="z-editor" ref="only">
         <div class="editor-header" v-show="!readOnly">
             <div class="editor-but" v-for="(item,index) in butData">
                 <div class="editor-but-name" v-if="item.key === 'group-upload'">
@@ -36,17 +36,27 @@
                     <span>{{ menusData('signMenu')?.text }}</span>
                 </div>
                 <editor-content class="editing-cont" :editor="editor"></editor-content>
+                <div class="menu">
+                    <button class="but" @click="enlSee" v-if="readOnly">查看</button>
+                    <button class="but" @click="enlDownload" v-if="readOnly">下载</button>
+                    <button class="but" @click="enlDel" v-if="!readOnly">删除</button>
+                </div>
             </div>
         </div>
         <div class="complete" v-if="!readOnly && toolbar.length > 0">
             <button class="but" v-if="butShow" @click="confirm">完成</button>
         </div>
         <div class="read-only" v-if="page&&readOnly" :style="{width: (wit + 20) + 'px'}">
+            <div class="menus" v-if="menus&&readOnly" :style="menusStyle">
+                <button class="but" @click="enlSee" v-if="readOnly">查看</button>
+                <button class="but" @click="enlDownload" v-if="readOnly">下载</button>
+                <button class="but" @click="enlDel" v-if="!readOnly">删除</button>
+            </div>
             <div class="editing-header" v-if="signMenuShow">
                 <img :src="menusData('signMenu')?.ico" alt=""/>
                 <span>{{ menusData('signMenu')?.text }}</span>
             </div>
-            <div class="read-only-page" :style="{height: wit * 1.4 + 'px',width: wit + 'px'}" v-for="(item,index) in htmlArr">
+            <div class="read-only-page" @click="menusTap" :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>
@@ -82,11 +92,13 @@ import Color from '@tiptap/extension-color'
 import FontFamily from "@tiptap/extension-font-family";
 import Superscript from "@tiptap/extension-superscript";
 import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import BubbleMenu from '@tiptap/extension-bubble-menu'
 import Link from "@tiptap/extension-link";
 import {FontSize} from "./extend/font-size";
 import {signId} from "./extend/sign-id";
 import {Contenteditable} from "./extend/contenteditable";
 import {titleId} from "./extend/title-id";
+import {dataUrl} from "./extend/data-url";
 
 export default {
     name: 'zydx-editor',
@@ -106,7 +118,14 @@ export default {
             editableShow: true,
             wit: 0,
             htmlArr2: [],
-            loading: false
+            loading: false,
+            encIndex: {},
+            init: false,
+            menus: false,
+            menusStyle: {
+                top: '0px',
+                left: '0px'
+            }
         }
     },
     props: {
@@ -154,6 +173,7 @@ export default {
     watch: {
         html: {
             handler: function (e, oldVal) {
+                this.init = false
                 if (e[0]?.tag === 'sign') {
                     this.signMenuShow = true
                     e.shift()
@@ -168,6 +188,9 @@ export default {
                         }
                     }, 300)
                 }
+                setTimeout(() => {
+                    this.init = true
+                }, 500)
             },
             deep: true,
         },
@@ -207,6 +230,18 @@ export default {
                 TextStyle, // 文本样式
                 Superscript, // 上标
                 titleId, // 标题id
+                dataUrl,
+                BubbleMenu.configure({
+                    element: document.querySelector('.menu'),
+                    shouldShow: ({ editor, view, state, oldState, from, to }) => {
+                        _this.encIndex = state.selection.$from.parent.attrs
+                        if(_this.init) {
+                            return state.selection.$from.parent.attrs.titleId === 'mu'
+                        }else {
+                            return false
+                        }
+                    },
+                }),
                 Link.configure({
                     HTMLAttributes: {
                         class: 'custom-link',
@@ -260,8 +295,28 @@ export default {
         })
         _this.organizeButton()
     },
-    emits: ['confirm', 'enclosure'],
+    emits: ['confirm', 'enclosure','enlDownload','enlSee'],
     methods: {
+        // 下载附件
+        enlDownload() {
+            this.$emit('enlDownload', this.encIndex)
+        },
+        // 查看附件
+        enlSee() {
+            this.$emit('enlSee', this.encIndex)
+        },
+        // 删除附件
+        enlDel() {
+            const json = this.editor.getJSON()
+            for (let i = 0; i < json.content.length; i++) {
+                const val = json.content[i].attrs?.signId
+                if (val === this.encIndex.signId) {
+                    json.content.splice(i, 1)
+                    this.editor?.commands.setContent(json)
+                    break
+                }
+            }
+        },
         signMenu(next) { // 签名菜单
             this.signMenuShow = !this.signMenuShow
             next(this.signMenuShow)
@@ -405,6 +460,27 @@ export default {
                     break
                 }
             }
+            // 绑定点击事件
+            setTimeout(() => {
+                this.documentClick()
+            }, 1000)
+        },
+        documentClick() {
+            const p = document.getElementsByClassName('mu')
+            for (let i = 0; i < p.length; i++) {
+                p[i].onclick = (e) => {
+                    e.stopPropagation()
+                    this.menus = true
+                    const only = this.$refs.only.getBoundingClientRect() // 获取div的位置
+                    this.menusStyle = {
+                        top: `${e.clientY - only.top - 40}px`,
+                        left: `${e.clientX - only.left - 60}px`
+                    }
+                }
+            }
+        },
+        menusTap() {
+            this.menus = false
         },
         rows(data,num) {
             let size = parseInt(window.getComputedStyle(data, null).fontSize)
@@ -530,12 +606,12 @@ export default {
                                 const last = this.editor.state.selection.$anchor.path[0].content.size
                                 if (t === -1) this.editor.chain().focus().insertContentAt(last, html).run()
                                 const num = this.upSort(this.editor, 'enclosure')
-                                const html2 = `<p contenteditable="false" data-signId="u-${num.num}"><a href="${url}" ><span>${num.num}. ${name}</span></a></p>`
+                                const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}"><span class="mu">${num.num}. ${name}</span></p>`
                                 this.editor.chain().focus().insertContentAt(num.len, html2).run()
                             } else {
                                 if (t === -1) this.editor.chain().focus().insertContentAt(this.selectionPath('paragraph', b - 1), html).run()
                                 const num = this.upSort(this.editor, 'enclosure')
-                                const html2 = `<p contenteditable="false" data-signId="u-${num.num}"><a href="${url}" ><span>${num.num}. ${name}</span></a></p>`
+                                const html2 = `<p contenteditable="false" data-signId="u-${num.num}" data-url="${url}"><span class="mu">${num.num}. ${name}</span></p>`
                                 this.editor.chain().focus().insertContentAt(num.len, html2).run()
                             }
                         })
@@ -947,8 +1023,8 @@ label {
 
 .editing-header {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 5px;
+    left: 5px;
     display: flex;
     z-index: 1;
 }
@@ -979,6 +1055,9 @@ label {
 :deep(.custom-link) {
     margin: 10px 0;
 }
+:deep(.mu) {
+    cursor: pointer;
+}
 
 .editing-cont :deep(p) {
     line-height: 24px;
@@ -1141,4 +1220,18 @@ li {
         width: 100%;
     }
 }
+.menu{
+    background-color: #fff;
+    padding: 5px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+}
+.menus{
+    background-color: #fff;
+    padding: 5px;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+    position: absolute;
+    z-index: 10;
+}
 </style>

package/src/components/editor/src/extend/data-url.js

@@ -0,0 +1,33 @@
+import { Extension } from '@tiptap/core'
+
+export const dataUrl = Extension.create({
+    name: 'dataUrl',
+
+    addOptions() {
+        return {
+            types: ['heading', 'paragraph'],
+        }
+    },
+
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    dataUrl: {
+                        default: null,
+                        parseHTML: element => element.getAttribute('data-url'),
+                        renderHTML: attributes => {
+                            if (!attributes.dataUrl) {
+                                return {}
+                            }
+                            return {
+                                'data-url': attributes.dataUrl,
+                            }
+                        },
+                    },
+                },
+            },
+        ]
+    }
+})

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

@@ -554,6 +554,7 @@ export default {
 }
 .ed-cont{
     padding-top: 4px;
+    margin-bottom: 14px;
 }
 .editor{
     border-radius: 3px;

package/src/index.js

@@ -79,7 +79,7 @@ function install(app) {
 }
 
 export default {
-    version: '1.32.246',
+    version: '1.32.248',
     install,
     Calendar,
     Message,