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

76
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,9 +246,9 @@ 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">
<div class="col-12 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -287,10 +260,12 @@ onMounted(() => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataSick.leaveStartDate" v-model="formDataSick.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -339,10 +314,12 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataSick.leaveRange" v-model="formDataSick.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -361,10 +338,12 @@ onMounted(() => {
</q-select> </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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataSick.leaveEndDate" v-model="formDataSick.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -410,11 +389,13 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataSick.leaveRangeEnd" v-model="formDataSick.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -431,19 +412,25 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </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">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="formDataSick.leaveTotal" v-model="formDataSick.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา (วัน)"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
@ -452,8 +439,10 @@ onMounted(() => {
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveLastRef" ref="leaveLastRef"
@ -466,11 +455,12 @@ onMounted(() => {
/> />
</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">
<div class="col-12 col-md-3 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveNumberRef" ref="leaveNumberRef"
@ -487,9 +477,10 @@ onMounted(() => {
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<div class="col-12 col-md-9 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveAddressRef" ref="leaveAddressRef"
@ -505,9 +496,11 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
</div>
<div class="col-12 inputgreen">
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"
@ -517,9 +510,12 @@ onMounted(() => {
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" 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 -->
<div class="col-12 q-pl-sm col-12">
<q-file <q-file
ref="leaveDocumentRef" ref="leaveDocumentRef"
for="leaveDocumentRef" for="leaveDocumentRef"
@ -532,7 +528,6 @@ onMounted(() => {
multiple multiple
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="col-12 q-pl-sm col-12"
: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 วันขึ้นไป'}`,
]:[]" ]:[]"
@ -543,6 +538,7 @@ onMounted(() => {
</q-file> </q-file>
</div> </div>
</div> </div>
</div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>

67
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,9 +223,9 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -228,11 +237,12 @@ onMounted(() => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveStartDate" v-model="formDataBirth.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -281,10 +291,12 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataBirth.leaveRange" v-model="formDataBirth.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -303,10 +315,12 @@ onMounted(() => {
</q-select> </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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveEndDate" v-model="formDataBirth.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -352,11 +366,13 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataBirth.leaveRangeEnd" v-model="formDataBirth.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -373,19 +389,25 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </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">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="formDataBirth.leaveTotal" v-model="formDataBirth.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา (วัน)"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
@ -394,8 +416,10 @@ onMounted(() => {
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveLastRef" ref="leaveLastRef"
@ -408,11 +432,12 @@ onMounted(() => {
/> />
</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">
<div class="col-12 col-md-3 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -429,9 +454,10 @@ onMounted(() => {
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<div class="col-12 col-md-9 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -447,9 +473,11 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
</div>
<div class="col-12 inputgreen">
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"
@ -459,9 +487,12 @@ onMounted(() => {
label="สาเหตุการลา" label="สาเหตุการลา"
:readonly="!edit || statusCheck === 'NEW'" :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 -->
<div class="q-pl-sm col-12">
<q-file <q-file
for="leaveDocumentRef" for="leaveDocumentRef"
hide-bottom-space hide-bottom-space
@ -473,7 +504,6 @@ onMounted(() => {
outlined outlined
multiple multiple
use-chips use-chips
class="q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
@ -481,6 +511,7 @@ onMounted(() => {
</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">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>

67
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,8 +239,8 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -267,10 +252,12 @@ onMounted(async () => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.leaveStartDate" v-model="formDataHelpWife.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -319,10 +306,12 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataHelpWife.leaveRange" v-model="formDataHelpWife.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -341,10 +330,12 @@ onMounted(async () => {
</q-select> </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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.leaveEndDate" v-model="formDataHelpWife.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -390,11 +381,13 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataHelpWife.leaveRangeEnd" v-model="formDataHelpWife.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -413,19 +406,24 @@ onMounted(async () => {
</q-select> </q-select>
</div> </div>
</div> </div>
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"> </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 <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="leaveText" v-model="formDataHelpWife.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา (วัน)"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
@ -435,7 +433,10 @@ onMounted(async () => {
</template> </template>
</q-input> </q-input>
</div> </div>
<div class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"> </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,8 +452,8 @@ onMounted(async () => {
/> />
</div> </div>
<div class="col-12 col-md-4 col-sm-12 inputgreen">
<datepicker <datepicker
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataHelpWife.wifeDayDateBorn" v-model="formDataHelpWife.wifeDayDateBorn"
:locale="'th'" :locale="'th'"
@ -498,10 +499,12 @@ onMounted(async () => {
</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">
<div class="col-12 col-md-3 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveNumberRef" ref="leaveNumberRef"
@ -518,9 +521,10 @@ onMounted(async () => {
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<div class="col-12 col-md-9 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -536,11 +540,13 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
</div>
<div class="col-12 inputgreen">
<q-input <q-input
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"
@ -549,8 +555,11 @@ onMounted(async () => {
label="สาเหตุการลา" label="สาเหตุการลา"
:readonly="!edit || statusCheck === 'NEW'" :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">
<div class="q-pl-sm col-12">
<q-file <q-file
bg-color="white" bg-color="white"
ref="leaveDocumentRef" ref="leaveDocumentRef"
@ -560,7 +569,6 @@ onMounted(async () => {
label="เอกสารประกอบ" label="เอกสารประกอบ"
outlined outlined
use-chips use-chips
class="q-pl-sm col-12"
multiple multiple
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -569,6 +577,7 @@ onMounted(async () => {
</q-file> </q-file>
</div> </div>
</div> </div>
</div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>

97
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,8 +252,8 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -280,10 +265,12 @@ onMounted(() => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataVacation.leaveStartDate" v-model="formDataVacation.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -332,10 +319,12 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataVacation.leaveRange" v-model="formDataVacation.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -354,10 +343,11 @@ onMounted(() => {
</q-select> </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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataVacation.leaveEndDate" v-model="formDataVacation.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -403,11 +393,13 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataVacation.leaveRangeEnd" v-model="formDataVacation.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:DataOption)=> items.id !== 'AFTERNOON')"
@ -424,27 +416,7 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </q-select>
<q-input </div>
:bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-2 col-sm-6"
dense
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา"
readonly
>
<template v-slot:hint>
<span style="color: red">
{{ !isLeave ? reasonLeave : "" }}
</span>
</template>
</q-input>
</div> </div>
</div> </div>
@ -470,8 +442,31 @@ onMounted(() => {
@update:model-value="resetDate" @update:model-value="resetDate"
/> />
</div> --> </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="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา (วัน)"
readonly
>
<template v-slot:hint>
<span style="color: red">
{{ !isLeave ? reasonLeave : "" }}
</span>
</template>
</q-input>
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
class="col-12 col-md-4 col-sm-6"
ref="restDayOldTotalRef" ref="restDayOldTotalRef"
for="restDayOldTotalRef" for="restDayOldTotalRef"
dense dense
@ -482,9 +477,10 @@ onMounted(() => {
v-model="dataStore.restDayTotalOld" v-model="dataStore.restDayTotalOld"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา" label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/> />
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
class="col-12 col-md-4 col-sm-6"
ref="restDayCurrentTotalRef" ref="restDayCurrentTotalRef"
for="restDayCurrentTotalRef" for="restDayCurrentTotalRef"
dense dense
@ -495,11 +491,12 @@ onMounted(() => {
v-model="dataStore.restDayCurrentTotal" v-model="dataStore.restDayCurrentTotal"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน" label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/> />
</div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<div class="col-12 col-md-3 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -516,9 +513,10 @@ onMounted(() => {
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<div class="col-12 col-md-9 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
@ -534,11 +532,13 @@ onMounted(() => {
/> />
</div> </div>
</div> </div>
</div>
<div class="col-12 inputgreen">
<q-input <q-input
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"
@ -547,9 +547,12 @@ onMounted(() => {
label="สาเหตุการลา" label="สาเหตุการลา"
:readonly="!edit || statusCheck === 'NEW'" :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 -->
<div class="q-pl-sm col-12">
<q-file <q-file
ref="leaveDocumentRef" ref="leaveDocumentRef"
bg-color="white" bg-color="white"
@ -560,7 +563,6 @@ onMounted(() => {
multiple multiple
outlined outlined
use-chips use-chips
class="q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
@ -568,6 +570,7 @@ onMounted(() => {
</q-file> </q-file>
</div> </div>
</div> </div>
</div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>

104
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,9 +290,9 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"
@ -335,10 +302,12 @@ onMounted(async () => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leaveStartDate" v-model="formDataOrdination.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -387,10 +356,12 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataOrdination.leaveRange" v-model="formDataOrdination.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -409,10 +380,12 @@ onMounted(async () => {
</q-select> </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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leaveEndDate" v-model="formDataOrdination.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -458,11 +431,13 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataOrdination.leaveRangeEnd" v-model="formDataOrdination.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -481,22 +456,23 @@ onMounted(async () => {
</q-select> </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">
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-4 col-sm-6"
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>
@ -505,8 +481,10 @@ onMounted(async () => {
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
<div class="col-12 col-md-3 col-sm-6">
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leavegovernmentDate" v-model="formDataOrdination.leavegovernmentDate"
:locale="'th'" :locale="'th'"
@ -549,9 +527,10 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6">
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.leavebirthDate" v-model="formDataOrdination.leavebirthDate"
:locale="'th'" :locale="'th'"
@ -596,6 +575,7 @@ onMounted(async () => {
</datepicker> </datepicker>
</div> </div>
</div> </div>
</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">
เคยบวชหรือไม่ เคยบวชหรือไม่
@ -620,8 +600,8 @@ onMounted(async () => {
</div> </div>
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div> <div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataOrdination.ordainDayOrdination" v-model="formDataOrdination.ordainDayOrdination"
:locale="'th'" :locale="'th'"
@ -667,9 +647,10 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input <q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
hide-bottom-space hide-bottom-space
ref="ordainDayLocationNameRef" ref="ordainDayLocationNameRef"
@ -681,9 +662,10 @@ onMounted(async () => {
label="ชื่อวัด" label="ชื่อวัด"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/> />
</div>
<div class="col-12 col-md-4 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="ordainDayLocationNumberRef" ref="ordainDayLocationNumberRef"
dense dense
full-width full-width
@ -698,8 +680,10 @@ onMounted(async () => {
label="หมายเลขโทรศัพท์" label="หมายเลขโทรศัพท์"
:rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
/> />
</div>
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
ref="ordainDayLocationAddressRef" ref="ordainDayLocationAddressRef"
bg-color="white" bg-color="white"
@ -711,12 +695,14 @@ onMounted(async () => {
:rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea" 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>
<div class="col-12 col-md-6 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
ref="ordainDayBuddhistLentNameRef" ref="ordainDayBuddhistLentNameRef"
bg-color="white" bg-color="white"
@ -727,9 +713,10 @@ onMounted(async () => {
label="ชื่อวัด" label="ชื่อวัด"
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/> />
</div>
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 cursor-pointer inputgreen"
dense dense
ref="ordainDayBuddhistLentAddressRef" ref="ordainDayBuddhistLentAddressRef"
bg-color="white" bg-color="white"
@ -741,9 +728,11 @@ onMounted(async () => {
type="textarea" type="textarea"
hide-bottom-space hide-bottom-space
/> />
</div>
<div class="col-12 inputgreen">
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -753,9 +742,12 @@ onMounted(async () => {
label="สาเหตุการลา" label="สาเหตุการลา"
:readonly="!edit || statusCheck === 'NEW'" :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 -->
<div class="col-12 q-pl-sm col-12">
<q-file <q-file
ref="leaveDocumentRef" ref="leaveDocumentRef"
v-model="formDataOrdination.leaveDocument" v-model="formDataOrdination.leaveDocument"
@ -766,7 +758,6 @@ onMounted(async () => {
outlined outlined
bg-color="white" bg-color="white"
use-chips use-chips
class="col-12 q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
@ -774,6 +765,7 @@ onMounted(async () => {
</q-file> </q-file>
</div> </div>
</div> </div>
</div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>

50
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,19 +388,19 @@ onMounted(async () => {
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
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>
@ -433,6 +409,8 @@ onMounted(async () => {
</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>
<div class="col-12 inputgreen">
<q-input <q-input
v-model="formDataHaji.leaveDetail" v-model="formDataHaji.leaveDetail"
class="col-12 q-mt-sm cursor-pointer inputgreen" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" bg-color="white"
dense dense
outlined outlined
type="textarea" type="textarea"
label="สาเหตุการลา" 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 -->

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

@ -270,9 +270,9 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"
@ -282,11 +282,12 @@ onMounted(async () => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.leaveStartDate" v-model="formDataMilitary.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -335,10 +336,12 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-sm-3 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataMilitary.leaveRange" v-model="formDataMilitary.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -355,12 +358,14 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataMilitary.leaveEndDate" v-model="formDataMilitary.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -406,11 +411,13 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-sm-3 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataMilitary.leaveRangeEnd" v-model="formDataMilitary.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -427,18 +434,19 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-4 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
@ -453,9 +461,15 @@ onMounted(async () => {
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
</div>
</div>
<div class="col-12">
<div class="row q-col-gutter-sm">
<div class="col-12 col-md-8 col-sm-6 inputgreen">
<q-input <q-input
ref="absentDaySummonRef" ref="absentDaySummonRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -465,10 +479,11 @@ onMounted(async () => {
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
/> />
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input <q-input
ref="atRef" ref="atRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -480,11 +495,12 @@ onMounted(async () => {
/> />
</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>
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" v-model="formDataMilitary.leaveDetail"
dense
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" bg-color="white"
dense
outlined outlined
v-model="formDataMilitary.leaveDetail"
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 -->

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

@ -298,10 +298,10 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
v-model="formDataStudy.leaveWrote" v-model="formDataStudy.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -310,11 +310,12 @@ onMounted(async () => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataStudy.leaveStartDate" v-model="formDataStudy.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -363,10 +364,12 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-sm-3 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataStudy.leaveRange" v-model="formDataStudy.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -383,12 +386,14 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataStudy.leaveEndDate" v-model="formDataStudy.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -434,11 +439,13 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-sm-3 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataStudy.leaveRangeEnd" v-model="formDataStudy.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -455,18 +462,19 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
@ -481,8 +489,14 @@ onMounted(async () => {
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<div class="col-12 col-md-3 col-sm-6">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -527,9 +541,10 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -571,22 +586,24 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:model-value="dataStore.salary" :model-value="dataStore.salary"
ref="leaveSalaryRef" ref="leaveSalaryRef"
class="col-12 col-sm-6 col-md-3"
bg-color="white" bg-color="white"
dense dense
outlined outlined
readonly readonly
label="เงินเดือนปัจจุบัน" label="เงินเดือนปัจจุบัน"
/> />
</div>
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:model-value="dataStore.salaryText" :model-value="dataStore.salaryText"
ref="leaveSalaryRef" ref="leaveSalaryRef"
class="col-12 col-sm-6 col-md-3"
bg-color="white" bg-color="white"
dense dense
readonly readonly
@ -597,13 +614,14 @@ onMounted(async () => {
/> />
</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">
<div class="col-12 col-md-4 col-sm-12 inputgreen">
<q-input <q-input
v-model="formDataStudy.studyDayUniversityName" v-model="formDataStudy.studyDayUniversityName"
ref="studyDayUniversityNameRef" ref="studyDayUniversityNameRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -612,11 +630,12 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
/> />
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input <q-input
v-model="formDataStudy.studyDayDegreeLevel" v-model="formDataStudy.studyDayDegreeLevel"
ref="studyDayDegreeLevelRef" ref="studyDayDegreeLevelRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -625,11 +644,12 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
/> />
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input <q-input
v-model="formDataStudy.studyDaySubject" v-model="formDataStudy.studyDaySubject"
ref="studyDaySubjectRef" ref="studyDaySubjectRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -638,11 +658,12 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
/> />
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input <q-input
v-model="formDataStudy.studyDayCountry" v-model="formDataStudy.studyDayCountry"
ref="studyDayCountryRef" ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -651,11 +672,12 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
/> />
</div>
<div class="col-12 col-md-4 col-sm-6 inputgreen">
<q-input <q-input
v-model="formDataStudy.studyDayScholarship" v-model="formDataStudy.studyDayScholarship"
ref="studyDayScholarshipRef" ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -664,11 +686,16 @@ onMounted(async () => {
hide-bottom-space hide-bottom-space
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/> />
</div>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<div class="col-12 col-md-4 col-sm-12 inputgreen">
<q-input <q-input
v-model="dataStore.telephoneNumber" v-model="dataStore.telephoneNumber"
ref="leaveNumberRef" ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -681,11 +708,12 @@ onMounted(async () => {
(val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val:string) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
</div>
<div class="col-12 col-md-8 col-sm-12 inputgreen">
<q-input <q-input
v-model="dataStore.currentAddress" v-model="dataStore.currentAddress"
ref="leaveAddressRef" ref="leaveAddressRef"
class="col-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -698,17 +726,19 @@ onMounted(async () => {
/> />
</div> </div>
</div> </div>
</div>
<div class="col-12 inputgreen">
<q-input <q-input
v-model="formDataStudy.leaveDetail" v-model="formDataStudy.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
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

69
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,10 +278,10 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
v-model="formDataTrain.leaveWrote" v-model="formDataTrain.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -291,11 +290,12 @@ onMounted(async () => {
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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataTrain.leaveStartDate" v-model="formDataTrain.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -344,10 +344,12 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-sm-3 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataTrain.leaveRange" v-model="formDataTrain.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -364,12 +366,13 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataTrain.leaveEndDate" v-model="formDataTrain.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -415,11 +418,13 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-sm-3 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataTrain.leaveRangeEnd" v-model="formDataTrain.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -436,18 +441,19 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
@ -462,9 +468,15 @@ onMounted(async () => {
</span> </span>
</template> </template>
</q-input> </q-input>
</div>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<div class="col-12 col-sm-3">
<datepicker <datepicker
v-model="formDataTrain.leavegovernmentDate" v-model="formDataTrain.leavegovernmentDate"
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -509,10 +521,11 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-sm-3">
<datepicker <datepicker
v-model="formDataTrain.leavebirthDate" v-model="formDataTrain.leavebirthDate"
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@ -554,20 +567,22 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<div class="col-12 col-sm-3">
<q-input <q-input
v-model="dataStore.salary" v-model="dataStore.salary"
class="col-12 col-sm-6 col-md-3"
bg-color="white" bg-color="white"
dense dense
outlined outlined
readonly readonly
label="เงินเดือนปัจจุบัน" label="เงินเดือนปัจจุบัน"
/> />
</div>
<div class="col-12 col-sm-3">
<q-input <q-input
v-model="dataStore.salaryText" v-model="dataStore.salaryText"
class="col-12 col-sm-6 col-md-3"
dense dense
readonly readonly
outlined outlined
@ -576,12 +591,13 @@ onMounted(async () => {
/> />
</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">
<div class="col-12 col-sm-8 inputgreen">
<q-input <q-input
v-model="formDataTrain.studyDayTrainingSubject" v-model="formDataTrain.studyDayTrainingSubject"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
ref="studyDayTrainingSubjectRef" ref="studyDayTrainingSubjectRef"
bg-color="white" bg-color="white"
dense dense
@ -591,11 +607,12 @@ onMounted(async () => {
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
/> />
</div>
<div class="col-12 col-sm-4 inputgreen">
<q-input <q-input
v-model="formDataTrain.studyDayTrainingName" v-model="formDataTrain.studyDayTrainingName"
ref="studyDayTrainingNameRef" ref="studyDayTrainingNameRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -604,11 +621,12 @@ onMounted(async () => {
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
/> />
</div>
<div class="col-12 col-sm-4 inputgreen">
<q-input <q-input
v-model="formDataTrain.studyDayCountry" v-model="formDataTrain.studyDayCountry"
ref="studyDayCountryRef" ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -617,11 +635,12 @@ onMounted(async () => {
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกประเทศ'}`]"
/> />
</div>
<div class="col-12 col-sm-8 inputgreen">
<q-input <q-input
v-model="formDataTrain.studyDayScholarship" v-model="formDataTrain.studyDayScholarship"
ref="studyDayScholarshipRef" ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
@ -630,10 +649,15 @@ onMounted(async () => {
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]" :rules="[(val:string) => !!val || `${'กรุณากรอกด้วยทุน'}`]"
/> />
</div>
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<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,9 +689,9 @@ onMounted(async () => {
</div> </div>
</div> </div>
<div class="col-12 inputgreen">
<q-input <q-input
v-model="formDataTrain.leaveDetail" v-model="formDataTrain.leaveDetail"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
bg-color="white" bg-color="white"
dense dense
@ -675,6 +699,7 @@ onMounted(async () => {
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

56
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,8 +283,8 @@ 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">
<div class="col-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
@ -280,11 +296,12 @@ onMounted(() => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveStartDate" v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -333,10 +350,12 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataWorkInternational.leaveRange" v-model="formDataWorkInternational.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -353,12 +372,13 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate" v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -404,11 +424,13 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
v-if="!checkDate" v-if="!checkDate"
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataWorkInternational.leaveRangeEnd" v-model="formDataWorkInternational.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -425,19 +447,21 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </q-select>
</div> -->
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="formDataWorkInternational.leaveTotal" v-model="leaveText"
label="เป็นเวลา" label="มีกำหนด"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
@ -448,10 +472,12 @@ onMounted(() => {
</q-input> </q-input>
</div> </div>
</div> </div>
</div>
<div class="col-12 inputgreen">
<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"
dense dense
bg-color="white" bg-color="white"
outlined outlined
@ -461,6 +487,8 @@ onMounted(() => {
label="สาเหตุการลา" label="สาเหตุการลา"
:readonly="!edit || statusCheck === 'NEW'" :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

46
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,8 +363,8 @@ 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">
<div class="col-12 col-sm-12 inputgreen">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
@ -377,10 +376,12 @@ onMounted(async () => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataFollowSpouse.leaveStartDate" v-model="formDataFollowSpouse.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -429,10 +430,12 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataFollowSpouse.leaveRange" v-model="formDataFollowSpouse.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -449,12 +452,14 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataFollowSpouse.leaveEndDate" v-model="formDataFollowSpouse.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -500,11 +505,13 @@ onMounted(async () => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataFollowSpouse.leaveRangeEnd" v-model="formDataFollowSpouse.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -521,9 +528,9 @@ onMounted(async () => {
/> />
</template> </template>
</q-select> </q-select>
</div> </div> -->
</div>
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
@ -545,7 +552,10 @@ onMounted(async () => {
</template> </template>
</q-input> </q-input>
</div> </div>
<div class="col-12 col-md-4 col-sm-12"> </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

52
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,9 +246,9 @@ 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">
<div class="col-12 col-sm-12 inputgreen">
<q-input <q-input
v-model="formDataRehabilitation.leaveWrote" v-model="formDataRehabilitation.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
dense dense
outlined outlined
@ -242,11 +258,12 @@ onMounted(() => {
: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">
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataRehabilitation.leaveStartDate" v-model="formDataRehabilitation.leaveStartDate"
:locale="'th'" :locale="'th'"
@ -295,10 +312,12 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataRehabilitation.leaveRange" v-model="formDataRehabilitation.leaveRange"
:options="dataStore.rangeOptions" :options="dataStore.rangeOptions"
@ -315,12 +334,13 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </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"> -->
<div class="col-12 col-md-3 col-sm-6 inputgreen">
<datepicker <datepicker
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataRehabilitation.leaveEndDate" v-model="formDataRehabilitation.leaveEndDate"
:locale="'th'" :locale="'th'"
@ -366,11 +386,13 @@ onMounted(() => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div>
<!-- <div class="col-12 col-md-3 col-sm-6 inputgreen">
<q-select <q-select
v-if="!checkDate" v-if="!checkDate"
outlined outlined
dense dense
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
v-model="formDataRehabilitation.leaveRangeEnd" v-model="formDataRehabilitation.leaveRangeEnd"
:options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')" :options="dataStore.rangeOptions.filter((items:any)=> items.id !== 'AFTERNOON')"
@ -387,18 +409,20 @@ onMounted(() => {
/> />
</template> </template>
</q-select> </q-select>
</div> -->
<div class="col-12 col-md-3 col-sm-6">
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-2 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="formDataRehabilitation.leaveTotal" v-model="leaveText"
label="เป็นเวลา" label="เป็นเวลา"
readonly readonly
> >
@ -410,17 +434,19 @@ onMounted(() => {
</q-input> </q-input>
</div> </div>
</div> </div>
</div>
<div class="col-12 col-md-12 col-sm-12 inputgreen">
<q-input <q-input
v-model="formDataRehabilitation.leaveDetail" v-model="formDataRehabilitation.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
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