ต่อ api เพิ่ม form การลา
This commit is contained in:
AnandaTon
parent
8b7d83e1d7
commit
26667a4d22
20 changed files with 1555 additions and 750 deletions
|
|
@ -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 }}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue