59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<script setup>
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
import { onMounted, watch } from "vue";
|
|
import useSearchParam from "@/hooks/useSearchParam";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t, locale } = useI18n();
|
|
const { searchParams, changeParams } = useSearchParam();
|
|
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
|
|
|
const initializeItems = () => {
|
|
setItems([
|
|
{
|
|
title: t("alert.offnormal"),
|
|
key: 1,
|
|
active: true,
|
|
},
|
|
{
|
|
title: t("alert.normal"),
|
|
key: 2,
|
|
active: false,
|
|
},
|
|
]);
|
|
};
|
|
|
|
onMounted(() => {
|
|
initializeItems();
|
|
});
|
|
|
|
// 監聽按鈕變化
|
|
watch(
|
|
selectedBtn,
|
|
(newValue) => {
|
|
changeParams({ ...searchParams.value, isRecovery: newValue.key });
|
|
}
|
|
);
|
|
|
|
// 監聽搜尋變化
|
|
watch(
|
|
searchParams,
|
|
(newSearchParams) => {
|
|
if (!newSearchParams.isRecovery) {
|
|
changeParams({ ...newSearchParams, isRecovery: 1 });
|
|
}
|
|
},
|
|
{ immediate: true } // 確保在初始化立即觸發
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<ButtonGroup
|
|
:items="items"
|
|
:withLine="true"
|
|
class="mr-5"
|
|
:onclick="(e, item) => changeActiveBtn(item)"
|
|
/>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|