fix(查询组件): 下拉树

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

@@ -194,10 +194,12 @@ const multipleChange = (val: boolean, isMultipleChange = false) => {
         : []
       : defaultValue
   }
+
   if (curComponent.value.field.deType === 1) {
     curComponent.value.multiple = val
     return
   }
+
   curComponent.value.multiple = val
 }
 

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

@@ -364,7 +364,26 @@ const handleValueSourceChange = () => {
 }
 
 const multipleChange = (val: boolean, isMultipleChange = false) => {
-  defaultConfigurationRef.value?.multipleChange(val, isMultipleChange)
+  if (isMultipleChange) {
+    curComponent.value.defaultValue = val ? [] : undefined
+  }
+  const { defaultValue } = curComponent.value
+  if (Array.isArray(defaultValue)) {
+    curComponent.value.selectValue = val ? defaultValue : undefined
+  } else {
+    curComponent.value.selectValue = val
+      ? defaultValue !== undefined
+        ? [defaultValue]
+        : []
+      : defaultValue
+  }
+
+  if (curComponent.value.field.deType === 1) {
+    curComponent.value.multiple = val
+    return
+  }
+
+  curComponent.value.multiple = val
 }
 
 const isInRange = (ele, startWindowTime, timeStamp) => {

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, PropType, toRefs, nextTick, watch, onBeforeMount } from 'vue'
+import { ref, PropType, toRefs, nextTick, watch, onMounted, computed, inject } from 'vue'
 import { cloneDeep, debounce } from 'lodash-es'
 import { getFieldTree } from '@/api/dataset'
 interface SelectConfig {
@@ -45,11 +45,22 @@ const { config } = toRefs(props)
 
 const multiple = ref(false)
 
+const handleValueChange = () => {
+  const value = Array.isArray(treeValue.value) ? [...treeValue.value] : treeValue.value
+  if (!props.isConfig) {
+    config.value.selectValue = Array.isArray(treeValue.value)
+      ? [...treeValue.value]
+      : treeValue.value
+    return
+  }
+  config.value.defaultValue = value
+}
+
 watch(
   () => config.value.defaultValue,
   val => {
     if (config.value.multiple) {
-      selectValue.value = Array.isArray(val) ? [...val] : val
+      treeValue.value = Array.isArray(val) ? [...val] : val
     }
     nextTick(() => {
       multiple.value = config.value.multiple
@@ -57,15 +68,60 @@ watch(
   }
 )
 
+watch(
+  () => config.value.treeFieldList,
+  () => {
+    treeValue.value = config.value.multiple ? [] : undefined
+    cacheData.value = []
+    showOrHide.value = false
+    getTreeOption()
+  }
+)
+
+const init = () => {
+  const { defaultValueCheck, multiple: plus, defaultValue } = config.value
+  if (defaultValueCheck) {
+    const arr = Array.isArray(defaultValue) ? '' : (defaultValue || '').split('-de-')
+    config.value.selectValue = Array.isArray(defaultValue)
+      ? cloneDeep([...defaultValue])
+      : defaultValue
+    treeValue.value = Array.isArray(defaultValue) ? cloneDeep([...defaultValue]) : defaultValue
+    cacheData.value = Array.isArray(defaultValue)
+      ? defaultValue.map(ele => ({
+          value: ele,
+          label: ele.split('-de-')[ele.split('-de-').length - 1]
+        }))
+      : arr.length
+      ? [arr[arr.length - 1]]
+      : []
+  } else {
+    config.value.selectValue = plus ? [] : undefined
+    treeValue.value = plus ? [] : undefined
+  }
+  nextTick(() => {
+    multiple.value = config.value.multiple
+  })
+  getTreeOption()
+}
+
+watch(
+  () => config.value.id,
+  () => {
+    init()
+  }
+)
+const showOrHide = ref(true)
+const queryConditionWidth = inject('com-width', Function, true)
 watch(
   () => config.value.id,
   () => {
     getTreeOption()
   }
 )
-
+onMounted(() => {
-onBeforeMount(() => {
+  setTimeout(() => {
-  getTreeOption()
+    init()
+  }, 0)
 })
 
 watch(
@@ -73,12 +129,12 @@ watch(
   val => {
     if (props.isConfig) return
     if (config.value.multiple) {
-      selectValue.value = Array.isArray(val) ? [...val] : val
+      treeValue.value = Array.isArray(val) ? [...val] : val
     }
     nextTick(() => {
       multiple.value = config.value.multiple
       if (!config.value.multiple) {
-        selectValue.value = Array.isArray(config.value.selectValue)
+        treeValue.value = Array.isArray(config.value.selectValue)
           ? [...config.value.selectValue]
           : config.value.selectValue
       }
@@ -91,27 +147,51 @@ watch(
   val => {
     if (!props.isConfig) return
     if (val) {
-      selectValue.value = []
+      treeValue.value = []
     }
+
     nextTick(() => {
       multiple.value = val
+      nextTick(() => {
+        resolveFunc(treeOptionList)
+      })
       if (!val) {
         nextTick(() => {
-          selectValue.value = undefined
+          treeValue.value = undefined
         })
       }
     })
   }
 )
 let cacheId = ''
-const getTreeOption = debounce(() => {
+let treeOptionList = []
-  getFieldTree(props.config.treeFieldList.map(ele => ele.id)).then(res => {
+
-    console.log(res)
+const dfs = arr => {
+  return (arr || []).map(ele => {
+    let children = []
+    if (!!ele.children?.length) {
+      children = dfs(ele.children)
+    }
+    return { ...ele, value: ele.id, label: ele.text, children }
   })
-}, 1000)
+}
+
+const getTreeOption = debounce(() => {
+  getFieldTree(props.config.treeFieldList.map(ele => ele.id))
+    .then(res => {
+      treeOptionList = dfs(res)
+    })
+    .finally(() => {
+      showOrHide.value = true
+      nextTick(() => {
+        resolveFunc(treeOptionList)
+      })
+    })
+}, 300)
 watch(
   () => props.config.treeFieldList,
   val => {
+    if (!props.isConfig) return
     const ids = val.map(ele => ele.id).join('')
     if (cacheId !== val.map(ele => ele.id).join('')) {
       cacheId = ids
@@ -122,58 +202,64 @@ watch(
 const propsTree = {
   label: 'label',
   children: 'children',
-  isLeaf: 'isLeaf'
+  isLeaf: data => !data.children?.length
 }
-const selectValue = ref()
+const treeValue = ref()
+let cacheData = ref([])
 
-let id = 0
+let resolveFunc = (arr = []) => {
-const cacheData = [{ value: 5, label: 'lazy load node5' }]
+  arr = cloneDeep(arr)
+}
 const load = (node, resolve) => {
-  if (node.isLeaf) return resolve([])
+  resolveFunc = debounce(resolve, 500)
-
+  if (!node.data?.children?.length) return resolve([])
   setTimeout(() => {
-    resolve([
+    resolve([...node.data?.children])
-      {
-        value: ++id,
-        label: `lazy load node${id}`
-      },
-      {
-        value: ++id,
-        label: `lazy load node${id}`,
-        isLeaf: true
-      }
-    ])
   }, 400)
 }
+
+const selectStyle = computed(() => {
+  return props.isConfig ? {} : { width: queryConditionWidth() + 'px' }
+})
 </script>
 
 <template>
   <el-tree-select
-    v-model="selectValue"
+    v-model="treeValue"
     lazy
-    v-if="multiple"
+    v-if="multiple && showOrHide"
+    @change="handleValueChange"
     check-strictly
     :render-after-expand="false"
-    key="multiple"
+    key="multipleTree"
     filterable
+    :style="selectStyle"
     multiple
     :cache-data="cacheData"
     :load="load"
     :props="propsTree"
-    style="width: 240px"
   />
   <el-tree-select
-    v-model="selectValue"
+    v-model="treeValue"
+    @change="handleValueChange"
     lazy
     check-strictly
     :render-after-expand="false"
-    v-else
+    v-else-if="showOrHide"
-    key="single"
+    key="singleTree"
+    :style="selectStyle"
     filterable
     :cache-data="cacheData"
     :load="load"
     :props="propsTree"
-    style="width: 240px"
+  />
+  <el-tree-select
+    v-model="treeValue"
+    v-loading="!showOrHide"
+    :data="[]"
+    v-else
+    key="hideTree"
+    :style="selectStyle"
   />
 </template>
 

core/core-frontend/src/hooks/web/useFilter.ts

@@ -88,6 +88,20 @@ const getValueByDefaultValueCheckOrFirstLoad = (
   displayType: string,
   displayId: string
 ) => {
+  if (+displayType === 9) {
+    if (firstLoad) {
+      return defaultValueCheck
+        ? multiple
+          ? defaultValue.map(ele => ele.split('-de-').join(','))
+          : (defaultValue || '').split('-de-').join(',')
+        : []
+    }
+    return selectValue?.length
+      ? multiple
+        ? selectValue.map(ele => ele.split('-de-').join(','))
+        : (selectValue || '').split('-de-').join(',')
+      : []
+  }
   if (
     optionValueSource === 1 &&
     (defaultMapValue?.length || displayId) &&
@@ -186,9 +200,8 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
             const {
               selectValue: value,
               timeGranularityMultiple,
-              parametersStart,
-              parametersEnd,
               conditionType = 0,
+              treeFieldList = [],
               defaultConditionValueOperatorF = 'eq',
               defaultConditionValueF = '',
               defaultConditionValueOperatorS = 'like',
@@ -204,13 +217,14 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               defaultMapValue,
               mapValue,
               parameters = [],
-              isTree = false,
               timeGranularity = 'date',
               displayType,
               displayId,
               multiple
             } = item
 
+            const isTree = +displayType === 9
+
             if (timeType === 'dynamic' && [1, 7].includes(+displayType) && firstLoad) {
               if (+displayType === 1) {
                 selectValue = getDynamicRange(item)
@@ -303,7 +317,9 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               if (result?.length) {
                 filter.push({
                   componentId: ele.id,
-                  fieldId: item.checkedFieldsMap[curComponentId],
+                  fieldId: isTree
+                    ? treeFieldList.map(ele => ele.id).join(',')
+                    : item.checkedFieldsMap[curComponentId],
                   operator,
                   value: result,
                   parameters,