dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #6694 from dataease/pr@dev@feat_outerparams

Browse Source 
feat(仪表板): 仪表板外部参数支持匹配过滤组件 #5891
This commit is contained in:
王嘉豪 2023-11-15 11:31:16 +08:00 committed by GitHub
commit b4a145bbda
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 178 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/frontend/src/icons/svg/filter.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

3
core/frontend/src/lang/en.js
View File

@ -2036,6 +2036,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',
@ -2352,7 +2353,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...',

3
core/frontend/src/lang/tw.js
View File

@ -2028,6 +2028,7 @@ export default {
back_parent: '返回上一級'
},
panel: {
filter_no_select: '過濾組件無需選擇',
first_item: '首項',
forbidden_copy: '當前組件不允許復製',
url_check_error: '跳轉錯誤，URL不合法',
@ -2344,7 +2345,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: '請選擇維度...',

3
core/frontend/src/lang/zh.js
View File

@ -2029,6 +2029,7 @@ export default {
back_parent: '返回上一级'
},
panel: {
filter_no_select: '过滤组件无需选择',
first_item: '首项',
forbidden_copy: '当前组件不允许复制',
url_check_error: '跳转错误，URL不合法',
@ -2345,7 +2346,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: '请选择维度...',

11
core/frontend/src/store/index.js
View File

@ -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
})
}

300
core/frontend/src/views/panel/outerParamsSet/index.vue
View File

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