Merge pull request #1502 from dataease/pr@dev@refactor_panel-mb

refactor: 仪表板滚动时可以使过滤组件失去焦点隐藏弹框

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')
     }
   }
 }

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()
     },

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'
       })

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)