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

refactor: 数据集字段将维度指标分类展示，后续维度和指标具有不同的操作，为配置钻取目录、字段计算做前置准备

Browse Source
This commit is contained in:
junjie 2021-07-26 16:08:14 +08:00
parent 43f038ab65
commit 67f5160312
5 changed files with 238 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
View File

@ -7,7 +7,9 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* @Author gin
@ -29,6 +31,21 @@ public class DataSetTableFieldController {
return dataSetTableFieldsService.list(datasetTableField);
}
@PostMapping("listByDQ/{tableId}")
public Map<String, List<DatasetTableField>> listByDQ(@PathVariable String tableId) {
DatasetTableField datasetTableField = DatasetTableField.builder().build();
datasetTableField.setTableId(tableId);
datasetTableField.setGroupType("d");
List<DatasetTableField> dimensionList = dataSetTableFieldsService.list(datasetTableField);
datasetTableField.setGroupType("q");
List<DatasetTableField> quotaList = dataSetTableFieldsService.list(datasetTableField);
Map<String, List<DatasetTableField>> map = new HashMap<>();
map.put("dimensionList", dimensionList);
map.put("quotaList", quotaList);
return map;
}
@PostMapping("batchEdit")
public void batchEdit(@RequestBody List<DatasetTableField> list) {
dataSetTableFieldsService.batchEdit(list);

4
backend/src/main/java/io/dataease/service/dataset/DataSetTableFieldsService.java
View File

@ -11,6 +11,7 @@ import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.UUID;
/**
@ -47,6 +48,9 @@ public class DataSetTableFieldsService {
if (ObjectUtils.isNotEmpty(datasetTableField.getChecked())) {
criteria.andCheckedEqualTo(datasetTableField.getChecked());
}
if (ObjectUtils.isNotEmpty(datasetTableField.getGroupType())) {
criteria.andGroupTypeEqualTo(datasetTableField.getGroupType());
}
datasetTableFieldExample.setOrderByClause("column_index asc");
return datasetTableFieldMapper.selectByExample(datasetTableFieldExample);
}

8
frontend/src/api/dataset/dataset.js
View File

@ -94,6 +94,14 @@ export function fieldList(id, showLoading = true) {
})
}
export function fieldListDQ(id, showLoading = true) {
return request({
url: '/dataset/field/listByDQ/' + id,
loading: showLoading,
method: 'post'
})
}
export function batchEdit(data) {
return request({
url: '/dataset/field/batchEdit',

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

@ -1574,11 +1574,6 @@ export default {
padding: 0;
height: 100%;
}
.collapse-style>>>.el-collapse-item__header{
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
}
.tree-select-span {
>>>div.vue-treeselect__control {
height: 32px !important;

304
frontend/src/views/dataset/data/FieldEdit.vue
View File

@ -11,102 +11,200 @@
</el-row>
</el-row>
<el-divider />
<el-table :data="tableFields" size="mini" :max-height="maxHeight">
<el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
<template slot-scope="scope">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;">
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
<el-collapse v-model="fieldActiveNames" class="style-collapse">
<el-collapse-item name="d" :title="$t('chart.dimension')">
<el-table :data="tableFields.dimensionList" size="mini" :max-height="maxHeight">
<el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
<template slot-scope="scope">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;">
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
<span style="margin-left: 8px;">
<span v-if="scope.row.deType === 0">
<svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
<span class="field-class">{{ $t('dataset.text') }}</span>
</span>
<span v-if="scope.row.deType === 1">
<svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
<span class="field-class">{{ $t('dataset.time') }}</span>
</span>
<span v-if="scope.row.deType === 2 || scope.row.deType === 3">
<svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
<span v-if="scope.row.deType === 2" class="field-class">{{ $t('dataset.value') }}</span>
<span v-if="scope.row.deType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
</span>
<span v-if="scope.row.deType === 5">
<svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
<span class="field-class">{{ $t('dataset.location') }}</span>
</span>
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
<span style="margin-left: 8px;">
<span v-if="scope.row.deType === 0">
<svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
<span class="field-class">{{ $t('dataset.text') }}</span>
</span>
<span v-if="scope.row.deType === 1">
<svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
<span class="field-class">{{ $t('dataset.time') }}</span>
</span>
<span v-if="scope.row.deType === 2 || scope.row.deType === 3">
<svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
<span v-if="scope.row.deType === 2" class="field-class">{{ $t('dataset.value') }}</span>
<span v-if="scope.row.deType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
</span>
<span v-if="scope.row.deType === 5">
<svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
<span class="field-class">{{ $t('dataset.location') }}</span>
</span>
</span>
</template>
</el-table-column>
<el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
<template slot-scope="scope">
<span>
<span v-if="scope.row.deExtractType === 0">
<svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
<span class="field-class">{{ $t('dataset.text') }}</span>
</span>
<span v-if="scope.row.deExtractType === 1">
<svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
<span class="field-class">{{ $t('dataset.time') }}</span>
</span>
<span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
<svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
<span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
<span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
<span class="field-class">{{ $t('dataset.location') }}</span>
</span>
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
</template>
</el-table-column>
<el-table-column v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
</el-radio-group>
</template>
</el-table-column>
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
</template>
</el-table-column>
<el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
<template slot-scope="scope">
<span>
<span v-if="scope.row.deExtractType === 0">
<svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
<span class="field-class">{{ $t('dataset.text') }}</span>
</span>
<span v-if="scope.row.deExtractType === 1">
<svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
<span class="field-class">{{ $t('dataset.time') }}</span>
</span>
<span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
<svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
<span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
<span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
<span class="field-class">{{ $t('dataset.location') }}</span>
</span>
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
</template>
</el-table-column>
<el-table-column v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
</el-radio-group>
</template>
</el-table-column>
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
</el-collapse-item>
<el-collapse-item name="q" :title="$t('chart.quota')">
<el-table :data="tableFields.quotaList" size="mini" :max-height="maxHeight">
<el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
<template slot-scope="scope">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;">
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
<span style="margin-left: 8px;">
<span v-if="scope.row.deType === 0">
<svg-icon v-if="scope.row.deType === 0" icon-class="field_text" class="field-icon-text" />
<span class="field-class">{{ $t('dataset.text') }}</span>
</span>
<span v-if="scope.row.deType === 1">
<svg-icon v-if="scope.row.deType === 1" icon-class="field_time" class="field-icon-time" />
<span class="field-class">{{ $t('dataset.time') }}</span>
</span>
<span v-if="scope.row.deType === 2 || scope.row.deType === 3">
<svg-icon v-if="scope.row.deType === 2 || scope.row.deType === 3" icon-class="field_value" class="field-icon-value" />
<span v-if="scope.row.deType === 2" class="field-class">{{ $t('dataset.value') }}</span>
<span v-if="scope.row.deType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
</span>
<span v-if="scope.row.deType === 5">
<svg-icon v-if="scope.row.deType === 5" icon-class="field_location" class="field-icon-location" />
<span class="field-class">{{ $t('dataset.location') }}</span>
</span>
</span>
</template>
</el-table-column>
<el-table-column property="deExtractType" :label="$t('dataset.origin_field_type')" width="100">
<template slot-scope="scope">
<span>
<span v-if="scope.row.deExtractType === 0">
<svg-icon v-if="scope.row.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
<span class="field-class">{{ $t('dataset.text') }}</span>
</span>
<span v-if="scope.row.deExtractType === 1">
<svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
<span class="field-class">{{ $t('dataset.time') }}</span>
</span>
<span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4">
<svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3 || scope.row.deExtractType === 4" icon-class="field_value" class="field-icon-value" />
<span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 4" class="field-class">{{ $t('dataset.value') }}</span>
<span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>
</span>
<span v-if="scope.row.deExtractType === 5">
<svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
<span class="field-class">{{ $t('dataset.location') }}</span>
</span>
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
</template>
</el-table-column>
<el-table-column v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
</el-radio-group>
</template>
</el-table-column>
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
</el-collapse-item>
</el-collapse>
</el-row>
</template>
<script>
import { fieldList, batchEdit } from '@/api/dataset/dataset'
import { batchEdit, fieldListDQ } from '@/api/dataset/dataset'
export default {
name: 'FieldEdit',
props: {
@ -118,14 +216,18 @@ export default {
data() {
return {
maxHeight: 'auto',
tableFields: [],
tableFields: {
dimensionList: [],
quotaList: []
},
fields: [
{ label: this.$t('dataset.text'), value: 0 },
{ label: this.$t('dataset.time'), value: 1 },
{ label: this.$t('dataset.value'), value: 2 },
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
{ label: this.$t('dataset.location'), value: 5 }
]
],
fieldActiveNames: ['d', 'q']
}
},
watch: {
@ -147,13 +249,14 @@ export default {
}, 10)
},
initField() {
fieldList(this.param.table.id).then(response => {
fieldListDQ(this.param.table.id).then(response => {
this.tableFields = response.data
})
},
saveEdit() {
// console.log(this.tableFields)
batchEdit(this.tableFields).then(response => {
const list = this.tableFields.dimensionList.concat(this.tableFields.quotaList)
batchEdit(list).then(response => {
this.closeEdit()
})
},
@ -184,4 +287,15 @@ export default {
.el-radio{
margin-right: 10px !important;
}
.style-collapse>>>.el-collapse-item__header{
height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
}
.style-collapse>>>.el-collapse-item__wrap{
border-bottom: 0 solid #e6ebf5!important;
}
.style-collapse{
border-top: 0 solid #e6ebf5!important;
}
</style>