Skip to content

D
dataease
Unverified 提交 cd4b93c4 authored 作者: Gin's avatar Gin 提交者： GitHub
浏览文件
操作

Merge pull request #1466 from dataease/pr@dev@feat_filter_enum

feat(视图): 文本类型过滤组件支持枚举
上级 5c619821 fe37d09a
隐藏空白字符变更
内嵌 并排
正在显示 包含 210 行增加 和 112 行删除
backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java
浏览文件 @ cd4b93c4
...@@ -17,4 +17,6 @@ public class ChartFieldCustomFilterDTO extends ChartViewFieldBaseDTO implements ...@@ -17,4 +17,6 @@ public class ChartFieldCustomFilterDTO extends ChartViewFieldBaseDTO implements
private List<ChartCustomFilterItemDTO> filter; private List<ChartCustomFilterItemDTO> filter;
private DatasetTableField field; private DatasetTableField field;
private List<String> enumCheckField;
} }
backend/src/main/java/io/dataease/dto/chart/ChartViewFieldBaseDTO.java
浏览文件 @ cd4b93c4
...@@ -48,4 +48,6 @@ public class ChartViewFieldBaseDTO implements Serializable { ...@@ -48,4 +48,6 @@ public class ChartViewFieldBaseDTO implements Serializable {
private ChartFieldCompareDTO compareCalc; private ChartFieldCompareDTO compareCalc;
private String logic; private String logic;
private String filterType;
} }
backend/src/main/java/io/dataease/provider/query/mysql/MysqlQueryProvider.java
浏览文件 @ cd4b93c4
...@@ -735,62 +735,74 @@ public class MysqlQueryProvider extends QueryProvider { ...@@ -735,62 +735,74 @@ public class MysqlQueryProvider extends QueryProvider {
for (ChartFieldCustomFilterDTO request : requestList) { for (ChartFieldCustomFilterDTO request : requestList) {
List<SQLObj> list = new ArrayList<>(); List<SQLObj> list = new ArrayList<>();
DatasetTableField field = request.getField(); DatasetTableField field = request.getField();
List<ChartCustomFilterItemDTO> filter = request.getFilter();
for (ChartCustomFilterItemDTO filterItemDTO : filter) { if (ObjectUtils.isEmpty(field)) {
if (ObjectUtils.isEmpty(field)) { continue;
continue; }
String whereName = "";
String originName;
if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 2) {
// 解析origin name中有关联的字段生成sql表达式
originName = calcFieldRegex(field.getOriginName(), tableObj);
} else if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 1) {
originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
} else {
originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
}
if (field.getDeType() == 1) {
if (field.getDeExtractType() == 0 || field.getDeExtractType() == 5) {
whereName = String.format(MySQLConstants.STR_TO_DATE, originName, MySQLConstants.DEFAULT_DATE_FORMAT);
} }
String value = filterItemDTO.getValue(); if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) {
String whereName = ""; String cast = String.format(MySQLConstants.CAST, originName, MySQLConstants.DEFAULT_INT_FORMAT) + "/1000";
String whereTerm = transMysqlFilterTerm(filterItemDTO.getTerm()); whereName = String.format(MySQLConstants.FROM_UNIXTIME, cast, MySQLConstants.DEFAULT_DATE_FORMAT);
String whereValue = "";
String originName;
if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 2) {
// 解析origin name中有关联的字段生成sql表达式
originName = calcFieldRegex(field.getOriginName(), tableObj);
} else if (ObjectUtils.isNotEmpty(field.getExtField()) && field.getExtField() == 1) {
originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
} else {
originName = String.format(MySQLConstants.KEYWORD_FIX, tableObj.getTableAlias(), field.getOriginName());
} }
if (field.getDeType() == 1) { if (field.getDeExtractType() == 1) {
if (field.getDeExtractType() == 0 || field.getDeExtractType() == 5) { whereName = originName;
whereName = String.format(MySQLConstants.STR_TO_DATE, originName, MySQLConstants.DEFAULT_DATE_FORMAT); }
} } else {
if (field.getDeExtractType() == 2 || field.getDeExtractType() == 3 || field.getDeExtractType() == 4) { whereName = originName;
String cast = String.format(MySQLConstants.CAST, originName, MySQLConstants.DEFAULT_INT_FORMAT) + "/1000"; }
whereName = String.format(MySQLConstants.FROM_UNIXTIME, cast, MySQLConstants.DEFAULT_DATE_FORMAT);
if (StringUtils.equalsIgnoreCase(request.getFilterType(), "enum")) {
if (CollectionUtils.isNotEmpty(request.getEnumCheckField())) {
res.add("(" + whereName + " IN ('" + String.join("','", request.getEnumCheckField()) + "'))");
}
} else {
List<ChartCustomFilterItemDTO> filter = request.getFilter();
for (ChartCustomFilterItemDTO filterItemDTO : filter) {
if (ObjectUtils.isEmpty(field)) {
continue;
} }
if (field.getDeExtractType() == 1) { String value = filterItemDTO.getValue();
whereName = originName; String whereTerm = transMysqlFilterTerm(filterItemDTO.getTerm());
String whereValue = "";
if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "null")) {
whereValue = "";
} else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_null")) {
whereValue = "";
} else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "empty")) {
whereValue = "''";
} else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_empty")) {
whereValue = "''";
} else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "in")) {
whereValue = "('" + StringUtils.join(value, "','") + "')";
} else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "like")) {
whereValue = "'%" + value + "%'";
} else {
whereValue = String.format(MySQLConstants.WHERE_VALUE_VALUE, value);
} }
} else { list.add(SQLObj.builder()
whereName = originName; .whereField(whereName)
.whereTermAndValue(whereTerm + whereValue)
.build());
} }
if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "null")) { List<String> strList = new ArrayList<>();
whereValue = ""; list.forEach(ele -> strList.add(ele.getWhereField() + " " + ele.getWhereTermAndValue()));
} else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_null")) { if (CollectionUtils.isNotEmpty(list)) {
whereValue = ""; res.add("(" + String.join(" " + getLogic(request.getLogic()) + " ", strList) + ")");
} else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "empty")) {
whereValue = "''";
} else if (StringUtils.equalsIgnoreCase(filterItemDTO.getTerm(), "not_empty")) {
whereValue = "''";
} else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "in")) {
whereValue = "('" + StringUtils.join(value, "','") + "')";
} else if (StringUtils.containsIgnoreCase(filterItemDTO.getTerm(), "like")) {
whereValue = "'%" + value + "%'";
} else {
whereValue = String.format(MySQLConstants.WHERE_VALUE_VALUE, value);
} }
list.add(SQLObj.builder()
.whereField(whereName)
.whereTermAndValue(whereTerm + whereValue)
.build());
}
List<String> strList = new ArrayList<>();
list.forEach(ele -> strList.add(ele.getWhereField() + " " + ele.getWhereTermAndValue()));
if (CollectionUtils.isNotEmpty(list)) {
res.add("(" + String.join(" " + getLogic(request.getLogic()) + " ", strList) + ")");
} }
} }
return CollectionUtils.isNotEmpty(res) ? "(" + String.join(" AND ", res) + ")" : null; return CollectionUtils.isNotEmpty(res) ? "(" + String.join(" AND ", res) + ")" : null;
......
frontend/src/lang/en.js
浏览文件 @ cd4b93c4
...@@ -994,7 +994,11 @@ export default { ...@@ -994,7 +994,11 @@ export default {
data_percent: 'Percent', data_percent: 'Percent',
compare_calc_expression: 'Expression', compare_calc_expression: 'Expression',
and: 'And', and: 'And',
or: 'Or' or: 'Or',
logic_exp: 'Logic',
enum_exp: 'Enum',
pls_slc: 'Please Select',
filter_exp: 'Filter Value'
}, },
dataset: { dataset: {
sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default', sheet_warn: 'There are multiple sheet pages, and the first one is extracted by default',
......
frontend/src/lang/tw.js
浏览文件 @ cd4b93c4
...@@ -994,7 +994,11 @@ export default { ...@@ -994,7 +994,11 @@ export default {
data_percent: '差值百分比', data_percent: '差值百分比',
compare_calc_expression: '計算公式', compare_calc_expression: '計算公式',
and: '與', and: '與',
or: '或' or: '或',
logic_exp: '邏輯條件',
enum_exp: '枚舉條件',
pls_slc: '請選擇',
filter_exp: '過濾條件'
}, },
dataset: { dataset: {
sheet_warn: '有多個 Sheet 頁，默認抽取第一個', sheet_warn: '有多個 Sheet 頁，默認抽取第一個',
......
frontend/src/lang/zh.js
浏览文件 @ cd4b93c4
...@@ -997,7 +997,11 @@ export default { ...@@ -997,7 +997,11 @@ export default {
data_percent: '差值百分比', data_percent: '差值百分比',
compare_calc_expression: '计算公式', compare_calc_expression: '计算公式',
and: '与', and: '与',
or: '或' or: '或',
logic_exp: '逻辑条件',
enum_exp: '枚举条件',
pls_slc: '请选择',
filter_exp: '过滤条件'
}, },
dataset: { dataset: {
sheet_warn: '有多个 Sheet 页，默认抽取第一个', sheet_warn: '有多个 Sheet 页，默认抽取第一个',
......
frontend/src/views/chart/components/filter/ResultFilterEditor.vue
浏览文件 @ cd4b93c4
<template> <template>
<el-col> <el-col>
<div style="display: inline-block;"> <div v-if="item.deType === 0 || item.deType === 5">
<el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<el-radio-group <el-radio-group
v-model="logic" v-model="filterType"
size="mini" size="mini"
style="margin-left: 10px;" style="margin-bottom: 10px;"
@change="logicChange" @change="filterTypeChange"
> >
<el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button> <el-radio label="logic">{{ $t('chart.logic_exp') }}</el-radio>
<el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button> <el-radio label="enum">{{ $t('chart.enum_exp') }}</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="max-height: 50vh;overflow-y: auto;"> <div v-if="((item.deType === 0 || item.deType === 5) && filterType === 'logic') || item.deType === 1 || item.deType === 2 || item.deType === 3">
<el-row v-for="(f,index) in item.filter" :key="index" class="filter-item"> <div style="display: inline-block;">
<el-col :span="4"> <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
<span>{{ item.name }}</span> <el-radio-group
</el-col> v-model="logic"
<el-col :span="8"> size="mini"
<el-select v-model="f.term" size="mini"> style="margin-left: 10px;"
<el-option-group @change="logicChange"
v-for="(group,idx) in options" >
:key="idx" <el-radio-button label="and">{{ $t('chart.and') }}</el-radio-button>
:label="group.label" <el-radio-button label="or">{{ $t('chart.or') }}</el-radio-button>
> </el-radio-group>
<el-option </div>
v-for="opt in group.options" <div style="max-height: 50vh;overflow-y: auto;">
:key="opt.value" <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
:label="opt.label" <el-col :span="4">
:value="opt.value" <span>{{ item.name }}</span>
/> </el-col>
</el-option-group> <el-col :span="8">
</el-select> <el-select v-model="f.term" size="mini">
</el-col> <el-option-group
<el-col :span="6"> v-for="(group,idx) in options"
<el-input v-show="!f.term.includes('null') && !f.term.includes('empty')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable /> :key="idx"
</el-col> :label="group.label"
<el-col :span="6"> >
<el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" /> <el-option
</el-col> v-for="opt in group.options"
</el-row> :key="opt.value"
:label="opt.label"
:value="opt.value"
/>
</el-option-group>
</el-select>
</el-col>
<el-col :span="6">
<el-input v-show="!f.term.includes('null') && !f.term.includes('empty')" v-model="f.value" class="value-item" :placeholder="$t('chart.condition')" size="mini" clearable />
</el-col>
<el-col :span="6">
<el-button type="text" icon="el-icon-delete" circle style="float: right" @click="removeFilter(index)" />
</el-col>
</el-row>
</div>
</div>
<div v-if="(item.deType === 0 || item.deType === 5) && filterType === 'enum'">
<span style="margin-right: 10px;">{{ $t('chart.filter_exp') }}</span>
<el-select
v-model="enumCheckField"
filterable
multiple
:placeholder="$t('chart.pls_slc')"
size="mini"
@change="enumChange"
>
<el-option
v-for="field in fieldOptions"
:key="field.id"
:label="field.text"
:value="field.id"
/>
</el-select>
</div> </div>
</el-col> </el-col>
</template> </template>
<script> <script>
// import { fieldList } from '../../../../api/dataset/dataset' import { multFieldValues } from '@/api/dataset/dataset'
export default { export default {
name: 'ResultFilterEditor', name: 'ResultFilterEditor',
...@@ -169,7 +201,10 @@ export default { ...@@ -169,7 +201,10 @@ export default {
} }
], ],
options: [], options: [],
logic: '' logic: '',
filterType: '',
enumCheckField: [],
fieldOptions: []
} }
}, },
watch: { watch: {
...@@ -195,6 +230,21 @@ export default { ...@@ -195,6 +230,21 @@ export default {
}, },
init() { init() {
this.logic = this.item.logic this.logic = this.item.logic
this.filterType = this.item.filterType
this.enumCheckField = this.item.enumCheckField
// 查找枚举的
multFieldValues([this.item.id]).then(res => {
this.fieldOptions = this.optionDatas(res.data)
})
},
optionDatas(datas) {
if (!datas) return null
return datas.filter(item => !!item).map(item => {
return {
id: item,
text: item
}
})
}, },
addFilter() { addFilter() {
this.item.filter.push({ this.item.filter.push({
...@@ -208,25 +258,31 @@ export default { ...@@ -208,25 +258,31 @@ export default {
}, },
logicChange(val) { logicChange(val) {
this.item.logic = val this.item.logic = val
},
filterTypeChange(val) {
this.item.filterType = val
},
enumChange(val) {
this.item.enumCheckField = this.enumCheckField
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
.filter-item{ .filter-item{
width: 100%; width: 100%;
border-radius: 4px; border-radius: 4px;
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
padding: 4px 14px; padding: 4px 14px;
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
} }
.form-item>>>.el-form-item__label{ .form-item>>>.el-form-item__label{
font-size: 12px; font-size: 12px;
} }
span{ span{
font-size: 12px; font-size: 12px;
} }
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ cd4b93c4
...@@ -1656,25 +1656,39 @@ export default { ...@@ -1656,25 +1656,39 @@ export default {
if (!this.filterItem.logic) { if (!this.filterItem.logic) {
this.filterItem.logic = 'and' this.filterItem.logic = 'and'
} }
if (!this.filterItem.filterType) {
this.filterItem.filterType = 'logic'
}
if (!this.filterItem.enumCheckField) {
this.filterItem.enumCheckField = []
}
this.resultFilterEdit = true this.resultFilterEdit = true
}, },
closeResultFilter() { closeResultFilter() {
this.resultFilterEdit = false this.resultFilterEdit = false
}, },
saveResultFilter() { saveResultFilter() {
for (let i = 0; i < this.filterItem.filter.length; i++) { if (((this.filterItem.deType === 0 || this.filterItem.deType === 5) && this.filterItem.filterType !== 'enum') ||
const f = this.filterItem.filter[i] this.filterItem.deType === 1 ||
if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) { this.filterItem.deType === 2 ||
this.$message({ this.filterItem.deType === 3) {
message: this.$t('chart.filter_value_can_null'), for (let i = 0; i < this.filterItem.filter.length; i++) {
type: 'error', const f = this.filterItem.filter[i]
showClose: true if (!f.term.includes('null') && !f.term.includes('empty') && (!f.value || f.value === '')) {
}) this.$message({
return message: this.$t('chart.filter_value_can_null'),
type: 'error',
showClose: true
})
return
}
} }
} }
this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter this.view.customFilter[this.filterItem.index].filter = this.filterItem.filter
this.view.customFilter[this.filterItem.index].logic = this.filterItem.logic this.view.customFilter[this.filterItem.index].logic = this.filterItem.logic
this.view.customFilter[this.filterItem.index].filterType = this.filterItem.filterType
this.view.customFilter[this.filterItem.index].enumCheckField = this.filterItem.enumCheckField
this.calcData(true) this.calcData(true)
this.closeResultFilter() this.closeResultFilter()
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论