forked from github/dataease
feat(查询组件): 日期筛选支持按周,按月范围过滤
This commit is contained in:
parent
86b53caa81
commit
3100b24e45
@ -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')"
|
||||
|
119
core/core-frontend/src/custom-component/v-query/shortcuts.ts
Normal file
119
core/core-frontend/src/custom-component/v-query/shortcuts.ts
Normal 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 }
|
@ -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: '查看进度,进行下载',
|
||||
|
Loading…
Reference in New Issue
Block a user