提交 c607bb16 authored 作者: junjie's avatar junjie

feat(视图): 维度 指标 下拉item增加操作

上级 4c920bdc
...@@ -596,6 +596,7 @@ export default { ...@@ -596,6 +596,7 @@ export default {
summary: '汇总方式', summary: '汇总方式',
fast_calc: '快速计算', fast_calc: '快速计算',
sum: '求和', sum: '求和',
count: '计数',
avg: '平均', avg: '平均',
max: '最大值', max: '最大值',
min: '最小值', min: '最小值',
......
<template> <template>
<span> <span>
<el-dropdown trigger="click" size="mini"> <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"> <el-tag size="small" class="item-axis">
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" /> {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
</el-tag> </el-tag>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item icon="el-icon-edit-outline"> <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickItem('rename')">
item1 <span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-delete"> <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
item2 <span>{{ $t('chart.delete') }}</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</span> </span>
</el-dropdown> </el-dropdown>
<el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
<el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
<el-form-item :label="$t('commons.name')" prop="name">
<el-input v-model="itemForm.name" size="mini" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</span> </span>
</template> </template>
...@@ -25,14 +37,71 @@ export default { ...@@ -25,14 +37,71 @@ export default {
item: { item: {
type: Object, type: Object,
required: true required: true
},
index: {
type: Number,
required: true
} }
}, },
data() { data() {
return {} return {
renameItem: false,
itemForm: {
name: ''
},
itemFormRules: {
name: [
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
]
}
}
}, },
mounted() { mounted() {
}, },
methods: {} methods: {
clickItem(param) {
if (!param) {
return
}
switch (param.type) {
case 'rename':
this.showRename()
break
case 'remove':
this.removeItem()
break
default:
break
}
},
beforeClickItem(type) {
return {
type: type
}
},
showRename() {
this.itemForm.name = this.item.name
this.renameItem = true
},
closeRename() {
this.renameItem = false
this.resetRename()
},
saveRename(param) {
this.item.name = param.name
this.$emit('onDimensionItemChange', this.item)
this.closeRename()
},
resetRename() {
this.itemForm = {
name: ''
}
},
removeItem() {
this.item.index = this.index
this.$emit('onDimensionItemRemove', this.item)
}
}
} }
</script> </script>
......
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
</span> </span>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item> <el-dropdown-item :command="beforeSummary('sum')">{{ $t('chart.sum') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSummary('count')">{{ $t('chart.count') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item> <el-dropdown-item :command="beforeSummary('avg')">{{ $t('chart.avg') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item> <el-dropdown-item :command="beforeSummary('max')">{{ $t('chart.max') }}</el-dropdown-item>
<el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item> <el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
...@@ -34,6 +35,9 @@ ...@@ -34,6 +35,9 @@
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')"> <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
<span>{{ $t('chart.show_name_set') }}</span> <span>{{ $t('chart.show_name_set') }}</span>
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
<span>{{ $t('chart.delete') }}</span>
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</span> </span>
</el-dropdown> </el-dropdown>
...@@ -59,6 +63,10 @@ export default { ...@@ -59,6 +63,10 @@ export default {
item: { item: {
type: Object, type: Object,
required: true required: true
},
index: {
type: Number,
required: true
} }
}, },
data() { data() {
...@@ -104,6 +112,9 @@ export default { ...@@ -104,6 +112,9 @@ export default {
case 'rename': case 'rename':
this.showRename() this.showRename()
break break
case 'remove':
this.removeItem()
break
default: default:
break break
} }
...@@ -130,6 +141,10 @@ export default { ...@@ -130,6 +141,10 @@ export default {
this.itemForm = { this.itemForm = {
name: '' name: ''
} }
},
removeItem() {
this.item.index = this.index
this.$emit('onQuotaItemRemove', this.item)
} }
} }
} }
......
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
</div> </div>
</el-row> </el-row>
</div> </div>
<div style="height: 45%;overflow:auto;border-top: 1px solid #e6e6e6"> <div style="height: 40%;overflow:auto;border-top: 1px solid #e6e6e6">
<el-tabs type="card" :stretch="true" class="tab-header"> <el-tabs type="card" :stretch="true" class="tab-header">
<el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr"> <el-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" /> <color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<div style="height: 30%;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr"> <div style="height: 35%;overflow:auto;border-top: 1px solid #e6e6e6" class="padding-lr">
<span>{{ $t('chart.result_filter') }}</span> <span>{{ $t('chart.result_filter') }}</span>
<div>TODO</div> <div>TODO</div>
</div> </div>
...@@ -137,7 +137,7 @@ ...@@ -137,7 +137,7 @@
@end="end2" @end="end2"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<dimension-item v-for="(item) in view.xaxis" :key="item.id" :item="item" /> <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" />
</transition-group> </transition-group>
</draggable> </draggable>
</el-row> </el-row>
...@@ -152,7 +152,7 @@ ...@@ -152,7 +152,7 @@
@end="end2" @end="end2"
> >
<transition-group class="draggable-group"> <transition-group class="draggable-group">
<quota-item v-for="(item) in view.yaxis" :key="item.id" :item="item" @onQuotaItemChange="quotaItemChange" /> <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" />
</transition-group> </transition-group>
</draggable> </draggable>
</el-row> </el-row>
...@@ -406,6 +406,15 @@ export default { ...@@ -406,6 +406,15 @@ export default {
return true return true
}, },
dimensionItemChange(item) {
this.save()
},
dimensionItemRemove(item) {
this.view.xaxis.splice(item.index, 1)
this.save()
},
quotaItemChange(item) { quotaItemChange(item) {
// 更新item // 更新item
// this.view.yaxis.forEach(function(ele) { // this.view.yaxis.forEach(function(ele) {
...@@ -416,6 +425,11 @@ export default { ...@@ -416,6 +425,11 @@ export default {
this.save() this.save()
}, },
quotaItemRemove(item) {
this.view.yaxis.splice(item.index, 1)
this.save()
},
onColorChange(val) { onColorChange(val) {
this.view.customAttr.color = val this.view.customAttr.color = val
this.save() this.save()
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论