center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor: 视图拖拽块增加placeholder

Browse Source
This commit is contained in:
junjie 2021-07-23 17:02:50 +08:00
parent 333a7a5640
commit 99b2ac0c7a
4 changed files with 23 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lang/en.js
View File

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

2
frontend/src/lang/tw.js
View File

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

2
frontend/src/lang/zh.js
View File

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

47
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -253,13 +253,13 @@
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>
</draggable>
<div v-if="!view.xaxis || view.xaxis.length === 0" class="drag-placeholder-style">
<span>{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
@ -283,13 +283,13 @@
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>
</draggable>
<div v-if="!view.yaxis || view.yaxis.length === 0" class="drag-placeholder-style">
<span>{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<el-row v-if="view.type && view.type.includes('stack')" class="padding-lr" style="margin-top: 6px;">
<span style="width: 80px;text-align: right;">
@ -306,15 +306,15 @@
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>
</draggable>
<div v-if="!view.extStack || view.extStack.length === 0" class="drag-placeholder-style">
<span>{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
<div class="padding-lr filter-class" style="margin-top: 6px;">
<el-row class="padding-lr" style="margin-top: 6px;">
<span>{{ $t('chart.result_filter') }}</span>
<!-- <el-button :disabled="!hasDataPermission('manage',param.privileges)" size="mini" class="filter-btn-class" @click="showResultFilter">-->
<!-- {{ $t('chart.filter_condition') }}<i class="el-icon-setting el-icon&#45;&#45;right" />-->
@ -328,14 +328,14 @@
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>
</draggable>
</div>
<div v-if="!view.customFilter || view.customFilter.length === 0" class="drag-placeholder-style">
<span>{{ $t('chart.placeholder_field') }}</span>
</div>
</el-row>
</el-row>
</div>
</el-col>
@ -1531,14 +1531,6 @@ export default {
pointer-events:none;
}
.filter-class{
height: calc(35% - 102px);
}
.filter-class>>>.filter-inner-class{
height: calc(100% - 40px);
}
.chart-class{
height: 100%;
padding: 10px;
@ -1604,11 +1596,12 @@ export default {
align-items: center;
background-color: white;
}
.drag_placeholder-style{
font-size: 12px;
color: #CCCCCC;
padding: 0 0 2px 10px;
display: inline-block;
.drag-placeholder-style{
position: absolute;
top: calc(50% - 2px);
left: 0;
width: 100%;
color: #CCCCCC;
text-align: center;
}
</style>