feat(leave): UI Show Card leaveWaitingSummary

This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2026-04-24 09:52:14 +07:00
parent 874bedf7eb
commit 433a0ce9b8
3 changed files with 43 additions and 14 deletions

View file

@ -82,6 +82,7 @@ const formData = reactive<FormData>({
status: "", //
leaveLimit: 0, //()
leaveSummary: 0, //()
leaveWaitingSummary: 0, //()
leaveRemain: 0, //()
leaveWrote: "", //
leaveAddress: "", //
@ -391,6 +392,9 @@ async function fetchDetailLeave(paramsId: string) {
formData.leaveRange = data.leaveRange;
formData.commanderPosition = data.commanderPosition;
formData.leaveRangeEnd = data.leaveRangeEnd;
formData.leaveWaitingSummary = data.leaveWaitingSummary
? data.leaveWaitingSummary
: "0";
keycloakUserId.value = data.keycloakUserId;
rows.value = {
commanders: data.commanders,
@ -773,40 +777,50 @@ onMounted(async () => {
</div>
</div>
<div class="col-xs-12 col-sm-7 row">
<div class="row col-12 q-gutter-md">
<div class="row col-12 q-col-gutter-md">
<div
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
class="col-3"
class="col-md-3 col-xs-6"
>
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-blue-10">
{{ formData.leaveLimit }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span class="gt-xs">ได</span>
<span>ได</span>
</div>
</q-card>
</div>
<div class="col-3">
<div class="col-md-3 col-xs-6">
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-light-blue-6">
{{ formData.leaveSummary }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span class="gt-xs">ใชไป</span>
<span>ใชไป</span>
</div>
</q-card>
</div>
<div
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
class="col-3"
class="col-md-3 col-xs-6"
>
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-indigo-7">
{{ formData.leaveRemain }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span class="gt-xs">คงเหล</span>
<span>คงเหล</span>
</div>
</q-card>
</div>
<div class="col-md-3 col-xs-6">
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-light-blue-6">
{{ formData.leaveWaitingSummary }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span>อยระหวางการพจารณา</span>
</div>
</q-card>
</div>

View file

@ -151,6 +151,7 @@ const formData = reactive<FormData>({
leaveSubTypeName: "",
commanderPosition: "",
leaveRangeEnd: "",
leaveWaitingSummary: 0, //()
});
const isLoadData = ref<boolean>(false);
@ -217,6 +218,9 @@ async function fetchDetailLeave(paramsId: string) {
formData.leaveLimit = data.leaveLimit;
formData.leaveSummary = data.leaveSummary;
formData.leaveRemain = data.leaveRemain;
formData.leaveWaitingSummary = data.leaveWaitingSummary
? data.leaveWaitingSummary
: 0;
formData.leaveWrote = data.leaveWrote;
formData.leaveAddress = data.leaveAddress;
formData.leaveNumber = data.leaveNumber;
@ -626,40 +630,50 @@ onMounted(async () => {
</div>
</div>
<div class="col-xs-12 col-sm-7 row">
<div class="row col-12 q-gutter-md">
<div class="row col-12 q-col-gutter-md">
<div
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
class="col-3"
class="col-md-3 col-xs-6"
>
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-blue-10">
{{ formData.leaveLimit }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span class="gt-xs">ได</span>
<span>ได</span>
</div>
</q-card>
</div>
<div class="col-3">
<div class="col-md-3 col-xs-6">
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-light-blue-6">
{{ formData.leaveSummary }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span class="gt-xs">ใชไป</span>
<span>ใชไป</span>
</div>
</q-card>
</div>
<div
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
class="col-3"
class="col-md-3 col-xs-6"
>
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-indigo-7">
{{ formData.leaveRemain }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span class="gt-xs">คงเหล</span>
<span>คงเหล</span>
</div>
</q-card>
</div>
<div class="col-md-3 col-xs-6">
<q-card bordered class="items-center row col-12 q-pa-md">
<div class="text-h6 text-weight-bold text-light-blue-6">
{{ formData.leaveWaitingSummary }}
</div>
<div class="col-12 text-subtitle2 text-weight-regular">
<span>อยระหวางการพจารณา</span>
</div>
</q-card>
</div>

View file

@ -41,6 +41,7 @@ interface FormData {
status: string; //สถานะการของลา
leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
leaveWaitingSummary: number; //ลาอยู่ระหว่างการพิจารณา(แต่ละประเภท)หน่วยเป็นวัน
leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
// leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
// leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา