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

View file

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

View file

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