feat(仪表板、数据大屏): 跳转支持携带过滤参数#12866

core/core-backend/src/main/java/io/dataease/MybatisPlusGenerator.java

@@ -21,11 +21,11 @@ public class MybatisPlusGenerator {
     /**
      * 业务模块例如datasource,dataset,panel等
      */
-    private static final String busi = "chart";
+    private static final String busi = "visualization";
     /**
      * 这是要生成代码的表名称
      */
-    private static final String TABLE_NAME = "core_chart_view";
+    private static final String TABLE_NAME = "visualization_link_jump_target_view_info";
 
     /**
      * 下面两个配置基本上不用动

core/core-backend/src/main/resources/db/desktop/V2.10.3__ddl.sql

@@ -12,4 +12,6 @@ ALTER TABLE `visualization_link_jump_target_view_info`
 
 ALTER TABLE `visualization_link_jump_target_view_info`
     MODIFY COLUMN `target_view_id` varchar(50) NULL DEFAULT NULL COMMENT '目标图表ID' AFTER `source_field_active_id`,
-    MODIFY COLUMN `target_field_id` varchar(50) NULL DEFAULT NULL COMMENT '目标字段ID' AFTER `target_view_id`;
+    MODIFY COLUMN `target_field_id` varchar(50) NULL DEFAULT NULL COMMENT '目标字段ID' AFTER `target_view_id`;
+
+update visualization_link_jump_target_view_info set target_type = 'view';

core/core-backend/src/main/resources/db/migration/V2.10.3__ddl.sql

@@ -16,4 +16,6 @@ ALTER TABLE `visualization_link_jump_target_view_info`
 
 ALTER TABLE `visualization_link_jump_target_view_info`
     MODIFY COLUMN `target_view_id` varchar(50) NULL DEFAULT NULL COMMENT '目标图表ID' AFTER `source_field_active_id`,
-    MODIFY COLUMN `target_field_id` varchar(50) NULL DEFAULT NULL COMMENT '目标字段ID' AFTER `target_view_id`;
+    MODIFY COLUMN `target_field_id` varchar(50) NULL DEFAULT NULL COMMENT '目标字段ID' AFTER `target_view_id`;
+
+update visualization_link_jump_target_view_info set target_type = 'view';

core/core-backend/src/main/resources/mybatis/ExtVisualizationLinkJumpMapper.xml

@@ -46,6 +46,8 @@
             <result column="target_view_id" jdbcType="BIGINT" property="targetViewId"/>
             <result column="target_field_id" jdbcType="BIGINT" property="targetFieldId"/>
             <result column="source_field_active_id" jdbcType="VARCHAR" property="sourceFieldActiveId"/>
+            <result column="target_type" jdbcType="VARCHAR" property="targetType"/>
+            <result column="outer_params_name" jdbcType="VARCHAR" property="outerParamsName"/>
         </collection>
     </resultMap>
     <resultMap id="ViewTableFieldDetailsMap" type="io.dataease.api.visualization.vo.VisualizationViewTableVO">
@@ -87,7 +89,9 @@
             ifnull( visualization_link_jump_info.attach_params, 0 ) AS attach_params,
             visualization_link_jump_target_view_info.target_view_id,
             visualization_link_jump_target_view_info.target_field_id,
-            visualization_link_jump_target_view_info.source_field_active_id
+            visualization_link_jump_target_view_info.target_type,
+            visualization_link_jump_target_view_info.source_field_active_id,
+            visualization_outer_params_info.param_name as outer_params_name
         FROM
             core_chart_view
                 LEFT JOIN core_dataset_table_field ON core_chart_view.table_id = core_dataset_table_field.dataset_group_id
@@ -98,6 +102,7 @@
                 LEFT JOIN visualization_link_jump_target_view_info ON visualization_link_jump_info.id = visualization_link_jump_target_view_info.link_jump_info_id
                 LEFT JOIN xpack_share ON xpack_share.creator = #{uid}
                 AND visualization_link_jump_info.target_dv_id = xpack_share.resource_id
+                left join visualization_outer_params_info on visualization_outer_params_info.params_id = visualization_link_jump_target_view_info.target_view_id
         WHERE
             core_chart_view.id = #{source_view_id}
           AND core_chart_view.type != 'VQuery'

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

@@ -199,7 +199,7 @@
                       <div class="jump-com-list">
                         <el-tabs size="small" v-model="state.activeCollapse">
                           <el-tab-pane label="联动图表" name="view"> </el-tab-pane>
-                          <el-tab-pane label="携带查询条件" name="filter-params"> </el-tab-pane>
+                          <el-tab-pane label="携带查询条件" name="filter"> </el-tab-pane>
                         </el-tabs>
                       </div>
                       <template v-if="state.activeCollapse === 'view'">
@@ -215,8 +215,11 @@
                           <el-scrollbar height="fit-content" max-height="178px">
                             <div
                               style="display: flex; margin-bottom: 6px"
-                              v-for="(targetViewInfo, index) in state.linkJumpInfo
+                              v-for="(
-                                .targetViewInfoList"
+                                targetViewInfo, index
+                              ) in state.linkJumpInfo.targetViewInfoList.filter(
+                                item => item.targetType === 'view'
+                              )"
                               :key="index"
                             >
                               <div style="flex: 1">
@@ -262,7 +265,9 @@
                                   @change="viewInfoOnChange(targetViewInfo)"
                                 >
                                   <el-option
-                                    v-for="item in state.currentLinkPanelViewArray"
+                                    v-for="item in state.currentLinkPanelViewArray.filter(
+                                      item => item.type !== 'outerParams'
+                                    )"
                                     :key="item.id"
                                     :label="item.title"
                                     :value="item.id"
@@ -335,7 +340,7 @@
                             type="primary"
                             icon="Plus"
                             text
-                            @click="addLinkJumpField"
+                            @click="addLinkJumpField('view')"
                           >
                             {{ t('visualization.add_jump_field') }}
                           </el-button>
@@ -343,12 +348,9 @@
                       </template>
                       <template v-if="state.activeCollapse === 'filter'">
                         <el-row style="margin-bottom: 8px" :gutter="8">
-                          <el-col :span="7"> 源字段 </el-col>
+                          <el-col :span="12"> 源条件 </el-col>
-                          <el-col :span="2"></el-col>
+                          <el-col :span="1"></el-col>
-                          <el-col :span="7" style="margin-left: -2.9%">
+                          <el-col :span="10" style="margin-left: -2.9%"> 联动外部参数 </el-col>
-                            {{ t('visualization.link_view_field') }}
-                          </el-col>
-                          <el-col :span="8"></el-col>
                         </el-row>
                         <div class="main-scrollbar-container">
                           <el-scrollbar height="fit-content" max-height="178px">
@@ -357,7 +359,7 @@
                               v-for="(
                                 targetViewInfo, index
                               ) in state.linkJumpInfo.targetViewInfoList.filter(
-                                item => item.type === 'outerParams'
+                                item => item.targetType === 'outerParams'
                               )"
                               :key="index"
                             >
@@ -368,23 +370,22 @@
                                   style="width: 100%"
                                 >
                                   <el-option
-                                    v-for="curViewField in state.linkJumpCurViewFieldArray"
+                                    v-for="curFilterField in state.linkJumpCurFilterFieldArray"
-                                    :key="curViewField.id"
+                                    :key="curFilterField.id"
-                                    :label="curViewField.name"
+                                    :label="curFilterField.name"
-                                    :value="curViewField.id"
+                                    :value="curFilterField.id"
                                   >
                                     <span class="custom-option">
                                       <Icon
                                         ><component
                                           class="svg-icon"
                                           style="width: 14px; height: 14px"
-                                          :class="`field-icon-${fieldType[curViewField.deType]}`"
+                                          :is="iconChartMap['filter']"
-                                          :is="iconFieldMap[fieldType[curViewField.deType]]"
                                         ></component
                                       ></Icon>
                                       <span
                                         style="float: left; margin-left: 4px; font-size: 14px"
-                                        >{{ curViewField.name }}</span
+                                        >{{ curFilterField.name }}</span
                                       >
                                     </span>
                                   </el-option>
@@ -445,7 +446,7 @@
                             type="primary"
                             icon="Plus"
                             text
-                            @click="addLinkJumpField"
+                            @click="addLinkJumpField('outerParams')"
                           >
                             {{ t('visualization.add_jump_field') }}
                           </el-button>
@@ -627,6 +628,7 @@ const state = reactive({
   linkJumpInfoArray: [],
   linkJumpInfoXArray: [],
   linkJumpCurViewFieldArray: [],
+  linkJumpCurFilterFieldArray: [], //当前过滤条件明细
   mapJumpInfoArray: {},
   panelList: [],
   linkJumpInfo: null,
@@ -663,6 +665,7 @@ const dialogInit = viewItem => {
 const init = viewItem => {
   state.initState = false
   state.viewId = viewItem.id
+  state.activeCollapse = 'view'
   const chartDetails = canvasViewInfo.value[state.viewId] as ChartObj
   state.curJumpViewInfo = chartDetails
   let checkAllAxisStr =
@@ -701,12 +704,27 @@ const init = viewItem => {
     state.panelList = filterEmptyFolderTree(state.panelList)
   })
 
+  // 获取当前过滤条件明细 过滤原则：1.在当前仪表板或者大屏 2.作用于当前图表
+  state.linkJumpCurFilterFieldArray = []
+  componentData.value.forEach(componentItem => {
+    if (componentItem.component === 'VQuery') {
+      componentItem.propValue.forEach(filterItem => {
+        if (filterItem.checkedFields.includes(state.viewId)) {
+          state.linkJumpCurFilterFieldArray.push({
+            id: filterItem.id,
+            name: filterItem.name,
+            deType: 'filter'
+          })
+        }
+      })
+    }
+  })
+
   if (chartDetails.tableId) {
     // 获取当前数据集信息
     getDatasetDetails(chartDetails.tableId).then(res => {
       state.curDatasetInfo = res || {}
     })
-
     // 获取当前图表的字段信息
     listFieldByDatasetGroup(chartDetails.tableId).then(rsp => {
       state.linkJumpCurViewFieldArray = []
@@ -864,9 +882,10 @@ const dvNodeClick = data => {
     getPanelViewList(data.id)
   }
 }
-const addLinkJumpField = () => {
+const addLinkJumpField = (type = 'view') => {
   state.linkJumpInfo.targetViewInfoList.push({
     targetViewId: '',
+    targetType: type,
     targetFieldId: ''
   })
 }

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

@@ -254,6 +254,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
         if (item.checkedFields.includes(curComponentId) && item.checkedFieldsMap[curComponentId]) {
           let selectValue
           const {
+            id,
             selectValue: value,
             timeGranularityMultiple,
             defaultNumValueEnd,
@@ -471,6 +472,7 @@ export const searchQuery = (queryComponentList, filter, curComponentId, firstLoa
               }
 
               filter.push({
+                filterId: id,
                 componentId: ele.id,
                 fieldId,
                 operator,

core/core-frontend/src/views/chart/components/views/index.vue

@@ -466,14 +466,42 @@ const jumpClick = param => {
     // 内部仪表板跳转
     if (jumpInfo.linkType === 'inner') {
       if (jumpInfo.targetDvId) {
+        const filterOuterParams = {}
+        const curFilter = dvMainStore.getLastViewRequestInfo(param.viewId)
+        const targetViewInfoList = jumpInfo.targetViewInfoList
+        if (
+          curFilter &&
+          curFilter.filter &&
+          curFilter.filter.length > 0 &&
+          targetViewInfoList &&
+          targetViewInfoList.length > 0
+        ) {
+          // do filter
+          curFilter.filter.forEach(filterItem => {
+            targetViewInfoList.forEach(targetViewInfo => {
+              if (targetViewInfo.sourceFieldActiveId === filterItem.filterId) {
+                filterOuterParams[targetViewInfo.outerParamsName] = filterItem.value
+              }
+            })
+          })
+        }
+        let attachParamsInfo
+        if (Object.keys(filterOuterParams).length > 0) {
+          attachParamsInfo =
+            '&attachParams=' + encodeURIComponent(Base64.encode(JSON.stringify(filterOuterParams)))
+        }
+        // 携带外部参数
         if (publicLinkStatus.value) {
           // 判断是否有公共链接ID
           if (jumpInfo.publicJumpId) {
-            const url = `${embeddedBaseUrl}#/de-link/${
+            let url = `${embeddedBaseUrl}#/de-link/${
               jumpInfo.publicJumpId
             }?fromLink=true&jumpInfoParam=${encodeURIComponent(
               Base64.encode(JSON.stringify(param))
             )}`
+            if (attachParamsInfo) {
+              url = url + attachParamsInfo
+            }
             const currentUrl = window.location.href
             localStorage.setItem('beforeJumpUrl', currentUrl)
             windowsJump(url, jumpInfo.jumpType, jumpInfo.windowSize)
@@ -481,9 +509,12 @@ const jumpClick = param => {
             ElMessage.warning(t('visualization.public_link_tips'))
           }
         } else {
-          const url = `${embeddedBaseUrl}#/preview?dvId=${
+          let url = `${embeddedBaseUrl}#/preview?dvId=${
             jumpInfo.targetDvId
           }&fromLink=true&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
+          if (attachParamsInfo) {
+            url = url + attachParamsInfo
+          }
           const currentUrl = window.location.href
           localStorage.setItem('beforeJumpUrl', currentUrl)
           if (isIframe.value || isDataEaseBi.value) {

sdk/api/api-base/src/main/java/io/dataease/api/visualization/vo/VisualizationLinkJumpTargetViewInfoVO.java

@@ -30,4 +30,9 @@ public class VisualizationLinkJumpTargetViewInfoVO {
      * 联动目标类型 view 图表 filter 过滤组件 outParams 外部参数
      */
     private String targetType;
+
+    /**
+     * 外部参数名称 当targetType==outParams时 实时查询对应名称
+     */
+    private String outerParamsName;
 }