hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

73
src/modules/04_registryNew/components/TableView.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, watch, computed, onMounted } from "vue";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";
/** importType*/
import type { QTableProps } from "quasar";
@ -13,6 +14,7 @@ import DialogHistory from "@/modules/04_registryNew/components/DialogHistory.vue
import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
const store = useRegistryNewDataStore();
const router = useRouter();
const formFilter = defineModel<FormFilter>("formFilter", { required: true });
const maxPage = defineModel<Number>("maxPage", { required: true });
@ -173,6 +175,10 @@ function onClickHistory() {
modalHistory.value = !modalHistory.value;
}
function onClickViewDetail(id: string) {
router.push(`/registry-new/${id}`);
}
watch(
() => formFilter.value.pageSize,
() => {
@ -278,7 +284,11 @@ watch(
</template>
<template v-slot:body="props" v-if="store.mode === 'table'">
<q-tr :props="props" class="cursor-pointer">
<q-td v-for="col in props.cols" :key="col.id">
<q-td
v-for="col in props.cols"
:key="col.id"
@click="onClickViewDetail(props.row.id)"
>
<div v-if="col.name === 'no'">
{{
(formFilter.page - 1) * formFilter.pageSize + props.rowIndex + 1
@ -388,67 +398,10 @@ watch(
color="black"
label="ดูเพิ่มเติม"
class="hover-button full-width q-pa-md"
@click="onClickViewDetail(props.row.id)"
/>
</q-card>
</div>
<!-- <div class="col-xs-12 col-sm-6 col-md-3"> -->
<!-- <q-card style="border: 0.5px solid #e4e4e4">
<div class="flex justify-center q-pt-md q-px-md">
<q-item-section avatar class="q-pa-none">
<img
src="@/assets/avatar_user.jpg"
class="col-4 img-info q-mt-md"
style="width: 120px; height: 120px; border-radius: 50%"
/>
<div class="text-weight-medium q-mt-md">
{{
`${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
}}
</div>
<div class="text-weight-light full-width text-center">
{{ props.row.citizenId }}
</div>
</q-item-section>
<q-card
bordered
class="q-my-md q-py-md full-width bg-grey-2"
style="border: 0.5px solid #e4e4e4"
>
<div class="row q-pl-md">
<div class="col">
<div class="text-weight-light">ตำแหน่งเลขที่</div>
<div class="text-weight-medium">{{ props.row.posNo }}</div>
</div>
<div class="col">
<div class="text-weight-light">ตำแหน่ง</div>
<div class="text-weight-medium">
{{ props.row.position }}
</div>
</div>
</div>
<div class="row q-pl-md q-pt-md">
<div class="col">
<div class="text-weight-light">ประเภท</div>
<div class="text-weight-medium">
{{ props.row.posType }}
</div>
</div>
<div class="col">
<div class="text-weight-light">ระดับชั้นงาน</div>
<div class="text-weight-medium">
{{ props.row.posLevel }}
</div>
</div>
</div>
</q-card>
</div>
<q-separator class="" color="" />
<div class="see-more text-center q-py-md" style="width: 100%">
<span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
</div>
</q-card> -->
<!-- </div> -->
</template>
<template v-slot:pagination="scope">
<q-pagination

6
src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue
View file

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

6
src/modules/04_registryNew/components/detail/PersonalInformation/02_NameChangeHistory.vue
View file

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

6
src/modules/04_registryNew/components/detail/PersonalInformation/03_Address.vue
View file

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

6
src/modules/04_registryNew/components/detail/PersonalInformation/04_Family.vue
View file

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

6
src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue
View file

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

6
src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue
View file

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

64
src/modules/04_registryNew/components/detail/PersonalInformation/Main.vue Normal file
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>

76
src/modules/04_registryNew/components/detail/TabMain.vue
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>