From c8814f9daacd8dfdf920a92ab428d47baadd846c Mon Sep 17 00:00:00 2001
From: fit2cloudrd <reaperww@gmail.com>
Date: Mon, 27 Dec 2021 16:34:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=87=E6=9C=AC=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=E9=A2=84=E8=A7=88=E5=92=8C=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E6=97=B6=E6=98=BE=E7=A4=BA=E4=B8=8D=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=20(#1529)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: 文本搜索组件在预览和编辑时显示不一致
---
 .../components/Editor/ComponentWrapper.vue    |  1 +
 .../src/components/dataease/DeOutWidget.vue   | 32 +++++++++++++------
 .../panel/filter/filterMain/FilterControl.vue |  4 ++-
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index 7bcaac1c3e..7a6e9092ab 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -15,6 +15,7 @@
       :out-style="config.style"
       :element="config"
       :in-screen="inScreen"
+      :edit-mode="'preview'"
       :h="config.style.height"
     />
     <component
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index 081e402d0d..c08686c29e 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -44,6 +44,7 @@
 
 <script>
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { mapState } from 'vuex'
 export default {
   name: 'DeOutWidget',
   props: {
@@ -63,6 +64,11 @@ export default {
     h: {
       type: Number,
       default: 50
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'edit'
     }
   },
   data() {
@@ -70,26 +76,30 @@ export default {
       inputMaxSize: 46,
       inputLargeSize: 42,
       inputSmallSize: 38,
-      inputMiniSize: 34,
+      inputMiniSize: 32,
       options: null,
       showNumber: false,
-      mainClass: ''
+      mainClass: '',
+      mainHeight: 75,
+      duHeight: 46
     }
   },
   computed: {
     sizeInfo() {
       let size
-      if (this.h > this.inputMaxSize) {
-        return size
-      } else if (this.h > this.inputLargeSize) {
+      if (this.duHeight > this.inputMaxSize) {
+      } else if (this.duHeight > this.inputLargeSize) {
         size = 'medium'
-      } else if (this.h > this.inputSmallSize) {
+      } else if (this.duHeight > this.inputSmallSize) {
         size = 'small'
       } else {
         size = 'mini'
       }
       return size
-    }
+    },
+    ...mapState([
+      'curCanvasScale'
+    ])
   },
   mounted() {
     this.watchSize()
@@ -102,12 +112,16 @@ export default {
     watchSize() {
       const erd = elementResizeDetectorMaker()
       erd.listenTo(this.$refs.myContainer, ele => {
+        const deContentContainer = this.$refs.deContentContainer
+        const height = ele.offsetHeight
+        this.mainHeight = height
         if (!this.element.options.attrs.title) {
+          this.duHeight = this.mainHeight
+          deContentContainer.style.marginLeft = '0px'
           return
         }
-        const height = ele.offsetHeight
         const titleWidth = this.$refs.deTitle.offsetWidth
-        const deContentContainer = this.$refs.deContentContainer
+        this.duHeight = height - titleWidth
         this.$nextTick(() => {
           let min = this.element.style.fontSize * 2 + 50
           if (this.element.component === 'de-number-range') {
diff --git a/frontend/src/views/panel/filter/filterMain/FilterControl.vue b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
index 02a0ad3e20..0560e88138 100644
--- a/frontend/src/views/panel/filter/filterMain/FilterControl.vue
+++ b/frontend/src/views/panel/filter/filterMain/FilterControl.vue
@@ -67,6 +67,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'FilterControl',
   props: {
@@ -116,7 +118,7 @@ export default {
     showTitleChange(value) {
       if (!value) {
         this.attrs.title = ''
-        // this.componentInfo.style.backgroundColor = ''
+        this.element.style.backgroundColor = ''
       }
       this.fillAttrs2Filter()
     },