feat: 视图过滤重新设计，支持单维度指标展示

backend/src/main/java/io/dataease/dto/chart/ChartCustomFilterItemDTO.java

+package io.dataease.dto.chart;
+
+import lombok.Getter;
+import lombok.Setter;
+
+import java.io.Serializable;
+
+/**
+ * @Author gin
+ * @Date 2021/7/20 11:34 上午
+ */
+@Getter
+@Setter
+public class ChartCustomFilterItemDTO implements Serializable {
+    private String fieldId;
+    private String term;
+    private String value;
+}

backend/src/main/java/io/dataease/dto/chart/ChartFieldCustomFilterDTO.java

+package io.dataease.dto.chart;
+
+import io.dataease.base.domain.DatasetTableField;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.io.Serializable;
+import java.util.List;
+
+/**
+ * @Author gin
+ * @Date 2021/7/20 11:43 上午
+ */
+@Getter
+@Setter
+public class ChartFieldCustomFilterDTO implements Serializable {
+    private List<ChartCustomFilterItemDTO> filter;
+}

backend/src/main/java/io/dataease/service/chart/ChartViewService.java

@@ -134,24 +134,31 @@ public class ChartViewService {
         }.getType());
         List<ChartViewFieldDTO> yAxis = new Gson().fromJson(view.getYAxis(), new TypeToken<List<ChartViewFieldDTO>>() {
         }.getType());
-        List<ChartCustomFilterDTO> customFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartCustomFilterDTO>>() {
+        List<ChartFieldCustomFilterDTO> fieldCustomFilter = new Gson().fromJson(view.getCustomFilter(), new TypeToken<List<ChartFieldCustomFilterDTO>>() {
         }.getType());
-        customFilter.forEach(ele -> ele.setField(dataSetTableFieldsService.get(ele.getFieldId())));
+        List<ChartCustomFilterDTO> customFilter = fieldCustomFilter.stream().map(ele -> {
+            ChartCustomFilterDTO dto = new ChartCustomFilterDTO();
+            ele.getFilter().forEach(f -> {
+                BeanUtils.copyBean(dto, f);
+                dto.setField(dataSetTableFieldsService.get(f.getFieldId()));
+            });
+            return dto;
+        }).collect(Collectors.toList());
 
-        if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
-            xAxis = new ArrayList<>();
-            if (CollectionUtils.isEmpty(yAxis)) {
-                ChartViewDTO dto = new ChartViewDTO();
-                BeanUtils.copyBean(dto, view);
-                return dto;
-            }
-        } else {
-            if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
-                ChartViewDTO dto = new ChartViewDTO();
-                BeanUtils.copyBean(dto, view);
-                return dto;
-            }
-        }
+//        if (StringUtils.equalsIgnoreCase("text", view.getType()) || StringUtils.equalsIgnoreCase("gauge", view.getType())) {
+//            xAxis = new ArrayList<>();
+//            if (CollectionUtils.isEmpty(yAxis)) {
+//                ChartViewDTO dto = new ChartViewDTO();
+//                BeanUtils.copyBean(dto, view);
+//                return dto;
+//            }
+//        } else {
+//            if (CollectionUtils.isEmpty(xAxis) || CollectionUtils.isEmpty(yAxis)) {
+//                ChartViewDTO dto = new ChartViewDTO();
+//                BeanUtils.copyBean(dto, view);
+//                return dto;
+//            }
+//        }
 
         // 过滤来自仪表板的条件
         List<ChartExtFilterRequest> extFilterList = new ArrayList<>();

frontend/src/lang/en.js

@@ -598,7 +598,7 @@ export default {
     chart_type: 'Chart Type',
     shape_attr: 'Attribute',
     module_style: 'Style',
-    result_filter: 'Results Filter',
+    result_filter: 'Filters',
     x_axis: 'Horizontal axis',
     y_axis: 'Longitudinal axis',
     chart: 'Chart',

frontend/src/lang/tw.js

@@ -598,7 +598,7 @@ export default {
     chart_type: '圖表類型',
     shape_attr: '圖形屬性',
     module_style: '組件樣式',
-    result_filter: '結果過濾器',
+    result_filter: '過濾器',
     x_axis: '橫軸',
     y_axis: '縱軸',
     chart: '視圖',

frontend/src/lang/zh.js

@@ -598,7 +598,7 @@ export default {
     chart_type: '图表类型',
     shape_attr: '图形属性',
     module_style: '组件样式',
-    result_filter: '结果过滤器',
+    result_filter: '过滤器',
     x_axis: '横轴',
     y_axis: '纵轴',
     chart: '视图',

frontend/src/views/chart/components/drag-item/DimensionItem.vue

@@ -39,9 +39,9 @@
               </el-dropdown-menu>
             </el-dropdown>
           </el-dropdown-item>
-          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
-            <span>{{ $t('chart.filter') }}...</span>
-          </el-dropdown-item>
+          <!--          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">-->
+          <!--            <span>{{ $t('chart.filter') }}...</span>-->
+          <!--          </el-dropdown-item>-->
 
           <el-dropdown-item v-show="item.deType === 1" divided>
             <el-dropdown placement="right-start" size="mini" style="width: 100%" @command="dateStyle">

frontend/src/views/chart/components/drag-item/FilterItem.vue

 <template>
-  <div>
-    <el-dropdown trigger="click" size="mini" @command="clickItem">
+  <span>
+    <el-tag v-if="!hasDataPermission('manage',param.privileges)" size="small" class="item-axis">
+      <span style="float: left">
+        <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+        <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+        <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+        <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+      </span>
+      <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+    </el-tag>
+    <el-dropdown v-else trigger="click" size="mini" @command="clickItem">
       <span class="el-dropdown-link">
         <el-tag size="small" class="item-axis">
-          {{ item.name }}<i class="el-icon-arrow-down el-icon--right" />
+          <span style="float: left">
+            <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
+            <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
+            <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
+            <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
+          </span>
+          <span class="item-span-style" :title="item.name">{{ item.name }}</span>
+          <i class="el-icon-arrow-down el-icon--right" style="position: absolute;top: 6px;right: 10px;" />
         </el-tag>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item icon="el-icon-edit-outline" :command="beforeClickItem('rename')">
-            <span>{{ $t('chart.show_name_set') }}</span>
+          <el-dropdown-item icon="el-icon-files" :command="beforeClickItem('filter')">
+            <span>{{ $t('chart.filter') }}...</span>
           </el-dropdown-item>
           <el-dropdown-item icon="el-icon-delete" divided :command="beforeClickItem('remove')">
             <span>{{ $t('chart.delete') }}</span>
@@ -15,25 +31,17 @@
         </el-dropdown-menu>
       </span>
     </el-dropdown>
-
-    <el-dialog :title="$t('chart.show_name_set')" :visible="renameItem" :show-close="false" width="30%">
-      <el-form ref="itemForm" :model="itemForm" :rules="itemFormRules">
-        <el-form-item :label="$t('commons.name')" prop="name">
-          <el-input v-model="itemForm.name" size="mini" />
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button size="mini" @click="closeRename()">{{ $t('chart.cancel') }}</el-button>
-        <el-button type="primary" size="mini" @click="saveRename(itemForm)">{{ $t('chart.confirm') }}</el-button>
-      </div>
-    </el-dialog>
-  </div>
+  </span>
 </template>
 
 <script>
 export default {
   name: 'FilterItem',
   props: {
+    param: {
+      type: Object,
+      required: true
+    },
     item: {
       type: Object,
       required: true
@@ -45,15 +53,6 @@ export default {
   },
   data() {
     return {
-      renameItem: false,
-      itemForm: {
-        name: ''
-      },
-      itemFormRules: {
-        name: [
-          { required: true, message: this.$t('commons.input_content'), trigger: 'change' }
-        ]
-      }
     }
   },
   mounted() {
@@ -64,12 +63,12 @@ export default {
         return
       }
       switch (param.type) {
-        case 'rename':
-          this.showRename()
-          break
         case 'remove':
           this.removeItem()
           break
+        case 'filter':
+          this.editFilter()
+          break
         default:
           break
       }
@@ -79,23 +78,9 @@ export default {
         type: type
       }
     },
-    showRename() {
-      this.itemForm.name = this.item.name
-      this.renameItem = true
-    },
-    closeRename() {
-      this.renameItem = false
-      this.resetRename()
-    },
-    saveRename(param) {
-      this.item.name = param.name
-      this.$emit('onFilterItemChange', this.item)
-      this.closeRename()
-    },
-    resetRename() {
-      this.itemForm = {
-        name: ''
-      }
+    editFilter() {
+      this.item.index = this.index
+      this.$emit('editItemFilter', this.item)
     },
     removeItem() {
       this.item.index = this.index
@@ -112,10 +97,11 @@ export default {
     text-align: left;
     height: 24px;
     line-height: 22px;
-    display: inline-block;
+    display: flex;
     border-radius: 4px;
     box-sizing: border-box;
     white-space: nowrap;
+    width: 159px;
   }
 
   .item-axis:hover {
@@ -126,4 +112,24 @@ export default {
   span {
     font-size: 12px;
   }
+
+  .summary-span{
+    margin-left: 4px;
+    color: #878d9f;;
+  }
+
+  .inner-dropdown-menu{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%
+  }
+
+  .item-span-style{
+    display: inline-block;
+    width: 100px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
 </style>

frontend/src/views/chart/components/filter/ResultFilterEditor.vue

@@ -2,26 +2,11 @@
   <el-col>
     <el-button icon="el-icon-plus" circle size="mini" style="margin-bottom: 10px;" @click="addFilter" />
     <div style="max-height: 50vh;overflow-y: auto;">
-      <el-row v-for="(f,index) in chart.customFilter" :key="index" class="filter-item">
-        <el-col :span="6">
-          <el-select v-model="f.fieldId" size="mini" filterable>
-            <el-option
-              v-for="item in fields"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            >
-              <span style="float: left">
-                <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
-                <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
-                <svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
-                <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
-              </span>
-              <span style="float: left; color: #8492a6; font-size: 12px">{{ item.name }}</span>
-            </el-option>
-          </el-select>
+      <el-row v-for="(f,index) in item.filter" :key="index" class="filter-item">
+        <el-col :span="4">
+          <span>{{ item.name }}</span>
         </el-col>
-        <el-col :span="6">
+        <el-col :span="8">
           <el-select v-model="f.term" size="mini">
             <el-option-group
               v-for="(group,idx) in options"
@@ -49,7 +34,7 @@
 </template>
 
 <script>
-import { fieldList } from '../../../../api/dataset/dataset'
+// import { fieldList } from '../../../../api/dataset/dataset'
 
 export default {
   name: 'ResultFilterEditor',
@@ -57,78 +42,162 @@ export default {
     chart: {
       type: Object,
       required: true
+    },
+    item: {
+      type: Object,
+      required: true
     }
   },
   data() {
     return {
-      options: [{
-        label: '',
-        options: [{
-          value: 'eq',
-          label: this.$t('chart.filter_eq')
-        }, {
-          value: 'not_eq',
-          label: this.$t('chart.filter_not_eq')
-        }]
-      },
-      {
-        label: '',
-        options: [{
-          value: 'like',
-          label: this.$t('chart.filter_like')
-        }, {
-          value: 'not like',
-          label: this.$t('chart.filter_not_like')
-        }]
-      },
-      {
-        label: '',
-        options: [{
-          value: 'lt',
-          label: this.$t('chart.filter_lt')
-        }, {
-          value: 'gt',
-          label: this.$t('chart.filter_gt')
-        }]
-      },
-      {
-        label: '',
-        options: [{
-          value: 'le',
-          label: this.$t('chart.filter_le')
-        }, {
-          value: 'ge',
-          label: this.$t('chart.filter_ge')
-        }]
-      },
-      {
-        label: '',
-        options: [{
-          value: 'null',
-          label: this.$t('chart.filter_null')
-        }, {
-          value: 'not_null',
-          label: this.$t('chart.filter_not_null')
-        }]
-      }],
-      fields: []
+      textOptions: [
+        {
+          label: '',
+          options: [{
+            value: 'eq',
+            label: this.$t('chart.filter_eq')
+          }, {
+            value: 'not_eq',
+            label: this.$t('chart.filter_not_eq')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'like',
+            label: this.$t('chart.filter_like')
+          }, {
+            value: 'not like',
+            label: this.$t('chart.filter_not_like')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'null',
+            label: this.$t('chart.filter_null')
+          }, {
+            value: 'not_null',
+            label: this.$t('chart.filter_not_null')
+          }]
+        }
+      ],
+      dateOptions: [
+        {
+          label: '',
+          options: [{
+            value: 'eq',
+            label: this.$t('chart.filter_eq')
+          }, {
+            value: 'not_eq',
+            label: this.$t('chart.filter_not_eq')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'lt',
+            label: this.$t('chart.filter_lt')
+          }, {
+            value: 'gt',
+            label: this.$t('chart.filter_gt')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'le',
+            label: this.$t('chart.filter_le')
+          }, {
+            value: 'ge',
+            label: this.$t('chart.filter_ge')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'null',
+            label: this.$t('chart.filter_null')
+          }, {
+            value: 'not_null',
+            label: this.$t('chart.filter_not_null')
+          }]
+        }
+      ],
+      valueOptions: [
+        {
+          label: '',
+          options: [{
+            value: 'eq',
+            label: this.$t('chart.filter_eq')
+          }, {
+            value: 'not_eq',
+            label: this.$t('chart.filter_not_eq')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'lt',
+            label: this.$t('chart.filter_lt')
+          }, {
+            value: 'gt',
+            label: this.$t('chart.filter_gt')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'le',
+            label: this.$t('chart.filter_le')
+          }, {
+            value: 'ge',
+            label: this.$t('chart.filter_ge')
+          }]
+        },
+        {
+          label: '',
+          options: [{
+            value: 'null',
+            label: this.$t('chart.filter_null')
+          }, {
+            value: 'not_null',
+            label: this.$t('chart.filter_not_null')
+          }]
+        }
+      ],
+      options: []
+    }
+  },
+  watch: {
+    'item': function() {
+      this.initOptions()
     }
   },
   mounted() {
-    fieldList(this.chart.tableId).then(response => {
-      this.fields = response.data
-    })
+    this.initOptions()
   },
   methods: {
+    initOptions() {
+      if (this.item) {
+        if (this.item.deType === 0 || this.item.deType === 5) {
+          this.options = JSON.parse(JSON.stringify(this.textOptions))
+        } else if (this.item.deType === 1) {
+          this.options = JSON.parse(JSON.stringify(this.dateOptions))
+        } else {
+          this.options = JSON.parse(JSON.stringify(this.valueOptions))
+        }
+      }
+    },
     addFilter() {
-      this.chart.customFilter.push({
-        fieldId: '',
+      this.item.filter.push({
+        fieldId: this.item.id,
         term: 'eq',
         value: ''
       })
     },
     removeFilter(index) {
-      this.chart.customFilter.splice(index, 1)
+      this.item.filter.splice(index, 1)
     }
   }
 }
@@ -157,8 +226,4 @@ export default {
     display: inline-block;
     width: 80px!important;
   }
-.el-select-dropdown__item{
-  padding: 0 20px;
-  font-size: 12px;
-}
 </style>