UI ข้อมูลทะเบียนประวัติ(ยังไม่เสร็จ)
This commit is contained in:
STW_TTTY\stwtt
parent
3221535748
commit
8e7e120d73
10 changed files with 958 additions and 0 deletions
232
src/modules/10_registry/views/main.vue
Normal file
232
src/modules/10_registry/views/main.vue
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue