fix: 仪表板>过滤器 选择“字段枚举值”后,再次打开下拉框没有数据
This commit is contained in:
parent
3ba69be557
commit
f1124fad3f
@ -275,6 +275,11 @@ export default {
|
|||||||
this.logic = this.item.logic
|
this.logic = this.item.logic
|
||||||
this.filterType = this.item.filterType
|
this.filterType = this.item.filterType
|
||||||
this.enumCheckField = this.item.enumCheckField
|
this.enumCheckField = this.item.enumCheckField
|
||||||
|
|
||||||
|
// init enum option
|
||||||
|
if (this.item.filterType === 'enum' && this.needRequestEnum) {
|
||||||
|
this.initEnumOptions()
|
||||||
|
}
|
||||||
},
|
},
|
||||||
initEnumOptions() {
|
initEnumOptions() {
|
||||||
// 查找枚举值
|
// 查找枚举值
|
||||||
|
|||||||
@ -1,24 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<span style="position: relative;display: inline-block;">
|
<span style="position: relative;display: inline-block;">
|
||||||
<i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
|
<i
|
||||||
<el-dropdown trigger="click" size="mini" @command="clickItem">
|
class="el-icon-arrow-down el-icon-delete"
|
||||||
|
style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
|
||||||
|
@click="removeItem"
|
||||||
|
/>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
size="mini"
|
||||||
|
@command="clickItem"
|
||||||
|
>
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
<el-tag size="small" class="item-axis" :type="tagType">
|
<el-tag
|
||||||
|
size="small"
|
||||||
|
class="item-axis"
|
||||||
|
:type="tagType"
|
||||||
|
>
|
||||||
<span style="float: left">
|
<span style="float: left">
|
||||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
<svg-icon
|
||||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
v-if="item.deType === 0"
|
||||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
icon-class="field_text"
|
||||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
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.deType === 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>
|
||||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
<span
|
||||||
<field-error-tips v-if="tagType === 'danger'" />
|
class="item-span-style"
|
||||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
:title="item.name"
|
||||||
|
>{{ item.name }}</span>
|
||||||
|
<field-error-tips v-if="tagType === 'danger'"/>
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-down el-icon--right"
|
||||||
|
style="position: absolute;top: 6px;right: 10px;"
|
||||||
|
/>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
|
<el-dropdown-item
|
||||||
|
icon="el-icon-files"
|
||||||
|
:command="beforeClickItem('filter')"
|
||||||
|
>
|
||||||
<span>{{ $t('chart.filter') }}...</span>
|
<span>{{ $t('chart.filter') }}...</span>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
|
<el-dropdown-item
|
||||||
|
icon="el-icon-delete"
|
||||||
|
divided
|
||||||
|
:command="beforeClickItem('remove')"
|
||||||
|
>
|
||||||
<span>{{ $t('chart.delete') }}</span>
|
<span>{{ $t('chart.delete') }}</span>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
@ -28,11 +69,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getItemType } from './utils'
|
import {getItemType} from './utils'
|
||||||
import FieldErrorTips from './FieldErrorTips'
|
import FieldErrorTips from './FieldErrorTips'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'FilterItem',
|
name: 'FilterItem',
|
||||||
components: { FieldErrorTips },
|
components: {FieldErrorTips},
|
||||||
props: {
|
props: {
|
||||||
param: {
|
param: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@ -53,7 +95,12 @@ export default {
|
|||||||
quotaData: {
|
quotaData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true
|
required: true
|
||||||
}
|
},
|
||||||
|
bus: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -61,17 +108,21 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dimensionData: function() {
|
dimensionData: function () {
|
||||||
this.getItemTagType()
|
this.getItemTagType()
|
||||||
},
|
},
|
||||||
quotaData: function() {
|
quotaData: function () {
|
||||||
this.getItemTagType()
|
this.getItemTagType()
|
||||||
},
|
},
|
||||||
item: function() {
|
item: function () {
|
||||||
this.getItemTagType()
|
this.getItemTagType()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.bus.$on('reset-change-table', this.getItemTagType)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.bus.$off('reset-change-table', this.getItemTagType)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickItem(param) {
|
clickItem(param) {
|
||||||
@ -110,7 +161,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.item-axis {
|
.item-axis {
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
margin: 0 3px 2px 3px;
|
margin: 0 3px 2px 3px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -121,34 +172,34 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 159px;
|
width: 159px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-axis:hover {
|
.item-axis:hover {
|
||||||
background-color: #fdfdfd;
|
background-color: #fdfdfd;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-span{
|
.summary-span {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
color: #878d9f;;
|
color: #878d9f;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-dropdown-menu{
|
.inner-dropdown-menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-span-style{
|
.item-span-style {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 115px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -84,7 +84,7 @@
|
|||||||
@add="addCustomFilter" @update="calcData(true)">
|
@add="addCustomFilter" @update="calcData(true)">
|
||||||
<transition-group class="draggable-group">
|
<transition-group class="draggable-group">
|
||||||
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
||||||
:item="item" :dimension-data="dimension" :quota-data="quota"
|
:item="item" :dimension-data="dimension" :quota-data="quota" :bus="bus"
|
||||||
@onFilterItemRemove="filterItemRemove"
|
@onFilterItemRemove="filterItemRemove"
|
||||||
@editItemFilter="showEditFilter"/>
|
@editItemFilter="showEditFilter"/>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
|||||||
@ -1,24 +1,65 @@
|
|||||||
<template>
|
<template>
|
||||||
<span style="position: relative;display: inline-block;">
|
<span style="position: relative;display: inline-block;">
|
||||||
<i class="el-icon-arrow-down el-icon-delete" style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;" @click="removeItem" />
|
<i
|
||||||
<el-dropdown trigger="click" size="mini" @command="clickItem">
|
class="el-icon-arrow-down el-icon-delete"
|
||||||
|
style="position: absolute;top: 6px;right: 24px;color: #878d9f;cursor: pointer;z-index: 1;"
|
||||||
|
@click="removeItem"
|
||||||
|
/>
|
||||||
|
<el-dropdown
|
||||||
|
trigger="click"
|
||||||
|
size="mini"
|
||||||
|
@command="clickItem"
|
||||||
|
>
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link">
|
||||||
<el-tag size="small" class="item-axis" :type="tagType">
|
<el-tag
|
||||||
|
size="small"
|
||||||
|
class="item-axis"
|
||||||
|
:type="tagType"
|
||||||
|
>
|
||||||
<span style="float: left">
|
<span style="float: left">
|
||||||
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
|
<svg-icon
|
||||||
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
|
v-if="item.deType === 0"
|
||||||
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
|
icon-class="field_text"
|
||||||
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
|
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.deType === 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>
|
||||||
<span class="item-span-style" :title="item.name">{{ item.name }}</span>
|
<span
|
||||||
<field-error-tips v-if="tagType === 'danger'" />
|
class="item-span-style"
|
||||||
<i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
|
:title="item.name"
|
||||||
|
>{{ item.name }}</span>
|
||||||
|
<field-error-tips v-if="tagType === 'danger'"/>
|
||||||
|
<i
|
||||||
|
class="el-icon-arrow-down el-icon--right"
|
||||||
|
style="position: absolute;top: 6px;right: 10px;"
|
||||||
|
/>
|
||||||
</el-tag>
|
</el-tag>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
|
<el-dropdown-item
|
||||||
|
icon="el-icon-files"
|
||||||
|
:command="beforeClickItem('filter')"
|
||||||
|
>
|
||||||
<span>{{ $t('chart.filter') }}...</span>
|
<span>{{ $t('chart.filter') }}...</span>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
|
<el-dropdown-item
|
||||||
|
icon="el-icon-delete"
|
||||||
|
divided
|
||||||
|
:command="beforeClickItem('remove')"
|
||||||
|
>
|
||||||
<span>{{ $t('chart.delete') }}</span>
|
<span>{{ $t('chart.delete') }}</span>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
@ -28,11 +69,12 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getItemType } from './utils'
|
import {getItemType} from './utils'
|
||||||
import FieldErrorTips from './FieldErrorTips'
|
import FieldErrorTips from './FieldErrorTips'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'FilterItem',
|
name: 'FilterItem',
|
||||||
components: { FieldErrorTips },
|
components: {FieldErrorTips},
|
||||||
props: {
|
props: {
|
||||||
param: {
|
param: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@ -53,7 +95,12 @@ export default {
|
|||||||
quotaData: {
|
quotaData: {
|
||||||
type: Array,
|
type: Array,
|
||||||
required: true
|
required: true
|
||||||
}
|
},
|
||||||
|
bus: {
|
||||||
|
type: Object,
|
||||||
|
required: false,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -61,17 +108,21 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
dimensionData: function() {
|
dimensionData: function () {
|
||||||
this.getItemTagType()
|
this.getItemTagType()
|
||||||
},
|
},
|
||||||
quotaData: function() {
|
quotaData: function () {
|
||||||
this.getItemTagType()
|
this.getItemTagType()
|
||||||
},
|
},
|
||||||
item: function() {
|
item: function () {
|
||||||
this.getItemTagType()
|
this.getItemTagType()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
this.bus.$on('reset-change-table', this.getItemTagType)
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.bus.$off('reset-change-table', this.getItemTagType)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clickItem(param) {
|
clickItem(param) {
|
||||||
@ -110,7 +161,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.item-axis {
|
.item-axis {
|
||||||
padding: 1px 6px;
|
padding: 1px 6px;
|
||||||
margin: 0 3px 2px 3px;
|
margin: 0 3px 2px 3px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -121,34 +172,34 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 159px;
|
width: 159px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-axis:hover {
|
.item-axis:hover {
|
||||||
background-color: #fdfdfd;
|
background-color: #fdfdfd;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.summary-span{
|
.summary-span {
|
||||||
margin-left: 4px;
|
margin-left: 4px;
|
||||||
color: #878d9f;;
|
color: #878d9f;;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inner-dropdown-menu{
|
.inner-dropdown-menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-span-style{
|
.item-span-style {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100px;
|
width: 115px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -97,7 +97,7 @@
|
|||||||
@add="addCustomFilter" @update="calcData(true)">
|
@add="addCustomFilter" @update="calcData(true)">
|
||||||
<transition-group class="draggable-group">
|
<transition-group class="draggable-group">
|
||||||
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
<filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index"
|
||||||
:item="item" :dimension-data="dimension" :quota-data="quota"
|
:item="item" :dimension-data="dimension" :quota-data="quota" :bus="bus"
|
||||||
@onFilterItemRemove="filterItemRemove"
|
@onFilterItemRemove="filterItemRemove"
|
||||||
@editItemFilter="showEditFilter"/>
|
@editItemFilter="showEditFilter"/>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user