60 lines
1.5 KiB
Vue
60 lines
1.5 KiB
Vue
<script setup>
|
|
import { getAssetMainList } from "@/apis/asset";
|
|
import { ref, onMounted, watch, inject } from "vue";
|
|
import useSearchParam from "@/hooks/useSearchParam";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
|
|
const { searchParams, changeParams } = useSearchParam();
|
|
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
|
|
const { openToast, cancelToastOpen } = inject("app_toast");
|
|
const getMainSystems = async () => {
|
|
const res = await getAssetMainList();
|
|
const cate = res.data.map((d, index) => ({
|
|
...d,
|
|
title: d.system_key,
|
|
key: d.id,
|
|
active: searchParams.value?.mainSys_id
|
|
? parseInt(searchParams.value?.mainSys_id) === d.id
|
|
: index === 0,
|
|
}));
|
|
setItems(cate);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getMainSystems();
|
|
});
|
|
|
|
watch(selectedBtn, (newValue) => {
|
|
changeParams({
|
|
...searchParams.value,
|
|
mainSys_id: newValue.key,
|
|
subSys_id: null,
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center gap-4 mb-4">
|
|
<h2 class="text-lg font-bold ps-2 whitespace-nowrap">
|
|
{{ $t("history.system_category") }} :
|
|
</h2>
|
|
<ButtonConnectedGroup
|
|
:items="items"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeActiveBtn(item);
|
|
}
|
|
"
|
|
:className="`flex w-full mt-2`"
|
|
size="sm"
|
|
color="info"
|
|
>
|
|
<template #buttonContent="{ item }">
|
|
<span class="text-base">{{ item.title }}</span>
|
|
</template>
|
|
</ButtonConnectedGroup>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|