feat: 优化仪表板查询使用局部请求

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

@@ -17,7 +17,7 @@
       :style="getStyle(config.style)"
       :prop-value="config.propValue"
       :element="config"
-      :filter="filter"
+      :filter="config.filters"
     />
   </div>
 </template>
@@ -32,11 +32,13 @@ export default {
   props: {
     config: {
       type: Object,
-      require: true
+      require: true,
+      default: null
     },
     filter: {
       type: Object,
-      require: false
+      require: false,
+      default: null
     }
   },
   mounted() {

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

@@ -89,7 +89,7 @@ export default {
 
     deleteCurCondition() {
       if (this.curComponent.type === 'custom') {
-        this.$store.dispatch('conditions/delete', { componentId: this.curComponent.id })
+        this.$store.commit('removeViewFilter', this.curComponent.id)
         bus.$emit('delete-condition', { componentId: this.curComponent.id })
       }
     },

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

@@ -102,7 +102,7 @@ export default {
   },
   created() {
     // 先清除查询条件
-    this.$store.dispatch('conditions/clear')
+    // this.$store.dispatch('conditions/clear')
   },
   methods: {
     changeStyleWithScale,

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

@@ -40,7 +40,7 @@
         :style="getComponentStyle(item.style)"
         :prop-value="item.propValue"
         :element="item"
-        :filter="filter"
+        :filter="item.filters"
         :out-style="getShapeStyleInt(item.style)"
       />
       <component
@@ -85,8 +85,6 @@ import Area from './Area'
 import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import { Condition } from '@/components/widget/bean/Condition'
-import bus from '@/utils/bus'
 
 export default {
   components: { Shape, ContextMenu, MarkLine, Area, Grid },
@@ -95,13 +93,11 @@ export default {
       type: Boolean,
       default: true
     },
-    filter: {
-      type: Object,
-      require: false
-    },
+
     outStyle: {
       type: Object,
-      require: false
+      require: false,
+      default: null
     }
   },
   data() {
@@ -131,22 +127,7 @@ export default {
       ]
     }
   },
-  watch: {
-    outStyle: {
-      handler(newVal, oldVla) {
-        this.changeScale()
-      },
-      deep: true
-    },
-    canvasStyleData: {
-      handler(newVal, oldVla) {
-        this.changeScale()
-      },
-      deep: true
-    }
-  },
   computed: {
-
     customStyle() {
       let style = {
         width: this.format(this.canvasStyleData.width, this.scaleWidth) + 'px',
@@ -179,6 +160,20 @@ export default {
       'editor'
     ])
   },
+  watch: {
+    outStyle: {
+      handler(newVal, oldVla) {
+        this.changeScale()
+      },
+      deep: true
+    },
+    canvasStyleData: {
+      handler(newVal, oldVla) {
+        this.changeScale()
+      },
+      deep: true
+    }
+  },
 
   mounted() {
     // 获取编辑器元素
@@ -187,12 +182,12 @@ export default {
     eventBus.$on('hideArea', () => {
       this.hideArea()
     })
-    bus.$on('delete-condition', condition => {
-      this.deleteCondition(condition)
-    })
+    // bus.$on('delete-condition', condition => {
+    //   this.deleteCondition(condition)
+    // })
   },
   created() {
-    this.$store.dispatch('conditions/clear')
+    // this.$store.dispatch('conditions/clear')
   },
   methods: {
     changeStyleWithScale,
@@ -400,40 +395,6 @@ export default {
       return height > newHeight ? height : newHeight
     },
 
-    filterValueChange(value) {
-      // console.log('emit:' + value)
-    },
-
-    setConditionValue(obj) {
-      const { component, value, operator } = obj
-      const fieldId = component.options.attrs.fieldId
-      const viewIds = component.options.attrs.viewIds
-      const condition = new Condition(component.id, fieldId, operator, value, viewIds)
-      this.addCondition(condition)
-    },
-    addCondition(condition) {
-      let conditionExist = false
-      for (let index = 0; index < this.conditions.length; index++) {
-        const element = this.conditions[index]
-        if (condition.componentId === element.componentId) {
-          this.conditions[index] = condition
-          conditionExist = true
-        }
-      }
-      !conditionExist && this.conditions.push(condition)
-      this.executeSearch()
-    },
-    deleteCondition(condition) {
-      this.conditions = this.conditions.filter(item => {
-        const componentIdSuitable = !condition.componentId || (item.componentId === condition.componentId)
-        const fieldIdSuitable = !condition.fieldId || (item.fieldId === condition.fieldId)
-        return !(componentIdSuitable && fieldIdSuitable)
-      })
-      this.executeSearch()
-    },
-    executeSearch() {
-      // console.log('当前查询条件是: ' + JSON.stringify(this.conditions))
-    },
     format(value, scale) {
       // 自适应画布区域 返回原值
       if (this.canvasStyleData.selfAdaption) {

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

@@ -47,7 +47,7 @@ export default {
         operator: this.operator
       }
       param.value = this.formatValues(param.value)
-      this.inDraw && this.$store.dispatch('conditions/add', param)
+      this.inDraw && this.$store.commit('addViewFilter', param)
     },
     dateChange(value) {
       this.setCondition()

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

@@ -49,7 +49,7 @@ export default {
         value: [this.options.value],
         operator: this.operator
       }
-      this.inDraw && this.$store.dispatch('conditions/add', param)
+      this.inDraw && this.$store.commit('addViewFilter', param)
     },
     setEdit() {
       this.canEdit = true

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

@@ -37,8 +37,6 @@ export default {
   data() {
     return {
       options: null,
-      //   operator: 'eq',
-      values: null,
       showNumber: false
     }
   },
@@ -49,15 +47,21 @@ export default {
   },
   watch: {
     'options.attrs.multiple': function(value) {
+      const sourceValue = this.options.value
       if (value) {
-        this.values = []
+        !sourceValue && (this.options.value = [])
+        sourceValue && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
+        !this.inDraw && (this.options.value = [])
       } else {
-        this.values = null
+        !sourceValue && (this.options.value = null)
+        sourceValue && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
+        !this.inDraw && (this.options.value = null)
       }
     }
   },
   created() {
     this.options = this.element.options
+
     this.setCondition()
   },
   mounted() {
@@ -68,7 +72,6 @@ export default {
   methods: {
     changeValue(value) {
       this.setCondition()
-      // this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
       this.showNumber = false
       this.$nextTick(() => {
         if (!this.$refs.deSelect.$refs.tags || !this.options.attrs.multiple) {
@@ -89,7 +92,7 @@ export default {
         value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
         operator: this.operator
       }
-      this.inDraw && this.$store.dispatch('conditions/add', param)
+      this.inDraw && this.$store.commit('addViewFilter', param)
     }
   }
 }

frontend/src/store/index.js

@@ -11,7 +11,6 @@ import request from './modules/request'
 import panel from './modules/panel'
 import application from './modules/application'
 import lic from './modules/lic'
-import conditions from './modules/conditions'
 import animation from '@/components/canvas/store/animation'
 import compose from '@/components/canvas/store/compose'
 import contextmenu from '@/components/canvas/store/contextmenu'
@@ -20,13 +19,23 @@ import event from '@/components/canvas/store/event'
 import layer from '@/components/canvas/store/layer'
 import snapshot from '@/components/canvas/store/snapshot'
 import lock from '@/components/canvas/store/lock'
-
+import { Condition } from '@/components/widget/bean/Condition'
 import {
   DEFAULT_COMMON_CANVAS_STYLE
 } from '@/views/panel/panel'
 
 Vue.use(Vuex)
+const valueValid = condition => {
+  return condition && condition.value && condition.value.length > 0 && condition.value[0]
+}
 
+const formatCondition = obj => {
+  const { component, value, operator } = obj
+  const fieldId = component.options.attrs.fieldId
+  const viewIds = component.options.attrs.viewIds
+  const condition = new Condition(component.id, fieldId, operator, value, viewIds)
+  return condition
+}
 const data = {
   state: {
     ...animation.state,
@@ -105,7 +114,46 @@ const data = {
         state.componentData.push(component)
       }
     },
+    removeViewFilter(state, componentId) {
+      state.componentData = state.componentData.map(item => {
+        const newItem = item
+        newItem.filters = newItem.filters && newItem.filters.filter(filter => filter.componentId !== componentId) || []
+        return newItem
+      })
+    },
+    addViewFilter(state, data) {
+      const condition = formatCondition(data)
+      const vValid = valueValid(condition)
+      //   1.根据componentId过滤
+      const filterComponentId = condition.componentId
+
+      //   2.循环每个Component 得到 三种情况 a增加b删除c无操作
+      const viewIdMatch = (viewIds, viewId) => !viewIds || viewIds.length === 0 || viewIds.includes(viewId)
 
+      for (let index = 0; index < state.componentData.length; index++) {
+        const element = state.componentData[index]
+        if (!element.type || element.type !== 'view') continue
+        const currentFilters = element.filters || []
+        const vidMatch = viewIdMatch(condition.viewIds, element.propValue.viewId)
+
+        let j = currentFilters.length
+        let filterExist = false
+        while (j--) {
+          const filter = currentFilters[j]
+          if (filter.componentId === filterComponentId) {
+            filterExist = true
+            // 已存在该条件 且 条件值有效 直接替换原体检
+            vidMatch && vValid && (currentFilters[j] = condition)
+            // 已存在该条件 且 条件值无效 直接删除原条件
+            vidMatch && !vValid && (currentFilters.splice(j, 1))
+          }
+        }
+        // 不存在该条件 且 条件有效 直接保存该条件
+        !filterExist && vValid && currentFilters.push(condition)
+        element.filters = currentFilters
+        state.componentData[index] = element
+      }
+    },
     setComponentWithId(state, component) {
       for (let index = 0; index < state.componentData.length; index++) {
         const element = state.componentData[index]
@@ -143,8 +191,7 @@ const data = {
     request,
     panel,
     application,
-    lic,
-    conditions
+    lic
   },
   getters
 }

frontend/src/store/modules/conditions.js

-import { Condition } from '@/components/widget/bean/Condition'
-const state = {
-  conditions: []
-}
-
-const mutations = {
-  ADD_CONDITION: (state, condition) => {
-    condition && valueValid(condition) && state.conditions.push(condition)
-  },
-  REDUCE_CONDITION: (state, index) => {
-    state.conditions && state.conditions.length > index && state.conditions.splice(index, 1)
-  },
-  CLEAR: (state) => {
-    state.conditions = []
-  }
-}
-
-const actions = {
-  add({ commit }, data) {
-    const condition = formatCondition(data)
-    if (!state.conditions || state.conditions.length === 0) {
-      state.conditions = []
-    }
-    const validResult = isValid(condition)
-    if (!validResult.statu && validResult.hasOwnProperty('existIndex') && validResult.existIndex !== -1) {
-      commit('REDUCE_CONDITION', validResult.existIndex)
-      commit('ADD_CONDITION', condition)
-    }
-    if (validResult.statu) {
-      commit('ADD_CONDITION', condition)
-    }
-  },
-  reduce({ commit }, index) {
-    commit('ADD_CONDITION', index)
-  },
-  delete({ commit }, component) {
-    for (let index = 0; index < state.conditions.length; index++) {
-      const element = state.conditions[index]
-      if (element.componentId === component.componentId) {
-        commit('REDUCE_CONDITION', index)
-      }
-    }
-  },
-  clear({ commit }) {
-    commit('CLEAR')
-  }
-
-}
-// 判断条件condition是否有效
-const isValid = condition => {
-  const nullResult = {
-    statu: false,
-    msg: 'condition is null'
-  }
-  const repeatResult = {
-    statu: false,
-    existIndex: -1,
-    msg: 'condition is exist'
-  }
-  const validResult = {
-    statu: true,
-    msg: null
-  }
-  if (!condition) {
-    return nullResult
-  }
-  for (let index = 0; index < state.conditions.length; index++) {
-    const item = state.conditions[index]
-    if (item.componentId === condition.componentId) {
-      repeatResult.existIndex = index
-      return repeatResult
-    }
-  }
-  return validResult
-}
-
-const valueValid = condition => {
-  return condition && condition.value && condition.value.length > 0 && condition.value[0]
-}
-
-const formatCondition = obj => {
-  const { component, value, operator } = obj
-  const fieldId = component.options.attrs.fieldId
-  const viewIds = component.options.attrs.viewIds
-  const condition = new Condition(component.id, fieldId, operator, value, viewIds)
-  return condition
-}
-
-export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions
-}

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

@@ -223,7 +223,8 @@ export default {
       outStyle: {
         width: null,
         height: null
-      }
+      },
+      beforeDialogValue: null
     }
   },
 
@@ -432,15 +433,19 @@ export default {
       }
     },
     openFilterDiolog() {
+      this.beforeDialogValue = this.curComponent.options.value
       this.filterVisible = true
     },
     cancelFilter() {
+      this.beforeDialogValue = null
       this.filterVisible = false
       this.currentWidget = null
       this.clearCurrentInfo()
     },
     sureFilter() {
+      this.currentFilterCom.options.value = this.beforeDialogValue
       const component = deepCopy(this.currentFilterCom)
+
       //   this.$store.commit('addComponent', { component })
       this.$store.commit('setComponentWithId', component)
       this.$store.commit('recordSnapshot')