feat: 年份、年月组件增加动态时间

frontend/src/components/canvas/utils/utils.js

@@ -3,6 +3,10 @@ import {
   HYPERLINKS
 } from '@/components/canvas/custom-component/component-list'
 
+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
+
 export function deepCopy(target) {
   if (typeof target === 'object') {
     const result = Array.isArray(target) ? [] : {}
@@ -62,25 +66,10 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
 export function panelInit(componentDatas) {
   componentDatas.forEach(item => {
     if (item.component && item.component === 'de-date') {
-      if (item.serviceName === 'timeDateWidget' && item.options.attrs && !item.options.attrs.default) {
-        item.options.attrs.default = {
-          isDynamic: false,
-          dkey: 0,
-          dynamicPrefix: 1,
-          dynamicInfill: 'day',
-          dynamicSuffix: 'before'
-        }
-      }
-      if (item.serviceName === 'timeDateRangeWidget' && item.options.attrs && !item.options.attrs.default) {
-        item.options.attrs.default = {
-          isDynamic: false,
-          dkey: 0,
-          sDynamicPrefix: 1,
-          sDynamicInfill: 'day',
-          sDynamicSuffix: 'before',
-          eDynamicPrefix: 1,
-          eDynamicInfill: 'day',
-          eDynamicSuffix: 'after'
+      if (item.options.attrs && !item.options.attrs.default) {
+        const widget = ApplicationContext.getService(item.serviceName)
+        if (widget && widget.defaultSetting) {
+          item.options.attrs.default = widget.defaultSetting()
         }
       }
     }

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

@@ -72,9 +72,7 @@ export default {
       this.setCondition()
     },
     'defaultValueStr': function(value, old) {
-      if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') &&
-          this.element.options.attrs.default.isDynamic) {
-        // 如果设置了动态时间 不做任何操作
+      if (this.element.options.attrs.default.isDynamic) {
         return
       }
       if (value === old) return
@@ -82,13 +80,10 @@ export default {
       this.dateChange(value)
     },
     'defaultoptions': function(val, old) {
-      // console.log('default chaneg')
-      if (this.element.serviceName !== 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') {
-        if (!this.element.options.attrs.default.isDynamic) {
-          this.values = this.fillValueDerfault()
-          this.dateChange(this.values)
-          return
-        }
+      if (!this.element.options.attrs.default.isDynamic) {
+        this.values = this.fillValueDerfault()
+        this.dateChange(this.values)
+        return
       }
       if (val === old) return
       const widget = ApplicationContext.getService(this.element.serviceName)
@@ -97,9 +92,7 @@ export default {
     }
   },
   created() {
-    if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') && this
-      .element.options.attrs.default && this.element.options
-      .attrs.default.isDynamic) {
+    if (this.element.options.attrs.default && this.element.options.attrs.default.isDynamic) {
       if (this.element.options.attrs.default) {
         const widget = ApplicationContext.getService(this.element.serviceName)
         this.values = widget.dynamicDateFormNow(this.element)

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

@@ -80,6 +80,9 @@ class TimeDateRangeServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
   getStartDayOfWeek() {
     var now = new Date() // 当前日期
     var nowDayOfWeek = now.getDay()

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

@@ -21,7 +21,23 @@ const dialogPanel = {
         dkey: 0,
         dynamicPrefix: 1,
         dynamicInfill: 'day',
-        dynamicSuffix: 'before'
+        dynamicSuffix: 'before',
+        radioOptions: [{ value: false, text: 'dynamic_time.fix' }, { value: true, text: 'dynamic_time.dynamic' }],
+        relativeOptions: [
+          { value: 0, text: 'dynamic_time.today' },
+          { value: 1, text: 'dynamic_time.yesterday' },
+          { value: 2, text: 'dynamic_time.firstOfMonth' },
+          { value: 3, text: 'dynamic_time.custom' }
+        ],
+        custom: {
+          unitsOptions: [
+            { value: 'day', text: 'dynamic_time.date' },
+            { value: 'week', text: 'dynamic_time.week' },
+            { value: 'month', text: 'dynamic_time.month' },
+            { value: 'year', text: 'dynamic_time.year' }
+          ],
+          limits: [1, 12]
+        }
       }
     },
     value: ''
@@ -75,6 +91,9 @@ class TimeDateServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
   dynamicDateFormNow(element) {
     if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
 

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

@@ -13,7 +13,27 @@ const dialogPanel = {
       placeholder: 'deyearmonth.placeholder',
       viewIds: [],
       fieldId: '',
-      dragItems: []
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        dynamicPrefix: 1,
+        dynamicInfill: 'month',
+        dynamicSuffix: 'before',
+        radioOptions: [{ value: false, text: 'dynamic_month.fix' }, { value: true, text: 'dynamic_month.dynamic' }],
+        relativeOptions: [
+          { value: 0, text: 'dynamic_month.current' },
+          { value: 1, text: 'dynamic_month.last' },
+          { value: 2, text: 'dynamic_month.firstOfYear' },
+          { value: 3, text: 'dynamic_time.custom' }
+        ],
+        custom: {
+          unitsOptions: [
+            { value: 'month', text: 'dynamic_time.month' }
+          ],
+          limits: [0, 10]
+        }
+      }
     },
     value: ''
   },
@@ -64,6 +84,39 @@ class TimeMonthServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
+  dynamicDateFormNow(element) {
+    const now = new Date()
+    const nowMonth = now.getMonth()
+    const nowYear = now.getFullYear()
+    const nowDate = now.getDate()
+    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 Date.now()
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      return new Date(nowYear, nowMonth - 1, nowDate).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      return new Date(nowYear, 0, 1).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 3) {
+      const dynamicPrefix = parseInt(element.options.attrs.default.dynamicPrefix)
+      const dynamicSuffix = element.options.attrs.default.dynamicSuffix
+
+      if (dynamicSuffix === 'before') {
+        return new Date(nowYear, nowMonth - dynamicPrefix, nowDate).getTime()
+      } else {
+        return new Date(nowYear, nowMonth + dynamicPrefix, nowDate).getTime()
+      }
+    }
+  }
 }
 const timeMonthServiceImpl = new TimeMonthServiceImpl()
 export default timeMonthServiceImpl

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

@@ -13,7 +13,26 @@ const dialogPanel = {
       placeholder: 'deyear.placeholder',
       viewIds: [],
       fieldId: '',
-      dragItems: []
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        dynamicPrefix: 1,
+        dynamicInfill: 'year',
+        dynamicSuffix: 'before',
+        radioOptions: [{ value: false, text: 'dynamic_year.fix' }, { value: true, text: 'dynamic_year.dynamic' }],
+        relativeOptions: [
+          { value: 0, text: 'dynamic_year.current' },
+          { value: 1, text: 'dynamic_year.last' },
+          { value: 2, text: 'dynamic_time.custom' }
+        ],
+        custom: {
+          unitsOptions: [
+            { value: 'year', text: 'dynamic_time.year' }
+          ],
+          limits: [0, 10]
+        }
+      }
     },
     value: ''
   },
@@ -65,6 +84,36 @@ class TimeYearServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  defaultSetting() {
+    return dialogPanel.options.attrs.default
+  }
+  dynamicDateFormNow(element) {
+    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 Date.now()
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      const now = new Date()
+      const nowYear = now.getFullYear()
+      const nowMonth = now.getMonth()
+      const nowDate = now.getDate()
+      return new Date(nowYear - 1, nowMonth, nowDate).getTime()
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      const dynamicPrefix = parseInt(element.options.attrs.default.dynamicPrefix)
+      const dynamicSuffix = element.options.attrs.default.dynamicSuffix
+
+      const now = new Date()
+      const nowMonth = now.getMonth()
+      const nowYear = now.getFullYear()
+      const nowDate = now.getDate()
+
+      return new Date(dynamicSuffix === 'before' ? (nowYear - dynamicPrefix) : (nowYear + dynamicPrefix), nowMonth, nowDate).getTime()
+    }
+  }
 }
 const timeYearServiceImpl = new TimeYearServiceImpl()
 export default timeYearServiceImpl

frontend/src/lang/en.js

@@ -1758,5 +1758,18 @@ export default {
     cmonth: 'This Month',
     cquarter: 'This Quarter',
     cyear: 'This Year'
+  },
+  dynamic_year: {
+    fix: 'Fixed Year',
+    dynamic: 'Dynamic Year',
+    current: 'This Year',
+    last: 'Last Year'
+  },
+  dynamic_month: {
+    fix: 'Fixed Month',
+    dynamic: 'Dynamic Month',
+    current: 'This Month',
+    last: 'Last Month',
+    firstOfYear: 'First month of this year'
   }
 }

frontend/src/lang/tw.js

@@ -1770,5 +1770,18 @@ export default {
     cmonth: '本月',
     cquarter: '本季',
     cyear: '本年'
+  },
+  dynamic_year: {
+    fix: '固定年份',
+    dynamic: '動態年份',
+    current: '當年',
+    last: '去年'
+  },
+  dynamic_month: {
+    fix: '固定年月',
+    dynamic: '動態年月',
+    current: '本月',
+    last: '上月',
+    firstOfYear: '當年首月'
   }
 }

frontend/src/lang/zh.js

@@ -1780,5 +1780,19 @@ export default {
     cmonth: '本月',
     cquarter: '本季',
     cyear: '本年'
+  },
+  dynamic_year: {
+    fix: '固定年份',
+    dynamic: '动态年份',
+    current: '当年',
+    last: '去年'
+  },
+  dynamic_month: {
+    fix: '固定年月',
+    dynamic: '动态年月',
+    current: '当月',
+    last: '上月',
+    firstOfYear: '当年首月'
   }
+
 }

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

@@ -4,8 +4,14 @@
 
       <el-form-item :label="$t('dynamic_time.set_default')">
         <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
-          <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
-          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
+
+          <el-radio
+            v-for="(item, index) in defaultSetting.radioOptions"
+            :key="index"
+            :label="item.value"
+          >
+            {{ $t(item.text) }}
+          </el-radio>
         </el-radio-group>
       </el-form-item>
 
@@ -17,10 +23,13 @@
           class="relative-time"
           @change="dkeyChange"
         >
-          <el-option :label="$t('dynamic_time.today')" :value="0" />
-          <el-option :label="$t('dynamic_time.yesterday')" :value="1" />
-          <el-option :label="$t('dynamic_time.firstOfMonth')" :value="2" />
-          <el-option :label="$t('dynamic_time.custom')" :value="3" />
+          <el-option
+            v-for="(item, index) in defaultSetting.relativeOptions"
+            :key="item.value + index"
+            :label="$t(item.text)"
+            :value="item.value"
+          />
+
         </el-select>
 
       </el-form-item>
@@ -28,7 +37,7 @@
       <div class="inline">
 
         <el-form-item
-          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3"
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
           label=""
         >
           <el-input
@@ -42,7 +51,7 @@
         </el-form-item>
 
         <el-form-item
-          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3"
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
           label=""
           class="no-label-item"
         >
@@ -50,17 +59,21 @@
             v-model="element.options.attrs.default.dynamicInfill"
             size="mini"
             placeholder=""
+            :disabled="defaultSetting.custom && defaultSetting.custom.unitsOptions && defaultSetting.custom.unitsOptions.length === 1"
             @change="dynamicInfillChange"
           >
-            <el-option :label="$t('dynamic_time.date')" value="day" />
-            <el-option :label="$t('dynamic_time.week')" value="week" />
-            <el-option :label="$t('dynamic_time.month')" value="month" />
-            <el-option :label="$t('dynamic_time.year')" value="year" />
+            <el-option
+              v-for="(item, index) in defaultSetting.custom.unitsOptions"
+              :key="item.value + index"
+              :label="$t(item.text)"
+              :value="item.value"
+            />
+
           </el-select>
         </el-form-item>
 
         <el-form-item
-          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3"
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === (defaultSetting.relativeOptions.length - 1)"
           label=""
           class="no-label-item"
         >
@@ -79,7 +92,13 @@
       </div>
 
       <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
-        <el-date-picker v-model="dval" type="date" disabled placeholder="" class="relative-time" />
+        <el-date-picker
+          v-model="dval"
+          :type="element.options.attrs.type"
+          disabled
+          placeholder=""
+          class="relative-time"
+        />
       </el-form-item>
 
       <el-form-item v-else :label="$t('dynamic_time.set')">
@@ -115,6 +134,13 @@ export default {
       dval: null
     }
   },
+  computed: {
+    defaultSetting() {
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      const setting = widget.defaultSetting()
+      return setting
+    }
+  },
   created() {
     this.setDval()
   },

frontend/src/views/panel/filter/filterMain/FilterFoot.vue

@@ -3,11 +3,11 @@
     <el-col :span="24">
       <div class="filter-content">
         <el-card
-          v-if="element.serviceName && element.serviceName !== 'timeDateWidget' && element.serviceName !== 'timeDateRangeWidget'"
+          v-if="element.component && element.component !== 'de-date'"
           class="box-card"
         >
           <div style="margin-bottom: 10px;">
-            <span>默认值设置</span>
+            <span>{{ $t('dynamic_time.set_default') }}</span>
           </div>
           <div class="custom-component-class">
             <component
@@ -22,13 +22,13 @@
 
         </el-card>
 
-        <el-card v-if="element.serviceName && element.serviceName === 'timeDateWidget'" class="box-card">
-          <de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
+        <el-card v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName !== 'timeDateRangeWidget'" class="box-card">
+          <de-date-default v-if="element.component === 'de-date' && element.serviceName !== 'timeDateRangeWidget'" :element="element" />
         </el-card>
 
-        <el-card v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
+        <el-card v-if="element.component && element.component === 'de-date' && element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
           <de-date-range-default
-            v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'"
+            v-if="element.component === 'de-date' && element.serviceName === 'timeDateRangeWidget'"
             :element="element"
           />
         </el-card>