แก้ UI รายการลา
This commit is contained in:
setthawutttty
parent
3b6172ee03
commit
ea7af9e29c
31 changed files with 2463 additions and 1341 deletions
|
|
@ -140,6 +140,8 @@ const formData = reactive<FremDetail>({
|
|||
approveStep: "",
|
||||
dear: "",
|
||||
leaveRange: "",
|
||||
leaveRangeEnd: "",
|
||||
leaveSubTypeName: "",
|
||||
});
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
|
|
@ -154,6 +156,7 @@ const formDataCancle = reactive<FromCancelDetail>({
|
|||
leaveAddress: "",
|
||||
leaveNumber: "",
|
||||
leaveDetail: "",
|
||||
leaveSubTypeName: "",
|
||||
leaveTotal: 0,
|
||||
leaveStartDate: new Date(),
|
||||
leaveEndDate: new Date(),
|
||||
|
|
@ -194,8 +197,7 @@ async function fetchDataDetail(id: string) {
|
|||
formData.dateSendLeave =
|
||||
data.dateSendLeave && date2Thai(data.dateSendLeave);
|
||||
formData.status = data.status ?? "-";
|
||||
formData.leaveDateStart =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = calculateDurationYmd(
|
||||
data.leaveStartDate,
|
||||
|
|
@ -205,9 +207,11 @@ async function fetchDataDetail(id: string) {
|
|||
formData.leaveAddress = data.leaveAddress ?? "-";
|
||||
formData.leaveNumber = data.leaveNumber ?? "-";
|
||||
formData.leaveDetail = data.leaveDetail ?? "-";
|
||||
formData.leaveSubTypeName = data.leaveSubTypeName ?? null;
|
||||
formData.leaveDocument = data.leaveDocument;
|
||||
formData.leaveDraftDocument = data.leaveDraftDocument;
|
||||
formData.leaveRange = data.leaveRange;
|
||||
formData.leaveRangeEnd = data.leaveRangeEnd;
|
||||
formData.leaveLastStart =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastStart);
|
||||
formData.leaveLastEnd =
|
||||
|
|
@ -226,7 +230,7 @@ async function fetchDataDetail(id: string) {
|
|||
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
|
||||
formData.restDayOldTotal = data.restDayOldTotal ?? "-";
|
||||
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
|
||||
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
|
||||
formData.ordainDayStatus = data.ordainDayStatus;
|
||||
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
|
||||
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
|
||||
|
|
@ -236,9 +240,7 @@ async function fetchDataDetail(id: string) {
|
|||
data.ordainDayBuddhistLentName ?? "-";
|
||||
formData.ordainDayBuddhistLentAddress =
|
||||
data.ordainDayBuddhistLentAddress ?? "-";
|
||||
formData.hajjDayStatus = data.hajjDayStatus
|
||||
? "เคย"
|
||||
: "ไม่เคยไปประกอบพิธีฮัจญ์";
|
||||
formData.hajjDayStatus = data.hajjDayStatus;
|
||||
formData.absentDaySummon = data.absentDaySummon ?? "-";
|
||||
formData.absentDayLocation = data.absentDayLocation ?? "-";
|
||||
formData.absentDayRegistorDate =
|
||||
|
|
@ -301,15 +303,24 @@ function checkLeaveType(
|
|||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "LV-005") {
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "LV-006" && ordainDayLocationName === "") {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-006") {
|
||||
} else if (type === "LV-006" && formData.leaveSubTypeName === "ลาอุปสมบท") {
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (
|
||||
type === "LV-006" &&
|
||||
formData.leaveSubTypeName === "ลาประกอบพิธีฮัจญ์"
|
||||
) {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "LV-008" && studyDayTrainingSubject === "") {
|
||||
} else if (
|
||||
type === "LV-008" &&
|
||||
formData.leaveSubTypeName === "ลาไปศึกษาต่อ"
|
||||
) {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "LV-008") {
|
||||
} else if (
|
||||
type === "LV-008" &&
|
||||
formData.leaveSubTypeName === "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน"
|
||||
) {
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "LV-009") {
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
|
|
@ -344,6 +355,7 @@ async function fetchDataCancelDetail(id: string) {
|
|||
formDataCancle.leaveNumber = data.leaveNumber ?? "-";
|
||||
formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
|
||||
formDataCancle.leaveDetail = data.leaveDetail ?? "-";
|
||||
formDataCancle.leaveSubTypeName = data.leaveSubTypeName ?? null;
|
||||
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,14 @@ const typeForm = defineModel<string>("type", { required: true });
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError, convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveDocumentRef = ref<any>(null);
|
||||
|
||||
|
|
@ -46,6 +53,7 @@ const formDataSick = reactive<any>({
|
|||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveTotal: "",
|
||||
leaveLast: null,
|
||||
leaveDetail: "",
|
||||
|
|
@ -121,6 +129,7 @@ function onValidate() {
|
|||
|
||||
formData.append("type", formDataSick.type);
|
||||
formData.append("leaveRange", formDataSick.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataSick.leaveRangeEnd);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataSick.leaveStartDate) ?? ""
|
||||
|
|
@ -144,12 +153,29 @@ function onValidate() {
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataSick.leaveStartDate) ==
|
||||
convertDateToAPI(formDataSick.leaveEndDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataSick.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataSick.leaveEndDate) ?? null,
|
||||
leaveRange: formDataSick.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataSick.leaveRange
|
||||
: formDataSick.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
|
@ -162,8 +188,10 @@ async function fetchCheck() {
|
|||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
leaveDocumentRef.value.resetValidation();
|
||||
});
|
||||
}
|
||||
|
|
@ -212,6 +240,7 @@ watch(props.data, () => {
|
|||
formDataSick.leaveTotal = props.data.leaveTotal;
|
||||
formDataSick.leaveDetail = props.data.leaveDetail;
|
||||
formDataSick.leaveRange = props.data.leaveRange;
|
||||
formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataSick.leaveDocument = [];
|
||||
|
|
@ -228,6 +257,7 @@ onMounted(() => {
|
|||
formDataSick.leaveTotal = props.data.leaveTotal;
|
||||
formDataSick.leaveDetail = props.data.leaveDetail;
|
||||
formDataSick.leaveRange = props.data.leaveRange;
|
||||
formDataSick.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -257,45 +287,22 @@ onMounted(() => {
|
|||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
val="ALL"
|
||||
label="ลาทั้งวัน"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
val="MORNING"
|
||||
label="ลาครึ่งวันเช้า"
|
||||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
val="AFTERNOON"
|
||||
label="ลาครึ่งวันบ่าย"
|
||||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataSick.leaveEndDate = null"
|
||||
@update:model-value="
|
||||
(formDataSick.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -310,17 +317,16 @@ onMounted(() => {
|
|||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
bg-color="white"
|
||||
class="full-width cursor-pointer inputgreen"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataSick.leaveStartDate != null
|
||||
? date2Thai(formDataSick.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
style="color: var(--q-primary)"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -333,18 +339,41 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataSick.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
@update:model-value="fetchCheck()"
|
||||
:min-date="formDataSick.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
|
|
@ -361,15 +390,14 @@ onMounted(() => {
|
|||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="isReadOnly"
|
||||
:class="inputEdit(isReadOnly)"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataSick.leaveEndDate != null
|
||||
? date2Thai(formDataSick.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -382,6 +410,27 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataSick.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
|
|
@ -403,7 +452,6 @@ onMounted(() => {
|
|||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
|
|
@ -418,6 +466,7 @@ onMounted(() => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
|
|
|
|||
|
|
@ -13,7 +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 } = mixin;
|
||||
const { date2Thai, dateToISO, messageError, convertDateToAPI,showLoader,hideLoader } = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
|
@ -46,6 +46,8 @@ const formDataBirth = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
|
@ -115,6 +117,8 @@ function onValidate() {
|
|||
formData.append("leaveNumber", dataStore.telephoneNumber);
|
||||
formData.append("leaveDetail", formDataBirth.leaveDetail);
|
||||
formData.append("leaveTotal", formDataBirth.leaveTotal);
|
||||
formData.append("leaveRange", formDataBirth.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataBirth.leaveRangeEnd);
|
||||
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
|
|
@ -122,18 +126,34 @@ function onValidate() {
|
|||
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataBirth.leaveEndDate) ==
|
||||
convertDateToAPI(formDataBirth.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader()
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
|
||||
leaveRange: formDataBirth.leaveRange,
|
||||
leaveRangeEnd: checkDate.value ? formDataBirth.leaveRange : formDataBirth.leaveRangeEnd
|
||||
})
|
||||
.then((res: any) => {
|
||||
hideLoader()
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataBirth.leaveTotal = data.totalDate;
|
||||
|
|
@ -142,6 +162,7 @@ async function fetchCheck() {
|
|||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
})
|
||||
.catch((e: any) => {
|
||||
hideLoader()
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
|
@ -161,6 +182,7 @@ watch(props.data, () => {
|
|||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataBirth.leaveDocument = [];
|
||||
|
|
@ -176,6 +198,8 @@ onMounted(() => {
|
|||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataBirth.leaveRange = props.data.leaveRange;
|
||||
formDataBirth.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
|
|
@ -205,137 +229,186 @@ onMounted(() => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveStartDate != null
|
||||
? date2Thai(formDataBirth.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataBirth.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
:min-date="formDataBirth.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveStartDate != null
|
||||
? date2Thai(formDataBirth.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
:model-value="
|
||||
formDataBirth.leaveEndDate != null
|
||||
? date2Thai(formDataBirth.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
v-model="formDataBirth.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataBirth.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveEndDate != null
|
||||
? date2Thai(formDataBirth.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
</q-icon>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataBirth.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
|
|
|
|||
|
|
@ -14,8 +14,17 @@ 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 } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
|
|
@ -49,6 +58,8 @@ const formDataHelpWife = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
||||
|
|
@ -115,20 +126,22 @@ function onValidate() {
|
|||
formData.append("type", formDataHelpWife.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataHelpWife.leaveStartDate)??''
|
||||
convertDateToAPI(formDataHelpWife.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataHelpWife.leaveEndDate)??''
|
||||
convertDateToAPI(formDataHelpWife.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("leaveWrote", formDataHelpWife.leaveWrote);
|
||||
formData.append("leaveAddress", dataStore.currentAddress);
|
||||
formData.append("leaveNumber", dataStore.telephoneNumber);
|
||||
formData.append("leaveDetail", formDataHelpWife.leaveDetail);
|
||||
formData.append("wifeDayName", formDataHelpWife.wifeDayName);
|
||||
formData.append("leaveRange", formDataHelpWife.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataHelpWife.leaveRangeEnd);
|
||||
formData.append(
|
||||
"wifeDayDateBorn",
|
||||
convertDateToAPI(formDataHelpWife.wifeDayDateBorn)??''
|
||||
convertDateToAPI(formDataHelpWife.wifeDayDateBorn) ?? ""
|
||||
);
|
||||
formData.append("leaveTotal", formDataHelpWife.leaveTotal);
|
||||
|
||||
|
|
@ -136,48 +149,57 @@ function onValidate() {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHelpWife.leaveStartDate,
|
||||
formDataHelpWife.leaveEndDate
|
||||
);
|
||||
formDataHelpWife.leaveTotal = newLeaveTotal;
|
||||
}
|
||||
|
||||
const reasonLeave = ref<string>("");
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataHelpWife.leaveEndDate) ==
|
||||
convertDateToAPI(formDataHelpWife.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataHelpWife.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataHelpWife.leaveEndDate) ?? null,
|
||||
leaveRange: formDataHelpWife.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataHelpWife.leaveRange
|
||||
: formDataHelpWife.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataHelpWife.leaveTotal =
|
||||
data.totalDate - data.sumDateWork - data.sumDateHoliday;
|
||||
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataHelpWife.leaveStartDate,
|
||||
formDataHelpWife.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataHelpWife.leaveWrote = props.data.leaveWrote;
|
||||
formDataHelpWife.wifeDayName = props.data.wifeDayName;
|
||||
|
|
@ -185,7 +207,14 @@ watch(props.data, () => {
|
|||
formDataHelpWife.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHelpWife.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHelpWife.leaveTotal = props.data.leaveTotal;
|
||||
formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataHelpWife.leaveRange = props.data.leaveRange;
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
formDataHelpWife.leaveDocument = [];
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
|
|
@ -193,7 +222,7 @@ watch(props.data, () => {
|
|||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataHelpWife.leaveWrote = props.data.leaveWrote;
|
||||
formDataHelpWife.wifeDayName = props.data.wifeDayName;
|
||||
|
|
@ -203,6 +232,14 @@ onMounted(() => {
|
|||
formDataHelpWife.leaveTotal = props.data.leaveTotal;
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataHelpWife.leaveRange = props.data.leaveRange;
|
||||
formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
|
|
@ -230,125 +267,174 @@ onMounted(() => {
|
|||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataHelpWife.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveStartDate != null
|
||||
? date2Thai(formDataHelpWife.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataHelpWife.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
:min-date="formDataHelpWife.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveStartDate != null
|
||||
? date2Thai(formDataHelpWife.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveEndDate != null
|
||||
? date2Thai(formDataHelpWife.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
v-model="formDataHelpWife.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHelpWife.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataHelpWife.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHelpWife.leaveEndDate != null
|
||||
? date2Thai(formDataHelpWife.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
|
|
|
|||
|
|
@ -9,12 +9,20 @@ import { useCounterMixin } from "@/stores/mixin";
|
|||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
import type { FormRef } from "@/modules/05_leave/interface/request/VacationForm";
|
||||
import type { DataOption } from "@/modules/14_IDP/interface/Main";
|
||||
|
||||
/** Use */
|
||||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
|
@ -50,6 +58,7 @@ const formDataVacation = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveDetail: "",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
||||
|
|
@ -134,13 +143,14 @@ function onValidate() {
|
|||
// formData.append("leaveDocument", formDataVacation.leaveDocument);
|
||||
formData.append("type", formDataVacation.type);
|
||||
formData.append("leaveRange", formDataVacation.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataVacation.leaveRangeEnd);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataVacation.leaveStartDate)??''
|
||||
convertDateToAPI(formDataVacation.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataVacation.leaveEndDate)??''
|
||||
convertDateToAPI(formDataVacation.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("leaveWrote", formDataVacation.leaveWrote);
|
||||
formData.append("leaveAddress", dataStore.currentAddress);
|
||||
|
|
@ -158,12 +168,28 @@ function onValidate() {
|
|||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataVacation.leaveEndDate) ==
|
||||
convertDateToAPI(formDataVacation.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataVacation.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataVacation.leaveEndDate) ?? null,
|
||||
leaveRange: formDataVacation.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataVacation.leaveRange
|
||||
: formDataVacation.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
|
@ -174,9 +200,11 @@ async function fetchCheck() {
|
|||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -203,6 +231,7 @@ watch(props.data, () => {
|
|||
formDataVacation.leaveTotal = props.data.leaveTotal;
|
||||
|
||||
formDataVacation.leaveDetail = props.data.leaveDetail;
|
||||
formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataVacation.leaveRange = props.data.leaveRange;
|
||||
|
|
@ -224,6 +253,7 @@ onMounted(() => {
|
|||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataVacation.leaveRange = props.data.leaveRange;
|
||||
formDataVacation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
});
|
||||
|
|
@ -248,9 +278,177 @@ onMounted(() => {
|
|||
v-model="formDataVacation.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
:rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataVacation.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataVacation.leaveStartDate != null
|
||||
? date2Thai(formDataVacation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataVacation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataVacation.leaveEndDate != null
|
||||
? date2Thai(formDataVacation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataVacation.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="col-12 col-md-4 col-sm-6">
|
||||
<q-radio
|
||||
v-model="formDataVacation.leaveRange"
|
||||
val="ALL"
|
||||
|
|
@ -271,7 +469,7 @@ onMounted(() => {
|
|||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
</div>
|
||||
</div> -->
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
ref="restDayOldTotalRef"
|
||||
|
|
@ -298,125 +496,6 @@ onMounted(() => {
|
|||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataVacation.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataVacation.leaveStartDate != null
|
||||
? date2Thai(formDataVacation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
:min-date="formDataVacation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:readonly="isReadOnly"
|
||||
:model-value="
|
||||
formDataVacation.leaveEndDate != null
|
||||
? date2Thai(formDataVacation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataVacation.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
|
|
|
|||
|
|
@ -13,10 +13,18 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calculateDurationYmd, dateToISO, messageError,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
|
|
@ -70,6 +78,8 @@ const formDataOrdination = reactive<any>({
|
|||
ordainDayStatus: true,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
|
|
@ -122,15 +132,15 @@ function onValidate() {
|
|||
formData.append("type", formDataOrdination.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataOrdination.leaveStartDate)??''
|
||||
convertDateToAPI(formDataOrdination.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataOrdination.leaveEndDate)??''
|
||||
convertDateToAPI(formDataOrdination.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"ordainDayOrdination",
|
||||
convertDateToAPI(formDataOrdination.ordainDayOrdination)??''
|
||||
convertDateToAPI(formDataOrdination.ordainDayOrdination) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"ordainDayLocationName",
|
||||
|
|
@ -138,7 +148,7 @@ function onValidate() {
|
|||
);
|
||||
formData.append(
|
||||
"ordainDayLocationNumber",
|
||||
dataStore.telephoneNumber
|
||||
formDataOrdination.ordainDayLocationNumber
|
||||
);
|
||||
formData.append(
|
||||
"ordainDayLocationAddress",
|
||||
|
|
@ -156,33 +166,59 @@ function onValidate() {
|
|||
formData.append("leaveWrote", formDataOrdination.leaveWrote);
|
||||
formData.append("leaveDetail", formDataOrdination.leaveDetail);
|
||||
formData.append("leaveTotal", formDataOrdination.leaveTotal);
|
||||
formData.append("leaveRange", formDataOrdination.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataOrdination.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataOrdination.leaveEndDate) ==
|
||||
convertDateToAPI(formDataOrdination.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
|
||||
StartLeaveDate:
|
||||
convertDateToAPI(formDataOrdination.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataOrdination.leaveEndDate) ?? null,
|
||||
leaveRange: formDataOrdination.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataOrdination.leaveRange
|
||||
: formDataOrdination.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataOrdination.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataOrdination.leaveStartDate,
|
||||
formDataOrdination.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +242,7 @@ const dateEndInputStyle = computed(() => {
|
|||
const leaveDocumentList = ref<any>();
|
||||
const statusCheck = ref<string>("");
|
||||
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataOrdination.leaveWrote = props.data.leaveWrote;
|
||||
formDataOrdination.leaveStartDate = props.data.leaveStartDate;
|
||||
|
|
@ -214,7 +250,11 @@ watch(props.data, () => {
|
|||
formDataOrdination.leaveTotal = props.data.leaveTotal;
|
||||
formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
|
||||
formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
|
||||
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
formDataOrdination.ordainDayLocationAddress =
|
||||
props.data.ordainDayLocationAddress;
|
||||
formDataOrdination.ordainDayBuddhistLentName =
|
||||
|
|
@ -224,13 +264,17 @@ watch(props.data, () => {
|
|||
formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
|
||||
formDataOrdination.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataOrdination.ordainDayLocationNumber =
|
||||
props.data.ordainDayLocationNumber;
|
||||
formDataOrdination.leaveRange = props.data.leaveRange;
|
||||
formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataOrdination.leaveDocument = [];
|
||||
}
|
||||
});
|
||||
|
||||
/** Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataOrdination.leaveWrote = props.data.leaveWrote;
|
||||
formDataOrdination.leaveStartDate = props.data.leaveStartDate;
|
||||
|
|
@ -247,8 +291,24 @@ onMounted(() => {
|
|||
props.data.ordainDayBuddhistLentAddress;
|
||||
formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
|
||||
formDataOrdination.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
|
||||
formDataOrdination.ordainDayLocationNumber =
|
||||
props.data.ordainDayLocationNumber;
|
||||
formDataOrdination.leaveRange = props.data.leaveRange;
|
||||
formDataOrdination.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
formDataOrdination.ordainDayLocationNumber =
|
||||
props.data.ordainDayLocationNumber;
|
||||
formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
|
||||
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
});
|
||||
|
|
@ -275,129 +335,176 @@ onMounted(() => {
|
|||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataOrdination.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataOrdination.leaveStartDate != null
|
||||
? date2Thai(formDataOrdination.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataOrdination.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||
:readonly="
|
||||
!formDataOrdination.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataOrdination.leaveStartDate"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataOrdination.leaveStartDate != null
|
||||
? date2Thai(formDataOrdination.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataOrdination.leaveEndDate != null
|
||||
? date2Thai(formDataOrdination.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:readonly="
|
||||
!formDataOrdination.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
v-model="formDataOrdination.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataOrdination.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataOrdination.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataOrdination.leaveEndDate != null
|
||||
? date2Thai(formDataOrdination.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataOrdination.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -497,7 +604,7 @@ onMounted(() => {
|
|||
<q-radio
|
||||
v-model="formDataOrdination.ordainDayStatus"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
:val="'true'"
|
||||
:val="true"
|
||||
label="เคยบวช"
|
||||
checked-icon="task_alt "
|
||||
hide-bottom-space
|
||||
|
|
@ -505,7 +612,7 @@ onMounted(() => {
|
|||
<q-radio
|
||||
v-model="formDataOrdination.ordainDayStatus"
|
||||
:disable="!edit || statusCheck === 'NEW'"
|
||||
:val="'false'"
|
||||
:val="false"
|
||||
label="ไม่เคยบวช"
|
||||
checked-icon="task_alt"
|
||||
hide-bottom-space
|
||||
|
|
@ -581,7 +688,7 @@ onMounted(() => {
|
|||
dense
|
||||
full-width
|
||||
outlined
|
||||
v-model="dataStore.telephoneNumber"
|
||||
v-model="formDataOrdination.ordainDayLocationNumber"
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
lazy-rules
|
||||
|
|
|
|||
|
|
@ -13,10 +13,19 @@ import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
|
|||
const dataStore = useLeaveStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, calculateDurationYmd, messageError, dateToISO,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
messageError,
|
||||
dateToISO,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<any>("");
|
||||
const leaveText = ref<string>("");
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null);
|
||||
|
|
@ -56,6 +65,8 @@ const formDataHaji = reactive<any>({
|
|||
hajjDayStatus: true,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
|
|
@ -99,16 +110,18 @@ function onValidate() {
|
|||
formData.append("type", formDataHaji.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataHaji.leaveStartDate)??''
|
||||
convertDateToAPI(formDataHaji.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataHaji.leaveEndDate)??''
|
||||
convertDateToAPI(formDataHaji.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
|
||||
formData.append("leaveWrote", formDataHaji.leaveWrote);
|
||||
formData.append("leaveDetail", formDataHaji.leaveDetail);
|
||||
formData.append("leaveTotal", formDataHaji.leaveTotal);
|
||||
formData.append("leaveRange", formDataHaji.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataHaji.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -119,24 +132,46 @@ function onValidate() {
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataHaji.leaveEndDate) ==
|
||||
convertDateToAPI(formDataHaji.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataHaji.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataHaji.leaveEndDate) ?? null,
|
||||
leaveRange: formDataHaji.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataHaji.leaveRange
|
||||
: formDataHaji.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataHaji.leaveTotal = data.totalDate;
|
||||
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataHaji.leaveStartDate,
|
||||
formDataHaji.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -159,7 +194,7 @@ const dateEndInputStyle = computed(() => {
|
|||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
const leaveDocumentList = ref<any>();
|
||||
const statusCheck = ref<any>("");
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
|
|
@ -168,14 +203,21 @@ watch(props.data, () => {
|
|||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataHaji.leaveRange = props.data.leaveRange;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
formDataHaji.leaveDocument = [];
|
||||
}
|
||||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
|
|
@ -185,6 +227,14 @@ onMounted(() => {
|
|||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataHaji.leaveRange = props.data.leaveRange;
|
||||
formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
statusCheck.value = props.data.status;
|
||||
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -213,19 +263,22 @@ onMounted(() => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||
@update:model-value="
|
||||
(formDataHaji.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
|
|
@ -235,20 +288,21 @@ onMounted(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHaji.leaveStartDate != null
|
||||
? date2Thai(formDataHaji.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -261,18 +315,41 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataHaji.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataHaji.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
|
|
@ -283,23 +360,20 @@ onMounted(() => {
|
|||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
:readonly="
|
||||
!formDataHaji.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataHaji.leaveEndDate != null
|
||||
? date2Thai(formDataHaji.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
@update:model-value="fetchCheck()"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
|
|
@ -312,19 +386,44 @@ onMounted(() => {
|
|||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataHaji.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
v-model="leaveText"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
|
|
@ -334,9 +433,8 @@ onMounted(() => {
|
|||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
|
|
|
|||
|
|
@ -13,10 +13,18 @@ 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 } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null);
|
||||
const leaveEndDateRef = ref<object | null>(null);
|
||||
|
|
@ -60,6 +68,8 @@ const formDataMilitary = reactive<any>({
|
|||
absentDayLocation: "",
|
||||
absentDayRegistorDate: null,
|
||||
absentDayGetIn: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
absentDayAt: "",
|
||||
leaveDetail: "",
|
||||
});
|
||||
|
|
@ -117,49 +127,74 @@ function onValidate() {
|
|||
formData.append("type", formDataMilitary.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataMilitary.leaveStartDate)??''
|
||||
convertDateToAPI(formDataMilitary.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataMilitary.leaveEndDate)??''
|
||||
convertDateToAPI(formDataMilitary.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
|
||||
formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
|
||||
formData.append(
|
||||
"absentDayRegistorDate",
|
||||
convertDateToAPI(formDataMilitary.absentDayRegistorDate)??''
|
||||
convertDateToAPI(formDataMilitary.absentDayRegistorDate) ?? ""
|
||||
);
|
||||
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn);
|
||||
formData.append("absentDayAt", formDataMilitary.absentDayAt);
|
||||
formData.append("leaveWrote", formDataMilitary.leaveWrote);
|
||||
formData.append("leaveDetail", formDataMilitary.leaveDetail);
|
||||
formData.append("leaveTotal", formDataMilitary.leaveTotal);
|
||||
|
||||
formData.append("leaveRange", formDataMilitary.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataMilitary.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataMilitary.leaveEndDate) ==
|
||||
convertDateToAPI(formDataMilitary.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataMilitary.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataMilitary.leaveEndDate) ?? null,
|
||||
leaveRange: formDataMilitary.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataMilitary.leaveRange
|
||||
: formDataMilitary.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataMilitary.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataMilitary.leaveStartDate,
|
||||
formDataMilitary.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -174,7 +209,7 @@ function updateLeaveTotal() {
|
|||
formDataMilitary.leaveTotal = newLeaveTotal;
|
||||
}
|
||||
|
||||
watch(props.data, () => {
|
||||
watch(props.data, async () => {
|
||||
if (props.data) {
|
||||
formDataMilitary.leaveWrote = props.data.leaveWrote;
|
||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
|
||||
|
|
@ -185,6 +220,13 @@ watch(props.data, () => {
|
|||
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
|
||||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
|
||||
formDataMilitary.absentDayAt = props.data.absentDayAt;
|
||||
formDataMilitary.leaveRange = props.data.leaveRange;
|
||||
formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
formDataMilitary.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
|
|
@ -193,7 +235,7 @@ watch(props.data, () => {
|
|||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
onMounted(async () => {
|
||||
if (props.data) {
|
||||
formDataMilitary.leaveWrote = props.data.leaveWrote;
|
||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
|
||||
|
|
@ -205,6 +247,14 @@ onMounted(() => {
|
|||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
|
||||
formDataMilitary.absentDayAt = props.data.absentDayAt;
|
||||
formDataMilitary.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataMilitary.leaveRange = props.data.leaveRange;
|
||||
formDataMilitary.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
leaveText.value = leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -233,127 +283,176 @@ onMounted(() => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataMilitary.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveStartDate != null
|
||||
? date2Thai(formDataMilitary.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataMilitary.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal, fetchCheck()"
|
||||
:readonly="!formDataMilitary.leaveStartDate || statusCheck === 'NEW'"
|
||||
:min-date="formDataMilitary.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveStartDate != null
|
||||
? date2Thai(formDataMilitary.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="
|
||||
!formDataMilitary.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveEndDate != null
|
||||
? date2Thai(formDataMilitary.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
v-model="formDataMilitary.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataMilitary.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataMilitary.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataMilitary.leaveEndDate != null
|
||||
? date2Thai(formDataMilitary.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataMilitary.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
ref="absentDaySummonRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
|
|
|
|||
|
|
@ -19,9 +19,12 @@ const {
|
|||
dateToISO,
|
||||
messageError,
|
||||
arabicNumberToText,
|
||||
convertDateToAPI
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
const leaveStartDateRef = ref<object | null>(null);
|
||||
|
|
@ -76,6 +79,8 @@ const formDataStudy = reactive<any>({
|
|||
leaveDocument: [], //
|
||||
leaveDetail: "",
|
||||
leaveTotal: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveTotalDay: "", //จำนวนวันลา
|
||||
});
|
||||
|
||||
|
|
@ -133,11 +138,11 @@ function onValidate() {
|
|||
formData.append("type", formDataStudy.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataStudy.leaveStartDate)??''
|
||||
convertDateToAPI(formDataStudy.leaveStartDate) ?? ""
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataStudy.leaveEndDate)??''
|
||||
convertDateToAPI(formDataStudy.leaveEndDate) ?? ""
|
||||
);
|
||||
formData.append("studyDaySubject", formDataStudy.studyDaySubject);
|
||||
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
|
||||
|
|
@ -155,30 +160,56 @@ function onValidate() {
|
|||
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship);
|
||||
formData.append("leaveAddress", dataStore.currentAddress); //
|
||||
formData.append("leaveNumber", dataStore.telephoneNumber); //
|
||||
formData.append("leaveTotal", formDataStudy.leaveTotalDay); //
|
||||
formData.append("leaveTotal", formDataStudy.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataStudy.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataStudy.leaveRangeEnd);
|
||||
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataStudy.leaveEndDate) ==
|
||||
convertDateToAPI(formDataStudy.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataStudy.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataStudy.leaveEndDate) ?? null,
|
||||
leaveRange: formDataStudy.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataStudy.leaveRange
|
||||
: formDataStudy.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataStudy.leaveTotalDay = data.totalDate;
|
||||
formDataStudy.leaveTotal = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataStudy.leaveStartDate,
|
||||
formDataStudy.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -211,13 +242,15 @@ watch(props.data, async () => {
|
|||
formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
|
||||
formDataStudy.studyDaySubject = props.data.studyDaySubject;
|
||||
formDataStudy.leaveDetail = props.data.leaveDetail;
|
||||
formDataStudy.leaveRange = props.data.leaveRange;
|
||||
formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataStudy.leaveDocument = [];
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataStudy.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
});
|
||||
|
|
@ -228,7 +261,6 @@ onMounted(async () => {
|
|||
formDataStudy.leaveWrote = props.data.leaveWrote;
|
||||
formDataStudy.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataStudy.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataStudy.leaveTotal = props.data.leaveTotal;
|
||||
formDataStudy.leavebirthDate = props.data.leavebirthDate;
|
||||
formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
|
||||
formDataStudy.leaveSalary = props.data.leaveSalary;
|
||||
|
|
@ -240,12 +272,18 @@ onMounted(async () => {
|
|||
formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
|
||||
formDataStudy.studyDaySubject = props.data.studyDaySubject;
|
||||
formDataStudy.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataStudy.leaveRange = props.data.leaveRange;
|
||||
formDataStudy.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataStudy.leaveTotal = props.data.leaveTotal;
|
||||
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataStudy.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
}
|
||||
|
|
@ -273,127 +311,176 @@ onMounted(async () => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataStudy.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataStudy.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="
|
||||
formDataStudy.leaveStartDate != null
|
||||
? date2Thai(formDataStudy.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataStudy.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataStudy.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataStudy.leaveStartDate != null
|
||||
? date2Thai(formDataStudy.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataStudy.leaveStartDate || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:model-value="
|
||||
formDataStudy.leaveEndDate != null
|
||||
? date2Thai(formDataStudy.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
v-model="formDataStudy.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataStudy.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataStudy.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataStudy.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataStudy.leaveEndDate != null
|
||||
? date2Thai(formDataStudy.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataStudy.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
|
|
|
|||
|
|
@ -19,9 +19,12 @@ const {
|
|||
calculateDurationYmd,
|
||||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<any>("");
|
||||
|
||||
|
|
@ -58,6 +61,8 @@ const formDataTrain = reactive<any>({
|
|||
studyDayScholarship: "",
|
||||
studyDayCountry: "",
|
||||
studyDayTrainingSubject: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
studyDayTrainingName: "",
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
|
|
@ -123,11 +128,11 @@ function onValidate() {
|
|||
formData.append("type", formDataTrain.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataTrain.leaveStartDate)??''
|
||||
convertDateToAPI(formDataTrain.leaveStartDate) ?? ""
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataTrain.leaveEndDate)??''
|
||||
convertDateToAPI(formDataTrain.leaveEndDate) ?? ""
|
||||
); //
|
||||
formData.append("studyDayCountry", formDataTrain.studyDayCountry);
|
||||
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
|
||||
|
|
@ -142,31 +147,55 @@ function onValidate() {
|
|||
formData.append("leaveNumber", dataStore.telephoneNumber); //
|
||||
formData.append("leaveSalaryText", formDataTrain.leaveSalaryText); //
|
||||
formData.append("leaveSalary", formDataTrain.leaveSalary); //
|
||||
formData.append("leaveTotal", formDataTrain.leaveTotalDay); //
|
||||
formData.append("leaveTotal", formDataTrain.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataTrain.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataTrain.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataTrain.leaveEndDate) ==
|
||||
convertDateToAPI(formDataTrain.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataTrain.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataTrain.leaveEndDate) ?? null,
|
||||
leaveRange: formDataTrain.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataTrain.leaveRange
|
||||
: formDataTrain.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataTrain.leaveTotalDay = data.totalDate;
|
||||
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataTrain.leaveStartDate,
|
||||
formDataTrain.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -196,12 +225,14 @@ watch(props.data, async () => {
|
|||
formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
|
||||
formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
|
||||
formDataTrain.leaveDetail = props.data.leaveDetail;
|
||||
formDataTrain.leaveRange = props.data.leaveRange;
|
||||
formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataTrain.leaveDocument = [];
|
||||
const leaveTotal = await calculateDurationYmd(
|
||||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataTrain.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
|
|
@ -221,6 +252,10 @@ onMounted(async () => {
|
|||
formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
|
||||
formDataTrain.studyDayCountry = props.data.studyDayCountry;
|
||||
formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
|
||||
|
||||
formDataTrain.leaveRange = props.data.leaveRange;
|
||||
formDataTrain.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
|
||||
formDataTrain.leaveDetail = props.data.leaveDetail;
|
||||
// formDataTrain.leaveDocument = props.data.leaveDocument;
|
||||
|
|
@ -228,7 +263,7 @@ onMounted(async () => {
|
|||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataTrain.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
|
|
@ -257,127 +292,176 @@ onMounted(async () => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataTrain.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataTrain.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="
|
||||
formDataTrain.leaveStartDate != null
|
||||
? date2Thai(formDataTrain.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataTrain.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataTrain.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataTrain.leaveStartDate != null
|
||||
? date2Thai(formDataTrain.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataTrain.leaveStartDate || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
:model-value="
|
||||
formDataTrain.leaveEndDate != null
|
||||
? date2Thai(formDataTrain.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
v-model="formDataTrain.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataTrain.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataTrain.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataTrain.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataTrain.leaveEndDate != null
|
||||
? date2Thai(formDataTrain.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataTrain.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavegovernmentDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternati
|
|||
const $q = useQuasar();
|
||||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dateToISO, messageError, showLoader, hideLoader,convertDateToAPI } = mixin;
|
||||
const {
|
||||
date2Thai,
|
||||
dateToISO,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDateToAPI,
|
||||
} = mixin;
|
||||
|
||||
const edit = ref<boolean>(true);
|
||||
const isSave = ref<boolean>(false);
|
||||
|
|
@ -48,6 +55,8 @@ const formDataWorkInternational = reactive<any>({
|
|||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDocument: [],
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
|
|
@ -109,15 +118,19 @@ async function onValidate() {
|
|||
formData.append("type", formDataWorkInternational.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate)??''
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? ""
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate)??''
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? ""
|
||||
); //
|
||||
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataWorkInternational.leaveDetail);
|
||||
formData.append("leaveTotal", formDataWorkInternational.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataWorkInternational.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataWorkInternational.leaveRangeEnd);
|
||||
|
||||
await props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -141,6 +154,17 @@ async function onClickDownloadFile(id: string, fileName: string) {
|
|||
|
||||
const reasonLeave = ref<string>("");
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate) ==
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
|
|
@ -150,14 +174,19 @@ async function fetchCheck() {
|
|||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
|
||||
StartLeaveDate:
|
||||
convertDateToAPI(formDataWorkInternational.leaveStartDate) ?? null,
|
||||
EndLeaveDate:
|
||||
convertDateToAPI(formDataWorkInternational.leaveEndDate) ?? null,
|
||||
leaveRange: formDataWorkInternational.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataWorkInternational.leaveRange
|
||||
: formDataWorkInternational.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataWorkInternational.leaveTotal = data.totalDate;
|
||||
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
|
|
@ -186,6 +215,9 @@ watch(props, () => {
|
|||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
formDataWorkInternational.leaveRange = props.data.leaveRange;
|
||||
formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataWorkInternational.leaveTotal = props.data.leaveTotal;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataWorkInternational.leaveDraftDocument = null;
|
||||
|
|
@ -209,6 +241,11 @@ watch(
|
|||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
|
||||
formDataWorkInternational.leaveRange = props.data.leaveRange;
|
||||
formDataWorkInternational.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataWorkInternational.leaveTotal = props.data.leaveTotal;
|
||||
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
|
|
@ -244,114 +281,173 @@ onMounted(() => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataWorkInternational.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveStartDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveStartDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
v-model="formDataWorkInternational.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:min-date="formDataWorkInternational.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataWorkInternational.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveEndDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate ||
|
||||
statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveEndDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
v-if="!checkDate"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataWorkInternational.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
|
|
|
|||
|
|
@ -21,9 +21,24 @@ const {
|
|||
dateToISO,
|
||||
messageError,
|
||||
convertDateToAPI,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
|
||||
const leaveText = ref<string>("");
|
||||
const leaveHistoryText = ref<string>("");
|
||||
const edit = ref<boolean>(true);
|
||||
const leaveId = ref<string>("");
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataFollowSpouse.leaveEndDate) ==
|
||||
convertDateToAPI(formDataFollowSpouse.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
|
|
@ -54,6 +69,8 @@ const formDataFollowSpouse = reactive<any>({
|
|||
leaveTotal: "", //จำนวนวันลา
|
||||
leaveTotalDay: "", //จำนวนวันลา
|
||||
leaveSalaryText: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveSalary: 0, //เงินเดือนปัจจุบัน
|
||||
coupleDayName: "", //ชื่อคู่สมรส
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส
|
||||
|
|
@ -173,7 +190,10 @@ function onValidate() {
|
|||
formDataFollowSpouse.coupleDayPosition
|
||||
); //
|
||||
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName); //
|
||||
formData.append("leaveTotal", formDataFollowSpouse.leaveTotalDay); //
|
||||
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataFollowSpouse.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataFollowSpouse.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
|
@ -186,23 +206,34 @@ const reasonLeave = ref<string>("");
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate:
|
||||
convertDateToAPI(formDataFollowSpouse.leaveStartDate) ?? null,
|
||||
EndLeaveDate: convertDateToAPI(formDataFollowSpouse.leaveEndDate) ?? null,
|
||||
leaveRange: formDataFollowSpouse.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataFollowSpouse.leaveRange
|
||||
: formDataFollowSpouse.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataFollowSpouse.leaveTotalDay = data.totalDate;
|
||||
leaveText.value = calculateDurationYmd(
|
||||
formDataFollowSpouse.leaveStartDate,
|
||||
formDataFollowSpouse.leaveEndDate
|
||||
);
|
||||
reasonLeave.value = data.message
|
||||
? data.message
|
||||
: "จำนวนวันลาเกินที่กำหนด";
|
||||
hideLoader();
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -250,6 +281,8 @@ watch(props.data, async () => {
|
|||
formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
|
||||
formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
|
||||
formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
|
||||
formDataFollowSpouse.leaveRange = props.data.leaveRange;
|
||||
formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataFollowSpouse.coupleDayLevelCountry =
|
||||
props.data.coupleDayLevelCountry;
|
||||
formDataFollowSpouse.coupleDayCountryHistory =
|
||||
|
|
@ -266,7 +299,8 @@ watch(props.data, async () => {
|
|||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataFollowSpouse.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
const coupleDayTotalHistory = await calculateDurationYmd(
|
||||
props.data.coupleDayStartDateHistory,
|
||||
props.data.coupleDayEndDateHistory
|
||||
|
|
@ -285,6 +319,9 @@ onMounted(async () => {
|
|||
formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
|
||||
formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
|
||||
formDataFollowSpouse.leaveRange = props.data.leaveRange;
|
||||
formDataFollowSpouse.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
|
||||
formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
|
||||
formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
|
||||
|
|
@ -306,7 +343,8 @@ onMounted(async () => {
|
|||
props.data.leaveStartDate,
|
||||
props.data.leaveEndDate
|
||||
);
|
||||
formDataFollowSpouse.leaveTotal = leaveTotal;
|
||||
leaveText.value = leaveTotal;
|
||||
|
||||
const coupleDayTotalHistory = await calculateDurationYmd(
|
||||
props.data.coupleDayStartDateHistory,
|
||||
props.data.coupleDayEndDateHistory
|
||||
|
|
@ -339,131 +377,175 @@ onMounted(async () => {
|
|||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataFollowSpouse.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveStartDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveStartDate)
|
||||
: null
|
||||
@update:model-value="
|
||||
(formDataFollowSpouse.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="
|
||||
!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:min-date="formDataFollowSpouse.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveStartDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
:readonly="
|
||||
!formDataFollowSpouse.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveEndDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
v-model="formDataFollowSpouse.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataFollowSpouse.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataFollowSpouse.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataFollowSpouse.leaveEndDate != null
|
||||
? date2Thai(formDataFollowSpouse.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="leaveText"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
|
|
@ -477,7 +559,7 @@ onMounted(async () => {
|
|||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
|
|
@ -555,6 +637,7 @@ onMounted(async () => {
|
|||
<div class="text-weight-bold text-dark col-12">
|
||||
ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
|
|
@ -612,6 +695,7 @@ onMounted(async () => {
|
|||
borderless
|
||||
:enableTimePicker="false"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:min-date="formDataFollowSpouse.coupleDayStartDateHistory"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveHistoryTotal()"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -56,6 +56,8 @@ const formDataRehabilitation = reactive<any>({
|
|||
leaveEndDate: null,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveRange: "ALL",
|
||||
leaveRangeEnd: "ALL",
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
|
||||
|
|
@ -94,6 +96,9 @@ async function onValidate() {
|
|||
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
|
||||
formData.append("leaveTotal", formDataRehabilitation.leaveTotal); //
|
||||
|
||||
formData.append("leaveRange", formDataRehabilitation.leaveRange);
|
||||
formData.append("leaveRangeEnd", formDataRehabilitation.leaveRangeEnd);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
|
||||
|
|
@ -108,11 +113,22 @@ const fileUploadDoc = async (files: any) => {
|
|||
const reasonLeave = ref<string>("");
|
||||
const isLeave = ref<boolean>(true);
|
||||
|
||||
const checkDate = computed(() => {
|
||||
if (
|
||||
convertDateToAPI(formDataRehabilitation.leaveEndDate) ==
|
||||
convertDateToAPI(formDataRehabilitation.leaveStartDate)
|
||||
) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
async function FetchCheck() {
|
||||
async function fetchCheck() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
|
|
@ -121,6 +137,10 @@ async function FetchCheck() {
|
|||
convertDateToAPI(formDataRehabilitation.leaveStartDate) ?? null,
|
||||
EndLeaveDate:
|
||||
convertDateToAPI(formDataRehabilitation.leaveEndDate) ?? null,
|
||||
leaveRange: formDataRehabilitation.leaveRange,
|
||||
leaveRangeEnd: checkDate.value
|
||||
? formDataRehabilitation.leaveRange
|
||||
: formDataRehabilitation.leaveRangeEnd,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
|
|
@ -173,6 +193,8 @@ watch(props.data, () => {
|
|||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataRehabilitation.leaveRange = props.data.leaveRange;
|
||||
formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
formDataRehabilitation.leaveDraftDocument = null;
|
||||
formDataRehabilitation.leaveDocument = [];
|
||||
statusCheck.value = props.data.status;
|
||||
|
|
@ -186,11 +208,15 @@ onMounted(() => {
|
|||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
|
||||
formDataRehabilitation.leaveRange = props.data.leaveRange;
|
||||
formDataRehabilitation.leaveRangeEnd = props.data.leaveRangeEnd;
|
||||
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
leaveId.value = props.data.id;
|
||||
FetchCheck();
|
||||
fetchCheck();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -217,130 +243,173 @@ onMounted(() => {
|
|||
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="
|
||||
(formDataRehabilitation.leaveEndDate = null), fetchCheck()
|
||||
"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveStartDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่เริ่มต้น'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveStartDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataRehabilitation.leaveRange"
|
||||
:options="dataStore.rangeOptions"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
</q-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveEndDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่สิ้นสุด'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-select
|
||||
v-if="!checkDate"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveEndDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[(val:string) => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
v-model="formDataRehabilitation.leaveRangeEnd"
|
||||
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
|
||||
emit-value
|
||||
map-options
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="mdi-clock-outline"
|
||||
style="color: var(--q-primary)"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataRehabilitation.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? reasonLeave : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="coupleDayTotalHistoryRef"
|
||||
for="coupleDayTotalHistoryRef"
|
||||
v-model="formDataRehabilitation.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveDetail"
|
||||
|
|
|
|||
|
|
@ -202,7 +202,7 @@ onMounted(async () => {
|
|||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ convert(props.row) }}
|
||||
{{ props.row.leaveTypeName ? `${props.row.leaveTypeName} ${props.row.leaveSubTypeName ? `(${props.row.leaveSubTypeName})`:''}`: '-' }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="dateLeave"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const store = useLeaveStore();
|
||||
const { converstType } = store;
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,22 +30,16 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{
|
||||
props.data.leaveRange == "ALL"
|
||||
? props.data.leaveTotal + " วัน"
|
||||
: props.data.leaveRange == "MORNING"
|
||||
? "ลาครึ่งวันเช้า (0.5)"
|
||||
: "ลาครึ่งวันบ่าย (0.5)"
|
||||
}}
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const store = useLeaveStore();
|
||||
const { converstType } = store;
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -38,22 +42,16 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{
|
||||
props.data.leaveRange == "ALL"
|
||||
? props.data.leaveTotal + " วัน"
|
||||
: props.data.leaveRange == "MORNING"
|
||||
? "ลาครึ่งวันเช้า (0.5)"
|
||||
: "ลาครึ่งวันบ่าย (0.5)"
|
||||
}}
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -18,7 +22,7 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
|
||||
<div class="col-xs-12 col-md-6">ลาไปศึกษาต่อ</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
|
||||
|
|
@ -26,11 +30,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -17,7 +21,7 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เรื่อง</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveTypeName }}</div>
|
||||
<div class="col-xs-12 col-md-6">ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">เขียนที่</div>
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from '@/modules/05_leave/store'
|
||||
|
||||
const store = useLeaveStore()
|
||||
const { converstType } = store
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -25,11 +29,11 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateStart }} {{ `${props.data.leaveRange && props.data.leaveRange !== 'ALL' ? `(${converstType(props.data.leaveRange)})`:''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }}</div>
|
||||
<div class="col-xs-12 col-md-6">{{ props.data.leaveDateEnd }} {{ `${props.data.leaveDateStart !== props.data.leaveDateEnd ? `${props.data.leaveRangeEnd && props.data.leaveRangeEnd !== 'ALL' ? `(${converstType(props.data.leaveRangeEnd)})`:''}` :''}` }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">จำนวนวันที่ลา</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
<script setup lang="ts">
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const store = useLeaveStore();
|
||||
const { converstType } = store;
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
|
|
@ -20,7 +24,13 @@ const props = defineProps({
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ประเภทการลา</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{ props.data.leaveTypeName ? props.data.leaveTypeName : "-" }}
|
||||
{{
|
||||
props.data.leaveSubTypeName
|
||||
? props.data.leaveSubTypeName
|
||||
: props.data.leaveTypeName
|
||||
? props.data.leaveTypeName
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
@ -38,13 +48,31 @@ const props = defineProps({
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{ props.data.leaveStartDate ? props.data.leaveStartDate : "-" }}
|
||||
{{ props.data.leaveDateStart }}
|
||||
{{
|
||||
`${
|
||||
props.data.leaveRange && props.data.leaveRange !== "ALL"
|
||||
? `(${converstType(props.data.leaveRange)})`
|
||||
: ""
|
||||
}`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col-xs-12 col-md-6">
|
||||
{{ props.data.leaveEndDate ? props.data.leaveEndDate : "-" }}
|
||||
{{ props.data.leaveDateEnd }}
|
||||
{{
|
||||
`${
|
||||
props.data.leaveDateStart !== props.data.leaveDateEnd
|
||||
? `${
|
||||
props.data.leaveRangeEnd && props.data.leaveRangeEnd !== "ALL"
|
||||
? `(${converstType(props.data.leaveRangeEnd)})`
|
||||
: ""
|
||||
}`
|
||||
: ""
|
||||
}`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
|
|
|||
|
|
@ -122,7 +122,9 @@ interface FormData {
|
|||
coupleDaySumTotalHistory: string;
|
||||
approveStep: string;
|
||||
dear: string;
|
||||
leaveRangeEnd: string;
|
||||
leaveLast: string;
|
||||
leaveSubTypeName: string;
|
||||
leaveRange: string;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ interface ListLeave {
|
|||
fullName: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: Date | null; //วันที่ยื่นใบลา
|
||||
status: string; //สถานะการของลา
|
||||
leaveSubTypeName: string;
|
||||
leaveRange: string;
|
||||
leaveRangeEnd: string;
|
||||
isDelete: boolean; //ขอยกเลิกคำขอลา ถ้าเคยขอแล้วจะเป็น true ไม่เคยเป็น false
|
||||
hajjDayStatus: boolean;
|
||||
}
|
||||
|
|
@ -18,6 +21,9 @@ interface ListLeaveTable {
|
|||
fullName: string;
|
||||
dateSendLeave: string | null;
|
||||
status: string;
|
||||
leaveSubTypeName: string;
|
||||
leaveRange: string;
|
||||
leaveRangeEnd: string;
|
||||
isDelete: boolean;
|
||||
hajjDayStatus: boolean;
|
||||
}
|
||||
|
|
@ -82,6 +88,8 @@ interface FremDetail {
|
|||
approveStep: string;
|
||||
dear: string;
|
||||
leaveRange: string;
|
||||
leaveRangeEnd: string;
|
||||
leaveSubTypeName: string;
|
||||
}
|
||||
|
||||
interface FromCancelDetail {
|
||||
|
|
@ -90,6 +98,7 @@ interface FromCancelDetail {
|
|||
fullname: String; //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
status: String; //สถานะการของลา
|
||||
leaveDocDelete: string; //เอกสารการยกเลิกการลา
|
||||
leaveSubTypeName: string;
|
||||
leaveResonDelete: String; //เหตุผลการยกเลิกการลา
|
||||
leaveWrote: String; //เขียนที่
|
||||
leaveAddress: String; //สถานที่ติดต่อขณะลา
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import type {
|
|||
ListLeave,
|
||||
ListLeaveTable,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
import type { DataOption } from "../14_IDP/interface/Main";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, messageError, showLoader, hideLoader } = mixin;
|
||||
|
|
@ -41,9 +42,22 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
fullName: e.fullName,
|
||||
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave, false, true),
|
||||
dateLeave:
|
||||
date2Thai(e.leaveStartDate) + " - " + date2Thai(e.leaveEndDate),
|
||||
e.leaveStartDate && e.leaveEndDate
|
||||
? e.leaveStartDate === e.leaveEndDate
|
||||
? date2Thai(e.leaveEndDate)
|
||||
: `${date2Thai(e.leaveStartDate)}${
|
||||
e.leaveRange !== "ALL" ? ` (${converstType(e.leaveRange)})` : ""
|
||||
} - ${date2Thai(e.leaveEndDate)}${
|
||||
e.leaveRangeEnd !== "ALL"
|
||||
? ` (${converstType(e.leaveRangeEnd)})`
|
||||
: ""
|
||||
}`
|
||||
: "-",
|
||||
status: e.status,
|
||||
hajjDayStatus: e.hajjDayStatus,
|
||||
leaveRange: e.leaveRange,
|
||||
leaveRangeEnd: e.leaveRangeEnd,
|
||||
leaveSubTypeName: e.leaveSubTypeName,
|
||||
statusConvert: convertStatud(e.status),
|
||||
isDelete: e.isDelete,
|
||||
}));
|
||||
|
|
@ -143,17 +157,39 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
}
|
||||
}
|
||||
|
||||
const rangeOptions = ref<DataOption[]>([
|
||||
{
|
||||
id: "ALL",
|
||||
name: "เต็มวัน",
|
||||
},
|
||||
{
|
||||
id: "MORNING",
|
||||
name: "ครึ่งวันเช้า",
|
||||
},
|
||||
{
|
||||
id: "AFTERNOON",
|
||||
name: "ครึ่งวันบ่าย",
|
||||
},
|
||||
]);
|
||||
|
||||
function converstType(val: string) {
|
||||
switch (val) {
|
||||
case "ALL":
|
||||
return "";
|
||||
case "MORNING":
|
||||
return "ครึ่งวันเช้า";
|
||||
case "AFTERNOON":
|
||||
return "ครึ่งวันบ่าย";
|
||||
}
|
||||
}
|
||||
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
|
||||
const optionsSpecific = ref<OptionData[]>([
|
||||
{ id: "s1", name: "ลาไปศึกษาต่อ", code: "s1" },
|
||||
{ id: "s2", name: "ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน", code: "s2" },
|
||||
const optionsSpecific = ref<string[]>([
|
||||
"ลาไปศึกษาต่อ",
|
||||
"ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน",
|
||||
]);
|
||||
|
||||
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจญ์*/
|
||||
const optionsOrdination = ref<OptionData[]>([
|
||||
{ id: "b1", name: "ลาอุปสมบท", code: "b1" },
|
||||
{ id: "b2", name: "ลาประกอบพิธีฮัจญ์", code: "b2" },
|
||||
]);
|
||||
const optionsOrdination = ref<string[]>(["ลาอุปสมบท", "ลาประกอบพิธีฮัจญ์"]);
|
||||
|
||||
/** data table filter & column ของรายการลา */
|
||||
const visibleColumns = ref<string[]>([
|
||||
|
|
@ -233,24 +269,6 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
return options.value.find((x) => x.code == val)?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจญ์ ย่อย
|
||||
* @param val ค่า string
|
||||
* @returns ส่งค่าที่แปลงแล้ว
|
||||
*/
|
||||
function convertSubtitleInfo(val: string) {
|
||||
return optionsOrdination.value.find((x) => x.id == val)?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
|
||||
* @param val ค่า string
|
||||
* @returns ส่งค่าที่แปลงแล้ว
|
||||
*/
|
||||
function convertSubtitleInfo2(val: string) {
|
||||
return optionsSpecific.value.find((x) => x.id == val)?.name;
|
||||
}
|
||||
|
||||
/**
|
||||
*ฟังก์ชั่นหา id จาก api
|
||||
* @param val ค่า string
|
||||
|
|
@ -432,5 +450,7 @@ export const useLeaveStore = defineStore("Leave", () => {
|
|||
statusOptionsMain,
|
||||
telephoneNumber,
|
||||
currentAddress,
|
||||
rangeOptions,
|
||||
converstType,
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -29,7 +29,14 @@ const myform = ref<QForm | null>(null);
|
|||
const dataStore = useLeaveStore();
|
||||
const mixin = useCounterMixin();
|
||||
const { fetchLeaveType } = dataStore;
|
||||
const { dialogConfirm, success, messageError, showLoader, hideLoader } = mixin;
|
||||
const {
|
||||
dialogConfirm,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
convertDateToAPI,
|
||||
} = mixin;
|
||||
|
||||
const model = ref<string>("");
|
||||
const modelSpecific = ref<string>("");
|
||||
|
|
@ -53,8 +60,16 @@ function onSubmit(postData: FormData, isLeave: boolean = true) {
|
|||
if (isLeave) {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
if (model.value === "LV-006" || model.value === "LV-008") {
|
||||
postData.append("leaveSubTypeName", modelSpecific.value);
|
||||
}
|
||||
if (postData.get("leaveEndDate") === postData.get("leaveStartDate")) {
|
||||
postData.set("leaveRangeEnd", postData.get("leaveRange") as string);
|
||||
}
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), postData)
|
||||
|
||||
.then((res) => {
|
||||
router.push(`/leave/edit/${res.data.result.id}`);
|
||||
success($q, "บันทึกสำเร็จ");
|
||||
|
|
@ -167,14 +182,11 @@ onMounted(async () => {
|
|||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
option-value="code"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทการลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -208,11 +220,13 @@ onMounted(async () => {
|
|||
/>
|
||||
<VacationForm v-if="model === 'LV-005'" :on-submit="onSubmit" />
|
||||
<OrdinationForm
|
||||
v-if="model === 'LV-006' && modelSpecific == 'b1'"
|
||||
v-if="model === 'LV-006' && modelSpecific == 'ลาอุปสมบท'"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<HajjForm
|
||||
v-if="model === 'LV-006' && modelSpecific == 'b2'"
|
||||
v-if="
|
||||
model === 'LV-006' && modelSpecific == 'ลาประกอบพิธีฮัจญ์'
|
||||
"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<MilitaryForm
|
||||
|
|
@ -221,15 +235,14 @@ onMounted(async () => {
|
|||
:on-submit="onSubmit"
|
||||
/>
|
||||
<StudyForm
|
||||
v-if="model === 'LV-008' && modelSpecific === 's1'"
|
||||
v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
|
||||
style="width: 100%"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
<TrainForm
|
||||
v-if="
|
||||
model === 'LV-008' &&
|
||||
modelSpecific != 's1' &&
|
||||
modelSpecific != ''
|
||||
modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
|
||||
"
|
||||
:on-submit="onSubmit"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -99,9 +99,11 @@ const formData = reactive<FormData>({
|
|||
coupleDayEndDateHistory: null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
approveStep: "",
|
||||
leaveRangeEnd: "",
|
||||
dear: "",
|
||||
leaveLast: "",
|
||||
leaveRange: "",
|
||||
leaveSubTypeName: "",
|
||||
});
|
||||
|
||||
const model = computed(() => {
|
||||
|
|
@ -109,23 +111,7 @@ const model = computed(() => {
|
|||
dataStore.options.find((x) => x.id == formData.leaveTypeId)?.code ?? ""
|
||||
);
|
||||
});
|
||||
const modelSpecific = computed(() => {
|
||||
const code = dataStore.options.find(
|
||||
(x) => x.id == formData.leaveTypeId
|
||||
)?.code;
|
||||
|
||||
if (code == "LV-006" && formData.ordainDayLocationName != "") {
|
||||
return "b1";
|
||||
} else if (code == "LV-006" && formData.ordainDayLocationName == "") {
|
||||
return "b2";
|
||||
} else if (code == "LV-008" && formData.studyDayTrainingSubject == "") {
|
||||
return "s1";
|
||||
} else if (code == "LV-008" && formData.studyDayTrainingSubject != "") {
|
||||
return "s2";
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
});
|
||||
const modelSpecific = ref<string>("");
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลการลา
|
||||
|
|
@ -208,6 +194,11 @@ async function fetchDataDetail(id: string) {
|
|||
formData.dear = data.dear ?? "-";
|
||||
formData.leaveLast = data.leaveLast ?? "-";
|
||||
formData.leaveRange = data.leaveRange;
|
||||
formData.leaveRangeEnd =
|
||||
data.leaveRangeEnd == "AFTERNOON" ? "ALL" : data.leaveRangeEnd;
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber;
|
||||
formData.ordainDayStatus = data.ordainDayStatus;
|
||||
modelSpecific.value = data.leaveSubTypeName;
|
||||
|
||||
dataStore.telephoneNumber =
|
||||
data.leaveNumber && data.leaveNumber !== "-" ? data.leaveNumber : null;
|
||||
|
|
@ -228,10 +219,16 @@ async function fetchDataDetail(id: string) {
|
|||
* @param formData ข้อมูลใน formdata
|
||||
* @param isLeave ตัวแปรเช็คว่าใช้หน้า edit หรือไม่
|
||||
*/
|
||||
function onSubmit(formData: FormData, isLeave: boolean = true) {
|
||||
function onSubmit(formData: any, isLeave: boolean = true) {
|
||||
if (isLeave) {
|
||||
dialogConfirm($q, async () => {
|
||||
showLoader();
|
||||
if (model.value === "LV-006" || model.value === "LV-008") {
|
||||
formData.append("leaveSubTypeName", modelSpecific.value);
|
||||
}
|
||||
if (formData.get("leaveEndDate") === formData.get("leaveStartDate")) {
|
||||
formData.set("leaveRangeEnd", formData.get("leaveRange") as string);
|
||||
}
|
||||
await http
|
||||
.put(config.API.leaveUserId(personalId.value), formData)
|
||||
.then(async () => {
|
||||
|
|
@ -386,14 +383,11 @@ onMounted(async () => {
|
|||
? dataStore.optionsOrdination
|
||||
: dataStore.optionsSpecific
|
||||
"
|
||||
option-value="code"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
emit-value
|
||||
map-options
|
||||
prefix="ประเภทการลา :"
|
||||
@update:model-value="
|
||||
dataStore.typeConvert(model, modelSpecific)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -447,14 +441,16 @@ onMounted(async () => {
|
|||
:click-delete="clickDelete"
|
||||
/>
|
||||
<OrdinationForm
|
||||
v-if="model === 'LV-006' && modelSpecific === 'b1'"
|
||||
v-if="model === 'LV-006' && modelSpecific === 'ลาอุปสมบท'"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
:on-confirm="onConfirm"
|
||||
:click-delete="clickDelete"
|
||||
/>
|
||||
<HajjForm
|
||||
v-if="model === 'LV-006' && modelSpecific === 'b2'"
|
||||
v-if="
|
||||
model === 'LV-006' && modelSpecific === 'ลาประกอบพิธีฮัจญ์'
|
||||
"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
:on-confirm="onConfirm"
|
||||
|
|
@ -469,7 +465,7 @@ onMounted(async () => {
|
|||
:click-delete="clickDelete"
|
||||
/>
|
||||
<StudyForm
|
||||
v-if="model === 'LV-008' && modelSpecific === 's1'"
|
||||
v-if="model === 'LV-008' && modelSpecific === 'ลาไปศึกษาต่อ'"
|
||||
style="width: 100%"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
|
|
@ -479,8 +475,7 @@ onMounted(async () => {
|
|||
<TrainForm
|
||||
v-if="
|
||||
model === 'LV-008' &&
|
||||
modelSpecific != 's1' &&
|
||||
modelSpecific != ''
|
||||
modelSpecific == 'ลาฝึกอบรม/ปฎิบัติการวิจัย/ดูงาน'
|
||||
"
|
||||
:data="formData"
|
||||
:on-submit="onSubmit"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue