fix:load skeleton
This commit is contained in:
setthawutttty
parent
7cdff8d853
commit
cacb84bb48
20 changed files with 894 additions and 309 deletions
|
|
@ -14,6 +14,8 @@ import type {
|
|||
ProbationFormType,
|
||||
} from "@/modules/11_probation/interface/index/main";
|
||||
|
||||
import SkeletonTable from "@/components/SkeletonTable.vue";
|
||||
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
|
|
@ -29,6 +31,7 @@ const profileId = ref<string>("");
|
|||
const rows = ref<ListMain[]>([]);
|
||||
const rowsData = ref<ListMain[]>([]);
|
||||
|
||||
const isLoad = ref<boolean>(false);
|
||||
const mode = ref<boolean>($q.screen.gt.xs);
|
||||
const profileImg = ref<string>("");
|
||||
const router = useRouter();
|
||||
|
|
@ -112,7 +115,7 @@ function onResize(size: any) {
|
|||
}
|
||||
|
||||
function getMain() {
|
||||
showLoader();
|
||||
isLoad.value = true;
|
||||
http
|
||||
.get(config.API.kpiEvaluation + `/${route.params.id.toString()}`)
|
||||
// .get(config.API.profilePosition())
|
||||
|
|
@ -134,11 +137,11 @@ function getMain() {
|
|||
promises.push(getAvatar(data.profileId));
|
||||
|
||||
await Promise.all(promises);
|
||||
hideLoader();
|
||||
isLoad.value = false;
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
isLoad.value = false;
|
||||
})
|
||||
.finally(() => {});
|
||||
}
|
||||
|
|
@ -221,22 +224,31 @@ onMounted(async () => {
|
|||
<div v-if="$q.screen.gt.xs" class="col-12">
|
||||
<q-card>
|
||||
<div class="bg-grey-1 row q-pa-sm items-center">
|
||||
<span class="text-teal text-weight-bold text-body2">{{
|
||||
formData.firstName
|
||||
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||||
: "-"
|
||||
}}</span>
|
||||
<span class="text-teal text-weight-bold text-body2">
|
||||
<div v-if="!isLoad">
|
||||
{{
|
||||
formData.firstName
|
||||
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" />
|
||||
</span>
|
||||
</div>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-card-section class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col-2 text-center self-center">
|
||||
<q-avatar :size="sizeImg" rounded>
|
||||
<div
|
||||
class="col-2 text-center self-center"
|
||||
style="display: flex; justify-content: center"
|
||||
>
|
||||
<q-avatar v-if="!isLoad" :size="sizeImg" rounded>
|
||||
<q-img
|
||||
:src="profileImg"
|
||||
style="border-radius: 10px; object-fit: cover"
|
||||
/>
|
||||
</q-avatar>
|
||||
<q-skeleton v-else type="QRadio" size="70px" />
|
||||
</div>
|
||||
<div class="col-10 column justify-center no-wrap">
|
||||
<div class="row text-grey-6">
|
||||
|
|
@ -247,7 +259,10 @@ onMounted(async () => {
|
|||
<div class="row">
|
||||
<div class="col-4 column">
|
||||
<span>
|
||||
{{ formData.position ? formData.position : "-" }}
|
||||
<div v-if="!isLoad">
|
||||
{{ formData.position ? formData.position : "-" }}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="90px" />
|
||||
</span>
|
||||
<span>
|
||||
{{
|
||||
|
|
@ -258,16 +273,22 @@ onMounted(async () => {
|
|||
</span>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
{{
|
||||
formData.posTypeName
|
||||
? formData.posLevelName
|
||||
? `${formData.posTypeName}(${formData.posLevelName})`
|
||||
: formData.posTypeName
|
||||
: "-"
|
||||
}}
|
||||
<div v-if="!isLoad">
|
||||
{{
|
||||
formData.posTypeName
|
||||
? formData.posLevelName
|
||||
? `${formData.posTypeName}(${formData.posLevelName})`
|
||||
: formData.posTypeName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="90px" />
|
||||
</div>
|
||||
<div class="col-4">
|
||||
{{ formData.org ? formData.org : "-" }}
|
||||
<div v-if="!isLoad">
|
||||
{{ formData.org ? formData.org : "-" }}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" width="90px" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -278,21 +299,27 @@ onMounted(async () => {
|
|||
<div v-else class="col-12">
|
||||
<q-card bordered>
|
||||
<div class="bg-grey-1 row q-pa-sm items-center">
|
||||
<span class="text-teal text-weight-bold text-body2">{{
|
||||
formData.firstName
|
||||
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||||
: "-"
|
||||
}}</span>
|
||||
<span class="text-teal text-weight-bold text-body2">
|
||||
<div v-if="!isLoad">
|
||||
{{
|
||||
formData.firstName
|
||||
? `${formData.prefix}${formData.firstName} ${formData.lastName}`
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" />
|
||||
</span>
|
||||
</div>
|
||||
<q-resize-observer @resize="onResize" />
|
||||
<q-card-section>
|
||||
<div class="text-center q-mt-md">
|
||||
<q-avatar :size="sizeImg" rounded>
|
||||
<div class="text-center q-mt-md" style="display: flex;justify-content: center;">
|
||||
<q-avatar v-if="!isLoad" :size="sizeImg" rounded>
|
||||
<img
|
||||
:src="profileImg"
|
||||
style="border-radius: 10px; object-fit: cover"
|
||||
/>
|
||||
</q-avatar>
|
||||
<q-skeleton v-else type="QRadio" size="70px" />
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
|
|
@ -302,25 +329,34 @@ onMounted(async () => {
|
|||
<q-item-label class="text-grey-6"
|
||||
>ตำแหน่งในสายงาน</q-item-label
|
||||
>
|
||||
<q-item-label>{{
|
||||
formData.position ? formData.position : "-"
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<div v-if="!isLoad">
|
||||
{{ formData.position ? formData.position : "-" }}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" />
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-grey-6">ระดับ</q-item-label>
|
||||
<q-item-label>{{
|
||||
formData.posLevelName ? formData.posLevelName : "-"
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<div v-if="!isLoad">
|
||||
{{ formData.posLevelName ? formData.posLevelName : "-" }}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" />
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-grey-6">สังกัด</q-item-label>
|
||||
<q-item-label>{{
|
||||
formData.org ? formData.org : "-"
|
||||
}}</q-item-label>
|
||||
<q-item-label>
|
||||
<div v-if="!isLoad">
|
||||
{{ formData.org ? formData.org : "-" }}
|
||||
</div>
|
||||
<q-skeleton v-else type="text" />
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
|
@ -361,6 +397,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="q-mt-sm">
|
||||
<d-table
|
||||
v-if="!isLoad"
|
||||
flat
|
||||
dense
|
||||
bordered
|
||||
|
|
@ -442,6 +479,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
</template>
|
||||
</d-table>
|
||||
<SkeletonTable v-else :columns="columns" />
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue