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

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">