ทะเบียนประวัติ
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
5ebc021f4e
commit
f6f28dd101
12 changed files with 310 additions and 63 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
const mainPage = () => import("@/modules/04_registryNew/views/main.vue");
|
||||
const listPage = () => import("@/modules/04_registryNew/views/list.vue");
|
||||
const detailPage = () =>
|
||||
import("@/modules/04_registryNew/views/detailView.vue");
|
||||
|
||||
export default [
|
||||
{
|
||||
|
|
@ -12,6 +14,17 @@ export default [
|
|||
Role: "organization",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/registry-new/:id",
|
||||
name: "registryNewByid",
|
||||
component: detailPage,
|
||||
meta: {
|
||||
Auth: true,
|
||||
Key: [7],
|
||||
Role: "organization",
|
||||
},
|
||||
},
|
||||
|
||||
// {
|
||||
// path: "/registry-new/list",
|
||||
// name: "registryNewList",
|
||||
|
|
|
|||
11
src/modules/04_registryNew/stores/DetailMain.ts
Normal file
11
src/modules/04_registryNew/stores/DetailMain.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
import { ref } from "vue";
|
||||
|
||||
export const useRegistryDetailNewDataStore = defineStore(
|
||||
"registryNewDetail",
|
||||
() => {
|
||||
const tabMain = ref<string>("1");
|
||||
return { tabMain };
|
||||
}
|
||||
);
|
||||
|
|
@ -1,6 +1,100 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import TabMain from "@/modules/04_registryNew/components/detail/TabMain.vue";
|
||||
|
||||
const router = useRouter();
|
||||
</script>
|
||||
<template>
|
||||
<div></div>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<div class="toptitle text-dark row items-center q-py-xs">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.go(-1)"
|
||||
/>
|
||||
ทะเบียนประวัติ
|
||||
</div>
|
||||
<q-space />
|
||||
<q-btn-dropdown
|
||||
size="16px"
|
||||
rounded
|
||||
unelevated
|
||||
color="grey-4"
|
||||
text-color="red"
|
||||
icon="mdi-home-export-outline"
|
||||
dropdown-icon="mdi-chevron-down"
|
||||
>
|
||||
<q-list>
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar>
|
||||
<q-avatar icon="folder" color="primary" text-color="white" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Photos</q-item-label>
|
||||
<q-item-label caption>February 22, 2016</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="info" color="amber" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-close-popup>
|
||||
<q-item-section avatar>
|
||||
<q-avatar icon="assignment" color="secondary" text-color="white" />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Vacation</q-item-label>
|
||||
<q-item-label caption>February 22, 2016</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-icon name="info" color="amber" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-btn-dropdown>
|
||||
<q-btn
|
||||
unelevated
|
||||
round
|
||||
color="grey-4"
|
||||
text-color="primary"
|
||||
icon="mdi-file-eye-outline"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-card>
|
||||
<div class="column" style="height: 150px; position: relative">
|
||||
<div class="col justify-center"></div>
|
||||
<div class="absolute-center-left q-ml-lg">
|
||||
<q-avatar size="130px">
|
||||
<img src="https://cdn.quasar.dev/img/avatar2.jpg" />
|
||||
</q-avatar>
|
||||
<q-btn
|
||||
round
|
||||
color="white"
|
||||
text-color="primary"
|
||||
icon="mdi-pencil-outline"
|
||||
style="position: absolute; bottom: 0; right: 0"
|
||||
/>
|
||||
</div>
|
||||
<div class="col bg-teal-2"></div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="q-mt-md">
|
||||
<TabMain />
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.absolute-center-left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue