ทะเบียนประวัติ

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2024-03-08 16:08:46 +07:00
parent 5ebc021f4e
commit f6f28dd101
12 changed files with 310 additions and 63 deletions

View file

@ -0,0 +1,6 @@
<script setup lang="ts"></script>
<template>
<div>1</div>
</template>
<style scoped></style>

View file

@ -0,0 +1,6 @@
<script setup lang="ts"></script>
<template>
<div>2</div>
</template>
<style scoped></style>

View file

@ -0,0 +1,6 @@
<script setup lang="ts"></script>
<template>
<div>3</div>
</template>
<style scoped></style>

View file

@ -0,0 +1,6 @@
<script setup lang="ts"></script>
<template>
<div>4</div>
</template>
<style scoped></style>

View file

@ -0,0 +1,6 @@
<script setup lang="ts"></script>
<template>
<div>5</div>
</template>
<style scoped></style>

View file

@ -0,0 +1,6 @@
<script setup lang="ts"></script>
<template>
<div>6</div>
</template>
<style scoped></style>

View file

@ -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>

View file

@ -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>