feat:设置条件绑定视图

This commit is contained in:
fit2cloud-chenyw 2021-04-19 15:31:03 +08:00
parent 153ac35701
commit 5af4158dc4
8 changed files with 127 additions and 15 deletions

View File

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

View File

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

View File

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

View File

@ -8,3 +8,12 @@ export function tree(data) {
data
})
}
export function viewsWithIds(data) {
return request({
url: '/api/panelView/viewsWithIds',
method: 'post',
loading: true,
data
})
}

View File

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

View File

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

View File

@ -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]"

View File

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