90 lines
2.5 KiB
Vue
90 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
import { useRegistryDetailNewDataStore } from "@/modules/04_registryNew/stores/DetailMain";
|
|
|
|
import PersonalInformationMain from "@/modules/04_registryNew/components/detail/PersonalInformation/Main.vue";
|
|
import GovernmentInformationMain from "@/modules/04_registryNew/components/detail/GovernmentInformation/Main.vue";
|
|
import salaryMain from "@/modules/04_registryNew/components/detail/Salary/Main.vue";
|
|
import AchievementMain from "@/modules/04_registryNew/components/detail/Achievement/Main.vue";
|
|
import OtherMaim from "@/modules/04_registryNew/components/detail/Other/Main.vue";
|
|
|
|
const store = useRegistryDetailNewDataStore();
|
|
|
|
const itemsTab = ref<any>([
|
|
{
|
|
name: "1",
|
|
icon: "mdi-account",
|
|
label: "ข้อมูลส่วนตัว",
|
|
},
|
|
{
|
|
name: "2",
|
|
icon: "mdi-account-tie",
|
|
label: "ข้อมูลราชการ",
|
|
},
|
|
{
|
|
name: "3",
|
|
icon: "mdi-cash",
|
|
label: "ข้อมูลเงินเดือน/ค่าจ้าง",
|
|
},
|
|
{
|
|
name: "4",
|
|
icon: "mdi-medal",
|
|
label: "ข้อมูลผลงานและเครื่องราชฯ",
|
|
},
|
|
{
|
|
name: "5",
|
|
icon: "mdi-bookmark",
|
|
label: "เอกสารหลักฐานและอื่นๆ",
|
|
},
|
|
]);
|
|
|
|
const splitterModel = ref<number>(12);
|
|
</script>
|
|
<template>
|
|
<q-splitter v-model="splitterModel" disable>
|
|
<template v-slot:before>
|
|
<q-tabs v-model="store.tabMain" vertical class="text-blue">
|
|
<q-tab
|
|
class="hover-tab"
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
:icon="tab.icon"
|
|
:label="tab.label"
|
|
/>
|
|
</q-tabs>
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<q-tab-panels
|
|
v-model="store.tabMain"
|
|
animated
|
|
swipeable
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
>
|
|
<q-tab-panel
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
>
|
|
<PersonalInformationMain v-if="store.tabMain === '1'" />
|
|
<GovernmentInformationMain v-if="store.tabMain === '2'" />
|
|
<salaryMain v-if="store.tabMain === '3'" />
|
|
<AchievementMain v-if="store.tabMain === '4'" />
|
|
<OtherMaim v-if="store.tabMain === '5'" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</template>
|
|
</q-splitter>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.hover-tab:hover {
|
|
background-color: #0793f1;
|
|
color: white !important;
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|