forked from github/dataease
feat:设置条件绑定视图
This commit is contained in:
parent
153ac35701
commit
5af4158dc4
@ -1,10 +1,12 @@
|
||||
package io.dataease.controller.panel.api;
|
||||
|
||||
|
||||
import io.dataease.base.domain.ChartView;
|
||||
import io.dataease.controller.sys.base.BaseGridRequest;
|
||||
import io.dataease.dto.panel.PanelViewDto;
|
||||
import io.swagger.annotations.Api;
|
||||
import io.swagger.annotations.ApiOperation;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.PostMapping;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
|
||||
@ -20,6 +22,11 @@ public interface ViewApi {
|
||||
List<PanelViewDto> tree(BaseGridRequest request);
|
||||
|
||||
|
||||
@ApiOperation("根据仪表板Id查询视图")
|
||||
@PostMapping("/viewsWithIds")
|
||||
List<ChartView> viewsWithIds(List<String> viewIds);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -1,13 +1,16 @@
|
||||
package io.dataease.controller.panel.server;
|
||||
|
||||
import io.dataease.base.domain.ChartView;
|
||||
import io.dataease.commons.utils.AuthUtils;
|
||||
import io.dataease.controller.panel.api.ViewApi;
|
||||
import io.dataease.controller.sys.base.BaseGridRequest;
|
||||
import io.dataease.controller.sys.base.ConditionEntity;
|
||||
import io.dataease.dto.panel.PanelViewDto;
|
||||
import io.dataease.dto.panel.po.PanelViewPo;
|
||||
import io.dataease.service.chart.ChartViewService;
|
||||
import io.dataease.service.panel.PanelViewService;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.RequestBody;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
@ -20,6 +23,9 @@ public class ViewServer implements ViewApi {
|
||||
@Autowired
|
||||
private PanelViewService panelViewService;
|
||||
|
||||
@Autowired
|
||||
private ChartViewService chartViewService;
|
||||
|
||||
/**
|
||||
* 为什么查两次?
|
||||
* 因为left join 会导致全表扫描
|
||||
@ -40,4 +46,10 @@ public class ViewServer implements ViewApi {
|
||||
List<PanelViewDto> panelViewDtos = panelViewService.buildTree(groups, views);
|
||||
return panelViewDtos;
|
||||
}
|
||||
|
||||
@Override
|
||||
public List<ChartView> viewsWithIds(@RequestBody List<String> viewIds) {
|
||||
|
||||
return chartViewService.viewsByIds(viewIds);
|
||||
}
|
||||
}
|
||||
|
@ -320,4 +320,10 @@ public class ChartViewService {
|
||||
}
|
||||
return map;
|
||||
}
|
||||
|
||||
public List<ChartView> viewsByIds(List<String> viewIds){
|
||||
ChartViewExample example = new ChartViewExample();
|
||||
example.createCriteria().andIdIn(viewIds);
|
||||
return chartViewMapper.selectByExample(example);
|
||||
}
|
||||
}
|
||||
|
@ -8,3 +8,12 @@ export function tree(data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function viewsWithIds(data) {
|
||||
return request({
|
||||
url: '/api/panelView/viewsWithIds',
|
||||
method: 'post',
|
||||
loading: true,
|
||||
data
|
||||
})
|
||||
}
|
||||
|
@ -314,7 +314,8 @@ export default {
|
||||
setConditionValue(obj) {
|
||||
const { component, value, operator } = obj
|
||||
const fieldId = component.options.attrs.fieldId
|
||||
const condition = new Condition(component.id, fieldId, operator, value, null)
|
||||
const viewIds = component.options.attrs.viewIds
|
||||
const condition = new Condition(component.id, fieldId, operator, value, viewIds)
|
||||
this.addCondition(condition)
|
||||
},
|
||||
addCondition(condition) {
|
||||
|
@ -31,7 +31,7 @@ export default {
|
||||
methods: {
|
||||
getData(id) {
|
||||
if (id) {
|
||||
post('/chart/view/getData/' + id, null).then(response => {
|
||||
post('/chart/view/getData/' + id, {}).then(response => {
|
||||
// 将视图传入echart组件
|
||||
this.chart = response.data
|
||||
})
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
|
||||
<el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
|
||||
<el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :multiple="options.attrs.multiple" :style="element.style" :placeholder="options.attrs.placeholder" @change="changeValue">
|
||||
<el-option
|
||||
v-for="item in options.attrs.datas"
|
||||
:key="item[options.attrs.key]"
|
||||
|
@ -110,12 +110,36 @@
|
||||
v-model="componentInfo.options.attrs.multiple"
|
||||
active-text="多选"
|
||||
inactive-text="单选"
|
||||
@change="multipleChange"
|
||||
/>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><div class="filter-options-right">
|
||||
<el-checkbox v-model="customRange"><span> 自定义控制范围 </span> </el-checkbox>
|
||||
<i :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" @click="showFilterRange" />
|
||||
|
||||
<el-popover
|
||||
v-model="popovervisible"
|
||||
placement="bottom-end"
|
||||
:disabled="!customRange"
|
||||
width="200"
|
||||
>
|
||||
<div class="view-container-class">
|
||||
<el-checkbox-group v-model="checkedViews" @change="checkedViewsChange">
|
||||
<el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" border>
|
||||
<span>
|
||||
<svg-icon :icon-class="item.type" class="chart-icon" />
|
||||
<span style="margin-left: 6px">{{ item.name }}</span>
|
||||
</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<!-- <div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="popovervisible=false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="popovervisible=false">确定</el-button>
|
||||
</div> -->
|
||||
<i slot="reference" :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" />
|
||||
</el-popover>
|
||||
<!-- <el-checkbox disabled>备选项</el-checkbox> -->
|
||||
</div>
|
||||
|
||||
@ -147,8 +171,10 @@ import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import draggable from 'vuedraggable'
|
||||
import DragItem from '@/components/DragItem'
|
||||
import { mapState } from 'vuex'
|
||||
// import { ApplicationContext } from '@/utils/ApplicationContext'
|
||||
import { groupTree, loadTable, fieldList, fieldValues } from '@/api/dataset/dataset'
|
||||
import { viewsWithIds } from '@/api/panel/view'
|
||||
export default {
|
||||
name: 'FilterDialog',
|
||||
components: {
|
||||
@ -169,6 +195,7 @@ export default {
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
activeName: 'dataset',
|
||||
@ -186,21 +213,35 @@ export default {
|
||||
selectField: [],
|
||||
widget: null,
|
||||
fieldValues: [],
|
||||
customRange: false
|
||||
customRange: false,
|
||||
popovervisible: false,
|
||||
viewInfos: [],
|
||||
checkedViews: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
panelInfo() {
|
||||
return this.$store.state.panel.panelInfo
|
||||
},
|
||||
...mapState([
|
||||
'componentData',
|
||||
'curComponent',
|
||||
'isClickComponent',
|
||||
'canvasStyleData',
|
||||
'curComponentIndex'
|
||||
])
|
||||
},
|
||||
|
||||
watch: {
|
||||
selectField(values) {
|
||||
if (values && values.length > 0) {
|
||||
const value = values[0]
|
||||
const fieldId = value.id
|
||||
const info = this.componentInfo
|
||||
this.widget && fieldValues(fieldId).then(res => {
|
||||
info.options.attrs.datas = this.widget.optionDatas(res.data)
|
||||
info.options.attrs.fieldId = fieldId
|
||||
info.options.attrs.dragItems = values
|
||||
this.$emit('re-fresh-component', info)
|
||||
this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
|
||||
this.componentInfo.options.attrs.fieldId = fieldId
|
||||
this.componentInfo.options.attrs.dragItems = values
|
||||
this.$emit('re-fresh-component', this.componentInfo)
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -213,9 +254,26 @@ export default {
|
||||
if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
|
||||
this.selectField = this.componentInfo.options.attrs.dragItems
|
||||
}
|
||||
this.loadViews()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
loadViews() {
|
||||
const viewIds = this.componentData
|
||||
.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
|
||||
.map(item => item.propValue.viewId)
|
||||
viewsWithIds(viewIds).then(res => {
|
||||
const datas = res.data
|
||||
|
||||
// for (let index = 0; index < 4; index++) {
|
||||
// datas = datas.concat(datas)
|
||||
// }
|
||||
// datas.forEach(item => item.name += 'aaaaaaaaabbbbb')
|
||||
|
||||
this.viewInfos = datas
|
||||
})
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
if (data.type === 'scene') {
|
||||
this.showSceneTable(data)
|
||||
@ -334,11 +392,16 @@ export default {
|
||||
const index = tag.index
|
||||
this.selectField.splice(index, 1)
|
||||
},
|
||||
showFilterRange() {
|
||||
// 如果不是自定义范围 直接返回
|
||||
if (!this.customRange) {
|
||||
return
|
||||
}
|
||||
|
||||
multipleChange(value) {
|
||||
// this.componentInfo.options.attrs.multiple = value
|
||||
this.componentInfo.options.value = null
|
||||
this.$emit('re-fresh-component', this.componentInfo)
|
||||
},
|
||||
|
||||
checkedViewsChange(values) {
|
||||
this.componentInfo.options.attrs.viewIds = values
|
||||
this.$emit('re-fresh-component', this.componentInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -484,4 +547,18 @@ export default {
|
||||
cursor: pointer!important;
|
||||
}
|
||||
|
||||
.view-container-class {
|
||||
|
||||
min-height: 150px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
word-break:break-all;
|
||||
position: relative;
|
||||
>>> label {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
Loading…
Reference in New Issue
Block a user