perf(仪表板): 优化仪表板查询按钮

2022-07-26 15:35:24 +08:00 · 2022-07-26 15:35:24 +08:00 · 14df491fcd
commit 14df491fcd
parent 0faf625908
11 changed files with 174 additions and 57 deletions
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@ -24,8 +24,8 @@
        <ComponentWrapper
          v-for="(item, index) in componentDataInfo"
          :key="index"
-          :config="item"
          ref="viewWrapperChild"
+          :config="item"
          :search-count="searchCount"
          :in-screen="inScreen"
          :terminal="terminal"
@ -258,14 +258,23 @@ export default {
    ...mapState([
      'isClickComponent'
    ]),
-    filterMap() {
-      const map = this.buttonFilterMap || buildFilterMap(this.componentData)
-      return map
-    },
+
    searchButtonInfo() {
      const result = this.buildButtonFilterMap(this.componentData)
      return result
-      
+    },
+    filterMap() {
+      const result = buildFilterMap(this.componentData)
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
+          }
+        }
+      }
+      return result
    },
    buttonExist() {
      return this.searchButtonInfo && this.searchButtonInfo.buttonExist
@ -309,13 +318,21 @@ export default {
  methods: {
    triggerSearchButton() {
      const result = this.buildButtonFilterMap(this.componentData)
+      this.searchButtonInfo.autoTrigger = result.autoTrigger
      this.searchButtonInfo.filterMap = result.filterMap
      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+      })
    },
    buildButtonFilterMap(panelItems) {
      const result = {
        buttonExist: false,
        relationFilterIds: [],
+        autoTrigger: true,
        filterMap: {

        }
@ -332,7 +349,7 @@ export default {
      if (!result.buttonExist) return result

      const customRange = sureButtonItem.options.attrs.customRange
-
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
      const allFilters = panelItems.filter(item => item.type === 'custom')

      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
@ -346,14 +363,14 @@ export default {
    },
    buildViewKeyFilters(panelItems, result) {
      const refs = this.$refs
-      if(!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
+      if (!this.$refs['viewWrapperChild'] || !this.$refs['viewWrapperChild'].length) return result
      panelItems.forEach((element) => {
        if (element.type !== 'custom') {
          return true
        }

        const index = this.getComponentIndex(element.id)
-        if(index < 0) {
+        if (index < 0) {
          return true
        }
        let param = null
@ -380,7 +397,7 @@ export default {
    getComponentIndex(id) {
      for (let index = 0; index < this.componentData.length; index++) {
        const item = this.componentData[index]
-        if(item.id === id) return index
+        if (item.id === id) return index
      }
      return -1
    },
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@ -68,7 +68,7 @@
        :style="getComponentStyleDefault(item.style)"
        :prop-value="item.propValue"
        :element="item"
-        :is-relation="relationFilterIds.includes(item.id)"
+        :is-relation="searchButtonInfo && searchButtonInfo.buttonExist && searchButtonInfo.relationFilterIds.includes(item.id)"
        :out-style="getShapeStyleInt(item.style)"
        :active="item === curComponent"
        :h="getShapeStyleIntDeDrag(item.style,'height')"
@ -931,7 +931,8 @@ export default {
      linkJumpSetVisible: false,
      linkJumpSetViewId: null,
      editShow: false,
-      buttonFilterMap: null
+      buttonFilterMap: null,
+      autoTrigger: true
    }
  },
  computed: {
@ -1005,20 +1006,25 @@ export default {
      'curCanvasScale',
      'batchOptStatus'
    ]),
-    filterMap() {
-      return this.buttonFilterMap || buildFilterMap(this.componentData)
-    },
+
    searchButtonInfo() {
      const result = this.buildButtonFilterMap(this.componentData)
      return result
-      
    },
-    buttonExist() {
-      return this.searchButtonInfo && this.searchButtonInfo.buttonExist
-    },
-    relationFilterIds() {
-      return this.buttonExist && this.searchButtonInfo.relationFilterIds || []
+    filterMap() {
+      const result = buildFilterMap(this.componentData)
+      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            result[key] = filters
+          }
+        }
+      }
+      return result
    }
+
  },
  watch: {
    customStyle: {
@ -1056,6 +1062,29 @@ export default {
        this.initMatrix()
      },
      deep: true
+    },
+    autoTrigger: {
+      handler(val, old) {
+        if (val === old) return
+        const result = buildFilterMap(this.componentData)
+        for (const key in result) {
+          if (Object.hasOwnProperty.call(result, key)) {
+            let filters = result[key]
+            if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
+              filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
+            }
+
+            this.filterMap[key] = filters
+
+            this.componentData.forEach(item => {
+              if (item.type === 'view' && item.propValue.viewId === key) {
+                item.filters = filters
+              }
+            })
+          }
+        }
+      },
+      deep: true
    }
  },

@ -1069,6 +1098,7 @@ export default {
    eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
    bus.$on('onRemoveLastItem', this.removeLastItem)
    bus.$on('trigger-search-button', this.triggerSearchButton)
+    bus.$on('refresh-button-info', this.refreshButtonInfo)

    // 矩阵定位调试模式
    if (this.psDebug) {
@ -1083,21 +1113,37 @@ export default {
    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
    bus.$off('onRemoveLastItem', this.removeLastItem)
    bus.$off('trigger-search-button', this.triggerSearchButton)
+    bus.$off('refresh-button-info', this.refreshButtonInfo)
  },
  created() {
  },
  methods: {
-    
-    triggerSearchButton() {
+    refreshButtonInfo() {
+      const result = this.buildButtonFilterMap(this.componentData)
+      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()
+      this.buttonFilterMap = this.searchButtonInfo.filterMap
+
+      this.componentData.forEach(component => {
+        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
+          component.filters = this.buttonFilterMap[component.propValue.viewId]
+        }
+      })
+
+      // this.$store.commit('addViewFilter', param)
+    },
    buildButtonFilterMap(panelItems) {
      const result = {
        buttonExist: false,
        relationFilterIds: [],
-        filterMap: {
-
-        }
+        autoTrigger: true,
+        filterMap: {}
      }
      if (!panelItems || !panelItems.length) return result
      let sureButtonItem = null
@ -1111,6 +1157,8 @@ export default {
      if (!result.buttonExist) return result

      const customRange = sureButtonItem.options.attrs.customRange
+      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
+      this.autoTrigger = result.autoTrigger

      const allFilters = panelItems.filter(item => item.type === 'custom')

@ -1125,6 +1173,8 @@ export default {
    },
    buildViewKeyFilters(panelItems, result) {
      const refs = this.$refs
+      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
+      const len = this.$refs['wrapperChild'].length
      panelItems.forEach((element) => {
        if (element.type !== 'custom') {
          return true
@ -1132,10 +1182,11 @@ export default {

        let param = null
        const index = this.getComponentIndex(element.id)
-        if(index < 0) {
+        if (index < 0 || index >= len) {
          return true
        }
        const wrapperChild = refs['wrapperChild'][index]
+        if (!wrapperChild || !wrapperChild.getCondition) return true
        param = wrapperChild.getCondition && wrapperChild.getCondition()
        const condition = formatCondition(param)
        const vValid = valueValid(condition)
@ -1158,7 +1209,7 @@ export default {
    getComponentIndex(id) {
      for (let index = 0; index < this.componentData.length; index++) {
        const item = this.componentData[index]
-        if(item.id === id) return index
+        if (item.id === id) return index
      }
      return -1
    },
--- a/frontend/src/components/widget/DeWidget/DeButton.vue
+++ b/frontend/src/components/widget/DeWidget/DeButton.vue
@ -1,14 +1,14 @@
 <template>

  <el-button
-    v-if="options!== null && options.attrs!==null"
-    :type="options.attrs.type"
-    :round="options.attrs.round"
-    :plain="options.attrs.plain"
+    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"
    @click="triggerSearch"
  >
-    {{ options.value }}
+    {{ element.options.value }}
  </el-button>
 </template>

@ -29,13 +29,11 @@ export default {
  },
  data() {
    return {
-      options: null,
      operator: 'eq',
      values: null
    }
  },
  created() {
-    this.options = this.element.options
  },
  methods: {
    triggerSearch() {
--- a/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/ButtonSureServiceImpl.js
@ -2,7 +2,7 @@ import { WidgetService } from '../service/WidgetService'

 const leftPanel = {
  icon: 'iconfont icon-chaxunsousuo',
-  label: '查询按钮',
+  label: 'desearchbutton.label',
  defaultClass: 'time-filter'
 }

--- a/frontend/src/lang/en.js
+++ b/frontend/src/lang/en.js
@ -2046,6 +2046,15 @@ export default {
    min_out_max: 'The min value must be less than the max value',
    max_out_min: 'The max value must be more than the min value'
  },
+  desearchbutton: {
+    label: 'Search Button',
+    text: 'Text',
+    auto_trigger: 'Auto Trigger',
+    range: 'Ranger',
+    relative: 'Relation',
+    auto_trigger_tip: 'Automatically trigger once when entering the preview page',
+    range_tip: 'Default association all filter components'
+  },
  denumberselect: {
    label: 'Number selector',
    placeholder: 'Please select'
--- a/frontend/src/lang/tw.js
+++ b/frontend/src/lang/tw.js
@ -2057,6 +2057,15 @@ export default {
    min_out_max: '最小值必須小於最大值',
    max_out_min: '最大值必須大於最小值'
  },
+  desearchbutton: {
+    label: '查詢按鈕',
+    text: '名稱',
+    auto_trigger: '自動觸發',
+    range: '控製範圍',
+    relative: '關聯組件',
+    auto_trigger_tip: '進入預覽頁面自動觸發一次',
+    range_tip: '默認關聯全部過濾組件'
+  },
  denumberselect: {
    label: '數字下拉',
    placeholder: '請選擇'
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@ -2067,6 +2067,15 @@ export default {
    min_out_max: '最小值必须小于最大值',
    max_out_min: '最大值必须大于最小值'
  },
+  desearchbutton: {
+    label: '查询按钮',
+    text: '名称',
+    auto_trigger: '自动触发',
+    range: '控制范围',
+    relative: '关联组件',
+    auto_trigger_tip: '进入预览页面自动触发一次',
+    range_tip: '默认关联全部过滤组件'
+  },
  denumberselect: {
    label: '数字下拉',
    placeholder: '请选择'
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@ -108,7 +108,7 @@ const data = {
      y: 600
    },
    scrollAutoMove: 0,
-     // 系统管理菜单是否收缩
+    // 系统管理菜单是否收缩
    isCollapse: false,
    // 视图是否编辑记录
    panelViewEditInfo: {},
@ -243,6 +243,7 @@ const data = {
        return newItem
      })
    },
+
    addViewFilter(state, data) {
      const condition = formatCondition(data)
      const vValid = valueValid(condition)
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@ -111,8 +111,8 @@ div:focus {
 }

 .de-button-dialog {
-  min-width: 250px !important;
-  width: 30% !important;
+  min-width: 200px !important;
+  width: 27% !important;

  .el-dialog__header {
    padding: 10px 20px !important;
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@ -239,11 +239,11 @@
    </de-container>

    <el-dialog
-     v-if="buttonVisible && panelInfo.id"
-     :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
-     :visible.sync="buttonVisible"
-     custom-class="de-button-dialog"
-     @close="cancelButton"
+      v-if="buttonVisible && panelInfo.id"
+      :title="(currentWidget && currentWidget.getLeftPanel && currentWidget.getLeftPanel().label ? $t(currentWidget.getLeftPanel().label) : '') + $t('panel.module')"
+      :visible.sync="buttonVisible"
+      custom-class="de-button-dialog"
+      @close="cancelButton"
    >
      <button-dialog
        v-if="buttonVisible && currentWidget"
@ -252,8 +252,7 @@
        :element="currentFilterCom"
        @sure-handler="sureHandler"
        @cancel-handler="cancelHandler"
-       />
-      
+      />

    </el-dialog>

@ -653,6 +652,7 @@ export default {
    bus.$off('component-dialog-style', this.componentDialogStyle)
    bus.$off('previewFullScreenClose', this.previewFullScreenClose)
    bus.$off('change_panel_right_draw', this.changeRightDrawOpen)
+    bus.$off('delete-condition', this.deleteCustomComponent)
    const elx = this.$refs.rightPanel
    elx && elx.remove()
  },
@ -673,6 +673,19 @@ export default {
      bus.$on('component-dialog-style', this.componentDialogStyle)
      bus.$on('previewFullScreenClose', this.previewFullScreenClose)
      bus.$on('change_panel_right_draw', this.changeRightDrawOpen)
+      bus.$on('delete-condition', this.deleteCustomComponent)
+    },
+    deleteCustomComponent(param) {
+      param && param.componentId && this.componentData.forEach(com => {
+        if (com.type === 'custom-button' && com.options.attrs.filterIds) {
+          const filterIds = com.options.attrs.filterIds
+          let len = filterIds.length
+          while (len--) {
+            if (param.componentId === filterIds[len]) { filterIds.splice(len, 1) }
+          }
+          com.options.attrs.filterIds = filterIds
+        }
+      })
    },
    loadMultiplexingViewTree() {
      queryPanelMultiplexingViewTree().then(res => {
@ -1158,6 +1171,7 @@ export default {
      this.$store.commit('setComponentWithId', this.currentFilterCom)
      this.$store.commit('recordSnapshot', 'sureFilter')
      this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
+      bus.$emit('refresh-button-info')
      this.closeButton()
    },
    cancelHandler() {
--- a/frontend/src/views/panel/filter/ButtonDialog.vue
+++ b/frontend/src/views/panel/filter/ButtonDialog.vue
@ -1,28 +1,29 @@
 <template>
  <div>
-    <el-form ref="form" size="mini" :model="form" label-width="90px">
-      <el-form-item label="名称">
-        <el-input v-model="currentElement.options.value" />
+    <el-form ref="form" size="mini" :rules="rules" :model="form" label-width="80px">
+      <el-form-item :label="$t('desearchbutton.text')" prop="text">
+        <el-input v-model="currentElement.options.value" maxlength="10" show-word-limit />
      </el-form-item>

-      <el-form-item label="自动触发">
+      <el-form-item :label="$t('desearchbutton.auto_trigger')">
        <el-switch v-model="myAttrs.autoTrigger" @change="autoTriggerChange" />
+        <el-link style="margin-left: 10px;" type="info" disabled>{{ $t('desearchbutton.auto_trigger_tip') }}</el-link>
      </el-form-item>

-      <el-form-item label="控制范围">
+      <el-form-item :label="$t('desearchbutton.range')">
        <el-switch v-model="myAttrs.customRange" @change="customRangeChange" />
-        <el-link style="margin-left: 10px;" type="warning" disabled>默认关联全部过滤组件</el-link>
+        <el-link style="margin-left: 10px;" type="warning" disabled>{{ $t('desearchbutton.range_tip') }}</el-link>
      </el-form-item>

-      <el-form-item v-if="myAttrs.customRange" label="关联组件">
-        <el-select v-model="myAttrs.filterIds" style="width: 300px;" multiple clearable placeholder="请选择活动区域">
+      <el-form-item v-if="myAttrs.customRange" :label="$t('desearchbutton.relative')">
+        <el-select v-model="myAttrs.filterIds" style="width: 280px;" multiple clearable>
          <el-option v-for="(filter, index) in filters" :key="filter.id + index" :label="filter.showName" :value="filter.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
-        <el-button type="primary" @click="sure">确定</el-button>
-        <el-button @click="cancel">取消</el-button>
+        <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>
@ -51,7 +52,12 @@ export default {
      },
      currentElement: null,
      widget: null,
-      myAttrs: null
+      myAttrs: null,
+      rules: {
+        text: [
+          { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }
+        ]
+      }
    }
  },

@ -78,6 +84,9 @@ export default {
      })
      return datas
    }
+  },
+  watch: {
+
  },
  created() {
    this.widget = this.widgetInfo