fix Load การลา
This commit is contained in:
parent
3817416ba9
commit
ce94ea009a
5 changed files with 184 additions and 80 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue