feat(查询组件): 日期范围组件，默认值没有本月、本年等 #11283

core/core-frontend/src/custom-component/v-query/ConditionDefaultConfiguration.vue

@@ -156,6 +156,85 @@ const relativeToCurrentList = computed(() => {
   ]
 })
 
+const relativeToCurrentListRange = computed(() => {
+  let list = []
+  if (!curComponent.value) return list
+  switch (curComponent.value.timeGranularityMultiple) {
+    case 'yearrange':
+      list = [
+        {
+          label: '今年',
+          value: 'thisYear'
+        },
+        {
+          label: '去年',
+          value: 'lastYear'
+        }
+      ]
+      break
+    case 'monthrange':
+      list = [
+        {
+          label: '本月',
+          value: 'thisMonth'
+        },
+        {
+          label: '上月',
+          value: 'lastMonth'
+        },
+        {
+          label: '最近 3 个 月',
+          value: 'LastThreeMonths'
+        },
+        {
+          label: '最近 6 个 月',
+          value: 'LastSixMonths'
+        },
+        {
+          label: '最近 12 个 月',
+          value: 'LastTwelveMonths'
+        }
+      ]
+      break
+    case 'daterange':
+    case 'datetimerange':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '最近 3 天',
+          value: 'LastThreeDays'
+        },
+        {
+          label: '月初至今',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初至今',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+
+    default:
+      break
+  }
+
+  return [
+    ...list,
+    {
+      label: '自定义',
+      value: 'custom'
+    }
+  ]
+})
+
 const aroundList = [
   {
     label: '前',
@@ -405,8 +484,22 @@ defineExpose({
         </div>
       </template>
       <template v-else-if="dynamicTime && curComponent.displayType === '7'">
+        <div class="setting">
+          <div class="setting-label">相对当前</div>
+          <div class="setting-value select">
+            <el-select @focus="handleDialogClick" v-model="curComponent.relativeToCurrentRange">
+              <el-option
+                v-for="item in relativeToCurrentListRange"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </div>
+        </div>
         <div
           class="setting"
+          v-if="curComponent.relativeToCurrentRange === 'custom'"
           :class="
             ['yearrange', 'monthrange', 'daterange'].includes(
               curComponent.timeGranularityMultiple
@@ -437,6 +530,7 @@ defineExpose({
         </div>
         <div
           class="setting"
+          v-if="curComponent.relativeToCurrentRange === 'custom'"
           :class="
             ['yearrange', 'monthrange', 'daterange'].includes(
               curComponent.timeGranularityMultiple

core/core-frontend/src/custom-component/v-query/DynamicTimeRange.vue

@@ -3,6 +3,7 @@ import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
 import { Calendar } from '@element-plus/icons-vue'
 import { type DatePickType } from 'element-plus-secondary'
 import { getCustomTime } from './time-format'
+import { getCustomRange } from './time-format-dayjs'
 interface SelectConfig {
   timeType: string
   timeGranularityMultiple: DatePickType
@@ -10,6 +11,7 @@ interface SelectConfig {
   selectValue: [Date, Date]
   defaultValueCheck: boolean
   id: string
+  relativeToCurrentRange: string
   timeNum: number
   relativeToCurrentType: string
   around: string
@@ -37,6 +39,7 @@ const props = defineProps({
         defaultValueCheck: false,
         timeGranularity: 'date',
         timeNumRange: 0,
+        relativeToCurrentRange: 'custom',
         relativeToCurrentTypeRange: 'year',
         aroundRange: 'f',
         arbitraryTimeRange: new Date()
@@ -53,6 +56,7 @@ const timeConfig = computed(() => {
     relativeToCurrentType,
     timeGranularityMultiple,
     around,
+    relativeToCurrentRange,
     defaultValueCheck,
     arbitraryTime,
     timeGranularity,
@@ -65,6 +69,7 @@ const timeConfig = computed(() => {
     timeNum,
     relativeToCurrentType,
     around,
+    relativeToCurrentRange,
     timeGranularityMultiple,
     defaultValueCheck,
     arbitraryTime,
@@ -113,6 +118,7 @@ const init = () => {
     timeNumRange,
     relativeToCurrentTypeRange,
     aroundRange,
+    relativeToCurrentRange,
     arbitraryTimeRange
   } = timeConfig.value
   if (!defaultValueCheck) {
@@ -120,6 +126,11 @@ const init = () => {
     return
   }
 
+  if (relativeToCurrentRange !== 'custom') {
+    selectValue.value = getCustomRange(relativeToCurrentRange)
+    return
+  }
+
   const startTime = getCustomTime(
     timeNum,
     relativeToCurrentType,

core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue

@@ -996,6 +996,7 @@ const parameterCompletion = () => {
     parametersEnd: null,
     relativeToCurrent: 'custom',
     timeNum: 0,
+    relativeToCurrentRange: 'custom',
     relativeToCurrentType: 'year',
     around: 'f',
     arbitraryTime: new Date(),
@@ -1209,6 +1210,85 @@ const relativeToCurrentList = computed(() => {
   ]
 })
 
+const relativeToCurrentListRange = computed(() => {
+  let list = []
+  if (!curComponent.value) return list
+  switch (curComponent.value.timeGranularityMultiple) {
+    case 'yearrange':
+      list = [
+        {
+          label: '今年',
+          value: 'thisYear'
+        },
+        {
+          label: '去年',
+          value: 'lastYear'
+        }
+      ]
+      break
+    case 'monthrange':
+      list = [
+        {
+          label: '本月',
+          value: 'thisMonth'
+        },
+        {
+          label: '上月',
+          value: 'lastMonth'
+        },
+        {
+          label: '最近 3 个 月',
+          value: 'LastThreeMonths'
+        },
+        {
+          label: '最近 6 个 月',
+          value: 'LastSixMonths'
+        },
+        {
+          label: '最近 12 个 月',
+          value: 'LastTwelveMonths'
+        }
+      ]
+      break
+    case 'daterange':
+    case 'datetimerange':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '最近 3 天',
+          value: 'LastThreeDays'
+        },
+        {
+          label: '月初至今',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初至今',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+
+    default:
+      break
+  }
+
+  return [
+    ...list,
+    {
+      label: '自定义',
+      value: 'custom'
+    }
+  ]
+})
+
 const timeGranularityChange = (val: string) => {
   if (
     ['year', 'month', 'date', 'datetime'].indexOf(val) <
@@ -1236,6 +1316,10 @@ const timeGranularityMultipleChange = (val: string) => {
     curComponent.value.relativeToCurrentTypeRange = 'year'
   }
 
+  if (curComponent.value.relativeToCurrentRange !== 'custom') {
+    curComponent.value.relativeToCurrentRange = relativeToCurrentListRange.value[0]?.value
+  }
+
   curComponent.value.timeRange = {
     intervalType: 'none',
     dynamicWindow: false,
@@ -1243,6 +1327,7 @@ const timeGranularityMultipleChange = (val: string) => {
     regularOrTrends: 'fixed',
     regularOrTrendsValue: '',
     relativeToCurrent: 'custom',
+    relativeToCurrentRange: 'custom',
     timeNum: 0,
     relativeToCurrentType: 'year',
     around: 'f',

core/core-frontend/src/custom-component/v-query/time-format-dayjs.ts

@@ -20,4 +20,46 @@ function getAround(val = 'month' as ManipulateType, type = 'add', num = 0) {
   return new Date(dayjs()[type](num, val).startOf('day').format('YYYY/MM/DD HH:mm:ss'))
 }
 
-export { getThisStart, getThisEnd, getLastStart, getLastEnd, getAround }
+function getCustomRange(relativeToCurrentRange: string): [Date, Date] {
+  switch (relativeToCurrentRange) {
+    case 'thisYear':
+      return [getThisStart('year'), getThisEnd('year')]
+    case 'lastYear':
+      return [getLastStart('year'), getLastEnd('year')]
+    case 'thisMonth':
+      return [getThisStart('month'), getThisEnd('month')]
+    case 'lastMonth':
+      return [getLastStart('month'), getLastEnd('month')]
+    case 'LastThreeMonths':
+      return [
+        new Date(dayjs().subtract(3, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'LastSixMonths':
+      return [
+        new Date(dayjs().subtract(6, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'LastTwelveMonths':
+      return [
+        new Date(dayjs().subtract(12, 'month').startOf('month').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'today':
+      return [getThisStart('day'), getThisEnd('day')]
+    case 'yesterday':
+      return [getLastStart('day'), getLastEnd('day')]
+    case 'LastThreeDays':
+      return [
+        new Date(dayjs().subtract(3, 'day').startOf('day').format('YYYY/MM/DD HH:mm:ss')),
+        getThisEnd('day')
+      ]
+    case 'monthBeginning':
+      return [getThisStart('month'), getThisEnd('day')]
+    case 'yearBeginning':
+      return [getThisStart('year'), getThisEnd('day')]
+    default:
+      return [new Date(), new Date()]
+  }
+}
+export { getThisStart, getThisEnd, getLastStart, getLastEnd, getAround, getCustomRange }