Merge pull request #314 from dataease/pr@dev@refactor_视图拖拽块增加placeholder

refactor: 视图拖拽块增加placeholder

frontend/src/lang/en.js

@@ -822,7 +822,8 @@ export default {
     stack_item: 'Stack Item',
     map_range: 'Map range',
     select_map_range: 'Please select map range',
-    area: 'Area'
+    area: 'Area',
+    placeholder_field: 'Drag Field'
   },
   dataset: {
     sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',

frontend/src/lang/tw.js

@@ -822,7 +822,8 @@ export default {
     map_range: '地圖範圍',
     select_map_range: '請選擇地圖範圍',
     area: '地區',
-    stack_item: '堆疊項'
+    stack_item: '堆疊項',
+    placeholder_field: '拖入字段'
   },
   dataset: {
     sheet_warn: '有多個sheet頁面，默認抽取第一個',

frontend/src/lang/zh.js

@@ -822,7 +822,8 @@ export default {
     map_range: '地图范围',
     select_map_range: '请选择地图范围',
     area: '地区',
-    stack_item: '堆叠项'
+    stack_item: '堆叠项',
+    placeholder_field: '拖入字段'
   },
   dataset: {
     sheet_warn: '有多个 Sheet 页，默认抽取第一个',

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

@@ -253,6 +253,9 @@
                       class="drag-block-style"
                       @add="addXaxis"
                     >
+                      <span v-show="!view.xaxis || view.xaxis.length === 0" class="drag_placeholder-style">
+                        {{ $t('chart.placeholder_field') }}
+                      </span>
                       <transition-group class="draggable-group">
                         <dimension-item v-for="(item,index) in view.xaxis" :key="item.id" :param="param" :index="index" :item="item" @onDimensionItemChange="dimensionItemChange" @onDimensionItemRemove="dimensionItemRemove" @editItemFilter="showDimensionEditFilter" @onNameEdit="showRename" />
                       </transition-group>
@@ -280,6 +283,9 @@
                       class="drag-block-style"
                       @add="addYaxis"
                     >
+                      <span v-show="!view.yaxis || view.yaxis.length === 0" class="drag_placeholder-style">
+                        {{ $t('chart.placeholder_field') }}
+                      </span>
                       <transition-group class="draggable-group">
                         <quota-item v-for="(item,index) in view.yaxis" :key="item.id" :param="param" :index="index" :item="item" @onQuotaItemChange="quotaItemChange" @onQuotaItemRemove="quotaItemRemove" @editItemFilter="showQuotaEditFilter" @onNameEdit="showRename" />
                       </transition-group>
@@ -300,6 +306,9 @@
                       class="drag-block-style"
                       @add="addStack"
                     >
+                      <span v-show="!view.extStack || view.extStack.length === 0" class="drag_placeholder-style">
+                        {{ $t('chart.placeholder_field') }}
+                      </span>
                       <transition-group class="draggable-group">
                         <chart-drag-item v-for="(item,index) in view.extStack" :key="item.id" :param="param" :index="index" :item="item" @onItemChange="stackItemChange" @onItemRemove="stackItemRemove" />
                       </transition-group>
@@ -319,6 +328,9 @@
                       style="padding:2px 0 0 0;width:100%;min-height: 32px;border-radius: 4px;border: 1px solid #DCDFE6;overflow-x: auto;display: flex;align-items: center;background-color: white;"
                       @add="addCustomFilter"
                     >
+                      <span v-show="!view.customFilter || view.customFilter.length === 0" class="drag_placeholder-style">
+                        {{ $t('chart.placeholder_field') }}
+                      </span>
                       <transition-group class="draggable-group">
                         <filter-item v-for="(item,index) in view.customFilter" :key="item.id" :param="param" :index="index" :item="item" @onFilterItemRemove="filterItemRemove" @editItemFilter="showEditFilter" />
                       </transition-group>
@@ -1592,4 +1604,11 @@ export default {
     align-items: center;
     background-color: white;
   }
+  .drag_placeholder-style{
+    font-size: 12px;
+    color: #CCCCCC;
+    padding: 0 0 2px 10px;
+    display: inline-block;
+    width: 100%;
+  }
 </style>