feat(查询组件): 日期筛选支持按周,按月范围过滤

This commit is contained in:
dataeaseShu 2024-06-07 13:57:28 +08:00
parent 86b53caa81
commit 3100b24e45
3 changed files with 166 additions and 0 deletions

View File

@ -5,6 +5,7 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import type { ManipulateType } from 'dayjs'
import { type TimeRange } from './time-format'
import dayjs from 'dayjs'
import { useShortcuts } from './shortcuts'
import { getThisStart, getLastStart, getAround } from './time-format-dayjs'
import VanPopup from 'vant/es/popup'
import VanDatePicker from 'vant/es/date-picker'
@ -80,6 +81,11 @@ watch(
})
}
)
const callback = () => {
return true
}
const { shortcuts } = useShortcuts(callback)
watch(
() => config.value.id,
@ -376,6 +382,7 @@ const formatDate = computed(() => {
@calendar-change="calendarChange"
:format="formatDate"
v-if="multiple"
:shortcuts="shortcuts"
@change="handleValueChange"
:range-separator="$t('cron.to')"
:start-placeholder="$t('datasource.start_time')"

View File

@ -0,0 +1,119 @@
import { useI18n } from '@/hooks/web/useI18n'
import dayjs from 'dayjs'
import type { ManipulateType, QUnitType } from 'dayjs'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
type ManipulateTypeWithQuarter = ManipulateType | 'quarter'
const { t } = useI18n()
dayjs.extend(quarterOfYear)
function getThisStart(val = 'month' as ManipulateTypeWithQuarter) {
return new Date(dayjs().startOf(val).format('YYYY/MM/DD HH:mm:ss'))
}
function getThisEnd(val = 'month' as ManipulateTypeWithQuarter) {
return new Date(dayjs().endOf(val).format('YYYY/MM/DD HH:mm:ss'))
}
function getLastStart(val = 'month' as ManipulateTypeWithQuarter) {
return new Date(
dayjs()
.subtract(1, val as QUnitType)
.startOf(val)
.format('YYYY/MM/DD HH:mm:ss')
)
}
function getLastEnd(val = 'month' as ManipulateTypeWithQuarter) {
return new Date(
dayjs()
.subtract(1, val as QUnitType)
.endOf(val)
.format('YYYY/MM/DD HH:mm:ss')
)
}
// eslint-disable-next-line
let callback: Function = () => {}
const shortcuts = [
{
text: 'dynamic_time.cweek',
onClick: ({ attrs, slots, emit }) => {
if (
callback([
new Date(+new Date(getThisStart('week')) + 24 * 1000 * 3600),
new Date(+new Date(getThisEnd('week')) + 24 * 1000 * 3600)
])
)
return
emit('pick', [
dayjs(new Date(+new Date(getThisStart('week')) + 24 * 1000 * 3600)),
dayjs(new Date(+new Date(getThisEnd('week')) + 24 * 1000 * 3600))
])
}
},
{
text: 'dynamic_month.current',
value: () => {
return [getThisStart('month'), getThisEnd('month')]
},
onClick: () => {
console.log(113)
}
},
{
text: 'dynamic_time.cquarter',
value: () => {
return [getThisStart('quarter'), getThisEnd('quarter')]
},
onClick: () => {
console.log(113)
}
},
{
text: 'dynamic_year.current',
value: () => {
return [getThisStart('year'), getThisEnd('year')]
}
},
{
text: 'dynamic_time.lweek',
value: () => {
return [
new Date(+new Date(getLastStart('week')) + 24 * 1000 * 3600),
new Date(+new Date(getLastEnd('week')) + 24 * 1000 * 3600)
]
}
},
{
text: 'dynamic_month.last',
value: () => {
return [getLastStart('month'), getLastEnd('month')]
}
},
{
text: 'dynamic_time.lquarter',
value: () => {
return [getLastStart('quarter'), getLastEnd('quarter')]
}
},
{
text: 'dynamic_year.last',
value: () => {
return [getLastStart('year'), getLastEnd('year')]
}
}
]
shortcuts.forEach(ele => {
ele.text = t(ele.text)
})
const useShortcuts = cb => {
callback = cb
return {
shortcuts
}
}
export { useShortcuts }

View File

@ -50,6 +50,46 @@ export default {
filter_condition: '筛选条件',
no_auth_tips: '缺少菜单权限请联系管理员'
},
dynamic_time: {
set_default: '设置默认值',
fix: '固定时间',
dynamic: '动态时间',
relative: '相对当前',
today: '今天',
yesterday: '昨天',
firstOfMonth: '月初',
firstOfYear: '年初',
custom: '自定义',
date: '日',
week: '周',
month: '月',
year: '年',
before: '前',
after: '后',
preview: '预览',
set: '设置',
cweek: '本周',
lweek: '上周',
cmonth: '本月',
cquarter: '本季',
lquarter: '上季',
cyear: '本年'
},
dynamic_year: {
fix: '固定年份',
dynamic: '动态年份',
current: '今年',
last: '去年'
},
dynamic_month: {
fix: '固定年月',
dynamic: '动态年月',
current: '当月',
last: '上月',
firstOfYear: '当年首月',
sameMonthLastYear: '去年同月'
},
data_export: {
export_center: '数据导出中心',
export_info: '查看进度进行下载',