86 lines
2.4 KiB
Vue
Executable File
86 lines
2.4 KiB
Vue
Executable File
<template>
|
||
<div>
|
||
<Header
|
||
:tabs="headerTabs"
|
||
v-model:active-tab="activeTabKey"
|
||
:is-sidebar-collapsed="isSidebarCollapsed"
|
||
:unread-notifications="unreadNotifications"
|
||
@tab-change="handleTabChange"
|
||
:headerSchema="headerSchema"
|
||
/>
|
||
|
||
<component
|
||
:is="currentComponent"
|
||
v-if="currentComponent"
|
||
:activeTabKey="activeTabKey"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
definePageMeta({
|
||
name: "DashboardBasePage",
|
||
layout: "dashboard-layout",
|
||
});
|
||
import { ref, onMounted } from "vue";
|
||
import tabBarData from "@/json/tab-bar/data-entry/dataEntry.json";
|
||
import { defineAsyncComponent } from "vue";
|
||
const route = useRoute();
|
||
|
||
// Stateهای Header
|
||
const isSidebarCollapsed = ref(false);
|
||
const unreadNotifications = ref(5);
|
||
const headerTabs = ref([]);
|
||
headerTabs.value = tabBarData.tabs;
|
||
const activeTabKey = ref(tabBarData.tabs[0]?.key || "");
|
||
// const contentSchema = computed(() => ({
|
||
// items: items.value,
|
||
// }));
|
||
const tabComponents = {
|
||
MainList: defineAsyncComponent(
|
||
() => import("~/components/lazy-load/data-entry/MainList.vue"),
|
||
),
|
||
RelationEdit: defineAsyncComponent(
|
||
() => import("~/components/lazy-load/data-entry/RelationEdit.vue"),
|
||
),
|
||
RuleEdit: defineAsyncComponent(
|
||
() => import("~/components/lazy-load/data-entry/RuleEdit.vue"),
|
||
),
|
||
// "DataEntryFarhangestan": defineAsyncComponent(() => import("~/components/lazy-load/data-entry/DataEntryFarhangestan.vue")),
|
||
// "DataEntryMirbagheri": defineAsyncComponent(() => import("~/components/lazy-load/data-entry/DataEntryMirbagheri.vue")),
|
||
// ...
|
||
};
|
||
const currentComponent = computed(() => {
|
||
if (activeTabKey.value == "MainList") {
|
||
return tabComponents.MainList;
|
||
} else if (activeTabKey.value === "RelationEdit") {
|
||
return tabComponents.RelationEdit;
|
||
} else if (activeTabKey.value === "RuleEdit") {
|
||
return tabComponents.RuleEdit;
|
||
}
|
||
});
|
||
// تابع مدیریت تغییر تب
|
||
const handleTabChange = (tab) => {
|
||
// منطق تغییر مسیر یا لود داده
|
||
switch (tab.id) {
|
||
case "dashboard":
|
||
break;
|
||
case "analytics":
|
||
break;
|
||
case "users":
|
||
break;
|
||
case "settings":
|
||
break;
|
||
default:
|
||
}
|
||
};
|
||
const headerSchema = ref({});
|
||
headerSchema.value = {
|
||
breadcrumb: true,
|
||
logo: false,
|
||
};
|
||
onMounted(() => {
|
||
activeTabKey.value = headerTabs.value[0]?.id || "";
|
||
});
|
||
</script>
|