fix: 修复编辑状态下有查询组件的删除之后图表还是维持过滤状态问题 (#18211)

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -33,6 +33,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { comInfo } from './com-info'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import StyleInject from './StyleInject.vue'
+import { getKeyList, reRenderAll } from '@/custom-component/v-query/QueryUtils'
 const props = defineProps({
   view: {
     type: Object,
@@ -341,29 +342,6 @@ const releaseSelect = id => {
   unMountSelect.value = unMountSelect.value.filter(ele => ele !== id)
 }
 
-const getKeyList = next => {
-  let checkedFieldsMapArr = Object.entries(next.checkedFieldsMap).filter(ele =>
-    next.checkedFields.includes(ele[0])
-  )
-  if (next.displayType === '9') {
-    checkedFieldsMapArr = (
-      next.treeCheckedList?.length
-        ? next.treeCheckedList.filter((_, index) => index < next.treeFieldList.length)
-        : next.treeFieldList.map(() => {
-            return {
-              checkedFields: [...next.checkedFields],
-              checkedFieldsMap: cloneDeep(next.checkedFieldsMap)
-            }
-          })
-    )
-      .map(item =>
-        Object.entries(item.checkedFieldsMap).filter(ele => item.checkedFields.includes(ele[0]))
-      )
-      .flat()
-  }
-  return checkedFieldsMapArr.filter(ele => !!ele[1]).map(ele => ele[0])
-}
-
 const fillRequireVal = arr => {
   element.value.propValue?.forEach(next => {
     if (arr.some(itx => next.checkedFields.includes(itx)) && next.required) {
@@ -663,20 +641,6 @@ const addCriteriaConfigOut = () => {
   queryConfig.value.setConditionOut()
 }
 
-const reRenderAll = (oldArr, newArr) => {
-  const newArrIds = newArr.map(ele => ele.id)
-  const emitterList = (oldArr || []).reduce((pre, next) => {
-    if (newArrIds.includes(next.id)) return pre
-    const keyList = getKeyList(next)
-    pre = [...new Set([...keyList, ...pre])]
-    return pre
-  }, [])
-  if (!emitterList.length) return
-  emitterList.forEach(ele => {
-    emitter.emit(`query-data-${ele}`)
-  })
-}
-
 const delQueryConfig = index => {
   const com = cloneDeep(unref(list))
   list.value.splice(index, 1)

core/core-frontend/src/custom-component/v-query/QueryUtils.ts

@@ -0,0 +1,52 @@
+import { cloneDeep } from 'lodash-es'
+import { useEmitt } from '@/hooks/web/useEmitt'
+const { emitter } = useEmitt()
+
+export const reRenderAll = (oldArr, newArr) => {
+  const newArrIds = newArr.map(ele => ele.id)
+  const emitterList = (oldArr || []).reduce((pre, next) => {
+    if (newArrIds.includes(next.id)) return pre
+    const keyList = getKeyList(next)
+    pre = [...new Set([...keyList, ...pre])]
+    return pre
+  }, [])
+  if (!emitterList.length) return
+  emitterList.forEach(ele => {
+    emitter.emit(`query-data-${ele}`)
+  })
+}
+
+export const reRenderAfterDelete = oldArr => {
+  const emitterList = (oldArr || []).reduce((pre, next) => {
+    const keyList = getKeyList(next)
+    pre = [...new Set([...keyList, ...pre])]
+    return pre
+  }, [])
+  if (!emitterList.length) return
+  emitterList.forEach(ele => {
+    emitter.emit(`query-data-${ele}`)
+  })
+}
+
+export const getKeyList = next => {
+  let checkedFieldsMapArr = Object.entries(next.checkedFieldsMap).filter(ele =>
+    next.checkedFields.includes(ele[0])
+  )
+  if (next.displayType === '9') {
+    checkedFieldsMapArr = (
+      next.treeCheckedList?.length
+        ? next.treeCheckedList.filter((_, index) => index < next.treeFieldList.length)
+        : next.treeFieldList.map(() => {
+            return {
+              checkedFields: [...next.checkedFields],
+              checkedFieldsMap: cloneDeep(next.checkedFieldsMap)
+            }
+          })
+    )
+      .map(item =>
+        Object.entries(item.checkedFieldsMap).filter(ele => item.checkedFields.includes(ele[0]))
+      )
+      .flat()
+  }
+  return checkedFieldsMapArr.filter(ele => !!ele[1]).map(ele => ele[0])
+}

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -31,6 +31,7 @@ import {
   filterParamsOptions
 } from '@/utils/componentUtils'
 import { formatterItem } from '@/views/chart/components/js/formatter'
+import { reRenderAfterDelete } from '@/custom-component/v-query/QueryUtils'
 const { t } = useI18n()
 
 export const dvMainStore = defineStore('dataVisualization', {
@@ -594,8 +595,11 @@ export const dvMainStore = defineStore('dataVisualization', {
       }
 
       if (/\d/.test(index)) {
+        const deletedComponent = componentData[index]
         this.curComponentIndex = null
         componentData.splice(index, 1)
+        // VQuery 组件
+        deletedComponent?.component === 'VQuery' && reRenderAfterDelete(deletedComponent.propValue)
       }
     },
     updateCurDvInfo(dvInfo) {