131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<script setup>
|
||
import { ref, onMounted, watch, computed } from "vue";
|
||
import dayjs from "dayjs";
|
||
import useSearchParam from "@/hooks/useSearchParam";
|
||
import { useI18n } from "vue-i18n";
|
||
const { t, locale } = useI18n();
|
||
const { searchParams, changeParams } = useSearchParam();
|
||
|
||
/**
|
||
* 可調整 props：
|
||
* - showQuickButton：是否顯示快捷按鈕（預設 true，可關掉）
|
||
* - quickButtonType：快捷類型 '30d' | '7d'（預設 '30d'）
|
||
*/
|
||
const props = defineProps({
|
||
showQuickButton: { type: Boolean, default: true },
|
||
quickButtonType: { type: String, default: "30d" }, // '30d' | '7d'
|
||
});
|
||
|
||
// 統一設定區間的 helper
|
||
const setRange = (start, end) => {
|
||
const newRange = [
|
||
{
|
||
key: "start_at",
|
||
value: dayjs(start),
|
||
dateFormat: "yyyy-MM-dd",
|
||
placeholder: t("alert.start_date"),
|
||
},
|
||
{
|
||
key: "end_at",
|
||
value: dayjs(end),
|
||
dateFormat: "yyyy-MM-dd",
|
||
placeholder: t("alert.end_date"),
|
||
},
|
||
];
|
||
dateRange.value = newRange;
|
||
|
||
// 同步到共用查詢參數（字串格式）
|
||
changeParams({
|
||
...searchParams.value,
|
||
Start_date: dayjs(start).format("YYYY-MM-DD"),
|
||
End_date: dayjs(end).format("YYYY-MM-DD"),
|
||
});
|
||
};
|
||
|
||
// 初始 dateRange：若有既有搜尋值就吃既有；否則依 quickButtonType
|
||
const dateRange = ref([
|
||
{
|
||
key: "start_at",
|
||
value: searchParams.value.Start_date
|
||
? dayjs(searchParams.value.Start_date)
|
||
: props.quickButtonType === "7d"
|
||
? dayjs().subtract(7, "day")
|
||
: dayjs().subtract(30, "day"),
|
||
dateFormat: "yyyy-MM-dd",
|
||
placeholder: t("alert.start_date"),
|
||
},
|
||
{
|
||
key: "end_at",
|
||
value: searchParams.value.End_date
|
||
? dayjs(searchParams.value.End_date)
|
||
: dayjs(),
|
||
dateFormat: "yyyy-MM-dd",
|
||
placeholder: t("alert.end_date"),
|
||
},
|
||
]);
|
||
|
||
// 快捷按鈕：依 quickButtonType 決定區間
|
||
const changeTimeRange = () => {
|
||
if (props.quickButtonType === "7d") {
|
||
// 近7天：起始 = 今天往回 7 天，結束 = 今天
|
||
setRange(dayjs().subtract(7, "day"), dayjs().endOf("day"));
|
||
} else {
|
||
// 近30天：起始 = 今天往回 30 天，結束 = 今天
|
||
setRange(dayjs().subtract(30, "day"), dayjs().endOf("day"));
|
||
}
|
||
};
|
||
|
||
// 進頁面初始化：若沒有既有 Start/End，依 quickButtonType 設定
|
||
onMounted(() => {
|
||
if (!searchParams.value.Start_date || !searchParams.value.End_date) {
|
||
changeTimeRange();
|
||
} else {
|
||
// 若已存在既有值，把區間同步回 dateRange（避免格式落差）
|
||
setRange(searchParams.value.Start_date, searchParams.value.End_date);
|
||
}
|
||
});
|
||
|
||
// 使用者調整日期 → 同步到共用查詢參數
|
||
watch(
|
||
dateRange,
|
||
() => {
|
||
changeParams({
|
||
...searchParams.value,
|
||
Start_date: dayjs(dateRange.value[0].value).format("YYYY-MM-DD"),
|
||
End_date: dayjs(dateRange.value[1].value).format("YYYY-MM-DD"),
|
||
});
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
// 語系切換時，更新 placeholder
|
||
watch(locale, () => {
|
||
dateRange.value[0].placeholder = t("alert.start_date");
|
||
dateRange.value[1].placeholder = t("alert.end_date");
|
||
});
|
||
|
||
// 快捷按鈕顯示文字
|
||
const quickBtnLabel = computed(() =>
|
||
props.quickButtonType === "7d" ? t("alert.7days") : t("alert.30days")
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-wrap items-center">
|
||
<!-- 快捷按鈕：可關閉；可切換 30天 / 7天 -->
|
||
<button
|
||
v-if="showQuickButton"
|
||
type="button"
|
||
class="btn btn-outline-success mr-3"
|
||
@click="changeTimeRange"
|
||
>
|
||
{{ quickBtnLabel }}
|
||
</button>
|
||
|
||
<!-- 日期群組 -->
|
||
<DateGroup :items="dateRange" :withLine="true" />
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped></style>
|