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

fix loading Skeleton

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-08-05 15:15:49 +07:00
parent ff6101067e
commit 016132096e
63 changed files with 3468 additions and 3452 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/modules/10_registry/views/main.vue
View file

@ -1,44 +1,51 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useDataStore } from "@/stores/data";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import genReport from "@/plugins/genreport";
import { ref, computed, onMounted } from "vue";
import { useQuasar } from "quasar";
//หน้าเมนู
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { useRouter } from "vue-router";
import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
import { useDataStore } from "@/stores/data";
import { useCounterMixin } from "@/stores/mixin";
/** import components */
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 Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
import { useQuasar } from "quasar";
const store = useRegistryInFormationStore();
const $q = useQuasar();
const dataStore = useDataStore();
const mixin = useCounterMixin();
const { messageError, showLoader, hideLoader } = mixin;
const router = useRouter();
const tab = ref<string>("information");
const store = useRegistryInFormationStore();
const dataStore = useDataStore();
const { messageError, showLoader, hideLoader } = useCounterMixin();
const tab = ref<string>("information"); // ตัวแปรสำหรับเก็บชื่อแท็บที่เลือก
const sizeImg = ref<string>(""); // ขนาดของรูปภาพโปรไฟล์
/** ข้อความแสดงชื่อเงินเดือนหรือค่าจ้าง */
const salaryText = computed(() => {
return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
});
const sizeImg = ref<string>("");
function onResize(size: any) {
/**
* ฟังก์ชันจัดการขนาดของรูปภาพโปรไฟล์
* @param size ขนาดที่ได้จาก q-resize-observer
*/
function onResize(size: { width: number; height: number }) {
const width = size.width > 100 ? 100 : size.width;
sizeImg.value = `${width}px`;
}
function onMobile(type: string) {
router.push(`/registry/${type}`);
}
/**
* ฟังก์ชันดาวน์โหลดไฟล์ ก.พ.7/ก.ก.1 หรือประวัติแบบย่อ
* @param type ประเภทไฟล์ที่ต้องการดาวน์โหลด
* FULL: ก.พ.7/ก.ก.1
* SHORT: ประวัติแบบย่อ
*/
async function onClickDownloadKp7(type: string) {
showLoader();
const url =
@ -66,19 +73,19 @@ async function onClickDownloadKp7(type: string) {
});
}
/**
* ฟังชั่นกลับหน้าหลัก
*/
/** ฟังชั่นกลับหน้าหลัก*/
const clickBack = () => {
router.push(`/`);
};
/**
* function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
*/
/** ฟังก์ชัน redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล*/
function redirectToPagePetition() {
router.push(`/registry/request-edit`);
}
function onMobile(type: string) {
router.push(`/registry/${type}`);
}
</script>
<template>
@ -106,7 +113,40 @@ function redirectToPagePetition() {
</div>
<div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
<div class="col-3">
<q-card bordered>
<q-card v-if="dataStore.isLoadingProfile" bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="relative-position" style="height: 120px">
<div class="absolute-center">
<q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
</div>
</div>
<div class="column items-center q-mt-md q-mb-sm q-gutter-sm">
<q-skeleton type="text" width="120px" />
<q-skeleton type="text" width="150px" />
<q-skeleton type="text" width="100px" />
<q-skeleton type="text" width="50px" />
</div>
</q-card-section>
<q-list separator class="q-mt-md">
<q-item v-for="i in 2" :key="i">
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
<q-item-section>
<q-skeleton type="text" />
</q-item-section>
</q-item>
</q-list>
<q-card-section class="q-gutter-y-sm">
<q-skeleton type="QBtn" class="full-width" height="48px" />
<q-skeleton type="QBtn" class="full-width" height="48px" />
</q-card-section>
</q-card>
<q-card v-else bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="relative-position" style="height: 120px">
@ -220,8 +260,6 @@ function redirectToPagePetition() {
<q-separator />
<!-- รายการเเต่ละหน้า -->
<q-tab-panels v-model="tab" animated>
<q-tab-panel name="information">
<InformationPage />
@ -248,7 +286,41 @@ function redirectToPagePetition() {
</div>
<div v-else>
<q-card bordered>
<q-card v-if="dataStore.isLoadingProfile" bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="relative-position" style="height: 120px">
<div class="absolute-center">
<q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
</div>
</div>
<div class="column items-center q-mt-md q-mb-lg q-gutter-sm">
<q-skeleton type="text" width="120px" />
<q-skeleton type="text" width="150px" />
<q-skeleton type="text" width="100px" />
<q-skeleton type="text" width="50px" />
</div>
<div class="row justify-center q-gutter-x-lg">
<q-skeleton type="QRadio" size="48px" />
<q-skeleton type="QRadio" size="48px" />
</div>
<q-list separator class="q-mt-md">
<q-item v-for="i in 5" :key="i">
<q-item-section>
<q-skeleton type="text" width="120px" height="16px" />
</q-item-section>
<q-item-section avatar>
<q-skeleton type="QIcon" size="24px" />
</q-item-section>
</q-item>
</q-list>
</q-card-section>
</q-card>
<q-card v-else bordered>
<q-resize-observer @resize="onResize" />
<q-card-section>
<div class="text-center q-mt-md">