Merge pull request #284 from dataease/pr@dev@feat_仪表板数值区间组件

feat: 仪表板过滤组件数值区间

frontend/src/components/DeDrag/index.vue

@@ -623,7 +623,7 @@ export default {
     elementMouseDown(e) {
       // private 设置当前组件数据及状态
       this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search') {
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-number-range') {
         e.preventDefault()
       }
       // 阻止冒泡事件

frontend/src/components/canvas/components/Editor/Shape.vue

@@ -226,7 +226,7 @@ export default {
 
     handleMouseDownOnShape(e) {
       this.$store.commit('setClickComponentStatus', true)
-      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search') {
+      if (this.element.component !== 'v-text' && this.element.component !== 'rect-shape' && this.element.component !== 'de-input-search' && this.element.component !== 'de-number-range') {
         e.preventDefault()
       }
 

frontend/src/components/widget/DeWidget/DeNumberRange.vue

@@ -0,0 +1,159 @@
+<template>
+
+  <el-form v-if="options!== null && options.attrs!==null" ref="form" :model="form" :rules="rules">
+    <div class="de-number-range-container">
+      <el-form-item prop="min">
+        <el-input v-model="form.min" :placeholder="options.attrs.placeholder" @change="handleMinChange" />
+      </el-form-item>
+      <span>~</span>
+      <el-form-item prop="max">
+        <el-input v-model="form.max" :placeholder="options.attrs.placeholder" @change="handleMaxChange" />
+      </el-form-item>
+    </div>
+  </el-form>
+
+</template>
+
+<script>
+const MIN_NUMBER = -2147483648
+const MAX_NUMBER = 2147483647
+export default {
+
+  props: {
+    element: {
+      type: Object,
+      default: null
+    },
+    inDraw: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      options: null,
+      operator: 'between',
+      values: null,
+      canEdit: false,
+
+      form: { min: '', max: '' },
+      rules: {
+        min: [
+          { required: true, message: this.$t('denumberrange.please_key_min'), trigger: 'blur' },
+          { validator: this.validateCom, trigger: 'blur' },
+          { validator: this.validateMin, trigger: 'blur' }
+        ],
+        max: [
+          { required: true, message: this.$t('denumberrange.please_key_max'), trigger: 'blur' },
+          { validator: this.validateCom, trigger: 'blur' },
+          { validator: this.validateMax, trigger: 'blur' }
+        ]
+      },
+      changeIndex: 0,
+      timeMachine: null
+    }
+  },
+  watch: {
+    form: {
+      handler(value) {
+        this.destryTimeMachine()
+        this.changeIndex++
+        this.searchWithKey(this.changeIndex)
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.options = this.element.options
+  },
+  methods: {
+    searchWithKey(index) {
+      this.timeMachine = setTimeout(() => {
+        if (index === this.changeIndex) {
+          this.search()
+        }
+        this.destryTimeMachine()
+      }, 1000)
+    },
+    destryTimeMachine() {
+      this.timeMachine && clearTimeout(this.timeMachine)
+      this.timeMachine = null
+    },
+    getFormData() {
+      const ret = {}
+      this.$refs.form.validate((valid) => {
+        ret.valid = valid
+        ret.form = this.form
+      })
+      return ret
+    },
+    resetForm() {
+      this.$refs.form.resetFields()
+    },
+    handleMinChange() {
+      this.$refs.form.validateField('max')
+    },
+    handleMaxChange() {
+      this.$refs.form.validateField('min')
+    },
+    validateCom(rule, value, callback) {
+      const one = Number(value)
+      if (Number.isInteger(one)) {
+        if (one < MIN_NUMBER) {
+          return callback(new Error(this.$t('denumberrange.out_of_min')))
+        } else if (one > MAX_NUMBER) {
+          return callback(new Error(this.$t('denumberrange.out_of_max')))
+        }
+        return callback()
+      }
+      return callback(new Error(this.$t('denumberrange.must_int')))
+    },
+    validateMin(rule, value, callback) {
+      const one = Number(value)
+      const max = Number(this.form.max)
+      if (!max || one < max) {
+        return callback()
+      }
+      return callback(new Error(this.$t('denumberrange.min_out_max')))
+    },
+    validateMax(rule, value, callback) {
+      const one = Number(value)
+      const min = Number(this.form.min)
+      if (!min || one > min) {
+        return callback()
+      }
+      return callback(new Error(this.$t('denumberrange.max_out_min')))
+    },
+
+    search() {
+      this.$refs.form.validate(valid => {
+        if (!valid) {
+          return false
+        }
+        this.setCondition()
+      })
+    },
+    setCondition() {
+      const param = {
+        component: this.element,
+        // value: !this.values ? [] : Array.isArray(this.values) ? this.values : [this.values],
+        value: [this.form.min, this.form.max],
+        operator: this.operator
+      }
+      this.inDraw && this.$store.commit('addViewFilter', param)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.de-number-range-container {
+  display: inline;
+  >>>div.el-form-item {
+    width: calc(50% - 5px) !important;
+    display: inline-block;
+    padding: 0 5px;
+  }
+}
+</style>

frontend/src/components/widget/bean/Condition.js

@@ -1,7 +1,7 @@
 /**
  * fieldId 字段ID
  * value 字段值
- * operator 操作[eq, ne, gt, ge, lt, le, in, not in, like, not like]
+ * operator 操作[eq, ne, gt, ge, lt, le, in, not in, like, not like, between]
  * viewIds 过滤视图范围
  */
 export class Condition {

frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js

@@ -0,0 +1,66 @@
+import { WidgetService } from '../service/WidgetService'
+
+const leftPanel = {
+  icon: 'iconfont icon-zuoce-qujian',
+  label: '数值区间',
+  defaultClass: 'text-filter'
+}
+
+const dialogPanel = {
+  options: {
+    attrs: {
+      placeholder: '请输入整数',
+      viewIds: []
+    },
+    value: ''
+  },
+  defaultClass: 'text-filter',
+  component: 'de-number-range'
+}
+const drawPanel = {
+  type: 'custom',
+  style: {
+    width: 500,
+    // height: 45.5,
+    height: 90,
+    fontSize: 14,
+    fontWeight: 500,
+    lineHeight: '',
+    letterSpacing: 0,
+    textAlign: '',
+    color: ''
+  },
+  component: 'de-number-range'
+}
+
+class NumberRangeServiceImpl extends WidgetService {
+  constructor(options = {}) {
+    Object.assign(options, { name: 'numberRangeWidget' })
+    super(options)
+    this.filterDialog = true
+    this.showSwitch = false
+  }
+
+  initLeftPanel() {
+    const value = JSON.parse(JSON.stringify(leftPanel))
+    return value
+  }
+
+  initFilterDialog() {
+    const value = JSON.parse(JSON.stringify(dialogPanel))
+    return value
+  }
+
+  initDrawPanel() {
+    const value = JSON.parse(JSON.stringify(drawPanel))
+    return value
+  }
+
+  filterFieldMethod(fields) {
+    return fields.filter(field => {
+      return field['deType'] === 2
+    })
+  }
+}
+const numberRangeServiceImpl = new NumberRangeServiceImpl()
+export default numberRangeServiceImpl

frontend/src/lang/en.js

@@ -1287,5 +1287,14 @@ export default {
     i18n_msg_type_dataset_sync_faild: 'Dataset synchronization failed',
     i18n_msg_type_all: 'All type',
     channel_inner_msg: 'On site news'
+  },
+  denumberrange: {
+    please_key_min: 'Please key min value',
+    please_key_max: 'Please key max value',
+    out_of_min: 'The min value cannot be less than the min integer -2³²',
+    out_of_max: 'The max value cannot be more than the max integer 2³²-1',
+    must_int: 'Please key interger',
+    min_out_max: 'The min value must be less than the max value',
+    max_out_min: 'The max value must be more than the min value'
   }
 }

frontend/src/lang/tw.js

@@ -1287,5 +1287,14 @@ export default {
     i18n_msg_type_dataset_sync_faild: '數據集同步失敗',
     i18n_msg_type_all: '全部類型',
     channel_inner_msg: '站內消息'
+  },
+  denumberrange: {
+    please_key_min: '請輸入最小值',
+    please_key_max: '請輸入最大值',
+    out_of_min: '最小值不能小于最小整數-2³²',
+    out_of_max: '最大值不能大于最大整數2³²-1',
+    must_int: '請輸入整數',
+    min_out_max: '最小值必須小于最大值',
+    max_out_min: '最大值必須大于最小值'
   }
 }

frontend/src/lang/zh.js

@@ -1289,5 +1289,14 @@ export default {
     i18n_msg_type_dataset_sync_faild: '数据集同步失败',
     i18n_msg_type_all: '全部类型',
     channel_inner_msg: '站内消息'
+  },
+  denumberrange: {
+    please_key_min: '请输入最小值',
+    please_key_max: '请输入最大值',
+    out_of_min: '最小值不能小于最小整数-2³²',
+    out_of_max: '最大值不能大于最大整数2³²-1',
+    must_int: '请输入整数',
+    min_out_max: '最小值必须小于最大值',
+    max_out_min: '最大值必须大于最小值'
   }
 }

frontend/src/styles/index.scss

@@ -211,12 +211,14 @@ div:focus {
 }
 .custom-component-class {
   width: 100%;
+  
+  div:not(.de-number-range-container ) {
+    width: 100% !important;
+  }
+
   div.el-input-group__append {
     width: 10% !important;
   }
-  div {
-    width: 100% !important;
-  }
 }
 
 %field-icon{

frontend/src/views/panel/filter/index.vue

@@ -54,7 +54,8 @@ export default {
           'textInputWidget'
         ],
         '数字过滤组件': [
-          'numberSelectWidget'
+          'numberSelectWidget',
+          'numberRangeWidget'
         ]
         // '按钮': [
         //   'buttonSureWidget'