From c3608e5ec2ac6ccc8099dfc90768fb61f1379dbc Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 23 Dec 2021 12:02:14 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=AA=E8=A1=A8=E6=9D=BF?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=97=B6=E5=8F=AF=E4=BB=A5=E4=BD=BF=E8=BF=87?=
 =?UTF-8?q?=E6=BB=A4=E7=BB=84=E4=BB=B6=E5=A4=B1=E5=8E=BB=E7=84=A6=E7=82=B9?=
 =?UTF-8?q?=E9=9A=90=E8=97=8F=E5=BC=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/Preview.vue      |  6 +++++-
 .../src/components/widget/DeWidget/DeDate.vue | 20 ++++++++++++++++++-
 .../components/widget/DeWidget/DeSelect.vue   | 18 +++++++++++++++--
 frontend/src/views/panel/edit/index.vue       |  1 +
 4 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index f1194a6d84..9a57c62d50 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg" :style="customStyle">
+  <div class="bg" :style="customStyle" @scroll="canvasScroll">
     <div id="canvasInfoMain" ref="canvasInfoMain" :style="canvasInfoMainStyle">
       <div
         id="canvasInfoTemp"
@@ -65,6 +65,7 @@ import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
 import CanvasOptBar from '@/components/canvas/components/Editor/CanvasOptBar'
 import UserViewMobileDialog from '@/components/canvas/custom-component/UserViewMobileDialog'
+import bus from '@/utils/bus'
 
 export default {
   components: { UserViewMobileDialog, ComponentWrapper, UserViewDialog, CanvasOptBar },
@@ -314,6 +315,9 @@ export default {
     },
     initMobileCanvas() {
       this.$store.commit('openMobileLayout')
+    },
+    canvasScroll() {
+      bus.$emit('onScroll')
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index 1f9ca1bfb8..4f331b26c2 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -13,12 +13,15 @@
     :size="size"
     :editable="false"
     @change="dateChange"
+    @focus="toFocus"
+    @blur="onBlur"
   />
 </template>
 
 <script>
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import { timeSection } from '@/utils'
+import bus from "@/utils/bus";
 export default {
 
   props: {
@@ -40,7 +43,9 @@ export default {
   data() {
     return {
       operator: 'between',
-      values: null
+      values: null,
+      onFocus: false
+
     }
   },
   computed: {
@@ -100,7 +105,20 @@ export default {
       this.dateChange(this.values)
     }
   },
+  mounted() {
+    bus.$on('onScroll', () => {
+      if (this.onFocus) {
+        this.$refs.dateRef.hidePicker()
+      }
+    })
+  },
   methods: {
+    onBlur() {
+      this.onFocus = false
+    },
+    toFocus() {
+      this.onFocus = true
+    },
     search() {
       this.setCondition()
     },
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index 62a8f31835..a5b27fd0c6 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -12,6 +12,7 @@
     :size="size"
     @change="changeValue"
     @focus="setOptionWidth"
+    @blur="onBlur"
   >
     <el-option
       v-for="item in datas"
@@ -28,6 +29,7 @@
 
 <script>
 import { multFieldValues } from '@/api/dataset/dataset'
+import bus from '@/utils/bus'
 export default {
 
   props: {
@@ -52,7 +54,8 @@ export default {
       selectOptionWidth: 0,
       show: true,
       value: null,
-      datas: []
+      datas: [],
+      onFocus: false
     }
   },
   computed: {
@@ -105,8 +108,18 @@ export default {
   created() {
     this.initLoad()
   },
+  mounted() {
+    bus.$on('onScroll', () => {
+      if (this.onFocus) {
+        this.$refs.deSelect.blur()
+      }
+    })
+  },
 
   methods: {
+    onBlur() {
+      this.onFocus = false
+    },
     initLoad() {
       this.value = this.fillValueDerfault()
       this.datas = []
@@ -181,7 +194,8 @@ export default {
       })
     },
     setOptionWidth(event) {
-    // 下拉框弹出时，设置弹框的宽度
+      this.onFocus = true
+      // 下拉框弹出时，设置弹框的宽度
       this.$nextTick(() => {
         this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
       })
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 981b7402b2..ff2fa96334 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -887,6 +887,7 @@ export default {
     canvasScroll(event) {
       this.scrollLeft = event.target.scrollLeft
       this.scrollTop = event.target.scrollTop
+      bus.$emit('onScroll')
     },
     destroyTimeMachine() {
       this.timeMachine && clearTimeout(this.timeMachine)