ทะเบียนประวัติ
This commit is contained in:
parent
5ebc021f4e
commit
f6f28dd101
12 changed files with 310 additions and 63 deletions
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>2</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>3</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>4</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>5</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<script setup lang="ts"></script>
|
||||
<template>
|
||||
<div>6</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
/** importComponents*/
|
||||
import Profile from "@/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue";
|
||||
import NameChangeHistory from "@/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue";
|
||||
import Address from "@/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue";
|
||||
import Family from "@/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue";
|
||||
import Education from "@/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue";
|
||||
import SpecialSkill from "@/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue";
|
||||
|
||||
const tab = ref<string>("1");
|
||||
</script>
|
||||
<template>
|
||||
<div class="row items-center q-mb-lg">
|
||||
<div class="text-dark row items-center" style="font-size: 22px">
|
||||
<q-icon name="mdi-account" class="q-mr-md" />
|
||||
<span>ข้อมูลส่วนตัว</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator />
|
||||
<q-tabs
|
||||
v-model="tab"
|
||||
dense
|
||||
class="text-grey"
|
||||
active-color="blue"
|
||||
indicator-color="white"
|
||||
align="justify"
|
||||
narrow-indicator
|
||||
bordered
|
||||
>
|
||||
<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 />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="2">
|
||||
<NameChangeHistory />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="3">
|
||||
<Address />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="4">
|
||||
<Family />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="5">
|
||||
<Education />
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="6">
|
||||
<SpecialSkill />
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<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";
|
||||
|
||||
const store = useRegistryDetailNewDataStore();
|
||||
|
||||
const itemsTab = ref<any>([
|
||||
{
|
||||
name: "1",
|
||||
icon: "mdi-account",
|
||||
label: "ข้อมูลส่วนตัว",
|
||||
},
|
||||
{
|
||||
name: "2",
|
||||
icon: "mdi-account-tie",
|
||||
label: "ข้อมูลราชการ",
|
||||
},
|
||||
{
|
||||
name: "3",
|
||||
icon: "mail",
|
||||
label: "ข้อมูลเงินเดือน/ค่าจ้าง",
|
||||
},
|
||||
{
|
||||
name: "4",
|
||||
icon: "mdi-cash",
|
||||
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
|
||||
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'" />
|
||||
<!-- <div class="text-h4 q-mb-md">{{ tab.label }}</div> -->
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</template>
|
||||
</q-splitter>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue