90 lines
3.4 KiB
Vue
90 lines
3.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from "vue";
|
||
|
|
import { usePersonalDataStore } from "@/modules/01_metadata/stores/personalStore";
|
||
|
|
import ListPrefix from "@/modules/01_metadata/components/personal/01ListPrefix.vue";
|
||
|
|
import ListRank from "@/modules/01_metadata/components/personal/02ListRank.vue";
|
||
|
|
import ListBloodGroup from "@/modules/01_metadata/components/personal/03ListBloodGroup.vue";
|
||
|
|
import ListGender from "@/modules/01_metadata/components/personal/04ListGender.vue";
|
||
|
|
import ListReligion from "@/modules/01_metadata/components/personal/05ListReligion.vue";
|
||
|
|
import ListRelationship from "@/modules/01_metadata/components/personal/06ListRelationship.vue";
|
||
|
|
import ListEducation from "@/modules/01_metadata/components/personal/07ListEducationLevel.vue";
|
||
|
|
import ListProvince from "@/modules/01_metadata/components/personal/08ListProvince.vue";
|
||
|
|
|
||
|
|
const store = usePersonalDataStore();
|
||
|
|
const tabs = ref<Array<any>>([]);
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
const tabsPerson = [
|
||
|
|
{ label: "คำนำหน้าชื่อ", value: "list_prefix" },
|
||
|
|
{ label: "ยศ", value: "list_rank" },
|
||
|
|
{ label: "เพศ", value: "list_gender" },
|
||
|
|
{ label: "สถานภาพ", value: "list_relationship" },
|
||
|
|
{ label: "กลุ่มเลือด", value: "list_bloodGroup" },
|
||
|
|
{ label: "ศาสนา", value: "list_religion" },
|
||
|
|
{ label: "จังหวัด", value: "list_province" },
|
||
|
|
{ label: "ระดับการศึกษา", value: "list_education" },
|
||
|
|
];
|
||
|
|
tabs.value = tabsPerson;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="toptitle text-dark col-12 row items-center">
|
||
|
|
ข้อมูลเกี่ยวกับบุคคล
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<q-card flat bordered>
|
||
|
|
<div class="text-subtitle1 text-grey-9">
|
||
|
|
<q-tabs
|
||
|
|
dense
|
||
|
|
v-model="store.currentTab"
|
||
|
|
align="left"
|
||
|
|
indicator-color="primary"
|
||
|
|
active-color="primary bg-teal-1"
|
||
|
|
inline-label
|
||
|
|
class="text-body2 text-grey-7"
|
||
|
|
>
|
||
|
|
<q-tab
|
||
|
|
v-for="tab in tabs"
|
||
|
|
:key="tab.value"
|
||
|
|
v-on:click="store.currentTab = tab.value"
|
||
|
|
:label="tab.label"
|
||
|
|
:name="tab.value"
|
||
|
|
class="q-py-xs"
|
||
|
|
/>
|
||
|
|
</q-tabs>
|
||
|
|
<q-separator />
|
||
|
|
<!-- person -->
|
||
|
|
|
||
|
|
<q-tab-panels v-model="store.currentTab" animated>
|
||
|
|
<q-tab-panel name="list_prefix">
|
||
|
|
<ListPrefix v-if="store.currentTab == 'list_prefix'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_rank">
|
||
|
|
<ListRank v-if="store.currentTab == 'list_rank'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_gender">
|
||
|
|
<ListGender v-if="store.currentTab == 'list_gender'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_relationship">
|
||
|
|
<ListRelationship v-if="store.currentTab == 'list_relationship'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_bloodGroup">
|
||
|
|
<ListBloodGroup v-if="store.currentTab == 'list_bloodGroup'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_religion">
|
||
|
|
<ListReligion v-if="store.currentTab == 'list_religion'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_province">
|
||
|
|
<ListProvince v-if="store.currentTab == 'list_province'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
<q-tab-panel name="list_education">
|
||
|
|
<ListEducation v-if="store.currentTab == 'list_education'" />
|
||
|
|
</q-tab-panel>
|
||
|
|
</q-tab-panels>
|
||
|
|
</div>
|
||
|
|
</q-card>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped></style>
|