153 lines
4.2 KiB
Vue
153 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import { ref, defineAsyncComponent } from "vue";
|
|
|
|
import { useRoute } from "vue-router";
|
|
|
|
import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain";
|
|
|
|
import type { ItemTab } from "@/modules/04_registryPerson/interface/index/Main";
|
|
|
|
//ข้อมูลส่วนตัว
|
|
const PersonalInformationMain = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"
|
|
)
|
|
);
|
|
//ข้อมูลราชการ
|
|
const GovernmentInformationMain = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"
|
|
)
|
|
);
|
|
//ข้อมูลเงินเดือน/ค่าจ้าง
|
|
const salaryMain = defineAsyncComponent(
|
|
() => import("@/modules/04_registryPerson/components/detail/Salary/Main.vue")
|
|
);
|
|
//ข้อมูลผลงานและเครื่องราชฯ
|
|
const AchievementMain = defineAsyncComponent(
|
|
() =>
|
|
import("@/modules/04_registryPerson/components/detail/Achievement/Main.vue")
|
|
);
|
|
//เอกสารหลักฐานและอื่นๆ
|
|
const OtherMaim = defineAsyncComponent(
|
|
() => import("@/modules/04_registryPerson/components/detail/Other/Main.vue")
|
|
);
|
|
//ข้อมูลลูกจ้าง
|
|
const EmployeeMain = defineAsyncComponent(
|
|
() =>
|
|
import("@/modules/04_registryPerson/components/detail/Employee/Main.vue")
|
|
);
|
|
|
|
const route = useRoute();
|
|
const store = useRegistryDetailNewDataStore();
|
|
|
|
const props = defineProps({
|
|
fetchDataPersonal: { type: Function, require: true },
|
|
});
|
|
|
|
const itemsTab = ref<ItemTab[]>([
|
|
{
|
|
name: "1",
|
|
icon: "mdi-account",
|
|
label: "ข้อมูลส่วนตัว",
|
|
},
|
|
{
|
|
name: "2",
|
|
icon: "mdi-account-tie",
|
|
label:
|
|
route.name === "registry-employeeId"
|
|
? "ข้อมูลลูกจ้างชั่วคราว"
|
|
: "ข้อมูลราชการ",
|
|
},
|
|
{
|
|
name: "3",
|
|
icon: "mdi-cash",
|
|
label: route.name === "registryNewByid" ? "เงินเดือน" : "ค่าจ้าง",
|
|
},
|
|
{
|
|
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 class="split">
|
|
<template v-slot:before>
|
|
<div class="">
|
|
<!-- bg-tab-regi -->
|
|
<q-tabs
|
|
v-model="store.tabMain"
|
|
vertical
|
|
class="text-grey-6 text-weight-light"
|
|
active-class="bg-white text-blue-8 text-weight-bold bg-blue-1"
|
|
><!-- indicator-color="transparent" -->
|
|
<q-tab
|
|
class="q-py-sm"
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
:icon="tab.icon"
|
|
:label="tab.label"
|
|
/><!-- hover-tab -->
|
|
</q-tabs>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-slot:after>
|
|
<q-tab-panels
|
|
v-model="store.tabMain"
|
|
animated
|
|
swipeable
|
|
vertical
|
|
transition-prev="jump-up"
|
|
transition-next="jump-up"
|
|
class="q-pa-none"
|
|
><!-- split -->
|
|
<q-tab-panel
|
|
v-for="(tab, index) in itemsTab"
|
|
:key="index"
|
|
:name="tab.name"
|
|
class="q-pa-none"
|
|
>
|
|
<PersonalInformationMain
|
|
v-if="store.tabMain === '1'"
|
|
:fetchDataPersonal="props.fetchDataPersonal"
|
|
/>
|
|
<EmployeeMain
|
|
v-if="store.tabMain === '2' && route.name === 'registry-employeeId'"
|
|
/>
|
|
<GovernmentInformationMain v-else-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;
|
|
}
|
|
.bg-tab-regi {
|
|
background-color: #273238;
|
|
}
|
|
.split {
|
|
border-radius: 10px !important;
|
|
}
|
|
</style>
|