fix Load การลา

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-06-16 11:15:31 +07:00
parent 3817416ba9
commit ce94ea009a
5 changed files with 184 additions and 80 deletions

View file

@ -118,8 +118,11 @@ const columns = ref<QTableProps["columns"]>([
},
]);
const isloading = ref<boolean>(false);
/** function เรียกข้อมูลตารางสถิติการลา*/
async function fetchStatsTable() {
isloading.value = true;
await http
.get(config.API.leaveStats())
.then((res) => {
@ -168,9 +171,11 @@ async function fetchStatsTable() {
leaveCountReject: e.leaveCountReject,
leaveCountDelete: e.leaveCountDelete,
}));
isloading.value = false;
})
.catch((err) => {
messageError($q, err);
isloading.value = true;
});
}
@ -210,7 +215,7 @@ onMounted(async () => {
<div class="col-xs-12 col-sm-12 col-md-11 row">
<!-- สถการลา -->
<div class="col-12 row q-pb-sm">
<q-card bordered class="col-12 row">
<q-card bordered class="col-12 row" v-if="!isloading">
<div class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถการลา</div>
<q-space />
@ -230,12 +235,7 @@ onMounted(async () => {
:key="item.text"
>
<div class="col-xs-12 col-sm-12">
<q-card
bordered
flat
class="col-12 row shadow-0 no-wrap"
v-if="item.text === 'ลาพักผ่อน'"
>
<q-card bordered flat class="col-12 row shadow-0 no-wrap">
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
<div class="col-12 row items-center justify-center q-pb-sm">
<q-knob
@ -327,6 +327,91 @@ onMounted(async () => {
</div>
</div>
</q-card>
<q-card bordered class="col-12 row q-px-md q-py-sm" v-else>
<div class="row col-12 items-center q-px-md q-py-sm">
<div class="text-weight-bold">สถการลา</div>
<q-space />
<q-skeleton type="QBtn" size="20px" style="width: 100px" />
</div>
<div
bordered
class="col-6 row justify-center q-px-md q-pb-md q-col-gutter-sm"
>
<div class="col-xs-12 col-sm-12">
<q-card bordered flat class="col-12 row shadow-0 no-wrap">
<div class="col-xs-12 col-sm-8 row justify-center q-py-md">
<div class="col-12 row items-center justify-center q-pb-sm">
<q-skeleton type="circle" size="60px" />
<div class="col-12 row items-center justify-center">
<q-skeleton type="text" size="20px" style="width: 50px" />
</div>
</div>
</div>
<div class="row gt-xs"><q-separator vertical /></div>
<div class="col-xs-12 col-sm-4 gt-xs row">
<div class="col-12 row text-dark text-body2 items-center">
<div class="col-12 row q-pa-xs q-px-md row">
<span class="text-grey-7 col-6">ได</span>
<q-skeleton type="text" style="width: 50px" />
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 row q-pa-xs q-px-md">
<span class="text-grey-7 col-6">ใชไป</span>
<q-skeleton type="text" style="width: 50px" />
</div>
<div class="col-12"><q-separator /></div>
<div class="col-12 row q-pa-xs q-px-md">
<span class="text-grey-7 col-6">คงเหล</span>
<q-skeleton type="text" style="width: 50px" />
</div>
</div>
</div>
</q-card>
</div>
</div>
<div class="col-6 row">
<div bordered class="col-12 row justify-center q-px-md q-pb-md">
<div class="col-xs-12 col-sm-12 row">
<div class="col-12 row">
<q-card
bordered
flat
class="shadow-0 col-12 fit row items-center q-px-lg"
>
<div class="text-subtitle2 col-4">
<q-skeleton type="text" style="width: 50px" />
</div>
<div class="text-subtitle2 col-8 row">
<span class="text-grey-7 q-pr-md">ใชไป</span>
<q-skeleton type="text" style="width: 50px" />
</div>
</q-card>
</div>
</div>
</div>
<div bordered class="col-12 row justify-center q-px-md q-pb-md">
<div class="col-xs-12 col-sm-12 row">
<div class="col-12 row">
<q-card
bordered
flat
class="shadow-0 col-12 fit row items-center q-px-lg"
>
<div class="text-subtitle2 col-4">
<q-skeleton type="text" style="width: 50px" />
</div>
<div class="text-subtitle2 col-8 row">
<span class="text-grey-7 q-pr-md">ใชไป</span>
<q-skeleton type="text" style="width: 50px" />
</div>
</q-card>
</div>
</div>
</div>
</div>
</q-card>
</div>
<div class="row col-12">