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

refactor(数据集): 计算字段UI调整

Browse Source
This commit is contained in:
junjun 2022-09-28 14:39:00 +08:00
parent 75f0617402
commit 5a4b2aea1f
5 changed files with 62 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1656,7 +1656,11 @@ export default {
sql_ds_union_error: 'Direct connect SQL dataset can not be union',
api_data: 'API dataset',
copy: 'Copy',
sync_log: 'Sync log'
sync_log: 'Sync log',
field_edit_name: 'Field Name',
input_edit_name: 'Input field name',
edit_search: 'Search by name',
na: 'None'
},
driver: {
driver: 'Driver',

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

@ -1656,7 +1656,11 @@ export default {
sql_ds_union_error: '直連模式下SQL數據集，不支持關聯',
api_data: 'API 數據集',
copy: '復製',
sync_log: '同步日誌'
sync_log: '同步日誌',
field_edit_name: '字段名稱',
input_edit_name: '請輸入字段名稱',
edit_search: '通過名稱搜索',
na: '暫無'
},
driver: {
driver: '驅動',

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

@ -1655,7 +1655,11 @@ export default {
sql_ds_union_error: '直连模式下SQL数据集，不支持关联',
api_data: 'API 数据集',
copy: '复制',
sync_log: '同步日志'
sync_log: '同步日志',
field_edit_name: '字段名称',
input_edit_name: '请输入字段名称',
edit_search: '通过名称搜索',
na: '暂无'
},
driver: {
driver: '驱动',

19
frontend/src/views/chart/view/CalcChartFieldEdit.vue
View File

@ -2,8 +2,8 @@
<el-row>
<el-form ref="form" :model="fieldForm" size="mini" class="row-style">
<el-form-item>
<span style="width: 80px;font-size: 12px">{{ $t('dataset.field_name') }}</span>
<el-input v-model="fieldForm.name" style="width: 80%;" size="mini" :placeholder="$t('dataset.input_name')" />
<span style="width: 80px;font-size: 12px">{{ $t('dataset.field_edit_name') }}</span>
<el-input v-model="fieldForm.name" style="width: 80%;" size="mini" :placeholder="$t('dataset.input_edit_name')" />
</el-form-item>
</el-form>
@ -94,13 +94,14 @@
<el-input
v-model="searchField"
size="mini"
:placeholder="$t('dataset.search')"
:placeholder="$t('dataset.edit_search')"
prefix-icon="el-icon-search"
clearable
/>
<div class="field-height">
<span>{{ $t('chart.dimension') }}</span>
<draggable
v-if="dimensionData && dimensionData.length > 0"
v-model="dimensionData"
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300"
@ -127,10 +128,12 @@
</span>
</transition-group>
</draggable>
<div v-else class="class-na">{{ $t('dataset.na') }}</div>
</div>
<div class="field-height">
<span>{{ $t('chart.quota') }}</span>
<draggable
v-if="quotaData && quotaData.length > 0"
v-model="quotaData"
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300"
@ -157,6 +160,7 @@
</span>
</transition-group>
</draggable>
<div v-else class="class-na">{{ $t('dataset.na') }}</div>
</div>
</el-col>
<el-col :span="12" style="height: 100%" class="padding-lr">
@ -176,7 +180,7 @@
<el-input
v-model="searchFunction"
size="mini"
:placeholder="$t('dataset.search')"
:placeholder="$t('dataset.edit_search')"
prefix-icon="el-icon-search"
clearable
/>
@ -670,4 +674,11 @@ span {
float: right;
margin-top: 10px;
}
.class-na {
margin-top: 8px;
text-align: center;
font-size: 14px;
color: var(--deTextDisable);
}
</style>

54
frontend/src/views/dataset/data/CalcFieldEdit.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="calcu-feild">
<el-form ref="form" :model="fieldForm" class="de-form-item">
<el-form-item :label="$t('dataset.field_name')">
<el-form-item :label="$t('dataset.field_edit_name')">
<el-input
v-model="fieldForm.name"
size="small"
:placeholder="$t('dataset.input_name')"
:placeholder="$t('dataset.input_edit_name')"
/>
</el-form-item>
</el-form>
@ -19,7 +19,7 @@
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
表达式语法请遵循该数据源对应的数据库语法。
<br />
<br>
数据集中不支持聚合运算。
</div>
<i class="el-icon-info" style="cursor: pointer" />
@ -51,8 +51,7 @@
:key="item.value"
v-model="fieldForm.deType"
:label="item.value"
>{{ item.label }}</el-radio
>
>{{ item.label }}</el-radio>
</el-form-item>
</el-form>
</el-row>
@ -64,9 +63,9 @@
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
引用字段以 "[" 开始， "]" 结束
<br />
<br>
请勿修改引用内容，否则将引用失败
<br />
<br>
若输入与引用字段相同格式的内容，将被当作引用字段处理
</div>
<i class="el-icon-info" style="cursor: pointer" />
@ -75,7 +74,7 @@
<el-input
v-model="searchField"
size="small"
:placeholder="$t('dataset.search')"
:placeholder="$t('dataset.edit_search')"
prefix-icon="el-icon-search"
style="margin-bottom: 12px"
clearable
@ -83,6 +82,7 @@
<div class="field-height">
<span>{{ $t('chart.dimension') }}</span>
<draggable
v-if="dimensionData && dimensionData.length > 0"
v-model="dimensionData"
:options="{ group: { name: 'drag', pull: 'clone' }, sort: true }"
animation="300"
@ -121,10 +121,12 @@
</span>
</transition-group>
</draggable>
<div v-else class="class-na">{{ $t('dataset.na') }}</div>
</div>
<div class="field-height">
<span>{{ $t('chart.quota') }}</span>
<draggable
v-if="quotaData && quotaData.length > 0"
v-model="quotaData"
:options="{ group: { name: 'drag', pull: 'clone' }, sort: true }"
animation="300"
@ -163,6 +165,7 @@
</span>
</transition-group>
</draggable>
<div v-else class="class-na">{{ $t('dataset.na') }}</div>
</div>
</div>
<div class="padding-lr">
@ -171,9 +174,9 @@
<el-tooltip class="item" effect="dark" placement="bottom">
<div slot="content">
使用数据集对应数据库类型所支持的函数，语法同对应数据库
<br />
<br>
如日期格式化：MySQL使用DATE_FORMAT(date,format)；Oracle使用TO_DATE(X,[,fmt])
<br />
<br>
非直连模式数据集，使用Doris数据库函数，可参考Doris官网
https://doris.apache.org/zh-CN/
</div>
@ -184,7 +187,7 @@
v-model="searchFunction"
size="small"
style="margin-bottom: 12px"
:placeholder="$t('dataset.search')"
:placeholder="$t('dataset.edit_search')"
prefix-icon="el-icon-search"
clearable
/>
@ -205,8 +208,7 @@
slot="reference"
class="function-style"
@click="insertParamToCodeMirror(item.func)"
>{{ item.func }}</span
>
>{{ item.func }}</span>
</el-popover>
</el-row>
</div>
@ -221,8 +223,7 @@
:loading="loading"
type="primary"
@click="saveCalcField"
>{{ $t('dataset.confirm') }}</deBtn
>
>{{ $t('dataset.confirm') }}</deBtn>
</div>
</div>
</template>
@ -326,16 +327,16 @@ export default {
}
},
watch: {
param: function () {
param: function() {
this.initFunctions()
},
field: {
handler: function () {
handler: function() {
this.initField()
},
deep: true
},
tableFields: function () {
tableFields: function() {
this.dimensionData = JSON.parse(
JSON.stringify(this.tableFields.dimensionList)
).filter((ele) => ele.extField === 0)
@ -343,7 +344,7 @@ export default {
JSON.stringify(this.tableFields.quotaList)
).filter((ele) => ele.extField === 0)
},
searchField: function (val) {
searchField: function(val) {
if (val && val !== '') {
this.dimensionData = JSON.parse(
JSON.stringify(
@ -374,7 +375,7 @@ export default {
).filter((ele) => ele.extField === 0)
}
},
searchFunction: function (val) {
searchFunction: function(val) {
if (val && val !== '') {
this.functionData = JSON.parse(
JSON.stringify(
@ -563,10 +564,10 @@ export default {
box-sizing: border-box;
margin-left: 12px;
width: 214px;
overflow-y: auto;
overflow-y: hidden;
}
.field-height {
height: calc(50% - 25px);
height: calc(50% - 41px);
margin-top: 4px;
}
.drag-list {
@ -673,7 +674,7 @@ export default {
background: var(--ContentBG);
}
.function-height {
height: calc(100% - 50px);
height: calc(100% - 21px - 32px - 4px - 24px);
overflow: auto;
margin-top: 4px;
}
@ -689,6 +690,13 @@ export default {
margin: 6px 0 0 0;
font-size: 10px;
}
.class-na {
margin-top: 8px;
text-align: center;
font-size: 14px;
color: var(--deTextDisable);
}
</style>
<style lang="scss">