เพิ่ม multiple upload ในไฟล์ฟอร์มการลา
เพิ่ม multiple upload
This commit is contained in:
AnandaTon
parent
8bdb84cd95
commit
cf806db19f
24 changed files with 5549 additions and 6303 deletions
|
|
@ -1,511 +1,452 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed, onMounted } 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";
|
||||
import { ref, reactive, watch, computed, onMounted } 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,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails, showLoader, hideLoader } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataSick = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveRange: "ALL",
|
||||
leaveTotal: "",
|
||||
leaveLast: null,
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
});
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveRange: "ALL",
|
||||
leaveTotal: "",
|
||||
leaveLast: null,
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
const leaveDocumentList = ref<any>()
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null);
|
||||
const leaveStartDateRef = ref<object | null>(null);
|
||||
const leaveEndDateRef = ref<object | null>(null);
|
||||
const leaveRangeRef = 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);
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveRangeRef = 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,
|
||||
leaveRange: leaveRangeRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
};
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveRange: leaveRangeRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
async function fileUploadDoc(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||
*/
|
||||
function resetDate() {
|
||||
if (
|
||||
formDataSick.leaveRange === "MORNING" ||
|
||||
formDataSick.leaveRange === "AFTERNOON"
|
||||
) {
|
||||
formDataSick.leaveStartDate = null;
|
||||
formDataSick.leaveEndDate = null;
|
||||
}
|
||||
console.log("testnull");
|
||||
if (formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "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)) {
|
||||
const formData = new FormData();
|
||||
// if (formDataSick.leaveDocument.length > 0) {
|
||||
// const blob = formDataSick.leaveDocument.slice(
|
||||
// 0,
|
||||
// formDataSick.leaveDocument[0].size
|
||||
// );
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataSick.leaveDocument[0].type,
|
||||
// });
|
||||
// formData.append("leaveDocument", newFile);
|
||||
// }
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
|
||||
formData.append("leaveDocument", formDataSick.leaveDocument);
|
||||
formData.append("type", formDataSick.type);
|
||||
formData.append("leaveRange", formDataSick.leaveRange);
|
||||
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);
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
formDataSick.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
// formData.append("leaveDocument", formDataSick.leaveDocument)
|
||||
formData.append("type", formDataSick.type)
|
||||
formData.append("leaveRange", formDataSick.leaveRange)
|
||||
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)
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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);
|
||||
});
|
||||
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 conditionleaveRange =
|
||||
formDataSick.leaveRange === "MORNING" ||
|
||||
formDataSick.leaveRange === "AFTERNOON";
|
||||
if (conditionleaveRange) {
|
||||
formDataSick.leaveEndDate = formDataSick.leaveStartDate; // Set formDataSick.leaveEndDate to null
|
||||
formDataSick.leaveTotal = 0.5;
|
||||
} else {
|
||||
formDataSick.leaveTotal = null;
|
||||
}
|
||||
return conditionleaveRange;
|
||||
});
|
||||
const conditionleaveRange = formDataSick.leaveRange === "MORNING" || formDataSick.leaveRange === "AFTERNOON"
|
||||
if (conditionleaveRange) {
|
||||
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
|
||||
formDataSick.leaveTotal = 0.5
|
||||
} else {
|
||||
formDataSick.leaveTotal = null
|
||||
}
|
||||
return conditionleaveRange
|
||||
})
|
||||
|
||||
function inputEdit(val: boolean) {
|
||||
return {
|
||||
"full-width cursor-pointer ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
};
|
||||
return {
|
||||
"full-width cursor-pointer ": val,
|
||||
"full-width cursor-pointer inputgreen": !val,
|
||||
}
|
||||
}
|
||||
|
||||
function resetEndDate(type: string) {
|
||||
if (type === "day") {
|
||||
formDataSick.EndLeaveDate === null;
|
||||
}
|
||||
if (type === "day") {
|
||||
formDataSick.EndLeaveDate === null
|
||||
}
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataSick.leaveWrote = props.data.leaveWrote;
|
||||
formDataSick.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataSick.leaveEndDate = new Date(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;
|
||||
formDataSick.leaveAddress = props.data.leaveAddress;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
formDataSick.leaveWrote = props.data.leaveWrote
|
||||
formDataSick.leaveStartDate = new Date(props.data.leaveStartDate)
|
||||
formDataSick.leaveEndDate = new Date(props.data.leaveEndDate)
|
||||
formDataSick.contractTel = props.data.contractTel
|
||||
formDataSick.leaveTotal = props.data.leaveTotal
|
||||
formDataSick.leaveNumber = props.data.leaveNumber
|
||||
formDataSick.leaveDetail = props.data.leaveDetail
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
formDataSick.leaveAddress = props.data.leaveAddress
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataSick.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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.leaveRange"
|
||||
val="ALL"
|
||||
label="ลาทั้งวัน"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
val="MORNING"
|
||||
label="ลาครึ่งวันเช้า"
|
||||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataSick.leaveRange"
|
||||
val="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"
|
||||
@update:model-value="formDataSick.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
:model-value="
|
||||
formDataSick.leaveStartDate != null
|
||||
? date2Thai(formDataSick.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
<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="col-12 col-md-4 col-sm-12">
|
||||
<q-radio v-model="formDataSick.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||
<q-radio v-model="formDataSick.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||
<q-radio v-model="formDataSick.leaveRange" val="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"
|
||||
@update:model-value="formDataSick.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
<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="!formDataSick.leaveStartDate"
|
||||
@update:model-value="fetchCheck(), isReadOnly"
|
||||
:min-date="formDataSick.leaveStartDate"
|
||||
>
|
||||
<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="!formDataSick.leaveStartDate"
|
||||
:class="inputEdit(isReadOnly)"
|
||||
: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 cursor-pointer inputgreen"
|
||||
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 || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
<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="!formDataSick.leaveStartDate"
|
||||
@update:model-value="fetchCheck(), isReadOnly"
|
||||
:min-date="formDataSick.leaveStartDate"
|
||||
>
|
||||
<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="!formDataSick.leaveStartDate"
|
||||
:class="inputEdit(isReadOnly)"
|
||||
: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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
v-model="formDataSick.leaveDocument"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
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-input
|
||||
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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">
|
||||
<!-- multiple -->
|
||||
<q-file for="leaveDocumentRef" v-model="formDataSick.leaveDocument" 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 class="col-12" v-if="formDataSick.leaveDocument.length == 0 && !data">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<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 leaveDocumentList" :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 class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,425 +1,415 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } 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";
|
||||
import { ref, reactive, onMounted } 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);
|
||||
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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataBirth = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
});
|
||||
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);
|
||||
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,
|
||||
};
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
async function fileUploadDoc(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
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)) {
|
||||
const formData = new FormData();
|
||||
// if (formDataBirth.leaveDocument.length > 0) {
|
||||
// const blob = formDataBirth.leaveDocument.slice(0, formDataBirth.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataBirth.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// }
|
||||
formData.append("leaveDocument", formDataBirth.leaveDocument);
|
||||
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);
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
formDataBirth.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
// formData.append("leaveDocument", formDataBirth.leaveDocument);
|
||||
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)
|
||||
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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;
|
||||
// formDataBirth.leaveLast = data.sumDateWork
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้");
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
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
|
||||
// formDataBirth.leaveLast = data.sumDateWork
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
const leaveDocumentList = ref<any>()
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (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.leaveAddress = props.data.leaveAddress;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
// formDataBirth.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
});
|
||||
if (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.leaveAddress = props.data.leaveAddress
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
multiple
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length == 0">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div> -->
|
||||
<!-- <div class="col-12" v-if="formDataBirth.leaveDocument.length">
|
||||
<q-card bordered>
|
||||
<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 class="col-12 row" v-if="data">
|
||||
<!-- <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="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</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 leaveDocumentList" :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 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" />
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,510 +1,463 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } 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";
|
||||
import { ref, reactive, onMounted } 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);
|
||||
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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
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: [],
|
||||
});
|
||||
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);
|
||||
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,
|
||||
};
|
||||
leaveWrote: leaveWroteRef,
|
||||
wifeDayName: wifeDayNameRef,
|
||||
wifeDayDateBorn: wifeDayDateBornRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
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)) {
|
||||
const formData = new FormData();
|
||||
// if (formDataHelpWife.leaveDocument.length > 0) {
|
||||
// const blob = formDataHelpWife.leaveDocument.slice(0, formDataHelpWife.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataHelpWife.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// }
|
||||
formData.append("leaveDocument", formDataHelpWife.leaveDocument);
|
||||
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)
|
||||
);
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
formDataHelpWife.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
formData.append("leaveDocument", formDataHelpWife.leaveDocument)
|
||||
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))
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHelpWife.leaveStartDate,
|
||||
formDataHelpWife.leaveEndDate
|
||||
);
|
||||
formDataHelpWife.leaveTotal = newLeaveTotal;
|
||||
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
|
||||
formDataHelpWife.leaveTotal = newLeaveTotal
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function fetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
|
||||
EndLeaveDate: 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);
|
||||
});
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataHelpWife.leaveStartDate ?? null,
|
||||
EndLeaveDate: 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)
|
||||
})
|
||||
}
|
||||
|
||||
const leaveDocumentList = ref<any>()
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
// 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.leaveAddress = props.data.leaveAddress;
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail;
|
||||
// formDataHelpWife.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
// 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.leaveAddress = props.data.leaveAddress
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
|
||||
// formDataHelpWife.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataHelpWife.leaveEndDate = null"
|
||||
>
|
||||
<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>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataHelpWife.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen">
|
||||
<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 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen">
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataHelpWife.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataHelpWife.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
bg-color="white"
|
||||
ref="leaveDocumentRef"
|
||||
v-model="formDataHelpWife.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- multiple -->
|
||||
<q-file bg-color="white" ref="leaveDocumentRef" v-model="formDataHelpWife.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined use-chips class="q-pl-sm col-12">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</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 leaveDocumentList" :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 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>
|
||||
|
||||
<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
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,504 +1,456 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, 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";
|
||||
import { ref, reactive, onMounted, 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);
|
||||
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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataVacation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveRange: "ALL",
|
||||
restDayOldTotal: "",
|
||||
restDayCurrentTotal: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
});
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveRange: "ALL",
|
||||
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 leaveRangeRef = 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);
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const restDayOldTotalRef = ref<object | null>(null)
|
||||
const restDayCurrentTotalRef = ref<object | null>(null)
|
||||
const leaveRangeRef = 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,
|
||||
leaveRange: leaveRangeRef,
|
||||
restDayOldTotal: restDayOldTotalRef,
|
||||
restDayCurrentTotal: restDayCurrentTotalRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
};
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveRange: leaveRangeRef,
|
||||
restDayOldTotal: restDayOldTotalRef,
|
||||
restDayCurrentTotal: restDayCurrentTotalRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
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)) {
|
||||
const formData = new FormData();
|
||||
// if (formDataVacation.leaveDocument.length > 0) {
|
||||
// const blob = formDataVacation.leaveDocument.slice(0, formDataVacation.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataVacation.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// }
|
||||
formData.append("leaveDocument", formDataVacation.leaveDocument);
|
||||
formData.append("type", formDataVacation.type);
|
||||
formData.append("leaveRange", formDataVacation.leaveRange);
|
||||
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);
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
formDataVacation.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
// formData.append("leaveDocument", formDataVacation.leaveDocument);
|
||||
formData.append("type", formDataVacation.type)
|
||||
formData.append("leaveRange", formDataVacation.leaveRange)
|
||||
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)
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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);
|
||||
});
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||
*/
|
||||
function resetDate() {
|
||||
if (
|
||||
formDataVacation.leaveRange === "MORNING" ||
|
||||
formDataVacation.leaveRange === "AFTERNOON"
|
||||
) {
|
||||
formDataVacation.leaveStartDate = null;
|
||||
formDataVacation.leaveEndDate = null;
|
||||
}
|
||||
console.log("testnull");
|
||||
if (formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON") {
|
||||
formDataVacation.leaveStartDate = null
|
||||
formDataVacation.leaveEndDate = null
|
||||
}
|
||||
console.log("testnull")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionleaveRange =
|
||||
formDataVacation.leaveRange === "MORNING" ||
|
||||
formDataVacation.leaveRange === "AFTERNOON";
|
||||
if (conditionleaveRange) {
|
||||
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate; // Set formDataVacation.leaveEndDate to null
|
||||
formDataVacation.leaveTotal = 0.5;
|
||||
} else {
|
||||
formDataVacation.leaveTotal = null;
|
||||
}
|
||||
return conditionleaveRange;
|
||||
});
|
||||
const conditionleaveRange = formDataVacation.leaveRange === "MORNING" || formDataVacation.leaveRange === "AFTERNOON"
|
||||
if (conditionleaveRange) {
|
||||
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
|
||||
formDataVacation.leaveTotal = 0.5
|
||||
} else {
|
||||
formDataVacation.leaveTotal = null
|
||||
}
|
||||
return conditionleaveRange
|
||||
})
|
||||
|
||||
const leaveDocumentList = ref<any>()
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
// 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.leaveAddress = props.data.leaveAddress;
|
||||
formDataVacation.leaveDetail = props.data.leaveDetail;
|
||||
// formDataVacation.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
// 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.leaveAddress = props.data.leaveAddress
|
||||
formDataVacation.leaveDetail = props.data.leaveDetail
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
// formDataVacation.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
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.leaveRange"
|
||||
val="ALL"
|
||||
label="ลาทั้งวัน"
|
||||
checked-icon="task_alt"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataVacation.leaveRange"
|
||||
val="MORNING"
|
||||
label="ลาครึ่งวันเช้า"
|
||||
checked-icon="task_alt"
|
||||
@update:model-value="resetDate"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataVacation.leaveRange"
|
||||
val="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="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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.leaveRange" val="ALL" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||
<q-radio v-model="formDataVacation.leaveRange" val="MORNING" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||
<q-radio v-model="formDataVacation.leaveRange" val="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.restDayCurrentTotal"
|
||||
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.restDayCurrentTotal"
|
||||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataVacation.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataVacation.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataVacation.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataVacation.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
ref="leaveDocumentRef"
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
multiple
|
||||
outlined
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- <div class="col-12" v-if="formDataVacation.leaveDocument.length == 0">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</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 leaveDocumentList" :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>
|
||||
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
ref="leaveDocumentRef"
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
|
||||
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
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,439 +1,366 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } 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";
|
||||
import { reactive, ref, onMounted } 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);
|
||||
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);
|
||||
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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataHaji = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: null,
|
||||
hajjDayStatus: "true",
|
||||
leaveDocument: null,
|
||||
});
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: null,
|
||||
hajjDayStatus: "true",
|
||||
leaveDocument: null,
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: HajiForm = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
};
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
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)) {
|
||||
const formData = new FormData();
|
||||
// if (formDataHaji.leaveDocument.length > 0) {
|
||||
// const blob = formDataHaji.leaveDocument.slice(0, formDataHaji.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataHaji.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// }
|
||||
formData.append("leaveDocument", formDataHaji.leaveDocument);
|
||||
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);
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
formDataHaji.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
// formData.append("leaveDocument", formDataHaji.leaveDocument);
|
||||
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)
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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.leaveTotal = data.totalDate;
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้");
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
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.leaveTotal = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHaji.leaveStartDate,
|
||||
formDataHaji.leaveEndDate
|
||||
);
|
||||
formDataHaji.leaveTotal = newLeaveTotal;
|
||||
const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
|
||||
formDataHaji.leaveTotal = newLeaveTotal
|
||||
}
|
||||
|
||||
const leaveDocumentList = ref<any>()
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate
|
||||
formDataHaji.totalLeave = props.data.totalLeave
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||
>
|
||||
<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>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal"
|
||||
:readonly="!formDataHaji.leaveStartDate"
|
||||
:min-date="formDataHaji.leaveStartDate"
|
||||
>
|
||||
<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>
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal"
|
||||
:readonly="!formDataHaji.leaveStartDate"
|
||||
:min-date="formDataHaji.leaveStartDate"
|
||||
>
|
||||
<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
|
||||
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"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
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(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<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 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"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
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(--black)"> </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>
|
||||
<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 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file v-model="formDataHaji.leaveDocument" multiple bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined hide-bottom-space>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- <div class="col-12" v-if="formDataHaji.leaveDocument.length == 0">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
v-model="formDataHaji.leaveDocument"
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
use-chips
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
outlined
|
||||
|
||||
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
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<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 leaveDocumentList" :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 v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,495 +1,438 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } 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";
|
||||
import { reactive, ref, onMounted } 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);
|
||||
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);
|
||||
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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
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: "",
|
||||
});
|
||||
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 nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
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,
|
||||
};
|
||||
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)) {
|
||||
const formData = new FormData();
|
||||
// if (formDataMilitary.leaveDocument.length > 0) {
|
||||
// const blob = formDataMilitary.leaveDocument.slice(0, formDataMilitary.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataMilitary.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// }
|
||||
formData.append("leaveDocument", formDataMilitary.leaveDocument);
|
||||
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);
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
formDataMilitary.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
// formData.append("leaveDocument", formDataMilitary.leaveDocument);
|
||||
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)
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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.leaveTotal = data.totalDate;
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้");
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
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.leaveTotal = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataMilitary.leaveStartDate,
|
||||
formDataMilitary.leaveEndDate
|
||||
);
|
||||
formDataMilitary.leaveTotal = newLeaveTotal;
|
||||
console.log("test");
|
||||
const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
|
||||
formDataMilitary.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
const leaveDocumentList = ref<any>()
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataMilitary.leaveWrote = props.data.leaveWrote;
|
||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataMilitary.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataMilitary.leaveTotal = props.data.leaveTotal;
|
||||
formDataMilitary.absentDaySummon = props.data.absentDaySummon;
|
||||
formDataMilitary.absentDayLocation = props.data.absentDayLocation;
|
||||
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate;
|
||||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn;
|
||||
formDataMilitary.absentDayAt = props.data.absentDayAt;
|
||||
formDataMilitary.leaveDetail = props.data.leaveDetail;
|
||||
// formDataMilitary.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
formDataMilitary.leaveWrote = props.data.leaveWrote
|
||||
formDataMilitary.leaveStartDate = props.data.leaveStartDate
|
||||
formDataMilitary.leaveEndDate = props.data.leaveEndDate
|
||||
formDataMilitary.leaveTotal = props.data.leaveTotal
|
||||
formDataMilitary.absentDaySummon = props.data.absentDaySummon
|
||||
formDataMilitary.absentDayLocation = props.data.absentDayLocation
|
||||
formDataMilitary.absentDayRegistorDate = props.data.absentDayRegistorDate
|
||||
formDataMilitary.absentDayGetIn = props.data.absentDayGetIn
|
||||
formDataMilitary.absentDayAt = props.data.absentDayAt
|
||||
formDataMilitary.leaveDetail = props.data.leaveDetail
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
// formDataMilitary.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataMilitary.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="formDataMilitary.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="formDataMilitary.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDaySummon"
|
||||
label="ได้รับหมายเรียกของ"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayLocation"
|
||||
label="ที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'กรุณากรอกที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
ref="atRef"
|
||||
class="col-12 col-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
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-sm-6 col-md-4 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.leaveDetail"
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
<q-input class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
v-model="formDataMilitary.leaveDocument"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
bg-color="white"
|
||||
|
||||
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">
|
||||
<!-- multiple -->
|
||||
<q-file v-model="formDataMilitary.leaveDocument" multiple dense label="เอกสารประกอบ" outlined bg-color="white" hide-bottom-space use-chips @added="fileUploadDoc">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="col-12" v-if="formDataMilitary.leaveDocument.length == 0">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<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 leaveDocumentList" :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 v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -1,309 +1,275 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, onMounted } 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";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import { ref, reactive, watch, onMounted } 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"
|
||||
import genReport from "@/plugins/genreport"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
|
||||
mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const router = useRouter();
|
||||
const isSave = ref<boolean>(false);
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = 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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataWorkInternational = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveDocument: null,
|
||||
leaveDraftDocument: [],
|
||||
});
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveDocument: null,
|
||||
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);
|
||||
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,
|
||||
};
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const nameFileDraft = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
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);
|
||||
});
|
||||
};
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
// ถ้า Validate ผ่านให้บันทึกข้อมูล
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
// ถ้า Validate ผ่านให้บันทึกข้อมูล
|
||||
if (hasError.every(result => result === true)) {
|
||||
const formData = new FormData()
|
||||
|
||||
if (formDataWorkInternational.leaveDocument) {
|
||||
// //
|
||||
// if (formDataWorkInternational.leaveDocument.length > 0) {
|
||||
// const blob = formDataWorkInternational.leaveDocument.slice(0, formDataWorkInternational.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataWorkInternational.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// }
|
||||
if (formDataWorkInternational.leaveDocument) {
|
||||
formDataWorkInternational.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
|
||||
formData.append("leaveDocument", formDataWorkInternational.leaveDocument);
|
||||
}
|
||||
// formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
|
||||
}
|
||||
|
||||
if (formDataWorkInternational.leaveDraftDocument) {
|
||||
formData.append(
|
||||
"leaveDraftDocument",
|
||||
formDataWorkInternational.leaveDraftDocument
|
||||
);
|
||||
}
|
||||
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); //
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
if (formDataWorkInternational.leaveDraftDocument) {
|
||||
formData.append("leaveDraftDocument", formDataWorkInternational.leaveDraftDocument)
|
||||
}
|
||||
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) //
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
//download function
|
||||
async function onClickDownloadFile(id: string, fileName: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
showLoader()
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async res => {
|
||||
const data = res.data.result
|
||||
await genReport(data, fileName)
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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);
|
||||
});
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
const leaveDraftDocument = ref<string>();
|
||||
const leaveDocumentList = ref<any>()
|
||||
const leaveDraftDocument = ref<string>()
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote
|
||||
formDataWorkInternational.leaveStartDate = new Date(props.data.leaveStartDate)
|
||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate)
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail
|
||||
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||
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"
|
||||
>
|
||||
<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
|
||||
|
|
@ -316,155 +282,139 @@ onMounted(() => {
|
|||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/> -->
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
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
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveDocument"
|
||||
multiple
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- <div class="col-12" v-if="formDataWorkInternational.leaveDocument.length == 0">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div> -->
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</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, 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 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 leaveDocumentList" :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="data && data.id" 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-sm-3 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="data && data.id" 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-sm-3 q-my-sm">
|
||||
<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="ดาวน์โหลดแบบฟอร์ม"
|
||||
@click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 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"
|
||||
use-chips
|
||||
dense
|
||||
label="อัปโหลดแบบฟอร์ม"
|
||||
outlined
|
||||
bg-color="white"
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<q-file v-model="formDataWorkInternational.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
ดูไฟล์อัปโหลด
|
||||
</div> -->
|
||||
<q-btn
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
:href="leaveDraftDocument"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
||||
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</q-card>
|
||||
</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
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,439 +1,378 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, onMounted } 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";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import { reactive, ref, onMounted } 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"
|
||||
import genReport from "@/plugins/genreport"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore();
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader } =
|
||||
mixin;
|
||||
const router = useRouter();
|
||||
const edit = ref<boolean>(true);
|
||||
const isSave = ref<boolean>(false);
|
||||
const files = ref<any>(null);
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError, showLoader, hideLoader } = 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);
|
||||
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: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataRehabilitation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDocument: "",
|
||||
leaveDetail: "",
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDocument: "",
|
||||
leaveDetail: "",
|
||||
leaveDraftDocument: null,
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: RehabilitationForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
};
|
||||
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)) {
|
||||
const formData = new FormData();
|
||||
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)) {
|
||||
const formData = new FormData()
|
||||
|
||||
if (formDataRehabilitation.leaveDocument) {
|
||||
// if (formDataRehabilitation.leaveDocument.length > 0) {
|
||||
// const blob = formDataRehabilitation.leaveDocument.slice(0, formDataRehabilitation.leaveDocument[0].size)
|
||||
// const newFile = new File(blob, nameFile.value, {
|
||||
// type: formDataRehabilitation.leaveDocument[0].type,
|
||||
// })
|
||||
// formData.append("leaveDocument", newFile)
|
||||
// } //
|
||||
if (formDataRehabilitation.leaveDocument) {
|
||||
formDataRehabilitation.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file)
|
||||
})
|
||||
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
|
||||
}
|
||||
|
||||
formData.append("leaveDocument", formDataRehabilitation.leaveDocument);
|
||||
}
|
||||
if (formDataRehabilitation.leaveDraftDocument) {
|
||||
formData.append("leaveDraftDocument", formDataRehabilitation.leaveDraftDocument)
|
||||
}
|
||||
|
||||
if (formDataRehabilitation.leaveDraftDocument) {
|
||||
formData.append(
|
||||
"leaveDraftDocument",
|
||||
formDataRehabilitation.leaveDraftDocument
|
||||
);
|
||||
}
|
||||
|
||||
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); //
|
||||
props.onSubmit(formData);
|
||||
}
|
||||
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) //
|
||||
props.onSubmit(formData)
|
||||
}
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const nameFileDraft = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
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);
|
||||
});
|
||||
};
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
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.leaveTotal = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้");
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
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.leaveTotal = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
//download function
|
||||
async function onClickDownloadFile(id: string, fileName: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
showLoader()
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async res => {
|
||||
const data = res.data.result
|
||||
await genReport(data, fileName)
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
}
|
||||
|
||||
const leaveDraftDocument = ref<string>();
|
||||
const leaveDocumentList = ref<any>()
|
||||
const leaveDraftDocument = ref<string>()
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
}
|
||||
});
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate)
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate)
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail
|
||||
// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument
|
||||
leaveDocumentList.value = props.data.leaveDocument
|
||||
}
|
||||
})
|
||||
</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 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<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 cursor-pointer inputgreen"
|
||||
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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||
>
|
||||
<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.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<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>
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<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 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
v-model="formDataRehabilitation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
use-chips
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เอกสารประกอบ"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<!-- multiple -->
|
||||
<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" multiple use-chips bg-color="white" dense outlined label="เอกสารประกอบ">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<!-- <div class="col-12" v-if="formDataRehabilitation.leaveDocument.length == 0">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ </q-card>
|
||||
</div> -->
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card bordered>
|
||||
<!-- <div class="col-12">
|
||||
<q-card class="q-pa-md" bordered> ไม่มีรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
|
||||
</div> -->
|
||||
<q-list separator>
|
||||
<q-item v-for="(document, index) in leaveDocumentList" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
</div>
|
||||
<q-btn class="col-6" :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
<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 leaveDocumentList" :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-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div v-if="data && data.id" 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-sm-3 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="data && data.id" 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-sm-3 q-my-sm">
|
||||
<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="ดาวน์โหลดแบบฟอร์ม"
|
||||
@click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" @click="onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 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"
|
||||
use-chips
|
||||
dense
|
||||
label="อัปโหลดแบบฟอร์ม"
|
||||
outlined
|
||||
bg-color="white"
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<q-file v-model="formDataRehabilitation.leaveDraftDocument" use-chips dense label="อัปโหลดแบบฟอร์ม" outlined bg-color="white" accept="application/pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
ดูไฟล์อัปโหลด
|
||||
</div> -->
|
||||
<q-btn
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
:href="leaveDraftDocument"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn icon="visibility" color="blue" label="ดาวน์โหลดไฟล์" :href="leaveDraftDocument" target="_blank" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn v-if="formDataRehabilitation.leaveDraftDocument != null" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
||||
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</q-card>
|
||||
</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
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn v-if="!props.data || props.data.status == 'DRAFT'" id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn v-if="data" id="onSubmit" type="button" unelevated dense class="q-px-md items-center q-ml-sm" color="primary" label="ยื่นใบลา" @click="onConfirm"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,82 +1,82 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(props);
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
console.log(props)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
||||
<div class="col">{{ props.data.absentDaySummon }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่</div>
|
||||
<div class="col">{{ props.data.absentDayLocation }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลงวันที่</div>
|
||||
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ ที่</div>
|
||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
||||
<div class="col">{{ props.data.absentDaySummon }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่</div>
|
||||
<div class="col">{{ props.data.absentDayLocation }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลงวันที่</div>
|
||||
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ ที่</div>
|
||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,76 +1,76 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อภรรยา</div>
|
||||
<div class="col">{{ props.data.wifeDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่คลอด</div>
|
||||
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อภรรยา</div>
|
||||
<div class="col">{{ props.data.wifeDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่คลอด</div>
|
||||
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,69 +1,69 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,81 +1,81 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
||||
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
||||
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
||||
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
||||
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,77 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">
|
||||
ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
|
||||
</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,98 +1,96 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ สถานที่</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ สถานที่</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -41,11 +41,20 @@ const props = defineProps({
|
|||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
|
||||
<div class="col" v-if="props.data.leaveDraftDocument">
|
||||
<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -84,10 +84,19 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -80,10 +80,19 @@ const props = defineProps({
|
|||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn :href="props.data.leaveDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -1,94 +1,94 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่บวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayLocationName }}
|
||||
{{ props.data.ordainDayLocationAddress }}
|
||||
{{ props.data.ordainDayLocationNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayBuddhistLentName }}
|
||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่บวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayLocationName }}
|
||||
{{ props.data.ordainDayLocationAddress }}
|
||||
{{ props.data.ordainDayLocationNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayBuddhistLentName }}
|
||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -41,11 +41,20 @@ const props = defineProps({
|
|||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
|
||||
<div class="col" v-if="props.data.leaveDraftDocument">
|
||||
<q-btn :href="props.data.leaveDraftDocument" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn>
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div v-if="props.data.leaveDocument && props.data.leaveDocument.length > 0">
|
||||
<div v-for="(document, index) in props.data.leaveDocument" :key="index">
|
||||
<div>
|
||||
{{ "เอกสารแนบฉบับที่" + (index + 1) }}
|
||||
<q-btn :href="document" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px">
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ const formData = reactive<any>({
|
|||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveDocument: [], //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||
leaveLastStart: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastEnd: null, //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
|
|
@ -216,18 +216,18 @@ function onSubmit(formData: FormData) {
|
|||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
fetchDataDetail(personalId.value)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function onConfirm() {
|
||||
console.log(personalId.value)
|
||||
function onConfirm(id: string) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader()
|
||||
await http
|
||||
.get(config.API.leaveUserSendId(personalId.value))
|
||||
.put(config.API.leaveUserSendId(personalId.value), { reason: "" })
|
||||
.then(() => {
|
||||
// router.push("/leave")
|
||||
success($q, "ยื่นใบลาสำเร็จ")
|
||||
|
|
@ -259,7 +259,7 @@ onMounted(() => {
|
|||
<q-btn to="/leave" icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" />
|
||||
<div>
|
||||
แก้ไขใบลา
|
||||
{{ formData.leaveTypeName }} {{ personalId }}
|
||||
{{ formData.leaveTypeName }}
|
||||
</div>
|
||||
</div>
|
||||
<q-form ref="myform" class="col-12">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue