115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { ref, defineAsyncComponent } from "vue";
|
|
|
|
import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
|
|
|
|
/** importComponents*/
|
|
//ประวัติส่วนตัว
|
|
const Profile = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"
|
|
)
|
|
);
|
|
//ประวัติการเปลี่ยนชื่อ
|
|
const NameChangeHistory = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"
|
|
)
|
|
);
|
|
//ข้อมูลที่อยู่
|
|
const Address = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"
|
|
)
|
|
);
|
|
//ข้อมูลครอบครัว
|
|
const FamilyNew = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"
|
|
)
|
|
);
|
|
//ประวัติการศึกษา
|
|
const Education = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"
|
|
)
|
|
);
|
|
//ความสามารถพิเศษ
|
|
const SpecialSkill = defineAsyncComponent(
|
|
() =>
|
|
import(
|
|
"@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"
|
|
)
|
|
);
|
|
|
|
const storeRegistry = useRegistryNewDataStore();
|
|
|
|
const tab = ref<string>("1");
|
|
const props = defineProps({
|
|
fetchDataPersonal: { type: Function, require: true },
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="row items-center q-my-md">
|
|
<div class="text-dark row items-center q-px-md">
|
|
<q-icon name="mdi-account" class="q-mr-md" size="22px" />
|
|
<div class="text-subtitle1 text-weight-bold">ข้อมูลส่วนตัว</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator />
|
|
<q-card>
|
|
<q-tabs
|
|
v-model="tab"
|
|
active-color="blue-8"
|
|
align="left"
|
|
bordered
|
|
narrow-indicator
|
|
indicator-color="transparent"
|
|
dense
|
|
class="text-grey q-pl-sm"
|
|
>
|
|
<q-tab name="1" label="ประวัติส่วนตัว" />
|
|
<q-tab name="2" label="ประวัติการเปลี่ยนชื่อ - นามสกุล" />
|
|
<q-tab name="3" label="ข้อมูลที่อยู่" />
|
|
<q-tab name="4" label="ข้อมูลครอบครัว" />
|
|
<q-tab name="5" label="ประวัติการศึกษา" />
|
|
<q-tab name="6" label="ความสามารถพิเศษ" />
|
|
</q-tabs>
|
|
<q-separator />
|
|
|
|
<q-tab-panels v-model="tab" animated>
|
|
<q-tab-panel name="1">
|
|
<Profile
|
|
:fetchDataPersonal="props.fetchDataPersonal"
|
|
:is-leave="storeRegistry.isLeave"
|
|
/>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="2">
|
|
<NameChangeHistory
|
|
:fetchDataPersonal="props.fetchDataPersonal"
|
|
:is-leave="storeRegistry.isLeave"
|
|
/>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="3">
|
|
<Address :is-leave="storeRegistry.isLeave" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="4">
|
|
<FamilyNew :is-leave="storeRegistry.isLeave" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="5">
|
|
<Education :is-leave="storeRegistry.isLeave" />
|
|
</q-tab-panel>
|
|
<q-tab-panel name="6">
|
|
<SpecialSkill :is-leave="storeRegistry.isLeave" />
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</q-card>
|
|
</template>
|
|
|
|
<style scoped></style>
|