112 lines
2.8 KiB
Vue
112 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<div class="time-period-search">
|
||
|
|
<el-select class="time-period-search__unit" :model-value="unit" @update:model-value="handleUnitChange">
|
||
|
|
<el-option v-for="item in timePeriodUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||
|
|
</el-select>
|
||
|
|
|
||
|
|
<el-button
|
||
|
|
class="time-period-search__button"
|
||
|
|
:icon="ArrowLeft"
|
||
|
|
:title="`上一个${unitLabel}`"
|
||
|
|
@click="shiftPeriod(-1)"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<el-date-picker
|
||
|
|
class="time-period-search__picker"
|
||
|
|
:model-value="baseDate"
|
||
|
|
:type="getTimePeriodPickerType(props.unit)"
|
||
|
|
:format="getTimePeriodPickerFormat(props.unit)"
|
||
|
|
:clearable="false"
|
||
|
|
:editable="false"
|
||
|
|
:placeholder="`选择${unitLabel}`"
|
||
|
|
@update:model-value="handleDateChange"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<el-button
|
||
|
|
class="time-period-search__button"
|
||
|
|
:icon="ArrowRight"
|
||
|
|
:title="`下一个${unitLabel}`"
|
||
|
|
@click="shiftPeriod(1)"
|
||
|
|
/>
|
||
|
|
|
||
|
|
<el-button
|
||
|
|
class="time-period-search__button"
|
||
|
|
:icon="Clock"
|
||
|
|
:title="`当前${unitLabel}`"
|
||
|
|
@click="setCurrentPeriod"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { computed } from 'vue'
|
||
|
|
import { ArrowLeft, ArrowRight, Clock } from '@element-plus/icons-vue'
|
||
|
|
import {
|
||
|
|
getTimePeriodPickerFormat,
|
||
|
|
getTimePeriodPickerType,
|
||
|
|
resolveTimePeriodUnitLabel,
|
||
|
|
shiftTimePeriod,
|
||
|
|
timePeriodUnitOptions,
|
||
|
|
type TimePeriodUnit
|
||
|
|
} from './timePeriod'
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'TimePeriodSearch'
|
||
|
|
})
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
unit: TimePeriodUnit
|
||
|
|
modelValue: Date | string | number
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
'update:unit': [value: TimePeriodUnit]
|
||
|
|
'update:modelValue': [value: Date]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const baseDate = computed(() => new Date(props.modelValue))
|
||
|
|
const unitLabel = computed(() => resolveTimePeriodUnitLabel(props.unit))
|
||
|
|
|
||
|
|
const handleUnitChange = (value: TimePeriodUnit) => {
|
||
|
|
emit('update:unit', value)
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleDateChange = (value: Date | string | number | null) => {
|
||
|
|
if (!value) return
|
||
|
|
emit('update:modelValue', new Date(value))
|
||
|
|
}
|
||
|
|
|
||
|
|
const shiftPeriod = (offset: number) => {
|
||
|
|
emit('update:modelValue', shiftTimePeriod(props.unit, baseDate.value, offset))
|
||
|
|
}
|
||
|
|
|
||
|
|
const setCurrentPeriod = () => {
|
||
|
|
emit('update:modelValue', new Date())
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.time-period-search {
|
||
|
|
display: flex;
|
||
|
|
width: 100%;
|
||
|
|
align-items: center;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-period-search__unit {
|
||
|
|
width: 56px;
|
||
|
|
flex: 0 0 56px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-period-search__picker {
|
||
|
|
width: 112px;
|
||
|
|
flex: 0 0 112px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-period-search__button {
|
||
|
|
width: 28px;
|
||
|
|
flex: 0 0 28px;
|
||
|
|
padding: 8px 6px;
|
||
|
|
}
|
||
|
|
</style>
|