<!--
* @Date: 2023-04-23 10:08:17
-->
<template>
<div class="HomeTimeSelect">
<a-radio-group
v-model:value="timeType"
class="time-select"
@change="handleTypeChange()"
>
<a-radio-button
v-for="(item, key) in timeTypeMap"
:key="key"
:value="key"
class="time-item"
>{
{
item.name }}</a-radio-button
>
</a-radio-group>
<a-range-picker
v-model:value="timeValue"
class="date-picker"
:allowClear="false"
@change="handleChangeType"
>
</a-range-picker>
</div>
</template>
<script setup>
import {
ref } from "vue";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import {
message } from "ant-design-vue";
dayjs.locale("zh-cn");
const props = defineProps({
});
const emits = defineEmits(["change"]);
const timeValue = ref([dayjs(), dayjs()]);
const timeType = ref("date");
const timeTypeMap = {
date: {
value: 1, name: "日", type: "day" },
week: {
value: 2, name: "周", type: "week" },
month: {
value: 3, name: "月", type: "month" },
year: {
value: 4, name: "年", type: "year" },
};
// 时间类型变更
const handleTypeChange = () => {
const beginTime = dayjs()
.startOf(timeTypeMap[timeType.value]?.type)
.format("YYYY-MM-DD");
const endTime = dayjs()
.endOf(timeTypeMap[timeType.value]?.type)
.format("YYYY-MM-DD");
timeValue.value = [dayjs(beginTime), dayjs(endTime)];
emits(
"change",
dayjs(beginTime).valueOf(),
dayjs(endTime).valueOf(),
timeTypeMap[timeType.value]?.value
);
};
const handleChangeType = (val) => {
const beginTime = dayjs(val[0]).format("YYYY-MM-DD");
const endTime = dayjs(val[1]).format("YYYY-MM-DD");
// 超过一年提示报错
if (dayjs(endTime).diff(dayjs(beginTime), "years") > 1) {
message.error("查询时间不能超过1年");
return;
}
emits(
"change",
dayjs(beginTime).valueOf(),
dayjs(endTime).valueOf(),
timeTypeMap[timeType.value]?.value
);
};
defineExpose({
handleTypeChange,
});
</script>
<style lang="scss" scoped>
.HomeTimeSelect {
@include fac();
.date-picker {
width: 200px;
}
}
</style>
ant-design-vue时间查询简写默认可以切换日月年
猜你喜欢
转载自blog.csdn.net/LRQQHM/article/details/131191789
今日推荐
周排行