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

แก้ไข ui ฟอร์มการลา

Browse source 
-จัดโค้ด
-เพิ่ม function
This commit is contained in:
AnandaTon 2023-11-22 15:45:52 +07:00
parent 1ea53b0fe5
commit f30a552b69
11 changed files with 496 additions and 409 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/modules/05_leave/componenst/Forms/01_SickForm.vue
View file

@ -29,6 +29,7 @@ const formData = reactive<any>({
halfDay: "day", halfDay: "day",
contractTel: "", contractTel: "",
leaveTotal: "", leaveTotal: "",
leaveLast: "",
leaveContactTel: "", leaveContactTel: "",
leaveContactLocation: "", leaveContactLocation: "",
leaveDetail: "", leaveDetail: "",
@ -42,6 +43,7 @@ const endLeaveDateRef = ref<object | null>(null)
const halfDayRef = ref<object | null>(null) const halfDayRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null) const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null) const leaveTotalRef = ref<object | null>(null)
const leaveLastRef = ref<object | null>(null)
const leaveContactTelRef = ref<object | null>(null) const leaveContactTelRef = ref<object | null>(null)
const leaveContactLocationRef = ref<object | null>(null) const leaveContactLocationRef = ref<object | null>(null)
const leaveDetailRef = ref<object | null>(null) const leaveDetailRef = ref<object | null>(null)
@ -82,6 +84,17 @@ async function fileUploadDoc(files: any) {
}) })
} }
/**
* function รีเซทค่า startLeaveDate เเละ endLeaveDate
*/
function resetDate() {
if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
formData.startLeaveDate = null
formData.endLeaveDate = null
}
console.log("testnull")
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() { function onValidate() {
const hasError = [] const hasError = []
@ -103,6 +116,9 @@ const isReadOnly = computed(() => {
const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon" const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
if (conditionHalfDay) { if (conditionHalfDay) {
formData.endLeaveDate = formData.startLeaveDate // Set formData.endLeaveDate to null formData.endLeaveDate = formData.startLeaveDate // Set formData.endLeaveDate to null
formData.leaveTotal = "0.5 วัน "
} else {
formData.leaveTotal = null
} }
return conditionHalfDay return conditionHalfDay
}) })
@ -133,8 +149,8 @@ console.log(isReadOnly.value)
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12">
<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" /> <q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" /> <q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" /> <q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</div> </div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
@ -212,16 +228,28 @@ console.log(isReadOnly.value)
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> class="col-12 col-md-2 col-sm-6"
เป็นเวลา dense
{{ outlined
formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon" ref="leaveTotalRef"
? "0.5 วัน" for="leaveTotalRef"
: calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) v-model="formData.leaveTotal"
}} label="จำนวนวันที่ลา"
</p> readonly
</div> hide-bottom-space
/>
<q-input
class="col-12 col-md-3 col-sm-6"
dense
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
/>
</div> </div>
</div> </div>
<div class="full-width"> <div class="full-width">

19
src/modules/05_leave/componenst/Forms/03_Birth.vue
View file

@ -26,6 +26,7 @@ const formData = reactive<any>({
endLeaveDate: null, endLeaveDate: null,
contractTel: "", contractTel: "",
leaveTotal: "", leaveTotal: "",
leaveLast: "",
leaveContactTel: "", leaveContactTel: "",
leaveContactLocation: "", leaveContactLocation: "",
leaveDetail: "", leaveDetail: "",
@ -193,12 +194,18 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> <q-input
เป็นเวลา class="col-12 col-md-3 col-sm-6"
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }} dense
</p> outlined
</div> ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
/>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input

7
src/modules/05_leave/componenst/Forms/04_HelpWifeBirthForm.vue
View file

@ -215,12 +215,7 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
เป็นเวลา
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
</p>
</div>
<div class="col-12 col-md-4 col-sm-12"> <div class="col-12 col-md-4 col-sm-12">
<q-input <q-input
class="col-12 col-sm-12" class="col-12 col-sm-12"

39
src/modules/05_leave/componenst/Forms/05_VacationForm.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue" import { ref, reactive, watch, computed } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm" import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
@ -104,6 +104,28 @@ function onValidate() {
props.onSubmit() props.onSubmit()
} }
} }
/**
* function รีเซทค่า startLeaveDate เเละ endLeaveDate
*/
function resetDate() {
if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
formData.startLeaveDate = null
formData.endLeaveDate = null
}
console.log("testnull")
}
const isReadOnly = computed(() => {
const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
if (conditionHalfDay) {
formData.endLeaveDate = formData.startLeaveDate // Set formData.endLeaveDate to null
formData.leaveTotal = "0.5 วัน "
} else {
formData.leaveTotal = null
}
return conditionHalfDay
})
</script> </script>
<template> <template>
@ -128,8 +150,8 @@ function onValidate() {
/> />
<div class="col-12 col-md-4 col-sm-6"> <div class="col-12 col-md-4 col-sm-6">
<q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" /> <q-radio v-model="formData.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" /> <q-radio v-model="formData.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" /> <q-radio v-model="formData.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</div> </div>
<q-input <q-input
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
@ -203,7 +225,7 @@ function onValidate() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!formData.startLeaveDate" :readonly="isReadOnly"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
<template #year="{ year }"> <template #year="{ year }">
@ -220,7 +242,7 @@ function onValidate() {
for="endLeaveDateRef" for="endLeaveDateRef"
hide-bottom-space hide-bottom-space
class="full-width datepicker" class="full-width datepicker"
:readonly="!formData.startLeaveDate" :readonly="isReadOnly"
:model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null" :model-value="formData.endLeaveDate != null ? date2Thai(formData.endLeaveDate) : null"
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]" :rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
@ -231,12 +253,7 @@ function onValidate() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input class="col-12 col-md-2 col-sm-6" dense outlined ref="leaveTotalRef" for="leaveTotalRef" v-model="formData.leaveTotal" label="จำนวนวันที่ลา" readonly hide-bottom-space />
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a">
เป็นเวลา
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }}
</p>
</div>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input

43
src/modules/05_leave/componenst/Forms/06_OrdinationForm.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { reactive, ref } from "vue" import { reactive, ref, watch } from "vue"
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar" import { useQuasar } from "quasar"
import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence" import type { FormRef06 } from "@/modules/05_leave/interface/request/AddAbsence"
@ -71,6 +71,26 @@ const formRef: FormRef06 = {
addressBuddhist: addressBuddhistRef, addressBuddhist: addressBuddhistRef,
} }
// Watch for changes in dateLeaveEnd and update leaveTotal accordingly
watch(formData.dateLeaveEnd, async () => {
if (formData.dateLeaveStart !== undefined && formData.dateLeaveEnd !== undefined) {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
formData.leaveTotal = newLeaveTotal
console.log(newLeaveTotal)
}
// Update the leaveTotal value
console.log("test")
})
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */ /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() { function onValidate() {
const hasError = [] const hasError = []
@ -157,6 +177,7 @@ function onSubmit() {
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
@update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.dateLeaveStart"
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
@ -187,13 +208,18 @@ function onSubmit() {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input
<div class="col-12 col-md-4 col-sm-6"> class="col-12 col-md-2 col-sm-6"
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> dense
เป็นเวลา outlined
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }} bg-color="white"
</p> ref="leaveTotalRef"
</div> for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<datepicker <datepicker
@ -385,6 +411,7 @@ function onSubmit() {
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12" class="col-12 col-md-12 col-sm-12"
dense dense
bg-color="white"
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"
for="leaveDetailRef" for="leaveDetailRef"

31
src/modules/05_leave/componenst/Forms/07_HajjForm.vue
View file

@ -64,6 +64,14 @@ function onValidate() {
onSubmit() onSubmit()
} }
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
function onSubmit() { function onSubmit() {
@ -145,6 +153,7 @@ function onSubmit() {
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
@update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.dateLeaveStart"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
> >
@ -174,12 +183,18 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> class="col-12 col-md-2 col-sm-6"
เป็นเวลา dense
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }} outlined
</p> bg-color="white"
</div> ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<datepicker <datepicker
v-model="formData.government" v-model="formData.government"
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
@ -219,10 +234,10 @@ function onSubmit() {
</div> </div>
</div> </div>
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจย์หรือไม่</div> <div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจย์ฯหรือไม่</div>
<div class="col-12"> <div class="col-12">
<q-radio v-model="formData.monk" val="ever" checked-icon="task_alt" label="เคย" /> <q-radio v-model="formData.monk" val="ever" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formData.monk" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์" /> <q-radio v-model="formData.monk" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
</div> </div>
<q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" /> <q-input v-model="formData.info" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />

28
src/modules/05_leave/componenst/Forms/08_MilitaryForm.vue
View file

@ -77,6 +77,15 @@ function onValidate() {
} }
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
function onSubmit() { function onSubmit() {
dialogConfirm( dialogConfirm(
@ -146,6 +155,7 @@ function onSubmit() {
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
@update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.dateLeaveStart"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
> >
@ -175,12 +185,18 @@ function onSubmit() {
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> class="col-12 col-md-2 col-sm-6"
เป็นเวลา dense
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }} outlined
</p> bg-color="white"
</div> ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input

28
src/modules/05_leave/componenst/Forms/09_StudyForm.vue
View file

@ -92,6 +92,15 @@ function onValidate() {
} }
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
function onSubmit() { function onSubmit() {
dialogConfirm( dialogConfirm(
@ -168,6 +177,7 @@ const formattedSalary = computed(() => {
borderless borderless
week-start="0" week-start="0"
:locale="'th'" :locale="'th'"
@update:model-value="updateLeaveTotal"
:readonly="!formData.dateLeaveStart" :readonly="!formData.dateLeaveStart"
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.dateLeaveStart ? new Date(formData.dateLeaveStart.getTime() + 24 * 60 * 60 * 1000) : null"
@ -199,12 +209,18 @@ const formattedSalary = computed(() => {
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> class="col-12 col-md-2 col-sm-6"
เป็นเวลา dense
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }} outlined
</p> bg-color="white"
</div> ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">

28
src/modules/05_leave/componenst/Forms/10_TrainForm.vue
View file

@ -87,6 +87,15 @@ function onValidate() {
} }
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */ /** ฟังก์ชั่น บันทึก */
function onSubmit() { function onSubmit() {
dialogConfirm( dialogConfirm(
@ -160,6 +169,7 @@ const formattedSalary = computed(() => {
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
@update:model-value="updateLeaveTotal"
week-start="0" week-start="0"
:readonly="!formData.dateLeaveStart" :readonly="!formData.dateLeaveStart"
:locale="'th'" :locale="'th'"
@ -193,12 +203,18 @@ const formattedSalary = computed(() => {
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input
<p v-if="formData.dateLeaveStart && formData.dateLeaveEnd" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> class="col-12 col-md-2 col-sm-6"
ระยะเวลา dense
{{ calculateDurationYmd(formData.dateLeaveStart, formData.dateLeaveEnd) }} outlined
</p> bg-color="white"
</div> ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">

28
src/modules/05_leave/componenst/Forms/12_FollowSpouseForm.vue
View file

@ -119,6 +119,15 @@ function onValidate() {
} }
} }
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate)
formData.leaveTotal = newLeaveTotal
console.log("test")
}
/** /**
* function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly * function check ว่าถ้ามีค่ามาเเล้วจะเป็น readonly
*/ */
@ -230,6 +239,7 @@ watch(formData.followHistoryEnd, newVal => {
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
@update:model-value="updateLeaveTotal"
:readonly="!formData.startLeaveDate" :readonly="!formData.startLeaveDate"
:min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null" :min-date="formData.startLeaveDate ? new Date(formData.startLeaveDate.getTime() + 24 * 60 * 60 * 1000) : null"
> >
@ -258,12 +268,18 @@ watch(formData.followHistoryEnd, newVal => {
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<div class="col-12 col-md-4 col-sm-6"> <q-input
<p v-if="formData.startLeaveDate && formData.endLeaveDate" class="text-weight-bold text-subtitle1 q-mb-none" style="padding-top: 7px; color: #26a69a"> class="col-12 col-md-2 col-sm-6"
มีกำหนด dense
{{ calculateDurationYmd(formData.startLeaveDate, formData.endLeaveDate) }} outlined
</p> bg-color="white"
</div> ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<div class="col-12 col-md-6 col-sm-12"> <div class="col-12 col-md-6 col-sm-12">
<q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly /> <q-input hide-bottom-space class="col-12 col-sm-12" ref="salaryRef" for="salaryRef" dense outlined v-model="formattSalary" label="เงินเดือนปัจจุบัน" readonly />
</div> </div>

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

@ -1,356 +1,290 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia"
import { ref, computed } from "vue"; import { ref, computed } from "vue"
import type { QTableProps } from "quasar"; import type { QTableProps } from "quasar"
import type { import type { FormLeavetMainData, OptionData, formListLeaveData } from "@/modules/05_leave/interface/index/main"
FormLeavetMainData, import { useCounterMixin } from "@/stores/mixin"
OptionData,
formListLeaveData,
} from "@/modules/05_leave/interface/index/main";
import { useCounterMixin } from "@/stores/mixin";
export const useLeaveStore = defineStore("Leave", () => { export const useLeaveStore = defineStore("Leave", () => {
const tabValue = ref<string>("calendar"); const tabValue = ref<string>("calendar")
const typeLeave = ref<string | undefined>(""); const typeLeave = ref<string | undefined>("")
const mixin = useCounterMixin(); const mixin = useCounterMixin()
const { date2Thai } = mixin; const { date2Thai } = mixin
const LeaveType = ref<string | null>("0"); const LeaveType = ref<string | null>("0")
const LeaveStatus = ref<string | null>("0"); const LeaveStatus = ref<string | null>("0")
const fiscalYearyear = ref<string | null>("0"); const fiscalYearyear = ref<string | null>("0")
const rows = ref<formListLeaveData[]>([]); const rows = ref<formListLeaveData[]>([])
const DataMainOrig = ref<formListLeaveData[]>([]); // ข้อมูลหลักดั้งเดิม const DataMainOrig = ref<formListLeaveData[]>([]) // ข้อมูลหลักดั้งเดิม
async function fecthList(data: formListLeaveData[]) { async function fecthList(data: formListLeaveData[]) {
let datalist: formListLeaveData[] = data.map((e: any) => ({ let datalist: formListLeaveData[] = data.map((e: any) => ({
no: e.no, no: e.no,
type: e.type, type: e.type,
status: e.status, status: e.status,
date: e.date, date: e.date,
year: e.year, year: e.year,
})); }))
rows.value = datalist; rows.value = datalist
DataMainOrig.value = datalist; DataMainOrig.value = datalist
} }
const DataMainUpdate = ref<formListLeaveData[]>([]); // ข้อมูลเปลี่ยนแปลง const DataMainUpdate = ref<formListLeaveData[]>([]) // ข้อมูลเปลี่ยนแปลง
const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val); const DataMain = (val: formListLeaveData[]) => (DataMainOrig.value = val)
const DataUpdate = ( const DataUpdate = (filterType: string, filterStatus: string, filterYear: string) => {
filterType: string, DataMainUpdate.value = []
filterStatus: string,
filterYear: string
) => {
DataMainUpdate.value = [];
if (filterType === "" && filterStatus === "" && filterYear === "") { if (filterType === "" && filterStatus === "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value; DataMainUpdate.value = DataMainOrig.value
} else if (filterType !== "" && filterStatus === "" && filterYear === "") { } else if (filterType !== "" && filterStatus === "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value.filter( DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType)
(item: formListLeaveData) => item.type === filterType } else if (filterType !== "" && filterStatus !== "" && filterYear === null) {
); DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus)
} else if ( } else if (filterType !== "" && filterStatus === "" && filterYear !== "") {
filterType !== "" && DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.year === filterYear)
filterStatus !== "" && } else if (filterType === "" && filterStatus !== "" && filterYear === "") {
filterYear === null DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus)
) { } else if (filterType === "" && filterStatus === "" && filterYear !== "") {
DataMainUpdate.value = DataMainOrig.value.filter( DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.year === filterYear)
(item: formListLeaveData) => } else if (filterType === "" && filterStatus !== "" && filterYear !== null) {
item.type === filterType && item.status === filterStatus DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.year === filterYear)
); } else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
} else if (filterType !== "" && filterStatus === "" && filterYear !== "") { DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.status === filterStatus && item.type === filterType)
DataMainUpdate.value = DataMainOrig.value.filter( } else if (filterType !== "" && filterStatus !== "" && filterYear !== null) {
(item: formListLeaveData) => DataMainUpdate.value = DataMainOrig.value.filter((item: formListLeaveData) => item.type === filterType && item.status === filterStatus && item.year === filterYear)
item.type === filterType && item.year === filterYear } else if (filterType == "0" && filterStatus == "0" && filterYear !== null) {
); DataMainUpdate.value = DataMainOrig.value
} else if (filterType === "" && filterStatus !== "" && filterYear === "") { }
DataMainUpdate.value = DataMainOrig.value.filter( }
(item: formListLeaveData) => item.status === filterStatus
);
} else if (filterType === "" && filterStatus === "" && filterYear !== "") {
DataMainUpdate.value = DataMainOrig.value.filter(
(item: formListLeaveData) => item.year === filterYear
);
} else if (
filterType === "" &&
filterStatus !== "" &&
filterYear !== null
) {
DataMainUpdate.value = DataMainOrig.value.filter(
(item: formListLeaveData) =>
item.status === filterStatus && item.year === filterYear
);
} else if (filterType !== "" && filterStatus !== "" && filterYear === "") {
DataMainUpdate.value = DataMainOrig.value.filter(
(item: formListLeaveData) =>
item.status === filterStatus && item.type === filterType
);
} else if (
filterType !== "" &&
filterStatus !== "" &&
filterYear !== null
) {
DataMainUpdate.value = DataMainOrig.value.filter(
(item: formListLeaveData) =>
item.type === filterType &&
item.status === filterStatus &&
item.year === filterYear
);
} else if (
filterType == "0" &&
filterStatus == "0" &&
filterYear !== null
) {
DataMainUpdate.value = DataMainOrig.value;
}
};
//--------------|ฟิลเตอร์|--------------------------------------// //--------------|ฟิลเตอร์|--------------------------------------//
const searchFilterTable = async () => { const searchFilterTable = async () => {
rows.value = []; rows.value = []
if (LeaveType.value !== undefined && LeaveType.value !== null) { if (LeaveType.value !== undefined && LeaveType.value !== null) {
await DataUpdate( await DataUpdate(LeaveType.value === "0" ? "all" : LeaveType.value!, LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value!)
LeaveType.value === "0" ? "all" : LeaveType.value!, let filteredData = DataMainOrig.value
LeaveStatus.value === "0" ? "all" : LeaveStatus.value!, if (LeaveType.value !== "0") {
fiscalYearyear.value === "0" ? "all" : fiscalYearyear.value! filteredData = filteredData.filter((item: formListLeaveData) => item.type === LeaveType.value)
); }
let filteredData = DataMainOrig.value; if (LeaveStatus.value !== "0") {
if (LeaveType.value !== "0") { filteredData = filteredData.filter((item: formListLeaveData) => item.status === LeaveStatus.value)
filteredData = filteredData.filter( }
(item: formListLeaveData) => item.type === LeaveType.value if (fiscalYearyear.value !== "0") {
); filteredData = filteredData.filter((item: formListLeaveData) => item.year === fiscalYearyear.value)
} }
if (LeaveStatus.value !== "0") { const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
filteredData = filteredData.filter( no: e.no,
(item: formListLeaveData) => item.status === LeaveStatus.value type: convertType(e.type) || "",
); status: convertStatus(e.status) || "",
} date: date2Thai(new Date(e.date)),
if (fiscalYearyear.value !== "0") { year: e.year !== undefined ? e.year : "",
filteredData = filteredData.filter( }))
(item: formListLeaveData) => item.year === fiscalYearyear.value rows.value = dataArr
); }
} }
const dataArr: formListLeaveData[] = filteredData.map((e: any) => ({
no: e.no,
type: convertType(e.type) || "",
status: convertStatus(e.status) || "",
date: date2Thai(new Date(e.date)),
year: e.year !== undefined ? e.year : "",
}));
rows.value = dataArr;
}
};
/** /**
* *ฟังก์ชั่นเลือก selector ที่ใช่ในการฟิลเตอร์
* @param val * @param val ค่าที่ต้องการฟิลเตอร์
* @param update * @param update อัพเดทค่า
* @param refData * @param refData ดาต้าที่ต้องการฟิลเตอร์
*/ */
const filterSelector = (val: any, update: Function, refData: string) => { const filterSelector = (val: any, update: Function, refData: string) => {
switch (refData) { switch (refData) {
case "fiscalyearOP": case "fiscalyearOP":
update(() => { update(() => {
fiscalyearOP.value = fiscalyearOP.value.filter( fiscalyearOP.value = fiscalyearOP.value.filter((v: any) => v.name.indexOf(val) > -1)
(v: any) => v.name.indexOf(val) > -1 })
); break
}); case "LeaveTypeOption":
break; update(() => {
case "LeaveTypeOption": typeOptions.value = typeOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
update(() => { })
typeOptions.value = typeOptions.value.filter( break
(v: any) => v.name.indexOf(val) > -1 case "LeaveStatusOption":
); update(() => {
}); statusOptions.value = statusOptions.value.filter((v: any) => v.name.indexOf(val) > -1)
break; })
case "LeaveStatusOption": break
update(() => { default:
statusOptions.value = statusOptions.value.filter( break
(v: any) => v.name.indexOf(val) > -1 }
); }
});
break;
default:
break;
}
};
/** filter ปี */ /** filter ปี */
const fiscalyearOP = ref<OptionData[]>([ const fiscalyearOP = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" }, { id: "0", name: "ทั้งหมด" },
{ id: "1", name: "2566" }, { id: "1", name: "2566" },
{ id: "2", name: "2567" }, { id: "2", name: "2567" },
{ id: "2", name: "2568" }, { id: "2", name: "2568" },
]); ])
/** /**
* *ฟังก์ชั่นค้นหาแสดง option ของประเภทการลา
* @param val * @param val ค่าที่เเสดง
* @returns * @returns option ทั้งหมด
*/ */
function convertType(val: string) { function convertType(val: string) {
if (val == "0") return "ทั้งหมด"; if (val == "0") return "ทั้งหมด"
else return options.value.find((x) => x.id == val)?.name; else return options.value.find(x => x.id == val)?.name
} }
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/ /** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
const optionsSpecific = ref([ const optionsSpecific = ref([
{ id: "s0", name: "ลาไปศึกษาต่อ" }, { id: "s0", name: "ลาไปศึกษาต่อ" },
{ id: "s1", name: "ลาฝึกอบรม" }, { id: "s1", name: "ลาฝึกอบรม" },
{ id: "s2", name: "ลาปฎิบัติการวิจัย" }, { id: "s2", name: "ลาปฎิบัติการวิจัย" },
{ id: "s3", name: "ลาดูงาน" }, { id: "s3", name: "ลาดูงาน" },
]); ])
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/ /** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
const optionsOrdination = ref([ const optionsOrdination = ref([
{ id: "0", name: "ลาอุปสมบท" }, { id: "0", name: "ลาอุปสมบท" },
{ id: "1", name: "ลาประกอบพิธีฮัจย์" }, { id: "1", name: "ลาประกอบพิธีฮัจย์" },
]); ])
/** รายการข้อมูลประเภทใบลา */ /** รายการข้อมูลประเภทใบลา */
const options = ref<OptionData[]>([ const options = ref<OptionData[]>([
{ id: "1", name: "ลาป่วย" }, { id: "1", name: "ลาป่วย" },
{ id: "2", name: "ลากิจส่วนตัว" }, { id: "2", name: "ลากิจส่วนตัว" },
{ id: "3", name: "ลาคลอดบุตร" }, { id: "3", name: "ลาคลอดบุตร" },
{ id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" }, { id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
{ id: "5", name: "ลาพักผ่อน" }, { id: "5", name: "ลาพักผ่อน" },
{ id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" }, { id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
{ id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" }, { id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
{ id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" }, { id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
{ id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" }, { id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
{ id: "10", name: "ลาติดตามคู่สมรส" }, { id: "10", name: "ลาติดตามคู่สมรส" },
{ id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" }, { id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]); ])
/** filter ประเภทการลา */ /** filter ประเภทการลา */
const typeOptions = ref<OptionData[]>([ const typeOptions = ref<OptionData[]>([{ id: "0", name: "ทั้งหมด" }, ...options.value])
{ id: "0", name: "ทั้งหมด" },
...options.value,
]);
/** สถานะของการลา */ /** สถานะของการลา */
const statusOptions = ref<OptionData[]>([ const statusOptions = ref<OptionData[]>([
{ id: "0", name: "ทั้งหมด" }, { id: "0", name: "ทั้งหมด" },
{ id: "1", name: "อนุมัติ" }, { id: "1", name: "อนุมัติ" },
{ id: "2", name: "ไม่อนุมัติ" }, { id: "2", name: "ไม่อนุมัติ" },
{ id: "3", name: "อยู่ระหว่างดำเนินการ" }, { id: "3", name: "อยู่ระหว่างดำเนินการ" },
{ id: "4", name: "ใหม่" }, { id: "4", name: "ใหม่" },
]); ])
/** /**
* *ฟังก์ชั่นค้นหาแสดง option ของสถานะ
* @param val * @param val ค่าที่เเสดง
* @returns * @returns option ทั้งหมด
*/ */
function convertStatus(val: string) { function convertStatus(val: string) {
if (val == "0") return "ทั้งหมด"; if (val == "0") return "ทั้งหมด"
else return statusOptions.value.find((x) => x.id == val)?.name; else return statusOptions.value.find(x => x.id == val)?.name
} }
/** data table filter & column ของรายการลา */ /** data table filter & column ของรายการลา */
const visibleColumns = ref<String[]>(["no", "type", "date", "status"]); const visibleColumns = ref<String[]>(["no", "type", "date", "status"])
const columns = ref<QTableProps["columns"]>([ const columns = ref<QTableProps["columns"]>([
{ {
name: "no", name: "no",
align: "left", align: "left",
label: "ลำดับ", label: "ลำดับ",
sortable: true, sortable: true,
field: "no", field: "no",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;", style: "font-size: 14px; width:5%;",
}, },
{ {
name: "type", name: "type",
align: "left", align: "left",
label: "ประเภทการลา", label: "ประเภทการลา",
sortable: true, sortable: true,
field: "type", field: "type",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "date", name: "date",
align: "left", align: "left",
label: "วันที่ยื่นใบลา", label: "วันที่ยื่นใบลา",
sortable: true, sortable: true,
field: "date", field: "date",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;", style: "font-size: 14px; width:15%;",
}, },
{ {
name: "status", name: "status",
align: "left", align: "left",
label: "สถานะ", label: "สถานะ",
sortable: true, sortable: true,
field: "status", field: "status",
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "font-size: 14px; width:10%;", style: "font-size: 14px; width:10%;",
}, },
]); ])
/** /**
* *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
* @param item * @param item ประเภทแบบฟอร์ม
* @param subitem * @param subitem ประเภทแบบฟอร์มย่อย
*/ */
function typeConvert(item: string, subitem: any) { function typeConvert(item: string, subitem: any) {
// console.log('first',item) // console.log('first',item)
if (item !== "6" && item !== "8") { if (item !== "6" && item !== "8") {
typeLeave.value = convertSubtitle(item); typeLeave.value = convertSubtitle(item)
} else if (item === "6") { } else if (item === "6") {
typeLeave.value = convertSubtitleInfo(subitem); typeLeave.value = convertSubtitleInfo(subitem)
} else if (item === "8") { } else if (item === "8") {
typeLeave.value = convertSubtitleInfo2(subitem); typeLeave.value = convertSubtitleInfo2(subitem)
} }
} }
/** /**
* *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์
* @param val * @param val ค่า string
* @returns * @returns ส่งค่าที่แปลงแล้ว
*/ */
function convertSubtitle(val: string) { function convertSubtitle(val: string) {
return options.value.find((x) => x.id == val)?.name; return options.value.find(x => x.id == val)?.name
} }
/** /**
* *ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย
* @param val * @param val ค่า string
* @returns * @returns ส่งค่าที่แปลงแล้ว
*/ */
function convertSubtitleInfo(val: string) { function convertSubtitleInfo(val: string) {
return optionsOrdination.value.find((x) => x.id == val)?.name; return optionsOrdination.value.find(x => x.id == val)?.name
} }
/** /**
* *ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
* @param val * @param val ค่า string
* @returns * @returns ส่งค่าที่แปลงแล้ว
*/ */
function convertSubtitleInfo2(val: string) { function convertSubtitleInfo2(val: string) {
return optionsSpecific.value.find((x) => x.id == val)?.name; return optionsSpecific.value.find(x => x.id == val)?.name
} }
return { return {
tabValue, tabValue,
typeOptions, typeOptions,
optionsSpecific, optionsSpecific,
statusOptions, statusOptions,
DataMain, DataMain,
DataMainUpdate, DataMainUpdate,
DataUpdate, DataUpdate,
DataMainOrig, DataMainOrig,
visibleColumns, visibleColumns,
columns, columns,
rows, rows,
LeaveType, LeaveType,
LeaveStatus, LeaveStatus,
fecthList, fecthList,
filterSelector, filterSelector,
searchFilterTable, searchFilterTable,
fiscalyearOP, fiscalyearOP,
fiscalYearyear, fiscalYearyear,
options, options,
optionsOrdination, optionsOrdination,
typeConvert, typeConvert,
typeLeave, typeLeave,
}; }
}); })