hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix leave Skeleton Load

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-08-14 11:47:03 +07:00
parent 7cdff8d853
commit 474828c5ee
15 changed files with 282 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/modules/05_leave/components/FormLeave/01_SickForm.vue
View file

@ -15,8 +15,7 @@ const typeForm = defineModel<string>("type", { required: true });
const $q = useQuasar();
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
mixin;
const { date2Thai, messageError, convertDateToAPI } = mixin;
const edit = ref<boolean>(true);
const leaveDocumentRef = ref<any>(null);
@ -66,6 +65,8 @@ const leaveNumberRef = ref<object | null>(null);
const leaveAddressRef = ref<object | null>(null);
const leaveDetailRef = ref<object | null>(null);
const isLoadLeaveDate = ref<boolean>(false);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = {
leaveWrote: leaveWroteRef,
@ -149,7 +150,7 @@ const checkDate = computed(() => {
// const totalCheck = ref<number | null>(null);
async function fetchCheck() {
if (formDataSick.leaveStartDate && formDataSick.leaveEndDate) {
showLoader();
isLoadLeaveDate.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -177,11 +178,10 @@ async function fetchCheck() {
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null;
hideLoader();
})
.finally(() => {
hideLoader();
leaveDocumentRef.value.resetValidation();
isLoadLeaveDate.value = false;
});
}
}
@ -425,6 +425,7 @@ onMounted(() => {
v-model="formDataSick.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
:loading="isLoadLeaveDate"
>
<template v-slot:hint>
<span style="color: red">
@ -626,8 +627,10 @@ onMounted(() => {
:disable="!isLeave"
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadLeaveDate"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
@ -637,8 +640,10 @@ onMounted(() => {
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadLeaveDate"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</template>

46
src/modules/05_leave/components/FormLeave/03_Birth.vue
View file

@ -13,14 +13,7 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
const $q = useQuasar();
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const {
date2Thai,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const { date2Thai, messageError, convertDateToAPI } = mixin;
const edit = ref<boolean>(true);
const leaveId = ref<string>("");
@ -45,6 +38,8 @@ const props = defineProps({
},
});
const isLoadCheck = ref<boolean>(false);
/** ข้อมูล v-model ของฟอร์ม */
const formDataBirth = reactive<any>({
type: dataStore.typeId,
@ -145,14 +140,10 @@ const checkDate = computed(() => {
}
});
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
// const totalCheck = ref<number | null>(null);
/** ตรวจสอบวันลา */
async function fetchCheck() {
if (formDataBirth.leaveStartDate && formDataBirth.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
const checkDate = computed(() => {
if (
convertDateToAPI(formDataBirth.leaveEndDate) ==
@ -163,9 +154,7 @@ async function fetchCheck() {
return false;
}
});
// console.log("checkDate.value", checkDate.value);
// console.log("formDataBirth.leaveRangeEnd", formDataBirth.leaveRangeEnd);
// console.log("formDataBirth.leaveRange", formDataBirth.leaveRange);
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -176,11 +165,9 @@ async function fetchCheck() {
? formDataBirth.leaveRange
: formDataBirth.leaveRangeEnd,
})
.then((res: any) => {
hideLoader();
.then((res) => {
const data = res.data.result;
formDataBirth.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
reasonLeave.value =
data.message != ""
? data.message
@ -189,10 +176,11 @@ async function fetchCheck() {
: "ช่วงวันลาที่ระบุไม่ถูกต้อง";
isLeave.value = formDataBirth.leaveTotal > 0 ? data.isLeave : false;
})
.catch((e: any) => {
hideLoader();
// totalCheck.value = null;
.catch((e) => {
messageError($q, e);
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
@ -433,6 +421,7 @@ onMounted(() => {
v-model="formDataBirth.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -596,30 +585,31 @@ onMounted(() => {
<div class="row col-12 q-pt-md">
<q-space />
<!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
<q-btn
v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit"
type="submit"
unelevated
dense
:disable="!isLeave"
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

46
src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
View file

@ -1,7 +1,6 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http";
import config from "@/app.config";
@ -14,17 +13,8 @@ import type { FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
const $q = useQuasar();
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const {
date2Thai,
calculateDurationYmd,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const { date2Thai, messageError, convertDateToAPI } = mixin;
const leaveText = ref<string>("");
const edit = ref<boolean>(true);
const leaveId = ref<string>("");
@ -161,14 +151,12 @@ const checkDate = computed(() => {
}
});
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
// const totalCheck = ref<number | null>(null);
const isLoadCheck = ref<boolean>(false);
/** fetchCheck ว่าลาได้ไหม จาก api */
async function fetchCheck() {
if (formDataHelpWife.leaveStartDate && formDataHelpWife.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -184,8 +172,6 @@ async function fetchCheck() {
const data = res.data.result;
formDataHelpWife.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
// totalCheck.value =
// data.totalDate - data.sumDateWork - data.sumDateHoliday;
reasonLeave.value =
data.message != ""
? data.message
@ -193,23 +179,21 @@ async function fetchCheck() {
? "จำนวนวันลาเกินที่กำหนด"
: "ช่วงวันลาที่ระบุไม่ถูกต้อง";
isLeave.value = formDataHelpWife.leaveTotal > 0 ? data.isLeave : false;
hideLoader();
})
.catch((e: any) => {
.catch((e) => {
messageError($q, e);
// totalCheck.value = null;
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(
() => props.data,
async () => {
if (props.data) {
// totalCheck.value = null;
formDataHelpWife.leaveWrote = props.data.leaveWrote;
formDataHelpWife.wifeDayName = props.data.wifeDayName;
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@ -229,7 +213,6 @@ watch(
/**Hook */
onMounted(async () => {
if (props.data) {
// totalCheck.value = null;
formDataHelpWife.leaveWrote = props.data.leaveWrote;
formDataHelpWife.wifeDayName = props.data.wifeDayName;
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn;
@ -438,6 +421,7 @@ onMounted(async () => {
v-model="formDataHelpWife.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -656,24 +640,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
:disable="!isLeave"
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

35
src/modules/05_leave/components/FormLeave/05_VacationForm.vue
View file

@ -14,14 +14,7 @@ import type { DataOption } from "@/modules/14_IDP/interface/Main";
const $q = useQuasar();
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const {
date2Thai,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const { date2Thai, messageError, convertDateToAPI } = mixin;
const edit = ref<boolean>(true);
const leaveId = ref<string>("");
@ -164,10 +157,11 @@ const checkDate = computed(() => {
}
});
// const totalCheck = ref<number | null>(null);
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
if (formDataVacation.leaveStartDate && formDataVacation.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -183,8 +177,6 @@ async function fetchCheck() {
const data = res.data.result;
formDataVacation.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday;
// totalCheck.value =
// data.totalDate - data.sumDateWork - data.sumDateHoliday;
reasonLeave.value =
data.message != ""
@ -193,12 +185,12 @@ async function fetchCheck() {
? "จำนวนวันลาเกินที่กำหนด"
: "ช่วงวันลาที่ระบุไม่ถูกต้อง";
isLeave.value = formDataVacation.leaveTotal > 0 ? data.isLeave : false;
hideLoader();
})
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null;
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
@ -207,7 +199,6 @@ watch(
() => props.data,
() => {
if (props.data) {
// totalCheck.value = null;
formDataVacation.leaveWrote = props.data.leaveWrote;
formDataVacation.restDayOldTotal = props.data.restDayOldTotal;
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal;
@ -456,6 +447,7 @@ onMounted(() => {
v-model="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -630,30 +622,31 @@ onMounted(() => {
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md items-center">
<q-space />
<!-- <div v-if="totalCheck == 0" class="text-red q-mr-sm">**จำนวนวันลาของท่านไม่ถูกต้อง หรือวันที่ยื่นลาของท่านตรงกับวันหยุด</div> -->
<q-btn
v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit"
type="submit"
unelevated
dense
:disable="!isLeave"
class="q-px-md items-center btnBlue"
label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

31
src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
View file

@ -13,8 +13,7 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
const $q = useQuasar();
const dataStore = useLeaveStore();
const mixin = useCounterMixin();
const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
mixin;
const { date2Thai, messageError, convertDateToAPI } = mixin;
const edit = ref<boolean>(true);
const leaveId = ref<string>("");
/** รับ props มาจากหน้าหลัก */
@ -179,14 +178,12 @@ const checkDate = computed(() => {
}
});
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
// const totalCheck = ref<number|null>(null)
const isLoadCheck = ref<boolean>(false);
/** check ว่าลาได้ไหม จาก api*/
async function fetchCheck() {
if (formDataOrdination.leaveStartDate && formDataOrdination.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -201,7 +198,6 @@ async function fetchCheck() {
.then((res: any) => {
const data = res.data.result;
formDataOrdination.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
reasonLeave.value =
data.message != ""
? data.message
@ -210,12 +206,12 @@ async function fetchCheck() {
: "ช่วงวันลาที่ระบุไม่ถูกต้อง";
isLeave.value =
formDataOrdination.leaveTotal > 0 ? data.isLeave : false;
hideLoader();
})
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null;
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
@ -488,6 +484,7 @@ onMounted(async () => {
v-model="formDataOrdination.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -843,24 +840,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

28
src/modules/05_leave/components/FormLeave/07_HajjForm.vue
View file

@ -17,10 +17,8 @@ const {
date2Thai,
calculateDurationYmd,
messageError,
dateToISO,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true);
@ -79,7 +77,6 @@ const formRef: HajiForm = {
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
@ -145,10 +142,10 @@ const checkDate = computed(() => {
}
});
// const totalCheck = ref<number | null>(null);
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
if (formDataHaji.leaveStartDate && formDataHaji.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -161,9 +158,7 @@ async function fetchCheck() {
})
.then((res: any) => {
const data = res.data.result;
// isLeave.value = data.isLeave;
formDataHaji.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
leaveText.value = calculateDurationYmd(
convertDateToAPI(formDataHaji.leaveStartDate),
convertDateToAPI(formDataHaji.leaveEndDate)
@ -175,12 +170,12 @@ async function fetchCheck() {
? "จำนวนวันลาเกินที่กำหนด"
: "ช่วงวันลาที่ระบุไม่ถูกต้อง";
isLeave.value = formDataHaji.leaveTotal > 0 ? data.isLeave : false;
hideLoader();
})
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null;
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
@ -415,6 +410,7 @@ onMounted(async () => {
v-model="formDataHaji.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -589,24 +585,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

51
src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
View file

@ -13,15 +13,8 @@ import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsen
const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
calculateDurationYmd,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
mixin;
const edit = ref<boolean>(true);
const leaveId = ref<string>("");
const leaveText = ref<string>("");
@ -163,14 +156,12 @@ const checkDate = computed(() => {
}
});
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
// const totalCheck = ref<number|null>(null)
const isLoadCheck = ref<boolean>(false);
/** check ว่าลาได้ไหม จาก api*/
async function fetchCheck() {
if (formDataMilitary.leaveStartDate && formDataMilitary.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -186,35 +177,22 @@ async function fetchCheck() {
const data = res.data.result;
isLeave.value = data.isLeave;
formDataMilitary.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
leaveText.value = calculateDurationYmd(
convertDateToAPI(formDataMilitary.leaveStartDate),
convertDateToAPI(formDataMilitary.leaveEndDate)
);
reasonLeave.value =
data.message != "" ? data.message : "จำนวนวันลาเกินที่กำหนด";
hideLoader();
})
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
// /**
// * function อัพเดทค่า LeaveTotal
// */
// function updateLeaveTotal() {
// const newLeaveTotal = calculateDurationYmd(
// formDataMilitary.leaveStartDate,
// formDataMilitary.leaveEndDate
// );
// formDataMilitary.leaveTotal = newLeaveTotal;
// }
watch(
() => props.data,
async () => {
@ -463,6 +441,7 @@ onMounted(async () => {
v-model="leaveText"
label="จำนวนวันที่ลา"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -675,24 +654,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

37
src/modules/05_leave/components/FormLeave/09_StudyForm.vue
View file

@ -16,12 +16,9 @@ const mixin = useCounterMixin();
const {
date2Thai,
calculateDurationYmd,
dateToISO,
messageError,
arabicNumberToText,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const leaveText = ref<string>("");
@ -182,10 +179,10 @@ const checkDate = computed(() => {
}
});
// const totalCheck = ref<number | null>(null);
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
if (formDataStudy.leaveStartDate && formDataStudy.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -200,7 +197,7 @@ async function fetchCheck() {
const data = res.data.result;
isLeave.value = data.isLeave;
formDataStudy.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
leaveText.value = calculateDurationYmd(
convertDateToAPI(formDataStudy.leaveStartDate),
convertDateToAPI(formDataStudy.leaveEndDate)
@ -208,27 +205,16 @@ async function fetchCheck() {
reasonLeave.value = data.message
? data.message
: "จำนวนวันลาเกินที่กำหนด";
hideLoader();
})
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null;
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
// /**
// * function อัพเดทค่า LeaveTotal
// */
// function updateLeaveTotal() {
// const newLeaveTotal = calculateDurationYmd(
// formDataStudy.leaveStartDate,
// formDataStudy.leaveEndDate
// );
// formDataStudy.leaveTotal = newLeaveTotal;
// }
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(
() => props.data,
@ -490,6 +476,7 @@ onMounted(async () => {
v-model="leaveText"
label="มีกำหนด"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -828,24 +815,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

38
src/modules/05_leave/components/FormLeave/10_TrainForm.vue
View file

@ -19,8 +19,6 @@ const {
calculateDurationYmd,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const leaveText = ref<string>("");
@ -167,10 +165,11 @@ const checkDate = computed(() => {
}
});
// const totalCheck = ref<number | null>(null);
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
if (formDataTrain.leaveStartDate && formDataTrain.leaveEndDate) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -185,7 +184,7 @@ async function fetchCheck() {
const data = res.data.result;
isLeave.value = data.isLeave;
formDataTrain.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
leaveText.value = calculateDurationYmd(
convertDateToAPI(formDataTrain.leaveStartDate),
convertDateToAPI(formDataTrain.leaveEndDate)
@ -193,32 +192,20 @@ async function fetchCheck() {
reasonLeave.value = data.message
? data.message
: "จำนวนวันลาเกินที่กำหนด";
hideLoader();
})
.catch((e: any) => {
// totalCheck.value = null;
messageError($q, e);
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataTrain.leaveStartDate,
formDataTrain.leaveEndDate
);
formDataTrain.leaveTotal = newLeaveTotal;
}
watch(
() => props.data,
async () => {
if (props.data) {
// totalCheck.value = null;
formDataTrain.leaveWrote = props.data.leaveWrote;
formDataTrain.leaveStartDate = props.data.leaveStartDate;
formDataTrain.leaveEndDate = props.data.leaveEndDate;
@ -470,6 +457,7 @@ onMounted(async () => {
v-model="leaveText"
label="มีกำหนด"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -789,24 +777,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

44
src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
View file

@ -1,6 +1,5 @@
<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
@ -79,8 +78,6 @@ const FormRef: FormRef = {
};
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("");
const nameFileDraft = ref<string>("");
const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
@ -171,12 +168,13 @@ const checkDate = computed(() => {
* @param formData
*/
const isLeave = ref<boolean>(true);
// const totalCheck = ref<number|null>(null)
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
if (
formDataWorkInternational.leaveStartDate &&
formDataWorkInternational.leaveEndDate
) {
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -193,7 +191,6 @@ async function fetchCheck() {
const data = res.data.result;
isLeave.value = data.isLeave;
formDataWorkInternational.leaveTotal = data.totalDate;
// totalCheck.value = data.totalDate;
leaveText.value = calculateDurationYmd(
convertDateToAPI(formDataWorkInternational.leaveStartDate),
convertDateToAPI(formDataWorkInternational.leaveEndDate)
@ -203,8 +200,10 @@ async function fetchCheck() {
: "จำนวนวันลาเกินที่กำหนด";
})
.catch((e: any) => {
// totalCheck.value = null;
messageError($q, e);
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
@ -249,17 +248,17 @@ watch(
}
);
watch(
() => formDataWorkInternational.leaveEndDate,
() => {
if (
formDataWorkInternational.leaveStartDate !== null &&
formDataWorkInternational.leaveEndDate !== null
) {
fetchCheck();
}
}
);
// watch(
// () => formDataWorkInternational.leaveEndDate,
// () => {
// if (
// formDataWorkInternational.leaveStartDate !== null &&
// formDataWorkInternational.leaveEndDate !== null
// ) {
// fetchCheck();
// }
// }
// );
/**Hook */
onMounted(async () => {
@ -475,6 +474,7 @@ onMounted(async () => {
v-model="leaveText"
label="มีกำหนด"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -644,24 +644,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</div>
</form>

33
src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
View file

@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
@ -15,15 +14,8 @@ const dataStore = useLeaveStore();
const $q = useQuasar();
const mixin = useCounterMixin();
const {
date2Thai,
calculateDurationYmd,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const { date2Thai, calculateDurationYmd, messageError, convertDateToAPI } =
mixin;
const leaveText = ref<string>("");
const edit = ref<boolean>(true);
@ -209,13 +201,13 @@ const reasonLeave = ref<string>("");
* @param formData
*/
const isLeave = ref<boolean>(true);
// const totalCheck = ref<number | null>(null);
const isLoadCheck = ref<boolean>(false);
async function fetchCheck() {
if (
formDataFollowSpouse.leaveStartDate &&
formDataFollowSpouse.leaveEndDate
) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -241,12 +233,12 @@ async function fetchCheck() {
? data.message
: "จำนวนวันลาเกินที่กำหนด";
checkTotalHistory();
hideLoader();
})
.catch((e: any) => {
messageError($q, e);
// totalCheck.value = null
hideLoader();
})
.finally(() => {
isLoadCheck.value = false;
});
}
}
@ -568,6 +560,7 @@ onMounted(async () => {
v-model="leaveText"
label="เป็นเวลา"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -917,24 +910,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</form>
</template>

25
src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
View file

@ -1,6 +1,6 @@
<script setup lang="ts">
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar";
import { is, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@ -8,6 +8,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import genReport from "@/plugins/genreport";
import { load } from "@/router/loader";
const $q = useQuasar();
const dataStore = useLeaveStore();
@ -125,17 +126,14 @@ const checkDate = computed(() => {
}
});
/**
* check ว่าลาได้ไหม จาก api
* @param formData
*/
// const totalCheck = ref<number|null>(null)
const isLoadCheck = ref<boolean>(false);
/** check ว่าลาได้ไหม จาก api */
async function fetchCheck() {
if (
formDataRehabilitation.leaveStartDate &&
formDataRehabilitation.leaveEndDate
) {
showLoader();
isLoadCheck.value = true;
await http
.post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null,
@ -167,7 +165,7 @@ async function fetchCheck() {
// totalCheck.value = null
})
.finally(() => {
hideLoader();
isLoadCheck.value = false;
});
}
}
@ -438,6 +436,7 @@ onMounted(async () => {
v-model="leaveText"
label="เป็นเวลา"
readonly
:loading="isLoadCheck"
>
<template v-slot:hint>
<span style="color: red">
@ -600,24 +599,26 @@ onMounted(async () => {
id="onSubmit"
type="submit"
unelevated
dense
class="q-px-md items-center btnBlue"
label="บันทึก"
:disable="!isLeave"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>บันทึกแบบร่าง</q-tooltip>
</q-btn>
<q-btn
v-if="data && statusCheck != 'NEW'"
id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
:loading="isLoadCheck"
>
<q-tooltip>ยื่นใบลา</q-tooltip>
</q-btn>
</div>
</div>
</q-form>

16
src/modules/05_leave/components/FormLeave/Form.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useQuasar, type QTableProps } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
@ -8,7 +9,7 @@ import { useLeaveStore } from "@/modules/05_leave/store";
import { useDataStore } from "@/stores/data";
import DialogHeader from "@/components/DialogHeader.vue";
import { useQuasar, type QTableProps } from "quasar";
import SkeletonTable from "@/components/SkeletonTable.vue";
const mixin = useCounterMixin();
const dataStore = useLeaveStore();
@ -37,6 +38,7 @@ const pagination = ref({
});
const selected = ref<any[]>([]);
const isLoading = ref<boolean>(false);
const rows = ref<any[]>([]);
const columns = ref<QTableProps["columns"]>([
{
@ -93,7 +95,7 @@ function closeDialog() {
}
async function getCommander() {
showLoader();
isLoading.value = true;
await http
.put(config.API.commanderOperate, {
isAct: isAct.value,
@ -108,17 +110,20 @@ async function getCommander() {
})
.then((res) => {
rows.value = res.data.result.data;
total.value = res.data.result.total;
totalList.value = Math.ceil(
res.data.result.total / pagination.value.rowsPerPage
);
})
.catch((e) => {
messageError($q, e);
})
.finally(() => {
hideLoader();
isLoading.value = false;
});
}
function updatePagination(newPagination: any) {
pagination.value.page = 1;
pagination.value.rowsPerPage = newPagination.rowsPerPage;
}
@ -345,7 +350,9 @@ onMounted(() => {
</div>
</div>
<div class="col-12">
<SkeletonTable v-if="isLoading" :columns="columns" />
<d-table
v-else
ref="table"
:columns="columns"
:rows="rows"
@ -357,6 +364,7 @@ onMounted(() => {
:rows-per-page-options="[10, 25, 50, 100]"
selection="single"
@update:pagination="updatePagination"
v-model:pagination="pagination"
v-model:selected="selected"
>
<template v-slot:pagination="scope">

8
src/modules/05_leave/store.ts
View file

@ -28,6 +28,7 @@ export const useLeaveStore = defineStore("Leave", () => {
const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
const rows = ref<ListLeaveTable[]>([]);
const leaveTypeData = ref<TypeLeave[]>([]);
const isLoadingProfile = ref<boolean>(false); // สถานะการโหลดข้อมูลโปรไฟล์
/**
* function เรียกข้อมูลรายการลา Table
@ -307,7 +308,8 @@ export const useLeaveStore = defineStore("Leave", () => {
//ดึงข้อมูล profile จาก API
async function fetchProfile() {
showLoader();
// showLoader();
isLoadingProfile.value = true;
await http
.post(config.API.leaveProfile(), { type: typeId.value })
.then((res: any) => {
@ -345,7 +347,8 @@ export const useLeaveStore = defineStore("Leave", () => {
console.log(e);
})
.finally(() => {
hideLoader();
// hideLoader();
isLoadingProfile.value = false;
});
}
@ -474,5 +477,6 @@ export const useLeaveStore = defineStore("Leave", () => {
converstType,
fetchLeaveTypeData,
isLoadingProfile,
};
});

85
src/modules/05_leave/views/AddPage.vue
View file

@ -209,11 +209,92 @@ onMounted(async () => {
ข้อมูลการลา
</div>
</div>
<FormPart2 :model="model" />
<q-card
bordered
class="q-pa-md bg-grey-1"
v-if="dataStore.isLoadingProfile"
>
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-md-4 col-xs-12">
<q-skeleton height="40px" />
</div>
<div class="col-md-4 col-xs-12">
<q-skeleton height="40px" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-12">
<q-skeleton height="40px" />
</div>
<div class="col-md-6 col-xs-12">
<q-skeleton height="40px" />
</div>
<div class="col-md-4 col-xs-12">
<q-skeleton height="40px" />
</div>
<div class="col-md-4 col-xs-12">
<q-skeleton height="40px" />
</div>
<div class="col-md-4 col-xs-12">
<q-skeleton height="40px" />
</div>
<div class="col-md-4 col-xs-12">
<q-skeleton height="40px" />
</div>
</div>
</q-card>
<FormPart2 v-else :model="model" />
</div>
</div>
<div class="col-12">
<div class="col-12" v-if="dataStore.isLoadingProfile">
<div style="display: flex; align-items: center">
<q-icon
name="mdi-numeric-3-circle"
size="20px"
color="primary"
/>
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div>
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-col-gutter-sm">
<div class="col-12">
<q-skeleton height="40px" />
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-md-3 col-xs-6">
<q-skeleton height="40px" />
</div>
<div class="col-md-3 col-xs-6">
<q-skeleton height="40px" />
</div>
</div>
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-md-3 col-xs-12">
<q-skeleton height="40px" />
</div>
</div>
</div>
<div class="col-12">
<q-skeleton height="40px" />
</div>
<div class="col-12">
<q-skeleton height="120px" />
</div>
<div class="col-12">
<q-skeleton height="40px" />
</div>
</div>
</q-card>
</div>
<div class="col-12" v-else>
<SickForm
v-if="model === 'LV-001' || model === 'LV-002'"
v-model:type="model"