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

ต่อ api เพิ่ม form การลา

Browse source
This commit is contained in:
AnandaTon 2023-12-07 18:43:52 +07:00
parent 8b7d83e1d7
commit 26667a4d22
20 changed files with 1555 additions and 750 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/api/leave/api.leave.ts
View file

@ -21,4 +21,5 @@ export default {
leaveUser: () => `${leave}/user`,
leaveUserId: (id: string) => `${leave}/user/${id}`,
leaveProfile: () => `${leave}/user/profile`,
leaveCheck: () => `${leave}/user/check`,
}

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

@ -1,12 +1,18 @@
<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue"
import { useQuasar } from "quasar"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd, dialogConfirm } = mixin
const router = useRouter()
const { date2Thai, dateToISO, dialogConfirm, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
@ -22,7 +28,8 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataSick = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
@ -63,17 +70,18 @@ const FormRef: FormRef = {
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.contractTel = props.data.contractTel
formData.leaveTotal = props.data.leaveTotal
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
formDataSick.leaveWrote = props.data.leaveWrote
formDataSick.leaveStartDate = props.data.leaveStartDate
formDataSick.leaveEndDate = props.data.leaveEndDate
formDataSick.contractTel = props.data.contractTel
formDataSick.leaveTotal = props.data.leaveTotal
formDataSick.leaveNumber = props.data.leaveNumber
formDataSick.leaveDetail = props.data.leaveDetail
formDataSick.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
@ -85,9 +93,9 @@ async function fileUploadDoc(files: any) {
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
formData.leaveStartDate = null
formData.leaveEndDate = null
if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
formDataSick.leaveStartDate = null
formDataSick.leaveEndDate = null
}
console.log("testnull")
}
@ -105,17 +113,58 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataSick.leaveDocument.slice(0, formDataSick.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataSick.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataSick.type)
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
formData.append("leaveWrote", formDataSick.leaveWrote)
formData.append("leaveAddress", formDataSick.leaveAddress)
formData.append("leaveNumber", formDataSick.leaveNumber)
formData.append("leaveDetail", formDataSick.leaveDetail)
formData.append("leaveTotal", formDataSick.leaveTotal)
formData.append("leaveLast", formDataSick.leaveLast)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
const isReadOnly = computed(() => {
const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
if (conditionHalfDay) {
formData.leaveEndDate = formData.leaveStartDate // Set formData.leaveEndDate to null
formData.leaveTotal = "0.5 วัน "
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
formDataSick.leaveTotal = "0.5 วัน "
} else {
formData.leaveTotal = null
formDataSick.leaveTotal = null
}
return conditionHalfDay
})
@ -138,23 +187,23 @@ const isReadOnly = computed(() => {
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveWrote"
v-model="formDataSick.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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="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" @update:model-value="resetDate" />
<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
v-model="formDataSick.leaveStartDate"
:locale="'th'"
autoApply
borderless
@ -178,7 +227,7 @@ const isReadOnly = computed(() => {
:readonly="!edit"
bg-color="white"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -192,14 +241,14 @@ const isReadOnly = computed(() => {
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataSick.leaveEndDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
:readonly="isReadOnly"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -217,7 +266,7 @@ const isReadOnly = computed(() => {
bg-color="white"
:readonly="isReadOnly"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -234,7 +283,7 @@ const isReadOnly = computed(() => {
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataSick.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
@ -245,7 +294,7 @@ const isReadOnly = computed(() => {
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
v-model="formDataSick.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
@ -261,7 +310,7 @@ const isReadOnly = computed(() => {
outlined
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
v-model="formDataSick.leaveNumber"
mask="(###)-###-####"
hide-bottom-space
bg-color="white"
@ -277,7 +326,7 @@ const isReadOnly = computed(() => {
outlined
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
v-model="formDataSick.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -293,7 +342,7 @@ const isReadOnly = computed(() => {
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataSick.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
bg-color="white"
@ -303,7 +352,7 @@ const isReadOnly = computed(() => {
<q-file
ref="leaveDocumentRef"
for="leaveDocumentRef"
v-model="formData.leaveDocument"
v-model="formDataSick.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
@ -326,7 +375,7 @@ const isReadOnly = computed(() => {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

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

@ -1,10 +1,18 @@
<script setup lang="ts">
import { ref, reactive, watch } from "vue"
import { useQuasar } from "quasar"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/BirthForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd } = mixin
const router = useRouter()
const $q = useQuasar()
const { date2Thai, dateToISO, dialogConfirm, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
@ -20,7 +28,8 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataBirth = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
@ -57,16 +66,17 @@ const FormRef: FormRef = {
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveTotal = props.data.leaveTotal
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
formDataBirth.leaveWrote = props.data.leaveWrote
formDataBirth.leaveStartDate = props.data.leaveStartDate
formDataBirth.leaveEndDate = props.data.leaveEndDate
formDataBirth.leaveTotal = props.data.leaveTotal
formDataBirth.leaveNumber = props.data.leaveNumber
formDataBirth.leaveDetail = props.data.leaveDetail
formDataBirth.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
async function fileUploadDoc(files: any) {
files.forEach((file: any) => {
@ -87,9 +97,51 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataBirth.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataBirth.type)
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
formData.append("leaveWrote", formDataBirth.leaveWrote)
formData.append("leaveAddress", formDataBirth.leaveAddress)
formData.append("leaveNumber", formDataBirth.leaveNumber)
formData.append("leaveDetail", formDataBirth.leaveDetail)
formData.append("leaveLast", formDataBirth.leaveLast)
formData.append("leaveTotal", formDataBirth.leaveTotal)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<!-- ฟอร์มลาคลอดบุตร-->
@ -107,7 +159,7 @@ function onValidate() {
for="leaveWroteRef"
dense
outlined
v-model="formData.leaveWrote"
v-model="formDataBirth.leaveWrote"
label="เขียนที่"
hide-bottom-space
bg-color="white"
@ -118,7 +170,7 @@ function onValidate() {
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
v-model="formDataBirth.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -143,7 +195,7 @@ function onValidate() {
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -157,15 +209,15 @@ function onValidate() {
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataBirth.leaveEndDate"
:locale="'th'"
autoApply
borderless
hide-bottom-space
:enableTimePicker="false"
week-start="0"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formDataBirth.leaveStartDate"
:min-date="formDataBirth.leaveStartDate ? new Date(formDataBirth.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -181,9 +233,9 @@ function onValidate() {
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.leaveStartDate"
:readonly="!formDataBirth.leaveStartDate"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -199,7 +251,7 @@ function onValidate() {
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataBirth.leaveTotal"
label="จำนวนวันที่ลา"
bg-color="white"
readonly
@ -211,7 +263,7 @@ function onValidate() {
outlined
ref="leaveLastRef"
for="leaveLastRef"
v-model="formData.leaveLast"
v-model="formDataBirth.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly
hide-bottom-space
@ -227,7 +279,7 @@ function onValidate() {
bg-color="white"
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
v-model="formDataBirth.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
@ -243,7 +295,7 @@ function onValidate() {
bg-color="white"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
v-model="formDataBirth.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -258,7 +310,7 @@ function onValidate() {
bg-color="white"
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataBirth.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
@ -267,7 +319,7 @@ function onValidate() {
ref="leaveDocumentRef"
for="leaveDocumentRef"
hide-bottom-space
v-model="formData.leaveDocument"
v-model="formDataBirth.leaveDocument"
@added="fileUploadDoc"
dense
bg-color="white"
@ -289,7 +341,7 @@ function onValidate() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

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

@ -2,9 +2,17 @@
import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd } = mixin
const router = useRouter()
const $q = useQuasar()
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
@ -20,13 +28,13 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataHelpWife = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
wifeDayName: "",
wifeDayDateBorn: null,
leaveStartDate: null,
leaveEndDate: null,
contractTel: "",
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
@ -40,7 +48,6 @@ const wifeDayNameRef = ref<object | null>(null)
const wifeDayDateBornRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
@ -64,18 +71,19 @@ const FormRef: FormRef = {
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.wifeDayName = props.data.wifeDayName
formData.wifeDayDateBorn = props.data.wifeDayDateBorn
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveTotal = props.data.leaveTotal
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
formDataHelpWife.leaveWrote = props.data.leaveWrote
formDataHelpWife.wifeDayName = props.data.wifeDayName
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
formDataHelpWife.leaveStartDate = props.data.leaveStartDate
formDataHelpWife.leaveEndDate = props.data.leaveEndDate
formDataHelpWife.leaveTotal = props.data.leaveTotal
formDataHelpWife.leaveNumber = props.data.leaveNumber
formDataHelpWife.leaveDetail = props.data.leaveDetail
formDataHelpWife.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
@ -96,7 +104,7 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
@ -104,10 +112,53 @@ function onValidate() {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
formDataHelpWife.leaveTotal = newLeaveTotal
console.log("test")
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataHelpWife.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataHelpWife.type)
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
formData.append("leaveWrote", formDataHelpWife.leaveWrote)
formData.append("leaveAddress", formDataHelpWife.leaveAddress)
formData.append("leaveNumber", formDataHelpWife.leaveNumber)
formData.append("leaveDetail", formDataHelpWife.leaveDetail)
formData.append("leaveTotal", formDataHelpWife.leaveTotal)
formData.append("wifeDayName", formDataHelpWife.wifeDayName)
formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
@ -142,7 +193,7 @@ function updateLeaveTotal() {
outlined
hide-bottom-space
bg-color="white"
v-model="formData.leaveWrote"
v-model="formDataHelpWife.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -150,7 +201,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
v-model="formDataHelpWife.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -175,7 +226,7 @@ function updateLeaveTotal() {
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -189,7 +240,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataHelpWife.leaveEndDate"
:locale="'th'"
autoApply
borderless
@ -197,8 +248,8 @@ function updateLeaveTotal() {
:enableTimePicker="false"
@update:model-value="updateLeaveTotal"
week-start="0"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formDataHelpWife.leaveStartDate"
:min-date="formDataHelpWife.leaveStartDate ? new Date(formDataHelpWife.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -214,9 +265,9 @@ function updateLeaveTotal() {
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.leaveStartDate"
:readonly="!formDataHelpWife.leaveStartDate"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -232,7 +283,7 @@ function updateLeaveTotal() {
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataHelpWife.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
@ -247,7 +298,7 @@ function updateLeaveTotal() {
bg-color="white"
outlined
hide-bottom-space
v-model="formData.wifeDayName"
v-model="formDataHelpWife.wifeDayName"
label="ชื่อภรรยา"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
@ -257,7 +308,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.wifeDayDateBorn"
v-model="formDataHelpWife.wifeDayDateBorn"
:locale="'th'"
autoApply
borderless
@ -282,7 +333,7 @@ function updateLeaveTotal() {
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.wifeDayDateBorn != null ? date2Thai(formData.wifeDayDateBorn) : null"
:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
:label="`${'วันที่คลอด'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
>
@ -300,7 +351,7 @@ function updateLeaveTotal() {
outlined
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
v-model="formDataHelpWife.leaveNumber"
mask="(###)-###-####"
unmasked-value
hide-bottom-space
@ -318,7 +369,7 @@ function updateLeaveTotal() {
bg-color="white"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
v-model="formDataHelpWife.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -334,12 +385,23 @@ function updateLeaveTotal() {
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataHelpWife.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file bg-color="white" ref="leaveDocumentRef" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file
bg-color="white"
ref="leaveDocumentRef"
v-model="formDataHelpWife.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -351,7 +413,7 @@ function updateLeaveTotal() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

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

@ -2,9 +2,17 @@
import { ref, reactive, watch, computed } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
const $q = useQuasar()
const dataStore = useLeaveStore()
const mixin = useCounterMixin()
const { date2Thai, calculateDurationYmd } = mixin
const router = useRouter()
const { date2Thai, dateToISO, dialogConfirm, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
@ -20,14 +28,14 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataVacation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
halfDay: "day",
restDayOldTotal: "",
restDayCurrentTotal: "",
leaveStartDate: null,
leaveEndDate: null,
contractTel: "",
leaveTotal: "",
leaveNumber: "",
leaveAddress: "",
@ -42,7 +50,6 @@ const restDayCurrentTotalRef = ref<object | null>(null)
const halfDayRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const contractTelRef = ref<object | null>(null)
const leaveTotalRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
@ -57,7 +64,6 @@ const FormRef: FormRef = {
restDayCurrentTotal: restDayCurrentTotalRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
contractTel: contractTelRef,
leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
@ -68,19 +74,19 @@ const FormRef: FormRef = {
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.restDayOldTotal = props.data.restDayOldTotal
formData.restDayCurrentTotal = props.data.restDayCurrentTotal
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.contractTel = props.data.contractTel
formData.leaveTotal = props.data.leaveTotal
formData.leaveNumber = props.data.leaveNumber
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
formDataVacation.leaveWrote = props.data.leaveWrote
formDataVacation.restDayOldTotal = props.data.restDayOldTotal
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
formDataVacation.leaveStartDate = props.data.leaveStartDate
formDataVacation.leaveEndDate = props.data.leaveEndDate
formDataVacation.leaveTotal = props.data.leaveTotal
formDataVacation.leaveNumber = props.data.leaveNumber
formDataVacation.leaveDetail = props.data.leaveDetail
formDataVacation.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
@ -101,28 +107,71 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataVacation.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataVacation.type)
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
formData.append("leaveWrote", formDataVacation.leaveWrote)
formData.append("leaveAddress", formDataVacation.leaveAddress)
formData.append("leaveNumber", formDataVacation.leaveNumber)
formData.append("leaveDetail", formDataVacation.leaveDetail)
formData.append("restDayOldTotal", formDataVacation.restDayOldTotal)
formData.append("restDayCurrentTotal", formDataVacation.restDayCurrentTotal)
formData.append("leaveTotal", formDataVacation.leaveTotal)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
*/
function resetDate() {
if (formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon") {
formData.leaveStartDate = null
formData.leaveEndDate = null
if (formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon") {
formDataVacation.leaveStartDate = null
formDataVacation.leaveEndDate = null
}
console.log("testnull")
}
const isReadOnly = computed(() => {
const conditionHalfDay = formData.halfDay === "half_day_morning" || formData.halfDay === "half_day_afternoon"
const conditionHalfDay = formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon"
if (conditionHalfDay) {
formData.leaveEndDate = formData.leaveStartDate // Set formData.leaveEndDate to null
formData.leaveTotal = "0.5 วัน "
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
formDataVacation.leaveTotal = "0.5 วัน "
} else {
formData.leaveTotal = null
formDataVacation.leaveTotal = null
}
return conditionHalfDay
})
@ -144,15 +193,15 @@ const isReadOnly = computed(() => {
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveWrote"
v-model="formDataVacation.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<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="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" @update:model-value="resetDate" />
<q-radio v-model="formDataVacation.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
<q-radio v-model="formDataVacation.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
<q-radio v-model="formDataVacation.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
</div>
<q-input
class="col-12 col-md-4 col-sm-6"
@ -163,7 +212,7 @@ const isReadOnly = computed(() => {
bg-color="white"
readonly
outlined
v-model="formData.restDayOldTotal"
v-model="formDataVacation.restDayOldTotal"
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
/>
@ -176,14 +225,14 @@ const isReadOnly = computed(() => {
hide-bottom-space
bg-color="white"
outlined
v-model="formData.restDayCurrentTotal"
v-model="formDataVacation.restDayCurrentTotal"
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
/>
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
v-model="formDataVacation.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -208,7 +257,7 @@ const isReadOnly = computed(() => {
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -222,7 +271,7 @@ const isReadOnly = computed(() => {
<datepicker
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataVacation.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -230,7 +279,7 @@ const isReadOnly = computed(() => {
:enableTimePicker="false"
week-start="0"
:readonly="isReadOnly"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formDataVacation.leaveStartDate ? new Date(formDataVacation.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -248,7 +297,7 @@ const isReadOnly = computed(() => {
bg-color="white"
class="full-width datepicker"
:readonly="isReadOnly"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -265,7 +314,7 @@ const isReadOnly = computed(() => {
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataVacation.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
@ -280,7 +329,7 @@ const isReadOnly = computed(() => {
bg-color="white"
ref="leaveNumberRef"
for="leaveNumberRef"
v-model="formData.leaveNumber"
v-model="formDataVacation.leaveNumber"
mask="(###)-###-####"
unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
@ -296,7 +345,7 @@ const isReadOnly = computed(() => {
bg-color="white"
ref="leaveAddressRef"
for="leaveAddressRef"
v-model="formData.leaveAddress"
v-model="formDataVacation.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
@ -312,12 +361,23 @@ const isReadOnly = computed(() => {
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataVacation.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file ref="leaveDocumentRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file
ref="leaveDocumentRef"
bg-color="white"
v-model="formDataVacation.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -329,7 +389,7 @@ const isReadOnly = computed(() => {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formDataVacation.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

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

@ -3,10 +3,14 @@ import { reactive, ref, watch } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
@ -26,8 +30,8 @@ const props = defineProps({
/** ตัวแปร ref สำหรับแสดง validate */
const ordainDayLocationNumberRef = ref<object | null>(null)
const leaveWroteRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const totalLeaveRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const ordainDayOrdinationRef = ref<object | null>(null)
@ -39,10 +43,11 @@ const ordainDayBuddhistLentNameRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataOrdination = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
government: new Date(),
birthday: new Date(),
leavegovernmentDate: new Date(),
leavebirthDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
@ -52,15 +57,15 @@ const formData = reactive<any>({
ordainDayLocationAddress: "",
ordainDayBuddhistLentName: "",
ordainDayBuddhistLentAddress: "",
monk: "never",
ordainDayStatus: "true",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: OrdinationForm = {
leaveWrote: leaveWroteRef,
government: governmentRef,
birthday: birthdayRef,
leavegovernmentDate: leavegovernmentDateRef,
leavebirthDate: leavebirthDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
totalLeave: totalLeaveRef,
@ -73,11 +78,20 @@ const formRef: OrdinationForm = {
leaveDocument: leaveDocumentRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
// Watch for changes in leaveEndDate and update leaveTotal accordingly
watch(formData.leaveEndDate, async () => {
if (formData.leaveStartDate !== undefined && formData.leaveEndDate !== undefined) {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
watch(formDataOrdination.leaveEndDate, async () => {
if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
formDataOrdination.leaveTotal = newLeaveTotal
console.log(newLeaveTotal)
}
// Update the leaveTotal value
@ -88,8 +102,8 @@ watch(formData.leaveEndDate, async () => {
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
formDataOrdination.leaveTotal = newLeaveTotal
console.log("test")
}
@ -106,9 +120,56 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataOrdination.leaveDocument.slice(0, formDataOrdination.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataOrdination.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataOrdination.type)
formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
formData.append("leaveWrote", formDataOrdination.leaveWrote)
formData.append("leaveDetail", formDataOrdination.leaveDetail)
formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<!-- ฟอร์ม ลาอุปสมบท -->
@ -127,12 +188,21 @@ function onValidate() {
outlined
bg-color="white"
hide-bottom-space
v-model="formData.leaveWrote"
v-model="formDataOrdination.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.leaveStartDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataOrdination.leaveStartDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -147,7 +217,7 @@ function onValidate() {
ref="leaveStartDateRef"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -161,14 +231,14 @@ function onValidate() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataOrdination.leaveEndDate"
:locale="'th'"
autoApply
borderless
@update:model-value="updateLeaveTotal"
:readonly="!formData.leaveStartDate"
:readonly="!formDataOrdination.leaveStartDate"
:enableTimePicker="false"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formDataOrdination.leaveStartDate ? new Date(formDataOrdination.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
week-start="0"
>
<template #year="{ year }">
@ -185,9 +255,9 @@ function onValidate() {
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.leaveStartDate"
:readonly="!formDataOrdination.leaveStartDate"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -203,7 +273,7 @@ function onValidate() {
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataOrdination.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
@ -213,7 +283,7 @@ function onValidate() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.government"
v-model="formDataOrdination.leavegovernmentDate"
:locale="'th'"
autoApply
borderless
@ -230,13 +300,13 @@ function onValidate() {
<template #trigger>
<q-input
outlined
ref="governmentRef"
ref="leavegovernmentDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width datepicker"
:model-value="formData.government != null ? date2Thai(formData.government) : null"
:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
:label="`${'วันที่เข้ารับราชการ'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
@ -250,7 +320,7 @@ function onValidate() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.birthday"
v-model="formDataOrdination.leavebirthDate"
:locale="'th'"
autoApply
borderless
@ -267,13 +337,13 @@ function onValidate() {
<template #trigger>
<q-input
outlined
ref="birthdayRef"
ref="leavebirthDateRef"
dense
bg-color="white"
hide-bottom-space
readonly
class="full-width datepicker"
:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
:label="`${'วันเดือนปีเกิด'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -288,15 +358,15 @@ function onValidate() {
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
<div class="col-12">
<q-radio v-model="formData.monk" val="ever" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
<q-radio v-model="formData.monk" val="never" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
<q-radio v-model="formDataOrdination.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
<q-radio v-model="formDataOrdination.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
</div>
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.ordainDayOrdination"
v-model="formDataOrdination.ordainDayOrdination"
:locale="'th'"
autoApply
full-width
@ -319,7 +389,7 @@ function onValidate() {
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.ordainDayOrdination != null ? date2Thai(formData.ordainDayOrdination) : null"
:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
:label="`${'วันอุปสมบท'}`"
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
>
@ -338,7 +408,7 @@ function onValidate() {
bg-color="white"
outlined
full-width
v-model="formData.ordainDayLocationName"
v-model="formDataOrdination.ordainDayLocationName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
@ -349,7 +419,7 @@ function onValidate() {
dense
full-width
outlined
v-model="formData.ordainDayLocationNumber"
v-model="formDataOrdination.ordainDayLocationNumber"
bg-color="white"
mask="(###)-###-####"
unmasked-value
@ -364,7 +434,7 @@ function onValidate() {
bg-color="white"
outlined
hide-bottom-space
v-model="formData.ordainDayLocationAddress"
v-model="formDataOrdination.ordainDayLocationAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
@ -378,7 +448,7 @@ function onValidate() {
bg-color="white"
hide-bottom-space
outlined
v-model="formData.ordainDayBuddhistLentName"
v-model="formDataOrdination.ordainDayBuddhistLentName"
label="ชื่อวัด"
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
/>
@ -389,7 +459,7 @@ function onValidate() {
ref="ordainDayBuddhistLentAddressRef"
bg-color="white"
outlined
v-model="formData.ordainDayBuddhistLentAddress"
v-model="formDataOrdination.ordainDayBuddhistLentAddress"
label="ที่อยู่"
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
type="textarea"
@ -403,13 +473,13 @@ function onValidate() {
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataOrdination.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<div class="col-12 col-sm-6">
<q-file ref="leaveDocumentRef" v-model="formData.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple>
<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

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

@ -3,17 +3,23 @@ import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const router = useRouter()
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
const { date2Thai, dialogConfirm, calculateDurationYmd, messageError, success, dateToISO } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveWroteRef = ref<object | null>(null)
const governmentRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const leaveDocumentRef = ref<object | null>(null)
@ -30,25 +36,35 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataHaji = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
government: new Date(),
leavegovernmentDate: new Date(),
leaveStartDate: null,
leaveEndDate: null,
totalLeave: new Date(),
hajjDayStatus: "never",
hajjDayStatus: "true",
leaveDocument: null,
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: HajiForm = {
leaveWrote: leaveWroteRef,
government: governmentRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
leaveDocument: leaveDocumentRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
@ -62,15 +78,57 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataHaji.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataHaji.type)
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
formData.append("leaveWrote", formDataHaji.leaveWrote)
formData.append("leaveDetail", formDataHaji.leaveDetail)
formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
formDataHaji.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
@ -84,7 +142,7 @@ function updateLeaveTotal() {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.leaveWrote"
v-model="formDataHaji.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12"
bg-color="white"
@ -98,7 +156,7 @@ function updateLeaveTotal() {
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formData.leaveStartDate"
v-model="formDataHaji.leaveStartDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -123,7 +181,7 @@ function updateLeaveTotal() {
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
@ -133,7 +191,7 @@ function updateLeaveTotal() {
</datepicker>
<datepicker
v-model="formData.leaveEndDate"
v-model="formDataHaji.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -142,8 +200,8 @@ function updateLeaveTotal() {
:enableTimePicker="false"
:locale="'th'"
@update:model-value="updateLeaveTotal"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formDataHaji.leaveStartDate"
:min-date="formDataHaji.leaveStartDate ? new Date(formDataHaji.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -158,10 +216,10 @@ function updateLeaveTotal() {
bg-color="white"
outlined
dense
:readonly="!formData.leaveStartDate"
:readonly="!formDataHaji.leaveStartDate"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -178,13 +236,13 @@ function updateLeaveTotal() {
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataHaji.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
/>
<datepicker
v-model="formData.government"
v-model="formDataHaji.leavegovernmentDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -202,7 +260,7 @@ function updateLeaveTotal() {
</template>
<template #trigger>
<q-input
ref="governmentRef"
ref="leavegovernmentDateRef"
bg-color="white"
class="full-width datepicker"
outlined
@ -210,7 +268,7 @@ function updateLeaveTotal() {
readonly
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="formData.government != null ? date2Thai(formData.government) : null"
:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
@ -224,14 +282,14 @@ function updateLeaveTotal() {
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจย์ฯหรือไม่</div>
<div class="col-12">
<q-radio v-model="formData.hajjDayStatus" val="ever" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formData.hajjDayStatus" val="never" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
<q-radio v-model="formDataHaji.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจย์ฯ" />
</div>
<q-input v-model="formData.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.leaveDocument" bg-color="white" label="เอกสารประกอบ" dense outlined multiple hide-bottom-space>
<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

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

@ -3,10 +3,16 @@ import { reactive, ref } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const router = useRouter()
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, calculateDurationYmd } = mixin
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
@ -35,20 +41,30 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataMilitary = reactive<any>({
type: dataStore.typeId,
leaveStartDate: null,
leaveEndDate: null,
totalLeave: 1,
leaveTotal: 0,
leaveDocument: null,
leaveWrote: "",
absentDaySummon: "",
absentDayLocation: "",
absentDayRegistorDate: "",
absentDayRegistorDate: null,
absentDayGetIn: "",
absentDayAt: "",
leaveDetail: "",
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: MilitaryForm = {
leaveStartDate: leaveStartDateRef,
@ -75,16 +91,60 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataMilitary.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile)
formData.append("type", formDataMilitary.type)
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
formData.append("absentDayAt", formDataMilitary.absentDayAt)
formData.append("leaveWrote", formDataMilitary.leaveWrote)
formData.append("leaveDetail", formDataMilitary.leaveDetail)
formData.append("leaveTotal", formDataMilitary.leaveTotal)
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
formDataMilitary.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
@ -104,12 +164,21 @@ function updateLeaveTotal() {
outlined
bg-color="white"
hide-bottom-space
v-model="formData.leaveWrote"
v-model="formDataMilitary.leaveWrote"
label="เขียนที่"
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" v-model="formData.leaveStartDate" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0">
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formDataMilitary.leaveStartDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -124,7 +193,7 @@ function updateLeaveTotal() {
ref="leaveStartDateRef"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -138,15 +207,15 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataMilitary.leaveEndDate"
:locale="'th'"
autoApply
borderless
:enableTimePicker="false"
week-start="0"
@update:model-value="updateLeaveTotal"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formDataMilitary.leaveStartDate"
:min-date="formDataMilitary.leaveStartDate ? new Date(formDataMilitary.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -161,9 +230,9 @@ function updateLeaveTotal() {
ref="leaveEndDateRef"
bg-color="white"
hide-bottom-space
:readonly="!formData.leaveStartDate"
:readonly="!formDataMilitary.leaveStartDate"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -181,7 +250,7 @@ function updateLeaveTotal() {
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataMilitary.leaveTotal"
label="จำนวนวันที่ลา"
readonly
hide-bottom-space
@ -194,7 +263,7 @@ function updateLeaveTotal() {
dense
bg-color="white"
outlined
v-model="formData.absentDaySummon"
v-model="formDataMilitary.absentDaySummon"
label="ได้รับหมายเรียกของ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
@ -206,7 +275,7 @@ function updateLeaveTotal() {
dense
bg-color="white"
outlined
v-model="formData.absentDayLocation"
v-model="formDataMilitary.absentDayLocation"
label="ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
@ -219,7 +288,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
v-model="formData.absentDayRegistorDate"
v-model="formDataMilitary.absentDayRegistorDate"
:locale="'th'"
autoApply
borderless
@ -240,7 +309,7 @@ function updateLeaveTotal() {
bg-color="white"
hide-bottom-space
class="full-width datepicker"
:model-value="formData.absentDayRegistorDate != null ? date2Thai(formData.absentDayRegistorDate) : null"
:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
:label="`${'ลงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
>
@ -257,7 +326,7 @@ function updateLeaveTotal() {
bg-color="white"
ref="absentDayGetInRef"
outlined
v-model="formData.absentDayGetIn"
v-model="formDataMilitary.absentDayGetIn"
label="ให้เข้ารับการ"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
@ -269,7 +338,7 @@ function updateLeaveTotal() {
bg-color="white"
outlined
ref="absentDayAtRef"
v-model="formData.absentDayAt"
v-model="formDataMilitary.absentDayAt"
label="ณ ที่"
hide-bottom-space
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
@ -277,10 +346,10 @@ function updateLeaveTotal() {
</div>
</div>
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formData.leaveDetail" type="textarea" label="รายละเอียด" />
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space>
<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

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

@ -3,10 +3,16 @@ import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, arabicNumberToText } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
@ -14,8 +20,8 @@ const files = ref<any>(null)
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const dateGovernmentRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveSalaryRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
@ -39,31 +45,33 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
leaveWrote: "",
const formDataStudy = reactive<any>({
type: dataStore.typeId, //
leaveWrote: "", //
leaveStartDate: null,
leaveEndDate: null,
birthday: new Date(),
dateGovernment: new Date(),
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "test",
studyDayScholarship: "",
studyDayCountry: "",
studyDayUniversityName: "",
studyDayDegreeLevel: "",
studyDaySubject: "",
leaveDocument: "",
studyDayUniversityName: "", //
studyDayDegreeLevel: "", //
studyDaySubject: "", //
leaveDocument: "", //
leaveDetail: "",
leaveTotal: "",
})
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: studyDaySubjectForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
birthday: birthdayRef,
dateGovernment: dateGovernmentRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveSalary: leaveSalaryRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
@ -75,6 +83,15 @@ const formRef: studyDaySubjectForm = {
leaveWrote: leaveWroteRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
@ -88,16 +105,66 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataStudy.leaveDocument.slice(0, formDataStudy.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataStudy.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile) //
formData.append("type", formDataStudy.type) //
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
formData.append("studyDaySubject", formDataStudy.studyDaySubject)
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
formData.append("studyDayCountry", formDataStudy.studyDayCountry)
formData.append("leaveWrote", formDataStudy.leaveWrote) //
formData.append("leaveDetail", formDataStudy.leaveDetail) //
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
formData.append("leaveAddress", formDataStudy.leaveAddress) //
formData.append("leaveNumber", formDataStudy.leaveNumber) //
formData.append("leaveSalaryText", formDataStudy.leaveSalaryText) //
formData.append("leaveSalary", formDataStudy.leaveSalary) //
formData.append("leaveTotal", formDataStudy.leaveTotal) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
formDataStudy.leaveTotal = newLeaveTotal
console.log("test")
}
@ -105,7 +172,7 @@ function updateLeaveTotal() {
* แปลงตัวเลขเงินเดือน
*/
const formattedleaveSalary = computed(() => {
return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
return formDataStudy.leaveSalary !== null ? formDataStudy.leaveSalary.toLocaleString("th-TH") : ""
})
</script>
@ -118,7 +185,7 @@ const formattedleaveSalary = computed(() => {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.leaveWrote"
v-model="formDataStudy.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12"
bg-color="white"
@ -129,7 +196,16 @@ const formattedleaveSalary = computed(() => {
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<datepicker
v-model="formDataStudy.leaveStartDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -146,7 +222,7 @@ const formattedleaveSalary = computed(() => {
lazy-rules
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
@ -157,7 +233,7 @@ const formattedleaveSalary = computed(() => {
</datepicker>
<datepicker
v-model="formData.leaveEndDate"
v-model="formDataStudy.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -165,9 +241,9 @@ const formattedleaveSalary = computed(() => {
week-start="0"
:locale="'th'"
@update:model-value="updateLeaveTotal"
:readonly="!formData.leaveStartDate"
:readonly="!formDataStudy.leaveStartDate"
:enableTimePicker="false"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formDataStudy.leaveStartDate ? new Date(formDataStudy.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -185,8 +261,8 @@ const formattedleaveSalary = computed(() => {
bg-color="white"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.leaveStartDate"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:readonly="!formDataStudy.leaveStartDate"
:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -203,7 +279,7 @@ const formattedleaveSalary = computed(() => {
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataStudy.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
@ -212,7 +288,7 @@ const formattedleaveSalary = computed(() => {
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formData.dateGovernment"
v-model="formDataStudy.leavegovernmentDate"
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -230,7 +306,7 @@ const formattedleaveSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="dateGovernmentRef"
ref="leavegovernmentDateRef"
class="full-width datepicker"
bg-color="white"
outlined
@ -238,7 +314,7 @@ const formattedleaveSalary = computed(() => {
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : null"
:model-value="formDataStudy.leavegovernmentDate != null ? date2Thai(formDataStudy.leavegovernmentDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
@ -249,7 +325,7 @@ const formattedleaveSalary = computed(() => {
</datepicker>
<datepicker
v-model="formData.birthday"
v-model="formDataStudy.leavebirthDate"
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -267,7 +343,7 @@ const formattedleaveSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="birthdayRef"
ref="leavebirthDateRef"
class="full-width datepicker"
bg-color="white"
outlined
@ -275,7 +351,7 @@ const formattedleaveSalary = computed(() => {
readonly
hide-bottom-space
:label="`${'วันเดือนปีเกิด'}`"
:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
:model-value="formDataStudy.leavebirthDate != null ? date2Thai(formDataStudy.leavebirthDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -288,7 +364,7 @@ const formattedleaveSalary = computed(() => {
<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input
v-model="formData.leaveSalaryText"
v-model="formDataStudy.leaveSalaryText"
ref="leaveSalaryRef"
class="col-12 col-sm-6 col-md-3"
bg-color="white"
@ -305,7 +381,7 @@ const formattedleaveSalary = computed(() => {
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
v-model="formData.studyDayUniversityName"
v-model="formDataStudy.studyDayUniversityName"
ref="studyDayUniversityNameRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -317,7 +393,7 @@ const formattedleaveSalary = computed(() => {
/>
<q-input
v-model="formData.studyDayDegreeLevel"
v-model="formDataStudy.studyDayDegreeLevel"
ref="studyDayDegreeLevelRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -329,7 +405,7 @@ const formattedleaveSalary = computed(() => {
/>
<q-input
v-model="formData.studyDaySubject"
v-model="formDataStudy.studyDaySubject"
ref="studyDaySubjectRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -341,7 +417,7 @@ const formattedleaveSalary = computed(() => {
/>
<q-input
v-model="formData.studyDayCountry"
v-model="formDataStudy.studyDayCountry"
ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -353,7 +429,7 @@ const formattedleaveSalary = computed(() => {
/>
<q-input
v-model="formData.studyDayScholarship"
v-model="formDataStudy.studyDayScholarship"
ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -365,7 +441,7 @@ const formattedleaveSalary = computed(() => {
/>
<q-input
v-model="formData.leaveNumber"
v-model="formDataStudy.leaveNumber"
ref="leaveNumberRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -379,7 +455,7 @@ const formattedleaveSalary = computed(() => {
/>
<q-input
v-model="formData.leaveAddress"
v-model="formDataStudy.leaveAddress"
ref="leaveAddressRef"
class="col-12"
bg-color="white"
@ -392,10 +468,10 @@ const formattedleaveSalary = computed(() => {
</div>
</div>
<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

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

@ -3,10 +3,16 @@ import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useQuasar } from "quasar"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const $q = useQuasar()
const router = useRouter()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd } = mixin
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const files = ref<any>(null)
@ -23,16 +29,17 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataTrain = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
birthday: new Date(),
dateGovernment: new Date(),
leavebirthDate: new Date(),
leavegovernmentDate: new Date(),
leaveSalary: 10000,
salaryText: arabicNumberToText(10000),
leaveSalaryText: arabicNumberToText(10000),
leaveNumber: "",
leaveAddress: "test",
leaveAddress: "",
studyDayScholarship: "",
studyDayCountry: "",
studyDayTrainingSubject: "",
@ -44,8 +51,8 @@ const formData = reactive<any>({
/** ตัวแปร ref สำหรับแสดง validate */
const leaveStartDateRef = ref<object | null>(null)
const leaveEndDateRef = ref<object | null>(null)
const birthdayRef = ref<object | null>(null)
const dateGovernmentRef = ref<object | null>(null)
const leavebirthDateRef = ref<object | null>(null)
const leavegovernmentDateRef = ref<object | null>(null)
const leaveNumberRef = ref<object | null>(null)
const leaveAddressRef = ref<object | null>(null)
const studyDayScholarshipRef = ref<object | null>(null)
@ -58,8 +65,8 @@ const leaveWroteRef = ref<object | null>(null)
const formRef: TrainForm = {
leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef,
birthday: birthdayRef,
dateGovernment: dateGovernmentRef,
leavebirthDate: leavebirthDateRef,
leavegovernmentDate: leavegovernmentDateRef,
leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef,
studyDayScholarship: studyDayScholarshipRef,
@ -69,6 +76,15 @@ const formRef: TrainForm = {
leaveWrote: leaveWroteRef,
}
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() {
const hasError = []
@ -83,16 +99,65 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataTrain.leaveDocument.slice(0, formDataTrain.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataTrain.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile) //
formData.append("type", formDataTrain.type) //
formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
formData.append("studyDayCountry", formDataTrain.studyDayCountry)
formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
formData.append("leaveWrote", formDataTrain.leaveWrote) //
formData.append("leaveDetail", formDataTrain.leaveDetail) //
formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
formData.append("leaveAddress", formDataTrain.leaveAddress) //
formData.append("leaveNumber", formDataTrain.leaveNumber) //
formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
formData.append("leaveSalary", formDataTrain.leaveSalary) //
formData.append("leaveTotal", formDataTrain.leaveTotal) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
formDataTrain.leaveTotal = newLeaveTotal
console.log("test")
}
@ -100,7 +165,7 @@ function updateLeaveTotal() {
* แปลงตัวเลขเงินเดือน
*/
const formattedSalary = computed(() => {
return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
})
</script>
@ -113,7 +178,7 @@ const formattedSalary = computed(() => {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.leaveWrote"
v-model="formDataTrain.leaveWrote"
ref="leaveWroteRef"
class="col-12 col-sm-12"
bg-color="white"
@ -124,7 +189,16 @@ const formattedSalary = computed(() => {
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<datepicker
v-model="formDataTrain.leaveStartDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -141,7 +215,7 @@ const formattedSalary = computed(() => {
lazy-rules
hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
<template v-slot:prepend>
@ -152,17 +226,17 @@ const formattedSalary = computed(() => {
</datepicker>
<datepicker
v-model="formData.leaveEndDate"
v-model="formDataTrain.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
@update:model-value="updateLeaveTotal"
week-start="0"
:readonly="!formData.leaveStartDate"
:readonly="!formDataTrain.leaveStartDate"
:locale="'th'"
:enableTimePicker="false"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formDataTrain.leaveStartDate ? new Date(formDataTrain.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -180,8 +254,8 @@ const formattedSalary = computed(() => {
bg-color="white"
hide-bottom-space
:label="`${'ลาถึงวันที่'}`"
:readonly="!formData.leaveStartDate"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:readonly="!formDataTrain.leaveStartDate"
:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -198,7 +272,7 @@ const formattedSalary = computed(() => {
bg-color="white"
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataTrain.leaveTotal"
label="มีกำหนด"
readonly
hide-bottom-space
@ -207,7 +281,7 @@ const formattedSalary = computed(() => {
<div class="full-width">
<div class="q-col-gutter-sm row">
<datepicker
v-model="formData.dateGovernment"
v-model="formDataTrain.leavegovernmentDate"
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -225,7 +299,7 @@ const formattedSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="dateGovernmentRef"
ref="leavegovernmentDateRef"
class="full-width datepicker"
outlined
readonly
@ -233,7 +307,7 @@ const formattedSalary = computed(() => {
dense
hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`"
:model-value="formData.dateGovernment != null ? date2Thai(formData.dateGovernment) : null"
:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
>
<template v-slot:prepend>
@ -244,7 +318,7 @@ const formattedSalary = computed(() => {
</datepicker>
<datepicker
v-model="formData.birthday"
v-model="formDataTrain.leavebirthDate"
class="col-12 col-md-3 col-sm-6"
menu-class-name="modalfix"
autoApply
@ -262,7 +336,7 @@ const formattedSalary = computed(() => {
</template>
<template #trigger>
<q-input
ref="birthdayRef"
ref="leavebirthDateRef"
class="full-width datepicker"
bg-color="white"
outlined
@ -270,7 +344,7 @@ const formattedSalary = computed(() => {
readonly
hide-bottom-space
:label="`${'วันเดือนปีเกิด'}`"
:model-value="formData.birthday != null ? date2Thai(formData.birthday) : null"
:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
<template v-slot:prepend>
@ -282,14 +356,14 @@ const formattedSalary = computed(() => {
<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
<q-input v-model="formData.salaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
</div>
</div>
<div class="full-width">
<div class="q-col-gutter-sm row">
<q-input
v-model="formData.studyDayTrainingSubject"
v-model="formDataTrain.studyDayTrainingSubject"
class="col-12 col-sm-6 col-md-4"
ref="studyDayTrainingSubjectRef"
bg-color="white"
@ -301,7 +375,7 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.studyDayTrainingName"
v-model="formDataTrain.studyDayTrainingName"
ref="studyDayTrainingNameRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -313,7 +387,7 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.studyDayCountry"
v-model="formDataTrain.studyDayCountry"
ref="studyDayCountryRef"
class="col-12 col-sm-6 col-md-4"
dense
@ -325,7 +399,7 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.studyDayScholarship"
v-model="formDataTrain.studyDayScholarship"
ref="studyDayScholarshipRef"
class="col-12 col-sm-6 col-md-4"
bg-color="white"
@ -337,7 +411,7 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.leaveNumber"
v-model="formDataTrain.leaveNumber"
class="col-12 col-sm-6 col-md-4"
ref="leaveNumberRef"
dense
@ -351,7 +425,7 @@ const formattedSalary = computed(() => {
/>
<q-input
v-model="formData.leaveAddress"
v-model="formDataTrain.leaveAddress"
ref="leaveAddressRef"
class="col-12"
bg-color="white"
@ -364,10 +438,10 @@ const formattedSalary = computed(() => {
</div>
</div>
<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>

112
src/modules/05_leave/componenst/Forms/11_WorkInternationalForm.vue
View file

@ -3,11 +3,17 @@ import { ref, reactive, watch } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, notifyError } = mixin
const { date2Thai, dialogConfirm, notifyError, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
const router = useRouter()
const isSave = ref<boolean>(false)
/** รับ props มาจากหน้าหลัก */
@ -23,7 +29,8 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({
const formDataWorkInternational = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
@ -51,15 +58,17 @@ const FormRef: FormRef = {
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
formData.leaveDraftDocument = props.data.leaveDraftDocument
formDataWorkInternational.leaveWrote = props.data.leaveWrote
formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
formDataWorkInternational.leaveDetail = props.data.leaveDetail
formDataWorkInternational.leaveDocument = props.data.leaveDocument
formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const nameFileDraft = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
@ -80,9 +89,53 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataWorkInternational.leaveDocument[0].type,
})
const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
type: formDataWorkInternational.leaveDraftDocument[0].type,
})
formData.append("leaveDocument", newFile) //
formData.append("leaveDraftDocument", newFileDraft) //
formData.append("type", formDataWorkInternational.type) //
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
@ -101,7 +154,7 @@ function onValidate() {
for="leaveWroteRef"
dense
outlined
v-model="formData.leaveWrote"
v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -110,7 +163,7 @@ function onValidate() {
<datepicker
class="col-12 col-md-6 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'"
hide-bottom-space
autoApply
@ -135,7 +188,7 @@ function onValidate() {
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -149,15 +202,15 @@ function onValidate() {
<datepicker
class="col-12 col-md-6 col-sm-6"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formDataWorkInternational.leaveStartDate"
:min-date="formDataWorkInternational.leaveStartDate ? new Date(formDataWorkInternational.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -173,9 +226,9 @@ function onValidate() {
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.leaveStartDate"
:readonly="!formDataWorkInternational.leaveStartDate"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -192,7 +245,7 @@ function onValidate() {
ref="leaveTotalRef"
for="leaveTotalRef"
type="number"
v-model="formData.leaveTotal"
v-model="formDataWorkInternational.leaveTotal"
label="จำนวนวันที่ลา"
readonly
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
@ -207,12 +260,23 @@ function onValidate() {
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataWorkInternational.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file ref="fileRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataWorkInternational.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -224,7 +288,7 @@ function onValidate() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}
@ -238,7 +302,7 @@ function onValidate() {
</div>
</q-card>
<div v-if="formData.leaveWrote && formData.leaveEndDate && formData.leaveStartDate" class="q-mt-md">
<div v-if="formDataWorkInternational.leaveWrote && formDataWorkInternational.leaveEndDate && formDataWorkInternational.leaveStartDate" class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
@ -254,7 +318,7 @@ function onValidate() {
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="formData.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -262,7 +326,7 @@ function onValidate() {
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formData.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
<q-btn v-if="formDataWorkInternational.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
</div>
</div>
</q-card>

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

@ -2,9 +2,17 @@
import { ref, reactive, watch, computed, onMounted } from "vue"
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useQuasar } from "quasar"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, arabicNumberToText, calculateDurationYmd } = mixin
const router = useRouter()
const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, success, messageError } = mixin
const edit = ref<boolean>(true)
/** รับ props มาจากหน้าหลัก */
@ -20,29 +28,30 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataFollowSpouse = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveTotal: "", //จำนวนวันลา
salaryText: 25000,
leaveSalaryText: 25000,
leaveSalary: 25000, //เงินเดือนปัจจุบัน
coupleDayName: "", //ชื่อคู่สมรส
coupleDayPosition: "", //ตำแหน่งคู่สมรส
coupleDayLevel: "", //ระดับคู่สมรส
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
followHistoryCountry: "", //ประวัติการลาติดตามคู่สมรส
followHistoryTime: "",
followHistoryStart: null,
followHistoryEnd: null,
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
followHistoryTime: "0 วัน",
followHistoryStart: new Date(),
followHistoryEnd: new Date(),
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
leaveDocument: [], //เอกสารปะกอบ
})
/** แปลงตัวแปร Salary */
const formattSalaryText = arabicNumberToText(formData.salaryText)
const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
const formattSalary = computed(() => {
return formData.leaveSalary !== null ? formData.leaveSalary.toLocaleString("th-TH") : ""
return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
})
/** ตัวแปร ref สำหรับแสดง validate */
@ -86,15 +95,16 @@ const FormRef: FormRef = {
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
// console.log("data==>", props.data)
formData.leaveWrote = props.data.leaveWrote
formData.leaveStartDate = props.data.leaveStartDate
formData.leaveEndDate = props.data.leaveEndDate
formData.leaveTotal = props.data.leaveTotal
formData.leaveDetail = props.data.leaveDetail
formData.leaveDocument = props.data.leaveDocument
formDataFollowSpouse.leaveWrote = props.data.leaveWrote
formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
formDataFollowSpouse.leaveTotal = props.data.leaveTotal
formDataFollowSpouse.leaveDetail = props.data.leaveDetail
formDataFollowSpouse.leaveDocument = props.data.leaveDocument
})
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
@ -115,16 +125,66 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataFollowSpouse.leaveDocument.slice(0, formDataFollowSpouse.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataFollowSpouse.leaveDocument[0].type,
})
formData.append("leaveDocument", newFile) //
formData.append("type", formDataFollowSpouse.type) //
formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
/**
* function อัพเดทค่า LeaveTotal
*/
function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd(formData.leaveStartDate, formData.leaveEndDate)
formData.leaveTotal = newLeaveTotal
const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
formDataFollowSpouse.leaveTotal = newLeaveTotal
console.log("test")
}
</script>
@ -145,7 +205,7 @@ function updateLeaveTotal() {
hide-bottom-space
bg-color="white"
outlined
v-model="formData.leaveWrote"
v-model="formDataFollowSpouse.leaveWrote"
label="เขียนที่"
:readonly="!edit"
:rules="[val => !!val || `${'เขียนที่'}`]"
@ -153,7 +213,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveStartDate"
v-model="formDataFollowSpouse.leaveStartDate"
:locale="'th'"
autoApply
hide-bottom-space
@ -178,7 +238,7 @@ function updateLeaveTotal() {
bg-color="white"
:readonly="!edit"
class="full-width datepicker"
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -192,7 +252,7 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-4 col-sm-12"
menu-class-name="modalfix"
v-model="formData.leaveEndDate"
v-model="formDataFollowSpouse.leaveEndDate"
:locale="'th'"
autoApply
borderless
@ -200,8 +260,8 @@ function updateLeaveTotal() {
:enableTimePicker="false"
week-start="0"
@update:model-value="updateLeaveTotal"
:readonly="!formData.leaveStartDate"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:readonly="!formDataFollowSpouse.leaveStartDate"
:min-date="formDataFollowSpouse.leaveStartDate ? new Date(formDataFollowSpouse.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -217,9 +277,9 @@ function updateLeaveTotal() {
for="leaveEndDateRef"
hide-bottom-space
bg-color="white"
:readonly="!formData.leaveStartDate"
:readonly="!formDataFollowSpouse.leaveStartDate"
class="full-width datepicker"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -236,7 +296,7 @@ function updateLeaveTotal() {
outlined
ref="leaveTotalRef"
for="leaveTotalRef"
v-model="formData.leaveTotal"
v-model="formDataFollowSpouse.leaveTotal"
label="เป็นเวลา"
readonly
hide-bottom-space
@ -264,7 +324,7 @@ function updateLeaveTotal() {
for="leaveSalaryRef"
dense
outlined
v-model="formattSalaryText"
v-model="formattleaveSalaryText"
label="เงินเดือนปัจจุบัน"
readonly
/>
@ -279,7 +339,7 @@ function updateLeaveTotal() {
dense
bg-color="white"
outlined
v-model="formData.coupleDayName"
v-model="formDataFollowSpouse.coupleDayName"
label="ชื่อคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
@ -294,7 +354,7 @@ function updateLeaveTotal() {
dense
outlined
bg-color="white"
v-model="formData.coupleDayPosition"
v-model="formDataFollowSpouse.coupleDayPosition"
label="ตำแหน่งคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
@ -309,7 +369,7 @@ function updateLeaveTotal() {
hide-bottom-space
outlined
bg-color="white"
v-model="formData.coupleDayLevel"
v-model="formDataFollowSpouse.coupleDayLevel"
label="ระดับคู่สมรส"
:readonly="!edit"
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
@ -324,7 +384,7 @@ function updateLeaveTotal() {
dense
outlined
bg-color="white"
v-model="formData.coupleDayLevelCountry"
v-model="formDataFollowSpouse.coupleDayLevelCountry"
label="ไปปฏิบัติราชการ ณ ประเทศ"
:readonly="!edit"
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
@ -334,14 +394,14 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.followHistoryStart"
v-model="formDataFollowSpouse.followHistoryStart"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="formData.followHistoryStart !== null"
:readonly="formDataFollowSpouse.followHistoryStart !== null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -356,10 +416,10 @@ function updateLeaveTotal() {
ref="followHistoryStartRef"
for="followHistoryStartRef"
hide-bottom-space
:readonly="formData.followHistoryStart !== null"
:readonly="formDataFollowSpouse.followHistoryStart !== null"
bg-color="white"
class="full-width datepicker"
:model-value="formData.followHistoryStart != null ? date2Thai(formData.followHistoryStart) : null"
:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
:label="`${'ตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
>
@ -372,14 +432,14 @@ function updateLeaveTotal() {
<datepicker
class="col-12 col-md-3 col-sm-12"
menu-class-name="modalfix"
v-model="formData.followHistoryEnd"
v-model="formDataFollowSpouse.followHistoryEnd"
:locale="'th'"
autoApply
hide-bottom-space
borderless
:enableTimePicker="false"
week-start="0"
:readonly="formData.followHistoryEnd !== null"
:readonly="formDataFollowSpouse.followHistoryEnd !== null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -395,9 +455,9 @@ function updateLeaveTotal() {
for="followHistoryEndRef"
hide-bottom-space
bg-color="white"
:readonly="formData.followHistoryEnd !== null"
:readonly="formDataFollowSpouse.followHistoryEnd !== null"
class="full-width datepicker"
:model-value="formData.followHistoryEnd != null ? date2Thai(formData.followHistoryEnd) : null"
:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
:label="`${'ถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
>
@ -415,21 +475,21 @@ function updateLeaveTotal() {
bg-color="white"
ref="followHistoryCountryRef"
for="followHistoryCountryRef"
v-model="formData.followHistoryCountry"
v-model="formDataFollowSpouse.followHistoryCountry"
label="ประเทศ"
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
:readonly="formData.followHistoryCountry !== ''"
:readonly="formDataFollowSpouse.followHistoryCountry !== ''"
/>
<q-input
class="col-12 col-md-3 col-sm-12"
dense
outlined
:readonly="formData.followHistoryTime !== ''"
:readonly="formDataFollowSpouse.followHistoryTime !== ''"
hide-bottom-space
bg-color="white"
ref="followHistoryTimeRef"
for="followHistoryTimeRef"
v-model="formData.followHistoryTime"
v-model="formDataFollowSpouse.followHistoryTime"
label="เป็นเวลา"
/>
@ -442,12 +502,23 @@ function updateLeaveTotal() {
outlined
ref="leaveDetailRef"
for="leaveDetailRef"
v-model="formData.leaveDetail"
v-model="formDataFollowSpouse.leaveDetail"
label="รายละเอียด"
:readonly="!edit"
/>
<q-file ref="fileRef" bg-color="white" v-model="formData.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips multiple class="q-pl-sm col-12">
<q-file
ref="fileRef"
bg-color="white"
v-model="formDataFollowSpouse.leaveDocument"
@added="fileUploadDoc"
dense
label="เอกสารประกอบ"
outlined
use-chips
multiple
class="q-pl-sm col-12"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -459,7 +530,7 @@ function updateLeaveTotal() {
</div>
<q-card bordered flat class="full-width">
<q-list separator>
<q-item v-for="(file, index) in formData.leaveDocument" :key="index" class="q-my-xs">
<q-item v-for="(file, index) in formDataFollowSpouse.leaveDocument" :key="index" class="q-my-xs">
<q-item-section>
<q-item-label class="full-width ellipsis">
{{ file.name }}

107
src/modules/05_leave/componenst/Forms/13_RehabilitationForm.vue
View file

@ -3,11 +3,16 @@ import { reactive, ref, computed } from "vue"
import { useCounterMixin } from "@/stores/mixin"
import { useQuasar } from "quasar"
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
import { useLeaveStore } from "@/modules/05_leave/store"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter } from "vue-router"
const dataStore = useLeaveStore()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, notifyError } = mixin
const { date2Thai, dialogConfirm, notifyError, dateToISO, success, messageError } = mixin
const router = useRouter()
const edit = ref<boolean>(true)
const isSave = ref<boolean>(false)
const files = ref<any>(null)
@ -31,7 +36,8 @@ const props = defineProps({
})
/** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<any>({
const formDataRehabilitation = reactive<any>({
type: dataStore.typeId,
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
@ -60,15 +66,63 @@ function onValidate() {
}
}
if (hasError.every(result => result === true)) {
props.onSubmit(formData)
onSubmit()
}
}
/** ฟังก์ชั่น อัปโหลด
* consolelog ไว้ก่อน
*/
function upLoadFile() {
console.log("upload", filesUpload.value)
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>("")
const nameFileDraft = ref<string>("")
const fileDocDataUpload = ref<File[]>([])
const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => {
fileDocDataUpload.value.push(file)
})
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
await saveFormData()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log("save")
}
async function saveFormData() {
const formData = new FormData()
const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
const newFile = new File(blob, nameFile.value, {
type: formDataRehabilitation.leaveDocument[0].type,
})
const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
type: formDataRehabilitation.leaveDraftDocument[0].type,
})
formData.append("leaveDocument", newFile) //
formData.append("leaveDraftDocument", newFileDraft) //
formData.append("type", formDataRehabilitation.type) //
formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
await http
.post(config.API.leaveUser(), formData)
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
router.push(`/leave`)
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
@ -81,7 +135,7 @@ function upLoadFile() {
<q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm">
<q-input
v-model="formData.leaveWrote"
v-model="formDataRehabilitation.leaveWrote"
class="col-12 col-sm-12"
ref="leaveWroteRef"
dense
@ -92,7 +146,16 @@ function upLoadFile() {
:rules="[val => !!val || `${'เขียนที่'}`]"
/>
<datepicker v-model="formData.leaveStartDate" class="col-12 col-md-4 col-sm-6" menu-class-name="modalfix" autoApply borderless week-start="0" :enableTimePicker="false" :locale="'th'">
<datepicker
v-model="formDataRehabilitation.leaveStartDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:enableTimePicker="false"
:locale="'th'"
>
<template #year="{ year }">
{{ year + 543 }}
</template>
@ -108,7 +171,7 @@ function upLoadFile() {
dense
lazy-rules
hide-bottom-space
:model-value="formData.leaveStartDate != null ? date2Thai(formData.leaveStartDate) : null"
:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
:label="`${'ลาตั้งแต่วันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
>
@ -120,16 +183,16 @@ function upLoadFile() {
</datepicker>
<datepicker
v-model="formData.leaveEndDate"
v-model="formDataRehabilitation.leaveEndDate"
class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix"
autoApply
borderless
week-start="0"
:locale="'th'"
:readonly="!formData.leaveStartDate"
:readonly="!formDataRehabilitation.leaveStartDate"
:enableTimePicker="false"
:min-date="formData.leaveStartDate ? new Date(formData.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
:min-date="formDataRehabilitation.leaveStartDate ? new Date(formDataRehabilitation.leaveStartDate.getTime() + 24 * 60 * 60 * 1000) : null"
>
<template #year="{ year }">
{{ year + 543 }}
@ -146,8 +209,8 @@ function upLoadFile() {
lazy-rules
bg-color="white"
hide-bottom-space
:readonly="!formData.leaveStartDate"
:model-value="formData.leaveEndDate != null ? date2Thai(formData.leaveEndDate) : null"
:readonly="!formDataRehabilitation.leaveStartDate"
:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
:label="`${'ลาถึงวันที่'}`"
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
>
@ -158,10 +221,10 @@ function upLoadFile() {
</template>
</datepicker>
<q-input v-model="formData.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
<div class="col-12 col-sm-6">
<q-file v-model="formData.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -189,7 +252,7 @@ function upLoadFile() {
</div>
</q-card>
<div v-if="formData.leaveWrote && formData.leaveStartDate && formData.leaveEndDate" class="q-mt-md">
<div v-if="formDataRehabilitation.leaveWrote && formDataRehabilitation.leaveStartDate && formDataRehabilitation.leaveEndDate" class="q-mt-md">
<div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
@ -205,7 +268,7 @@ function upLoadFile() {
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
<div class="column q-mx-xs">
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
<q-file v-model="formData.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<q-file v-model="formDataRehabilitation.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
@ -213,7 +276,7 @@ function upLoadFile() {
</div>
</div>
<div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formData.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="upLoadFile"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
<q-btn v-if="formDataRehabilitation.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
</div>
</div>
</q-card>

13
src/modules/05_leave/componenst/Forms/Form.vue
View file

@ -39,19 +39,8 @@ const formData = reactive<FormData>({
})
onMounted(async () => {
await FetchProfile()
// await FetchProfile()
})
async function FetchProfile() {
await http
.post(config.API.leaveProfile(), { type: "08db80fe-919b-4439-856f-3fdb86ff99f9" })
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
})
.catch((e: any) => {
messageError($q, e)
})
}
</script>
<template>
<q-card bordered class="q-pa-md bg-grey-1">

55
src/modules/05_leave/interface/index/main.ts
View file

@ -1,40 +1,41 @@
import type { S } from "@fullcalendar/core/internal-common";
import type { S } from "@fullcalendar/core/internal-common"
interface OptionData {
id: string | undefined;
name: string | undefined;
id: string | undefined
name: string | undefined
code: string | undefined
}
interface FormLeavetMainData {
type: string;
numDate: string;
extend: string;
use: string;
numAll: string;
numDone: string;
numNot: string;
numCancel: string;
type: string
numDate: string
extend: string
use: string
numAll: string
numDone: string
numNot: string
numCancel: string
}
interface formListLeaveData {
no: string;
date: string | null;
type: string;
status: string;
year: string;
no: string
date: string | null
type: string
status: string
year: string
}
interface TypeLeave {
code: string;
createdAt: Date;
createdFullName: string;
createdUserId: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: Date | null;
limit: number;
name: string;
code: string
createdAt: Date
createdFullName: string
createdUserId: string
id: string
lastUpdateFullName: string
lastUpdateUserId: string
lastUpdatedAt: Date | null
limit: number
name: string
}
export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave };
export type { OptionData, FormLeavetMainData, formListLeaveData, TypeLeave }

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

@ -12,8 +12,8 @@ interface FormData {
}
interface OrdinationForm {
leaveWrote: object | null
government: object | null
birthday: object | null
leavegovernmentDate: object | null
leavebirthDate: object | null
leaveStartDate: object | null
leaveEndDate: object | null
totalLeave: object | null
@ -27,7 +27,7 @@ interface OrdinationForm {
}
interface HajiForm {
leaveWrote: object | null
government: object | null
leavegovernmentDate: object | null
leaveStartDate: object | null
leaveEndDate: object | null
[key: string]: any
@ -47,8 +47,8 @@ interface MilitaryForm {
interface studyDaySubjectForm {
leaveStartDate: object | null
leaveEndDate: object | null
birthday: object | null
dateGovernment: object | null
leavebirthDate: object | null
leavegovernmentDate: object | null
leaveSalary: object | null
leaveNumber: object | null
leaveAddress: object | null
@ -63,8 +63,8 @@ interface studyDaySubjectForm {
interface TrainForm {
leaveStartDate: object | null
leaveEndDate: object | null
birthday: object | null
dateGovernment: object | null
leavebirthDate: object | null
leavegovernmentDate: object | null
leaveNumber: object | null
leaveAddress: object | null
studyDayScholarship: object | null

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

@ -6,7 +6,6 @@ interface FormData {
leaveStartDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
leaveEndDate: Date | null //*วัน เดือน ปีสิ้นสุดลา
leaveTotal: string //จำนวนวันลา
contractTel: string //หมายเลขโทรศัพท์ที่ติดต่อได้
leaveNumber: string //หมายเลขที่ติดต่อขณะลา
leaveDetail: string //รายละเอียดการลา
leaveAddress: string //สถานที่ติดต่อขณะลา
@ -22,7 +21,6 @@ interface FormRef {
restDayCurrentTotal: object | null //วันที่คลอด
leaveEndDate: object | null //*วัน เดือน ปีสิ้นสุดลา
leaveTotal: object | null //จำนวนวันลา
contractTel: object | null //หมายเลขโทรศัพท์ที่ติดต่อได้
leaveNumber: object | null //หมายเลขที่ติดต่อขณะลา
leaveDetail: object | null //รายละเอียดการลา
leaveAddress: object | null //สถานที่ติดต่อขณะลา

1
src/modules/05_leave/interface/request/WorkInternationalForm.ts
View file

@ -1,4 +1,5 @@
interface FormData {
type: string
leaveWrote: string //เขียนที่***
leaveStartDate: Date | null //*วัน เดือน ปีเริ่มต้นลา
leaveEndDate: Date | null //*วัน เดือน ปีสิ้นสุดลา

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

@ -1,257 +1,263 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { defineStore } from "pinia"
import { ref } from "vue"
import { useQuasar } from "quasar"
import type { QTableProps } from "quasar";
import type {
OptionData,
TypeLeave,
} from "@/modules/05_leave/interface/index/main";
import type {
ListLeave,
ListLeaveTable,
} from "@/modules/05_leave/interface/response/leave";
import type { QTableProps } from "quasar"
import type { OptionData, TypeLeave } from "@/modules/05_leave/interface/index/main"
import type { ListLeave, ListLeaveTable } from "@/modules/05_leave/interface/response/leave"
import http from "@/plugins/http"
import config from "@/app.config"
import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin();
const { date2Thai } = mixin;
import { useCounterMixin } from "@/stores/mixin"
const mixin = useCounterMixin()
const { date2Thai, messageError } = mixin
const $q = useQuasar()
export const useLeaveStore = defineStore("Leave", () => {
const tabValue = ref<string>("calendar");
const typeLeave = ref<string | undefined>("");
const tabValue = ref<string>("calendar")
const typeLeave = ref<string | undefined>("")
const LeaveType = ref<string | null>("0");
const LeaveStatus = ref<string | null>("0");
const fiscalYearyear = ref<Number | null>(new Date().getFullYear());
const rows = ref<ListLeaveTable[]>([]);
const LeaveType = ref<string | null>("0")
const LeaveStatus = ref<string | null>("0")
const fiscalYearyear = ref<Number | null>(new Date().getFullYear())
const rows = ref<ListLeaveTable[]>([])
/**
* function เรียกข้อมูลรายการลา Table
* @param data ข้อมูลรายการลา Table
*/
async function fetchListLeave(data: ListLeave[]) {
let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
id: e.id,
leaveTypeName: e.leaveTypeName,
leaveTypeId: e.leaveTypeId,
fullName: e.fullName,
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
status: e.status,
statusConvert: convertStatud(e.status),
isDelete: e.isDelete,
}));
rows.value = datalist;
}
/**
* function เรียกข้อมูลรายการลา Table
* @param data ข้อมูลรายการลา Table
*/
async function fetchListLeave(data: ListLeave[]) {
let datalist: ListLeaveTable[] = data.map((e: ListLeave) => ({
id: e.id,
leaveTypeName: e.leaveTypeName,
leaveTypeId: e.leaveTypeId,
fullName: e.fullName,
dateSendLeave: e.dateSendLeave && date2Thai(e.dateSendLeave),
status: e.status,
statusConvert: convertStatud(e.status),
isDelete: e.isDelete,
}))
rows.value = datalist
}
function convertStatud(val: string) {
switch (val) {
case "NEW":
return "ใหม่";
case "PENDING":
return "กำลังดำเนินการ";
case "APPROVE":
return "อนุมัติ";
case "REJECT":
return "ไม่อนุมัติ";
case "DELETE":
return "ยกเลิก";
}
}
function convertStatud(val: string) {
switch (val) {
case "NEW":
return "ใหม่"
case "PENDING":
return "กำลังดำเนินการ"
case "APPROVE":
return "อนุมัติ"
case "REJECT":
return "ไม่อนุมัติ"
case "DELETE":
return "ยกเลิก"
}
}
/** ประเภทการลา */
const typeOptions = ref<OptionData[]>([]);
const typeOptionsMain = ref<OptionData[]>([]);
/**
* function เรียกข้อมูลประเภทการลา
* @param data ประเภทการลา
*/
async function fetchLeaveType(data: TypeLeave[]) {
typeOptionsMain.value = [
{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
];
const optionType = data.map((e: TypeLeave) => ({
id: e.id,
name: e.name,
}));
typeOptionsMain.value.push(...optionType);
typeOptions.value = typeOptionsMain.value;
}
/** ประเภทการลา */
const typeOptions = ref<OptionData[]>([])
const typeId = ref<string | undefined>("")
const typeOptionsMain = ref<OptionData[]>([])
const typeOptionsAdd = ref<OptionData[]>([])
/** รายการข้อมูลประเภทใบลา */
const options = ref<OptionData[]>([])
/**
* function เรียกข้อมูลประเภทการลา
* @param data ประเภทการลา
*/
async function fetchLeaveType(data: TypeLeave[]) {
typeOptionsMain.value = [{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด", code: "LV-000" }]
const optionType = data.map((e: TypeLeave) => ({
id: e.id,
name: e.name,
code: e.code,
}))
typeOptionsMain.value.push(...optionType)
typeOptions.value = typeOptionsMain.value
console.log(typeOptions.value)
/** สถานะของการลา */
const statusOptionsMain = ref<OptionData[]>([
{ id: "ALL", name: "ทั้งหมด" },
{ id: "NEW", name: "ใหม่" },
{ id: "PENDING", name: "กำลังดำเนินการ" },
{ id: "APPROVE", name: "อนุมัติ " },
{ id: "REJECT", name: "ไม่อนุมัติ" },
{ id: "DELETE", name: "ยกเลิก" },
]);
const statusOptions = ref<OptionData[]>(statusOptionsMain.value);
typeOptionsAdd.value.push(...optionType)
options.value = typeOptionsAdd.value
console.log(options.value)
}
/**
* function ต้นหาข้อมูลของ Option
* @param val ค่าที่ต้องการฟิลเตอร์
* @param update อัพเดทค่า
* @param refData ดาต้าที่ต้องการฟิลเตอร์
*/
function filterOption(val: any, update: Function, refData: string) {
switch (refData) {
case "LeaveTypeOption":
update(() => {
typeOptions.value = typeOptionsMain.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
break;
case "LeaveStatusOption":
update(() => {
statusOptions.value = statusOptionsMain.value.filter(
(v: any) => v.name.indexOf(val) > -1
);
});
break;
default:
break;
}
}
/** สถานะของการลา */
const statusOptionsMain = ref<any[]>([
{ id: "ALL", name: "ทั้งหมด" },
{ id: "NEW ", name: "ใหม่" },
{ id: "PENDING ", name: "กำลังดำเนินการ" },
{ id: "APPROVE ", name: "อนุมัติ " },
{ id: "REJECT ", name: "ไม่อนุมัติ" },
{ id: "DELETE ", name: "ยกเลิก" },
])
const statusOptions = ref<any[]>(statusOptionsMain.value)
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
const optionsSpecific = ref([
{ id: "s0", name: "ลาไปศึกษาต่อ" },
{ id: "s1", name: "ลาฝึกอบรม" },
{ id: "s2", name: "ลาปฎิบัติการวิจัย" },
{ id: "s3", name: "ลาดูงาน" },
]);
/**
* function ต้นหาข้อมูลของ Option
* @param val ค่าที่ต้องการฟิลเตอร์
* @param update อัพเดทค่า
* @param refData ดาต้าที่ต้องการฟิลเตอร์
*/
function filterOption(val: any, update: Function, refData: string) {
switch (refData) {
case "LeaveTypeOption":
update(() => {
typeOptions.value = typeOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
})
break
case "LeaveStatusOption":
update(() => {
statusOptions.value = statusOptionsMain.value.filter((v: any) => v.name.indexOf(val) > -1)
})
break
default:
break
}
}
/** รายการประเภทการลาของ ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน*/
const optionsSpecific = ref([
{ id: "s0", name: "ลาไปศึกษาต่อ", code: "s0" },
{ id: "s1", name: "ลาฝึกอบรม", code: "s1" },
{ id: "s2", name: "ลาปฎิบัติการวิจัย", code: "s2" },
{ id: "s3", name: "ลาดูงาน", code: "s3" },
])
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
const optionsOrdination = ref([
{ id: "0", name: "ลาอุปสมบท" },
{ id: "1", name: "ลาประกอบพิธีฮัจย์ฯ" },
]);
/** รายการประเภทการลาของ ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ*/
const optionsOrdination = ref([
{ id: "0", name: "ลาอุปสมบท", code: "0" },
{ id: "1", name: "ลาประกอบพิธีฮัจย์ฯ", code: "1" },
])
/** รายการข้อมูลประเภทใบลา */
const options = ref<OptionData[]>([
{ id: "1", name: "ลาป่วย" },
{ id: "2", name: "ลากิจส่วนตัว" },
{ id: "3", name: "ลาคลอดบุตร" },
{ id: "4", name: "ลาไปช่วยเหลือภริยาที่คลอดบุตร" },
{ id: "5", name: "ลาพักผ่อน" },
{ id: "6", name: "ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ" },
{ id: "7", name: "ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล" },
{ id: "8", name: "ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน" },
{ id: "9", name: "ลาไปปฎิบัติงานในองค์การระหว่างประเทศ" },
{ id: "10", name: "ลาติดตามคู่สมรส" },
{ id: "11", name: "ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ" },
]);
/** data table filter & column ของรายการลา */
const visibleColumns = ref<String[]>(["no", "leaveTypeName", "dateSendLeave", "status"])
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;",
},
{
name: "leaveTypeName",
align: "left",
label: "ประเภทการลา",
sortable: true,
field: "leaveTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "dateSendLeave",
align: "left",
label: "วันที่ยื่นใบลา",
sortable: true,
field: "dateSendLeave",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:10%;",
},
])
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
* @param item ประเภทแบบฟอร์ม
* @param subitem ประเภทแบบฟอร์มย่อย
*/
function typeConvert(item: string, subitem: any) {
// console.log('first',item)
if (item !== "LV-006" && item !== "LV-008") {
typeLeave.value = convertSubtitle(item)
} else if (item === "LV-006") {
typeLeave.value = convertSubtitleInfo(subitem)
} else if (item === "LV-008") {
typeLeave.value = convertSubtitleInfo2(subitem)
}
typeId.value = convertId(item)
console.log(typeId.value)
}
/** data table filter & column ของรายการลา */
const visibleColumns = ref<String[]>([
"no",
"leaveTypeName",
"dateSendLeave",
"status",
]);
const columns = ref<QTableProps["columns"]>([
{
name: "no",
align: "left",
label: "ลำดับ",
sortable: true,
field: "no",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:5%;",
},
{
name: "leaveTypeName",
align: "left",
label: "ประเภทการลา",
sortable: true,
field: "leaveTypeName",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "dateSendLeave",
align: "left",
label: "วันที่ยื่นใบลา",
sortable: true,
field: "dateSendLeave",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:15%;",
},
{
name: "status",
align: "left",
label: "สถานะ",
sortable: true,
field: "status",
headerStyle: "font-size: 14px",
style: "font-size: 14px; width:10%;",
},
]);
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertSubtitle(val: string) {
return options.value.find(x => x.id == val)?.name
}
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา
* @param item ประเภทแบบฟอร์ม
* @param subitem ประเภทแบบฟอร์มย่อย
*/
function typeConvert(item: string, subitem: any) {
// console.log('first',item)
if (item !== "6" && item !== "8") {
typeLeave.value = convertSubtitle(item);
} else if (item === "6") {
typeLeave.value = convertSubtitleInfo(subitem);
} else if (item === "8") {
typeLeave.value = convertSubtitleInfo2(subitem);
}
}
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertSubtitleInfo(val: string) {
return optionsOrdination.value.find(x => x.id == val)?.name
}
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertSubtitle(val: string) {
return options.value.find((x) => x.id == val)?.name;
}
/**
*ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertSubtitleInfo2(val: string) {
return optionsSpecific.value.find(x => x.id == val)?.name
}
/**
*ฟังก์ชั่นแปลงประเภทแบบฟอร์มลา ลาอุปสมบท/ลาประกอบพิธีฮัจย์ ย่อย
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertSubtitleInfo(val: string) {
return optionsOrdination.value.find((x) => x.id == val)?.name;
}
/**
*ฟังก์ชั่นแปลง id
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertId(val: string) {
return options.value.find(x => x.code == val)?.id
}
/**
*ฟังก์ชั่นแปลง ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน
* @param val ค่า string
* @returns ส่งค่าที่แปลงแล้ว
*/
function convertSubtitleInfo2(val: string) {
return optionsSpecific.value.find((x) => x.id == val)?.name;
}
async function fetchProfile() {
console.log("profile")
await http
.post(config.API.leaveProfile(), { type: typeId.value })
.then((res: any) => {
const data = res.data.result
console.log(data.va)
})
.catch((e: any) => {
messageError($q, e)
})
}
return {
tabValue,
typeOptions,
optionsSpecific,
statusOptions,
return {
tabValue,
typeOptions,
optionsSpecific,
statusOptions,
visibleColumns,
columns,
rows,
LeaveType,
LeaveStatus,
visibleColumns,
columns,
rows,
LeaveType,
LeaveStatus,
fiscalYearyear,
options,
optionsOrdination,
typeConvert,
typeLeave,
fiscalYearyear,
options,
optionsOrdination,
typeConvert,
typeLeave,
typeId,
fetchListLeave,
fetchLeaveType,
filterOption,
};
});
fetchListLeave,
fetchLeaveType,
filterOption,
fetchProfile,
}
})

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

@ -23,6 +23,7 @@ import type { QForm } from "quasar"
import { useCounterMixin } from "@/stores/mixin"
const dataStore = useLeaveStore()
const { fetchLeaveType } = dataStore
const mixin = useCounterMixin()
const { date2Thai, dialogConfirm, success, messageError } = mixin
const router = useRouter()
@ -33,7 +34,9 @@ const $q = useQuasar()
const model = ref<string>("")
const modelSpecific = ref<string>("")
// onMounted(() => {});
onMounted(async () => {
await fectOptionType()
})
const saveAbsence = () => {
$q.dialog({
@ -47,9 +50,9 @@ const saveAbsence = () => {
})
.onOk(() => {
// createFormresign()
if (model.value !== "7") {
if (model.value !== "LV-007") {
console.log(1)
} else if (model.value === "7") {
} else if (model.value === "LV-007") {
console.log(2)
}
router.push(`/leave`)
@ -58,69 +61,107 @@ const saveAbsence = () => {
.onDismiss(() => {})
}
/** ฟังก์ชั่น บันทึก */
const onSubmit = async (formData: any) => {
const onSubmit = async () => {
dialogConfirm(
$q,
async () => {
console.log(formData)
saveformdata(formData)
await saveformdata()
},
"ยืนยันการยื่นใบลา",
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
)
console.log(formData)
console.log(formData.leaveWrote)
console.log("save")
}
async function saveformdata(formData: any) {
async function fectOptionType() {
await http
.get(config.API.leaveType())
.then(async res => {
const data = res.data.result
await fetchLeaveType(data)
})
.catch(err => {
messageError($q, err)
})
}
async function FetchCheck(formData: any) {
await http
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, leaveStartDate: formData.leaveStartDate ?? null, leaveEndDate: formData.leaveEndDate ?? null })
.then((res: any) => {
const data = res.data.result
formData.dateStart = data.isLeave
formData.subject = data.sumDateWork
formData.leaveabsentDaySummon = data.totalDate
})
.catch((e: any) => {
messageError($q, e)
})
}
async function saveformdata() {
const formData = new FormData()
// if (formDataLeave.value.leaveDocument > 0) {
// const blob = formDataLeave.value.leaveDocument.slice(0, formDataLeave.value.leaveDocument[0].size)
// const newFile = new File(blob, nameFile.value, {
// type: formDataLeave.value.leaveDocument[0].type,
// })
// formData.append("leaveDocument", newFile)
// }
// if (formDataLeave.value.leaveDraftDocument > 0) {
// const blob = formDataLeave.value.leaveDraftDocument.slice(0, formDataLeave.value.leaveDraftDocument[0].size)
// const newFileDraft = new File(blob, nameFile.value, {
// type: formDataLeave.value.leaveDraftDocument[0].type,
// })
// formData.append("leaveDraftDocument", newFileDraft)
// }
formData.append("type", "6d8430db-da6d-4234-8499-6c98ea1de1cd")
// formData.append("leaveStartDate", formDataLeave.value.leaveStartDate)
// formData.append("leaveEndDate", formDataLeave.value.leaveEndDate)
// formData.append("leaveWrote", formDataLeave.value.leaveWrote)
// formData.append("leaveAddress", formDataLeave.value.leaveAddress)
// formData.append("leaveNumber", formDataLeave.value.leaveNumber)
// formData.append("leaveDetail", formDataLeave.value.leaveDetail)
// formData.append("leaveSalaryText", formDataLeave.value.leaveSalaryText)
// formData.append("wifeDayName", formDataLeave.value.wifeDayName)
// formData.append("wifeDayDateBorn", formDataLeave.value.wifeDayDateBorn)
// formData.append("restDayOldTotal", formDataLeave.value.restDayOldTotal)
// formData.append("restDayCurrentTotal", formDataLeave.value.restDayCurrentTotal)
// formData.append("ordainDayStatus", formDataLeave.value.ordainDayStatus)
// formData.append("ordainDayLocationName", formDataLeave.value.ordainDayLocationName)
// formData.append("ordainDayLocationAddress", formDataLeave.value.ordainDayLocationAddress)
// formData.append("ordainDayLocationNumber", formDataLeave.value.ordainDayLocationNumber)
// formData.append("ordainDayOrdination", formDataLeave.value.ordainDayOrdination)
// formData.append("ordainDayBuddhistLentName", formDataLeave.value.ordainDayBuddhistLentName)
// formData.append("ordainDayBuddhistLentAddress", formDataLeave.value.ordainDayBuddhistLentAddress)
// formData.append("hajjDayStatus", formDataLeave.value.hajjDayStatus)
// formData.append("absentDaySummon", formDataLeave.value.absentDaySummon)
// formData.append("absentDayLocation", formDataLeave.value.absentDayLocation)
// formData.append("absentDayRegistorDate", formDataLeave.value.absentDayRegistorDate)
// formData.append("absentDayGetIn", formDataLeave.value.absentDayGetIn)
// formData.append("absentDayAt", formDataLeave.value.absentDayAt)
// formData.append("studyDaySubject", formDataLeave.value.studyDaySubject)
// formData.append("studyDayDegreeLevel", formDataLeave.value.studyDayDegreeLevel)
// formData.append("studyDayUniversityName", formDataLeave.value.studyDayUniversityName)
// formData.append("studyDayTrainingSubject", formDataLeave.value.studyDayTrainingSubject)
// formData.append("studyDayTrainingName", formDataLeave.value.studyDayTrainingName)
// formData.append("studyDayCountry", formDataLeave.value.studyDayCountry)
// formData.append("studyDayScholarship", formDataLeave.value.studyDayScholarship)
// formData.append("coupleDayName", formDataLeave.value.coupleDayName)
// formData.append("coupleDayPosition", formDataLeave.value.coupleDayPosition)
// formData.append("coupleDayLevel", formDataLeave.value.coupleDayLevel)
// formData.append("coupleDayLevelCountry", formDataLeave.value.coupleDayLevelCountry)
// formData.append("coupleDayCountryHistory", formDataLeave.value.coupleDayCountryHistory)
// formData.append("coupleDayTotalHistory", formDataLeave.value.coupleDayTotalHistory)
// formData.append("coupleDayStartDateHistory", formDataLeave.value.coupleDayStartDateHistory)
// formData.append("coupleDayEndDateHistory", formDataLeave.value.coupleDayEndDateHistory)
// formData.append("coupleDaySumTotalHistory", formDataLeave.value.coupleDaySumTotalHistory)
// formData.append("leaveSalary", formDataLeave.value.leaveSalary)
await http
.post(config.API.leaveUser(), {
type: formData.id ?? null,
leaveStartDate: formData.leaveStartDate ?? null,
leaveEndDate: formData.leaveEndDate ?? null,
leaveWrote: formData.leaveWrote ?? null ?? null, //เขียนที่
leaveAddress: formData.leaveAddress ?? null, //สถานที่ติดต่อขณะลา
leaveNumber: formData.leaveNumber ?? null, //หมายเลขที่ติดต่อขณะลา
leaveDetail: formData.leaveDetail ?? null, //รายละเอียดการลา
leaveDocument: formData.leaveDocument ?? null, //อัปโหลดเอกสารประกอบรายละเอียด
leaveDraftDocument: formData.leaveDraftDocument ?? null, //อัปโหลดแบบฟอร์มการลา
leaveSalaryText: formData.leaveSalaryText ?? null, //เงินเดือนปัจจุบัน (เขียนเป็นคำอ่าน)
wifeDayName: formData.wifeDayName ?? null, //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
wifeDayDateBorn: formData.wifeDayDateBorn ?? null, //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
restDayOldTotal: formData.restDayOldTotal ?? null, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
restDayCurrentTotal: formData.restDayCurrentTotal ?? null, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
ordainDayStatus: formData.ordainDayStatus ?? null, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
ordainDayLocationName: formData.ordainDayLocationName ?? null, //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
ordainDayLocationAddress: formData.ordainDayLocationAddress ?? null, //สถานที่บวช ที่อยู่(ลาอุปสมบท)
ordainDayLocationNumber: formData.ordainDayLocationNumber ?? null, //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
ordainDayOrdination: formData.ordainDayOrdination ?? null, //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
ordainDayBuddhistLentName: formData.ordainDayBuddhistLentName ?? null, //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
ordainDayBuddhistLentAddress: formData.ordainDayBuddhistLentAddress ?? null, //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
hajjDayStatus: formData.hajjDayStatus ?? null, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
absentDaySummon: formData.absentDaySummon ?? null, //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayLocation: formData.absentDayLocation ?? null, //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayRegistorDate: formData.absentDayRegistorDate ?? null, //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayGetIn: formData.absentDayGetIn ?? null, //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayAt: formData.absentDayAt ?? null, //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
studyDaySubject: formData.studyDaySubject ?? null, //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayDegreeLevel: formData.studyDayDegreeLevel ?? null, //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayUniversityName: formData.studyDayUniversityName ?? null, //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayTrainingSubject: formData.studyDayTrainingSubject ?? null, //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayTrainingName: formData.studyDayTrainingName ?? null, //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayCountry: formData.studyDayCountry ?? null, //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayScholarship: formData.studyDayScholarship ?? null, //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
coupleDayName: formData.coupleDayName ?? null, //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
coupleDayPosition: formData.coupleDayPosition ?? null, //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
coupleDayLevel: formData.coupleDayLevel ?? null, //ระดับคู่สมรส (ลาติดตามคู่สมรส)
coupleDayLevelCountry: formData.coupleDayLevelCountry ?? null, //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
coupleDayCountryHistory: formData.coupleDayCountryHistory ?? null, //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
coupleDayTotalHistory: formData.coupleDayTotalHistory ?? null, //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
coupleDayStartDateHistory: formData.coupleDayStartDateHistory ?? null, //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
coupleDayEndDateHistory: formData.coupleDayEndDateHistory ?? null, //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
coupleDaySumTotalHistory: formData.coupleDaySumTotalHistory ?? null, //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
leaveSalary: formData.leaveSalary,
formData,
})
.then((res: any) => {
success($q, "บันทึกสำเร็จ")
@ -156,22 +197,22 @@ async function saveformdata(formData: any) {
outlined
v-model="model"
:options="dataStore.options"
option-value="id"
option-value="code"
option-label="name"
emit-value
map-options
prefix="ประเภทใบลา :"
@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = '')"
@update:model-value="dataStore.typeConvert(model, null), (modelSpecific = ''), dataStore.fetchProfile()"
/>
</div>
<div class="row q-mt-sm">
<div class="col-12 col-sm-6 col-md-3" v-if="model === '6' || model === '8'">
<div class="col-12 col-sm-6 col-md-3" v-if="model === 'LV-006' || model === 'LV-008'">
<q-select
dense
outlined
v-model="modelSpecific"
:options="model === '6' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
option-value="id"
:options="model === 'LV-006' ? dataStore.optionsOrdination : dataStore.optionsSpecific"
option-value="code"
option-label="name"
emit-value
map-options
@ -193,18 +234,18 @@ async function saveformdata(formData: any) {
</div>
</div>
<div v-if="model" class="col-12">
<SickForm :on-submit="onSubmit" v-if="model === '1' || model === '2'" />
<FormBirth :on-submit="onSubmit" v-if="model === '3'" />
<HelpWifeBirthForm :on-submit="onSubmit" v-if="model === '4'" />
<VacationForm :on-submit="onSubmit" v-if="model === '5'" />
<OrdinationForm :on-submit="onSubmit" v-if="model === '6' && modelSpecific === '0'" />
<HajjForm :on-submit="onSubmit" v-if="model === '6' && modelSpecific === '1'" />
<MilitaryForm :on-submit="onSubmit" v-if="model === '7'" style="width: 100%" />
<StudyForm :on-submit="onSubmit" v-if="model === '8' && modelSpecific === 's0'" style="width: 100%" />
<TrainForm :on-submit="onSubmit" v-if="model === '8' && modelSpecific != 's0' && modelSpecific != ''" />
<WorkInternationalForm :on-submit="onSubmit" v-if="model === '9'" />
<FollowSpouseForm :on-submit="onSubmit" v-if="model === '10'" />
<RehabilitationForm :on-submit="onSubmit" v-if="model === '11'" />
<SickForm :on-submit="onSubmit" v-if="model === 'LV-001' || model === 'LV-002'" />
<FormBirth :on-submit="onSubmit" v-if="model === 'LV-003'" />
<HelpWifeBirthForm :on-submit="onSubmit" v-if="model === 'LV-004'" />
<VacationForm :on-submit="onSubmit" v-if="model === 'LV-005'" />
<OrdinationForm :on-submit="onSubmit" v-if="model === 'LV-006' && modelSpecific === '0'" />
<HajjForm :on-submit="onSubmit" v-if="model === 'LV-006' && modelSpecific === '1'" />
<MilitaryForm :on-submit="onSubmit" v-if="model === 'LV-007'" style="width: 100%" />
<StudyForm :on-submit="onSubmit" v-if="model === 'LV-008' && modelSpecific === 's0'" style="width: 100%" />
<TrainForm :on-submit="onSubmit" v-if="model === 'LV-008' && modelSpecific != 's0' && modelSpecific != ''" />
<WorkInternationalForm :on-submit="onSubmit" v-if="model === 'LV-009'" />
<FollowSpouseForm :on-submit="onSubmit" v-if="model === 'LV-010'" />
<RehabilitationForm :on-submit="onSubmit" v-if="model === 'LV-011'" />
</div>
</div>
</q-card>