forked from github/dataease
feat(视图): 维度 指标 下拉item增加操作
This commit is contained in:
junjie
parent
4c920bdcd2
commit
c607bb16ad
@ -596,6 +596,7 @@ export default {
|
||||
summary: '汇总方式',
|
||||
fast_calc: '快速计算',
|
||||
sum: '求和',
|
||||
count: '计数',
|
||||
avg: '平均',
|
||||
max: '最大值',
|
||||
min: '最小值',
|
||||
|
||||
@ -1,20 +1,32 @@
|
||||
<template>
|
||||
<span>
|
||||
<el-dropdown trigger="click" size="mini">
|
||||
<el-dropdown trigger="click" size="mini" @command="clickItem">
|
||||
<span class="el-dropdown-link">
|
||||
<el-tag size="small" class="item-axis">
|
||||
{{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
|
||||
</el-tag>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit-outline">
|
||||
item1
|
||||
<el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickItem('rename')">
|
||||
<span>{{ $t('chart.show_name_set') }}</span>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item icon="el-icon-delete">
|
||||
item2
|
||||
<el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
|
||||
<span>{{ $t('chart.delete') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</span>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@ -25,14 +37,71 @@ export default {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
renameItem: false,
|
||||
itemForm: {
|
||||
name: ''
|
||||
},
|
||||
itemFormRules: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('commons.input_content'), trigger: 'change' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<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('max')">{{ $t('chart.max') }}</el-dropdown-item>
|
||||
<el-dropdown-item :command="beforeSummary('min')">{{ $t('chart.min') }}</el-dropdown-item>
|
||||
@ -34,6 +35,9 @@
|
||||
<el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
|
||||
<span>{{ $t('chart.show_name_set') }}</span>
|
||||
</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>
|
||||
</span>
|
||||
</el-dropdown>
|
||||
@ -59,6 +63,10 @@ export default {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -104,6 +112,9 @@ export default {
|
||||
case 'rename':
|
||||
this.showRename()
|
||||
break
|
||||
case 'remove':
|
||||
this.removeItem()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
@ -130,6 +141,10 @@ export default {
|
||||
this.itemForm = {
|
||||
name: ''
|
||||
}
|
||||
},
|
||||
removeItem() {
|
||||
this.item.index = this.index
|
||||
this.$emit('onQuotaItemRemove', this.item)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -101,7 +101,7 @@
|
||||
</div>
|
||||
</el-row>
|
||||
</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-tab-pane :label="$t('chart.shape_attr')" class="padding-lr">
|
||||
<color-selector class="attr-selector" :chart="chart" @onColorChange="onColorChange" />
|
||||
@ -117,7 +117,7 @@
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</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>
|
||||
<div>TODO</div>
|
||||
</div>
|
||||
@ -137,7 +137,7 @@
|
||||
@end="end2"
|
||||
>
|
||||
<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>
|
||||
</draggable>
|
||||
</el-row>
|
||||
@ -152,7 +152,7 @@
|
||||
@end="end2"
|
||||
>
|
||||
<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>
|
||||
</draggable>
|
||||
</el-row>
|
||||
@ -406,6 +406,15 @@ export default {
|
||||
return true
|
||||
},
|
||||
|
||||
dimensionItemChange(item) {
|
||||
this.save()
|
||||
},
|
||||
|
||||
dimensionItemRemove(item) {
|
||||
this.view.xaxis.splice(item.index, 1)
|
||||
this.save()
|
||||
},
|
||||
|
||||
quotaItemChange(item) {
|
||||
// 更新item
|
||||
// this.view.yaxis.forEach(function(ele) {
|
||||
@ -416,6 +425,11 @@ export default {
|
||||
this.save()
|
||||
},
|
||||
|
||||
quotaItemRemove(item) {
|
||||
this.view.yaxis.splice(item.index, 1)
|
||||
this.save()
|
||||
},
|
||||
|
||||
onColorChange(val) {
|
||||
this.view.customAttr.color = val
|
||||
this.save()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user