แก้ฟอร์มลา

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 FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue"
import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue" import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue"
import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue" import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue"
import FormStudy from "@/modules/05_leave/components/formDetail/formStudy.vue" import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue"
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/formLeaveToTraining.vue" import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue"
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/formLeaveToWorkInternational.vue" import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue"
import FormSpouse from "@/modules/05_leave/components/formDetail/formSpouse.vue" import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue"
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/formVocationalRehabilitation.vue" import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue"
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue" import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
/** import stort*/ /** import stort*/

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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