แกไข ชื่อ file
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6269464231
commit
6f5a408f9e
52 changed files with 132 additions and 64 deletions
423
src/modules/05_leave/components/Forms/01_SickForm.vue
Normal file
423
src/modules/05_leave/components/Forms/01_SickForm.vue
Normal file
|
|
@ -0,0 +1,423 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed } from "vue"
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataSick = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
halfDay: "day",
|
||||
leaveTotal: "",
|
||||
leaveLast: null,
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const halfDayRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const leaveLastRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
halfDay: halfDayRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
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) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||
*/
|
||||
function resetDate() {
|
||||
if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
|
||||
formDataSick.leaveStartDate = null
|
||||
formDataSick.leaveEndDate = null
|
||||
}
|
||||
console.log("testnull")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataSick.leaveDocument.length > 0) {
|
||||
const blob = formDataSick.leaveDocument[0].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)
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataSick.leaveStartDate ?? null, EndLeaveDate: formDataSick.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
|
||||
*/
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
|
||||
if (conditionHalfDay) {
|
||||
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
|
||||
formDataSick.leaveTotal = "0.5 วัน "
|
||||
} else {
|
||||
formDataSick.leaveTotal = null
|
||||
}
|
||||
return conditionHalfDay
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataSick.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<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="formDataSick.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
@update:model-value="FetchCheck()"
|
||||
:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="isReadOnly"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataSick.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataSick.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataSick.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataSick.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
v-model="formDataSick.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
bg-color="white"
|
||||
class="col-12 q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<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 }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
389
src/modules/05_leave/components/Forms/03_Birth.vue
Normal file
389
src/modules/05_leave/components/Forms/03_Birth.vue
Normal file
|
|
@ -0,0 +1,389 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { 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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataBirth = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
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) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataBirth.leaveLast = data.sumDateWork
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataBirth.leaveDocument.length > 0) {
|
||||
const blob = formDataBirth.leaveDocument[0].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)
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์มลาคลอดบุตร-->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
@update:model-value="FetchCheck()"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
:min-date="formDataBirth.leaveStartDate ? new Date(formDataBirth.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
bg-color="white"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataBirth.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataBirth.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<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 }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
445
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
Normal file
445
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
Normal file
|
|
@ -0,0 +1,445 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataHelpWife = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
wifeDayName: "",
|
||||
wifeDayDateBorn: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
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 leaveTotalRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
wifeDayName: wifeDayNameRef,
|
||||
wifeDayDateBorn: wifeDayDateBornRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
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) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
|
||||
formDataHelpWife.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, leaveStartDate: formDataHelpWife.leaveStartDate ?? null, leaveEndDate: formDataHelpWife.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataHelpWife.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataHelpWife.leaveDocument.length > 0) {
|
||||
const blob = formDataHelpWife.leaveDocument[0].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("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>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
:min-date="formDataHelpWife.leaveStartDate ? new Date(formDataHelpWife.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHelpWife.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="wifeDayNameRef"
|
||||
for="wifeDayNameRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="formDataHelpWife.wifeDayName"
|
||||
label="ชื่อภรรยา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.wifeDayDateBorn"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="wifeDayDateBornRef"
|
||||
for="wifeDayDateBornRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
|
||||
:label="`${'วันที่คลอด'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataHelpWife.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataHelpWife.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataHelpWife.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<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 }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
439
src/modules/05_leave/components/Forms/05_VacationForm.vue
Normal file
439
src/modules/05_leave/components/Forms/05_VacationForm.vue
Normal file
|
|
@ -0,0 +1,439 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const $q = useQuasar()
|
||||
const dataStore = useLeaveStore()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataVacation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
halfDay: "day",
|
||||
restDayOldTotal: "",
|
||||
restDayCurrentTotal: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const restDayOldTotalRef = ref<object | null>(null)
|
||||
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 leaveTotalRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
halfDay: halfDayRef,
|
||||
restDayOldTotal: restDayOldTotalRef,
|
||||
restDayCurrentTotal: restDayCurrentTotalRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
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) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
|
||||
console.log("save")
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataVacation.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataVacation.leaveDocument.length > 0) {
|
||||
const blob = formDataVacation.leaveDocument[0].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)
|
||||
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 (formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon") {
|
||||
formDataVacation.leaveStartDate = null
|
||||
formDataVacation.leaveEndDate = null
|
||||
}
|
||||
console.log("testnull")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionHalfDay = formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon"
|
||||
if (conditionHalfDay) {
|
||||
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
|
||||
formDataVacation.leaveTotal = "0.5 วัน "
|
||||
} else {
|
||||
formDataVacation.leaveTotal = null
|
||||
}
|
||||
return conditionHalfDay
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataVacation.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<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"
|
||||
ref="restDayOldTotalRef"
|
||||
for="restDayOldTotalRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
readonly
|
||||
outlined
|
||||
v-model="dataStore.restDayTotalOld"
|
||||
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
ref="restDayCurrentTotalRef"
|
||||
for="restDayCurrentTotalRef"
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="dataStore.leaveRemain"
|
||||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="FetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
:min-date="formDataVacation.leaveStartDate ? new Date(formDataVacation.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:readonly="isReadOnly"
|
||||
:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataVacation.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataVacation.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataVacation.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataVacation.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<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 }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
543
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
Normal file
543
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
Normal file
|
|
@ -0,0 +1,543 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const ordainDayLocationNumberRef = ref<object | null>(null)
|
||||
const leaveWroteRef = 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)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const ordainDayLocationAddressRef = ref<object | null>(null)
|
||||
const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
|
||||
const ordainDayLocationNameRef = ref<object | null>(null)
|
||||
const ordainDayBuddhistLentNameRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataOrdination = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: new Date(),
|
||||
leavebirthDate: new Date(),
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: new Date(),
|
||||
ordainDayOrdination: new Date(),
|
||||
ordainDayLocationName: "",
|
||||
ordainDayLocationNumber: null,
|
||||
ordainDayLocationAddress: "",
|
||||
ordainDayBuddhistLentName: "",
|
||||
ordainDayBuddhistLentAddress: "",
|
||||
ordainDayStatus: "true",
|
||||
leaveDocument: null,
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: OrdinationForm = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leavebirthDate: leavebirthDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
totalLeave: totalLeaveRef,
|
||||
ordainDayOrdination: ordainDayOrdinationRef,
|
||||
ordainDayLocationName: ordainDayLocationNameRef,
|
||||
ordainDayLocationNumber: ordainDayLocationNumberRef,
|
||||
ordainDayLocationAddress: ordainDayLocationAddressRef,
|
||||
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
|
||||
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
|
||||
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(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
|
||||
// console.log("test")
|
||||
// })
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataOrdination.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataOrdination.leaveDocument.length > 0) {
|
||||
const blob = formDataOrdination.leaveDocument[0].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, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
|
||||
formDataOrdination.leaveTotal = newLeaveTotal
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์ม ลาอุปสมบท -->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataOrdination.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataOrdination.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataOrdination.leaveStartDate ? new Date(formDataOrdination.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataOrdination.leaveStartDate"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataOrdination.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leavegovernmentDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="leavegovernmentDateRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leavebirthDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="leavebirthDateRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
|
||||
<div class="col-12">
|
||||
<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="formDataOrdination.ordainDayOrdination"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
full-width
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="ordainDayOrdinationRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
|
||||
:label="`${'วันอุปสมบท'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
hide-bottom-space
|
||||
ref="ordainDayLocationNameRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
full-width
|
||||
v-model="formDataOrdination.ordainDayLocationName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="ordainDayLocationNumberRef"
|
||||
dense
|
||||
full-width
|
||||
outlined
|
||||
v-model="formDataOrdination.ordainDayLocationNumber"
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
ref="ordainDayLocationAddressRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="formDataOrdination.ordainDayLocationAddress"
|
||||
label="ที่อยู่"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
/>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
ref="ordainDayBuddhistLentNameRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
v-model="formDataOrdination.ordainDayBuddhistLentName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12"
|
||||
dense
|
||||
ref="ordainDayBuddhistLentAddressRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataOrdination.ordainDayBuddhistLentAddress"
|
||||
label="ที่อยู่"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataOrdination.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<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>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
352
src/modules/05_leave/components/Forms/07_HajjForm.vue
Normal file
352
src/modules/05_leave/components/Forms/07_HajjForm.vue
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const router = useRouter()
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = 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)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataHaji = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: new Date(),
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: new Date(),
|
||||
hajjDayStatus: "true",
|
||||
leaveDocument: null,
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: HajiForm = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
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 = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataHaji.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataHaji.leaveDocument.length > 0) {
|
||||
const blob = formDataHaji.leaveDocument[0].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(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
|
||||
formDataHaji.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataHaji.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>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
: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>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal"
|
||||
:readonly="!formDataHaji.leaveStartDate"
|
||||
:min-date="formDataHaji.leaveStartDate ? new Date(formDataHaji.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
:readonly="!formDataHaji.leaveStartDate"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
@update:model-value="FetchCheck()"
|
||||
:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<datepicker
|
||||
v-model="formDataHaji.leavegovernmentDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
|
||||
<div class="col-12">
|
||||
<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="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="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>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
410
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
Normal file
410
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const router = useRouter()
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const absentDaySummonRef = ref<object | null>(null)
|
||||
const absentDayLocationRef = ref<object | null>(null)
|
||||
const absentDayRegistorDateRef = ref<object | null>(null)
|
||||
const absentDayGetInRef = ref<object | null>(null)
|
||||
const absentDayAtRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataMilitary = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: 0,
|
||||
leaveDocument: null,
|
||||
leaveWrote: "",
|
||||
absentDaySummon: "",
|
||||
absentDayLocation: "",
|
||||
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,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
absentDaySummon: absentDaySummonRef,
|
||||
absentDayLocation: absentDayLocationRef,
|
||||
absentDayRegistorDate: absentDayRegistorDateRef,
|
||||
absentDayGetIn: absentDayGetInRef,
|
||||
absentDayAt: absentDayAtRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataMilitary.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataMilitary.leaveDocument.length > 0) {
|
||||
const blob = formDataMilitary.leaveDocument[0].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)
|
||||
|
||||
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(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
|
||||
formDataMilitary.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataMilitary.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataMilitary.leaveStartDate"
|
||||
:min-date="formDataMilitary.leaveStartDate ? new Date(formDataMilitary.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataMilitary.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataMilitary.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
ref="absentDaySummonRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDaySummon"
|
||||
label="ได้รับหมายเรียกของ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
ref="atRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayLocation"
|
||||
label="ที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.absentDayRegistorDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="absentDayRegistorDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
ref="absentDayGetInRef"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayGetIn"
|
||||
label="ให้เข้ารับการ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="absentDayAtRef"
|
||||
v-model="formDataMilitary.absentDayAt"
|
||||
label="ณ ที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
526
src/modules/05_leave/components/Forms/09_StudyForm.vue
Normal file
526
src/modules/05_leave/components/Forms/09_StudyForm.vue
Normal file
|
|
@ -0,0 +1,526 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = 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)
|
||||
const studyDayScholarshipRef = ref<object | null>(null)
|
||||
const studyDayCountryRef = ref<object | null>(null)
|
||||
const studyDayUniversityNameRef = ref<object | null>(null)
|
||||
const studyDayDegreeLevelRef = ref<object | null>(null)
|
||||
const studyDaySubjectRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataStudy = reactive<any>({
|
||||
type: dataStore.typeId, //
|
||||
leaveWrote: "", //
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leavebirthDate: new Date(),
|
||||
leavegovernmentDate: new Date(),
|
||||
leaveSalary: 10000,
|
||||
leaveSalaryText: arabicNumberToText(10000),
|
||||
leaveNumber: "",
|
||||
leaveAddress: "test",
|
||||
studyDayScholarship: "",
|
||||
studyDayCountry: "",
|
||||
studyDayUniversityName: "", //
|
||||
studyDayDegreeLevel: "", //
|
||||
studyDaySubject: "", //
|
||||
leaveDocument: "", //
|
||||
leaveDetail: "",
|
||||
leaveTotal: "",
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: studyDaySubjectForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leavebirthDate: leavebirthDateRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveSalary: leaveSalaryRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
studyDayScholarship: studyDayScholarshipRef,
|
||||
studyDayCountry: studyDayCountryRef,
|
||||
studyDayUniversityName: studyDayUniversityNameRef,
|
||||
studyDayDegreeLevel: studyDayDegreeLevelRef,
|
||||
studyDaySubject: studyDaySubjectRef,
|
||||
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 = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataStudy.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataStudy.leaveDocument.length > 0) {
|
||||
const blob = formDataStudy.leaveDocument[0].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) //
|
||||
|
||||
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(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
|
||||
formDataStudy.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลงตัวเลขเงินเดือน
|
||||
*/
|
||||
const formattedleaveSalary = computed(() => {
|
||||
return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataStudy.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataStudy.leaveStartDate ? new Date(formDataStudy.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataStudy.leaveStartDate"
|
||||
:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataStudy.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataStudy.leavegovernmentDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leavebirthDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<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="dataStore.salaryText"
|
||||
ref="leaveSalaryRef"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayUniversityName"
|
||||
ref="studyDayUniversityNameRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสถานศึกษา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayDegreeLevel"
|
||||
ref="studyDayDegreeLevelRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ชั้นปริญญา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDaySubject"
|
||||
ref="studyDaySubjectRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ศึกษาวิชา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveNumber"
|
||||
ref="leaveNumberRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveAddress"
|
||||
ref="leaveAddressRef"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="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>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
504
src/modules/05_leave/components/Forms/10_TrainForm.vue
Normal file
504
src/modules/05_leave/components/Forms/10_TrainForm.vue
Normal file
|
|
@ -0,0 +1,504 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataTrain = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leavebirthDate: new Date(),
|
||||
leavegovernmentDate: new Date(),
|
||||
leaveSalary: 10000,
|
||||
leaveSalaryText: arabicNumberToText(10000),
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
studyDayScholarship: "",
|
||||
studyDayCountry: "",
|
||||
studyDayTrainingSubject: "",
|
||||
studyDayTrainingName: "",
|
||||
leaveDocument: "",
|
||||
leaveDetail: "",
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = 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)
|
||||
const studyDayCountryRef = ref<object | null>(null)
|
||||
const studyDayTrainingSubjectRef = ref<object | null>(null)
|
||||
const studyDayTrainingNameRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: TrainForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leavebirthDate: leavebirthDateRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
studyDayScholarship: studyDayScholarshipRef,
|
||||
studyDayCountry: studyDayCountryRef,
|
||||
studyDayTrainingSubject: studyDayTrainingSubjectRef,
|
||||
studyDayTrainingName: studyDayTrainingNameRef,
|
||||
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 = []
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataTrain.leaveStartDate ?? null, EndLeaveDate: formDataTrain.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataTrain.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataTrain.leaveDocument.length > 0) {
|
||||
const blob = formDataTrain.leaveDocument[0].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(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
|
||||
formDataTrain.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลงตัวเลขเงินเดือน
|
||||
*/
|
||||
const formattedSalary = computed(() => {
|
||||
return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataTrain.leaveStartDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataTrain.leaveStartDate ? new Date(formDataTrain.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataTrain.leaveStartDate"
|
||||
:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataTrain.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavegovernmentDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavebirthDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<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="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="formDataTrain.studyDayTrainingSubject"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="studyDayTrainingSubjectRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้าน/หลักสูตร"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingName"
|
||||
ref="studyDayTrainingNameRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ณ สถานที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveNumber"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="leaveNumberRef"
|
||||
dense
|
||||
outlined
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveAddress"
|
||||
ref="leaveAddressRef"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import type { 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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const router = useRouter()
|
||||
const isSave = ref<boolean>(false)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataWorkInternational = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
leaveDraftDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
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) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataWorkInternational.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
//
|
||||
if (formDataWorkInternational.leaveDocument.length > 0) {
|
||||
const blob = formDataWorkInternational.leaveDocument[0].slice(0, formDataWorkInternational.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataWorkInternational.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
//
|
||||
if (formDataWorkInternational.leaveDraftDocument.length > 0) {
|
||||
const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
|
||||
const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
|
||||
type: formDataWorkInternational.leaveDraftDocument[0].type,
|
||||
})
|
||||
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>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="FetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataWorkInternational.leaveStartDate"
|
||||
:min-date="formDataWorkInternational.leaveStartDate ? new Date(formDataWorkInternational.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataWorkInternational.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <q-input
|
||||
class="col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
v-model="formDataWorkInternational.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/> -->
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<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 }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||
<div class="column q-mx-xs">
|
||||
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
|
||||
</div>
|
||||
</div>
|
||||
<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="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1 self-end q-mb-sm">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
579
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
Normal file
579
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
Normal file
|
|
@ -0,0 +1,579 @@
|
|||
<script setup lang="ts">
|
||||
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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataFollowSpouse = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "", //จำนวนวันลา
|
||||
leaveSalaryText: 25000,
|
||||
leaveSalary: 25000, //เงินเดือนปัจจุบัน
|
||||
coupleDayName: "", //ชื่อคู่สมรส
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส
|
||||
coupleDayLevel: "", //ระดับคู่สมรส
|
||||
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
|
||||
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryTime: "0 วัน",
|
||||
followHistoryStart: new Date(),
|
||||
followHistoryEnd: new Date(),
|
||||
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
|
||||
leaveDocument: [], //เอกสารปะกอบ
|
||||
})
|
||||
|
||||
/** แปลงตัวแปร Salary */
|
||||
const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
|
||||
const formattSalary = computed(() => {
|
||||
return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveSalaryRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const coupleDayNameRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const coupleDayPositionRef = ref<object | null>(null)
|
||||
const coupleDayLevelRef = ref<object | null>(null)
|
||||
const coupleDayLevelCountryRef = ref<object | null>(null)
|
||||
const followHistoryCountryRef = ref<object | null>(null)
|
||||
const followHistoryTimeRef = ref<object | null>(null)
|
||||
const followHistoryStartRef = ref<object | null>(null)
|
||||
const followHistoryEndRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef, //เขียนที่***
|
||||
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
|
||||
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
|
||||
leaveTotal: leaveTotalRef, //จำนวนวันลา
|
||||
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
|
||||
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
|
||||
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
|
||||
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
|
||||
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
|
||||
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
|
||||
leaveDetail: leaveDetailRef, //รายละเอียดการลา
|
||||
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
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) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataFollowSpouse.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataFollowSpouse.leaveDocument.length > 0) {
|
||||
const blob = formDataFollowSpouse.leaveDocument[0].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(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
|
||||
formDataFollowSpouse.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataFollowSpouse.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataFollowSpouse.leaveStartDate"
|
||||
:min-date="formDataFollowSpouse.leaveStartDate ? new Date(formDataFollowSpouse.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataFollowSpouse.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataFollowSpouse.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveSalaryRef"
|
||||
for="leaveSalaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formattSalary"
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveSalaryRef"
|
||||
for="leaveSalaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formattleaveSalaryText"
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
hide-bottom-space
|
||||
ref="coupleDayNameRef"
|
||||
for="coupleDayNameRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataFollowSpouse.coupleDayName"
|
||||
label="ชื่อคู่สมรส"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
hide-bottom-space
|
||||
ref="coupleDayPositionRef"
|
||||
for="coupleDayPositionRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.coupleDayPosition"
|
||||
label="ตำแหน่งคู่สมรส"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="coupleDayLevelRef"
|
||||
for="coupleDayLevelRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.coupleDayLevel"
|
||||
label="ระดับคู่สมรส"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="coupleDayLevelCountryRef"
|
||||
for="coupleDayLevelCountryRef"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.coupleDayLevelCountry"
|
||||
label="ไปปฏิบัติราชการ ณ ประเทศ"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.followHistoryStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryStartRef"
|
||||
for="followHistoryStartRef"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
|
||||
:label="`${'ตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.followHistoryEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryEndRef"
|
||||
for="followHistoryEndRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="followHistoryCountryRef"
|
||||
for="followHistoryCountryRef"
|
||||
v-model="formDataFollowSpouse.followHistoryCountry"
|
||||
label="ประเทศ"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
|
||||
readonly
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
:readonly="formDataFollowSpouse.followHistoryTime !== ''"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="followHistoryTimeRef"
|
||||
for="followHistoryTimeRef"
|
||||
v-model="formDataFollowSpouse.followHistoryTime"
|
||||
label="เป็นเวลา"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataFollowSpouse.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<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 }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
322
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
Normal file
322
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } 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"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
|
||||
const router = useRouter()
|
||||
const edit = ref<boolean>(true)
|
||||
const isSave = ref<boolean>(false)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataRehabilitation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDocument: "",
|
||||
leaveDetail: "",
|
||||
leaveDraftDocument: "",
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: RehabilitationForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
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()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null, EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataRehabilitation.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataRehabilitation.leaveDraftDocument.length > 0) {
|
||||
const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
|
||||
const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
|
||||
type: formDataRehabilitation.leaveDraftDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDraftDocument", newFileDraft) //
|
||||
}
|
||||
|
||||
if (formDataRehabilitation.leaveDocument.length > 0) {
|
||||
const blob = formDataRehabilitation.leaveDocument[0].slice(0, formDataRehabilitation.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataRehabilitation.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
} //
|
||||
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>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveWrote"
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate ? new Date(formDataRehabilitation.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||
:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<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="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>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||
<div class="column q-mx-xs">
|
||||
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
|
||||
</div>
|
||||
</div>
|
||||
<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="formDataRehabilitation.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1 self-end q-mb-sm">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
84
src/modules/05_leave/components/Forms/Form.vue
Normal file
84
src/modules/05_leave/components/Forms/Form.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { FormData } 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 $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const dataStore = useLeaveStore()
|
||||
const { date2Thai, success, messageError } = mixin
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
model: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
dateStart: new Date(),
|
||||
subject: "เรื่อง",
|
||||
who: "เรียนผู้ใด",
|
||||
requestName: "ชื่อผู้ยื่น",
|
||||
position: "ตำแหน่ง",
|
||||
level: "ระดับ",
|
||||
ocRequest: "สังกัด",
|
||||
leaveabsentDaySummon: "2",
|
||||
leaveUse: "1",
|
||||
leaveRemaining: "1",
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
// await FetchProfile()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="formData.dateStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
|
||||
:label="`${'วันที่ยื่นใบลา'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="dataStore.typeLeave" label="เรื่อง" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.dear" label="เรียน" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.fullName" label="ชื่อผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionName" label="ตำแหน่งผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionLevelName" label="ระดับผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.organizationName" label="สังกัดผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue