88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<script setup>
|
|
import { onMounted, ref, watch, computed } from "vue";
|
|
import { AUTHPAGES } from "@/constant";
|
|
import { getAuth, getAllSysSidebar } from "@/apis/building";
|
|
import useBuildingStore from "@/stores/useBuildingStore";
|
|
import useUserInfoStore from "@/stores/useUserInfoStore";
|
|
|
|
const store = useUserInfoStore();
|
|
|
|
const buildingStore = useBuildingStore();
|
|
|
|
const iniFroList = async () => {
|
|
const res = await getAuth();
|
|
|
|
store.updateAuthPage(
|
|
res.data.map((d) =>
|
|
AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
|
|
? {
|
|
...d,
|
|
...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
|
|
}
|
|
: d
|
|
)
|
|
);
|
|
};
|
|
|
|
const authPages = computed(() =>
|
|
store.auth_page.filter(({ showView }) => showView)
|
|
);
|
|
|
|
const open = ref(false);
|
|
const getSubMonitorPage = async (building) => {
|
|
const res = await getAllSysSidebar();
|
|
buildingStore.mainSubSys = res.data.history_Main_Systems;
|
|
};
|
|
|
|
watch(
|
|
() => buildingStore.selectedBuilding,
|
|
(newVal) => {
|
|
if (newVal !== null) {
|
|
getSubMonitorPage(newVal.building_tag);
|
|
}
|
|
}
|
|
);
|
|
|
|
onMounted(() => {
|
|
iniFroList();
|
|
});
|
|
</script>
|
|
<template>
|
|
<ul class="px-1 menu-box my-2">
|
|
<li
|
|
v-for="page in authPages"
|
|
class="flex flex-col items-center justify-center"
|
|
>
|
|
<router-link
|
|
v-if="$route.path !== page.navigate"
|
|
:to="page.navigate"
|
|
type="link"
|
|
class="flex flex-col justify-center items-center btn-group text-white"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', page.icon]"
|
|
size="2x"
|
|
class="menu-icon"
|
|
/>
|
|
{{ page.subName }}
|
|
</router-link>
|
|
<div
|
|
v-else
|
|
class="flex flex-col justify-center items-center btn-group text-white router-link-active cursor-pointer"
|
|
>
|
|
<font-awesome-icon
|
|
:icon="['fas', page.icon]"
|
|
size="2x"
|
|
class="menu-icon"
|
|
/>
|
|
{{ page.subName }}
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
<style lang="css" scoped>
|
|
.router-link-active {
|
|
color: #7cedc1;
|
|
}
|
|
</style>
|