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

updated all form leave

Browse source
This commit is contained in:
Warunee Tamkoo 2025-04-28 17:50:02 +07:00
parent 457f1ef816
commit 84738fbfd8
17 changed files with 3248 additions and 3095 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -196,33 +196,6 @@ async function fetchCheck() {
}); });
} }
/**
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
*/
const isReadOnly = computed(() => {
const conditionleaveRange =
formDataSick.leaveRange === "MORNING" ||
formDataSick.leaveRange === "AFTERNOON";
if (conditionleaveRange) {
formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
formDataSick.leaveTotal = 0.5;
} else {
formDataSick.leaveTotal = null;
}
return conditionleaveRange;
});
/**
* แก้ไขClassเมื่อ status เป็น edit
* @param val status edit true/false
*/
function inputEdit(val: boolean) {
return {
"full-width cursor-pointer ": val,
"full-width cursor-pointer inputgreen": !val,
};
}
/** แจ้งเมื่อวันลาไม่ถูกต้อง */ /** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
@ -273,274 +246,297 @@ onMounted(() => {
</div> </div>
<q-form greedy @submit.prevent @validation-success="onValidate"> <q-form greedy @submit.prevent @validation-success="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<q-input <div class="col-12 col-sm-12 inputgreen">
class="col-12 col-sm-12 cursor-pointer inputgreen" <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
outlined outlined
v-model="formDataSick.leaveWrote" v-model="formDataSick.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataSick.leaveStartDate" v-model="formDataSick.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataSick.leaveEndDate = null), fetchCheck() (formDataSick.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataSick.leaveStartDate != null formDataSick.leaveStartDate != null
? date2Thai(formDataSick.leaveStartDate) ? date2Thai(formDataSick.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataSick.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataSick.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataSick.leaveEndDate" v-model="formDataSick.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataSick.leaveStartDate" :min-date="formDataSick.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataSick.leaveEndDate != null formDataSick.leaveEndDate != null
? date2Thai(formDataSick.leaveEndDate) ? date2Thai(formDataSick.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <div class="col-12 col-md-3 col-sm-6 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataSick.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataSick.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
<q-input </template>
:bottom-slots="!isLeave ? true : false" </q-select>
:color="!isLeave ? 'red' : 'black'" </div>
:bg-color="!isLeave ? 'red-2' : 'white'" </div>
:border-color="!isLeave ? 'red' : 'gray'" </div>
:input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6" <div class="col-12">
dense <div class="row q-col-gutter-sm">
outlined <div class="col-12 col-md-3 col-sm-6">
ref="leaveTotalRef" <q-input
for="leaveTotalRef" :bottom-slots="!isLeave ? true : false"
v-model="formDataSick.leaveTotal" :color="!isLeave ? 'red' : 'black'"
label="จำนวนวันที่ลา" :bg-color="!isLeave ? 'red-2' : 'white'"
readonly :border-color="!isLeave ? 'red' : 'gray'"
> :input-class="!isLeave ? dateEndInputStyle : ''"
<template v-slot:hint> dense
<span style="color: red"> outlined
{{ !isLeave ? reasonLeave : "" }} ref="leaveTotalRef"
</span> for="leaveTotalRef"
</template> v-model="formDataSick.leaveTotal"
</q-input> label="จำนวนวันที่ลา (วัน)"
<q-input readonly
class="col-12 col-md-3 col-sm-6" >
dense <template v-slot:hint>
outlined <span style="color: red">
ref="leaveLastRef" {{ !isLeave ? reasonLeave : "" }}
for="leaveLastRef" </span>
v-model="dataStore.leaveLast" </template>
label="ลาครั้งสุดท้ายเมื่อวันที่" </q-input>
readonly </div>
hide-bottom-space
bg-color="white" <div class="col-12 col-md-3 col-sm-6">
/> <q-input
dense
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="dataStore.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
</div>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-12 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
ref="leaveNumberRef" ref="leaveNumberRef"
for="leaveNumberRef" for="leaveNumberRef"
v-model="dataStore.telephoneNumber" v-model="dataStore.telephoneNumber"
mask="(###)-###-####" mask="(###)-###-####"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
lazy-rules lazy-rules
unmasked-value unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<q-input <div class="col-12 col-md-9 col-sm-12 inputgreen">
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="dataStore.currentAddress" v-model="dataStore.currentAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`, (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]" ]"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
/> />
</div>
</div> </div>
</div> </div>
<q-input
type="textarea" <div class="col-12 inputgreen">
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" <q-input
dense type="textarea"
outlined dense
ref="leaveDetailRef" outlined
for="leaveDetailRef" ref="leaveDetailRef"
v-model="formDataSick.leaveDetail" for="leaveDetailRef"
label="สาเหตุการลา" v-model="formDataSick.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" label="สาเหตุการลา"
bg-color="white" :readonly="!edit || statusCheck === 'NEW'"
/> bg-color="white"
/>
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->
<q-file <div class="col-12 q-pl-sm col-12">
ref="leaveDocumentRef" <q-file
for="leaveDocumentRef" ref="leaveDocumentRef"
v-model="formDataSick.leaveDocument" for="leaveDocumentRef"
dense v-model="formDataSick.leaveDocument"
label="เอกสารประกอบ" dense
outlined label="เอกสารประกอบ"
use-chips outlined
lazy-rules use-chips
multiple lazy-rules
hide-bottom-space multiple
bg-color="white" hide-bottom-space
class="col-12 q-pl-sm col-12" bg-color="white"
:rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[ :rules="typeForm == 'LV-001' && formDataSick.leaveTotal >= 30 ?[
(val:string) => !!val && val.length >= 30 || `${'กรุณาแนบเอกสารประกอบ หรือ ใบรับรองแพทย์ กรณีลาป่วยตั้งเเต่ 30 วันขึ้นไป'}`, (val:string) => !!val && val.length >= 30 || `${'กรุณาแนบเอกสารประกอบ หรือ ใบรับรองแพทย์ กรณีลาป่วยตั้งเเต่ 30 วันขึ้นไป'}`,
]:[]" ]:[]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div>
</div> </div>
</div> </div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">

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

@ -13,7 +13,14 @@ import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
const $q = useQuasar(); const $q = useQuasar();
const dataStore = useLeaveStore(); const dataStore = useLeaveStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { date2Thai, dateToISO, messageError, convertDateToAPI,showLoader,hideLoader } = mixin; const {
date2Thai,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
const leaveId = ref<string>(""); const leaveId = ref<string>("");
@ -143,17 +150,19 @@ const checkDate = computed(() => {
* @param formData * @param formData
*/ */
async function fetchCheck() { async function fetchCheck() {
showLoader() showLoader();
await http await http
.post(config.API.leaveCheck(), { .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null, type: dataStore.typeId ?? null,
StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null, StartLeaveDate: convertDateToAPI(formDataBirth.leaveStartDate) ?? null,
EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null, EndLeaveDate: convertDateToAPI(formDataBirth.leaveEndDate) ?? null,
leaveRange: formDataBirth.leaveRange, leaveRange: formDataBirth.leaveRange,
leaveRangeEnd: checkDate.value ? formDataBirth.leaveRange : formDataBirth.leaveRangeEnd leaveRangeEnd: checkDate.value
? formDataBirth.leaveRange
: formDataBirth.leaveRangeEnd,
}) })
.then((res: any) => { .then((res: any) => {
hideLoader() hideLoader();
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataBirth.leaveTotal = data.totalDate; formDataBirth.leaveTotal = data.totalDate;
@ -162,7 +171,7 @@ async function fetchCheck() {
: "จำนวนวันลาเกินที่กำหนด"; : "จำนวนวันลาเกินที่กำหนด";
}) })
.catch((e: any) => { .catch((e: any) => {
hideLoader() hideLoader();
messageError($q, e); messageError($q, e);
}); });
} }
@ -214,271 +223,293 @@ onMounted(() => {
</div> </div>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
class="col-12 col-sm-12 cursor-pointer inputgreen" <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
outlined outlined
v-model="formDataBirth.leaveWrote" v-model="formDataBirth.leaveWrote"
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveStartDate" v-model="formDataBirth.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataBirth.leaveEndDate = null), fetchCheck() (formDataBirth.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataBirth.leaveStartDate != null formDataBirth.leaveStartDate != null
? date2Thai(formDataBirth.leaveStartDate) ? date2Thai(formDataBirth.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataBirth.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataBirth.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveEndDate" v-model="formDataBirth.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataBirth.leaveStartDate" :min-date="formDataBirth.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataBirth.leaveEndDate != null formDataBirth.leaveEndDate != null
? date2Thai(formDataBirth.leaveEndDate) ? date2Thai(formDataBirth.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <div class="col-12 col-md-3 col-sm-6 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataBirth.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataBirth.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
<q-input </template>
:bottom-slots="!isLeave ? true : false" </q-select>
:color="!isLeave ? 'red' : 'black'" </div>
:bg-color="!isLeave ? 'red-2' : 'white'" </div>
:border-color="!isLeave ? 'red' : 'gray'" </div>
:input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6" <div class="col-12">
dense <div class="row q-col-gutter-sm">
outlined <div class="col-12 col-md-3 col-sm-6">
ref="leaveTotalRef" <q-input
for="leaveTotalRef" :bottom-slots="!isLeave ? true : false"
v-model="formDataBirth.leaveTotal" :color="!isLeave ? 'red' : 'black'"
label="จำนวนวันที่ลา" :bg-color="!isLeave ? 'red-2' : 'white'"
readonly :border-color="!isLeave ? 'red' : 'gray'"
> :input-class="!isLeave ? dateEndInputStyle : ''"
<template v-slot:hint> dense
<span style="color: red"> outlined
{{ !isLeave ? reasonLeave : "" }} ref="leaveTotalRef"
</span> for="leaveTotalRef"
</template> v-model="formDataBirth.leaveTotal"
</q-input> label="จำนวนวันที่ลา (วัน)"
<q-input readonly
class="col-12 col-md-3 col-sm-6" >
dense <template v-slot:hint>
outlined <span style="color: red">
ref="leaveLastRef" {{ !isLeave ? reasonLeave : "" }}
for="leaveLastRef" </span>
v-model="dataStore.leaveLast" </template>
label="ลาครั้งสุดท้ายเมื่อวันที่" </q-input>
readonly </div>
hide-bottom-space
bg-color="white" <div class="col-12 col-md-3 col-sm-6">
/> <q-input
dense
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="dataStore.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
bg-color="white"
/>
</div>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-12 inputgreen">
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveNumberRef" ref="leaveNumberRef"
for="leaveNumberRef" for="leaveNumberRef"
v-model="dataStore.telephoneNumber" v-model="dataStore.telephoneNumber"
mask="(###)-###-####" mask="(###)-###-####"
unmasked-value unmasked-value
lazy-rules lazy-rules
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<q-input <div class="col-12 col-md-9 col-sm-12 inputgreen">
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="dataStore.currentAddress" v-model="dataStore.currentAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`, (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]" ]"
/> />
</div>
</div> </div>
</div> </div>
<q-input
type="textarea" <div class="col-12 inputgreen">
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" <q-input
dense type="textarea"
outlined dense
bg-color="white" outlined
ref="leaveDetailRef" bg-color="white"
for="leaveDetailRef" ref="leaveDetailRef"
v-model="formDataBirth.leaveDetail" for="leaveDetailRef"
label="สาเหตุการลา" v-model="formDataBirth.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" label="สาเหตุการลา"
/> :readonly="!edit || statusCheck === 'NEW'"
/>
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->
<q-file <div class="q-pl-sm col-12">
for="leaveDocumentRef" <q-file
hide-bottom-space for="leaveDocumentRef"
v-model="formDataBirth.leaveDocument" hide-bottom-space
@added="fileUploadDoc" v-model="formDataBirth.leaveDocument"
dense @added="fileUploadDoc"
bg-color="white" dense
label="เอกสารประกอบ" bg-color="white"
outlined label="เอกสารประกอบ"
multiple outlined
use-chips multiple
class="q-pl-sm col-12" use-chips
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div>
</div> </div>
</div> </div>
<div class="col-12 row" v-if="data"> <div class="col-12 row" v-if="data">

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

@ -182,10 +182,6 @@ async function fetchCheck() {
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataHelpWife.leaveTotal = formDataHelpWife.leaveTotal =
data.totalDate - data.sumDateWork - data.sumDateHoliday; data.totalDate - data.sumDateWork - data.sumDateHoliday;
leaveText.value = calculateDurationYmd(
formDataHelpWife.leaveStartDate,
formDataHelpWife.leaveEndDate
);
reasonLeave.value = data.message reasonLeave.value = data.message
? data.message ? data.message
: "จำนวนวันลาเกินที่กำหนด"; : "จำนวนวันลาเกินที่กำหนด";
@ -210,11 +206,6 @@ watch(props.data, async () => {
formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd; formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
formDataHelpWife.leaveRange = props.data.leaveRange; formDataHelpWife.leaveRange = props.data.leaveRange;
formDataHelpWife.leaveDetail = props.data.leaveDetail; formDataHelpWife.leaveDetail = props.data.leaveDetail;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
formDataHelpWife.leaveDocument = []; formDataHelpWife.leaveDocument = [];
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
@ -234,12 +225,6 @@ onMounted(async () => {
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
formDataHelpWife.leaveRange = props.data.leaveRange; formDataHelpWife.leaveRange = props.data.leaveRange;
formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd; formDataHelpWife.leaveRangeEnd = props.data.leaveRangeEnd;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
leaveId.value = props.data.id; leaveId.value = props.data.id;
} }
@ -254,188 +239,204 @@ onMounted(async () => {
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
outlined
hide-bottom-space
bg-color="white"
v-model="formDataHelpWife.leaveWrote"
label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/>
<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
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit || statusCheck === 'NEW'"
@update:model-value="
(formDataHelpWife.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="
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
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white"
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="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="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 <q-input
:bottom-slots="!isLeave ? true : false" ref="leaveWroteRef"
:color="!isLeave ? 'red' : 'black'" for="leaveWroteRef"
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''"
dense dense
outlined outlined
ref="leaveTotalRef" hide-bottom-space
for="leaveTotalRef" bg-color="white"
v-model="leaveText" v-model="formDataHelpWife.leaveWrote"
label="จำนวนวันที่ลา" label="เขียนที่"
readonly :readonly="!edit || statusCheck === 'NEW'"
> :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
<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-12 cursor-pointer inputgreen">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker
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), 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="
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>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select
outlined
dense
bg-color="white"
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="mdi-clock-outline"
style="color: var(--q-primary)"
/>
</template>
</q-select>
</div>
</div>
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker
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>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select
v-if="!checkDate"
outlined
dense
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>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-3 col-sm-6 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 : ''"
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataHelpWife.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
>
<template v-slot:hint>
<span style="color: red">
{{ !isLeave ? reasonLeave : "" }}
</span>
</template>
</q-input>
</div>
</div>
</div>
<div class="col-12 col-md-8 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12"
ref="wifeDayNameRef" ref="wifeDayNameRef"
@ -451,122 +452,130 @@ onMounted(async () => {
/> />
</div> </div>
<datepicker <div class="col-12 col-md-4 col-sm-12 inputgreen">
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.wifeDayDateBorn" v-model="formDataHelpWife.wifeDayDateBorn"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="wifeDayDateBornRef" ref="wifeDayDateBornRef"
for="wifeDayDateBornRef" for="wifeDayDateBornRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataHelpWife.wifeDayDateBorn != null formDataHelpWife.wifeDayDateBorn != null
? date2Thai(formDataHelpWife.wifeDayDateBorn) ? date2Thai(formDataHelpWife.wifeDayDateBorn)
: null : null
" "
:label="`${'วันที่คลอด'}`" :label="`${'วันที่คลอด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-12 inputgreen">
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
ref="leaveNumberRef" ref="leaveNumberRef"
for="leaveNumberRef" for="leaveNumberRef"
v-model="dataStore.telephoneNumber" v-model="dataStore.telephoneNumber"
mask="(###)-###-####" mask="(###)-###-####"
unmasked-value unmasked-value
hide-bottom-space hide-bottom-space
lazy-rules lazy-rules
bg-color="white" bg-color="white"
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<q-input <div class="col-12 col-md-9 col-sm-12 inputgreen">
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="dataStore.currentAddress" v-model="dataStore.currentAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`, (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]" ]"
/> />
</div>
</div> </div>
</div> </div>
<q-input
hide-bottom-space <div class="col-12 inputgreen">
bg-color="white" <q-input
type="textarea" hide-bottom-space
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white"
dense type="textarea"
outlined dense
ref="leaveDetailRef" outlined
for="leaveDetailRef" ref="leaveDetailRef"
v-model="formDataHelpWife.leaveDetail" for="leaveDetailRef"
label="สาเหตุการลา" v-model="formDataHelpWife.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" label="สาเหตุการลา"
/> :readonly="!edit || statusCheck === 'NEW'"
/>
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-file <div class="q-pl-sm col-12">
bg-color="white" <q-file
ref="leaveDocumentRef" bg-color="white"
v-model="formDataHelpWife.leaveDocument" ref="leaveDocumentRef"
@added="fileUploadDoc" v-model="formDataHelpWife.leaveDocument"
dense @added="fileUploadDoc"
label="เอกสารประกอบ" dense
outlined label="เอกสารประกอบ"
use-chips outlined
class="q-pl-sm col-12" use-chips
multiple multiple
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div>
</div> </div>
</div> </div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">

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

@ -1,7 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from "vue"; import { ref, reactive, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import { useRouter } from "vue-router";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
@ -102,20 +101,6 @@ const fileUploadDoc = async (files: any) => {
const leaveDocumentList = ref<any>(); const leaveDocumentList = ref<any>();
const statusCheck = ref<string>(""); const statusCheck = ref<string>("");
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
const isReadOnly = computed(() => {
const conditionleaveRange =
formDataVacation.leaveRange === "MORNING" ||
formDataVacation.leaveRange === "AFTERNOON";
if (conditionleaveRange) {
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
formDataVacation.leaveTotal = 0.5;
} else {
formDataVacation.leaveTotal = null;
}
return conditionleaveRange;
});
/** แจ้งเมื่อวันลาไม่ถูกต้อง */ /** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
@ -267,184 +252,171 @@ onMounted(() => {
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
class="col-12 col-sm-12 cursor-pointer inputgreen" <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
outlined outlined
v-model="formDataVacation.leaveWrote" v-model="formDataVacation.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกเขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataVacation.leaveStartDate" v-model="formDataVacation.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataVacation.leaveEndDate = null), fetchCheck() (formDataVacation.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataVacation.leaveStartDate != null formDataVacation.leaveStartDate != null
? date2Thai(formDataVacation.leaveStartDate) ? date2Thai(formDataVacation.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataVacation.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataVacation.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataVacation.leaveEndDate" v-model="formDataVacation.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataVacation.leaveStartDate" :min-date="formDataVacation.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataVacation.leaveEndDate != null formDataVacation.leaveEndDate != null
? date2Thai(formDataVacation.leaveEndDate) ? date2Thai(formDataVacation.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <div class="col-12 col-md-3 col-sm-6 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataVacation.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataVacation.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
<q-input </template>
:bottom-slots="!isLeave ? true : false" </q-select>
:color="!isLeave ? 'red' : 'black'" </div>
: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> </div>
@ -470,102 +442,133 @@ onMounted(() => {
@update:model-value="resetDate" @update:model-value="resetDate"
/> />
</div> --> </div> -->
<q-input <div class="col-12 col-md-3 col-sm-6">
class="col-12 col-md-4 col-sm-6" <q-input
ref="restDayOldTotalRef" :bottom-slots="!isLeave ? true : false"
for="restDayOldTotalRef" :color="!isLeave ? 'red' : 'black'"
dense :bg-color="!isLeave ? 'red-2' : 'white'"
hide-bottom-space :border-color="!isLeave ? 'red' : 'gray'"
bg-color="white" :input-class="!isLeave ? dateEndInputStyle : ''"
readonly dense
outlined outlined
v-model="dataStore.restDayTotalOld" ref="leaveTotalRef"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา" for="leaveTotalRef"
/> v-model="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
>
<template v-slot:hint>
<span style="color: red">
{{ !isLeave ? reasonLeave : "" }}
</span>
</template>
</q-input>
</div>
<q-input <div class="col-12 col-md-3 col-sm-6">
class="col-12 col-md-4 col-sm-6" <q-input
ref="restDayCurrentTotalRef" ref="restDayOldTotalRef"
for="restDayCurrentTotalRef" for="restDayOldTotalRef"
dense dense
readonly hide-bottom-space
hide-bottom-space bg-color="white"
bg-color="white" readonly
outlined outlined
v-model="dataStore.restDayCurrentTotal" v-model="dataStore.restDayTotalOld"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน" label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/> />
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input
ref="restDayCurrentTotalRef"
for="restDayCurrentTotalRef"
dense
readonly
hide-bottom-space
bg-color="white"
outlined
v-model="dataStore.restDayCurrentTotal"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/>
</div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-12 inputgreen">
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveNumberRef" ref="leaveNumberRef"
for="leaveNumberRef" for="leaveNumberRef"
v-model="dataStore.telephoneNumber" v-model="dataStore.telephoneNumber"
mask="(###)-###-####" mask="(###)-###-####"
lazy-rules lazy-rules
unmasked-value unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<q-input <div class="col-12 col-md-9 col-sm-12 inputgreen">
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen" <q-input
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="dataStore.currentAddress" v-model="dataStore.currentAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`, (val:string) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]" ]"
/> />
</div>
</div> </div>
</div> </div>
<q-input
type="textarea" <div class="col-12 inputgreen">
hide-bottom-space <q-input
bg-color="white" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" hide-bottom-space
dense bg-color="white"
outlined dense
ref="leaveDetailRef" outlined
for="leaveDetailRef" ref="leaveDetailRef"
v-model="formDataVacation.leaveDetail" for="leaveDetailRef"
label="สาเหตุการลา" v-model="formDataVacation.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" label="สาเหตุการลา"
/> :readonly="!edit || statusCheck === 'NEW'"
/>
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->
<q-file <div class="q-pl-sm col-12">
ref="leaveDocumentRef" <q-file
bg-color="white" ref="leaveDocumentRef"
v-model="formDataVacation.leaveDocument" bg-color="white"
@added="fileUploadDoc" v-model="formDataVacation.leaveDocument"
dense @added="fileUploadDoc"
label="เอกสารประกอบ" dense
multiple label="เอกสารประกอบ"
outlined multiple
use-chips outlined
class="q-pl-sm col-12" use-chips
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div>
</div> </div>
</div> </div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">

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

@ -13,18 +13,10 @@ import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbs
const $q = useQuasar(); const $q = useQuasar();
const dataStore = useLeaveStore(); const dataStore = useLeaveStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const { date2Thai, messageError, convertDateToAPI, showLoader, hideLoader } =
date2Thai, mixin;
calculateDurationYmd,
dateToISO,
messageError,
convertDateToAPI,
showLoader,
hideLoader,
} = mixin;
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
const leaveId = ref<string>(""); const leaveId = ref<string>("");
const leaveText = ref<string>("");
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
@ -50,7 +42,7 @@ const ordainDayLocationNumberRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null); const leaveWroteRef = ref<object | null>(null);
const leavebirthDateRef = ref<object | null>(null); const leavebirthDateRef = ref<object | null>(null);
const leavegovernmentDateRef = ref<object | null>(null); const leavegovernmentDateRef = ref<object | null>(null);
const totalLeaveRef = ref<object | null>(null); const leaveTotalRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null); const leaveEndDateRef = ref<object | null>(null);
const ordainDayOrdinationRef = ref<object | null>(null); const ordainDayOrdinationRef = ref<object | null>(null);
const leaveStartDateRef = ref<object | null>(null); const leaveStartDateRef = ref<object | null>(null);
@ -68,7 +60,7 @@ const formDataOrdination = reactive<any>({
leavebirthDate: null, leavebirthDate: null,
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
totalLeave: 0, leaveTotal: 0,
ordainDayOrdination: null, ordainDayOrdination: null,
ordainDayLocationName: "", ordainDayLocationName: "",
ordainDayLocationNumber: null, ordainDayLocationNumber: null,
@ -89,7 +81,7 @@ const formRef: OrdinationForm = {
leavebirthDate: leavebirthDateRef, leavebirthDate: leavebirthDateRef,
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
totalLeave: totalLeaveRef, leaveTotal: leaveTotalRef,
ordainDayOrdination: ordainDayOrdinationRef, ordainDayOrdination: ordainDayOrdinationRef,
ordainDayLocationName: ordainDayLocationNameRef, ordainDayLocationName: ordainDayLocationNameRef,
ordainDayLocationNumber: ordainDayLocationNumberRef, ordainDayLocationNumber: ordainDayLocationNumberRef,
@ -207,10 +199,6 @@ async function fetchCheck() {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataOrdination.leaveTotal = data.totalDate; formDataOrdination.leaveTotal = data.totalDate;
leaveText.value = calculateDurationYmd(
formDataOrdination.leaveStartDate,
formDataOrdination.leaveEndDate
);
reasonLeave.value = data.message reasonLeave.value = data.message
? data.message ? data.message
: "จำนวนวันลาเกินที่กำหนด"; : "จำนวนวันลาเกินที่กำหนด";
@ -222,17 +210,6 @@ async function fetchCheck() {
}); });
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataOrdination.leaveStartDate,
formDataOrdination.leaveEndDate
);
formDataOrdination.leaveTotal = newLeaveTotal;
}
/** แจ้งเมื่อวันลาไม่ถูกต้อง */ /** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
@ -250,11 +227,6 @@ watch(props.data, async () => {
formDataOrdination.leaveTotal = props.data.leaveTotal; formDataOrdination.leaveTotal = props.data.leaveTotal;
formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination; formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName; formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
formDataOrdination.ordainDayLocationAddress = formDataOrdination.ordainDayLocationAddress =
props.data.ordainDayLocationAddress; props.data.ordainDayLocationAddress;
formDataOrdination.ordainDayBuddhistLentName = formDataOrdination.ordainDayBuddhistLentName =
@ -304,11 +276,6 @@ onMounted(async () => {
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
leaveId.value = props.data.id; leaveId.value = props.data.id;
} }
}); });
@ -323,277 +290,290 @@ onMounted(async () => {
<form @submit.prevent="onValidate" class="full-width"> <form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
ref="leaveWroteRef" <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" ref="leaveWroteRef"
dense dense
outlined outlined
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
v-model="formDataOrdination.leaveWrote" v-model="formDataOrdination.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leaveStartDate" v-model="formDataOrdination.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataOrdination.leaveEndDate = null), fetchCheck() (formDataOrdination.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataOrdination.leaveStartDate != null formDataOrdination.leaveStartDate != null
? date2Thai(formDataOrdination.leaveStartDate) ? date2Thai(formDataOrdination.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataOrdination.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataOrdination.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div>
</div> </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leaveEndDate" v-model="formDataOrdination.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataOrdination.leaveStartDate" :min-date="formDataOrdination.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataOrdination.leaveEndDate != null formDataOrdination.leaveEndDate != null
? date2Thai(formDataOrdination.leaveEndDate) ? date2Thai(formDataOrdination.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <div class="col-12 col-md-3 col-sm-6 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataOrdination.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataOrdination.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-6">
:bottom-slots="!isLeave ? true : false" <q-input
:color="!isLeave ? 'red' : 'black'" :bottom-slots="!isLeave ? true : false"
:bg-color="!isLeave ? 'red-2' : 'white'" :color="!isLeave ? 'red' : 'black'"
:border-color="!isLeave ? 'red' : 'gray'" :bg-color="!isLeave ? 'red-2' : 'white'"
:input-class="!isLeave ? dateEndInputStyle : ''" :border-color="!isLeave ? 'red' : 'gray'"
class="col-12 col-md-4 col-sm-6" :input-class="!isLeave ? dateEndInputStyle : ''"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="leaveText" v-model="formDataOrdination.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา (วัน)"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? reasonLeave : "" }} {{ !isLeave ? reasonLeave : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
<datepicker </div>
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataOrdination.leavegovernmentDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
readonly
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavegovernmentDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="
dataStore.dateAppoint != null
? date2Thai(dataStore.dateAppoint)
: null
"
:label="`${'วันที่เข้ารับราชการ'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
<datepicker <div class="col-12 col-md-3 col-sm-6">
class="col-12 col-md-4 col-sm-6" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leavebirthDate" v-model="formDataOrdination.leavegovernmentDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
readonly :enableTimePicker="false"
:enableTimePicker="false" week-start="0"
week-start="0" readonly
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
ref="leavebirthDateRef" ref="leavegovernmentDateRef"
dense dense
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
readonly readonly
class="full-width" class="full-width"
:model-value=" :model-value="
dataStore.birthDate != null dataStore.dateAppoint != null
? date2Thai(dataStore.birthDate) ? date2Thai(dataStore.dateAppoint)
: null : null
" "
:label="`${'วันเดือนปีเกิด'}`" :label="`${'วันที่เข้ารับราชการ'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--black)" style="color: var(--black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6">
<datepicker
menu-class-name="modalfix"
v-model="formDataOrdination.leavebirthDate"
:locale="'th'"
autoApply
borderless
readonly
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
outlined
ref="leavebirthDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width"
:model-value="
dataStore.birthDate != null
? date2Thai(dataStore.birthDate)
: null
"
:label="`${'วันเดือนปีเกิด'}`"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
style="color: var(--black)"
>
</q-icon>
</template>
</q-input>
</template>
</datepicker>
</div>
</div> </div>
</div> </div>
@ -620,158 +600,170 @@ onMounted(async () => {
</div> </div>
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div> <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<datepicker <div class="col-12 col-md-4 col-sm-6 inputgreen">
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.ordainDayOrdination" v-model="formDataOrdination.ordainDayOrdination"
:locale="'th'" :locale="'th'"
autoApply autoApply
full-width full-width
borderless borderless
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
ref="ordainDayOrdinationRef" ref="ordainDayOrdinationRef"
dense dense
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataOrdination.ordainDayOrdination != null formDataOrdination.ordainDayOrdination != null
? date2Thai(formDataOrdination.ordainDayOrdination) ? date2Thai(formDataOrdination.ordainDayOrdination)
: null : null
" "
:label="`${'วันอุปสมบท'}`" :label="`${'วันอุปสมบท'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<q-input <div class="col-12 col-md-4 col-sm-6 inputgreen">
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" <q-input
dense dense
hide-bottom-space hide-bottom-space
ref="ordainDayLocationNameRef" ref="ordainDayLocationNameRef"
bg-color="white" bg-color="white"
outlined outlined
full-width full-width
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
v-model="formDataOrdination.ordainDayLocationName" v-model="formDataOrdination.ordainDayLocationName"
label="ชื่อวัด" label="ชื่อวัด"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/> />
</div>
<q-input <div class="col-12 col-md-4 col-sm-12 inputgreen">
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" <q-input
ref="ordainDayLocationNumberRef" ref="ordainDayLocationNumberRef"
dense dense
full-width full-width
outlined outlined
v-model="formDataOrdination.ordainDayLocationNumber" v-model="formDataOrdination.ordainDayLocationNumber"
bg-color="white" bg-color="white"
mask="(###)-###-####" mask="(###)-###-####"
lazy-rules lazy-rules
unmasked-value unmasked-value
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
hide-bottom-space hide-bottom-space
label="หมายเลขโทรศัพท์" label="หมายเลขโทรศัพท์"
:rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/> />
<q-input </div>
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense <div class="col-12 inputgreen">
ref="ordainDayLocationAddressRef" <q-input
bg-color="white" dense
outlined ref="ordainDayLocationAddressRef"
hide-bottom-space bg-color="white"
v-model="formDataOrdination.ordainDayLocationAddress" outlined
label="ที่อยู่" hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" v-model="formDataOrdination.ordainDayLocationAddress"
:rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]" label="ที่อยู่"
type="textarea" :readonly="!edit || statusCheck === 'NEW'"
/> :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
/>
</div>
<div class="q-pl-sm text-weight-bold text-dark col-12"> <div class="q-pl-sm text-weight-bold text-dark col-12">
สถานที่จำพรรษา สถานที่จำพรรษา
</div> </div>
<q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
ref="ordainDayBuddhistLentNameRef"
bg-color="white"
hide-bottom-space
outlined
:readonly="!edit || statusCheck === 'NEW'"
v-model="formDataOrdination.ordainDayBuddhistLentName"
label="ชื่อวัด"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
<q-input <div class="col-12 col-md-6 col-sm-12 inputgreen">
class="col-12 cursor-pointer inputgreen" <q-input
dense dense
ref="ordainDayBuddhistLentAddressRef" ref="ordainDayBuddhistLentNameRef"
bg-color="white" bg-color="white"
outlined hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" outlined
v-model="formDataOrdination.ordainDayBuddhistLentAddress" :readonly="!edit || statusCheck === 'NEW'"
label="ที่อยู่" v-model="formDataOrdination.ordainDayBuddhistLentName"
:rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]" label="ชื่อวัด"
type="textarea" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
hide-bottom-space />
/> </div>
<q-input
type="textarea" <div class="col-12 inputgreen">
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" <q-input
dense dense
bg-color="white" ref="ordainDayBuddhistLentAddressRef"
outlined bg-color="white"
ref="leaveDetailRef" outlined
for="leaveDetailRef" :readonly="!edit || statusCheck === 'NEW'"
v-model="formDataOrdination.leaveDetail" v-model="formDataOrdination.ordainDayBuddhistLentAddress"
label="สาเหตุการลา" label="ที่อยู่"
:readonly="!edit || statusCheck === 'NEW'" :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
/> type="textarea"
hide-bottom-space
/>
</div>
<div class="col-12 inputgreen">
<q-input
type="textarea"
dense
bg-color="white"
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formDataOrdination.leaveDetail"
label="สาเหตุการลา"
:readonly="!edit || statusCheck === 'NEW'"
/>
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->
<q-file <div class="col-12 q-pl-sm col-12">
ref="leaveDocumentRef" <q-file
v-model="formDataOrdination.leaveDocument" ref="leaveDocumentRef"
@added="fileUploadDoc" v-model="formDataOrdination.leaveDocument"
dense @added="fileUploadDoc"
label="เอกสารประกอบ" dense
multiple label="เอกสารประกอบ"
outlined multiple
bg-color="white" outlined
use-chips bg-color="white"
class="col-12 q-pl-sm col-12" use-chips
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div>
</div> </div>
</div> </div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">

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

@ -61,7 +61,7 @@ const formDataHaji = reactive<any>({
leavegovernmentDate: null, leavegovernmentDate: null,
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
totalLeave: 0, leaveTotal: 0,
hajjDayStatus: true, hajjDayStatus: true,
leaveDocument: [], leaveDocument: [],
leaveDetail: "", leaveDetail: "",
@ -175,17 +175,6 @@ async function fetchCheck() {
}); });
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(
formDataHaji.leaveStartDate,
formDataHaji.leaveEndDate
);
formDataHaji.leaveTotal = newLeaveTotal;
}
/** แจ้งเมื่อวันลาไม่ถูกต้อง */ /** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
@ -200,18 +189,12 @@ watch(props.data, async () => {
formDataHaji.leaveTotal = props.data.leaveTotal; formDataHaji.leaveTotal = props.data.leaveTotal;
formDataHaji.leaveStartDate = props.data.leaveStartDate; formDataHaji.leaveStartDate = props.data.leaveStartDate;
formDataHaji.leaveEndDate = props.data.leaveEndDate; formDataHaji.leaveEndDate = props.data.leaveEndDate;
formDataHaji.totalLeave = props.data.totalLeave;
formDataHaji.hajjDayStatus = props.data.hajjDayStatus; formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
formDataHaji.leaveDetail = props.data.leaveDetail; formDataHaji.leaveDetail = props.data.leaveDetail;
formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd; formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
formDataHaji.leaveRange = props.data.leaveRange; formDataHaji.leaveRange = props.data.leaveRange;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
formDataHaji.leaveDocument = []; formDataHaji.leaveDocument = [];
} }
}); });
@ -223,18 +206,11 @@ onMounted(async () => {
formDataHaji.leaveTotal = props.data.leaveTotal; formDataHaji.leaveTotal = props.data.leaveTotal;
formDataHaji.leaveStartDate = props.data.leaveStartDate; formDataHaji.leaveStartDate = props.data.leaveStartDate;
formDataHaji.leaveEndDate = props.data.leaveEndDate; formDataHaji.leaveEndDate = props.data.leaveEndDate;
formDataHaji.totalLeave = props.data.totalLeave;
formDataHaji.hajjDayStatus = props.data.hajjDayStatus; formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
formDataHaji.leaveDetail = props.data.leaveDetail; formDataHaji.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
formDataHaji.leaveRange = props.data.leaveRange; formDataHaji.leaveRange = props.data.leaveRange;
formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd; formDataHaji.leaveRangeEnd = props.data.leaveRangeEnd;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
// formDataHaji.leaveDocument = props.data.leaveDocument; // formDataHaji.leaveDocument = props.data.leaveDocument;
leaveId.value = props.data.id; leaveId.value = props.data.id;
@ -253,7 +229,7 @@ onMounted(async () => {
<q-input <q-input
v-model="formDataHaji.leaveWrote" v-model="formDataHaji.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -266,7 +242,7 @@ onMounted(async () => {
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-6 inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHaji.leaveStartDate" v-model="formDataHaji.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -318,7 +294,7 @@ onMounted(async () => {
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-6 inputgreen"
bg-color="white" bg-color="white"
v-model="formDataHaji.leaveRange" v-model="formDataHaji.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -340,7 +316,7 @@ onMounted(async () => {
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-6 inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHaji.leaveEndDate" v-model="formDataHaji.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -390,7 +366,7 @@ onMounted(async () => {
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-6 inputgreen"
bg-color="white" bg-color="white"
v-model="formDataHaji.leaveRangeEnd" v-model="formDataHaji.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -412,27 +388,29 @@ onMounted(async () => {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-6">
:bottom-slots="!isLeave ? true : false" <q-input
:color="!isLeave ? 'red' : 'black'" :bottom-slots="!isLeave ? true : false"
:bg-color="!isLeave ? 'red-2' : 'white'" :color="!isLeave ? 'red' : 'black'"
:border-color="!isLeave ? 'red' : 'gray'" :bg-color="!isLeave ? 'red-2' : 'white'"
:input-class="!isLeave ? dateEndInputStyle : ''" :border-color="!isLeave ? 'red' : 'gray'"
class="col-12 col-md-3 col-sm-6" :input-class="!isLeave ? dateEndInputStyle : ''"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="leaveText" v-model="formDataHaji.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา (วัน)"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? reasonLeave : "" }} {{ !isLeave ? reasonLeave : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
@ -502,16 +480,18 @@ onMounted(async () => {
/> />
</div> </div>
<q-input <div class="col-12 inputgreen">
v-model="formDataHaji.leaveDetail" <q-input
class="col-12 q-mt-sm cursor-pointer inputgreen" v-model="formDataHaji.leaveDetail"
bg-color="white" :readonly="!edit || statusCheck === 'NEW'"
dense bg-color="white"
outlined dense
type="textarea" outlined
label="สาเหตุการลา" type="textarea"
:readonly="!edit || statusCheck === 'NEW'" label="สาเหตุการลา"
/> />
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->

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

@ -270,221 +270,237 @@ onMounted(async () => {
<form @submit.prevent="onValidate"> <form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
ref="leaveWroteRef" <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" ref="leaveWroteRef"
dense dense
outlined outlined
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
v-model="formDataMilitary.leaveWrote" v-model="formDataMilitary.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.leaveStartDate" v-model="formDataMilitary.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataMilitary.leaveEndDate = null), fetchCheck() (formDataMilitary.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataMilitary.leaveStartDate != null formDataMilitary.leaveStartDate != null
? date2Thai(formDataMilitary.leaveStartDate) ? date2Thai(formDataMilitary.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <!-- <div class="col-12 col-sm-3 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataMilitary.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataMilitary.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</div> </template>
</q-select>
</div> -->
<!-- </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm"> -->
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.leaveEndDate" v-model="formDataMilitary.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataMilitary.leaveStartDate" :min-date="formDataMilitary.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataMilitary.leaveEndDate != null formDataMilitary.leaveEndDate != null
? date2Thai(formDataMilitary.leaveEndDate) ? date2Thai(formDataMilitary.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <!-- <div class="col-12 col-sm-3 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataMilitary.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataMilitary.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</div> </template>
</q-select>
</div> -->
<!-- </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row"> -->
<q-input <div class="col-12 col-md-3 col-sm-6">
:bottom-slots="!isLeave ? true : false" <q-input
:color="!isLeave ? 'red' : 'black'" :bottom-slots="!isLeave ? true : false"
:bg-color="!isLeave ? 'red-2' : 'white'" :color="!isLeave ? 'red' : 'black'"
:border-color="!isLeave ? 'red' : 'gray'" :bg-color="!isLeave ? 'red-2' : 'white'"
:input-class="!isLeave ? dateEndInputStyle : ''" :border-color="!isLeave ? 'red' : 'gray'"
class="col-12 col-md-4 col-sm-6" :input-class="!isLeave ? dateEndInputStyle : ''"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="leaveText" v-model="leaveText"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? reasonLeave : "" }} {{ !isLeave ? reasonLeave : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
<q-input </div>
ref="absentDaySummonRef" </div>
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" </div>
dense
bg-color="white"
outlined
v-model="formDataMilitary.absentDaySummon"
label="ได้รับหมายเรียกของ"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
<q-input <div class="col-12">
ref="atRef" <div class="row q-col-gutter-sm">
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" <div class="col-12 col-md-8 col-sm-6 inputgreen">
dense <q-input
bg-color="white" ref="absentDaySummonRef"
outlined dense
v-model="formDataMilitary.absentDayLocation" bg-color="white"
label="ที่" outlined
hide-bottom-space v-model="formDataMilitary.absentDaySummon"
:readonly="!edit || statusCheck === 'NEW'" label="ได้รับหมายเรียกของ"
:rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]" hide-bottom-space
/> :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/>
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input
ref="atRef"
dense
bg-color="white"
outlined
v-model="formDataMilitary.absentDayLocation"
label="ที่"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกที่'}`]"
/>
</div>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-6 inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.absentDayRegistorDate" v-model="formDataMilitary.absentDayRegistorDate"
:locale="'th'" :locale="'th'"
@ -530,7 +546,7 @@ onMounted(async () => {
</datepicker> </datepicker>
<q-input <q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-6 inputgreen"
dense dense
bg-color="white" bg-color="white"
ref="absentDayGetInRef" ref="absentDayGetInRef"
@ -543,7 +559,7 @@ onMounted(async () => {
/> />
<q-input <q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-12 inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -557,16 +573,17 @@ onMounted(async () => {
</div> </div>
</div> </div>
<q-input <div class="col-12 inputgreen">
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" <q-input
dense v-model="formDataMilitary.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" bg-color="white"
outlined dense
v-model="formDataMilitary.leaveDetail" outlined
type="textarea" type="textarea"
label="สาเหตุการลา" label="สาเหตุการลา"
/> />
</div>
<div class="col-12" v-if="statusCheck != 'NEW'"> <div class="col-12" v-if="statusCheck != 'NEW'">
<!-- multiple --> <!-- multiple -->

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

@ -298,417 +298,447 @@ onMounted(async () => {
<form @submit.prevent="onValidate"> <form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
v-model="formDataStudy.leaveWrote" <q-input
ref="leaveWroteRef" v-model="formDataStudy.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen" ref="leaveWroteRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataStudy.leaveStartDate" v-model="formDataStudy.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataStudy.leaveEndDate = null), fetchCheck() (formDataStudy.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataStudy.leaveStartDate != null formDataStudy.leaveStartDate != null
? date2Thai(formDataStudy.leaveStartDate) ? date2Thai(formDataStudy.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <!-- <div class="col-12 col-sm-3 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataStudy.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataStudy.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</div> </template>
</q-select>
</div> -->
<!-- </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm"> -->
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataStudy.leaveEndDate" v-model="formDataStudy.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataStudy.leaveStartDate" :min-date="formDataStudy.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataStudy.leaveEndDate != null formDataStudy.leaveEndDate != null
? date2Thai(formDataStudy.leaveEndDate) ? date2Thai(formDataStudy.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <!-- <div class="col-12 col-sm-3 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataStudy.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataStudy.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div> -->
<!-- </div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row"> -->
<div class="col-12 col-md-3 col-sm-6">
<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> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-3 col-sm-6">
:bottom-slots="!isLeave ? true : false" <datepicker
:color="!isLeave ? 'red' : 'black'" menu-class-name="modalfix"
:bg-color="!isLeave ? 'red-2' : 'white'" autoApply
:border-color="!isLeave ? 'red' : 'gray'" borderless
:input-class="!isLeave ? dateEndInputStyle : ''" week-start="0"
class="col-12 col-md-3 col-sm-6" readonly
dense :enableTimePicker="false"
outlined :locale="'th'"
ref="leaveTotalRef" >
for="leaveTotalRef" <template #year="{ year }">
v-model="leaveText" {{ year + 543 }}
label="มีกำหนด" </template>
readonly <template #year-overlay-value="{ value }">
> {{ parseInt(value + 543) }}
<template v-slot:hint> </template>
<span style="color: red"> <template #trigger>
{{ !isLeave ? reasonLeave : "" }} <q-input
</span> ref="leavegovernmentDateRef"
</template> class="full-width"
</q-input> bg-color="white"
<datepicker outlined
class="col-12 col-md-3 col-sm-6" readonly
menu-class-name="modalfix" dense
autoApply hide-bottom-space
borderless :label="`${'วันที่เข้ารับราชการ'}`"
week-start="0" :model-value="
readonly dataStore.dateAppoint != null
:enableTimePicker="false" ? date2Thai(dataStore.dateAppoint)
:locale="'th'" : null
> "
<template #year="{ year }"> :rules="[
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leavegovernmentDateRef"
class="full-width"
bg-color="white"
outlined
readonly
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="
dataStore.dateAppoint != null
? date2Thai(dataStore.dateAppoint)
: null
"
:rules="[
(val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`, (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]" ]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--black)" style="color: var(--black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<datepicker <div class="col-12 col-md-3 col-sm-6">
class="col-12 col-md-3 col-sm-6" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
readonly readonly
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leavebirthDateRef" ref="leavebirthDateRef"
class="full-width" class="full-width"
bg-color="white" bg-color="white"
outlined outlined
dense dense
readonly readonly
hide-bottom-space hide-bottom-space
:label="`${'วันเดือนปีเกิด'}`" :label="`${'วันเดือนปีเกิด'}`"
:model-value=" :model-value="
dataStore.birthDate != null dataStore.birthDate != null
? date2Thai(dataStore.birthDate) ? date2Thai(dataStore.birthDate)
: null : null
" "
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--black)" style="color: var(--black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<q-input <div class="col-12 col-md-3 col-sm-6">
:model-value="dataStore.salary" <q-input
ref="leaveSalaryRef" :model-value="dataStore.salary"
class="col-12 col-sm-6 col-md-3" ref="leaveSalaryRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
readonly readonly
label="เงินเดือนปัจจุบัน" label="เงินเดือนปัจจุบัน"
/> />
</div>
<q-input <div class="col-12 col-md-3 col-sm-6">
:model-value="dataStore.salaryText" <q-input
ref="leaveSalaryRef" :model-value="dataStore.salaryText"
class="col-12 col-sm-6 col-md-3" ref="leaveSalaryRef"
bg-color="white" bg-color="white"
dense dense
readonly readonly
outlined outlined
label="เงินเดือนปัจจุบัน (ตัวอักษร)" label="เงินเดือนปัจจุบัน (ตัวอักษร)"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
/> />
</div>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-md-4 col-sm-12 inputgreen">
v-model="formDataStudy.studyDayUniversityName" <q-input
ref="studyDayUniversityNameRef" v-model="formDataStudy.studyDayUniversityName"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" ref="studyDayUniversityNameRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
label="ชื่อสถานศึกษา" label="ชื่อสถานศึกษา"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
/> />
</div>
<q-input <div class="col-12 col-md-4 col-sm-6 inputgreen">
v-model="formDataStudy.studyDayDegreeLevel" <q-input
ref="studyDayDegreeLevelRef" v-model="formDataStudy.studyDayDegreeLevel"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" ref="studyDayDegreeLevelRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
label="ชั้นปริญญา" label="ชั้นปริญญา"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
/> />
</div>
<q-input <div class="col-12 col-md-4 col-sm-6 inputgreen">
v-model="formDataStudy.studyDaySubject" <q-input
ref="studyDaySubjectRef" v-model="formDataStudy.studyDaySubject"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" ref="studyDaySubjectRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
label="ศึกษาวิชา" label="ศึกษาวิชา"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
/> />
</div>
<q-input <div class="col-12 col-md-4 col-sm-6 inputgreen">
v-model="formDataStudy.studyDayCountry" <q-input
ref="studyDayCountryRef" v-model="formDataStudy.studyDayCountry"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" ref="studyDayCountryRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
label="ประเทศ" label="ประเทศ"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
/> />
</div>
<q-input <div class="col-12 col-md-4 col-sm-6 inputgreen">
v-model="formDataStudy.studyDayScholarship" <q-input
ref="studyDayScholarshipRef" v-model="formDataStudy.studyDayScholarship"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" ref="studyDayScholarshipRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
label="ด้วยทุน" label="ด้วยทุน"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/> />
</div>
<q-input
v-model="dataStore.telephoneNumber"
ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
:readonly="!edit || statusCheck === 'NEW'"
unmasked-value
hide-bottom-space
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
<q-input
v-model="dataStore.currentAddress"
ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
:readonly="!edit || statusCheck === 'NEW'"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[
(val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</div> </div>
</div> </div>
<q-input <div class="full-width">
v-model="formDataStudy.leaveDetail" <div class="q-col-gutter-sm row">
:readonly="!edit || statusCheck === 'NEW'" <div class="col-12 col-md-4 col-sm-12 inputgreen">
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" <q-input
bg-color="white" v-model="dataStore.telephoneNumber"
dense ref="leaveNumberRef"
outlined bg-color="white"
type="textarea" dense
label="สาเหตุการลา" outlined
/> :readonly="!edit || statusCheck === 'NEW'"
unmasked-value
hide-bottom-space
mask="(###)-###-####"
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:rules="[
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]"
/>
</div>
<div class="col-12 col-md-8 col-sm-12 inputgreen">
<q-input
v-model="dataStore.currentAddress"
ref="leaveAddressRef"
bg-color="white"
dense
outlined
:readonly="!edit || statusCheck === 'NEW'"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
hide-bottom-space
:rules="[
(val:string) => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]"
/>
</div>
</div>
</div>
<div class="col-12 inputgreen">
<q-input
v-model="formDataStudy.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'"
bg-color="white"
dense
outlined
type="textarea"
label="สาเหตุการลา"
/>
</div>
<div class="col-12" v-if="statusCheck != 'NEW'"> <div class="col-12" v-if="statusCheck != 'NEW'">
<q-file <q-file

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

@ -17,7 +17,6 @@ const {
date2Thai, date2Thai,
arabicNumberToText, arabicNumberToText,
calculateDurationYmd, calculateDurationYmd,
dateToISO,
messageError, messageError,
convertDateToAPI, convertDateToAPI,
showLoader, showLoader,
@ -279,361 +278,386 @@ onMounted(async () => {
<form @submit.prevent="onValidate"> <form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
v-model="formDataTrain.leaveWrote" <q-input
ref="leaveWroteRef" v-model="formDataTrain.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen" ref="leaveWroteRef"
bg-color="white" bg-color="white"
dense dense
outlined outlined
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataTrain.leaveStartDate" v-model="formDataTrain.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataTrain.leaveEndDate = null), fetchCheck() (formDataTrain.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataTrain.leaveStartDate != null formDataTrain.leaveStartDate != null
? date2Thai(formDataTrain.leaveStartDate) ? date2Thai(formDataTrain.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <!-- <div class="col-12 col-sm-3 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataTrain.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataTrain.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</div> </template>
</q-select>
</div> -->
<!-- </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm"> -->
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataTrain.leaveEndDate" v-model="formDataTrain.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataTrain.leaveStartDate" :min-date="formDataTrain.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataTrain.leaveEndDate != null formDataTrain.leaveEndDate != null
? date2Thai(formDataTrain.leaveEndDate) ? date2Thai(formDataTrain.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <!-- <div class="col-12 col-sm-3 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataTrain.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataTrain.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</template>
</q-select>
</div> -->
<!-- </div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row"> -->
<div class="col-12 col-md-3 col-sm-6">
<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> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <div class="col-12 col-sm-3">
:bottom-slots="!isLeave ? true : false" <datepicker
:color="!isLeave ? 'red' : 'black'" v-model="formDataTrain.leavegovernmentDate"
:bg-color="!isLeave ? 'red-2' : 'white'" menu-class-name="modalfix"
:border-color="!isLeave ? 'red' : 'gray'" autoApply
:input-class="!isLeave ? dateEndInputStyle : ''" borderless
class="col-12 col-md-3 col-sm-6" week-start="0"
dense readonly
outlined :enableTimePicker="false"
ref="leaveTotalRef" :locale="'th'"
for="leaveTotalRef" >
v-model="leaveText" <template #year="{ year }">
label="มีกำหนด" {{ year + 543 }}
readonly </template>
> <template #year-overlay-value="{ value }">
<template v-slot:hint> {{ parseInt(value + 543) }}
<span style="color: red"> </template>
{{ !isLeave ? reasonLeave : "" }} <template #trigger>
</span> <q-input
</template> ref="leavegovernmentDateRef"
</q-input> class="full-width"
<datepicker outlined
v-model="formDataTrain.leavegovernmentDate" readonly
class="col-12 col-md-3 col-sm-6" bg-color="white"
menu-class-name="modalfix" dense
autoApply hide-bottom-space
borderless :label="`${'วันที่เข้ารับราชการ'}`"
week-start="0" :model-value="
readonly dataStore.dateAppoint != null
:enableTimePicker="false" ? date2Thai(dataStore.dateAppoint)
:locale="'th'" : null
> "
<template #year="{ year }"> :rules="[
{{ year + 543 }}
</template>
<template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }}
</template>
<template #trigger>
<q-input
ref="leavegovernmentDateRef"
class="full-width"
outlined
readonly
bg-color="white"
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="
dataStore.dateAppoint != null
? date2Thai(dataStore.dateAppoint)
: null
"
:rules="[
(val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`, (val:string) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]" ]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--black)" style="color: var(--black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<datepicker <div class="col-12 col-sm-3">
v-model="formDataTrain.leavebirthDate" <datepicker
class="col-12 col-md-3 col-sm-6" v-model="formDataTrain.leavebirthDate"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
readonly readonly
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leavebirthDateRef" ref="leavebirthDateRef"
class="full-width" class="full-width"
bg-color="white" bg-color="white"
outlined outlined
dense dense
readonly readonly
hide-bottom-space hide-bottom-space
:label="`${'วันเดือนปีเกิด'}`" :label="`${'วันเดือนปีเกิด'}`"
:model-value=" :model-value="
dataStore.birthDate != null dataStore.birthDate != null
? date2Thai(dataStore.birthDate) ? date2Thai(dataStore.birthDate)
: null : null
" "
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(---black)" style="color: var(---black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<q-input <div class="col-12 col-sm-3">
v-model="dataStore.salary" <q-input
class="col-12 col-sm-6 col-md-3" v-model="dataStore.salary"
bg-color="white" bg-color="white"
dense dense
outlined outlined
readonly readonly
label="เงินเดือนปัจจุบัน" label="เงินเดือนปัจจุบัน"
/> />
</div>
<q-input <div class="col-12 col-sm-3">
v-model="dataStore.salaryText" <q-input
class="col-12 col-sm-6 col-md-3" v-model="dataStore.salaryText"
dense dense
readonly readonly
outlined outlined
bg-color="white" bg-color="white"
label="เงินเดือนปัจจุบัน (ตัวอักษร)" label="เงินเดือนปัจจุบัน (ตัวอักษร)"
/> />
</div>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<div class="col-12 col-sm-8 inputgreen">
<q-input
v-model="formDataTrain.studyDayTrainingSubject"
ref="studyDayTrainingSubjectRef"
bg-color="white"
dense
outlined
label="ด้าน/หลักสูตร"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
/>
</div>
<div class="col-12 col-sm-4 inputgreen">
<q-input
v-model="formDataTrain.studyDayTrainingName"
ref="studyDayTrainingNameRef"
bg-color="white"
dense
outlined
label="ณ สถานที่"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
/>
</div>
<div class="col-12 col-sm-4 inputgreen">
<q-input
v-model="formDataTrain.studyDayCountry"
ref="studyDayCountryRef"
dense
bg-color="white"
outlined
label="ประเทศ"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
/>
</div>
<div class="col-12 col-sm-8 inputgreen">
<q-input
v-model="formDataTrain.studyDayScholarship"
ref="studyDayScholarshipRef"
bg-color="white"
dense
outlined
label="ด้วยทุน"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
</div>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input
v-model="formDataTrain.studyDayTrainingSubject"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="studyDayTrainingSubjectRef"
bg-color="white"
dense
outlined
label="ด้าน/หลักสูตร"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
/>
<q-input
v-model="formDataTrain.studyDayTrainingName"
ref="studyDayTrainingNameRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ณ สถานที่"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
/>
<q-input
v-model="formDataTrain.studyDayCountry"
ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense
bg-color="white"
outlined
label="ประเทศ"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
/>
<q-input
v-model="formDataTrain.studyDayScholarship"
ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white"
dense
outlined
label="ด้วยทุน"
hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/>
<q-input <q-input
v-model="dataStore.telephoneNumber" v-model="dataStore.telephoneNumber"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen" class="col-12 col-sm-4 inputgreen"
ref="leaveNumberRef" ref="leaveNumberRef"
dense dense
outlined outlined
@ -651,7 +675,7 @@ onMounted(async () => {
<q-input <q-input
v-model="dataStore.currentAddress" v-model="dataStore.currentAddress"
ref="leaveAddressRef" ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen" class="col-12 col-sm-8 inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -665,16 +689,17 @@ onMounted(async () => {
</div> </div>
</div> </div>
<q-input <div class="col-12 inputgreen">
v-model="formDataTrain.leaveDetail" <q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" v-model="formDataTrain.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" bg-color="white"
dense dense
outlined outlined
type="textarea" type="textarea"
label="สาเหตุการลา" label="สาเหตุการลา"
/> />
</div>
<div class="col-12" v-if="statusCheck != 'NEW'"> <div class="col-12" v-if="statusCheck != 'NEW'">
<q-file <q-file

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

@ -17,7 +17,7 @@ const dataStore = useLeaveStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
dateToISO, calculateDurationYmd,
messageError, messageError,
showLoader, showLoader,
hideLoader, hideLoader,
@ -27,6 +27,7 @@ const {
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
const isSave = ref<boolean>(false); const isSave = ref<boolean>(false);
const leaveId = ref<string>(""); const leaveId = ref<string>("");
const leaveText = ref<string>("");
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
@ -187,6 +188,11 @@ async function fetchCheck() {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataWorkInternational.leaveTotal = data.totalDate; formDataWorkInternational.leaveTotal = data.totalDate;
leaveText.value = calculateDurationYmd(
formDataWorkInternational.leaveStartDate,
formDataWorkInternational.leaveEndDate
);
reasonLeave.value = data.message reasonLeave.value = data.message
? data.message ? data.message
: "จำนวนวันลาเกินที่กำหนด"; : "จำนวนวันลาเกินที่กำหนด";
@ -206,7 +212,7 @@ const leaveDocumentList = ref<any>();
const leaveDraftDocument = ref<string>(); const leaveDraftDocument = ref<string>();
const statusCheck = ref<string>(""); const statusCheck = ref<string>("");
watch(props, () => { watch(props, async () => {
if (props.data) { if (props.data) {
formDataWorkInternational.leaveWrote = props.data.leaveWrote; formDataWorkInternational.leaveWrote = props.data.leaveWrote;
formDataWorkInternational.leaveStartDate = new Date( formDataWorkInternational.leaveStartDate = new Date(
@ -222,6 +228,11 @@ watch(props, () => {
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
formDataWorkInternational.leaveDraftDocument = null; formDataWorkInternational.leaveDraftDocument = null;
formDataWorkInternational.leaveDocument = []; formDataWorkInternational.leaveDocument = [];
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
} }
}); });
@ -238,7 +249,7 @@ watch(
); );
/**Hook */ /**Hook */
onMounted(() => { onMounted(async () => {
if (props.data) { if (props.data) {
formDataWorkInternational.leaveWrote = props.data.leaveWrote; formDataWorkInternational.leaveWrote = props.data.leaveWrote;
@ -255,6 +266,11 @@ onMounted(() => {
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
leaveId.value = props.data.id; leaveId.value = props.data.id;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
} }
}); });
</script> </script>
@ -267,200 +283,212 @@ onMounted(() => {
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 inputgreen">
class="col-12 col-sm-12 cursor-pointer inputgreen" <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
outlined outlined
v-model="formDataWorkInternational.leaveWrote" v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveStartDate" v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataWorkInternational.leaveEndDate = null), fetchCheck() (formDataWorkInternational.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataWorkInternational.leaveStartDate != null formDataWorkInternational.leaveStartDate != null
? date2Thai(formDataWorkInternational.leaveStartDate) ? date2Thai(formDataWorkInternational.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataWorkInternational.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataWorkInternational.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</div> </template>
</q-select>
</div> -->
<!-- </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm"> -->
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate" v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataWorkInternational.leaveStartDate" :min-date="formDataWorkInternational.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataWorkInternational.leaveEndDate != null formDataWorkInternational.leaveEndDate != null
? date2Thai(formDataWorkInternational.leaveEndDate) ? date2Thai(formDataWorkInternational.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
v-if="!checkDate" <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" outlined
bg-color="white" dense
v-model="formDataWorkInternational.leaveRangeEnd" v-if="!checkDate"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataWorkInternational.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
<q-input </template>
:bottom-slots="!isLeave ? true : false" </q-select>
:color="!isLeave ? 'red' : 'black'" </div> -->
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" <div class="col-12 col-md-3 col-sm-6">
:input-class="!isLeave ? dateEndInputStyle : ''" <q-input
class="col-12 col-md-3 col-sm-6" :bottom-slots="!isLeave ? true : false"
dense :color="!isLeave ? 'red' : 'black'"
outlined :bg-color="!isLeave ? 'red-2' : 'white'"
ref="leaveTotalRef" :border-color="!isLeave ? 'red' : 'gray'"
for="leaveTotalRef" :input-class="!isLeave ? dateEndInputStyle : ''"
v-model="formDataWorkInternational.leaveTotal" dense
label="เป็นเวลา" outlined
readonly ref="leaveTotalRef"
> for="leaveTotalRef"
<template v-slot:hint> v-model="leaveText"
<span style="color: red"> label="มีกำหนด"
{{ !isLeave ? reasonLeave : "" }} readonly
</span> >
</template> <template v-slot:hint>
</q-input> <span style="color: red">
{{ !isLeave ? reasonLeave : "" }}
</span>
</template>
</q-input>
</div>
</div> </div>
</div> </div>
<q-input
hide-bottom-space <div class="col-12 inputgreen">
type="textarea" <q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" hide-bottom-space
dense type="textarea"
bg-color="white" dense
outlined bg-color="white"
ref="leaveDetailRef" outlined
for="leaveDetailRef" ref="leaveDetailRef"
v-model="formDataWorkInternational.leaveDetail" for="leaveDetailRef"
label="สาเหตุการลา" v-model="formDataWorkInternational.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" label="สาเหตุการลา"
/> :readonly="!edit || statusCheck === 'NEW'"
/>
</div>
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-file <q-file

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

@ -26,7 +26,6 @@ const {
} = mixin; } = mixin;
const leaveText = ref<string>(""); const leaveText = ref<string>("");
const leaveHistoryText = ref<string>("");
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
const leaveId = ref<string>(""); const leaveId = ref<string>("");
const checkDate = computed(() => { const checkDate = computed(() => {
@ -364,188 +363,199 @@ onMounted(async () => {
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 col-sm-12 inputgreen">
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef"
for="leaveWroteRef"
dense
hide-bottom-space
bg-color="white"
outlined
v-model="formDataFollowSpouse.leaveWrote"
label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/>
<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
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!edit || statusCheck === 'NEW'"
@update:model-value="
(formDataFollowSpouse.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="
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
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white"
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="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="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 <q-input
:bottom-slots="!isLeave ? true : false" ref="leaveWroteRef"
:color="!isLeave ? 'red' : 'black'" for="leaveWroteRef"
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''"
dense dense
hide-bottom-space
bg-color="white"
outlined outlined
ref="leaveTotalRef" v-model="formDataFollowSpouse.leaveWrote"
for="leaveTotalRef" label="เขียนที่"
v-model="leaveText" :readonly="!edit || statusCheck === 'NEW'"
label="เป็นเวลา" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
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-12">
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker
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), 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="
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>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select
outlined
dense
bg-color="white"
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="mdi-clock-outline"
style="color: var(--q-primary)"
/>
</template>
</q-select>
</div> -->
<!-- </div>
</div>
<div class="col-12">
<div class="row q-col-gutter-sm"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker
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>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select
v-if="!checkDate"
outlined
dense
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 class="col-12 col-md-3 col-sm-6">
<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>
</div>
<div class="col-12 col-md-3 col-sm-12">
<q-input <q-input
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
@ -559,7 +569,7 @@ onMounted(async () => {
readonly readonly
/> />
</div> </div>
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-9 col-sm-12">
<q-input <q-input
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
@ -576,7 +586,7 @@ onMounted(async () => {
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 inputgreen"
hide-bottom-space hide-bottom-space
ref="coupleDayNameRef" ref="coupleDayNameRef"
for="coupleDayNameRef" for="coupleDayNameRef"
@ -591,7 +601,7 @@ onMounted(async () => {
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 inputgreen"
hide-bottom-space hide-bottom-space
ref="coupleDayPositionRef" ref="coupleDayPositionRef"
for="coupleDayPositionRef" for="coupleDayPositionRef"
@ -606,7 +616,7 @@ onMounted(async () => {
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 inputgreen"
ref="coupleDayLevelRef" ref="coupleDayLevelRef"
for="coupleDayLevelRef" for="coupleDayLevelRef"
dense dense
@ -621,7 +631,7 @@ onMounted(async () => {
</div> </div>
<div class="col-md-3 col-sm-12"> <div class="col-md-3 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 inputgreen"
ref="coupleDayLevelCountryRef" ref="coupleDayLevelCountryRef"
for="coupleDayLevelCountryRef" for="coupleDayLevelCountryRef"
hide-bottom-space hide-bottom-space
@ -765,7 +775,7 @@ onMounted(async () => {
<q-input <q-input
hide-bottom-space hide-bottom-space
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-12 col-sm-12 inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined

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

@ -14,7 +14,7 @@ const dataStore = useLeaveStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
dateToISO, calculateDurationYmd,
messageError, messageError,
showLoader, showLoader,
hideLoader, hideLoader,
@ -27,6 +27,7 @@ const leaveId = ref<any>("");
const leaveStartDateRef = ref<object | null>(null); const leaveStartDateRef = ref<object | null>(null);
const leaveEndDateRef = ref<object | null>(null); const leaveEndDateRef = ref<object | null>(null);
const leaveWroteRef = ref<object | null>(null); const leaveWroteRef = ref<object | null>(null);
const leaveText = ref<string>("");
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
@ -146,6 +147,10 @@ async function fetchCheck() {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataRehabilitation.leaveTotal = data.totalDate; formDataRehabilitation.leaveTotal = data.totalDate;
leaveText.value = calculateDurationYmd(
formDataRehabilitation.leaveStartDate,
formDataRehabilitation.leaveEndDate
);
reasonLeave.value = data.message reasonLeave.value = data.message
? data.message ? data.message
@ -185,7 +190,7 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>(); const leaveDocumentList = ref<any>();
const leaveDraftDocument = ref<string>(); const leaveDraftDocument = ref<string>();
const statusCheck = ref<string>(""); const statusCheck = ref<string>("");
watch(props.data, () => { watch(props.data, async () => {
if (props.data) { if (props.data) {
formDataRehabilitation.leaveWrote = props.data.leaveWrote; formDataRehabilitation.leaveWrote = props.data.leaveWrote;
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate); formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@ -198,11 +203,16 @@ watch(props.data, () => {
formDataRehabilitation.leaveDraftDocument = null; formDataRehabilitation.leaveDraftDocument = null;
formDataRehabilitation.leaveDocument = []; formDataRehabilitation.leaveDocument = [];
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
} }
}); });
/**Hook */ /**Hook */
onMounted(() => { onMounted(async () => {
if (props.data) { if (props.data) {
formDataRehabilitation.leaveWrote = props.data.leaveWrote; formDataRehabilitation.leaveWrote = props.data.leaveWrote;
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate); formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
@ -216,6 +226,12 @@ onMounted(() => {
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
leaveId.value = props.data.id; leaveId.value = props.data.id;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
leaveText.value = leaveTotal;
fetchCheck(); fetchCheck();
} }
}); });
@ -230,197 +246,207 @@ onMounted(() => {
<q-form greedy @submit.prevent @validation-success="onValidate"> <q-form greedy @submit.prevent @validation-success="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <div class="col-12 col-sm-12 inputgreen">
v-model="formDataRehabilitation.leaveWrote" <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" v-model="formDataRehabilitation.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
dense dense
outlined outlined
bg-color="white" bg-color="white"
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'เขียนที่'}`]" :rules="[(val:string) => !!val || `${'เขียนที่'}`]"
/> />
</div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataRehabilitation.leaveStartDate" v-model="formDataRehabilitation.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value=" @update:model-value="
(formDataRehabilitation.leaveEndDate = null), fetchCheck() (formDataRehabilitation.leaveEndDate = null), fetchCheck()
" "
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataRehabilitation.leaveStartDate != null formDataRehabilitation.leaveStartDate != null
? date2Thai(formDataRehabilitation.leaveStartDate) ? date2Thai(formDataRehabilitation.leaveStartDate)
: null : null
" "
:label="`${'วันที่เริ่มต้น'}`" :label="`${'วันที่เริ่มต้น'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่เริ่มต้น'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
outlined
dense <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <q-select
bg-color="white" outlined
v-model="formDataRehabilitation.leaveRange" dense
:options="dataStore.rangeOptions" bg-color="white"
emit-value v-model="formDataRehabilitation.leaveRange"
map-options :options="dataStore.rangeOptions"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
</div> </template>
</q-select>
</div> -->
<!-- </div>
</div> </div>
<div class="col-12"> <div class="col-12">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm"> -->
<datepicker <div class="col-12 col-md-3 col-sm-6 inputgreen">
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" <datepicker
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataRehabilitation.leaveEndDate" v-model="formDataRehabilitation.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:min-date="formDataRehabilitation.leaveStartDate" :min-date="formDataRehabilitation.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataRehabilitation.leaveEndDate != null formDataRehabilitation.leaveEndDate != null
? date2Thai(formDataRehabilitation.leaveEndDate) ? date2Thai(formDataRehabilitation.leaveEndDate)
: null : null
" "
:label="`${'วันที่สิ้นสุด'}`" :label="`${'วันที่สิ้นสุด'}`"
:rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]" :rules="[(val:string) => !!val || `${'กรุณาเลือกวันที่สิ้นสุด'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-select </div>
v-if="!checkDate"
outlined <!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
dense <q-select
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen" v-if="!checkDate"
bg-color="white" outlined
v-model="formDataRehabilitation.leaveRangeEnd" dense
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" bg-color="white"
emit-value v-model="formDataRehabilitation.leaveRangeEnd"
map-options :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
option-value="id" emit-value
option-label="name" map-options
@update:model-value="fetchCheck()" option-value="id"
> option-label="name"
<template v-slot:prepend> @update:model-value="fetchCheck()"
<q-icon >
name="mdi-clock-outline" <template v-slot:prepend>
style="color: var(--q-primary)" <q-icon
/> name="mdi-clock-outline"
</template> style="color: var(--q-primary)"
</q-select> />
<q-input </template>
:bottom-slots="!isLeave ? true : false" </q-select>
:color="!isLeave ? 'red' : 'black'" </div> -->
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" <div class="col-12 col-md-3 col-sm-6">
:input-class="!isLeave ? dateEndInputStyle : ''" <q-input
class="col-12 col-md-2 col-sm-6" :bottom-slots="!isLeave ? true : false"
dense :color="!isLeave ? 'red' : 'black'"
outlined :bg-color="!isLeave ? 'red-2' : 'white'"
ref="leaveTotalRef" :border-color="!isLeave ? 'red' : 'gray'"
for="leaveTotalRef" :input-class="!isLeave ? dateEndInputStyle : ''"
v-model="formDataRehabilitation.leaveTotal" dense
label="เป็นเวลา" outlined
readonly ref="leaveTotalRef"
> for="leaveTotalRef"
<template v-slot:hint> v-model="leaveText"
<span style="color: red"> label="เป็นเวลา"
{{ !isLeave ? reasonLeave : "" }} readonly
</span> >
</template> <template v-slot:hint>
</q-input> <span style="color: red">
{{ !isLeave ? reasonLeave : "" }}
</span>
</template>
</q-input>
</div>
</div> </div>
</div> </div>
<q-input <div class="col-12 col-md-12 col-sm-12 inputgreen">
v-model="formDataRehabilitation.leaveDetail" <q-input
:readonly="!edit || statusCheck === 'NEW'" v-model="formDataRehabilitation.leaveDetail"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" bg-color="white"
dense dense
outlined outlined
type="textarea" type="textarea"
label="สาเหตุการลา" label="สาเหตุการลา"
/> />
</div>
<div class="col-12" v-if="statusCheck != 'NEW'"> <div class="col-12" v-if="statusCheck != 'NEW'">
<q-file <q-file

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

@ -84,9 +84,10 @@ onMounted(() => {
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.dear" v-model="dataStore.commanderPosition"
label="เรียน" label="เรียน"
/> />
<q-input <q-input
class="col-12 col-sm-4" class="col-12 col-sm-4"
dense dense

2
src/modules/05_leave/interface/request/AddAbsence.ts
View file

@ -16,7 +16,7 @@ interface OrdinationForm {
leavebirthDate: object | null; leavebirthDate: object | null;
leaveStartDate: object | null; leaveStartDate: object | null;
leaveEndDate: object | null; leaveEndDate: object | null;
totalLeave: object | null; leaveTotal: object | null;
ordainDayOrdination: object | null; ordainDayOrdination: object | null;
ordainDayLocationName: object | null; ordainDayLocationName: object | null;
ordainDayLocationNumber: object | null; ordainDayLocationNumber: object | null;

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

@ -284,6 +284,7 @@ export const useLeaveStore = defineStore("Leave", () => {
const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา const dateSendLeave = ref<Date>(); //วันที่ยื่นใบลา
const leaveTypeName = ref<string>(""); //Name ประเภทการลา const leaveTypeName = ref<string>(""); //Name ประเภทการลา
const dear = ref<string>(""); //เรียน const dear = ref<string>(""); //เรียน
const commanderPosition = ref<string>(""); //ตำแหน่งผู้บังคับบัญชา
const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ const fullName = ref<string>(""); //คำนำหน้า ชื่อ นามสกุล ผู้ยื่นขอ
const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ const positionName = ref<string>(""); //ตำแหน่งผู้ยื่นขอ
const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ const positionLevelName = ref<string>(""); //ระดับผู้ยื่นขอ
@ -312,6 +313,7 @@ export const useLeaveStore = defineStore("Leave", () => {
dateSendLeave.value = data.dateSendLeave; dateSendLeave.value = data.dateSendLeave;
leaveTypeName.value = data.leaveTypeName; leaveTypeName.value = data.leaveTypeName;
dear.value = data.dear; dear.value = data.dear;
commanderPosition.value = data.commanderPosition;
fullName.value = data.fullName; fullName.value = data.fullName;
positionName.value = data.positionName; positionName.value = data.positionName;
positionLevelName.value = data.positionLevelName; positionLevelName.value = data.positionLevelName;
@ -370,6 +372,7 @@ export const useLeaveStore = defineStore("Leave", () => {
dateSendLeave.value = data.dateSendLeave; dateSendLeave.value = data.dateSendLeave;
typeLeave.value = data.leaveTypeName; typeLeave.value = data.leaveTypeName;
dear.value = data.dear; dear.value = data.dear;
commanderPosition.value = data.commanderPosition;
fullName.value = data.fullName; fullName.value = data.fullName;
positionName.value = data.positionName; positionName.value = data.positionName;
positionLevelName.value = data.positionLevelName; positionLevelName.value = data.positionLevelName;
@ -383,6 +386,7 @@ export const useLeaveStore = defineStore("Leave", () => {
dateSendLeave.value = undefined; dateSendLeave.value = undefined;
leaveTypeName.value = ""; leaveTypeName.value = "";
dear.value = ""; dear.value = "";
commanderPosition.value = "";
fullName.value = ""; fullName.value = "";
positionName.value = ""; positionName.value = "";
positionLevelName.value = ""; positionLevelName.value = "";
@ -427,6 +431,7 @@ export const useLeaveStore = defineStore("Leave", () => {
dateSendLeave, dateSendLeave,
leaveTypeName, leaveTypeName,
dear, dear,
commanderPosition,
fullName, fullName,
positionName, positionName,
positionLevelName, positionLevelName,

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

@ -141,7 +141,7 @@ onMounted(async () => {
<div class="row"> <div class="row">
<q-select <q-select
dense dense
class="col-12 col-sm-6 col-md-4 inputgreen" class="col-12 col-sm-9 col-md-6 inputgreen"
outlined outlined
v-model="model" v-model="model"
:options="option" :options="option"
@ -170,7 +170,7 @@ onMounted(async () => {
<div class="row q-mt-sm"> <div class="row q-mt-sm">
<div <div
class="col-12 col-sm-6 col-md-3" class="col-12 col-sm-6 col-md-4"
v-if="model === 'LV-006' || model === 'LV-008'" v-if="model === 'LV-006' || model === 'LV-008'"
> >
<q-select <q-select

4
src/modules/05_leave/views/EditPage.vue
View file

@ -358,7 +358,7 @@ onMounted(async () => {
<q-select <q-select
readonly readonly
dense dense
class="col-12 col-sm-6 col-md-4" class="col-12 col-sm-9 col-md-6"
outlined outlined
v-model="formData.leaveTypeName" v-model="formData.leaveTypeName"
option-value="code" option-value="code"
@ -370,7 +370,7 @@ onMounted(async () => {
</div> </div>
<div class="row q-mt-sm"> <div class="row q-mt-sm">
<div <div
class="col-12 col-sm-6 col-md-3" class="col-12 col-sm-6 col-md-4"
v-if="model === 'LV-006' || model === 'LV-008'" v-if="model === 'LV-006' || model === 'LV-008'"
> >
<q-select <q-select