feat(数据大屏、数据大屏): 外部参数关联查询组件，支持控制树形组件选项过滤 (#17749)

core/core-frontend/src/components/visualization/OuterParamsSet.vue

@@ -90,7 +90,22 @@
                     </div>
                   </div>
                   <div style="width: 120px">{{ t('visualization.filter_component') }}</div>
-                  <div style="width: 160px">{{ t('visualization.outer_params_type') }}</div>
+                  <div style="width: 160px">
+                    {{ t('visualization.outer_params_type') }}
+                    <el-tooltip class="item" placement="bottom">
+                      <template #content>
+                        <div>
+                          {{ t('visualization.outer_params_type_tips1') }} <br />
+                          {{ t('visualization.outer_params_type_tips2') }}
+                        </div>
+                      </template>
+                      <el-icon class="hint-icon-type" style="display: inline-block">
+                        <Icon name="icon_info_outlined"
+                          ><icon_info_outlined class="svg-icon"
+                        /></Icon>
+                      </el-icon>
+                    </el-tooltip>
+                  </div>
                   <div style="flex: 1">{{ t('visualization.connection_condition') }}</div>
                 </div>
                 <div class="outer-filter-content">
@@ -377,6 +392,7 @@ const { t } = useI18n()
 const curEditDataId = ref(null)
 const snapshotStore = snapshotStoreWithOut()
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
+import dvInfoSvg from '@/assets/svg/dv-info.svg'
 
 const state = reactive({
   filterExpand: true,
@@ -1154,6 +1170,13 @@ defineExpose({
   margin-right: -80px;
 }
 
+.hint-icon-type {
+  cursor: pointer;
+  font-size: 14px;
+  color: #646a73;
+  display: inline-block;
+}
+
 .hint-icon {
   cursor: pointer;
   font-size: 14px;

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

@@ -39,6 +39,7 @@ interface SelectConfig {
   }
   defaultValueCheck: boolean
   multiple: boolean
+  optionFilter: []
 }
 
 const customStyle: any = inject('$custom-style-filter')
@@ -56,7 +57,8 @@ const props = defineProps({
         defaultValueCheck: false,
         multiple: false,
         checkedFieldsMap: {},
-        treeFieldList: []
+        treeFieldList: [],
+        optionFilter: []
       }
     }
   },
@@ -320,7 +322,7 @@ const getTreeOption = debounce(() => {
     filter: getCascadeFieldId()
   })
     .then(res => {
-      treeOptionList.value = dfs(res)
+      treeOptionList.value = filterTree(dfs(res), config.value.optionFilter)
       if (fromSelect) {
         fromTreeSelectConfirm.value = true
         if (multiple.value && Array.isArray(treeValue.value) && treeValue.value.length) {
@@ -393,6 +395,37 @@ const tagColor = computed(() => {
     .mix(new colorTree('ffffff'), new colorTree(hexColor.substr(1)), { value: 20 })
     .toRGB()
 })
+
+const filterTree = (treeData, filterIds) => {
+  if (!filterIds || filterIds.length === 0) {
+    return treeData
+  }
+  const filterIdSet = new Set(filterIds)
+  // 递归处理每个节点
+  const recursionFilter = node => {
+    const newNode = { ...node }
+
+    // 2. 处理子节点：有子节点才过滤，无子节点直接返回当前节点
+    if (newNode.children && Array.isArray(newNode.children) && newNode.children.length > 0) {
+      // 筛选出当前节点的子节点中，id在过滤清单里的「命中子节点」
+      const hitChildren = newNode.children.filter(child => filterIdSet.has(child.id))
+
+      if (hitChildren.length > 0) {
+        // 规则1：当前层级有命中的子节点 → 只保留命中的，递归过滤其子节点
+        newNode.children = hitChildren.map(child => recursionFilter(child))
+      } else {
+        // 规则2：当前层级无命中的子节点 → 完整保留所有子节点，子节点也不做过滤
+        newNode.children = [...newNode.children]
+      }
+    }
+    return newNode
+  }
+
+  // 根节点过滤：只保留根节点id在过滤清单中的节点，再递归处理子节点
+  return treeData
+    .filter(rootNode => filterIdSet.has(rootNode.id))
+    .map(node => recursionFilter(node))
+}
 </script>
 
 <template>

core/core-frontend/src/locales/en.ts

@@ -2945,6 +2945,10 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    outer_params_type_tips1:
+      "When the type is 'filter', it only applies to text dropdown, text tree, and number dropdown. For text tree filtering format, separate multiple levels with '-de-'",
+    outer_params_type_tips2:
+      '["Level1","Level1-de-Level2_1","Level2-de-Level2_1","Level1-de-Level2_1-de-Level3_1","Level2"]',
     outer_params_type: 'Type',
     outer_params_type_self: 'Assignment',
     outer_params_type_filter: 'Filter',

core/core-frontend/src/locales/tw.ts

@@ -2864,6 +2864,10 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    outer_params_type_tips1:
+      "類型為過濾時僅對文字下拉、文字樹、數字下拉有效。文字樹的過濾格式中，多級之間使用 '-de-' 分隔",
+    outer_params_type_tips2:
+      '["Level1","Level1-de-Level2_1","Level2-de-Level2_1","Level1-de-Level2_1-de-Level3_1","Level2"]',
     outer_params_type: '類型',
     outer_params_type_self: '賦值',
     outer_params_type_filter: '過濾',

core/core-frontend/src/locales/zh-CN.ts

@@ -2870,6 +2870,10 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    outer_params_type_tips1:
+      "类型为过滤时仅对文本下拉、文本树、数字下拉，文本树的过滤格式多级之间使用'-de-' 隔离",
+    outer_params_type_tips2:
+      '["Level1","Level1-de-Level2_1","Level2-de-Level2_1","Level1-de-Level2_1-de-Level3_1","Level2"]',
     outer_params_type: '类型',
     outer_params_type_self: '赋值',
     outer_params_type_filter: '过滤',