232 lines
8.7 KiB
Vue
232 lines
8.7 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import avatar from "@/assets/avatar_user.jpg";
|
||
|
|
import { ref, reactive } from "vue";
|
||
|
|
|
||
|
|
//หน้าเมนู
|
||
|
|
import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
|
||
|
|
import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
|
||
|
|
import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
|
||
|
|
import InsigniaPage from "@/modules/10_registry/tabs/04_insignia.vue";
|
||
|
|
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
|
||
|
|
import { useRouter } from "vue-router";
|
||
|
|
|
||
|
|
const router = useRouter();
|
||
|
|
const tab = ref<string>("information");
|
||
|
|
const formData = reactive<any>({
|
||
|
|
prefix: "นาง",
|
||
|
|
firstName: "กัณฐิมา",
|
||
|
|
lastName: "กาฬสินธุ์",
|
||
|
|
position: "นักบริหาร",
|
||
|
|
posName: "หัวหน้าสำนักงาน",
|
||
|
|
posType: "บริหาร",
|
||
|
|
posLevel: "ชำนาญการพิเศษ",
|
||
|
|
});
|
||
|
|
const sizeImg = ref<string>("");
|
||
|
|
function onResize(size: any) {
|
||
|
|
const width = size.width > 100 ? 100 : size.width;
|
||
|
|
sizeImg.value = `${width}px`;
|
||
|
|
}
|
||
|
|
|
||
|
|
function onMobile(type: string) {
|
||
|
|
console.log(1111);
|
||
|
|
router.push(`/registry/${type}`);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<div class="row justify-center">
|
||
|
|
<div class="col-xs-12 col-sm-12 col-md-11">
|
||
|
|
<div class="toptitle text-white col-12 row items-center">
|
||
|
|
ข้อมูลทะเบียนประวัติ
|
||
|
|
</div>
|
||
|
|
<div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
|
||
|
|
<div class="col-3">
|
||
|
|
<q-card bordered>
|
||
|
|
<q-resize-observer @resize="onResize" />
|
||
|
|
<q-card-section>
|
||
|
|
<div class="text-center">
|
||
|
|
<q-avatar :size="sizeImg">
|
||
|
|
<img
|
||
|
|
:src="avatar"
|
||
|
|
style="border-radius: 50%; object-fit: cover"
|
||
|
|
/>
|
||
|
|
</q-avatar>
|
||
|
|
</div>
|
||
|
|
<div class="column text-center q-mt-md q-mb-lg">
|
||
|
|
<span class="text-teal text-weight-medium">{{
|
||
|
|
formData.firstName
|
||
|
|
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||
|
|
: "-"
|
||
|
|
}}</span>
|
||
|
|
<span class="text-grey text-weight-medium">{{
|
||
|
|
formData.position ? `${formData.position}` : "-"
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
|
||
|
|
<q-list separator class="q-mt-md">
|
||
|
|
<q-separator />
|
||
|
|
<q-item>
|
||
|
|
<q-item-section class="text-grey-6"
|
||
|
|
>ตำแหน่งในสายงาน</q-item-section
|
||
|
|
>
|
||
|
|
<q-item-section>{{ formData.posName }}</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item>
|
||
|
|
<q-item-section class="text-grey-6">ประเภท</q-item-section>
|
||
|
|
<q-item-section>{{ formData.posType }}</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item>
|
||
|
|
<q-item-section class="text-grey-6"
|
||
|
|
>ระดับชั้นงาน</q-item-section
|
||
|
|
>
|
||
|
|
<q-item-section>{{ formData.posLevel }}</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
|
||
|
|
<q-card-section class="q-gutter-y-sm">
|
||
|
|
<q-btn class="full-width" unelevated color="blue-6"
|
||
|
|
><q-icon left size="2em" name="mdi-file-download-outline" />
|
||
|
|
<div>ดาวน์โหลดประวัติแบบย่อ</div></q-btn
|
||
|
|
>
|
||
|
|
<q-btn class="full-width" unelevated color="primary"
|
||
|
|
><q-icon left size="2em" name="mdi-folder-download-outline" />
|
||
|
|
<div>ดาวน์โหลด ก.พ.7/ก.ก. 1</div></q-btn
|
||
|
|
>
|
||
|
|
</q-card-section>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
<div class="col-9">
|
||
|
|
<q-card bordered>
|
||
|
|
<q-tabs
|
||
|
|
v-model="tab"
|
||
|
|
inline-label
|
||
|
|
active-color="blue-6"
|
||
|
|
class="bg-grey-1 text-grey-6 shadow-2"
|
||
|
|
align="left"
|
||
|
|
>
|
||
|
|
<q-tab name="information" label="ข้อมูลส่วนตัว" class="bg-active"/>
|
||
|
|
<q-tab name="government" label="ข้อมูลราชการ" />
|
||
|
|
<q-tab name="salary" label="ข้อมูลเงินเดือน/ค่าจ้าง" />
|
||
|
|
<q-tab name="insignia" label="ข้อมูลเครื่องราชฯ" />
|
||
|
|
<q-tab name="other" label="ข้อมูลอื่นๆ" />
|
||
|
|
</q-tabs>
|
||
|
|
|
||
|
|
<q-separator />
|
||
|
|
|
||
|
|
<!-- รายการเเต่ละหน้า -->
|
||
|
|
|
||
|
|
<q-tab-panels v-model="tab" animated>
|
||
|
|
<q-tab-panel name="information">
|
||
|
|
<InformationPage />
|
||
|
|
</q-tab-panel>
|
||
|
|
|
||
|
|
<q-tab-panel name="government">
|
||
|
|
<GovernmentPage />
|
||
|
|
</q-tab-panel>
|
||
|
|
|
||
|
|
<q-tab-panel name="salary">
|
||
|
|
<SalaryPage />
|
||
|
|
</q-tab-panel>
|
||
|
|
|
||
|
|
<q-tab-panel name="insignia">
|
||
|
|
<InsigniaPage />
|
||
|
|
</q-tab-panel>
|
||
|
|
|
||
|
|
<q-tab-panel name="other">
|
||
|
|
<OtherPage />
|
||
|
|
</q-tab-panel>
|
||
|
|
</q-tab-panels>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div v-else>
|
||
|
|
<q-card bordered>
|
||
|
|
<q-resize-observer @resize="onResize" />
|
||
|
|
<q-card-section>
|
||
|
|
<div class="text-center">
|
||
|
|
<q-avatar :size="sizeImg">
|
||
|
|
<img
|
||
|
|
:src="avatar"
|
||
|
|
style="border-radius: 50%; object-fit: cover"
|
||
|
|
/>
|
||
|
|
</q-avatar>
|
||
|
|
</div>
|
||
|
|
<div class="column text-center q-mt-md q-mb-lg">
|
||
|
|
<span class="text-teal text-weight-medium">{{
|
||
|
|
formData.firstName
|
||
|
|
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||
|
|
: "-"
|
||
|
|
}}</span>
|
||
|
|
<span class="text-grey text-weight-medium">{{
|
||
|
|
formData.position ? `${formData.position}` : "-"
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-center q-gutter-x-lg">
|
||
|
|
<q-btn
|
||
|
|
color="light-blue-1"
|
||
|
|
dense
|
||
|
|
round
|
||
|
|
unelevated
|
||
|
|
text-color="light-blue-5"
|
||
|
|
size="14px"
|
||
|
|
icon="mdi-file-download-outline"
|
||
|
|
></q-btn>
|
||
|
|
<q-btn
|
||
|
|
color="teal-1"
|
||
|
|
text-color="primary"
|
||
|
|
dense
|
||
|
|
unelevated
|
||
|
|
round
|
||
|
|
size="14px"
|
||
|
|
icon="mdi-folder-download-outline"
|
||
|
|
></q-btn>
|
||
|
|
<q-btn
|
||
|
|
color="red-1"
|
||
|
|
text-color="red-12"
|
||
|
|
unelevated
|
||
|
|
dense
|
||
|
|
round
|
||
|
|
size="14px"
|
||
|
|
icon="mdi-logout"
|
||
|
|
></q-btn>
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
|
||
|
|
<q-list separator class="q-mt-md">
|
||
|
|
<q-item clickable v-ripple @click="onMobile('information')">
|
||
|
|
<q-item-section>ข้อมูลส่วนตัว</q-item-section>
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple @click="onMobile('government')">
|
||
|
|
<q-item-section>ข้อมูลราชการ</q-item-section>
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple @click="onMobile('salary')">
|
||
|
|
<q-item-section>ข้อมูลเงินเดือน/ค่าจ้าง</q-item-section>
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple @click="onMobile('insignia')">
|
||
|
|
<q-item-section>ข้อมูลผลงาน</q-item-section>
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
<q-item clickable v-ripple @click="onMobile('other')">
|
||
|
|
<q-item-section>ข้อมูลอื่นๆ</q-item-section>
|
||
|
|
<q-item-section avatar>
|
||
|
|
<q-avatar text-color="info" icon="mdi-chevron-right" />
|
||
|
|
</q-item-section>
|
||
|
|
</q-item>
|
||
|
|
</q-list>
|
||
|
|
</q-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|