From 5510b1d732f47f0f81878115b1d707948be73a66 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 9 Oct 2022 17:43:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E5=AF=8C=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6=E5=92=8C=E5=AF=8C?=
 =?UTF-8?q?=E6=96=87=E6=9C=AC=E8=A7=86=E5=9B=BE=E6=94=AF=E6=8C=81=E8=87=AA?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/custom-component/DeRichText.vue    |  29 +++-
 .../custom-component/DeRichTextView.vue       | 135 ++++++++++--------
 .../canvas/custom-component/UserView.vue      |   1 +
 3 files changed, 105 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/canvas/custom-component/DeRichText.vue b/frontend/src/components/canvas/custom-component/DeRichText.vue
index 97798dc30d..ed115ae0c9 100644
--- a/frontend/src/components/canvas/custom-component/DeRichText.vue
+++ b/frontend/src/components/canvas/custom-component/DeRichText.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rich-main-class" @dblclick="setEdit">
+  <div class="rich-main-class" :style="autoStyle" @dblclick="setEdit">
     <Editor
       v-if="editShow"
       :id="tinymceId"
@@ -39,6 +39,10 @@ export default {
     Editor
   },
   props: {
+    terminal: {
+      type: String,
+      default: 'pc'
+    },
     propValue: {
       type: String,
       require: true
@@ -93,11 +97,31 @@ export default {
     }
   },
   computed: {
+    scale(){
+      return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+    },
     editStatus() {
       return this.editMode === 'edit' && !this.mobileLayoutStatus
     },
+    autoStyle() {
+      return {
+        height: (100 / this.scale) + '%!important',
+        width: (100 / this.scale) + '%!important',
+        left: 50 * (1 - 1 / this.scale) + '%', //放大余量 除以 2
+        top: 50 * (1 - 1 / this.scale) + '%',
+        transform: 'scale(' + this.scale + ')'
+      }
+    },
+    scaleCoefficient() {
+      if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
+        return 1.1
+      } else {
+        return 4.5
+      }
+    },
     ...mapState([
-      'mobileLayoutStatus'
+      'mobileLayoutStatus',
+      'previewCanvasScale'
     ])
   },
   watch: {
@@ -146,6 +170,7 @@ export default {
     width: 100%;
     height: 100%;
     overflow-y: auto!important;
+    position: relative;
   }
   ::-webkit-scrollbar {
     width: 0px!important;
diff --git a/frontend/src/components/canvas/custom-component/DeRichTextView.vue b/frontend/src/components/canvas/custom-component/DeRichTextView.vue
index cdf84b1ad9..61de151790 100644
--- a/frontend/src/components/canvas/custom-component/DeRichTextView.vue
+++ b/frontend/src/components/canvas/custom-component/DeRichTextView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rich-main-class" @dblclick="setEdit">
+  <div class="rich-main-class" :style="autoStyle" @dblclick="setEdit">
     <Editor
       v-if="editShow"
       :id="tinymceId"
@@ -41,6 +41,11 @@ export default {
     Editor
   },
   props: {
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
+    },
     element: {
       type: Object
     },
@@ -85,9 +90,9 @@ export default {
         plugins: 'advlist autolink link image lists charmap  media wordcount table contextmenu directionality pagebreak', // 插件
         // 工具栏
         toolbar: 'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough link| formatselect |' +
-            'alignleft aligncenter alignright | bullist numlist |' +
-            ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
-            '| bdmap indent2em lineheight formatpainter axupimgs',
+          'alignleft aligncenter alignright | bullist numlist |' +
+          ' blockquote subscript superscript removeformat | table image media | fullscreen ' +
+          '| bdmap indent2em lineheight formatpainter axupimgs',
         toolbar_location: '/',
         font_formats: '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
         fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', // 字体大小
@@ -102,6 +107,15 @@ export default {
     editStatus() {
       return this.editMode === 'edit' && !this.mobileLayoutStatus
     },
+    autoStyle() {
+      return {
+        height: (100 / this.scale) + '%!important',
+        width: (100 / this.scale) + '%!important',
+        left: 50 * (1 - 1 / this.scale) + '%', //放大余量 除以 2
+        top: 50 * (1 - 1 / this.scale) + '%',
+        transform: 'scale(' + this.scale + ')'
+      }
+    },
     ...mapState([
       'mobileLayoutStatus'
     ])
@@ -121,23 +135,23 @@ export default {
       }
     },
     myValue(newValue) {
-      this.initReady&&this.$store.commit('canvasChange')
+      this.initReady && this.$store.commit('canvasChange')
     }
   },
   mounted() {
-   this.viewInit()
+    this.viewInit()
   },
   beforeDestroy() {
     bus.$off('fieldSelect-' + this.element.propValue.viewId)
   },
   methods: {
-    viewInit(){
+    viewInit() {
       bus.$on('fieldSelect-' + this.element.propValue.viewId, this.fieldSelect)
       tinymce.init({})
       this.myValue = this.assignment(this.element.propValue.textValue)
       bus.$on('initCurFields-' + this.element.id, this.initCurFieldsChange)
-      this.$nextTick(()=>{
-        this.initReady=true
+      this.$nextTick(() => {
+        this.initReady = true
       })
     },
     initCurFieldsChange() {
@@ -154,45 +168,45 @@ export default {
           content = content.replace(itm, _this.dataRowNameSelect[ele] !== undefined ? _this.dataRowNameSelect[ele] : '[无法获取字段值]')
         })
       }
-      content = content.replace('class="base-selected"','')
+      content = content.replace('class="base-selected"', '')
       this.resetSelect()
       return content
     },
     fieldSelect(field) {
       const ed = tinymce.editors[this.tinymceId]
-      const fieldId = 'changeText-'+uuid.v1()
-      const value = '<span id="'+fieldId+'"><span class="mceNonEditable" contenteditable="false" data-mce-content="['+field.name +']">[' + field.name + ']</span></span>'
+      const fieldId = 'changeText-' + uuid.v1()
+      const value = '<span id="' + fieldId + '"><span class="mceNonEditable" contenteditable="false" data-mce-content="[' + field.name + ']">[' + field.name + ']</span></span>'
       const attachValue = '<span id="attachValue">&nbsp;</span>'
       ed.insertContent(value)
       ed.insertContent(attachValue)
     },
     onClick(e) {
-      const edInner = tinymce.get(this.tinymceId);
+      const edInner = tinymce.get(this.tinymceId)
       const node = tinymce.activeEditor.selection.getNode()
       this.resetSelect(node)
     },
-    resetSelect(node){
-      const edInner = tinymce.get(this.tinymceId);
-      if(edInner.dom){
-        const nodeArray = edInner.dom.select(".base-selected")
-        if(nodeArray){
-          nodeArray.forEach(nodeInner=>{
+    resetSelect(node) {
+      const edInner = tinymce.get(this.tinymceId)
+      if (edInner.dom) {
+        const nodeArray = edInner.dom.select('.base-selected')
+        if (nodeArray) {
+          nodeArray.forEach(nodeInner => {
             nodeInner.removeAttribute('class')
           })
         }
-        if(node){
+        if (node) {
           const pNode = node.parentElement
-          if(pNode && pNode.id&& pNode.id.indexOf('changeText')>-1){
-            const innerId = '#'+pNode.id
+          if (pNode && pNode.id && pNode.id.indexOf('changeText') > -1) {
+            const innerId = '#' + pNode.id
             const domTest = edInner.dom.select(innerId)[0]
-            domTest.setAttribute("class",'base-selected')
+            domTest.setAttribute('class', 'base-selected')
             edInner.selection.select(domTest)
           }
         }
       }
     },
     setEdit() {
-      if (this.editStatus&&this.canEdit===false) {
+      if (this.editStatus && this.canEdit === false) {
         this.canEdit = true
         this.element['editing'] = true
         this.myValue = this.element.propValue.textValue
@@ -215,40 +229,45 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rich-main-class {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto!important;
-  }
-  ::-webkit-scrollbar {
-    width: 0px!important;
-    height: 0px!important;
-  }
-  ::v-deep ol {
-    display: block!important;
-    list-style-type: decimal;
-    margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
-  }
-  ::v-deep ul {
-    display: block!important;
-    list-style-type: disc;
-    margin-block-start: 1em!important;
-    margin-block-end: 1em!important;
-    margin-inline-start: 0px!important;
-    margin-inline-end: 0px!important;
-    padding-inline-start: 40px!important;
-  }
-  ::v-deep li {
-    display: list-item!important;
-    text-align: -webkit-match-parent!important;
-  }
+.rich-main-class {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto !important;
+  position: relative;
+}
 
-  ::v-deep .base-selected{
-   background-color: #b4d7ff
-  }
+::-webkit-scrollbar {
+  width: 0px !important;
+  height: 0px !important;
+}
+
+::v-deep ol {
+  display: block !important;
+  list-style-type: decimal;
+  margin-block-start: 1em !important;
+  margin-block-end: 1em !important;
+  margin-inline-start: 0px !important;
+  margin-inline-end: 0px !important;
+  padding-inline-start: 40px !important;
+}
+
+::v-deep ul {
+  display: block !important;
+  list-style-type: disc;
+  margin-block-start: 1em !important;
+  margin-block-end: 1em !important;
+  margin-inline-start: 0px !important;
+  margin-inline-end: 0px !important;
+  padding-inline-start: 40px !important;
+}
+
+::v-deep li {
+  display: list-item !important;
+  text-align: -webkit-match-parent !important;
+}
+
+::v-deep .base-selected {
+  background-color: #b4d7ff
+}
 </style>
 
diff --git a/frontend/src/components/canvas/custom-component/UserView.vue b/frontend/src/components/canvas/custom-component/UserView.vue
index 6b19314033..1a1fe4287a 100644
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -45,6 +45,7 @@
     <de-rich-text-view
       v-else-if="richTextViewShowFlag"
       :ref="element.propValue.id"
+      :scale="scale"
       :element="element"
       :prop-value="element.propValue.textValue"
       :active="active"