From cdf50243c995c97a121c674633dc9a4074ee8b04 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Tue, 16 Mar 2021 13:32:35 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E8=A7=86=E5=9B=BE=20?=
 =?UTF-8?q?=E6=8C=87=E6=A0=87=E4=B8=8B=E6=8B=89=E8=8F=9C=E5=8D=95=E6=89=A9?=
 =?UTF-8?q?=E5=B1=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/lang/zh.js                       |  4 +-
 .../src/views/chart/components/QuotaItem.vue  | 85 +++++++++++++++++--
 frontend/src/views/chart/group/Group.vue      |  1 +
 frontend/src/views/chart/view/ChartEdit.vue   | 14 +--
 4 files changed, 91 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index ee5fc92263..13cfc66257 100644
--- a/frontend/src/lang/zh.js
+++ b/frontend/src/lang/zh.js
@@ -600,7 +600,9 @@ export default {
     max: '最大值',
     min: '最小值',
     std: '标准差',
-    var_samp: '方差'
+    var_samp: '方差',
+    quick_calc: '快速计算',
+    show_name_set: '显示名设置'
   },
   dataset: {
     datalist: '数据集',
diff --git a/frontend/src/views/chart/components/QuotaItem.vue b/frontend/src/views/chart/components/QuotaItem.vue
index c616da6676..0ee7658c4c 100644
--- a/frontend/src/views/chart/components/QuotaItem.vue
+++ b/frontend/src/views/chart/components/QuotaItem.vue
@@ -1,6 +1,6 @@
 <template>
   <span>
-    <el-dropdown trigger="click" size="small">
+    <el-dropdown trigger="click" size="small" @command="clickItem">
       <span class="el-dropdown-link">
         <el-tag size="small" class="item-axis">
           {{ item.name }}<span v-if="item.summary" class="summary-span">{{ $t('chart.'+item.summary) }}</span><i class="el-icon-arrow-down el-icon--right" />
@@ -21,12 +21,34 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-delete">
-            item4
+          <el-dropdown-item icon="el-icon-s-grid">
+            <el-dropdown placement="right-start" size="small" @command="quickCalc">
+              <span class="el-dropdown-link">
+                {{ $t('chart.quick_calc') }}<span class="summary-span">(test)</span><i class="el-icon-arrow-right el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item :command="beforeQuickCalc('none')">test</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-dropdown-item>
+          <el-dropdown-item icon="el-icon-edit-outline" divided :command="beforeClickItem('rename')">
+            <span>{{ $t('chart.show_name_set') }}</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" />
+        </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>
 
@@ -40,7 +62,17 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      renameItem: false,
+      itemForm: {
+        name: ''
+      },
+      itemFormRules: {
+        name: [
+          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
+        ]
+      }
+    }
   },
   mounted() {
 
@@ -49,12 +81,55 @@ export default {
     summary(param) {
       // console.log(param)
       this.item.summary = param.type
-      this.$emit('onQuotaSummaryChange', this.item)
+      this.$emit('onQuotaItemChange', this.item)
     },
     beforeSummary(type) {
       return {
         type: type
       }
+    },
+    quickCalc(param) {
+
+    },
+    beforeQuickCalc(type) {
+      return {
+        type: type
+      }
+    },
+    clickItem(param) {
+      if (!param) {
+        return
+      }
+      switch (param.type) {
+        case 'rename':
+          this.showRename()
+          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('onQuotaItemChange', this.item)
+      this.closeRename()
+    },
+    resetRename() {
+      this.itemForm = {
+        name: ''
+      }
     }
   }
 }
diff --git a/frontend/src/views/chart/group/Group.vue b/frontend/src/views/chart/group/Group.vue
index 64d42e578a..35a2a951e1 100644
--- a/frontend/src/views/chart/group/Group.vue
+++ b/frontend/src/views/chart/group/Group.vue
@@ -487,6 +487,7 @@ export default {
     sceneClick(data, node) {
       this.$store.dispatch('chart/setViewId', null)
       this.$store.dispatch('chart/setViewId', data.id)
+      this.$store.dispatch('chart/setTableId', null)
       this.$store.dispatch('chart/setTableId', data.tableId)
       // this.$router.push('/chart/chart-edit')
       this.$emit('switchComponent', { name: 'ChartEdit' })
diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue
index f00fb81691..519802869b 100644
--- a/frontend/src/views/chart/view/ChartEdit.vue
+++ b/frontend/src/views/chart/view/ChartEdit.vue
@@ -125,7 +125,7 @@
                 @end="end2"
               >
                 <transition-group class="draggable-group">
-                  <quota-item v-for="(item) in view.yaxis" :key="item.id" :item="item" @onQuotaSummaryChange="quotaSummaryChange" />
+                  <quota-item v-for="(item) in view.yaxis" :key="item.id" :item="item" @onQuotaItemChange="quotaItemChange" />
                 </transition-group>
               </draggable>
             </el-row>
@@ -357,13 +357,13 @@ export default {
       return true
     },
 
-    quotaSummaryChange(item) {
+    quotaItemChange(item) {
       // 更新item
-      this.view.yaxis.forEach(function(ele) {
-        if (ele.id === item.id) {
-          ele.summary = item.summary
-        }
-      })
+      // this.view.yaxis.forEach(function(ele) {
+      //   if (ele.id === item.id) {
+      //     ele.summary = item.summary
+      //   }
+      // })
       this.save()
     }
   }