feat: 查询条件绑定视图

This commit is contained in:
fit2cloud-chenyw 2021-05-20 17:44:31 +08:00
parent 3d7a65aa93
commit 6aab309741
2 changed files with 27 additions and 13 deletions

View File

@ -1,6 +1,6 @@
<template>
<el-select v-if="options!== null && options.attrs!==null" v-model="options.value" clearable :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
<el-select v-if="options!== null && options.attrs!==null" v-model="options.value" :clearable="!options.attrs.multiple" :multiple="options.attrs.multiple" :placeholder="options.attrs.placeholder" @change="changeValue">
<el-option
v-for="item in options.attrs.datas"
:key="item[options.attrs.key]"
@ -28,10 +28,15 @@ export default {
data() {
return {
options: null,
operator: 'eq',
// operator: 'eq',
values: null
}
},
computed: {
operator() {
return this.options.attrs.multiple ? 'in' : 'eq'
}
},
watch: {
'options.attrs.multiple': function(value) {
if (value) {
@ -41,7 +46,6 @@ export default {
}
}
},
created() {
this.options = this.element.options
this.setCondition()
@ -54,11 +58,16 @@ export default {
methods: {
changeValue(value) {
this.setCondition()
this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
// this.inDraw && this.$emit('set-condition-value', { component: this.element, value: [value], operator: this.operator })
},
setCondition() {
this.inDraw && this.$store.dispatch('conditions/add', { component: this.element, value: [this.options.value], operator: this.operator })
const param = {
component: this.element,
value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
operator: this.operator
}
this.inDraw && this.$store.dispatch('conditions/add', param)
}
}
}

View File

@ -157,16 +157,16 @@
</div>
</el-col>
<el-col :span="16"><div class="filter-options-right">
<el-checkbox v-model="customRange"><span> {{ $t('panel.custom_scope') }} </span> </el-checkbox>
<el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span> {{ $t('panel.custom_scope') }} </span> </el-checkbox>
<el-popover
v-model="popovervisible"
placement="bottom-end"
:disabled="!customRange"
:disabled="!componentInfo.options.attrs.enableRange"
width="200"
>
<div class="view-container-class">
<el-checkbox-group v-model="checkedViews" @change="checkedViewsChange">
<el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
<el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id">
<span>
<svg-icon :icon-class="item.type" class="chart-icon" />
@ -176,7 +176,7 @@
</el-checkbox-group>
</div>
<i slot="reference" :class="{'i-filter-active': customRange, 'i-filter-inactive': !customRange}" class="el-icon-setting i-filter" />
<i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
</el-popover>
<!-- <el-checkbox disabled>备选项</el-checkbox> -->
</div>
@ -257,10 +257,8 @@ export default {
selectField: [],
widget: null,
fieldValues: [],
customRange: false,
popovervisible: false,
viewInfos: [],
checkedViews: []
viewInfos: []
}
},
computed: {
@ -478,7 +476,14 @@ export default {
},
checkedViewsChange(values) {
this.componentInfo.options.attrs.viewIds = values
// this.componentInfo.options.attrs.viewIds = values
this.$emit('re-fresh-component', this.componentInfo)
},
enableRangeChange(value) {
if (!value) {
this.componentInfo.options.attrs.viewIds = []
}
// this.componentInfo.options.attrs.enableRange = value
this.$emit('re-fresh-component', this.componentInfo)
}
}