feat(查询组件): 级联下拉树

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

@@ -15,6 +15,7 @@ interface Cascade {
   queryId: string
   deType: string
   fieldId: string
+  isTree: boolean
 }
 
 type cascadeMap = Record<string, Cascade>
@@ -68,6 +69,7 @@ const init = (cascadeMap: cascadeMap, arr) => {
   cascadeList.value = cloneDeep(arr)
   datasetMap.value = Object.values(cascadeMap).map(ele => ({
     label: ele.name,
+    isTree: ele.isTree,
     deType: ele.deType,
     value: `${ele.datasetId}--${ele.queryId}--${ele.fieldId}`
   }))
@@ -256,7 +258,7 @@ defineExpose({
             style="width: 300px"
           >
             <el-option
-              v-for="itx in datasetMap"
+              v-for="itx in datasetMap.filter(ele => (idx === 0 && !ele.isTree) || idx === 1)"
               :key="itx.value"
               :label="itx.label"
               :value="itx.value"

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

@@ -162,9 +162,10 @@ const datasetFieldList = computed(() => {
 const setCascadeDefault = val => {
   conditions.value.forEach(ele => {
     if (
-      ele.optionValueSource === 1 &&
-      [0, 2, 5].includes(+ele.displayType) &&
-      val.includes(ele.id)
+      (ele.optionValueSource === 1 &&
+        [0, 2, 5].includes(+ele.displayType) &&
+        val.includes(ele.id)) ||
+      [9].includes(+ele.displayType)
     ) {
       ele.selectValue = Array.isArray(ele.selectValue) ? [] : undefined
       ele.defaultValue = Array.isArray(ele.defaultValue) ? [] : undefined
@@ -1176,21 +1177,26 @@ const CascadeDialog = defineAsyncComponent(() => import('./QueryCascade.vue'))
 const cascadeDialog = ref()
 const openCascadeDialog = () => {
   const cascadeMap = conditions.value
-    .filter(
-      ele =>
-        [0, 2, 5].includes(+ele.displayType) &&
-        ele.optionValueSource === 1 &&
-        !!ele.checkedFields?.length &&
-        !!Object.values(ele.checkedFieldsMap).filter(item => !!item).length
-    )
+    .filter(ele => {
+      return (
+        ([0, 2, 5].includes(+ele.displayType) &&
+          ele.optionValueSource === 1 &&
+          !!ele.checkedFields?.length &&
+          !!Object.values(ele.checkedFieldsMap).filter(item => !!item).length) ||
+        ([9].includes(+ele.displayType) && ele.treeFieldList?.length)
+      )
+    })
     .reduce((pre, next) => {
+      const isTree = [9].includes(+next.displayType)
+      const fieldId = isTree ? next.treeFieldList[0].id : next.field.id
       pre[next.id] = {
         datasetId: next.dataset.id,
+        isTree,
         name: next.name,
         queryId: next.id,
-        fieldId: next.field.id,
+        fieldId: fieldId,
         deType: (datasetMap[next.dataset.id]?.fields?.dimensionList || next.dataset.fields).find(
-          ele => ele.id === next.field.id
+          ele => ele.id === fieldId
         )?.deType
       }
       return pre

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

@@ -9,8 +9,10 @@ import {
   computed,
   inject,
   Ref,
+  onBeforeMount,
   shallowRef
 } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 import { cloneDeep, debounce } from 'lodash-es'
 import { getFieldTree } from '@/api/dataset'
 import colorFunctions from 'less/lib/less/functions/color.js'
@@ -40,6 +42,7 @@ interface SelectConfig {
 }
 
 const customStyle: any = inject('$custom-style-filter')
+const cascadeList = inject('cascade-list', Function, true)
 const props = defineProps({
   config: {
     type: Object as PropType<SelectConfig>,
@@ -235,14 +238,64 @@ const dfs = arr => {
     return { ...ele, value: ele.id, label: ele.text, children }
   })
 }
-
+const cascade = computed(() => {
+  return cascadeList() || []
+})
 const loading = ref(false)
 
+const getCascadeFieldId = () => {
+  const filter = []
+  cascade.value.forEach(ele => {
+    let condition = null
+    ele.forEach(item => {
+      const [_, queryId, fieldId] = item.datasetId.split('--')
+      if (queryId === config.value.id && condition) {
+        if (item.fieldId) {
+          condition.fieldId = item.fieldId
+        }
+        filter.push(condition)
+      } else {
+        if (props.isConfig) {
+          if (!!item.selectValue?.length) {
+            condition = {
+              fieldId: fieldId,
+              operator: 'in',
+              value: [...item.selectValue]
+            }
+          }
+        } else {
+          if (!!item.currentSelectValue?.length) {
+            condition = {
+              fieldId: fieldId,
+              operator: 'in',
+              value: [...item.currentSelectValue]
+            }
+          }
+        }
+      }
+    })
+  })
+  return filter
+}
+const getOptionFromCascade = () => {
+  config.value.selectValue = config.value.multiple ? [] : undefined
+  treeValue.value = config.value.multiple ? [] : undefined
+  getTreeOption()
+}
+
+onBeforeMount(() => {
+  useEmitt({
+    name: `${config.value.id}-select`,
+    callback: getOptionFromCascade
+  })
+})
+
 const getTreeOption = debounce(() => {
   loading.value = true
   getFieldTree({
     fieldIds: props.config.treeFieldList.map(ele => ele.id),
-    resultMode: config.value.resultMode || 0
+    resultMode: config.value.resultMode || 0,
+    filter: getCascadeFieldId()
   })
     .then(res => {
       treeOptionList.value = dfs(res)