47 lines
1.0 KiB
Vue
47 lines
1.0 KiB
Vue
<script setup>
|
|
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
|
|
import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
|
|
import AlertSetting from "./components/AlertSetting/AlertSetting.vue";
|
|
import { computed, onMounted, ref, provide, onBeforeMount } from "vue";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
|
|
const changeComponent = (e, item) => {
|
|
changeActiveBtn(item);
|
|
};
|
|
|
|
const { items, changeActiveBtn, setItems } = useActiveBtn();
|
|
|
|
onBeforeMount(() => {
|
|
setItems([
|
|
{
|
|
title: "告警記錄查詢",
|
|
key: "Query",
|
|
active: true,
|
|
component: AlertQuery,
|
|
},
|
|
{
|
|
title: "告警設定",
|
|
key: "Setting",
|
|
active: false,
|
|
component: AlertSetting,
|
|
},
|
|
]);
|
|
});
|
|
|
|
const activeTab = computed(() => {
|
|
return items.value.find(({ active }) => active);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<ButtonGroup
|
|
:items="items"
|
|
:withLine="true"
|
|
class="mt-8 mb-6"
|
|
:onclick="changeComponent"
|
|
/>
|
|
<component :is="activeTab.component"></component>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|