117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<script setup>
|
|
import { getAssetMainList, getAssetSubList } from "@/apis/asset";
|
|
import { computed, onMounted, ref, watch } from "vue";
|
|
import useSearchParam from "@/hooks/useSearchParam";
|
|
import useActiveBtn from "@/hooks/useActiveBtn";
|
|
import { useI18n } from "vue-i18n";
|
|
const { t } = useI18n();
|
|
const { searchParams, changeParams } = useSearchParam();
|
|
|
|
// 選大類
|
|
const {
|
|
items: sysMainTagItems,
|
|
changeActiveBtn: changeMainSysActiveBtn,
|
|
setItems: setMainSysItems,
|
|
selectedBtn: selectedMainSysItems,
|
|
} = useActiveBtn();
|
|
// 選小類
|
|
const {
|
|
items: sysTagItems,
|
|
changeActiveBtn: changeSysActiveBtn,
|
|
setItems: setSysItems,
|
|
selectedBtn: selectedSysItems,
|
|
} = useActiveBtn("multiple");
|
|
|
|
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,
|
|
}));
|
|
setMainSysItems(cate);
|
|
};
|
|
|
|
const getSubSystems = async (id) => {
|
|
const res = await getAssetSubList(id);
|
|
const sub = res.data.map((d, index) => ({
|
|
...d,
|
|
title: d.system_key,
|
|
key: d.system_value,
|
|
active: searchParams.value?.sub_system_tag
|
|
? parseInt(searchParams.value?.sub_system_tag) === d.system_value
|
|
: index === 0,
|
|
}));
|
|
setSysItems(sub);
|
|
};
|
|
|
|
onMounted(() => {
|
|
getMainSystems();
|
|
});
|
|
|
|
watch(selectedMainSysItems, (newValue) => {
|
|
changeParams({
|
|
...searchParams.value,
|
|
mainSys_id: newValue.key,
|
|
sub_system_tag: null,
|
|
});
|
|
});
|
|
|
|
// watch(selectedSysItems, (newValue) => {
|
|
// changeParams({
|
|
// ...searchParams.value,
|
|
// sub_system_tag: newValue.map((d) => d.key),
|
|
// });
|
|
// });
|
|
|
|
watch(
|
|
() => searchParams,
|
|
(newValue, oldValue) => {
|
|
if (newValue.mainSys_id && newValue.mainSys_id !== oldValue.mainSys_id) {
|
|
getSubSystems(newValue.value.mainSys_id);
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="flex items-center gap-4 my-4">
|
|
<h2 class="text-lg font-bold ps-2 whitespace-nowrap">
|
|
{{ $t("history.system_category") }} :
|
|
</h2>
|
|
<ButtonGroup
|
|
:items="sysMainTagItems"
|
|
:withLine="true"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeMainSysActiveBtn(item);
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center gap-4 my-4">
|
|
<h2 class="text-lg font-bold ps-2 whitespace-nowrap">
|
|
{{ $t("history.device_category") }} :
|
|
</h2>
|
|
<ButtonGroup
|
|
:items="sysTagItems"
|
|
:withLine="true"
|
|
:onclick="
|
|
(e, item) => {
|
|
changeSysActiveBtn(item);
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|