Merge pull request #2816 from dataease/pr@dev@feat_filter_reset_button

feat(仪表板-清空按钮): 一键清空查询按钮绑定的过滤条件

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -265,6 +265,11 @@ export default {
       } else {
         return null
       }
+    },
+    clearHandler() {
+      if (this.$refs.deOutWidget && this.$refs.deOutWidget.clearHandler) {
+        this.$refs.deOutWidget.clearHandler()
+      }
     }
   }
 }

frontend/src/components/canvas/components/Editor/Preview.vue

@@ -302,22 +302,26 @@ export default {
     this.initListen()
     this.$store.commit('clearLinkageSettingInfo', false)
     this.canvasStyleDataInit()
-    // 如果当前终端设备是移动端，则进行移动端的布局设计
     if (this.terminal === 'mobile') {
       this.initMobileCanvas()
     }
     bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$on('trigger-reset-button', this.triggerResetButton)
   },
   beforeDestroy() {
     erd.uninstall(this.$refs.canvasInfoTemp)
     erd.uninstall(this.$refs.canvasInfoMain)
     clearInterval(this.timer)
     eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
-    bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$off('trigger-search-button', this.triggerSearchButton)
+    bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   methods: {
-    triggerSearchButton() {
-      const result = this.buildButtonFilterMap(this.componentData)
+    triggerResetButton() {
+      this.triggerSearchButton(true)
+    },
+    triggerSearchButton(isClear = false) {
+      const result = this.buildButtonFilterMap(this.componentData, isClear)
       this.searchButtonInfo.autoTrigger = result.autoTrigger
       this.searchButtonInfo.filterMap = result.filterMap
       this.buttonFilterMap = this.searchButtonInfo.filterMap
@@ -328,7 +332,7 @@ export default {
         }
       })
     },
-    buildButtonFilterMap(panelItems) {
+    buildButtonFilterMap(panelItems, isClear = false) {
       const result = {
         buttonExist: false,
         relationFilterIds: [],
@@ -357,11 +361,11 @@ export default {
       result.relationFilterIds = matchFilters.map(item => item.id)
 
       let viewKeyMap = buildViewKeyMap(panelItems)
-      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap, isClear)
       result.filterMap = viewKeyMap
       return result
     },
-    buildViewKeyFilters(panelItems, result) {
+    buildViewKeyFilters(panelItems, result, isClear = false) {
       const refs = this.$refs
       if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
       panelItems.forEach((element) => {
@@ -375,6 +379,9 @@ export default {
         }
         let param = null
         const wrapperChild = refs['viewWrapperChild'][index]
+        if (isClear) {
+          wrapperChild.clearHandler && wrapperChild.clearHandler()
+        }
         param = wrapperChild.getCondition && wrapperChild.getCondition()
         const condition = formatCondition(param)
         const vValid = valueValid(condition)

frontend/src/components/canvas/components/Editor/index.vue

@@ -1097,6 +1097,7 @@ export default {
     eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
     bus.$on('onRemoveLastItem', this.removeLastItem)
     bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$on('trigger-reset-button', this.triggerResetButton)
     bus.$on('refresh-button-info', this.refreshButtonInfo)
 
     // 矩阵定位调试模式
@@ -1113,20 +1114,24 @@ export default {
     bus.$off('onRemoveLastItem', this.removeLastItem)
     bus.$off('trigger-search-button', this.triggerSearchButton)
     bus.$off('refresh-button-info', this.refreshButtonInfo)
+    bus.$off('trigger-reset-button', this.triggerResetButton)
   },
   created() {
   },
   methods: {
-    refreshButtonInfo() {
-      const result = this.buildButtonFilterMap(this.componentData)
+    triggerResetButton() {
+      this.triggerSearchButton(true)
+    },
+    refreshButtonInfo(isClear = false) {
+      const result = this.buildButtonFilterMap(this.componentData, isClear)
       this.searchButtonInfo.buttonExist = result.buttonExist
       this.searchButtonInfo.relationFilterIds = result.relationFilterIds
       this.searchButtonInfo.filterMap = result.filterMap
       this.searchButtonInfo.autoTrigger = result.autoTrigger
       this.buttonFilterMap = this.searchButtonInfo.filterMap
     },
-    triggerSearchButton() {
-      this.refreshButtonInfo()
+    triggerSearchButton(isClear = false) {
+      this.refreshButtonInfo(isClear)
       this.buttonFilterMap = this.searchButtonInfo.filterMap
 
       this.componentData.forEach(component => {
@@ -1134,10 +1139,8 @@ export default {
           component.filters = this.buttonFilterMap[component.propValue.viewId]
         }
       })
-
-      // this.$store.commit('addViewFilter', param)
     },
-    buildButtonFilterMap(panelItems) {
+    buildButtonFilterMap(panelItems, isClear = false) {
       const result = {
         buttonExist: false,
         relationFilterIds: [],
@@ -1166,11 +1169,11 @@ export default {
       result.relationFilterIds = matchFilters.map(item => item.id)
 
       let viewKeyMap = buildViewKeyMap(panelItems)
-      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap)
+      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap, isClear)
       result.filterMap = viewKeyMap
       return result
     },
-    buildViewKeyFilters(panelItems, result) {
+    buildViewKeyFilters(panelItems, result, isClear = false) {
       const refs = this.$refs
       if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
       const len = this.$refs['wrapperChild'].length
@@ -1186,6 +1189,9 @@ export default {
         }
         const wrapperChild = refs['wrapperChild'][index]
         if (!wrapperChild || !wrapperChild.getCondition) return true
+        if (isClear) {
+          wrapperChild.clearHandler && wrapperChild.clearHandler()
+        }
         param = wrapperChild.getCondition && wrapperChild.getCondition()
         const condition = formatCondition(param)
         const vValid = valueValid(condition)

frontend/src/components/canvas/custom-component/UserView.vue

@@ -582,6 +582,8 @@ export default {
           this.requestStatus = 'error'
           if (err.message && err.message.indexOf('timeout') > -1) {
             this.message = this.$t('panel.timeout_refresh')
+          } else if (!err.response) {
+            this.httpRequest.status = false
           } else {
             this.httpRequest.status = err.response.data.success
             this.httpRequest.msg = err.response.data.message

frontend/src/components/dataease/DeOutWidget.vue

@@ -163,6 +163,11 @@ export default {
         return this.$refs['deOutWidget'].getCondition()
       }
       return null
+    },
+    clearHandler() {
+      if (this.$refs && this.$refs['deOutWidget'] && this.$refs['deOutWidget'].clearHandler) {
+        this.$refs['deOutWidget'].clearHandler()
+      }
     }
   }
 }

frontend/src/components/widget/DeWidget/DeDate.vue

@@ -160,6 +160,9 @@ export default {
     bus.$off('reset-default-value', this.resetDefaultValue)
   },
   methods: {
+    clearHandler() {
+      this.values = null
+    },
     onScroll() {
       if (this.onFocus) {
         this.$refs.dateRef.hidePicker()

frontend/src/components/widget/DeWidget/DeInputSearch.vue

@@ -83,6 +83,9 @@ export default {
     bus.$off('reset-default-value', this.resetDefaultValue)
   },
   methods: {
+    clearHandler() {
+      this.value = null
+    },
     resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()

frontend/src/components/widget/DeWidget/DeNumberRange.vue

@@ -116,6 +116,10 @@ export default {
     bus.$off('reset-default-value', this.resetDefaultValue)
   },
   methods: {
+    clearHandler() {
+      this.form.min = null
+      this.form.max = null
+    },
     resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         const values = this.element.options.value

frontend/src/components/widget/DeWidget/DeResetButton.vue

@@ -0,0 +1,52 @@
+<template>
+
+  <el-button
+    v-if="element.options!== null && element.options.attrs!==null"
+    :type="element.options.attrs.type"
+    :round="element.options.attrs.round"
+    :plain="element.options.attrs.plain"
+    :size="size"
+    class="de-search-button"
+    @click="triggerReset"
+  >
+    {{ element.options.value }}
+  </el-button>
+</template>
+
+<script>
+import bus from '@/utils/bus'
+export default {
+
+  props: {
+    element: {
+      type: Object,
+      default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
+    },
+    size: String
+  },
+  data() {
+    return {
+      operator: 'eq',
+      values: null
+    }
+  },
+  created() {
+  },
+  methods: {
+    triggerReset() {
+      bus.$emit('trigger-reset-button')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.de-search-button {
+  height: 100%;
+  width: 100%;
+}
+</style>

frontend/src/components/widget/DeWidget/DeSelect.vue

@@ -212,6 +212,9 @@ export default {
     bus.$off('reset-default-value', this.resetDefaultValue)
   },
   methods: {
+    clearHandler() {
+      this.value = null
+    },
     filterMethod(key) {
       this.keyWord = key
     },
@@ -231,7 +234,7 @@ export default {
     },
     handleElTagStyle() {
       setTimeout(() => {
-        textSelectWidget(this.$refs['deSelect'].$el, this.element.style)
+        this.$refs['deSelect'] && this.$refs['deSelect'].$el && textSelectWidget(this.$refs['deSelect'].$el, this.element.style)
       }, 50)
     },
     initLoad() {
@@ -281,9 +284,10 @@ export default {
     },
     handleShowNumber() {
       this.showNumber = false
-      const tags = this.$refs.deSelect.$refs.visualSelect.$refs.tags
 
       this.$nextTick(() => {
+        if (!this.$refs.deSelect || !this.$refs.deSelect.$refs.visualSelect || !this.$refs.deSelect.$refs.visualSelect.$refs.tags) return
+        const tags = this.$refs.deSelect.$refs.visualSelect.$refs.tags
         if (!this.element.options.attrs.multiple || !this.$refs.deSelect || !tags) {
           return
         }

frontend/src/components/widget/DeWidget/DeSelectGrid.vue

@@ -212,6 +212,9 @@ export default {
     bus.$off('reset-default-value', this.resetDefaultValue)
   },
   methods: {
+    clearHandler() {
+      this.value = null
+    },
     resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()

frontend/src/components/widget/DeWidget/DeSelectTree.vue

@@ -222,6 +222,9 @@ export default {
   },
 
   methods: {
+    clearHandler() {
+      this.value = null
+    },
     resetDefaultValue(id) {
       if (this.inDraw && this.manualModify && this.element.id === id) {
         this.value = this.fillValueDerfault()

frontend/src/components/widget/DeWidget/SearchButton.vue

@@ -1,29 +0,0 @@
-<template>
-  <div>
-    <el-button type="primary" @click="execute" plain>{{text}}</el-button>
-  </div>
-</template>
-
-<script>
-  export default {
-    name: 'SearchButton',
-    props: {
-
-    },
-    data() {
-      return {
-        text: '查询'
-      }
-    },
-    methods: {
-      execute() {
-        console.log('开始查询。。。')
-      }
-
-    }
-  }
-
-</script>
-
-<style lang="scss" scoped>
-</style>

frontend/src/components/widget/serviceImpl/ButtonResetServiceImpl.js

@@ -0,0 +1,55 @@
+import { WidgetService } from '../service/WidgetService'
+
+const leftPanel = {
+  icon: 'iconfont icon-icon_clear_outlined',
+  label: 'desresetbutton.label',
+  defaultClass: 'time-filter'
+}
+
+const drawPanel = {
+  type: 'custom-button',
+  style: {
+    width: 150,
+    height: 60,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  options: {
+    attrs: {
+      type: '',
+      round: false,
+      plain: true
+
+    },
+    value: '清空'
+  },
+  component: 'de-reset-button',
+  miniSizex: 1,
+  miniSizey: 1
+}
+
+class ButtonResetServiceImpl extends WidgetService {
+  constructor(options = {}) {
+    Object.assign(options, { name: 'buttonResetWidget' })
+    super(options)
+    this.filterDialog = false
+    this.buttonDialog = true
+    this.showSwitch = false
+  }
+
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
+  }
+}
+const buttonResetServiceImpl = new ButtonResetServiceImpl()
+export default buttonResetServiceImpl

frontend/src/lang/en.js

@@ -2084,6 +2084,11 @@ export default {
     auto_trigger_tip: 'Automatically trigger once when entering the preview page',
     range_tip: 'Default association all filter components'
   },
+  desresetbutton: {
+    label: 'Clear',
+    reset: 'Reset',
+    text: 'Text'
+  },
   denumberselect: {
     label: 'Number selector',
     placeholder: 'Please select'

frontend/src/lang/tw.js

@@ -2094,6 +2094,11 @@ export default {
     auto_trigger_tip: '進入預覽頁面自動觸發一次',
     range_tip: '默認關聯全部過濾組件'
   },
+  desresetbutton: {
+    label: '清空按鈕',
+    reset: '重置按鈕',
+    text: '名稱'
+  },
   denumberselect: {
     label: '數字下拉',
     placeholder: '請選擇'

frontend/src/lang/zh.js

@@ -2105,6 +2105,12 @@ export default {
     auto_trigger_tip: '进入预览页面自动触发一次',
     range_tip: '默认关联全部过滤组件'
   },
+
+  desresetbutton: {
+    label: '清空按钮',
+    reset: '重置按钮',
+    text: '名称'
+  },
   denumberselect: {
     label: '数字下拉',
     placeholder: '请选择'

frontend/src/utils/conditionUtil.js

@@ -100,5 +100,21 @@ export const buildFilterMap = panelItems => {
   let result = buildViewKeyMap(panelItems)
 
   result = buildViewKeyFilters(panelItems, result)
+  fillElementsFilter(panelItems, result)
   return result
 }
+
+export const fillElementsFilter = (panelItems, filterMap) => {
+  panelItems.forEach(element => {
+    if (element.type === 'view') {
+      element.filters = filterMap[element.propValue.viewId] || []
+    }
+    if (element.type === 'de-tabs') {
+      element.options.tabList && element.options.tabList.forEach(tab => {
+        if (tab.content && tab.content.propValue && tab.content.propValue.viewId) {
+          tab.content.filters = filterMap[tab.content.propValue.viewId] || []
+        }
+      })
+    }
+  })
+}

frontend/src/views/panel/edit/index.vue

@@ -246,7 +246,7 @@
       @close="cancelButton"
     >
       <button-dialog
-        v-if="buttonVisible && currentWidget"
+        v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonSureWidget'"
         :ref="'filter-setting-' + currentFilterCom.id"
         :widget-info="currentWidget"
         :element="currentFilterCom"
@@ -254,6 +254,15 @@
         @cancel-handler="cancelHandler"
       />
 
+      <button-reset-dialog
+        v-if="buttonVisible && currentWidget && currentWidget.name === 'buttonResetWidget'"
+        :ref="'filter-setting-' + currentFilterCom.id"
+        :widget-info="currentWidget"
+        :element="currentFilterCom"
+        @reset-button-handler="sureHandler"
+        @cancel-button-handler="cancelHandler"
+      />
+
     </el-dialog>
 
     <el-dialog
@@ -376,6 +385,7 @@ import '@/components/canvas/styles/animate.css'
 import { ApplicationContext } from '@/utils/ApplicationContext'
 import FilterDialog from '../filter/filterDialog'
 import ButtonDialog from '../filter/ButtonDialog'
+import ButtonResetDialog from '../filter/ButtonResetDialog'
 import toast from '@/components/canvas/utils/toast'
 import { commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
@@ -403,6 +413,7 @@ export default {
     Toolbar,
     FilterDialog,
     ButtonDialog,
+    ButtonResetDialog,
     SubjectSetting,
     Preview,
     AssistComponent,

frontend/src/views/panel/filter/ButtonResetDialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="80px">
+      <el-form-item :label="$t('desresetbutton.text')" prop="text">
+        <el-input v-model="currentElement.options.value" maxlength="10" show-word-limit />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="sure">{{ $t('commons.confirm') }}</el-button>
+        <el-button @click="cancel">{{ $t('commons.cancel') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ButtonResetDialog',
+  props: {
+    widgetInfo: {
+      type: Object,
+      default: null
+    },
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      form: {
+
+      },
+      currentElement: null,
+      rules: {
+        text: [
+          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+
+  computed: {
+
+  },
+  watch: {
+
+  },
+  created() {
+    this.currentElement = JSON.parse(JSON.stringify(this.element))
+  },
+  methods: {
+    sure() {
+      this.$emit('reset-button-handler')
+    },
+    cancel() {
+      this.$emit('cancel-button-handler')
+    },
+    getElementInfo() {
+      return this.currentElement
+    }
+  }
+}
+</script>

frontend/src/views/panel/filter/index.vue

@@ -9,7 +9,7 @@
           v-for="(widget, index) in item"
           :key="widget.widgetName+index"
           :data-id="widget.widgetName"
-          :draggable="widget.widgetName !== 'buttonSureWidget' || !searchButtonExist"
+          :draggable="(widget.widgetName !== 'buttonSureWidget' && widget.widgetName !== 'buttonResetWidget') || (widget.widgetName === 'buttonSureWidget' && !searchButtonExist) || (widget.widgetName === 'buttonResetWidget' && searchButtonExist)"
           :data-index="index"
           :class="'filter-widget '+ (widget.defaultClass || '')"
         >
@@ -56,7 +56,8 @@ export default {
           'numberRangeWidget'
         ],
         '按钮': [
-          'buttonSureWidget'
+          'buttonSureWidget',
+          'buttonResetWidget'
         ]
       }
     }
@@ -69,17 +70,39 @@ export default {
     ]),
     searchButtonExist() {
       return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonSureWidget')
+    },
+    resetButtonExist() {
+      return this.componentData && this.componentData.some(component => component.type === 'custom-button' && component.serviceName === 'buttonResetWidget')
+    },
+    resetButtonDisable() {
+      return !this.resetButtonExist && this.searchButtonExist
     }
   },
   watch: {
     searchButtonExist(val, old) {
       if (val === old) return
       if (val) {
-        this.widgetSubjects['按钮'][0].widgetName = 'buttonSureWidget'
         this.widgetSubjects['按钮'][0].defaultClass = 'button-disable-filter'
+        if (this.resetButtonExist) {
+          this.widgetSubjects['按钮'][1].defaultClass = 'button-disable-filter'
+        } else {
+          this.widgetSubjects['按钮'][1].defaultClass = 'time-filter'
+        }
       } else {
-        this.widgetSubjects['按钮'][0].widgetName = 'buttonSureWidget'
         this.widgetSubjects['按钮'][0].defaultClass = 'time-filter'
+        this.widgetSubjects['按钮'][1].defaultClass = 'button-disable-filter'
+      }
+    },
+    resetButtonExist(val, old) {
+      if (val === old) return
+      if (val) {
+        this.widgetSubjects['按钮'][1].defaultClass = 'button-disable-filter'
+      } else {
+        if (this.searchButtonExist) {
+          this.widgetSubjects['按钮'][1].defaultClass = 'time-filter'
+        } else {
+          this.widgetSubjects['按钮'][1].defaultClass = 'button-disable-filter'
+        }
       }
     }
   },
@@ -98,6 +121,9 @@ export default {
           if (this.searchButtonExist && widgetName === 'buttonSureWidget') {
             result.defaultClass = 'button-disable-filter'
           }
+          if (!this.searchButtonExist && widgetName === 'buttonResetWidget') {
+            result.defaultClass = ' button-disable-filter'
+          }
           return result
         })
       }