Merge pull request #2866 from dataease/pr@dev@feat_dynamic_date_range

feat(仪表板-日期过滤器): 日期过滤器快捷选项

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

@@ -14,6 +14,7 @@
     :format="labelFormat"
     :size="size"
     :editable="false"
+    :picker-options="pickerOptions"
     @change="dateChange"
     @focus="toFocus"
     @blur="onBlur"
@@ -99,6 +100,25 @@ export default {
         return result + ' ' + this.element.options.attrs.accuracy
       }
       return null
+    },
+    pickerOptions() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      if (this.element.options.attrs.type === 'daterange' && widget.shortcuts) {
+        const cuts = widget.shortcuts()
+        const result = cuts.map(cut => {
+          return {
+            text: this.$t(cut.text),
+            onClick: picker => {
+              const param = cut.callBack()
+              picker.$emit('pick', param)
+            }
+          }
+        })
+        return {
+          shortcuts: result
+        }
+      }
+      return null
     }
 
   },

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

@@ -89,64 +89,101 @@ class TimeDateRangeServiceImpl extends WidgetService {
   defaultSetting() {
     return dialogPanel.options.attrs.default
   }
-  getStartDayOfWeek() {
+  getStartDayOfWeek(step) {
     var now = new Date() // 当前日期
     var nowDayOfWeek = now.getDay()
     var nowDay = now.getDate() // 当前日
     var nowMonth = now.getMonth() // 当前月
     var day = nowDayOfWeek || 7
-    return new Date(now.getFullYear(), nowMonth, nowDay + 1 - day)
+    var resultDay = nowDay + 1 - day
+    if (step !== null) {
+      resultDay += (step * 7)
     }
-  getEndDayOfWeek() {
+    return new Date(now.getFullYear(), nowMonth, resultDay)
+  }
+  getEndDayOfWeek(step) {
     var now = new Date() // 当前日期
     var nowDayOfWeek = now.getDay()
     var nowDay = now.getDate() // 当前日
     var nowMonth = now.getMonth() // 当前月
     var day = nowDayOfWeek || 7
-    return new Date(now.getFullYear(), nowMonth, nowDay + 7 - day)
+    var resultDay = nowDay + 7 - day
+    if (step !== null) {
+      resultDay += (step * 7)
     }
-  getStartDayOfMonth() {
+    return new Date(now.getFullYear(), nowMonth, resultDay)
+  }
+  getStartDayOfMonth(step) {
     var now = new Date()
     var nowMonth = now.getMonth() // 当前月
+    if (step !== null) {
+      nowMonth += step
+    }
     var monthStartDate = new Date(now.getFullYear(), nowMonth, 1)
     return monthStartDate
   }
-  getEndDayOfMonth() {
+  getEndDayOfMonth(step) {
     var now = new Date()
     var nowMonth = now.getMonth() // 当前月
-    var monthEndDate = new Date(now.getFullYear(), nowMonth, this.getMonthDays())
+    var days = this.getMonthDays()
+
+    if (step !== null) {
+      nowMonth += step
+      days = this.getMonthDays(step)
+    }
+
+    var monthEndDate = new Date(now.getFullYear(), nowMonth, days)
     return monthEndDate
   }
-  getStartQuarter() {
+  getStartQuarter(step) {
     var now = new Date()
     var nowMonth = now.getMonth()
-    const startMonth = Math.floor((nowMonth / 3)) * 3
+    var startMonth = Math.floor((nowMonth / 3)) * 3
+    if (step !== null) {
+      startMonth += (step * 3)
+    }
     return new Date(now.getFullYear(), startMonth, 1)
   }
-  getEndQuarter() {
+  getEndQuarter(step) {
     var now = new Date()
     var nowMonth = now.getMonth()
     const quar = Math.floor(nowMonth / 3)
-    const endMonth = quar * 3 + 2
+    var endMonth = quar * 3 + 2
+
+    if (step !== null) {
+      endMonth += (step * 3)
+    }
+
     const days = (endMonth === 5 || endMonth === 8) ? 30 : 31
     return new Date(now.getFullYear(), endMonth, days)
   }
-  getStartYear() {
+  getStartYear(step) {
     var now = new Date()
-    return new Date(now.getFullYear(), 0, 1)
+    var year = now.getFullYear()
+    if (step !== null) {
+      year += step
     }
-  getEndYear() {
+    return new Date(year, 0, 1)
+  }
+  getEndYear(step) {
     var now = new Date()
-    return new Date(now.getFullYear(), 11, 31)
+    var year = now.getFullYear()
+    if (step !== null) {
+      year += step
+    }
+    return new Date(year, 11, 31)
   }
   /**
    * 获得本月天数
    *
    * @returns
    */
-  getMonthDays() {
+  getMonthDays(step) {
     var now = new Date()
     var nowMonth = now.getMonth() // 当前月
+    if (step !== null) {
+      nowMonth += step
+    }
     var monthStartDate = new Date(now.getFullYear(), nowMonth, 1)
     var monthEndDate = new Date(now.getFullYear(), nowMonth + 1, 1)
     var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
@@ -188,19 +225,31 @@ class TimeDateRangeServiceImpl extends WidgetService {
     if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
 
     if (element.options.attrs.default.dkey === 0) {
-      // 本周
-      return [this.getStartDayOfWeek().getTime(), this.getEndDayOfWeek().getTime()]
+      return [this.getStartDayOfWeek(0).getTime(), this.getEndDayOfWeek(0).getTime()]
+    }
+    if (element.options.attrs.default.dkey === 5) { // 上周
+      return [this.getStartDayOfWeek(-1).getTime(), this.getEndDayOfWeek(-1).getTime()]
     }
 
     if (element.options.attrs.default.dkey === 1) {
-      return [this.getStartDayOfMonth().getTime(), this.getEndDayOfMonth().getTime()]
+      return [this.getStartDayOfMonth(0).getTime(), this.getEndDayOfMonth(0).getTime()]
+    }
+    if (element.options.attrs.default.dkey === 6) { // 上月
+      return [this.getStartDayOfMonth(-1).getTime(), this.getEndDayOfMonth(-1).getTime()]
     }
 
     if (element.options.attrs.default.dkey === 2) {
-      return [this.getStartQuarter().getTime(), this.getEndQuarter().getTime()]
+      return [this.getStartQuarter(0).getTime(), this.getEndQuarter(0).getTime()]
     }
+    if (element.options.attrs.default.dkey === 7) { // 上季
+      return [this.getStartQuarter(-1).getTime(), this.getEndQuarter(-1).getTime()]
+    }
+
     if (element.options.attrs.default.dkey === 3) {
-      return [this.getStartYear().getTime(), this.getEndYear().getTime()]
+      return [this.getStartYear(0).getTime(), this.getEndYear(0).getTime()]
+    }
+    if (element.options.attrs.default.dkey === 8) { // 上年
+      return [this.getStartYear(-1).getTime(), this.getEndYear(-1).getTime()]
     }
 
     if (element.options.attrs.default.dkey === 4) {
@@ -294,6 +343,31 @@ class TimeDateRangeServiceImpl extends WidgetService {
   isTimeWidget() {
     return true
   }
+  formatShortValues(values) {
+    if (!values || values.length === 0) {
+      return []
+    }
+    const labelFormat = 'yyyy-MM-dd'
+    let start = values[0]
+    let end = values[values.length - 1]
+    start = timeSection(start, 'datetime', labelFormat)[0]
+    end = timeSection(end, 'datetime', labelFormat)[1]
+    const results = [start, end]
+    return results
+  }
+  shortcuts() {
+    return [
+      { 'text': 'dynamic_time.cweek', 'callBack': () => this.formatShortValues([this.getStartDayOfWeek(0).getTime(), this.getEndDayOfWeek(0).getTime()]) },
+      { 'text': 'dynamic_month.current', 'callBack': () => this.formatShortValues([this.getStartDayOfMonth(0).getTime(), this.getEndDayOfMonth(0).getTime()]) },
+      { 'text': 'dynamic_time.cquarter', 'callBack': () => this.formatShortValues([this.getStartQuarter(0).getTime(), this.getEndQuarter(0).getTime()]) },
+      { 'text': 'dynamic_year.current', 'callBack': () => this.formatShortValues([this.getStartYear(0).getTime(), this.getEndYear(0).getTime()]) },
+
+      { 'text': 'dynamic_time.lweek', 'callBack': () => this.formatShortValues([this.getStartDayOfWeek(-1).getTime(), this.getEndDayOfWeek(-1).getTime()]) },
+      { 'text': 'dynamic_month.last', 'callBack': () => this.formatShortValues([this.getStartDayOfMonth(-1).getTime(), this.getEndDayOfMonth(-1).getTime()]) },
+      { 'text': 'dynamic_time.lquarter', 'callBack': () => this.formatShortValues([this.getStartQuarter(-1).getTime(), this.getEndQuarter(-1).getTime()]) },
+      { 'text': 'dynamic_year.last', 'callBack': () => this.formatShortValues([this.getStartYear(-1).getTime(), this.getEndYear(-1).getTime()]) }
+    ]
+  }
 }
 const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl

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

@@ -29,6 +29,7 @@ const dialogPanel = {
           { value: 0, text: 'dynamic_time.today' },
           { value: 1, text: 'dynamic_time.yesterday' },
           { value: 2, text: 'dynamic_time.firstOfMonth' },
+          { value: 4, text: 'dynamic_time.firstOfYear' },
           { value: 3, text: 'dynamic_time.custom' }
         ],
         custom: {
@@ -101,6 +102,9 @@ class TimeDateServiceImpl extends WidgetService {
   defaultSetting() {
     return dialogPanel.options.attrs.default
   }
+  customValue() {
+    return 3
+  }
   dynamicDateFormNow(element) {
     if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
 
@@ -119,6 +123,11 @@ class TimeDateServiceImpl extends WidgetService {
       var nowYear = now.getFullYear()
       return new Date(nowYear, nowMonth, 1).getTime()
     }
+    if (element.options.attrs.default.dkey === 4) {
+      const now = new Date()
+      const nowYear = now.getFullYear()
+      return new Date(nowYear, 0, 1).getTime()
+    }
 
     if (element.options.attrs.default.dkey === 3) {
       const dynamicPrefix = parseInt(element.options.attrs.default.dynamicPrefix)

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

@@ -27,6 +27,7 @@ const dialogPanel = {
           { value: 0, text: 'dynamic_month.current' },
           { value: 1, text: 'dynamic_month.last' },
           { value: 2, text: 'dynamic_month.firstOfYear' },
+          { value: 4, text: 'dynamic_month.sameMonthLastYear' },
           { value: 3, text: 'dynamic_time.custom' }
         ],
         custom: {
@@ -91,6 +92,9 @@ class TimeMonthServiceImpl extends WidgetService {
   defaultSetting() {
     return dialogPanel.options.attrs.default
   }
+  customValue() {
+    return 3
+  }
   dynamicDateFormNow(element) {
     const now = new Date()
     const nowMonth = now.getMonth()
@@ -108,6 +112,9 @@ class TimeMonthServiceImpl extends WidgetService {
     if (element.options.attrs.default.dkey === 2) {
       return new Date(nowYear, 0, 1).getTime()
     }
+    if (element.options.attrs.default.dkey === 4) {
+      return new Date(nowYear - 1, nowMonth, 1).getTime()
+    }
 
     if (element.options.attrs.default.dkey === 3) {
       const dynamicPrefix = parseInt(element.options.attrs.default.dynamicPrefix)

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

@@ -77,6 +77,9 @@ class TimeYearServiceImpl extends WidgetService {
     const value = JSON.parse(JSON.stringify(dialogPanel))
     return value
   }
+  customValue() {
+    return 2
+  }
 
   initDrawPanel() {
     const value = JSON.parse(JSON.stringify(drawPanel))

frontend/src/lang/en.js

@@ -2288,6 +2288,7 @@ export default {
     today: 'Today',
     yesterday: 'Yesterday',
     firstOfMonth: 'Month Beginning',
+    firstOfYear: 'Year Beginning',
     custom: 'Custom',
     date: 'date',
     week: 'week',
@@ -2299,8 +2300,10 @@ export default {
     set: 'Set',
 
     cweek: 'This Week',
+    lweek: 'Last Week',
     cmonth: 'This Month',
     cquarter: 'This Quarter',
+    lquarter: 'Last Quarter',
     cyear: 'This Year',
     openHomePage: 'Show Home Page'
   },

frontend/src/lang/tw.js

@@ -2298,6 +2298,7 @@ export default {
     today: '今天',
     yesterday: '昨天',
     firstOfMonth: '月初',
+    firstOfYear: '年初',
     custom: '自定義',
     date: '日',
     week: '周',
@@ -2309,8 +2310,10 @@ export default {
     set: '設置',
 
     cweek: '本周',
+    lweek: '上周',
     cmonth: '本月',
     cquarter: '本季',
+    lquarter: '上季',
     cyear: '本年'
   },
   dynamic_year: {

frontend/src/lang/zh.js

@@ -2310,6 +2310,7 @@ export default {
     today: '今天',
     yesterday: '昨天',
     firstOfMonth: '月初',
+    firstOfYear: '年初',
     custom: '自定义',
     date: '日',
     week: '周',
@@ -2321,8 +2322,10 @@ export default {
     set: '设置',
 
     cweek: '本周',
+    lweek: '上周',
     cmonth: '本月',
     cquarter: '本季',
+    lquarter: '上季',
     cyear: '本年'
   },
   dynamic_year: {
@@ -2336,7 +2339,8 @@ export default {
     dynamic: '动态年月',
     current: '当月',
     last: '上月',
-    firstOfYear: '当年首月'
+    firstOfYear: '当年首月',
+    sameMonthLastYear: '去年同月'
   },
   wizard: {
     welcome_title: '欢迎使用DataEase',

frontend/src/styles/index.scss

@@ -994,6 +994,7 @@ div:focus {
 }
 
 
+
 .de-form-item { 
   .el-form-item__label {
     width: 100% !important;
@@ -1168,3 +1169,6 @@ div:focus {
   color: var(--deTextPrimary, #1F2329) !important;
 }
 
+.date-filter-poper>.el-scrollbar>.el-select-dropdown__wrap {
+  max-height: 230px !important;
+}

frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="element" class="default-value-div">
-    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
+    <el-form ref="form" :model="element.options.attrs.default" label-width="100px" size="mini">
 
       <el-form-item :label="$t('dynamic_time.set_default')">
         <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
@@ -22,6 +22,7 @@
           v-model="element.options.attrs.default.dkey"
           placeholder=""
           class="relative-time"
+          popper-class="date-filter-poper"
           @change="dkeyChange"
         >
           <el-option
@@ -38,7 +39,7 @@
       <div class="inline">
 
         <el-form-item
-          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === customValue"
           label=""
         >
           <el-input-number
@@ -52,7 +53,7 @@
         </el-form-item>
 
         <el-form-item
-          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === customValue"
           label=""
           class="no-label-item"
         >
@@ -74,7 +75,7 @@
         </el-form-item>
 
         <el-form-item
-          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === customValue"
           label=""
           class="no-label-item"
         >
@@ -147,7 +148,7 @@ export default {
       return widget.isTimeWidget && widget.isTimeWidget()
     },
     componentType() {
-      let result = 'date'
+      let result = this.element.options.attrs.type
       if (this.isTimeWidget && this.element.options.attrs.showTime) {
         result = 'datetime'
       }
@@ -158,7 +159,14 @@ export default {
       if (this.isTimeWidget && this.element.options.attrs.showTime && this.element.options.attrs.accuracy) {
         return result + ' ' + this.element.options.attrs.accuracy
       }
-      return result
+      return null
+    },
+    customValue() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      if (widget.customValue) {
+        return widget.customValue()
+      }
+      return 2
     }
   },
   created() {

frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="element">
-    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
+    <el-form ref="form" :model="element.options.attrs.default" label-width="100px" size="mini">
 
       <el-form-item :label="$t('dynamic_time.set_default')">
         <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
@@ -15,6 +15,7 @@
           v-model="element.options.attrs.default.dkey"
           placeholder=""
           class="relative-time"
+          popper-class="date-filter-poper"
           @change="dkeyChange"
         >
           <el-option :label="$t('dynamic_time.cweek')" :value="0" />
@@ -22,6 +23,11 @@
           <el-option :label="$t('dynamic_time.cquarter')" :value="2" />
           <el-option :label="$t('dynamic_time.cyear')" :value="3" />
 
+          <el-option :label="$t('dynamic_time.lweek')" :value="5" />
+          <el-option :label="$t('dynamic_month.last')" :value="6" />
+          <el-option :label="$t('dynamic_time.lquarter')" :value="7" />
+          <el-option :label="$t('dynamic_year.last')" :value="8" />
+
           <el-option :label="$t('dynamic_time.custom')" :value="4" />
         </el-select>