fix loading Skeleton
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
ff6101067e
commit
016132096e
63 changed files with 3468 additions and 3452 deletions
|
|
@ -9,12 +9,15 @@ import config from "@/app.config";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
import HeaderDialog from "@/components/DialogHeader.vue";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const mixins = useCounterMixin();
|
||||
const { showLoader, hideLoader, date2Thai, messageError } = mixins;
|
||||
|
||||
const isLoading = ref<boolean>(false);
|
||||
|
||||
const evaluateId = computed(() => {
|
||||
const id = route.params.id ? route.params.id.toString() : "";
|
||||
return id;
|
||||
|
|
@ -85,7 +88,7 @@ async function fetchListHistory(id: string) {
|
|||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
};
|
||||
showLoader();
|
||||
isLoading.value = true;
|
||||
await http
|
||||
.get(config.API.evaluationHistory(id))
|
||||
.then((res) => {
|
||||
|
|
@ -104,7 +107,7 @@ async function fetchListHistory(id: string) {
|
|||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
isLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -124,7 +127,9 @@ watch(
|
|||
<q-card-section>
|
||||
<div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
|
||||
<div class="col-12">
|
||||
<q-table
|
||||
<SkeletonTable v-if="isLoading" :columns="columns" />
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
|
|
@ -161,7 +166,7 @@ watch(
|
|||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</q-table>
|
||||
</d-table>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -169,31 +174,4 @@ watch(
|
|||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-header-table {
|
||||
height: auto;
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const props = defineProps({
|
||||
columns: {
|
||||
type: Array as () => any[],
|
||||
|
|
@ -8,12 +10,18 @@ const props = defineProps({
|
|||
type: Array as () => any[],
|
||||
require: true,
|
||||
},
|
||||
isLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="q-pa-sm row col-12">
|
||||
<SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ div
|
|||
<script setup lang="ts">
|
||||
import { reactive, onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import { is, useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
|
@ -21,6 +21,7 @@ import type {
|
|||
/** importComponents*/
|
||||
import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
|
||||
import HeaderDialog from "@/components/DialogHeader.vue";
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
/** use*/
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -29,8 +30,7 @@ const storeEva = useEvaluateStore();
|
|||
const storeData = useDataStore();
|
||||
const $q = useQuasar();
|
||||
const route = useRoute();
|
||||
const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
|
||||
mixin;
|
||||
const { messageError, date2Thai, findOrgNameHtml } = mixin;
|
||||
const {
|
||||
columnsCertificates,
|
||||
columnSalaries,
|
||||
|
|
@ -76,8 +76,19 @@ const formDetail = reactive<any>({
|
|||
honor: [],
|
||||
});
|
||||
|
||||
const isLoading = reactive({
|
||||
loadDetail: false,
|
||||
loadEducation: false,
|
||||
loadCertificate: false,
|
||||
loadSalary: false,
|
||||
loadTraining: false,
|
||||
loadAssessment: false,
|
||||
loadExperience: false,
|
||||
});
|
||||
|
||||
/** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
|
||||
async function fetchDetail() {
|
||||
isLoading.loadDetail = true;
|
||||
try {
|
||||
if (!storeData.dataprofilePosition) {
|
||||
const res = await http.get(config.API.profilePosition());
|
||||
|
|
@ -87,6 +98,8 @@ async function fetchDetail() {
|
|||
}
|
||||
} catch (error) {
|
||||
messageError($q, error);
|
||||
} finally {
|
||||
isLoading.loadDetail = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -109,58 +122,113 @@ async function updateFormDetail(data: DataProfile) {
|
|||
formDetail.posExecutive = data.posExecutiveName;
|
||||
formDetail.positionArea = data.positionArea;
|
||||
await fetchDataAllDetail();
|
||||
|
||||
emit("update:formDeital", formDetail);
|
||||
}
|
||||
|
||||
async function fetchDataAllDetail() {
|
||||
// ดึงข้อมูลประวัติการศึกษา
|
||||
http.get(config.API.dataUserEducations).then((res) => {
|
||||
formDetail.educations = res.data.result;
|
||||
});
|
||||
isLoading.loadEducation = true;
|
||||
http
|
||||
.get(config.API.dataUserEducations)
|
||||
.then((res) => {
|
||||
formDetail.educations = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.then(() => {
|
||||
isLoading.loadEducation = false;
|
||||
});
|
||||
|
||||
// ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
|
||||
http.get(config.API.dataUserCertificate("certificate")).then((res) => {
|
||||
formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: e.expireDate,
|
||||
issueDate: e.issueDate,
|
||||
issuer: e.issuer,
|
||||
}));
|
||||
});
|
||||
isLoading.loadCertificate = true;
|
||||
http
|
||||
.get(config.API.dataUserCertificate("certificate"))
|
||||
.then((res) => {
|
||||
formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: e.expireDate,
|
||||
issueDate: e.issueDate,
|
||||
issuer: e.issuer,
|
||||
}));
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.loadCertificate = false;
|
||||
});
|
||||
|
||||
// ดึงข้อมูลประวัติการรับราชการ
|
||||
http.get(config.API.dataUserSalaryPosition).then((res) => {
|
||||
formDetail.salaries = res.data.result;
|
||||
});
|
||||
isLoading.loadSalary = true;
|
||||
http
|
||||
.get(config.API.dataUserSalaryPosition)
|
||||
.then((res) => {
|
||||
formDetail.salaries = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.loadSalary = false;
|
||||
});
|
||||
|
||||
// ดึงข้อมูลประวัติการฝึกอบรมดูงาน
|
||||
http.get(config.API.dataUserCertificate("training")).then((res) => {
|
||||
formDetail.trainings = res.data.result.map((e: any) => ({
|
||||
dateOrder: e.dateOrder,
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: e.endDate,
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: e.startDate,
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
});
|
||||
isLoading.loadTraining = true;
|
||||
http
|
||||
.get(config.API.dataUserCertificate("training"))
|
||||
.then((res) => {
|
||||
formDetail.trainings = res.data.result.map((e: any) => ({
|
||||
dateOrder: e.dateOrder,
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: e.endDate,
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: e.startDate,
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.loadTraining = false;
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserPerformance).then((res) => {
|
||||
formDetail.assessments = res.data.result.map((e: any) => ({
|
||||
...e,
|
||||
isAdd: false,
|
||||
}));
|
||||
});
|
||||
// ดึงข้อมูลประสบการณ์ในการปฏิบัติงาน
|
||||
isLoading.loadExperience = true;
|
||||
http
|
||||
.get(config.API.dataUserPerformance)
|
||||
.then((res) => {
|
||||
formDetail.assessments = res.data.result.map((e: any) => ({
|
||||
...e,
|
||||
isAdd: false,
|
||||
}));
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.loadExperience = false;
|
||||
});
|
||||
|
||||
http.get(config.API.dataUserPortfolio).then((res) => {
|
||||
formDetail.experience = res.data.result;
|
||||
});
|
||||
// ดึงข้อมูลผลงานที่เคยเสนอขอ
|
||||
isLoading.loadExperience = true;
|
||||
http
|
||||
.get(config.API.dataUserPortfolio)
|
||||
.then((res) => {
|
||||
formDetail.experience = res.data.result;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.loadExperience = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -168,40 +236,52 @@ async function fetchDataAllDetail() {
|
|||
* @param id ประเมิน
|
||||
*/
|
||||
async function fetchCheckSpec(data: any) {
|
||||
formDetail.userId = data.id;
|
||||
formDetail.citizenId = data.citizenId;
|
||||
formDetail.prefix = data.prefix;
|
||||
formDetail.fullName = data.fullName;
|
||||
formDetail.position = data.position;
|
||||
formDetail.oc = data.oc;
|
||||
formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
|
||||
formDetail.positionLevel = data.positionLevel;
|
||||
formDetail.posNo = data.posNo;
|
||||
formDetail.birthDate = data.birthDate;
|
||||
formDetail.educations = data.educations;
|
||||
|
||||
formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: date2Thai(e.expireDate),
|
||||
issueDate: date2Thai(e.issueDate),
|
||||
issuer: e.issuer,
|
||||
}));
|
||||
formDetail.salaries = data.salaries;
|
||||
formDetail.trainings = data.trainings.map((e: any) => ({
|
||||
dateOrder: date2Thai(e.dateOrder),
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: date2Thai(e.endDate),
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: date2Thai(e.startDate),
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
formDetail.assessments = data.performances;
|
||||
formDetail.experience = data.portfolios;
|
||||
isLoading.loadEducation = true;
|
||||
isLoading.loadCertificate = true;
|
||||
isLoading.loadSalary = true;
|
||||
isLoading.loadTraining = true;
|
||||
isLoading.loadExperience = true;
|
||||
try {
|
||||
formDetail.userId = data.id;
|
||||
formDetail.citizenId = data.citizenId;
|
||||
formDetail.prefix = data.prefix;
|
||||
formDetail.fullName = data.fullName;
|
||||
formDetail.position = data.position;
|
||||
formDetail.oc = data.oc;
|
||||
formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
|
||||
formDetail.positionLevel = data.positionLevel;
|
||||
formDetail.posNo = data.posNo;
|
||||
formDetail.birthDate = data.birthDate;
|
||||
formDetail.educations = data.educations;
|
||||
formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
|
||||
certificateNo: e.certificateNo,
|
||||
certificateType: e.certificateType,
|
||||
expireDate: date2Thai(e.expireDate),
|
||||
issueDate: date2Thai(e.issueDate),
|
||||
issuer: e.issuer,
|
||||
}));
|
||||
formDetail.salaries = data.salaries;
|
||||
formDetail.trainings = data.trainings.map((e: any) => ({
|
||||
dateOrder: date2Thai(e.dateOrder),
|
||||
department: e.department,
|
||||
duration: e.duration,
|
||||
endDate: date2Thai(e.endDate),
|
||||
name: e.name,
|
||||
numberOrder: e.numberOrder,
|
||||
place: e.place,
|
||||
startDate: date2Thai(e.startDate),
|
||||
topic: e.topic,
|
||||
yearly: e.yearly,
|
||||
}));
|
||||
formDetail.assessments = data.performances;
|
||||
formDetail.experience = data.portfolios;
|
||||
} finally {
|
||||
isLoading.loadEducation = false;
|
||||
isLoading.loadCertificate = false;
|
||||
isLoading.loadSalary = false;
|
||||
isLoading.loadTraining = false;
|
||||
isLoading.loadExperience = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -218,6 +298,7 @@ function formattedNumber(x: number) {
|
|||
|
||||
/** get data */
|
||||
function getData() {
|
||||
isLoading.loadDetail = true;
|
||||
http
|
||||
.get(config.API.dataUserGovernment)
|
||||
.then(async (res) => {
|
||||
|
|
@ -229,6 +310,9 @@ function getData() {
|
|||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(() => {
|
||||
isLoading.loadDetail = false;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +382,6 @@ function onDeletePerformance(index: number) {
|
|||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
showLoader();
|
||||
const promises = [];
|
||||
|
||||
if (route.name === "evaluate-add") {
|
||||
|
|
@ -315,7 +398,6 @@ onMounted(async () => {
|
|||
} catch (error) {
|
||||
console.log(error);
|
||||
} finally {
|
||||
hideLoader();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -327,7 +409,10 @@ onMounted(async () => {
|
|||
:style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;'"
|
||||
>
|
||||
<div class="row col-12">
|
||||
<q-card class="col-12 cardSp1" bordered>
|
||||
<div class="col-12" v-if="isLoading.loadDetail">
|
||||
<q-skeleton type="Qcard" height="200px" class="q-mb-md" />
|
||||
</div>
|
||||
<q-card v-else class="col-12 cardSp1" bordered>
|
||||
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
||||
<span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
|
||||
</div>
|
||||
|
|
@ -430,7 +515,10 @@ onMounted(async () => {
|
|||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-card class="col-12 cardSp1" bordered>
|
||||
<div class="col-12" v-if="isLoading.loadEducation">
|
||||
<q-skeleton type="Qcard" height="200px" class="q-mb-md" />
|
||||
</div>
|
||||
<q-card v-else class="col-12 cardSp1" bordered>
|
||||
<div class="text-weight-bold row items-center bg-grey-2 col-12">
|
||||
<span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
|
||||
</div>
|
||||
|
|
@ -571,6 +659,7 @@ onMounted(async () => {
|
|||
class="col-12"
|
||||
:columns="columnsCertificates"
|
||||
:row="formDetail.certificates"
|
||||
:is-loading="isLoading.loadCertificate"
|
||||
/>
|
||||
</q-card>
|
||||
|
||||
|
|
@ -579,8 +668,14 @@ onMounted(async () => {
|
|||
<span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
|
||||
<div class="col-10">
|
||||
<SkeletonTable
|
||||
v-if="isLoading.loadSalary"
|
||||
:columns="columnSalaries"
|
||||
/>
|
||||
<d-table
|
||||
v-else
|
||||
ref="table"
|
||||
row-key="id"
|
||||
flat
|
||||
|
|
@ -637,6 +732,7 @@ onMounted(async () => {
|
|||
class="col-12"
|
||||
:columns="columnTraining"
|
||||
:row="formDetail.trainings"
|
||||
:is-loading="isLoading.loadTraining"
|
||||
/>
|
||||
</q-card>
|
||||
|
||||
|
|
@ -649,6 +745,7 @@ onMounted(async () => {
|
|||
class="col-12"
|
||||
:columns="columnExperience"
|
||||
:row="formDetail.experience"
|
||||
:is-loading="isLoading.loadExperience"
|
||||
/>
|
||||
</q-card>
|
||||
|
||||
|
|
@ -671,7 +768,13 @@ onMounted(async () => {
|
|||
<div class="col-12"><q-separator /></div>
|
||||
<div class="col-10">
|
||||
<div class="q-pa-sm row col-12">
|
||||
<SkeletonTable
|
||||
v-if="isLoading.loadExperience"
|
||||
:columns="columnAssessments"
|
||||
class="col-12"
|
||||
/>
|
||||
<d-table
|
||||
v-else
|
||||
flat
|
||||
bordered
|
||||
:columns="columnAssessments"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue