public/dataease
1
0
Fork 0
mirror of https://github.com/dataease/dataease.git synced 2026-05-19 02:08:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat:仪表板联动设置浮层

Browse Source
This commit is contained in:
wangjiahao
2021-08-06 17:24:17 +08:00
parent 4f81ca0f40
commit d46a40dcd2
15 changed files with 362 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/api/panel/linkage.js
View File

@@ -9,3 +9,12 @@ export function getViewLinkageGather(requestInfo) {
})
}
export function saveLinkage(requestInfo) {
return request({
url: '/linkage/saveLinkage',
method: 'post',
data: requestInfo,
loading: true
})
}

86
frontend/src/components/canvas/components/Editor/LinkageField.vue
View File

@@ -1,22 +1,68 @@
<template>
<el-popover
width="300"
width="400"
trigger="click"
>
<el-row>
<el-col :span="10">
<div class="ellip">联动视图</div>
<el-col :span="11">
<div class="ellip">{{ sourceLinkageInfo.targetViewName }}</div>
</el-col>
<el-col :span="10">
<el-col :span="11">
<div class="ellip">{{ linkageInfo.targetViewName }}</div>
</el-col>
</el-row>
linkageInfo{{ linkageInfo }}
<el-row v-for="(item, index) in linkageInfo.linkageFields" :key="index">
<el-col :span="11">
<div class="select-filed">
<el-select v-model="item.sourceField" size="mini" placeholder="请选择">
<el-option
v-for="item in sourceLinkageInfo.targetViewFields"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="11">
<div class="select-filed">
<el-select v-model="item.targetField" size="mini" placeholder="请选择">
<el-option
v-for="item in linkageInfo.targetViewFields"
:key="item.id"
:label="item.name"
:value="item.id"
>
<span style="float: left">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
</el-option>
</el-select>
</div>
</el-col>
<el-col :span="2">
<div>
<el-button icon="el-icon-delete" type="text" size="small" style="float: left" @click="deleteLinkageField(index)" />
</div>
</el-col>
</el-row>
<el-row class="bottom">
<el-button size="mini" type="success" icon="el-icon-plus" round>追加联动依赖字段</el-button>
<el-button size="mini" type="success" icon="el-icon-plus" round @click="addLinkageField">追加联动依赖字段</el-button>
</el-row>
<!-- <el-button slot="reference">T</el-button>-->
@@ -60,6 +106,9 @@ export default {
linkageInfo() {
return this.targetLinkageInfo[this.element.propValue.viewId]
},
sourceLinkageInfo() {
return this.targetLinkageInfo[this.curLinkageView.propValue.viewId]
},
...mapState([
'menuTop',
'menuLeft',
@@ -81,6 +130,16 @@ export default {
},
linkageEdit() {
},
deleteLinkageField(index) {
this.linkageInfo.linkageFields.splice(index, 1)
},
addLinkageField() {
const linkageFieldItem = {
sourceViewId: null,
targetViewId: null
}
this.linkageInfo.linkageFields.push(linkageFieldItem)
}
}
}
@@ -92,6 +151,7 @@ export default {
}
.bottom {
margin-top: 20px;
text-align: center;
}
@@ -110,4 +170,18 @@ export default {
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;
}
</style>

3
frontend/src/components/canvas/components/Editor/SettingMenu.vue
View File

@@ -124,7 +124,8 @@ export default {
},
linkageSetting() {
debugger
const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId && item !== this.curComponent)
// sourceViewId 也加入查询
const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
.map(item => item.propValue.viewId)
// 获取当前仪表板当前视图联动信息

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

@@ -101,6 +101,7 @@ import { commonStyle, commonAttr } from '@/components/canvas/custom-component/co
import eventBus from '@/components/canvas/utils/eventBus'
import { deepCopy } from '@/components/canvas/utils/utils'
import { panelSave } from '@/api/panel/panel'
import { saveLinkage } from '@/api/panel/linkage'
import bus from '@/utils/bus'
import {
DEFAULT_COMMON_CANVAS_STYLE_STRING
@@ -137,7 +138,9 @@ export default {
'changeTimes',
'snapshotIndex',
'lastSaveSnapshotIndex',
'linkageSettingStatus'
'linkageSettingStatus',
'curLinkageView',
'targetLinkageInfo'
]),
created() {
@@ -316,7 +319,14 @@ export default {
this.close()
},
saveLinkage() {
this.cancelLinkageSettingStatus()
const request = {
panelId: this.$store.state.panel.panelInfo.id,
sourceViewId: this.curLinkageView.propValue.viewId,
linkageInfo: this.targetLinkageInfo
}
saveLinkage(request).then(rsp => {
this.cancelLinkageSettingStatus()
})
},
cancelLinkage() {
this.cancelLinkageSettingStatus()