feat(仪表板): 仪表板外部参数支持匹配过滤组件 #5891

core/frontend/src/icons/svg/filter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1700015172685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4199" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M922.366667 114.813333A53.04 53.04 0 0 0 874.666667 85.333333H149.333333a53.333333 53.333333 0 0 0-42.666666 85.333334l277.333333 369.78V917.333333a21.333333 21.333333 0 0 0 29.253333 19.806667l213.333334-85.333333A21.333333 21.333333 0 0 0 640 832V540.446667L917.333333 170.666667a53.04 53.04 0 0 0 5.033334-55.853334z" p-id="4200"></path></svg>

core/frontend/src/lang/en.js

@@ -2027,6 +2027,7 @@ export default {
     back_parent: 'Back to previous'
   },
   panel: {
+    filter_no_select: 'Filter components do not need to be selected',
     first_item: 'First item',
     forbidden_copy: 'Forbidden copy',
     url_check_error: 'Jump error, Illegal URL',
@@ -2343,7 +2344,9 @@ export default {
     link_panel: 'panel',
     select_jump_panel: 'Select Jump Panel',
     link_view: 'Link View',
+    link_component: 'Link Component',
     link_view_field: 'Link View Field',
+    link_component_field: 'Link Component Field',
     add_jump_field: 'Add Jump Field',
     input_jump_link: 'Input Jump Link',
     select_dimension: 'Select Dimension...',

core/frontend/src/lang/tw.js

@@ -2021,6 +2021,7 @@ export default {
     back_parent: '返回上一級'
   },
   panel: {
+    filter_no_select: '過濾組件無需選擇',
     first_item: '首項',
     forbidden_copy: '當前組件不允許復製',
     url_check_error: '跳轉錯誤，URL不合法',
@@ -2337,7 +2338,9 @@ export default {
     link_panel: '儀表闆',
     select_jump_panel: '選擇關聯的儀表闆',
     link_view: '聯動視圖',
+    link_component: '聯動组件',
     link_view_field: '聯動視圖字段',
+    link_component_field: '聯動组件字段',
     add_jump_field: '追加跳轉聯動依賴字段',
     input_jump_link: '請輸入跳轉連接',
     select_dimension: '請選擇維度...',

core/frontend/src/lang/zh.js

@@ -2021,6 +2021,7 @@ export default {
     back_parent: '返回上一级'
   },
   panel: {
+    filter_no_select: '过滤组件无需选择',
     first_item: '首项',
     forbidden_copy: '当前组件不允许复制',
     url_check_error: '跳转错误，URL不合法',
@@ -2337,7 +2338,9 @@ export default {
     link_panel: '仪表板',
     select_jump_panel: '选择关联的仪表板',
     link_view: '联动视图',
+    link_component: '联动组件',
     link_view_field: '联动视图字段',
+    link_component_field: '联动组件字段',
     add_jump_field: '追加跳转联动依赖字段',
     input_jump_link: '请输入跳转连接',
     select_dimension: '请选择维度...',

core/frontend/src/store/index.js

@@ -465,7 +465,7 @@ const data = {
 
         for (let index = 0; index < state.componentData.length; index++) {
           const element = state.componentData[index]
-          if (!element.type || element.type !== 'view') continue
+          if (!element.type || (element.type !== 'view' && element.type !== 'custom')) continue
           const currentFilters = element.outerParamsFilters || [] // 外部参数信息
 
           // 外部参数 可能会包含多个参数
@@ -483,7 +483,7 @@ const data = {
             targetInfoList.forEach(targetInfo => {
               const targetInfoArray = targetInfo.split('#')
               const targetViewId = targetInfoArray[0] // 目标视图
-              if (element.propValue.viewId === targetViewId) { // 如果目标视图 和 当前循环组件id相等 则进行条件增减
+              if (element.type === 'view' && element.propValue.viewId === targetViewId) { // 如果目标视图 和 当前循环组件id相等 则进行条件增减
                 const targetFieldId = targetInfoArray[1] // 目标视图列ID
                 const condition = new Condition('', targetFieldId, operator, paramValue, [targetViewId])
                 let j = currentFilters.length
@@ -498,8 +498,13 @@ const data = {
                 // !filterExist && vValid && currentFilters.push(condition)
                 currentFilters.push(condition)
               }
+              if (element.type === 'custom' && element.id === targetViewId) { // 过滤组件处理
+                element.options.value = paramValue
+              }
             })
+            if (element.type === 'view') {
               element.outerParamsFilters = currentFilters
+            }
             state.componentData[index] = element
           })
         }

core/frontend/src/views/panel/outerParamsSet/index.vue

@@ -65,7 +65,8 @@
               icon="el-icon-plus"
               round
               @click="addOuterParamsInfo"
-            >{{ $t('panel.add_param') }}</el-button>
+            >{{ $t('panel.add_param') }}
+            </el-button>
           </el-row>
         </el-col>
         <el-col
@@ -76,10 +77,10 @@
             <el-row class="top_border">
               <el-row style="margin-top: 10px">
                 <el-col :span="11">
-                  <div class="ellip">{{ $t('panel.link_view') }}</div>
+                  <div class="ellip">{{ $t('panel.link_component') }}</div>
                 </el-col>
                 <el-col :span="11">
-                  <div class="ellip">{{ $t('panel.link_view_field') }}</div>
+                  <div class="ellip">{{ $t('panel.link_component_field') }}</div>
                 </el-col>
               </el-row>
               <el-row style="height: 266px;overflow-y: auto">
@@ -129,6 +130,7 @@
                     <div class="select-filed">
                       <el-select
                         v-model="targetViewInfo.targetFieldId"
+                        :disabled="viewIdFieldArrayMap[targetViewInfo.targetViewId].length===1 && viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 0"
                         style="width: 100%"
                         size="mini"
                         :placeholder="$t('fu.search_bar.please_select')"
@@ -188,7 +190,8 @@
                   round
                   @click="addOuterParamsField"
                 >{{
-                  $t('panel.add_param_link_field') }}
+                    $t('panel.add_param_link_field')
+                  }}
                 </el-button>
               </el-row>
 
@@ -224,12 +227,14 @@
       <el-button
         size="mini"
         @click="cancel()"
-      >{{ $t('commons.cancel') }}</el-button>
+      >{{ $t('commons.cancel') }}
+      </el-button>
       <el-button
         type="primary"
         size="mini"
         @click="save()"
-      >{{ $t('commons.confirm') }}</el-button>
+      >{{ $t('commons.confirm') }}
+      </el-button>
     </el-row>
   </el-row>
 </template>
@@ -363,6 +368,17 @@ export default {
             this.viewIdFieldArrayMap[view.id] = view.tableFields
           })
         }
+        // 增加过滤组件匹配
+        this.componentData.forEach(componentItem => {
+          if (componentItem.type === 'custom') {
+            this.currentLinkPanelViewArray.push({
+              id: componentItem.id,
+              type: 'filter',
+              name: componentItem.options.attrs.title ? componentItem.options.attrs.title : '过滤组件'
+            })
+            this.viewIdFieldArrayMap[componentItem.id] = [{id: 0, name: this.$t('panel.filter_no_select')}]
+          }
+        })
       })
     },
     panelNodeClick(data, node) {
@@ -392,7 +408,11 @@ export default {
       }
     },
     viewInfoOnChange(targetViewInfo) {
+      if (this.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 && this.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 0) {
+        targetViewInfo.targetFieldId = 0
+      } else {
         targetViewInfo.targetFieldId = null
+      }
     },
     sourceFieldCheckedChange(data) {
       if (data.checked) {