fix: 仪表板>过滤器 选择“字段枚举值”后,再次打开下拉框没有数据

This commit is contained in:
ulleo 2023-09-06 16:29:55 +08:00
parent 3ba69be557
commit f1124fad3f
5 changed files with 231 additions and 124 deletions

View File

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

View File

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

View File

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

View File

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

View File

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