แก้ฟอร์มลา

This commit is contained in:
Warunee Tamkoo 2024-01-11 21:25:49 +07:00
parent ebfae7437e
commit c8f1e9770c
22 changed files with 671 additions and 691 deletions

View file

@ -14,11 +14,11 @@ import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationFor
import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue"
import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue"
import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue"
import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue"
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue"
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue"
import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue"
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue"
import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue"
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue"
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue"
import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue"
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue"
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
/** import stort*/

View file

@ -120,14 +120,22 @@ function onValidate() {
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataSick.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataSick.leaveDocument.length > 0) {
formDataSick.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
formData.append("type", formDataSick.type);
formData.append("leaveRange", formDataSick.leaveRange);
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate));
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate));
formData.append(
"leaveStartDate",
dateToISO(new Date(formDataSick.leaveStartDate))
);
formData.append(
"leaveEndDate",
dateToISO(new Date(formDataSick.leaveEndDate))
);
formData.append("leaveWrote", formDataSick.leaveWrote);
formData.append("leaveAddress", formDataSick.leaveAddress);
formData.append("leaveNumber", formDataSick.leaveNumber);
@ -187,6 +195,23 @@ const dateEndInputStyle = computed(() => {
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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.leaveRange = props.data.leaveRange;
leaveDocumentList.value = props.data.leaveDocument;
formDataSick.leaveAddress = props.data.leaveAddress;
statusCheck.value = props.data.status;
formDataSick.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
formDataSick.leaveWrote = props.data.leaveWrote;
@ -200,8 +225,6 @@ onMounted(() => {
leaveDocumentList.value = props.data.leaveDocument;
formDataSick.leaveAddress = props.data.leaveAddress;
statusCheck.value = props.data.status;
} else {
statusCheck.value = "START";
}
});
</script>
@ -459,10 +482,7 @@ onMounted(() => {
</div>
<div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12">
<q-card bordered flat>
<!-- <div class="col-12">
<q-card class="q-pa-md" bordered> ไมรายการเอกสารประกอบ{{ leaveDocumentList }} </q-card>
</div> -->
<q-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -491,11 +511,6 @@ onMounted(() => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</div>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useQuasar } from "quasar";
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm";
import { useCounterMixin } from "@/stores/mixin";
@ -92,13 +92,21 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataBirth.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataBirth.leaveDocument.length > 0) {
formDataBirth.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataBirth.leaveDocument);
formData.append("type", formDataBirth.type);
formData.append("leaveStartDate", dateToISO(new Date(formDataBirth.leaveStartDate)));
formData.append("leaveEndDate", dateToISO(new Date(formDataBirth.leaveEndDate)));
formData.append(
"leaveStartDate",
dateToISO(new Date(formDataBirth.leaveStartDate))
);
formData.append(
"leaveEndDate",
dateToISO(new Date(formDataBirth.leaveEndDate))
);
formData.append("leaveWrote", formDataBirth.leaveWrote);
formData.append("leaveAddress", formDataBirth.leaveAddress);
formData.append("leaveNumber", formDataBirth.leaveNumber);
@ -137,6 +145,21 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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;
statusCheck.value = props.data.status;
formDataBirth.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
formDataBirth.leaveWrote = props.data.leaveWrote;
@ -376,85 +399,39 @@ onMounted(() => {
</q-file>
</div>
</div>
<!-- <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
v-if="leaveDocumentList && leaveDocumentList.length > 0"
>
<q-item
v-for="(document, index) in leaveDocumentList"
:key="index"
class="q-my-xs"
<div class="col-12 col-md-12 col-sm-12">
<q-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
>
<q-item-section>
<q-item-label class="row items-baseline">
<div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
: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>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</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>
<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
: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>
<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>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ref, reactive, onMounted, computed, watch } from "vue";
import type {
FormData,
FormRef,
@ -107,10 +107,11 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataHelpWife.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
formData.append("leaveDocument", formDataHelpWife.leaveDocument);
if (formDataHelpWife.leaveDocument.length > 0) {
formDataHelpWife.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
formData.append("type", formDataHelpWife.type);
formData.append(
"leaveStartDate",
@ -127,7 +128,7 @@ function onValidate() {
formData.append("wifeDayName", formDataHelpWife.wifeDayName);
formData.append(
"wifeDayDateBorn",
dateToISO(formDataHelpWife.wifeDayDateBorn)
dateToISO(new Date(formDataHelpWife.wifeDayDateBorn))
);
props.onSubmit(formData, isLeave.value);
}
@ -174,6 +175,24 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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 = [];
leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status;
}
});
onMounted(() => {
if (props.data) {
// console.log("data==>", props.data)
@ -188,7 +207,6 @@ onMounted(() => {
formDataHelpWife.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status;
// formDataHelpWife.leaveDocument = props.data.leaveDocument;
}
});
</script>
@ -447,7 +465,6 @@ onMounted(() => {
/>
<div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row">
<!-- multiple -->
<q-file
bg-color="white"
ref="leaveDocumentRef"
@ -458,6 +475,7 @@ onMounted(() => {
outlined
use-chips
class="q-pl-sm col-12"
multiple
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
@ -467,10 +485,7 @@ onMounted(() => {
</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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -499,64 +514,14 @@ onMounted(() => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</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>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue";
import { ref, reactive, onMounted, computed, watch } from "vue";
import type {
FormData,
FormRef,
@ -103,9 +103,11 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataVacation.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataVacation.leaveDocument.length > 0) {
formDataVacation.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataVacation.leaveDocument);
formData.append("type", formDataVacation.type);
formData.append("leaveRange", formDataVacation.leaveRange);
@ -113,7 +115,10 @@ function onValidate() {
"leaveStartDate",
dateToISO(new Date(formDataVacation.leaveStartDate))
);
formData.append("leaveEndDate", dateToISO(new Date(formDataVacation.leaveEndDate)));
formData.append(
"leaveEndDate",
dateToISO(new Date(formDataVacation.leaveEndDate))
);
formData.append("leaveWrote", formDataVacation.leaveWrote);
formData.append("leaveAddress", formDataVacation.leaveAddress);
formData.append("leaveNumber", formDataVacation.leaveNumber);
@ -180,6 +185,25 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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;
statusCheck.value = props.data.status;
formDataVacation.leaveRange = props.data.leaveRange;
formDataVacation.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
// console.log("data==>", props.data)
@ -456,17 +480,11 @@ onMounted(() => {
<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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -495,37 +513,9 @@ onMounted(() => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</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>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@ -73,7 +73,7 @@ const formDataOrdination = reactive<any>({
ordainDayBuddhistLentAddress: "",
ordainDayStatus: true,
leaveDocument: [],
leaveDetail: ""
leaveDetail: "",
});
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
@ -204,6 +204,30 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
if (props.data) {
formDataOrdination.leaveWrote = props.data.leaveWrote;
formDataOrdination.leaveStartDate = props.data.leaveStartDate;
formDataOrdination.leaveEndDate = props.data.leaveEndDate;
formDataOrdination.leaveTotal = props.data.leaveTotal;
formDataOrdination.ordainDayOrdination = props.data.ordainDayOrdination;
formDataOrdination.ordainDayLocationName = props.data.ordainDayLocationName;
formDataOrdination.ordainDayLocationNumber =
props.data.ordainDayLocationNumber;
formDataOrdination.ordainDayLocationAddress =
props.data.ordainDayLocationAddress;
formDataOrdination.ordainDayBuddhistLentName =
props.data.ordainDayBuddhistLentName;
formDataOrdination.ordainDayBuddhistLentAddress =
props.data.ordainDayBuddhistLentAddress;
formDataOrdination.ordainDayStatus = props.data.ordainDayStatus;
formDataOrdination.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status;
formDataOrdination.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
formDataOrdination.leaveWrote = props.data.leaveWrote;
@ -638,17 +662,11 @@ onMounted(() => {
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<!-- <div class="col-12" v-if="formDataOrdination.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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -661,7 +679,7 @@ onMounted(() => {
<q-item-section>
<q-item-label class="row items-baseline">
<div class="col">
{{ "เอกสารแนบฉบับที่ " + (index + 1) }}
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
:href="document"
@ -677,11 +695,6 @@ onMounted(() => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</div>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence";
@ -93,9 +93,11 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataHaji.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataHaji.leaveDocument) {
formDataHaji.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataHaji.leaveDocument);
formData.append("type", formDataHaji.type);
formData.append(
@ -154,6 +156,21 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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;
statusCheck.value = props.data.status;
formDataHaji.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
formDataHaji.leaveWrote = props.data.leaveWrote;
@ -410,17 +427,11 @@ onMounted(() => {
<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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -449,12 +460,6 @@ onMounted(() => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</div>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence";
@ -104,16 +104,21 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataMilitary.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataMilitary.leaveDocument) {
formDataMilitary.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataMilitary.leaveDocument);
formData.append("type", formDataMilitary.type);
formData.append(
"leaveStartDate",
dateToISO(new Date(formDataMilitary.leaveStartDate))
);
formData.append("leaveEndDate", dateToISO(new Date(formDataMilitary.leaveEndDate)));
formData.append(
"leaveEndDate",
dateToISO(new Date(formDataMilitary.leaveEndDate))
);
formData.append("absentDaySummon", formDataMilitary.absentDaySummon);
formData.append("absentDayLocation", formDataMilitary.absentDayLocation);
formData.append(
@ -169,6 +174,24 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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;
statusCheck.value = props.data.status;
formDataMilitary.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
formDataMilitary.leaveWrote = props.data.leaveWrote;
@ -461,18 +484,12 @@ onMounted(() => {
<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 q-mt-sm" 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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
separator
>
<q-item
v-for="(document, index) in leaveDocumentList"
@ -498,39 +515,10 @@ onMounted(() => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</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>
<q-separator class="q-mt-sm" />

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { reactive, ref, computed, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence";
@ -74,7 +74,7 @@ const formDataStudy = reactive<any>({
studyDayUniversityName: "", //
studyDayDegreeLevel: "", //
studyDaySubject: "", //
leaveDocument: "", //
leaveDocument: [], //
leaveDetail: "",
leaveTotal: "",
});
@ -119,19 +119,27 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataStudy.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataStudy.leaveDocument) {
formDataStudy.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataStudy.leaveDocument);
formData.append("type", formDataStudy.type); //
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)); //
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)); //
formData.append(
"leaveStartDate",
dateToISO(new Date(formDataStudy.leaveStartDate))
);
formData.append(
"leaveEndDate",
dateToISO(new Date(formDataStudy.leaveEndDate))
);
formData.append("studyDaySubject", formDataStudy.studyDaySubject);
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel);
formData.append(
"leavegovernmentDate",
dateToISO(formDataStudy.leavegovernmentDate)
);
// formData.append(
// "leavegovernmentDate",
// dateToISO(new Date(formDataStudy.leavegovernmentDate))
// );
formData.append(
"studyDayUniversityName",
formDataStudy.studyDayUniversityName
@ -165,7 +173,7 @@ async function fetchCheck() {
.then((res: any) => {
const data = res.data.result;
isLeave.value = data.isLeave;
// formDataStudy.leaveTotal = formDataStudy.leaveStartDatee;
// formDataStudy.leaveTotal = formDataStudy.leaveStartDatee;
})
.catch((e: any) => {
messageError($q, e);
@ -186,6 +194,36 @@ function updateLeaveTotal() {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
if (props.data) {
formDataStudy.leaveWrote = props.data.leaveWrote;
formDataStudy.leaveStartDate = props.data.leaveStartDate;
formDataStudy.leaveEndDate = props.data.leaveEndDate;
formDataStudy.leaveTotal = props.data.leaveTotal;
formDataStudy.leavebirthDate = props.data.leavebirthDate;
formDataStudy.leavegovernmentDate = props.data.leavegovernmentDate;
formDataStudy.leaveSalary = props.data.leaveSalary;
formDataStudy.leaveSalaryText = props.data.leaveSalaryText;
formDataStudy.leaveNumber = props.data.leaveNumber;
formDataStudy.leaveAddress = props.data.leaveAddress;
formDataStudy.studyDayScholarship = props.data.studyDayScholarship;
formDataStudy.studyDayCountry = props.data.studyDayCountry;
formDataStudy.studyDayUniversityName = props.data.studyDayUniversityName;
formDataStudy.studyDayDegreeLevel = props.data.studyDayDegreeLevel;
formDataStudy.studyDaySubject = props.data.studyDaySubject;
// formDataStudy.leaveDocument = props.data.leaveDocument;
formDataStudy.leaveDetail = props.data.leaveDetail;
formDataStudy.leaveDocument = [];
leaveDocumentList.value = props.data.leaveDocument;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
formDataStudy.leaveTotal = leaveTotal;
statusCheck.value = props.data.status;
}
});
onMounted(async () => {
if (props.data) {
formDataStudy.leaveWrote = props.data.leaveWrote;
@ -588,7 +626,6 @@ onMounted(async () => {
/>
<div class="col-12" v-if="statusCheck != 'NEW'">
<!-- multiple -->
<q-file
v-model="formDataStudy.leaveDocument"
bg-color="white"
@ -603,15 +640,9 @@ onMounted(async () => {
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<!-- <div class="col-12" v-if="formDataStudy.leaveDocument.length == 0">
<q-card class="q-pa-md" bordered> ไมรายการเอกสารประกอบ </q-card>
</div> -->
<div class="col-12" v-if="data">
<div class="col-12 q-mt-sm" 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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -627,7 +658,6 @@ onMounted(async () => {
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
class="col-6"
:href="document"
target="_blank"
outline
@ -641,42 +671,15 @@ onMounted(async () => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</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>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, computed, onMounted } from "vue";
import { reactive, ref, computed, onMounted, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence";
import { useQuasar } from "quasar";
@ -58,7 +58,7 @@ const formDataTrain = reactive<any>({
studyDayCountry: "",
studyDayTrainingSubject: "",
studyDayTrainingName: "",
leaveDocument: "",
leaveDocument: [],
leaveDetail: "",
});
@ -114,19 +114,27 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataTrain.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataTrain.leaveDocument) {
formDataTrain.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataTrain.leaveDocument);
formData.append("type", formDataTrain.type); //
formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)); //
formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)); //
formData.append("studyDayCountry", formDataTrain.studyDayCountry);
formData.append(
"leavegovernmentDate",
dateToISO(formDataTrain.leavegovernmentDate)
);
formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate));
"leaveStartDate",
dateToISO(new Date(formDataTrain.leaveStartDate))
); //
formData.append(
"leaveEndDate",
dateToISO(new Date(formDataTrain.leaveEndDate))
); //
formData.append("studyDayCountry", formDataTrain.studyDayCountry);
// formData.append(
// "leavegovernmentDate",
// dateToISO(formDataTrain.leavegovernmentDate)
// );
// formData.append("leavebirthDate", dateToISO(new Date(formDataTrain.leavebirthDate)));
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName);
formData.append(
"studyDayTrainingSubject",
@ -194,6 +202,34 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
if (props.data) {
formDataTrain.leaveWrote = props.data.leaveWrote;
formDataTrain.leaveStartDate = props.data.leaveStartDate;
formDataTrain.leaveEndDate = props.data.leaveEndDate;
formDataTrain.leaveTotal = props.data.leaveTotal;
formDataTrain.leavebirthDate = props.data.leavebirthDate;
formDataTrain.leavegovernmentDate = props.data.leavegovernmentDate;
formDataTrain.leaveSalary = props.data.leaveSalary;
formDataTrain.leaveSalaryText = props.data.leaveSalaryText;
formDataTrain.leaveNumber = props.data.leaveNumber;
formDataTrain.leaveAddress = props.data.leaveAddress;
formDataTrain.studyDayScholarship = props.data.studyDayScholarship;
formDataTrain.studyDayCountry = props.data.studyDayCountry;
formDataTrain.studyDayTrainingSubject = props.data.studyDayTrainingSubject;
formDataTrain.studyDayTrainingName = props.data.studyDayTrainingName;
formDataTrain.leaveDetail = props.data.leaveDetail;
formDataTrain.leaveDocument = [];
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
formDataTrain.leaveTotal = leaveTotal;
leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status;
}
});
onMounted(async () => {
if (props.data) {
formDataTrain.leaveWrote = props.data.leaveWrote;
@ -580,28 +616,22 @@ onMounted(async () => {
/>
<div class="col-12" v-if="statusCheck != 'NEW'">
<!-- multiple -->
<q-file
v-model="formDataTrain.leaveDocument"
bg-color="white"
multiple
dense
outlined
use-chips
label="เอกสารประกอบ"
>
<template v-slot:prepend>
<q-icon name="attach_file" color="primary" />
</template>
</q-file>
<!-- <div class="col-12" v-if="formDataTrain.leaveDocument.length == 0">
<q-card class="q-pa-md" bordered> ไมรายการเอกสารประกอบ </q-card>
</div> -->
<div class="col-12" v-if="data">
<div class="col-12 q-mt-sm" 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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -617,7 +647,6 @@ onMounted(async () => {
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
class="col-6"
:href="document"
target="_blank"
outline
@ -631,42 +660,15 @@ onMounted(async () => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</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>
<q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md">
<q-space />
<q-btn

View file

@ -50,8 +50,8 @@ const formDataWorkInternational = reactive<any>({
leaveStartDate: null,
leaveEndDate: null,
leaveDetail: "",
leaveDocument: null,
leaveDraftDocument: [],
leaveDocument: [],
leaveDraftDocument: null,
});
/** ตัวแปร ref สำหรับแสดง validate */
@ -81,7 +81,7 @@ const fileUploadDoc = async (files: any) => {
};
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() {
async function onValidate() {
const hasError = [];
for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
@ -96,7 +96,7 @@ function onValidate() {
if (hasError.every((result) => result === true)) {
const formData = new FormData();
if (formDataWorkInternational.leaveDocument) {
if (formDataWorkInternational.leaveDocument.length > 0) {
formDataWorkInternational.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
@ -121,7 +121,7 @@ function onValidate() {
); //
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
props.onSubmit(formData, isLeave.value);
await props.onSubmit(formData, isLeave.value);
}
}
@ -172,6 +172,22 @@ const leaveDocumentList = ref<any>();
const leaveDraftDocument = ref<string>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props, () => {
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;
leaveDraftDocument.value = props.data.leaveDraftDocument;
leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status;
formDataWorkInternational.leaveDraftDocument = null;
formDataWorkInternational.leaveDocument = [];
}
});
onMounted(() => {
if (props.data) {
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
@ -306,11 +322,7 @@ onMounted(() => {
:input-class="!isLeave ? dateEndInputStyle : ''"
>
<template v-slot:prepend>
<q-icon
name="event"
class="cursor-pointer"
color="primary"
>
<q-icon name="event" class="cursor-pointer" color="primary">
</q-icon>
</template>
@ -368,16 +380,13 @@ onMounted(() => {
</q-file>
</div>
</div>
<!-- <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-card>
<q-list
v-if="leaveDocumentList && leaveDocumentList.length > 0"
separator
>
<q-item
v-for="(document, index) in leaveDocumentList"
:key="index"
@ -389,7 +398,6 @@ onMounted(() => {
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
class="col-6"
:href="document"
target="_blank"
outline
@ -406,38 +414,6 @@ onMounted(() => {
</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
v-if="leaveDocumentList && leaveDocumentList.length > 0"
>
<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>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</div>
</q-card>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, reactive, computed, onMounted } from "vue";
import { ref, reactive, computed, onMounted, watch } from "vue";
import type {
FormData,
FormRef,
@ -127,26 +127,28 @@ function onValidate() {
}
if (hasError.every((result) => result === true)) {
const formData = new FormData();
formDataFollowSpouse.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
if (formDataFollowSpouse.leaveDocument.length > 0) {
formDataFollowSpouse.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
}
// formData.append("leaveDocument", formDataFollowSpouse.leaveDocument);
formData.append("type", formDataFollowSpouse.type); //
formData.append(
"leaveStartDate",
dateToISO(formDataFollowSpouse.leaveStartDate)
dateToISO(new Date(formDataFollowSpouse.leaveStartDate))
); //
formData.append(
"leaveEndDate",
dateToISO(formDataFollowSpouse.leaveEndDate)
dateToISO(new Date(formDataFollowSpouse.leaveEndDate))
); //
formData.append(
"coupleDayStartDateHistory",
dateToISO(formDataFollowSpouse.coupleDayStartDateHistory)
dateToISO(new Date(formDataFollowSpouse.coupleDayStartDateHistory))
); //
formData.append(
"coupleDayEndDateHistory",
dateToISO(formDataFollowSpouse.coupleDayEndDateHistory)
dateToISO(new Date(formDataFollowSpouse.coupleDayEndDateHistory))
); //
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote); //
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail); //
@ -227,6 +229,46 @@ const dateEndInputStyle = computed(() => {
const leaveDocumentList = ref<any>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, async () => {
if (props.data) {
formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
formDataFollowSpouse.leaveStartDate = new Date(props.data.leaveStartDate);
formDataFollowSpouse.leaveEndDate = new Date(props.data.leaveEndDate);
formDataFollowSpouse.leaveDetail = props.data.leaveDetail;
formDataFollowSpouse.leaveDocument = props.data.leaveDocument;
formDataFollowSpouse.leaveTotal = props.data.leaveTotal;
formDataFollowSpouse.leaveSalaryText = props.data.leaveSalaryText;
formDataFollowSpouse.leaveSalary = props.data.leaveSalary;
formDataFollowSpouse.coupleDayName = props.data.coupleDayName;
formDataFollowSpouse.coupleDayPosition = props.data.coupleDayPosition;
formDataFollowSpouse.coupleDayLevel = props.data.coupleDayLevel;
formDataFollowSpouse.coupleDayLevelCountry =
props.data.coupleDayLevelCountry;
formDataFollowSpouse.coupleDayCountryHistory =
props.data.coupleDayCountryHistory;
formDataFollowSpouse.coupleDayTotalHistory =
props.data.coupleDayTotalHistory;
formDataFollowSpouse.coupleDayStartDateHistory =
props.data.coupleDayStartDateHistory;
formDataFollowSpouse.coupleDayEndDateHistory =
props.data.coupleDayEndDateHistory;
leaveDocumentList.value = props.data.leaveDocument;
const leaveTotal = await calculateDurationYmd(
props.data.leaveStartDate,
props.data.leaveEndDate
);
formDataFollowSpouse.leaveTotal = leaveTotal;
const coupleDayTotalHistory = await calculateDurationYmd(
props.data.coupleDayStartDateHistory,
props.data.coupleDayEndDateHistory
);
formDataFollowSpouse.coupleDayTotalHistory = coupleDayTotalHistory;
statusCheck.value = props.data.status;
formDataFollowSpouse.leaveDocument = [];
}
});
onMounted(async () => {
if (props.data) {
formDataFollowSpouse.leaveWrote = props.data.leaveWrote;
@ -660,15 +702,9 @@ onMounted(async () => {
</q-file>
</div>
</div>
<!-- <div class="col-12" v-if="formDataFollowSpouse.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-card>
<q-list
separator
v-if="leaveDocumentList && leaveDocumentList.length > 0"
@ -684,7 +720,6 @@ onMounted(async () => {
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
class="col-6"
:href="document"
target="_blank"
outline
@ -698,11 +733,6 @@ onMounted(async () => {
</q-item-section>
</q-item>
</q-list>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</div>

View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, onMounted, computed } from "vue";
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useCounterMixin } from "@/stores/mixin";
import { useQuasar } from "quasar";
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence";
@ -55,7 +55,7 @@ const formDataRehabilitation = reactive<any>({
leaveWrote: "",
leaveStartDate: null,
leaveEndDate: null,
leaveDocument: "",
leaveDocument: [],
leaveDetail: "",
leaveDraftDocument: null,
});
@ -82,7 +82,7 @@ function onValidate() {
if (hasError.every((result) => result === true)) {
const formData = new FormData();
if (formDataRehabilitation.leaveDocument) {
if (formDataRehabilitation.leaveDocument.length > 0) {
formDataRehabilitation.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file);
});
@ -99,12 +99,12 @@ function onValidate() {
formData.append("type", formDataRehabilitation.type); //
formData.append(
"leaveStartDate",
dateToISO(formDataRehabilitation.leaveStartDate)
dateToISO(new Date(formDataRehabilitation.leaveStartDate))
); //
formData.append(
"leaveEndDate",
dateToISO(formDataRehabilitation.leaveEndDate)
); //
dateToISO(new Date(formDataRehabilitation.leaveEndDate))
);
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
props.onSubmit(formData, isLeave.value);
@ -167,6 +167,20 @@ const leaveDocumentList = ref<any>();
const leaveDraftDocument = ref<string>();
const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => {
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;
leaveDraftDocument.value = props.data.leaveDraftDocument;
leaveDocumentList.value = props.data.leaveDocument;
formDataRehabilitation.leaveDraftDocument = null;
formDataRehabilitation.leaveDocument = [];
statusCheck.value = props.data.status;
}
});
onMounted(() => {
if (props.data) {
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
@ -325,7 +339,6 @@ onMounted(() => {
/>
<div class="col-12" v-if="statusCheck != 'NEW'">
<!-- multiple -->
<q-file
v-model="formDataRehabilitation.leaveDocument"
@added="fileUploadDoc"
@ -340,15 +353,9 @@ onMounted(() => {
<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 q-mt-sm" 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-card>
<q-list separator>
<q-item
v-for="(document, index) in leaveDocumentList"
@ -361,7 +368,6 @@ onMounted(() => {
{{ "เอกสารแนบที่ " + (index + 1) }}
</div>
<q-btn
class="col-6"
:href="document"
target="_blank"
outline
@ -379,38 +385,6 @@ onMounted(() => {
</div>
</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
v-if="leaveDocumentList && leaveDocumentList.length > 0"
>
<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>
<div class="col-12" v-else>
<q-card class="q-pa-md" bordered>
ไมรายการเอกสารประกอบ
</q-card>
</div>
</q-card>
</div>
</div>
</q-card>
@ -461,9 +435,6 @@ onMounted(() => {
<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"
@ -473,11 +444,6 @@ onMounted(() => {
/>
</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>

View file

@ -1,82 +1,83 @@
<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRouter, useRoute } from "vue-router"
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useRouter, useRoute } from "vue-router";
/** import type*/
import type { LeaveType } from "@/modules/05_leave/interface/response/leave"
import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
/** import componest*/
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
import Table from "@/modules/05_leave/components/Table.vue"
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
import Table from "@/modules/05_leave/components/Table.vue";
/** import stort*/
import { useCounterMixin } from "@/stores/mixin"
import { useLeaveStore } from "@/modules/05_leave/store"
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store";
const mixin = useCounterMixin()
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } = mixin
const LeaveData = useLeaveStore()
const router = useRouter()
const route = useRoute()
const $q = useQuasar()
const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
mixin;
const LeaveData = useLeaveStore();
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
/** filter */
const year = ref<number>(new Date().getFullYear())
const type = ref<string>("00000000-0000-0000-0000-000000000000")
const status = ref<string>("ALL")
const filter = ref<string>("")
const year = ref<number>(new Date().getFullYear());
const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL");
const filter = ref<string>("");
/** pagination*/
const maxPage = ref<number>(1)
const page = ref<number>(1)
const pageSize = ref<number>(10)
const maxPage = ref<number>(1);
const page = ref<number>(1);
const pageSize = ref<number>(10);
/** function เรียกข้อมูลการลา*/
async function fetchDataTable() {
showLoader()
const body = {
year: year.value, //*( .)
type: type.value, //*Id
status: status.value, //*
page: page.value.toString(), //*
pageSize: pageSize.value.toString(), //*
keyword: filter.value, //keyword
}
await http
.post(config.API.leaveTableList(), body)
.then(res => {
const data = res.data.result.data
LeaveData.fetchListLeave(data)
maxPage.value = Math.ceil(res.data.result.total / pageSize.value)
})
.catch(err => {
messageError($q, err)
})
.finally(() => {
hideLoader()
})
showLoader();
const body = {
year: year.value, //*( .)
type: type.value, //*Id
status: status.value, //*
page: page.value.toString(), //*
pageSize: pageSize.value.toString(), //*
keyword: filter.value, //keyword
};
await http
.post(config.API.leaveTableList(), body)
.then((res) => {
const data = res.data.result.data;
LeaveData.fetchListLeave(data);
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
const leaveType = ref<LeaveType[]>()
const leaveType = ref<LeaveType[]>();
/** function เรียกประเภทการลา */
async function fectOptionType() {
await http
.get(config.API.leaveType())
.then(async res => {
leaveType.value = res.data.result
LeaveData.fetchLeaveType(res.data.result)
})
.catch(err => {
messageError($q, err)
})
await http
.get(config.API.leaveType())
.then(async (res) => {
leaveType.value = res.data.result;
LeaveData.fetchLeaveType(res.data.result);
})
.catch((err) => {
messageError($q, err);
});
}
const modal = ref<boolean>(false)
const leaveId = ref<string>("")
const leaveStatus = ref<string>("")
const modal = ref<boolean>(false);
const leaveId = ref<string>("");
const leaveStatus = ref<string>("");
/**
* function openPopupDateail
@ -84,18 +85,18 @@ const leaveStatus = ref<string>("")
* @param status การลา
*/
const onClickView = async (id: string, status: string) => {
modal.value = true
leaveId.value = id
leaveStatus.value = status
}
modal.value = true;
leaveId.value = id;
leaveStatus.value = status;
};
const onClickEdit = async (id: string) => {
router.push(`/leave/edit/${id}`)
}
router.push(`/leave/edit/${id}`);
};
/** function closePopup*/
async function onClickClose() {
modal.value = false
modal.value = false;
}
/**
@ -106,13 +107,13 @@ async function onClickClose() {
* @param k คำคนหา
*/
async function updateFilterTable(y: number, t: string, s: string, k: string) {
if (t && s) {
year.value = await y
type.value = await t
status.value = await s
filter.value = await k
await fetchDataTable()
}
if (t && s) {
year.value = await y;
type.value = await t;
status.value = await s;
filter.value = await k;
await fetchDataTable();
}
}
/**
@ -121,121 +122,164 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
* @param ps แถวตอหน
*/
async function updatePagination(p: number, ps: number) {
;(page.value = await p), (pageSize.value = await ps)
await fetchDataTable()
(page.value = await p), (pageSize.value = await ps);
await fetchDataTable();
}
/**
* เรยกฟงกนทงหมดตอนเรยกใชไฟล
*/
onMounted(async () => {
await fetchDataTable()
await fectOptionType()
})
await fetchDataTable();
await fectOptionType();
});
</script>
<template>
<Table
:rows="LeaveData.rows"
:columns="LeaveData.columns"
:visible-columns="LeaveData.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="LeaveData.visibleColumns"
:inputShow="true"
:grid="$q.screen.gt.xs ? false : true"
@update:filter="updateFilterTable"
@update:Pagination="updatePagination"
:maxPage="maxPage"
:pageSize="pageSize"
:leaveType="leaveType"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td key="no" :props="props" @click="onClickView(props.row.id, props.row.status)">
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
</q-td>
<q-td key="leaveTypeName" :props="props" @click="onClickView(props.row.id, props.row.status)">
{{ props.row.leaveTypeName }}
</q-td>
<q-td key="dateLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
{{ props.row.dateLeave }}
</q-td>
<q-td key="dateSendLeave" :props="props" @click="onClickView(props.row.id, props.row.status)">
{{ props.row.dateSendLeave }}
</q-td>
<Table
:rows="LeaveData.rows"
:columns="LeaveData.columns"
:visible-columns="LeaveData.visibleColumns"
v-model:inputfilter="filter"
v-model:inputvisible="LeaveData.visibleColumns"
:inputShow="true"
:grid="$q.screen.gt.xs ? false : true"
@update:filter="updateFilterTable"
@update:Pagination="updatePagination"
:maxPage="maxPage"
:pageSize="pageSize"
:leaveType="leaveType"
>
<template #columns="props">
<q-tr :props="props" class="cursor-pointer">
<q-td
key="no"
:props="props"
@click="onClickView(props.row.id, props.row.status)"
>
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
</q-td>
<q-td
key="leaveTypeName"
:props="props"
@click="onClickView(props.row.id, props.row.status)"
>
{{ props.row.leaveTypeName }}
</q-td>
<q-td
key="dateLeave"
:props="props"
@click="onClickView(props.row.id, props.row.status)"
>
{{ props.row.dateLeave }}
</q-td>
<q-td
key="dateSendLeave"
:props="props"
@click="onClickView(props.row.id, props.row.status)"
>
{{ props.row.dateSendLeave }}
</q-td>
<q-td key="status" :props="props">
<div class="col-12 row items-center">
<div @click="onClickView(props.row.id, props.row.status)">
<q-icon v-if="props.row.status == 'DRAFT'" size="10px" color="light-grey" name="mdi-circle" class="q-mr-sm" />
<q-icon v-if="props.row.status == 'APPROVE'" size="10px" color="light-green" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'REJECT'" size="10px" color="red-6" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'PENDING'" size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
<q-icon v-else-if="props.row.status == 'NEW'" size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
<q-icon v-if="props.row.status == 'DELETE'" size="10px" color="grey-10" name="mdi-circle" class="q-mr-sm" />
<q-td key="status" :props="props">
<div class="col-12 row items-center">
<div @click="onClickView(props.row.id, props.row.status)">
<q-icon
v-if="props.row.status == 'DRAFT'"
size="10px"
color="light-grey"
name="mdi-circle"
class="q-mr-sm"
/>
<q-icon
v-if="props.row.status == 'APPROVE'"
size="10px"
color="light-green"
name="mdi-circle"
class="q-mr-sm"
/>
<q-icon
v-else-if="props.row.status == 'REJECT'"
size="10px"
color="red-6"
name="mdi-circle"
class="q-mr-sm"
/>
<q-icon
v-else-if="props.row.status == 'PENDING'"
size="10px"
color="light-blue-14"
name="mdi-circle"
class="q-mr-sm"
/>
<q-icon
v-else-if="props.row.status == 'NEW'"
size="10px"
color="orange"
name="mdi-circle"
class="q-mr-sm"
/>
<q-icon
v-if="props.row.status == 'DELETE'"
size="10px"
color="grey-10"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="q-pr-md">{{ props.row.statusConvert }}</span>
</div>
<q-space />
<span class="q-pr-md">{{ props.row.statusConvert }}</span>
</div>
<q-space />
<q-btn
v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
flat
icon="mdi-dots-vertical"
color="grey-8"
for="#cancel"
dense
round
unelevated
>
<q-menu>
<q-list>
<q-item clickable v-close-popup @click="onClickView(props.row.id, 'CANCEL')">
<q-item-section>
<q-item-label>ขอยกเล</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="
(props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL' && props.row.status == 'NEW') || props.row.status == 'DRAFT'
"
clickable
v-close-popup
@click="onClickEdit(props.row.id)"
>
<q-item-section>
<q-item-label>แกไข</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn
v-if="
props.row.status != 'DELETE' &&
props.row.status != 'REJECT' &&
props.row.status != 'CANCEL'
"
flat
icon="mdi-dots-vertical"
color="grey-8"
for="#cancel"
dense
round
unelevated
>
<q-menu>
<q-list>
<q-item
clickable
v-close-popup
@click="onClickView(props.row.id, 'CANCEL')"
>
<q-item-section>
<q-item-label>ขอยกเล</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="props.row.status == 'DRAFT'"
clickable
v-close-popup
@click="onClickEdit(props.row.id)"
>
<q-item-section>
<q-item-label>แกไข</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</q-td>
</q-tr>
</template>
</Table>
<!-- <q-btn
v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
label="ขอยกเลิก"
@click="onClickView(props.row.id, 'CANCEL')"
size="13px"
class="q-px-sm"
outline
dense
color="orange"
/>
<q-space />
<q-btn
v-if="props.row.status != 'DELETE' && props.row.status != 'REJECT' && props.row.status != 'CANCEL'"
label="ขอยืนยันการลา"
@click="onClickEdit(props.row.id, 'CANCEL')"
size="13px"
class="q-px-sm"
outline
dense
color="primary"
/> -->
</div>
</q-td>
</q-tr>
</template>
</Table>
<DialogDetail :modal="modal" :leaveId="leaveId" :leaveStatus="leaveStatus" :onClickClose="onClickClose" :leaveType="leaveType" :fetchDataTable="fetchDataTable" />
<DialogDetail
:modal="modal"
:leaveId="leaveId"
:leaveStatus="leaveStatus"
:onClickClose="onClickClose"
:leaveType="leaveType"
:fetchDataTable="fetchDataTable"
/>
</template>

View file

@ -33,7 +33,7 @@ const props = defineProps({
<div class="row">
<div class="col text-grey-8">จำนวนวนทลา</div>
<div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div>
</div>
<div class="row">

View file

@ -33,7 +33,7 @@ const props = defineProps({
<div class="row">
<div class="col text-grey-8">จำนวนวนทลา</div>
<div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div>
</div>
<div class="row">

View file

@ -34,7 +34,7 @@ console.log(props);
<div class="row">
<div class="col text-grey-8">จำนวนวนทลา</div>
<div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div>
</div>
<div class="row">

View file

@ -29,6 +29,12 @@ const props = defineProps({
<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 ? props.data.leaveCount : "-" }}
</div>
</div>
<div class="row">
<div class="col text-grey-8">รายละเอยด</div>
<div class="col">