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

frontend/src/lang/zh.js

@@ -596,6 +596,7 @@ export default {
     summary: '汇总方式',
     fast_calc: '快速计算',
     sum: '求和',
+    count: '计数',
     avg: '平均',
     max: '最大值',
     min: '最小值',

frontend/src/views/chart/components/DimensionItem.vue

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

frontend/src/views/chart/components/QuotaItem.vue

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

frontend/src/views/chart/view/ChartEdit.vue

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