center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #1936 from dataease/pr@dev@refactor_outer-params

Browse Source 
refactor: 优化外部参数设置界面
This commit is contained in:
王嘉豪 2022-03-18 20:36:55 +08:00 committed by GitHub
commit dba486d9b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 280 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelOuterParamsMapper.java
View File

@ -8,6 +8,10 @@ public interface ExtPanelOuterParamsMapper {
PanelOuterParamsDTO queryWithPanelId(@Param("panelId") String panelId);
void deleteOuterParamsTargetWithPanelId(@Param("panelId") String panelId);
void deleteOuterParamsInfoWithPanelId(@Param("panelId") String panelId);
void deleteOuterParamsWithPanelId(@Param("panelId") String panelId);
}

24
backend/src/main/java/io/dataease/base/mapper/ext/ExtPanelOuterParamsMapper.xml
View File

@ -46,8 +46,8 @@
panel_group.id = #{panelId}
</select>
<delete id="deleteOuterParamsWithPanelId" >
DELETE poptvi,popi,pop
<delete id="deleteOuterParamsTargetWithPanelId" >
DELETE poptvi
FROM
panel_outer_params_target_view_info poptvi,
panel_outer_params_info popi,
@ -58,4 +58,24 @@
AND pop.panel_id = #{panelId}
</delete>
<delete id="deleteOuterParamsInfoWithPanelId" >
DELETE popi
FROM
panel_outer_params_info popi,
panel_outer_params pop
WHERE
popi.params_id = pop.params_id
AND pop.panel_id = #{panelId}
</delete>
<delete id="deleteOuterParamsWithPanelId" >
DELETE pop
FROM
panel_outer_params pop
WHERE
pop.panel_id = #{panelId}
</delete>
</mapper>

2
backend/src/main/java/io/dataease/controller/panel/PanelOuterParamsController.java
View File

@ -1,8 +1,6 @@
package io.dataease.controller.panel;
import com.github.xiaoymin.knife4j.annotations.ApiSupport;
import io.dataease.base.domain.PanelOuterParams;
import io.dataease.dto.panel.linkJump.PanelLinkJumpDTO;
import io.dataease.dto.panel.outerParams.PanelOuterParamsDTO;
import io.dataease.service.panel.PanelOuterParamsService;
import io.swagger.annotations.Api;

2
backend/src/main/java/io/dataease/service/panel/PanelOuterParamsService.java
View File

@ -46,6 +46,8 @@ public class PanelOuterParamsService {
String panelId = outerParamsDTO.getPanelId();
Assert.notNull(panelId, "panelId cannot be null");
//清理原有数据
extPanelOuterParamsMapper.deleteOuterParamsTargetWithPanelId(panelId);
extPanelOuterParamsMapper.deleteOuterParamsInfoWithPanelId(panelId);
extPanelOuterParamsMapper.deleteOuterParamsWithPanelId(panelId);
// 插入新的数据
String paramsId = UUID.randomUUID().toString();

6
frontend/src/components/canvas/components/Toolbar.vue
View File

@ -38,9 +38,9 @@
<el-tooltip :content="$t('panel.fullscreen_preview')">
<el-button class="el-icon-view" size="mini" circle @click="clickPreview" />
</el-tooltip>
<!-- <el-tooltip :content="$t('panel.params_setting')">-->
<!-- <el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />-->
<!-- </el-tooltip>-->
<el-tooltip :content="$t('panel.params_setting')">
<el-button class="icon iconfont-tb icon-canshu" size="mini" circle @click="openOuterParamsSet" />
</el-tooltip>
<span style="float: right;margin-left: 10px">
<el-button size="mini" :disabled="saveButtonDisabled" @click="save(false)">
{{ $t('commons.save') }}

8
frontend/src/lang/en.js
View File

@ -1381,6 +1381,14 @@ export default {
sure_bt: 'Confirm'
},
panel: {
enable_outer_param_set: 'Enable Outer Param Set',
select_param: 'Please Select Param...',
add_param_link_field: "Add Params' Linked Field",
add_param: 'Add Param',
enable_param: 'Enable Param',
param_name: 'Param Name',
outer_param_set: 'Outer Param Set',
input_param_name: "Please Input Param's Name",
params_setting: 'Outer Params Setting',
template_view_tips: "Template's Views. Please Change",
no_auth_role: 'Unshared roles',

8
frontend/src/lang/tw.js
View File

@ -1382,6 +1382,14 @@ export default {
sure_bt: '確定'
},
panel: {
enable_outer_param_set: '启用外部参数设置',
select_param: '请选择参数...',
add_param_link_field: '添加参数联动字段',
add_param: '添加参数',
enable_param: '启用参数',
param_name: '参数名称',
outer_param_set: '外部参数设置',
input_param_name: '请输入参数名称',
params_setting: '外部参数设置',
template_view_tips: '当前是模板视图,请点击更换数据集',
no_auth_role: '未分享角色',

8
frontend/src/lang/zh.js
View File

@ -1390,6 +1390,14 @@ export default {
sure_bt: '确定'
},
panel: {
enable_outer_param_set: '启用外部参数设置',
select_param: '请选择参数...',
add_param_link_field: '添加参数联动字段',
add_param: '添加参数',
enable_param: '启用参数',
param_name: '参数名称',
outer_param_set: '外部参数设置',
input_param_name: '请输入参数名称',
params_setting: '外部参数设置',
template_view_tips: '当前是模板视图,请点击更换数据集',
no_auth_role: '未分享角色',

435
frontend/src/views/panel/OuterParamsSet/index.vue
View File

@ -1,83 +1,61 @@
<template>
<el-row v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="height: 430px">
<el-row>
<span style="font-weight:600;margin-right: 20px">{{ $t('panel.jump_set') }}</span>
<el-checkbox v-model="outerParams.checked">{{ $t('panel.enable_jump') }}</el-checkbox>
<span style="font-weight:600;margin-right: 20px">{{ $t('panel.outer_param_set') }}</span>
<el-checkbox v-model="outerParams.checked">{{ $t('panel.enable_outer_param_set') }}</el-checkbox>
</el-row>
<el-row v-loading="loading">
<el-row class="preview">
<el-col :span="8" style="height:100%;overflow-y: auto">
<el-col :span="8" style="height:100%;overflow-y: hidden">
<el-row class="tree-head">
<span style="float: left;margin-left: 30px">{{ $t('panel.column_name') }}</span>
<span style="float: right;margin-right: 10px">{{ $t('panel.enable_column') }}</span>
<span style="float: left;margin-left: 30px">{{ $t('panel.param_name') }}</span>
<span style="float: right;margin-right: 10px">{{ $t('panel.enable_param') }}</span>
</el-row>
<el-tree
ref="outerParamsInfoTree"
:data="outerParamsInfoArray"
node-key="paramsInfoId"
highlight-current
:props="treeProp"
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span style="margin-left: 6px"><el-input v-model="data.paramName" size="mini" :placeholder="$t('fu.search_bar.please_select')" /></span>
</span>
<span @click.stop>
<div>
<span class="auth-span">
<el-checkbox v-model="data.checked" style="margin-right: 10px" @change="sourceFieldCheckedChange(data)" />
<el-button icon="el-icon-delete" type="text" size="small" @click="removeOuterParamsInfo(node,data)" />
</span>
</div>
<el-row class="tree-content">
<el-tree
ref="outerParamsInfoTree"
:data="outerParamsInfoArray"
node-key="id"
highlight-current
:props="treeProp"
@node-click="nodeClick"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
<span style="margin-left: 6px"><el-input
v-model="data.paramName"
size="mini"
:placeholder="$t('panel.input_param_name')"
/></span>
</span>
<span @click.stop>
<div>
<span class="auth-span">
<el-checkbox
v-model="data.checked"
style="margin-right: 10px"
@change="sourceFieldCheckedChange(data)"
/>
<el-button
icon="el-icon-delete"
type="text"
size="small"
@click="removeOuterParamsInfo(node,data)"
/>
</span>
</div>
</span>
</span>
</span>
</el-tree>
<el-row class="bottom">
<el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsInfo">添加参数</el-button>
</el-tree>
</el-row>
<el-row class="tree-bottom">
<el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsInfo">{{ $t('panel.add_param') }}</el-button>
</el-row>
</el-col>
<el-col :span="16" class="preview-show">
<el-row v-if="outerParamsInfo">
<el-row style="margin-top: 10px;height: 30px;">
<el-col :span="4" style="margin-left: 20px">
{{ $t('panel.link_type') }}：
</el-col>
<el-col :span="10">
<el-radio-group v-model="outerParamsInfo.linkType" size="mini">
<el-radio label="outer">{{ $t('panel.link_outer') }}</el-radio>
<el-radio label="inner">{{ $t('panel.link_panel') }}</el-radio>
</el-radio-group>
</el-col>
<el-col v-if="outerParamsInfo.linkType==='inner'" :span="9">
<treeselect
v-model="outerParamsInfo.targetPanelId"
:options="panelList"
:disable-branch-nodes="true"
:normalizer="normalizer"
:placeholder="$t('panel.select_jump_panel')"
:no-children-text="$t('commons.treeselect.no_children_text')"
:no-options-text="$t('commons.treeselect.no_options_text')"
:no-results-text="$t('commons.treeselect.no_results_text')"
style="margin-right: 10px"
@select="panelNodeClick"
@input="inputVal"
/>
</el-col>
</el-row>
<el-row style="margin-top: 10px;height: 30px">
<el-col :span="4" style="margin-left: 20px">
{{ $t('panel.open_model') }}：
</el-col>
<el-col :span="10">
<el-radio-group v-model="outerParamsInfo.jumpType" size="mini">
<el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
<el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
</el-radio-group>
</el-col>
</el-row>
<el-row v-if="outerParamsInfo.linkType==='inner'" style="margin-top: 5px;" class="top_border">
<el-row class="top_border">
<el-row style="margin-top: 10px">
<el-col :span="11">
<div class="ellip">{{ $t('panel.link_view') }}</div>
@ -86,11 +64,17 @@
<div class="ellip">{{ $t('panel.link_view_field') }}</div>
</el-col>
</el-row>
<el-row style="height: 180px;overflow-y: auto">
<el-row style="height: 266px;overflow-y: auto">
<el-row v-for="(targetViewInfo,index) in outerParamsInfo.targetViewInfoList" :key="index">
<el-col :span="11">
<div class="select-filed">
<el-select v-model="targetViewInfo.targetViewId" style="width: 100%" size="mini" :placeholder="$t('fu.search_bar.please_select')" @change="viewInfoOnChange(targetViewInfo)">
<el-select
v-model="targetViewInfo.targetViewId"
style="width: 100%"
size="mini"
:placeholder="$t('fu.search_bar.please_select')"
@change="viewInfoOnChange(targetViewInfo)"
>
<el-option
v-for="item in currentLinkPanelViewArray"
:key="item.id"
@ -107,7 +91,12 @@
</el-col>
<el-col :span="11">
<div class="select-filed">
<el-select v-model="targetViewInfo.targetFieldId" style="width: 100%" size="mini" :placeholder="$t('fu.search_bar.please_select')">
<el-select
v-model="targetViewInfo.targetFieldId"
style="width: 100%"
size="mini"
:placeholder="$t('fu.search_bar.please_select')"
>
<el-option
v-for="viewField in viewIdFieldArrayMap[targetViewInfo.targetViewId]"
:key="viewField.id"
@ -117,8 +106,16 @@
<span style="float: left">
<svg-icon v-if="viewField.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="viewField.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="viewField.deType === 2 || viewField.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="viewField.deType === 5" icon-class="field_location" class="field-icon-location" />
<svg-icon
v-if="viewField.deType === 2 || viewField.value === 3"
icon-class="field_value"
class="field-icon-value"
/>
<svg-icon
v-if="viewField.deType === 5"
icon-class="field_location"
class="field-icon-location"
/>
</span>
<span style="float: left;font-size: 12px">{{ viewField.name }}</span>
</el-option>
@ -127,14 +124,22 @@
</el-col>
<el-col :span="2">
<div>
<el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteOuterParamsField(index)" />
<el-button
icon="el-icon-delete"
type="text"
size="small"
style="float: left"
@click="deleteOuterParamsField(index)"
/>
</div>
</el-col>
</el-row>
</el-row>
<el-row class="bottom">
<el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsField">{{ $t('panel.add_jump_field') }}</el-button>
<el-button size="mini" type="success" icon="el-icon-plus" round @click="addOuterParamsField">{{
$t('panel.add_param_link_field') }}
</el-button>
</el-row>
<!-- <el-button slot="reference">T</el-button>-->
@ -150,7 +155,7 @@
</el-row>
</el-row>
<el-row v-else style="height: 100%; background-color: var(--MainContentBG);" class="custom-position">
{{ $t('panel.select_dimension') }}
{{ $t('panel.select_param') }}
</el-row>
</el-col>
</el-row>
@ -167,10 +172,11 @@ 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'
export default {
name: 'OuterParamsSet',
components: { },
components: {},
data() {
return {
loading: false,
@ -196,7 +202,7 @@ export default {
outerParamsInfo: null,
currentFiledTreeNode: null,
defaultOuterParamsInfo: {
paramName: '测试',
paramName: '',
checked: false,
targetViewInfoList: []
},
@ -218,9 +224,7 @@ export default {
'canvasStyleData'
])
},
watch: {
},
watch: {},
created() {
},
mounted() {
@ -247,6 +251,8 @@ export default {
})
}
})
this.getPanelViewList(this.panelInfo.id)
},
handleExceed(file) {
},
@ -260,22 +266,11 @@ export default {
type: 'success',
showClose: true
})
this.cancel()
})
},
nodeClick(data, node) {
this.outerParamsInfo = this.mapOuterParamsInfoArray[data.paramsInfoId]
if (!this.outerParamsInfo.linkType) {
this.outerParamsInfo.linkType = 'inner'
}
if (!this.outerParamsInfo.jumpType) {
this.outerParamsInfo.jumpType = '_blank'
}
if (!this.outerParamsInfo.content) {
this.outerParamsInfo.content = 'http://'
}
if (this.outerParamsInfo.targetPanelId) {
this.getPanelViewList(this.outerParamsInfo.targetPanelId)
}
},
// 获取当前视图字段 关联仪表板的视图信息列表
getPanelViewList(panelId) {
@ -326,14 +321,10 @@ export default {
})
},
addOuterParamsInfo() {
this.outerParamsInfoArray.push(
{
paramsInfoId: uuid.v1,
paramName: '',
checked: false,
targetViewInfoList: []
}
)
const outerParamsInfo = deepCopy(this.defaultOuterParamsInfo)
outerParamsInfo['paramsInfoId'] = uuid.v1()
this.outerParamsInfoArray.push(outerParamsInfo)
this.mapOuterParamsInfoArray[outerParamsInfo.paramsInfoId] = outerParamsInfo
},
removeOuterParamsInfo(node, data) {
const parent = node.parent
@ -347,133 +338,153 @@ export default {
<style scoped>
.my_table >>> .el-table__row>td{
/* 去除表格线 */
border: none;
padding: 0 0;
}
.my_table >>> .el-table th.is-leaf {
/* 去除上边框 */
.my_table >>> .el-table__row > td {
/* 去除表格线 */
border: none;
}
.my_table >>> .el-table::before{
/* 去除下边框 */
height: 0;
}
padding: 0 0;
}
.my_table >>> .el-table th.is-leaf {
/* 去除上边框 */
border: none;
}
.my_table >>> .el-table::before {
/* 去除下边框 */
height: 0;
}
.root-class {
margin: 15px 0px 5px;
text-align: center;
}
.preview {
margin-top: 5px;
border:1px solid #E6E6E6;
height:350px !important;
overflow:hidden;
border: 1px solid #E6E6E6;
height: 350px !important;
overflow: hidden;
background-size: 100% 100% !important;
}
.preview-show {
border-left:1px solid #E6E6E6;
height:350px;
border-left: 1px solid #E6E6E6;
height: 350px;
background-size: 100% 100% !important;
}
.top_border {
border-top:1px solid #E6E6E6;
}
.slot-class{
color: white;
}
.bottom {
margin-top: 20px;
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;
}
.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;
}
>>>.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;
}
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
/deep/ .vue-treeselect__control{
height: 28px;
}
/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;
}
.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) ;
}
/deep/ .vue-treeselect__placeholder{
line-height:28px
.slot-class {
color: white;
}
/deep/ .el-tree--highlight-current .el-tree-node.is-current >.el-tree-node__content {
background-color: #8dbbef !important;
}
/deep/ .el-input__inner{
background: transparent;
border:0px!important;
}
.bottom {
margin-top: 20px;
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;
}
.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;
}
>>> .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;
}
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
/deep/ .vue-treeselect__control {
height: 28px;
}
/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;
}
.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-content {
height: calc(100% - 70px);
overflow-y: auto;
}
.tree-bottom {
margin-top: 12px;
text-align: center;
}
/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;
}
.tree-content ::v-deep .el-input__inner {
background: transparent;
border: 0px !important;
}
</style>

4
frontend/src/views/panel/edit/index.vue
View File

@ -322,7 +322,7 @@
:destroy-on-close="true"
:append-to-body="true"
>
<OuterParamsSet v-if="outerParamsSetVisible" @closeOuterParamsSetDialog="closeOuterParamsSetDialog" />
<OuterParamsSet v-if="outerParamsSetVisible" @outerParamsSetVisibleChange="outerParamsSetVisibleChange" />
</el-dialog>
</el-row>
@ -612,7 +612,7 @@ export default {
elx && elx.remove()
},
methods: {
closeOuterParamsSetDialog(){
closeOuterParamsSetDialog() {
this.outerParamsSetVisible = false
},
changeRightDrawOpen(param) {