forked from github/dataease
feat(查询组件): 日期范围组件，默认值没有本月、本年等 #11283
This commit is contained in:
dataeaseShu
parent
4287ed620b
commit
fc51f531ed
@ -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
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user