feat(视图): 增加字段一键清除按钮

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

@@ -440,10 +440,14 @@
                       v-if="view.type === 'table-pivot'"
                       class="padding-lr"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.table_pivot_row') }}</span>
                         /
                         <span>{{ $t('chart.dimension') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('xaxisExt')"
+                        />
                       </span>
                       <draggable
                         v-model="view.xaxisExt"
@@ -482,7 +486,7 @@
                       v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
                       class="padding-lr"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
                           $t('chart.drag_block_table_data_column')
                         }}</span>
@@ -511,6 +515,10 @@
                         <span
                           v-else-if="view.type && view.type === 'table-info'"
                         >{{ $t('chart.dimension_or_quota') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('xaxis')"
+                        />
                       </span>
                       <draggable
                         v-model="view.xaxis"
@@ -554,7 +562,7 @@
                         || (view.render === 'antv' && view.type === 'line')"
                       class="padding-lr"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>
                           {{ $t('chart.chart_group') }}
                           <span
@@ -578,6 +586,10 @@
                             style="cursor: pointer;color: #606266;"
                           />
                         </el-tooltip>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('xaxisExt')"
+                        />
                       </span>
                       <draggable
                         v-model="view.xaxisExt"
@@ -617,7 +629,7 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span v-if="view.type && view.type.includes('table')">{{
                           $t('chart.drag_block_table_data_column')
                         }}</span>
@@ -654,6 +666,10 @@
                         }}</span>
                         <span v-show="view.type !== 'richTextView'"> / </span>
                         <span>{{ $t('chart.quota') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('yaxis')"
+                        />
                       </span>
                       <draggable
                         v-model="view.yaxis"
@@ -696,10 +712,14 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
                         /
                         <span>{{ $t('chart.quota') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('yaxisExt')"
+                        />
                       </span>
                       <draggable
                         v-model="view.yaxisExt"
@@ -741,10 +761,14 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.stack_item') }}</span>
                         /
                         <span>{{ $t('chart.dimension') }}</span>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('extStack')"
+                        />
                       </span>
                       <draggable
                         v-model="view.extStack"
@@ -784,7 +808,7 @@
                       class="padding-lr"
                       style="margin-top: 6px;"
                     >
-                      <span style="width: 80px;text-align: right;">
+                      <span class="data-area-label">
                         <span>{{ $t('chart.bubble_size') }}</span>
                         /
                         <span>{{ $t('chart.quota') }}</span>
@@ -801,6 +825,10 @@
                             style="cursor: pointer;color: #606266;"
                           />
                         </el-tooltip>
+                        <i
+                          class="el-icon-arrow-down el-icon-delete data-area-clear"
+                          @click="clearData('extBubble')"
+                        />
                       </span>
                       <draggable
                         v-model="view.extBubble"
@@ -2554,7 +2582,7 @@ export default {
           })
           return
         }
-        if (parseFloat(f.value).toString() === 'NaN') {
+        if (isNaN(f.value)) {
           this.$message({
             message: this.$t('chart.filter_value_can_not_str'),
             type: 'error',
@@ -2611,7 +2639,7 @@ export default {
             return
           }
           if (this.filterItem.deType === 2 || this.filterItem.deType === 3) {
-            if (parseFloat(f.value).toString() === 'NaN') {
+            if (isNaN(f.value)) {
               this.$message({
                 message: this.$t('chart.filter_value_can_not_str'),
                 type: 'error',
@@ -3265,6 +3293,10 @@ export default {
         })
       }).catch(() => {
       })
+    },
+    clearData(data) {
+      this.view[data] = []
+      this.calcData(true)
     }
   }
 }
@@ -3713,4 +3745,19 @@ span {
   font-weight: 400 !important;
 }
 
+.data-area-label{
+  text-align: left;
+  position: relative;
+  width: 100%;
+  display: inline-block;
+}
+
+.data-area-clear{
+  position: absolute;
+  top: 4px;
+  right: 6px;
+  color: rgb(135, 141, 159);
+  cursor: pointer;
+  z-index: 1;
+}
 </style>