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
+              }
             })
-            element.outerParamsFilters = currentFilters
+            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,23 +227,25 @@
       <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>
 
 <script>
-import { detailList } from '@/api/panel/panelView'
+import {detailList} from '@/api/panel/panelView'
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
-import { queryWithPanelId, updateOuterParamsSet } from '@/api/panel/outerParams'
+import {queryWithPanelId, updateOuterParamsSet} from '@/api/panel/outerParams'
-import { uuid } from 'vue-uuid'
+import {uuid} from 'vue-uuid'
-import { deepCopy } from '@/components/canvas/utils/utils'
+import {deepCopy} from '@/components/canvas/utils/utils'
-import { checkRepeat } from '@/utils/check'
+import {checkRepeat} from '@/utils/check'
 
 export default {
   name: 'OuterParamsSet',
@@ -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) {
-      targetViewInfo.targetFieldId = null
+      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) {
@@ -426,153 +446,153 @@ export default {
 
 <style scoped>
 
-  .my_table ::v-deep .el-table__row > td {
+.my_table ::v-deep .el-table__row > td {
-    /* 去除表格线 */
+  /* 去除表格线 */
-    border: none;
+  border: none;
-    padding: 0 0;
+  padding: 0 0;
-  }
+}
 
-  .my_table ::v-deep .el-table th.is-leaf {
+.my_table ::v-deep .el-table th.is-leaf {
-    /* 去除上边框 */
+  /* 去除上边框 */
-    border: none;
+  border: none;
-  }
+}
 
-  .my_table ::v-deep .el-table::before {
+.my_table ::v-deep .el-table::before {
-    /* 去除下边框 */
+  /* 去除下边框 */
-    height: 0;
+  height: 0;
-  }
+}
 
-  .root-class {
+.root-class {
-    margin: 15px 0px 5px;
+  margin: 15px 0px 5px;
-    text-align: center;
+  text-align: center;
-  }
+}
 
-  .preview {
+.preview {
-    margin-top: 5px;
+  margin-top: 5px;
-    border: 1px solid #E6E6E6;
+  border: 1px solid #E6E6E6;
-    height: 350px !important;
+  height: 350px !important;
-    overflow: hidden;
+  overflow: hidden;
-    background-size: 100% 100% !important;
+  background-size: 100% 100% !important;
-  }
+}
 
-  .preview-show {
+.preview-show {
-    border-left: 1px solid #E6E6E6;
+  border-left: 1px solid #E6E6E6;
-    height: 350px;
+  height: 350px;
-    background-size: 100% 100% !important;
+  background-size: 100% 100% !important;
-  }
+}
 
-  .slot-class {
+.slot-class {
-    color: white;
+  color: white;
-  }
+}
 
-  .bottom {
+.bottom {
-    margin-top: 15px;
+  margin-top: 15px;
-    text-align: center;
+  text-align: center;
-  }
+}
 
-  .ellip {
+.ellip {
-    /*width: 100%;*/
+  /*width: 100%;*/
-    margin-left: 10px;
+  margin-left: 10px;
-    margin-right: 10px;
+  margin-right: 10px;
-    overflow: hidden; /*超出部分隐藏*/
+  overflow: hidden; /*超出部分隐藏*/
-    white-space: nowrap; /*不换行*/
+  white-space: nowrap; /*不换行*/
-    text-overflow: ellipsis; /*超出部分文字以...显示*/
+  text-overflow: ellipsis; /*超出部分文字以...显示*/
-    text-align: center;
+  text-align: center;
-    background-color: #f7f8fa;
+  background-color: #f7f8fa;
-    color: #3d4d66;
+  color: #3d4d66;
-    font-size: 12px;
+  font-size: 12px;
-    line-height: 24px;
+  line-height: 24px;
-    height: 24px;
+  height: 24px;
-    border-radius: 3px;
+  border-radius: 3px;
-  }
+}
 
-  .select-filed {
+.select-filed {
-    /*width: 100%;*/
+  /*width: 100%;*/
-    margin-left: 10px;
+  margin-left: 10px;
-    margin-right: 10px;
+  margin-right: 10px;
-    overflow: hidden; /*超出部分隐藏*/
+  overflow: hidden; /*超出部分隐藏*/
-    white-space: nowrap; /*不换行*/
+  white-space: nowrap; /*不换行*/
-    text-overflow: ellipsis; /*超出部分文字以...显示*/
+  text-overflow: ellipsis; /*超出部分文字以...显示*/
-    color: #3d4d66;
+  color: #3d4d66;
-    font-size: 12px;
+  font-size: 12px;
-    line-height: 35px;
+  line-height: 35px;
-    height: 35px;
+  height: 35px;
-    border-radius: 3px;
+  border-radius: 3px;
-  }
+}
 
-  ::v-deep .el-popover {
+::v-deep .el-popover {
-    height: 200px;
+  height: 200px;
-    overflow: auto;
+  overflow: auto;
-  }
+}
 
-  .custom-position {
+.custom-position {
-    flex: 1;
+  flex: 1;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: space-between;
+  justify-content: space-between;
-    font-size: 14px;
+  font-size: 14px;
-    flex-flow: row nowrap;
+  flex-flow: row nowrap;
-    color: #9ea6b2;
+  color: #9ea6b2;
-  }
+}
 
-  .tree-style {
+.tree-style {
-    padding: 10px 15px;
+  padding: 10px 15px;
-    height: 100%;
+  height: 100%;
-    overflow-y: auto;
+  overflow-y: auto;
-  }
+}
 
-  /deep/ .vue-treeselect__control {
+/deep/ .vue-treeselect__control {
-    height: 28px;
+  height: 28px;
-  }
+}
 
-  /deep/ .vue-treeselect__single-value {
+/deep/ .vue-treeselect__single-value {
-    color: #606266;
+  color: #606266;
-    line-height: 28px !important;
+  line-height: 28px !important;
-  }
+}
 
-  .custom-tree-node {
+.custom-tree-node {
-    flex: 1;
+  flex: 1;
-    display: flex;
+  display: flex;
-    align-items: center;
+  align-items: center;
-    justify-content: space-between;
+  justify-content: space-between;
-    font-size: 14px;
+  font-size: 14px;
-  }
+}
 
-  .auth-span {
+.auth-span {
-    float: right;
+  float: right;
-    width: 40px;
+  width: 40px;
-    margin-right: 5px
+  margin-right: 5px
-  }
+}
 
-  .tree-head {
+.tree-head {
-    height: 30px;
+  height: 30px;
-    line-height: 30px;
+  line-height: 30px;
-    border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
+  border-bottom: 1px solid var(--TableBorderColor, #e6e6e6);
-    background-color: var(--SiderBG, #f7f8fa);
+  background-color: var(--SiderBG, #f7f8fa);
-    font-size: 12px;
+  font-size: 12px;
-    color: var(--TableColor, #3d4d66);
+  color: var(--TableColor, #3d4d66);
-  }
+}
 
-  .tree-content {
+.tree-content {
-    height: calc(100% - 70px);
+  height: calc(100% - 70px);
-    overflow-y: auto;
+  overflow-y: auto;
-  }
+}
 
-  .tree-bottom {
+.tree-bottom {
-    margin-top: 7px;
+  margin-top: 7px;
-    text-align: center;
+  text-align: center;
-  }
+}
 
-  /deep/ .vue-treeselect__placeholder {
+/deep/ .vue-treeselect__placeholder {
-    line-height: 28px
+  line-height: 28px
-  }
+}
 
-  /deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+/deep/ .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
-    background-color: #8dbbef !important;
+  background-color: #8dbbef !important;
-  }
+}
 
-  .tree-content ::v-deep .el-input__inner {
+.tree-content ::v-deep .el-input__inner {
-    background: transparent;
+  background: transparent;
-    border: 0px !important;
+  border: 0px !important;
-  }
+}
 </style>