แกไข ชื่อ file
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
6269464231
commit
6f5a408f9e
52 changed files with 132 additions and 64 deletions
496
src/modules/05_leave/components/Calendar.vue
Normal file
496
src/modules/05_leave/components/Calendar.vue
Normal file
|
|
@ -0,0 +1,496 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/**import calendar*/
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import type { CalendarOptions } from "@fullcalendar/core";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import allLocales from "@fullcalendar/core/locales-all";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
/** import type*/
|
||||
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
|
||||
import type {
|
||||
DataCalendar,
|
||||
LeaveType,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
|
||||
|
||||
/** import stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
|
||||
mixin;
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const emit = defineEmits(["update:dateYear"]);
|
||||
|
||||
const fullName = ref<string>("");
|
||||
const mainData = ref<DataCalendar[]>([]);
|
||||
|
||||
const keycloakId = ref<string>(
|
||||
keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
|
||||
);
|
||||
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
*/
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<CalendarOptions>({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin, // needed for dateClick
|
||||
listPlugin,
|
||||
],
|
||||
headerToolbar: false,
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: [], // alternatively, use the `events` setting to fetch from a feed
|
||||
selectable: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
locale: "th",
|
||||
locales: allLocales,
|
||||
expandRows: true,
|
||||
nowIndicator: true,
|
||||
height: "100%",
|
||||
eventColor: "#4CAF4F",
|
||||
eventTextColor: "#fff",
|
||||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: [],
|
||||
});
|
||||
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
/** function เรียกข้อมูล calendar*/
|
||||
async function fetchDataCalendar() {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCalendar(), {
|
||||
year: dateMonth.value.year,
|
||||
})
|
||||
.then((res) => {
|
||||
mainData.value = res.data.result;
|
||||
|
||||
const double_name = [
|
||||
...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
|
||||
];
|
||||
filterLists.value = [];
|
||||
for (let i = 1; i <= double_name.length; i++) {
|
||||
const name = double_name[i - 1];
|
||||
const filterName = {
|
||||
id: name,
|
||||
name: convertKeycloakId(name),
|
||||
color: name === keycloakId.value ? "green" : "grey",
|
||||
};
|
||||
|
||||
filterLists.value.push(filterName);
|
||||
}
|
||||
|
||||
const data = mainData.value.filter(
|
||||
(e: any) => e.keycloakId === keycloakId.value
|
||||
);
|
||||
|
||||
const event = data.map((e: DataCalendar) => ({
|
||||
id: e.id,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
start: e.leaveStartDate,
|
||||
end: e.leaveEndDate,
|
||||
allDay: true,
|
||||
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
|
||||
textColor: "black",
|
||||
}));
|
||||
calendarOptions.value.events = event;
|
||||
})
|
||||
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function convertKeycloakId(id: any) {
|
||||
const filterName = mainData.value.find((e: any) => e.keycloakId === id);
|
||||
return filterName?.fullName;
|
||||
}
|
||||
|
||||
const leaveType = ref<LeaveType[]>([]);
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async (res) => {
|
||||
leaveType.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลง ปีและเดือนเป็นภาษาไทย
|
||||
* @param val datepicker แบบเลือกปีและเดือน
|
||||
*/
|
||||
function monthYearThai(val: DataDateMonthObject) {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
}
|
||||
|
||||
/** function อัปเดท Calendar */
|
||||
async function updateMonth() {
|
||||
await fetchDataCalendar();
|
||||
const calen = fullCalendar.value.getApi();
|
||||
const date = new Date(dateMonth.value.year, dateMonth.value.month);
|
||||
calen.gotoDate(date);
|
||||
}
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
/**
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
*/
|
||||
async function onCilckview(id: string) {
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
}
|
||||
|
||||
/** function closePopup*/
|
||||
async function onClickClose() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/** filter calendar left */
|
||||
const filterLists = ref<any>([]);
|
||||
const filterVal = ref<any>([]);
|
||||
|
||||
watch(
|
||||
() => filterVal.value,
|
||||
() => {
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter((e: DataCalendar) => e.keycloakId === item)
|
||||
.map((e) => ({
|
||||
id: e.id,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
start: e.leaveStartDate,
|
||||
end: e.leaveEndDate,
|
||||
allDay: true,
|
||||
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
|
||||
textColor: "black",
|
||||
}));
|
||||
});
|
||||
const allEventData = [].concat(...eventData);
|
||||
calendarOptions.value.events = allEventData;
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
filterVal.value.push(keycloakId.value);
|
||||
|
||||
await fetchDataCalendar();
|
||||
await fectOptionType();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
|
||||
<q-card class="col-12">
|
||||
<div class="q-gutter-sm">
|
||||
<q-list bordered class="rounded-borders">
|
||||
<q-item
|
||||
v-for="(item, i) in filterLists"
|
||||
:key="i"
|
||||
tag="label"
|
||||
v-ripple
|
||||
>
|
||||
<q-checkbox
|
||||
size="sm"
|
||||
v-model="filterVal"
|
||||
:val="item.id"
|
||||
:color="item.color"
|
||||
/>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 col-md-9">
|
||||
<div class="q-mt-sm">
|
||||
<div class="row col-12 q-gutter-sm">
|
||||
<div class="demo-app-main">
|
||||
<q-card bordered flat class="q-pa-sm col-12 row bg-grey-1 shadow-0">
|
||||
<div class="items-center col-12 row q-col-gutter-sm">
|
||||
<!-- filter เลือกเดือนปี -->
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="updateMonth"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
style="width: 130px"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div class="main-content">
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
class="demo-app-calendar"
|
||||
:options="calendarOptions"
|
||||
>
|
||||
<template v-slot:eventContent="arg">
|
||||
<div
|
||||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<div
|
||||
class="textHover col-10"
|
||||
@click="onCilckview(arg.event.id)"
|
||||
>
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-col-gutter-lg justify-end">
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="green-7"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">การลาของฉัน</span>
|
||||
</div>
|
||||
<div class="items-center row">
|
||||
<q-icon
|
||||
size="10px"
|
||||
color="grey-6"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogDetail
|
||||
:modal="modal"
|
||||
:leaveId="leaveId"
|
||||
:onClickClose="onClickClose"
|
||||
:leaveType="leaveType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scope lang="scss">
|
||||
.main-content {
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demo-app-main {
|
||||
flex-grow: 1;
|
||||
/* padding: 3em; */
|
||||
}
|
||||
|
||||
.fc {
|
||||
/* the calendar root */
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-day-today {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* border: 2px solid #17a259; */
|
||||
/* border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
font-weight: bold;
|
||||
color: white !important;
|
||||
background: #17a259; */
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-frame {
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button {
|
||||
color: black;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button:active {
|
||||
color: white;
|
||||
background-color: #22a15e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button.fc-button-active {
|
||||
color: white;
|
||||
background-color: #22a15e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
background-color: white;
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.fc .fc-scrollgrid-liquid > thead {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dp-custom-cell {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dp__today {
|
||||
border: 1px solid var(--q-primary);
|
||||
}
|
||||
|
||||
.dp__range_end,
|
||||
.dp__range_start,
|
||||
.dp__active_date {
|
||||
background: var(--q-primary);
|
||||
color: var(--dp-primary-text-color);
|
||||
}
|
||||
|
||||
.datepicker .q-field__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__messages {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__native {
|
||||
padding-left: 5px;
|
||||
color: var(--q-primary) !important;
|
||||
}
|
||||
|
||||
.datepicker .q-field__prepend {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__append {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__after {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc .fc-popover {
|
||||
z-index: 6000;
|
||||
}
|
||||
|
||||
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subName {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subInput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
overflow: hidden;
|
||||
border-color: transparent !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
text-align: left;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border: 1px solid #ebe9f1;
|
||||
}
|
||||
|
||||
.textHover:hover {
|
||||
color: #b5ec9f;
|
||||
}
|
||||
</style>
|
||||
504
src/modules/05_leave/components/DialogDetail.vue
Normal file
504
src/modules/05_leave/components/DialogDetail.vue
Normal file
|
|
@ -0,0 +1,504 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** import type*/
|
||||
import type {
|
||||
FremDetail,
|
||||
FormDelete,
|
||||
FormDeleteRef,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
import FormLeave from "@/modules/05_leave/components/formDetail/formLeave.vue";
|
||||
import FormChildbirth from "@/modules/05_leave/components/formDetail/formChildbirth.vue";
|
||||
import FormHoliday from "@/modules/05_leave/components/formDetail/formHoliday.vue";
|
||||
import FormUpasom from "@/modules/05_leave/components/formDetail/formUpasom.vue";
|
||||
import FormHajj from "@/modules/05_leave/components/formDetail/formHajj.vue";
|
||||
import FormCheckSelect from "@/modules/05_leave/components/formDetail/formCheckSelect.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 stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
date2Thai,
|
||||
success,
|
||||
dialogConfirm,
|
||||
} = mixin;
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
require: true,
|
||||
},
|
||||
leaveId: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
onClickClose: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
leaveType: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
leaveStatus: {
|
||||
type: String,
|
||||
require: true,
|
||||
},
|
||||
fetchDataTable: {
|
||||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
const titleMain = ref<string>("รายละเอียดการลาของ");
|
||||
const titleName = ref<string>("");
|
||||
/**checkForm Form การลา*/
|
||||
const checkForm = ref<string>("");
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formData = reactive<FremDetail>({
|
||||
id: "", //Id การยื่นขอลา
|
||||
leaveTypeName: "", // Name ประเภทการลา
|
||||
leaveTypeId: "", //Id ประเภทการลา
|
||||
fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: new Date(), // วันที่ยืนใบลา
|
||||
status: "", //สถานะการของลา
|
||||
leaveDateStart: new Date(), //วันเริ่มการลา
|
||||
leaveDateEnd: new Date(), //วันสิ้นสุดการลา
|
||||
leaveCount: 0, //จำนวนวันลา
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||
leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveTotal: 0, //จำนวนวันที่ลา(Auto)
|
||||
leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
|
||||
leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
|
||||
leaveSalary: 0, //เงินเดือนปัจจุบัน(Auto)
|
||||
leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||
leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
|
||||
wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||
ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
|
||||
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
approveStep: "",
|
||||
dear: "",
|
||||
});
|
||||
|
||||
/** form ขอยกเลิก*/
|
||||
const formDelete = reactive<FormDelete>({
|
||||
writeAt: "",
|
||||
reason: "",
|
||||
doc: null,
|
||||
});
|
||||
/**Validate ข้อมูล */
|
||||
const writeAtRef = ref<Object | null>(null);
|
||||
const reasonRef = ref<Object | null>(null);
|
||||
const docRef = ref<Object | null>(null);
|
||||
const formDeleteRef: FormDeleteRef = {
|
||||
writeAt: writeAtRef,
|
||||
reason: reasonRef,
|
||||
doc: docRef,
|
||||
};
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลการลา
|
||||
* @param id การลา
|
||||
*/
|
||||
async function fetchDataDetail(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveUserId(id), {})
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
titleName.value = data.fullName ?? "-";
|
||||
formData.id = data.id ?? "-";
|
||||
formData.leaveTypeName = data.leaveTypeName ?? "-";
|
||||
formData.leaveTypeId = data.leaveTypeId ?? "-";
|
||||
formData.fullname = data.fullName ?? "-";
|
||||
formData.dateSendLeave =
|
||||
data.dateSendLeave && date2Thai(data.dateSendLeave);
|
||||
formData.status = data.status ?? "-";
|
||||
formData.leaveDateStart =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = data.leaveTotal ?? "-";
|
||||
formData.leaveWrote = data.leaveWrote ?? "-";
|
||||
formData.leaveAddress = data.leaveAddress ?? "-";
|
||||
formData.leaveNumber = data.leaveNumber ?? "-";
|
||||
formData.leaveDetail = data.leaveDetail ?? "-";
|
||||
formData.leaveDocument = data.leaveDocument;
|
||||
formData.leaveDraftDocument = data.leaveDraftDocument;
|
||||
formData.leaveLastStart =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastStart);
|
||||
formData.leaveLastEnd =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastEnd);
|
||||
formData.leaveTotal = data.leaveTotal;
|
||||
formData.leavebirthDate =
|
||||
data.leavebirthDate && date2Thai(data.leavebirthDate);
|
||||
formData.leavegovernmentDate =
|
||||
data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
|
||||
formData.leaveSalary = data.leaveSalary ?? "-";
|
||||
formData.leaveSalaryText = data.leaveSalaryText ?? "-";
|
||||
formData.wifeDayName = data.wifeDayName ?? "-";
|
||||
formData.wifeDayDateBorn =
|
||||
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
|
||||
formData.restDayOldTotal = data.restDayOldTotal ?? "-";
|
||||
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
|
||||
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
|
||||
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
|
||||
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
|
||||
formData.ordainDayOrdination =
|
||||
data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
|
||||
formData.ordainDayBuddhistLentName =
|
||||
data.ordainDayBuddhistLentName ?? "-";
|
||||
formData.ordainDayBuddhistLentAddress =
|
||||
data.ordainDayBuddhistLentAddress ?? "-";
|
||||
formData.hajjDayStatus = data.hajjDayStatus
|
||||
? "เคย"
|
||||
: "ไม่เคยไปประกอบพิธีฮัจญ์";
|
||||
formData.absentDaySummon = data.absentDaySummon ?? "-";
|
||||
formData.absentDayLocation = data.absentDayLocation ?? "-";
|
||||
formData.absentDayRegistorDate =
|
||||
data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
|
||||
formData.absentDayGetIn = data.absentDayGetIn ?? "-";
|
||||
formData.absentDayAt = data.absentDayAt ?? "-";
|
||||
formData.studyDaySubject = data.studyDaySubject ?? "-";
|
||||
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
|
||||
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
|
||||
formData.studyDayTrainingSubject =
|
||||
data.studyDayTrainingSubject ?? "-" ?? "-";
|
||||
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
|
||||
formData.studyDayCountry = data.studyDayCountry ?? "-";
|
||||
formData.studyDayScholarship = data.studyDayScholarship ?? "-";
|
||||
formData.coupleDayName = data.coupleDayName ?? "-";
|
||||
formData.coupleDayPosition = data.coupleDayPosition ?? "-";
|
||||
formData.coupleDayLevel = data.coupleDayLevel ?? "-";
|
||||
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
|
||||
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
|
||||
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
|
||||
formData.coupleDayStartDateHistory =
|
||||
data.coupleDayStartDateHistory &&
|
||||
date2Thai(data.coupleDayStartDateHistory);
|
||||
formData.coupleDayEndDateHistory =
|
||||
data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
|
||||
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
|
||||
formData.approveStep = data.approveStep ?? "-";
|
||||
formData.dear = data.dear ?? "-";
|
||||
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
|
||||
})
|
||||
.catch((err) => {
|
||||
props.onClickClose?.();
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function check ประเภทการลา
|
||||
* @param leaveTypeId ประเภทการลา
|
||||
* @param leaveTypeName ประเภทการลา
|
||||
*/
|
||||
function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
|
||||
if (props.leaveType) {
|
||||
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
|
||||
const type = filtertype.code;
|
||||
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
|
||||
checkForm.value = "FormLeave";
|
||||
} else if (type === "LV-004") {
|
||||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "LV-005") {
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "LV-006") {
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "LV-008") {
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "LV-009") {
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
} else if (type === "LV-010") {
|
||||
checkForm.value = "FormSpouse";
|
||||
} else if (type === "LV-011") {
|
||||
checkForm.value = "FormVocationalRehabilitation";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลยกเลิกการลา
|
||||
* @param id ยกเลิกการลา
|
||||
*/
|
||||
async function fetchDataCancelDetail(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveCancelById(id))
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** function ยินยันการบันทึกข้อมูล*/
|
||||
async function onClickSave() {
|
||||
const hasError = [];
|
||||
for (const key in formDeleteRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
|
||||
const property = formDeleteRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
onSubmit();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
);
|
||||
} else {
|
||||
console.log(hasError);
|
||||
}
|
||||
}
|
||||
|
||||
/** function บันทึกข้อมูล*/
|
||||
async function onSubmit() {
|
||||
showLoader();
|
||||
const id = props.leaveId ? props.leaveId : "";
|
||||
const formData = new FormData();
|
||||
formData.append("leaveWrote", formDelete.writeAt);
|
||||
formData.append("reason", formDelete.reason);
|
||||
formData.append("doc", formDelete.doc);
|
||||
await http
|
||||
.post(config.API.leaveCancelById(id), formData)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
props.fetchDataTable?.();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
formDelete.writeAt = "";
|
||||
formDelete.reason = "";
|
||||
formDelete.doc = null;
|
||||
|
||||
props.leaveStatus === "DELETE"
|
||||
? props.leaveId && fetchDataCancelDetail(props.leaveId)
|
||||
: props.leaveId && fetchDataDetail(props.leaveId);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-dialog v-model="props.modal" persistent>
|
||||
<q-card q-card style="min-width: 70%">
|
||||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
|
||||
<q-space />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="props.onClickClose"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div
|
||||
flat
|
||||
:class="
|
||||
props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
|
||||
"
|
||||
>
|
||||
<div class="col-12 q-col-gutter-sm row items-center"></div>
|
||||
<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
|
||||
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
|
||||
|
||||
<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
|
||||
<FormChildbirth
|
||||
v-else-if="checkForm === 'FormChildbirth'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาพักผ่อน -->
|
||||
<FormHoliday
|
||||
v-else-if="checkForm === 'FormHoliday'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาอุปสมบท -->
|
||||
<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
|
||||
|
||||
<!-- ลาประกอบพิธีฮัจญ์ -->
|
||||
<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
|
||||
|
||||
<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
|
||||
<FormCheckSelect
|
||||
v-else-if="checkForm === 'FormCheckSelect'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปศึกษา -->
|
||||
<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
|
||||
|
||||
<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
|
||||
<FormLeaveToTraining
|
||||
v-else-if="checkForm === 'FormLeaveToTraining'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
|
||||
<FormLeaveToWorkInternational
|
||||
v-else-if="checkForm === 'FormLeaveToWorkInternational'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาติดตามคู่สมรส -->
|
||||
<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
|
||||
|
||||
<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
|
||||
<FormVocationalRehabilitation
|
||||
v-else-if="checkForm === 'FormVocationalRehabilitation'"
|
||||
:data="formData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
flat
|
||||
class="col-xs-6 col-sm-6"
|
||||
v-if="props.leaveStatus === 'CANCEL'"
|
||||
>
|
||||
<q-card-section>
|
||||
<q-input
|
||||
ref="writeAtRef"
|
||||
v-model="formDelete.writeAt"
|
||||
label="เขียนที่"
|
||||
:rules="[(val) => !!val || 'กรุณากรอกเขียนที่']"
|
||||
lazy-rules
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-input
|
||||
ref="reasonRef"
|
||||
v-model="formDelete.reason"
|
||||
type="textarea"
|
||||
label="กรอกเหตุผล"
|
||||
:rules="[(val) => !!val || 'กรูณากรอกเหตุผล']"
|
||||
lazy-rules
|
||||
class="q-mt-md"
|
||||
outlined
|
||||
dense
|
||||
/>
|
||||
<q-file
|
||||
ref="docRef"
|
||||
outlined
|
||||
v-model="formDelete.doc"
|
||||
label="เลือกไฟล์เอกสารหลักฐาน"
|
||||
:rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
|
||||
lazy-rules
|
||||
class="q-mt-md"
|
||||
use-chips
|
||||
dense
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
</q-file>
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section
|
||||
class="row items-center q-pa-sm"
|
||||
v-if="props.leaveStatus === 'CANCEL'"
|
||||
>
|
||||
<q-space />
|
||||
<q-btn
|
||||
label="ยืนยัน"
|
||||
unelevated
|
||||
color="secondary"
|
||||
dense
|
||||
class="q-px-md"
|
||||
@click="onClickSave"
|
||||
/>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
423
src/modules/05_leave/components/Forms/01_SickForm.vue
Normal file
423
src/modules/05_leave/components/Forms/01_SickForm.vue
Normal file
|
|
@ -0,0 +1,423 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed } from "vue"
|
||||
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/SickForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataSick = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
halfDay: "day",
|
||||
leaveTotal: "",
|
||||
leaveLast: null,
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const halfDayRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const leaveLastRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
halfDay: halfDayRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formDataSick.leaveWrote = props.data.leaveWrote
|
||||
formDataSick.leaveStartDate = props.data.leaveStartDate
|
||||
formDataSick.leaveEndDate = props.data.leaveEndDate
|
||||
formDataSick.contractTel = props.data.contractTel
|
||||
formDataSick.leaveTotal = props.data.leaveTotal
|
||||
formDataSick.leaveNumber = props.data.leaveNumber
|
||||
formDataSick.leaveDetail = props.data.leaveDetail
|
||||
formDataSick.leaveDocument = props.data.leaveDocument
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
async function fileUploadDoc(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||
*/
|
||||
function resetDate() {
|
||||
if (formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon") {
|
||||
formDataSick.leaveStartDate = null
|
||||
formDataSick.leaveEndDate = null
|
||||
}
|
||||
console.log("testnull")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataSick.leaveDocument.length > 0) {
|
||||
const blob = formDataSick.leaveDocument[0].slice(0, formDataSick.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataSick.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataSick.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataSick.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataSick.leaveEndDate))
|
||||
formData.append("leaveWrote", formDataSick.leaveWrote)
|
||||
formData.append("leaveAddress", formDataSick.leaveAddress)
|
||||
formData.append("leaveNumber", formDataSick.leaveNumber)
|
||||
formData.append("leaveDetail", formDataSick.leaveDetail)
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataSick.leaveStartDate ?? null, EndLeaveDate: formDataSick.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataSick.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นแปลงครึ่งวัน/ทั้งวัน
|
||||
*/
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionHalfDay = formDataSick.halfDay === "half_day_morning" || formDataSick.halfDay === "half_day_afternoon"
|
||||
if (conditionHalfDay) {
|
||||
formDataSick.leaveEndDate = formDataSick.leaveStartDate // Set formDataSick.leaveEndDate to null
|
||||
formDataSick.leaveTotal = "0.5 วัน "
|
||||
} else {
|
||||
formDataSick.leaveTotal = null
|
||||
}
|
||||
return conditionHalfDay
|
||||
})
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์มลาป่วย และลากิจส่วนตัว -->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataSick.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-radio v-model="formDataSick.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||
<q-radio v-model="formDataSick.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||
<q-radio v-model="formDataSick.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!edit"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataSick.leaveStartDate != null ? date2Thai(formDataSick.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataSick.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
@update:model-value="FetchCheck()"
|
||||
:min-date="formDataSick.leaveStartDate ? new Date(formDataSick.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="isReadOnly"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataSick.leaveEndDate != null ? date2Thai(formDataSick.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataSick.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataSick.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataSick.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataSick.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
v-model="formDataSick.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
bg-color="white"
|
||||
class="col-12 q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="(file, index) in formDataSick.leaveDocument" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
389
src/modules/05_leave/components/Forms/03_Birth.vue
Normal file
389
src/modules/05_leave/components/Forms/03_Birth.vue
Normal file
|
|
@ -0,0 +1,389 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { FormRef } from "@/modules/05_leave/interface/request/BirthForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataBirth = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formDataBirth.leaveWrote = props.data.leaveWrote
|
||||
formDataBirth.leaveStartDate = props.data.leaveStartDate
|
||||
formDataBirth.leaveEndDate = props.data.leaveEndDate
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal
|
||||
formDataBirth.leaveNumber = props.data.leaveNumber
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail
|
||||
formDataBirth.leaveDocument = props.data.leaveDocument
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
async function fileUploadDoc(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataBirth.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataBirth.leaveLast = data.sumDateWork
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataBirth.leaveDocument.length > 0) {
|
||||
const blob = formDataBirth.leaveDocument[0].slice(0, formDataBirth.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataBirth.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataBirth.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataBirth.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataBirth.leaveEndDate))
|
||||
formData.append("leaveWrote", formDataBirth.leaveWrote)
|
||||
formData.append("leaveAddress", formDataBirth.leaveAddress)
|
||||
formData.append("leaveNumber", formDataBirth.leaveNumber)
|
||||
formData.append("leaveDetail", formDataBirth.leaveDetail)
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์มลาคลอดบุตร-->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataBirth.leaveStartDate != null ? date2Thai(formDataBirth.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
@update:model-value="FetchCheck()"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
:min-date="formDataBirth.leaveStartDate ? new Date(formDataBirth.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataBirth.leaveEndDate != null ? date2Thai(formDataBirth.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
bg-color="white"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataBirth.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataBirth.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="(file, index) in formDataBirth.leaveDocument" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
445
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
Normal file
445
src/modules/05_leave/components/Forms/04_HelpWifeBirthForm.vue
Normal file
|
|
@ -0,0 +1,445 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/HelpWifeForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const $q = useQuasar()
|
||||
const { date2Thai, calculateDurationYmd, dateToISO, dialogConfirm, fails, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataHelpWife = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
wifeDayName: "",
|
||||
wifeDayDateBorn: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const wifeDayNameRef = ref<object | null>(null)
|
||||
const wifeDayDateBornRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
wifeDayName: wifeDayNameRef,
|
||||
wifeDayDateBorn: wifeDayDateBornRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formDataHelpWife.leaveWrote = props.data.leaveWrote
|
||||
formDataHelpWife.wifeDayName = props.data.wifeDayName
|
||||
formDataHelpWife.wifeDayDateBorn = props.data.wifeDayDateBorn
|
||||
formDataHelpWife.leaveStartDate = props.data.leaveStartDate
|
||||
formDataHelpWife.leaveEndDate = props.data.leaveEndDate
|
||||
formDataHelpWife.leaveTotal = props.data.leaveTotal
|
||||
formDataHelpWife.leaveNumber = props.data.leaveNumber
|
||||
formDataHelpWife.leaveDetail = props.data.leaveDetail
|
||||
formDataHelpWife.leaveDocument = props.data.leaveDocument
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataHelpWife.leaveStartDate, formDataHelpWife.leaveEndDate)
|
||||
formDataHelpWife.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, leaveStartDate: formDataHelpWife.leaveStartDate ?? null, leaveEndDate: formDataHelpWife.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataHelpWife.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataHelpWife.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataHelpWife.leaveDocument.length > 0) {
|
||||
const blob = formDataHelpWife.leaveDocument[0].slice(0, formDataHelpWife.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataHelpWife.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataHelpWife.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataHelpWife.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataHelpWife.leaveEndDate))
|
||||
formData.append("leaveWrote", formDataHelpWife.leaveWrote)
|
||||
formData.append("leaveAddress", formDataHelpWife.leaveAddress)
|
||||
formData.append("leaveNumber", formDataHelpWife.leaveNumber)
|
||||
formData.append("leaveDetail", formDataHelpWife.leaveDetail)
|
||||
formData.append("wifeDayName", formDataHelpWife.wifeDayName)
|
||||
formData.append("wifeDayDateBorn", dateToISO(formDataHelpWife.wifeDayDateBorn))
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
v-model="formDataHelpWife.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataHelpWife.leaveStartDate != null ? date2Thai(formDataHelpWife.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
:min-date="formDataHelpWife.leaveStartDate ? new Date(formDataHelpWife.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataHelpWife.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataHelpWife.leaveEndDate != null ? date2Thai(formDataHelpWife.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHelpWife.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="wifeDayNameRef"
|
||||
for="wifeDayNameRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="formDataHelpWife.wifeDayName"
|
||||
label="ชื่อภรรยา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ชื่อภรรยา'}`]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataHelpWife.wifeDayDateBorn"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="wifeDayDateBornRef"
|
||||
for="wifeDayDateBornRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataHelpWife.wifeDayDateBorn != null ? date2Thai(formDataHelpWife.wifeDayDateBorn) : null"
|
||||
:label="`${'วันที่คลอด'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่คลอด'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataHelpWife.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataHelpWife.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataHelpWife.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
bg-color="white"
|
||||
ref="leaveDocumentRef"
|
||||
v-model="formDataHelpWife.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="(file, index) in formDataHelpWife.leaveDocument" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
439
src/modules/05_leave/components/Forms/05_VacationForm.vue
Normal file
439
src/modules/05_leave/components/Forms/05_VacationForm.vue
Normal file
|
|
@ -0,0 +1,439 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed } from "vue"
|
||||
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/VacationForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const $q = useQuasar()
|
||||
const dataStore = useLeaveStore()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataVacation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
halfDay: "day",
|
||||
restDayOldTotal: "",
|
||||
restDayCurrentTotal: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const restDayOldTotalRef = ref<object | null>(null)
|
||||
const restDayCurrentTotalRef = ref<object | null>(null)
|
||||
const halfDayRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
halfDay: halfDayRef,
|
||||
restDayOldTotal: restDayOldTotalRef,
|
||||
restDayCurrentTotal: restDayCurrentTotalRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formDataVacation.leaveWrote = props.data.leaveWrote
|
||||
formDataVacation.restDayOldTotal = props.data.restDayOldTotal
|
||||
formDataVacation.restDayCurrentTotal = props.data.restDayCurrentTotal
|
||||
formDataVacation.leaveStartDate = props.data.leaveStartDate
|
||||
formDataVacation.leaveEndDate = props.data.leaveEndDate
|
||||
formDataVacation.leaveTotal = props.data.leaveTotal
|
||||
formDataVacation.leaveNumber = props.data.leaveNumber
|
||||
formDataVacation.leaveDetail = props.data.leaveDetail
|
||||
formDataVacation.leaveDocument = props.data.leaveDocument
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
|
||||
console.log("save")
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataVacation.leaveStartDate ?? null, EndLeaveDate: formDataVacation.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataVacation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataVacation.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataVacation.leaveDocument.length > 0) {
|
||||
const blob = formDataVacation.leaveDocument[0].slice(0, formDataVacation.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataVacation.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataVacation.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataVacation.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataVacation.leaveEndDate))
|
||||
formData.append("leaveWrote", formDataVacation.leaveWrote)
|
||||
formData.append("leaveAddress", formDataVacation.leaveAddress)
|
||||
formData.append("leaveNumber", formDataVacation.leaveNumber)
|
||||
formData.append("leaveDetail", formDataVacation.leaveDetail)
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function รีเซทค่า leaveStartDate เเละ leaveEndDate
|
||||
*/
|
||||
function resetDate() {
|
||||
if (formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon") {
|
||||
formDataVacation.leaveStartDate = null
|
||||
formDataVacation.leaveEndDate = null
|
||||
}
|
||||
console.log("testnull")
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นแปลงค่า ครึ่งวัน/ทั้งวัน */
|
||||
const isReadOnly = computed(() => {
|
||||
const conditionHalfDay = formDataVacation.halfDay === "half_day_morning" || formDataVacation.halfDay === "half_day_afternoon"
|
||||
if (conditionHalfDay) {
|
||||
formDataVacation.leaveEndDate = formDataVacation.leaveStartDate // Set formDataVacation.leaveEndDate to null
|
||||
formDataVacation.leaveTotal = "0.5 วัน "
|
||||
} else {
|
||||
formDataVacation.leaveTotal = null
|
||||
}
|
||||
return conditionHalfDay
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataVacation.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div class="col-12 col-md-4 col-sm-6">
|
||||
<q-radio v-model="formDataVacation.halfDay" val="day" label="ลาทั้งวัน" checked-icon="task_alt" />
|
||||
<q-radio v-model="formDataVacation.halfDay" val="half_day_morning" label="ลาครึ่งวันเช้า" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||
<q-radio v-model="formDataVacation.halfDay" val="half_day_afternoon" label="ลาครึ่งวันบ่าย" checked-icon="task_alt" @update:model-value="resetDate" />
|
||||
</div>
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
ref="restDayOldTotalRef"
|
||||
for="restDayOldTotalRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
readonly
|
||||
outlined
|
||||
v-model="dataStore.restDayTotalOld"
|
||||
label="จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
ref="restDayCurrentTotalRef"
|
||||
for="restDayCurrentTotalRef"
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="dataStore.leaveRemain"
|
||||
label="จำนวนวันลาพักผ่อนประจำปีปัจจุบัน"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataVacation.leaveStartDate != null ? date2Thai(formDataVacation.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataVacation.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
@update:model-value="FetchCheck()"
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="isReadOnly"
|
||||
:min-date="formDataVacation.leaveStartDate ? new Date(formDataVacation.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:readonly="isReadOnly"
|
||||
:model-value="formDataVacation.leaveEndDate != null ? date2Thai(formDataVacation.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataVacation.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataVacation.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataVacation.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataVacation.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
ref="leaveDocumentRef"
|
||||
bg-color="white"
|
||||
v-model="formDataVacation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="(file, index) in formDataVacation.leaveDocument" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
543
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
Normal file
543
src/modules/05_leave/components/Forms/06_OrdinationForm.vue
Normal file
|
|
@ -0,0 +1,543 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, watch } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { OrdinationForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const ordainDayLocationNumberRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leavebirthDateRef = ref<object | null>(null)
|
||||
const leavegovernmentDateRef = ref<object | null>(null)
|
||||
const totalLeaveRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const ordainDayOrdinationRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const ordainDayLocationAddressRef = ref<object | null>(null)
|
||||
const ordainDayBuddhistLentAddressRef = ref<object | null>(null)
|
||||
const ordainDayLocationNameRef = ref<object | null>(null)
|
||||
const ordainDayBuddhistLentNameRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataOrdination = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: new Date(),
|
||||
leavebirthDate: new Date(),
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: new Date(),
|
||||
ordainDayOrdination: new Date(),
|
||||
ordainDayLocationName: "",
|
||||
ordainDayLocationNumber: null,
|
||||
ordainDayLocationAddress: "",
|
||||
ordainDayBuddhistLentName: "",
|
||||
ordainDayBuddhistLentAddress: "",
|
||||
ordainDayStatus: "true",
|
||||
leaveDocument: null,
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: OrdinationForm = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leavebirthDate: leavebirthDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
totalLeave: totalLeaveRef,
|
||||
ordainDayOrdination: ordainDayOrdinationRef,
|
||||
ordainDayLocationName: ordainDayLocationNameRef,
|
||||
ordainDayLocationNumber: ordainDayLocationNumberRef,
|
||||
ordainDayLocationAddress: ordainDayLocationAddressRef,
|
||||
ordainDayBuddhistLentName: ordainDayBuddhistLentNameRef,
|
||||
ordainDayBuddhistLentAddress: ordainDayBuddhistLentAddressRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
// // Watch for changes in leaveEndDate and update leaveTotal accordingly
|
||||
// watch(formDataOrdination.leaveEndDate, async () => {
|
||||
// if (formDataOrdination.leaveStartDate !== undefined && formDataOrdination.leaveEndDate !== undefined) {
|
||||
// const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
|
||||
// formDataOrdination.leaveTotal = newLeaveTotal
|
||||
// console.log(newLeaveTotal)
|
||||
// }
|
||||
// // Update the leaveTotal value
|
||||
// console.log("test")
|
||||
// })
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataOrdination.leaveStartDate ?? null, EndLeaveDate: formDataOrdination.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataOrdination.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataOrdination.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataOrdination.leaveDocument.length > 0) {
|
||||
const blob = formDataOrdination.leaveDocument[0].slice(0, formDataOrdination.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataOrdination.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataOrdination.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataOrdination.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataOrdination.leaveEndDate))
|
||||
formData.append("ordainDayOrdination", dateToISO(formDataOrdination.ordainDayOrdination))
|
||||
formData.append("ordainDayLocationName", formDataOrdination.ordainDayLocationName)
|
||||
formData.append("ordainDayLocationNumber", formDataOrdination.ordainDayLocationNumber)
|
||||
formData.append("ordainDayLocationAddress", formDataOrdination.ordainDayLocationAddress)
|
||||
formData.append("ordainDayBuddhistLentName", formDataOrdination.ordainDayBuddhistLentName)
|
||||
formData.append("ordainDayBuddhistLentAddress", formDataOrdination.ordainDayBuddhistLentAddress)
|
||||
formData.append("ordainDayStatus", formDataOrdination.ordainDayStatus)
|
||||
formData.append("leaveWrote", formDataOrdination.leaveWrote)
|
||||
formData.append("leaveDetail", formDataOrdination.leaveDetail)
|
||||
formData.append("leavebirthDate", dateToISO(formDataOrdination.leavebirthDate))
|
||||
formData.append("leavegovernmentDate", dateToISO(formDataOrdination.leavegovernmentDate))
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataOrdination.leaveStartDate, formDataOrdination.leaveEndDate)
|
||||
formDataOrdination.leaveTotal = newLeaveTotal
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์ม ลาอุปสมบท -->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataOrdination.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leaveStartDate != null ? date2Thai(formDataOrdination.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataOrdination.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataOrdination.leaveStartDate ? new Date(formDataOrdination.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leaveEndDate != null ? date2Thai(formDataOrdination.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataOrdination.leaveStartDate"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataOrdination.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leavegovernmentDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="leavegovernmentDateRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leavegovernmentDate != null ? date2Thai(formDataOrdination.leavegovernmentDate) : null"
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.leavebirthDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="leavebirthDateRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.leavebirthDate != null ? date2Thai(formDataOrdination.leavebirthDate) : null"
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยบวชหรือไม่</div>
|
||||
<div class="col-12">
|
||||
<q-radio v-model="formDataOrdination.ordainDayStatus" val="true" label="เคยบวช" checked-icon="task_alt " hide-bottom-space />
|
||||
<q-radio v-model="formDataOrdination.ordainDayStatus" val="false" label="ไม่เคยบวช" checked-icon="task_alt" hide-bottom-space />
|
||||
</div>
|
||||
|
||||
<div class="text-weight-bold text-dark col-12">สถานที่บวช</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataOrdination.ordainDayOrdination"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
full-width
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
ref="ordainDayOrdinationRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataOrdination.ordainDayOrdination != null ? date2Thai(formDataOrdination.ordainDayOrdination) : null"
|
||||
:label="`${'วันอุปสมบท'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันอุปสมบท'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
hide-bottom-space
|
||||
ref="ordainDayLocationNameRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
full-width
|
||||
v-model="formDataOrdination.ordainDayLocationName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="ordainDayLocationNumberRef"
|
||||
dense
|
||||
full-width
|
||||
outlined
|
||||
v-model="formDataOrdination.ordainDayLocationNumber"
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
label="หมายเลขโทรศัพท์"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์'}`]"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
ref="ordainDayLocationAddressRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
hide-bottom-space
|
||||
v-model="formDataOrdination.ordainDayLocationAddress"
|
||||
label="ที่อยู่"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
/>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">สถานที่จำพรรษา</div>
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
ref="ordainDayBuddhistLentNameRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
outlined
|
||||
v-model="formDataOrdination.ordainDayBuddhistLentName"
|
||||
label="ชื่อวัด"
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อวัด'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12"
|
||||
dense
|
||||
ref="ordainDayBuddhistLentAddressRef"
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataOrdination.ordainDayBuddhistLentAddress"
|
||||
label="ที่อยู่"
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่อยู่'}`]"
|
||||
type="textarea"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataOrdination.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file ref="leaveDocumentRef" v-model="formDataOrdination.leaveDocument" @added="fileUploadDoc" dense label="เอกสารประกอบ" outlined bg-color="white" multiple use-chips>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
352
src/modules/05_leave/components/Forms/07_HajjForm.vue
Normal file
352
src/modules/05_leave/components/Forms/07_HajjForm.vue
Normal file
|
|
@ -0,0 +1,352 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { HajiForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const router = useRouter()
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, messageError, success, dateToISO } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leavegovernmentDateRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataHaji = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: new Date(),
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: new Date(),
|
||||
hajjDayStatus: "true",
|
||||
leaveDocument: null,
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: HajiForm = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataHaji.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataHaji.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataHaji.leaveDocument.length > 0) {
|
||||
const blob = formDataHaji.leaveDocument[0].slice(0, formDataHaji.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataHaji.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataHaji.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataHaji.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataHaji.leaveEndDate))
|
||||
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus)
|
||||
formData.append("leaveWrote", formDataHaji.leaveWrote)
|
||||
formData.append("leaveDetail", formDataHaji.leaveDetail)
|
||||
formData.append("leavegovernmentDate", dateToISO(formDataHaji.leavegovernmentDate))
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataHaji.leaveStartDate, formDataHaji.leaveEndDate)
|
||||
formDataHaji.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
:model-value="formDataHaji.leaveStartDate != null ? date2Thai(formDataHaji.leaveStartDate) : null"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal"
|
||||
:readonly="!formDataHaji.leaveStartDate"
|
||||
:min-date="formDataHaji.leaveStartDate ? new Date(formDataHaji.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
:readonly="!formDataHaji.leaveStartDate"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
@update:model-value="FetchCheck()"
|
||||
:model-value="formDataHaji.leaveEndDate != null ? date2Thai(formDataHaji.leaveEndDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<datepicker
|
||||
v-model="formDataHaji.leavegovernmentDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="formDataHaji.leavegovernmentDate != null ? date2Thai(formDataHaji.leavegovernmentDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">เคยไปประกอบพิธีฮัจญ์หรือไม่</div>
|
||||
<div class="col-12">
|
||||
<q-radio v-model="formDataHaji.hajjDayStatus" val="true" checked-icon="task_alt" label="เคย" />
|
||||
<q-radio v-model="formDataHaji.hajjDayStatus" val="false" checked-icon="task_alt" label="ไม่เคยไปประกอบพิธีฮัจญ์" />
|
||||
</div>
|
||||
|
||||
<q-input v-model="formDataHaji.leaveDetail" class="col-12 q-mt-sm" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formDataHaji.leaveDocument" bg-color="white" label="เอกสารประกอบ" use-chips @added="fileUploadDoc" dense outlined multiple hide-bottom-space>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
410
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
Normal file
410
src/modules/05_leave/components/Forms/08_MilitaryForm.vue
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { MilitaryForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const router = useRouter()
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, dateToISO, success, messageError, fails } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const absentDaySummonRef = ref<object | null>(null)
|
||||
const absentDayLocationRef = ref<object | null>(null)
|
||||
const absentDayRegistorDateRef = ref<object | null>(null)
|
||||
const absentDayGetInRef = ref<object | null>(null)
|
||||
const absentDayAtRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataMilitary = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: 0,
|
||||
leaveDocument: null,
|
||||
leaveWrote: "",
|
||||
absentDaySummon: "",
|
||||
absentDayLocation: "",
|
||||
absentDayRegistorDate: null,
|
||||
absentDayGetIn: "",
|
||||
absentDayAt: "",
|
||||
leaveDetail: "",
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: MilitaryForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
absentDaySummon: absentDaySummonRef,
|
||||
absentDayLocation: absentDayLocationRef,
|
||||
absentDayRegistorDate: absentDayRegistorDateRef,
|
||||
absentDayGetIn: absentDayGetInRef,
|
||||
absentDayAt: absentDayAtRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataMilitary.leaveStartDate ?? null, EndLeaveDate: formDataMilitary.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataMilitary.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataMilitary.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataMilitary.leaveDocument.length > 0) {
|
||||
const blob = formDataMilitary.leaveDocument[0].slice(0, formDataMilitary.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataMilitary.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataMilitary.type)
|
||||
formData.append("leaveStartDate", dateToISO(formDataMilitary.leaveStartDate))
|
||||
formData.append("leaveEndDate", dateToISO(formDataMilitary.leaveEndDate))
|
||||
formData.append("absentDaySummon", formDataMilitary.absentDaySummon)
|
||||
formData.append("absentDayLocation", formDataMilitary.absentDayLocation)
|
||||
formData.append("absentDayRegistorDate", dateToISO(formDataMilitary.absentDayRegistorDate))
|
||||
formData.append("absentDayGetIn", formDataMilitary.absentDayGetIn)
|
||||
formData.append("absentDayAt", formDataMilitary.absentDayAt)
|
||||
formData.append("leaveWrote", formDataMilitary.leaveWrote)
|
||||
formData.append("leaveDetail", formDataMilitary.leaveDetail)
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataMilitary.leaveStartDate, formDataMilitary.leaveEndDate)
|
||||
formDataMilitary.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
v-model="formDataMilitary.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
bg-color="white"
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataMilitary.leaveStartDate != null ? date2Thai(formDataMilitary.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataMilitary.leaveStartDate"
|
||||
:min-date="formDataMilitary.leaveStartDate ? new Date(formDataMilitary.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataMilitary.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataMilitary.leaveEndDate != null ? date2Thai(formDataMilitary.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataMilitary.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
ref="absentDaySummonRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDaySummon"
|
||||
label="ได้รับหมายเรียกของ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกได้รับหมายเรียกของ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
ref="atRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayLocation"
|
||||
label="ที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataMilitary.absentDayRegistorDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="absentDayRegistorDateRef"
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataMilitary.absentDayRegistorDate != null ? date2Thai(formDataMilitary.absentDayRegistorDate) : null"
|
||||
:label="`${'ลงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
ref="absentDayGetInRef"
|
||||
outlined
|
||||
v-model="formDataMilitary.absentDayGetIn"
|
||||
label="ให้เข้ารับการ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกให้เข้ารับการ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="absentDayAtRef"
|
||||
v-model="formDataMilitary.absentDayAt"
|
||||
label="ณ ที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ณ ที่'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input class="col-12 col-md-12 col-sm-12" dense bg-color="white" outlined v-model="formDataMilitary.leaveDetail" type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formDataMilitary.leaveDocument" dense label="เอกสารประกอบ" outlined bg-color="white" multiple hide-bottom-space use-chips @added="fileUploadDoc">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
526
src/modules/05_leave/components/Forms/09_StudyForm.vue
Normal file
526
src/modules/05_leave/components/Forms/09_StudyForm.vue
Normal file
|
|
@ -0,0 +1,526 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, computed } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { studyDaySubjectForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, calculateDurationYmd, fails, dateToISO, success, messageError, arabicNumberToText } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leavebirthDateRef = ref<object | null>(null)
|
||||
const leavegovernmentDateRef = ref<object | null>(null)
|
||||
const leaveSalaryRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const studyDayScholarshipRef = ref<object | null>(null)
|
||||
const studyDayCountryRef = ref<object | null>(null)
|
||||
const studyDayUniversityNameRef = ref<object | null>(null)
|
||||
const studyDayDegreeLevelRef = ref<object | null>(null)
|
||||
const studyDaySubjectRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataStudy = reactive<any>({
|
||||
type: dataStore.typeId, //
|
||||
leaveWrote: "", //
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leavebirthDate: new Date(),
|
||||
leavegovernmentDate: new Date(),
|
||||
leaveSalary: 10000,
|
||||
leaveSalaryText: arabicNumberToText(10000),
|
||||
leaveNumber: "",
|
||||
leaveAddress: "test",
|
||||
studyDayScholarship: "",
|
||||
studyDayCountry: "",
|
||||
studyDayUniversityName: "", //
|
||||
studyDayDegreeLevel: "", //
|
||||
studyDaySubject: "", //
|
||||
leaveDocument: "", //
|
||||
leaveDetail: "",
|
||||
leaveTotal: "",
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: studyDaySubjectForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leavebirthDate: leavebirthDateRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveSalary: leaveSalaryRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
studyDayScholarship: studyDayScholarshipRef,
|
||||
studyDayCountry: studyDayCountryRef,
|
||||
studyDayUniversityName: studyDayUniversityNameRef,
|
||||
studyDayDegreeLevel: studyDayDegreeLevelRef,
|
||||
studyDaySubject: studyDaySubjectRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataStudy.leaveStartDate ?? null, EndLeaveDate: formDataStudy.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataStudy.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataStudy.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataStudy.leaveDocument.length > 0) {
|
||||
const blob = formDataStudy.leaveDocument[0].slice(0, formDataStudy.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataStudy.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
formData.append("type", formDataStudy.type) //
|
||||
formData.append("leaveStartDate", dateToISO(formDataStudy.leaveStartDate)) //
|
||||
formData.append("leaveEndDate", dateToISO(formDataStudy.leaveEndDate)) //
|
||||
formData.append("studyDaySubject", formDataStudy.studyDaySubject)
|
||||
formData.append("studyDayDegreeLevel", formDataStudy.studyDayDegreeLevel)
|
||||
formData.append("leavegovernmentDate", dateToISO(formDataStudy.leavegovernmentDate))
|
||||
formData.append("leavebirthDate", dateToISO(formDataStudy.leavebirthDate))
|
||||
formData.append("studyDayUniversityName", formDataStudy.studyDayUniversityName)
|
||||
formData.append("studyDayCountry", formDataStudy.studyDayCountry)
|
||||
formData.append("leaveWrote", formDataStudy.leaveWrote) //
|
||||
formData.append("leaveDetail", formDataStudy.leaveDetail) //
|
||||
formData.append("studyDayScholarship", formDataStudy.studyDayScholarship)
|
||||
formData.append("leaveAddress", formDataStudy.leaveAddress) //
|
||||
formData.append("leaveNumber", formDataStudy.leaveNumber) //
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataStudy.leaveStartDate, formDataStudy.leaveEndDate)
|
||||
formDataStudy.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลงตัวเลขเงินเดือน
|
||||
*/
|
||||
const formattedleaveSalary = computed(() => {
|
||||
return dataStore.salary !== null ? dataStore.salary.toLocaleString("th-TH") : ""
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="formDataStudy.leaveStartDate != null ? date2Thai(formDataStudy.leaveStartDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataStudy.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataStudy.leaveStartDate ? new Date(formDataStudy.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataStudy.leaveStartDate"
|
||||
:model-value="formDataStudy.leaveEndDate != null ? date2Thai(formDataStudy.leaveEndDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataStudy.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataStudy.leavegovernmentDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="dataStore.dateAppoint != null ? date2Thai(dataStore.dateAppoint) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataStudy.leavebirthDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="dataStore.birthDate != null ? date2Thai(dataStore.birthDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input v-model="formattedleaveSalary" ref="leaveSalaryRef" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
|
||||
|
||||
<q-input
|
||||
v-model="dataStore.salaryText"
|
||||
ref="leaveSalaryRef"
|
||||
class="col-12 col-sm-6 col-md-3"
|
||||
bg-color="white"
|
||||
dense
|
||||
readonly
|
||||
outlined
|
||||
label="เงินเดือนปัจจุบัน (ตัวอักษร)"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกเงินเดือนปัจจุบัน'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayUniversityName"
|
||||
ref="studyDayUniversityNameRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ชื่อสถานศึกษา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกชื่อสถานศึกษา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayDegreeLevel"
|
||||
ref="studyDayDegreeLevelRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ชั้นปริญญา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกชั้นปริญญา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDaySubject"
|
||||
ref="studyDaySubjectRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ศึกษาวิชา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกศึกษาวิชา'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveNumber"
|
||||
ref="leaveNumberRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataStudy.leaveAddress"
|
||||
ref="leaveAddressRef"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input v-model="formDataStudy.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formDataStudy.leaveDocument" bg-color="white" dense outlined multiple use-chips @added="fileUploadDoc" label="เอกสารประกอบ">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
504
src/modules/05_leave/components/Forms/10_TrainForm.vue
Normal file
504
src/modules/05_leave/components/Forms/10_TrainForm.vue
Normal file
|
|
@ -0,0 +1,504 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref, computed } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import type { TrainForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const router = useRouter()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, arabicNumberToText, calculateDurationYmd, fails, dateToISO, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataTrain = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leavebirthDate: new Date(),
|
||||
leavegovernmentDate: new Date(),
|
||||
leaveSalary: 10000,
|
||||
leaveSalaryText: arabicNumberToText(10000),
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
studyDayScholarship: "",
|
||||
studyDayCountry: "",
|
||||
studyDayTrainingSubject: "",
|
||||
studyDayTrainingName: "",
|
||||
leaveDocument: "",
|
||||
leaveDetail: "",
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leavebirthDateRef = ref<object | null>(null)
|
||||
const leavegovernmentDateRef = ref<object | null>(null)
|
||||
const leaveNumberRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const studyDayScholarshipRef = ref<object | null>(null)
|
||||
const studyDayCountryRef = ref<object | null>(null)
|
||||
const studyDayTrainingSubjectRef = ref<object | null>(null)
|
||||
const studyDayTrainingNameRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: TrainForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leavebirthDate: leavebirthDateRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
studyDayScholarship: studyDayScholarshipRef,
|
||||
studyDayCountry: studyDayCountryRef,
|
||||
studyDayTrainingSubject: studyDayTrainingSubjectRef,
|
||||
studyDayTrainingName: studyDayTrainingNameRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataTrain.leaveStartDate ?? null, EndLeaveDate: formDataTrain.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataTrain.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataTrain.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataTrain.leaveDocument.length > 0) {
|
||||
const blob = formDataTrain.leaveDocument[0].slice(0, formDataTrain.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataTrain.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
} //
|
||||
formData.append("type", formDataTrain.type) //
|
||||
formData.append("leaveStartDate", dateToISO(formDataTrain.leaveStartDate)) //
|
||||
formData.append("leaveEndDate", dateToISO(formDataTrain.leaveEndDate)) //
|
||||
formData.append("studyDayCountry", formDataTrain.studyDayCountry)
|
||||
formData.append("leavegovernmentDate", dateToISO(formDataTrain.leavegovernmentDate))
|
||||
formData.append("leavebirthDate", dateToISO(formDataTrain.leavebirthDate))
|
||||
formData.append("studyDayTrainingName", formDataTrain.studyDayTrainingName)
|
||||
formData.append("studyDayTrainingSubject", formDataTrain.studyDayTrainingSubject)
|
||||
formData.append("leaveWrote", formDataTrain.leaveWrote) //
|
||||
formData.append("leaveDetail", formDataTrain.leaveDetail) //
|
||||
formData.append("studyDayScholarship", formDataTrain.studyDayScholarship)
|
||||
formData.append("leaveAddress", formDataTrain.leaveAddress) //
|
||||
formData.append("leaveNumber", formDataTrain.leaveNumber) //
|
||||
formData.append("leaveSalaryText", formDataTrain.leaveSalaryText) //
|
||||
formData.append("leaveSalary", formDataTrain.leaveSalary) //
|
||||
formData.append("leaveTotal", formDataTrain.leaveTotal) //
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataTrain.leaveStartDate, formDataTrain.leaveEndDate)
|
||||
formDataTrain.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลงตัวเลขเงินเดือน
|
||||
*/
|
||||
const formattedSalary = computed(() => {
|
||||
return formDataTrain.leaveSalary !== null ? formDataTrain.leaveSalary.toLocaleString("th-TH") : ""
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:model-value="formDataTrain.leaveStartDate != null ? date2Thai(formDataTrain.leaveStartDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataTrain.leaveStartDate"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataTrain.leaveStartDate ? new Date(formDataTrain.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:readonly="!formDataTrain.leaveStartDate"
|
||||
:model-value="formDataTrain.leaveEndDate != null ? date2Thai(formDataTrain.leaveEndDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataTrain.leaveTotal"
|
||||
label="มีกำหนด"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavegovernmentDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
readonly
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="formDataTrain.leavegovernmentDate != null ? date2Thai(formDataTrain.leavegovernmentDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataTrain.leavebirthDate"
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavebirthDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันเดือนปีเกิด'}`"
|
||||
:model-value="formDataTrain.leavebirthDate != null ? date2Thai(formDataTrain.leavebirthDate) : null"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input v-model="formattedSalary" class="col-12 col-sm-6 col-md-3" bg-color="white" dense outlined readonly label="เงินเดือนปัจจุบัน" />
|
||||
|
||||
<q-input v-model="formDataTrain.leaveSalaryText" class="col-12 col-sm-6 col-md-3" dense readonly outlined bg-color="white" label="เงินเดือนปัจจุบัน (ตัวอักษร)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingSubject"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="studyDayTrainingSubjectRef"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้าน/หลักสูตร"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกด้าน/หลักสูตร'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayTrainingName"
|
||||
ref="studyDayTrainingNameRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ณ สถานที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ณ สถานที่'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayCountry"
|
||||
ref="studyDayCountryRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
label="ประเทศ"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกประเทศ'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.studyDayScholarship"
|
||||
ref="studyDayScholarshipRef"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ด้วยทุน"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอกด้วยทุน'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveNumber"
|
||||
class="col-12 col-sm-6 col-md-4"
|
||||
ref="leaveNumberRef"
|
||||
dense
|
||||
outlined
|
||||
unmasked-value
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
mask="(###)-###-####"
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:rules="[val => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="formDataTrain.leaveAddress"
|
||||
ref="leaveAddressRef"
|
||||
class="col-12"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'กรุณากรอก ที่อยู่ที่ติดต่อได้ระหว่างลา'}`]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-input v-model="formDataTrain.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formDataTrain.leaveDocument" bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import type { FormRef } from "@/modules/05_leave/interface/request/WorkInternationalForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
const router = useRouter()
|
||||
const isSave = ref<boolean>(false)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataWorkInternational = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
leaveDraftDocument: [],
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote
|
||||
formDataWorkInternational.leaveStartDate = props.data.leaveStartDate
|
||||
formDataWorkInternational.leaveEndDate = props.data.leaveEndDate
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail
|
||||
formDataWorkInternational.leaveDocument = props.data.leaveDocument
|
||||
formDataWorkInternational.leaveDraftDocument = props.data.leaveDraftDocument
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const nameFileDraft = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataWorkInternational.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataWorkInternational.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
//
|
||||
if (formDataWorkInternational.leaveDocument.length > 0) {
|
||||
const blob = formDataWorkInternational.leaveDocument[0].slice(0, formDataWorkInternational.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataWorkInternational.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
}
|
||||
//
|
||||
if (formDataWorkInternational.leaveDraftDocument.length > 0) {
|
||||
const blobDrafe = formDataWorkInternational.leaveDraftDocument.slice(0, formDataWorkInternational.leaveDraftDocument[0].size)
|
||||
const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
|
||||
type: formDataWorkInternational.leaveDraftDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDraftDocument", newFileDraft) //
|
||||
}
|
||||
formData.append("type", formDataWorkInternational.type) //
|
||||
formData.append("leaveStartDate", dateToISO(formDataWorkInternational.leaveStartDate)) //
|
||||
formData.append("leaveEndDate", dateToISO(formDataWorkInternational.leaveEndDate)) //
|
||||
formData.append("leaveWrote", formDataWorkInternational.leaveWrote) //
|
||||
formData.append("leaveDetail", formDataWorkInternational.leaveDetail) //
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataWorkInternational.leaveStartDate != null ? date2Thai(formDataWorkInternational.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="FetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="!formDataWorkInternational.leaveStartDate"
|
||||
:min-date="formDataWorkInternational.leaveStartDate ? new Date(formDataWorkInternational.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataWorkInternational.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataWorkInternational.leaveEndDate != null ? date2Thai(formDataWorkInternational.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <q-input
|
||||
class="col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
type="number"
|
||||
v-model="formDataWorkInternational.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/> -->
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="(file, index) in formDataWorkInternational.leaveDocument" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div v-if="formDataWorkInternational.leaveWrote && formDataWorkInternational.leaveEndDate && formDataWorkInternational.leaveStartDate" class="q-mt-md">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||
<div class="column q-mx-xs">
|
||||
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
|
||||
<q-file v-model="formDataWorkInternational.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept=".pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn v-if="formDataWorkInternational.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
579
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
Normal file
579
src/modules/05_leave/components/Forms/12_FollowSpouseForm.vue
Normal file
|
|
@ -0,0 +1,579 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, computed, onMounted } from "vue"
|
||||
import type { FormData, FormRef } from "@/modules/05_leave/interface/request/FollowSpouseForm"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import { useQuasar } from "quasar"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const router = useRouter()
|
||||
const { dialogConfirm, date2Thai, arabicNumberToText, calculateDurationYmd, dateToISO, fails, success, messageError } = mixin
|
||||
const edit = ref<boolean>(true)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataFollowSpouse = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "", //จำนวนวันลา
|
||||
leaveSalaryText: 25000,
|
||||
leaveSalary: 25000, //เงินเดือนปัจจุบัน
|
||||
coupleDayName: "", //ชื่อคู่สมรส
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส
|
||||
coupleDayLevel: "", //ระดับคู่สมรส
|
||||
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ
|
||||
followHistoryCountry: "ลาว", //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryTime: "0 วัน",
|
||||
followHistoryStart: new Date(),
|
||||
followHistoryEnd: new Date(),
|
||||
leaveDetail: "ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา ...ปี, ...เดือน, ...วัน", //รายละเอียดการลา
|
||||
leaveDocument: [], //เอกสารปะกอบ
|
||||
})
|
||||
|
||||
/** แปลงตัวแปร Salary */
|
||||
const formattleaveSalaryText = arabicNumberToText(formDataFollowSpouse.leaveSalaryText)
|
||||
const formattSalary = computed(() => {
|
||||
return formDataFollowSpouse.leaveSalary !== null ? formDataFollowSpouse.leaveSalary.toLocaleString("th-TH") : ""
|
||||
})
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveSalaryRef = ref<object | null>(null)
|
||||
const leaveTotalRef = ref<object | null>(null)
|
||||
const coupleDayNameRef = ref<object | null>(null)
|
||||
const leaveAddressRef = ref<object | null>(null)
|
||||
const leaveDetailRef = ref<object | null>(null)
|
||||
const coupleDayPositionRef = ref<object | null>(null)
|
||||
const coupleDayLevelRef = ref<object | null>(null)
|
||||
const coupleDayLevelCountryRef = ref<object | null>(null)
|
||||
const followHistoryCountryRef = ref<object | null>(null)
|
||||
const followHistoryTimeRef = ref<object | null>(null)
|
||||
const followHistoryStartRef = ref<object | null>(null)
|
||||
const followHistoryEndRef = ref<object | null>(null)
|
||||
const leaveDocumentRef = ref<object | null>(null)
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef, //เขียนที่***
|
||||
leaveStartDate: leaveStartDateRef, //*วัน เดือน ปีเริ่มต้นลา
|
||||
leaveEndDate: leaveEndDateRef, //*วัน เดือน ปีสิ้นสุดลา
|
||||
leaveTotal: leaveTotalRef, //จำนวนวันลา
|
||||
leaveSalary: leaveSalaryRef, //เงินเดือนปัจจุบัน
|
||||
coupleDayName: coupleDayNameRef, //หมายเลขที่ติดต่อขณะลา
|
||||
coupleDayPosition: coupleDayPositionRef, //ตำแหน่งคู่สมรส
|
||||
coupleDayLevel: coupleDayLevelRef, //ระดับคู่สมรส
|
||||
coupleDayLevelCountry: coupleDayLevelCountryRef, //ไปปฏิบัติราชการ ณ ประเทศ
|
||||
followHistoryCountry: followHistoryCountryRef, //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryEnd: followHistoryEndRef, //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryTime: followHistoryTimeRef, //ประวัติการลาติดตามคู่สมรส
|
||||
followHistoryStart: followHistoryStartRef, //ประวัติการลาติดตามคู่สมรส
|
||||
leaveDetail: leaveDetailRef, //รายละเอียดการลา
|
||||
leaveAddress: leaveAddressRef, //สถานที่ติดต่อขณะลา
|
||||
leaveDocument: leaveDocumentRef,
|
||||
}
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, async () => {
|
||||
// console.log("data==>", props.data)
|
||||
formDataFollowSpouse.leaveWrote = props.data.leaveWrote
|
||||
formDataFollowSpouse.leaveStartDate = props.data.leaveStartDate
|
||||
formDataFollowSpouse.leaveEndDate = props.data.leaveEndDate
|
||||
formDataFollowSpouse.leaveTotal = props.data.leaveTotal
|
||||
formDataFollowSpouse.leaveDetail = props.data.leaveDetail
|
||||
formDataFollowSpouse.leaveDocument = props.data.leaveDocument
|
||||
})
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataFollowSpouse.leaveStartDate ?? null, EndLeaveDate: formDataFollowSpouse.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataFollowSpouse.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataFollowSpouse.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataFollowSpouse.leaveDocument.length > 0) {
|
||||
const blob = formDataFollowSpouse.leaveDocument[0].slice(0, formDataFollowSpouse.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataFollowSpouse.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
} //
|
||||
formData.append("type", formDataFollowSpouse.type) //
|
||||
formData.append("leaveStartDate", dateToISO(formDataFollowSpouse.leaveStartDate)) //
|
||||
formData.append("leaveEndDate", dateToISO(formDataFollowSpouse.leaveEndDate)) //
|
||||
formData.append("followHistoryStart", dateToISO(formDataFollowSpouse.followHistoryStart)) //
|
||||
formData.append("followHistoryEnd", dateToISO(formDataFollowSpouse.followHistoryEnd)) //
|
||||
formData.append("leaveWrote", formDataFollowSpouse.leaveWrote) //
|
||||
formData.append("leaveDetail", formDataFollowSpouse.leaveDetail) //
|
||||
formData.append("leaveSalaryText", formDataFollowSpouse.leaveSalaryText) //
|
||||
formData.append("leaveSalary", formDataFollowSpouse.leaveSalary) //
|
||||
formData.append("followHistoryTime", formDataFollowSpouse.followHistoryTime) //
|
||||
formData.append("followHistoryCountry", formDataFollowSpouse.followHistoryCountry) //
|
||||
formData.append("coupleDayLevelCountry", formDataFollowSpouse.coupleDayLevelCountry) //
|
||||
formData.append("coupleDayLevel", formDataFollowSpouse.coupleDayLevel) //
|
||||
formData.append("coupleDayPosition", formDataFollowSpouse.coupleDayPosition) //
|
||||
formData.append("coupleDayName", formDataFollowSpouse.coupleDayName) //
|
||||
formData.append("leaveTotal", formDataFollowSpouse.leaveTotal) //
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(formDataFollowSpouse.leaveStartDate, formDataFollowSpouse.leaveEndDate)
|
||||
formDataFollowSpouse.leaveTotal = newLeaveTotal
|
||||
console.log("test")
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataFollowSpouse.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.leaveStartDate != null ? date2Thai(formDataFollowSpouse.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
@update:model-value="updateLeaveTotal, FetchCheck()"
|
||||
:readonly="!formDataFollowSpouse.leaveStartDate"
|
||||
:min-date="formDataFollowSpouse.leaveStartDate ? new Date(formDataFollowSpouse.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!formDataFollowSpouse.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.leaveEndDate != null ? date2Thai(formDataFollowSpouse.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataFollowSpouse.leaveTotal"
|
||||
label="เป็นเวลา"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
/>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveSalaryRef"
|
||||
for="leaveSalaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formattSalary"
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 col-sm-12">
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveSalaryRef"
|
||||
for="leaveSalaryRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formattleaveSalaryText"
|
||||
label="เงินเดือนปัจจุบัน"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
hide-bottom-space
|
||||
ref="coupleDayNameRef"
|
||||
for="coupleDayNameRef"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
v-model="formDataFollowSpouse.coupleDayName"
|
||||
label="ชื่อคู่สมรส"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ชื่อคู่สมรส'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
hide-bottom-space
|
||||
ref="coupleDayPositionRef"
|
||||
for="coupleDayPositionRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.coupleDayPosition"
|
||||
label="ตำแหน่งคู่สมรส"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ตำแหน่งคู่สมรส'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="coupleDayLevelRef"
|
||||
for="coupleDayLevelRef"
|
||||
dense
|
||||
hide-bottom-space
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.coupleDayLevel"
|
||||
label="ระดับคู่สมรส"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ระดับคู่สมรส'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
<q-input
|
||||
class="col-12 col-sm-12"
|
||||
ref="coupleDayLevelCountryRef"
|
||||
for="coupleDayLevelCountryRef"
|
||||
hide-bottom-space
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.coupleDayLevelCountry"
|
||||
label="ไปปฏิบัติราชการ ณ ประเทศ"
|
||||
:readonly="!edit"
|
||||
:rules="[val => !!val || `${'ปฏิบัติราชการ ณ ประเทศ'}`]"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-weight-bold text-dark col-12">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.followHistoryStart"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryStartRef"
|
||||
for="followHistoryStartRef"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.followHistoryStart != null ? date2Thai(formDataFollowSpouse.followHistoryStart) : null"
|
||||
:label="`${'ตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataFollowSpouse.followHistoryEnd"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="followHistoryEndRef"
|
||||
for="followHistoryEndRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="formDataFollowSpouse.followHistoryEnd != null ? date2Thai(formDataFollowSpouse.followHistoryEnd) : null"
|
||||
:label="`${'ถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="followHistoryCountryRef"
|
||||
for="followHistoryCountryRef"
|
||||
v-model="formDataFollowSpouse.followHistoryCountry"
|
||||
label="ประเทศ"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกประเทศ'}`]"
|
||||
readonly
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
:readonly="formDataFollowSpouse.followHistoryTime !== ''"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="followHistoryTimeRef"
|
||||
for="followHistoryTimeRef"
|
||||
v-model="formDataFollowSpouse.followHistoryTime"
|
||||
label="เป็นเวลา"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataFollowSpouse.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit"
|
||||
/>
|
||||
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
bg-color="white"
|
||||
v-model="formDataFollowSpouse.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
multiple
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="(file, index) in formDataFollowSpouse.leaveDocument" :key="index" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.name }}
|
||||
</q-item-label>
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
322
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
Normal file
322
src/modules/05_leave/components/Forms/13_RehabilitationForm.vue
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
<script setup lang="ts">
|
||||
import { reactive, ref } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { RehabilitationForm } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { useRouter } from "vue-router"
|
||||
|
||||
/** Use */
|
||||
const dataStore = useLeaveStore()
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const { date2Thai, dialogConfirm, fails, dateToISO, success, messageError } = mixin
|
||||
const router = useRouter()
|
||||
const edit = ref<boolean>(true)
|
||||
const isSave = ref<boolean>(false)
|
||||
const files = ref<any>(null)
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
const leaveStartDateRef = ref<object | null>(null)
|
||||
const leaveEndDateRef = ref<object | null>(null)
|
||||
const leaveWroteRef = ref<object | null>(null)
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataRehabilitation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDocument: "",
|
||||
leaveDetail: "",
|
||||
leaveDraftDocument: "",
|
||||
})
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: RehabilitationForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = []
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key]
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
onSubmit()
|
||||
}
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("")
|
||||
const nameFileDraft = ref<string>("")
|
||||
const fileDocDataUpload = ref<File[]>([])
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file)
|
||||
})
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่น บันทึก */
|
||||
const onSubmit = async () => {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await saveFormData()
|
||||
},
|
||||
"ยืนยันการยื่นใบลา",
|
||||
"ต้องการยืนยันการยื่นใบลานี้ใช่หรือไม่ ?"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* check ว่าลาได้ไหม จาก api
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true)
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), { type: dataStore.typeId ?? null, StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null, EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null })
|
||||
.then((res: any) => {
|
||||
const data = res.data.result
|
||||
isLeave.value = data.isLeave
|
||||
if (data.isLeave === true) {
|
||||
formDataRehabilitation.leaveTotal = data.totalDate - data.sumDateWork - data.sumDateHoliday
|
||||
// formDataRehabilitation.leaveLast = data.totalDate
|
||||
} else {
|
||||
fails($q, "ไม่สามารถลาได้")
|
||||
}
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังชั่นบันทีกข้อมูลจาก formdata ส่งไปที่ Api
|
||||
*/
|
||||
async function saveFormData() {
|
||||
const formData = new FormData()
|
||||
if (formDataRehabilitation.leaveDraftDocument.length > 0) {
|
||||
const blobDrafe = formDataRehabilitation.leaveDraftDocument.slice(0, formDataRehabilitation.leaveDraftDocument[0].size)
|
||||
const newFileDraft = new File(blobDrafe, nameFileDraft.value, {
|
||||
type: formDataRehabilitation.leaveDraftDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDraftDocument", newFileDraft) //
|
||||
}
|
||||
|
||||
if (formDataRehabilitation.leaveDocument.length > 0) {
|
||||
const blob = formDataRehabilitation.leaveDocument[0].slice(0, formDataRehabilitation.leaveDocument[0].size)
|
||||
const newFile = new File(blob, nameFile.value, {
|
||||
type: formDataRehabilitation.leaveDocument[0].type,
|
||||
})
|
||||
formData.append("leaveDocument", newFile)
|
||||
} //
|
||||
formData.append("type", formDataRehabilitation.type) //
|
||||
formData.append("leaveStartDate", dateToISO(formDataRehabilitation.leaveStartDate)) //
|
||||
formData.append("leaveEndDate", dateToISO(formDataRehabilitation.leaveEndDate)) //
|
||||
formData.append("leaveWrote", formDataRehabilitation.leaveWrote) //
|
||||
formData.append("leaveDetail", formDataRehabilitation.leaveDetail) //
|
||||
|
||||
await http
|
||||
.post(config.API.leaveUser(), formData)
|
||||
.then((res: any) => {
|
||||
success($q, "บันทึกสำเร็จ")
|
||||
|
||||
router.push(`/leave`)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveWrote"
|
||||
class="col-12 col-sm-12"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:rules="[val => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:model-value="formDataRehabilitation.leaveStartDate != null ? date2Thai(formDataRehabilitation.leaveStartDate) : null"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate ? new Date(formDataRehabilitation.leaveStartDate.getTime() * 60 * 60 * 1000) : null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataRehabilitation.leaveStartDate"
|
||||
:model-value="formDataRehabilitation.leaveEndDate != null ? date2Thai(formDataRehabilitation.leaveEndDate) : null"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกลาถึงวันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input v-model="formDataRehabilitation.leaveDetail" class="col-12 col-md-12 col-sm-12" bg-color="white" dense outlined type="textarea" label="รายละเอียด" />
|
||||
|
||||
<div class="col-12 col-sm-6">
|
||||
<q-file v-model="formDataRehabilitation.leaveDocument" @added="fileUploadDoc" use-chips bg-color="white" dense outlined multiple label="เอกสารประกอบ">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
|
||||
<div class="col-12 row" v-if="!edit">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">เอกสารเพิ่มเติม</div>
|
||||
</div>
|
||||
<q-card bordered flat class="full-width">
|
||||
<q-list separator>
|
||||
<q-item v-for="file in files" :key="file.key" class="q-my-xs">
|
||||
<q-item-section>
|
||||
<q-item-label class="full-width ellipsis">
|
||||
{{ file.fileName }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item-label caption> </q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div v-if="formDataRehabilitation.leaveWrote && formDataRehabilitation.leaveStartDate && formDataRehabilitation.leaveEndDate" class="q-mt-md">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">ดาวน์โหลด/อัปโหลดแบบฟอร์ม</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-4 col-md-4 q-my-sm offset-sm-1 offset-md-2">
|
||||
<div class="column q-mx-xs">
|
||||
<div class="q-pl-sm text-weight-bold text-dark text-center">ดาวน์โหลด</div>
|
||||
<q-btn color="primary" icon="download" label="ดาวน์โหลดแบบฟอร์ม" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-10 col-sm-5 col-md-4 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<div class="q-pl-sm text-weight-bold text-dark text-center">อัปโหลด</div>
|
||||
<q-file v-model="formDataRehabilitation.leaveDraftDocument" dense label="แบบฟอร์ม" outlined bg-color="white" multiple accept="application/pdf">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn v-if="formDataRehabilitation.leaveDraftDocument" flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"><q-tooltip>อัปโหลด</q-tooltip></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn id="onSubmit" type="submit" unelevated dense class="q-px-md items-center btnBlue" label="ยื่นใบลา" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
84
src/modules/05_leave/components/Forms/Form.vue
Normal file
84
src/modules/05_leave/components/Forms/Form.vue
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useQuasar } from "quasar"
|
||||
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
|
||||
const $q = useQuasar()
|
||||
const mixin = useCounterMixin()
|
||||
const dataStore = useLeaveStore()
|
||||
const { date2Thai, success, messageError } = mixin
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
model: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
})
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
dateStart: new Date(),
|
||||
subject: "เรื่อง",
|
||||
who: "เรียนผู้ใด",
|
||||
requestName: "ชื่อผู้ยื่น",
|
||||
position: "ตำแหน่ง",
|
||||
level: "ระดับ",
|
||||
ocRequest: "สังกัด",
|
||||
leaveabsentDaySummon: "2",
|
||||
leaveUse: "1",
|
||||
leaveRemaining: "1",
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
// await FetchProfile()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<datepicker class="col-12 col-sm-4" menu-class-name="modalfix" v-model="formData.dateStart" :locale="'th'" autoApply borderless :enableTimePicker="false" week-start="0" readonly>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width datepicker"
|
||||
:model-value="dataStore.dateSendLeave != null ? date2Thai(dataStore.dateSendLeave) : null"
|
||||
:label="`${'วันที่ยื่นใบลา'}`"
|
||||
:rules="[val => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input class="col-12 col-sm-4" dense bg-color="white" outlined readonly v-model="dataStore.typeLeave" label="เรื่อง" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.dear" label="เรียน" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.fullName" label="ชื่อผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionName" label="ตำแหน่งผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.positionLevelName" label="ระดับผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-3" dense outlined readonly bg-color="white" v-model="dataStore.organizationName" label="สังกัดผู้ยื่นขอ" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveLimit" label="จำนวนสิทธิ์การลาที่ได้รับ" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveTotal" label="จำนวนสิทธิ์การลาที่ใช้ไป" />
|
||||
<q-input class="col-12 col-sm-4" dense outlined readonly bg-color="white" v-model="dataStore.leaveRemain" label="จำนวนสิทธิ์การลาคงเหลือ" />
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
237
src/modules/05_leave/components/ListCalendar.vue
Normal file
237
src/modules/05_leave/components/ListCalendar.vue
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** import type*/
|
||||
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 stort*/
|
||||
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 $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>("");
|
||||
|
||||
/** pagination*/
|
||||
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();
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
const leaveStatus = ref<string>("");
|
||||
|
||||
/**
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
* @param status การลา
|
||||
*/
|
||||
const onClickView = async (id: string, status: string) => {
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
leaveStatus.value = status;
|
||||
};
|
||||
|
||||
/** function closePopup*/
|
||||
async function onClickClose() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* function updateFilter
|
||||
* @param y ปีงบประมาณ
|
||||
* @param t ประเภทการลา
|
||||
* @param s สภานะ
|
||||
* @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();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function updatePagination
|
||||
* @param p หน้า
|
||||
* @param ps แถวต่อหน้า
|
||||
*/
|
||||
async function updatePagination(p: number, ps: number) {
|
||||
(page.value = await p), (pageSize.value = await ps);
|
||||
await fetchDataTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchDataTable();
|
||||
await fectOptionType();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Table
|
||||
:style="$q.screen.gt.xs ? 'height: 58.5vh' : ''"
|
||||
: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="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 == '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 />
|
||||
<q-btn
|
||||
v-if="props.row.status == 'NEW'"
|
||||
label="ขอยกเลิก"
|
||||
@click="onClickView(props.row.id, 'CANCEL')"
|
||||
size="13px"
|
||||
class="q-px-sm"
|
||||
outline
|
||||
dense
|
||||
color="orange"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<DialogDetail
|
||||
:modal="modal"
|
||||
:leaveId="leaveId"
|
||||
:leaveStatus="leaveStatus"
|
||||
:onClickClose="onClickClose"
|
||||
:leaveType="leaveType"
|
||||
:fetchDataTable="fetchDataTable"
|
||||
/>
|
||||
</template>
|
||||
288
src/modules/05_leave/components/Table.vue
Normal file
288
src/modules/05_leave/components/Table.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
/** import stort*/
|
||||
const leaveStore = useLeaveStore();
|
||||
const { filterOption } = leaveStore;
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
const $q = useQuasar();
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
pass: Number,
|
||||
notpass: Number,
|
||||
|
||||
name: String,
|
||||
icon: String,
|
||||
inputvisible: Array,
|
||||
editvisible: Boolean,
|
||||
grid: Boolean,
|
||||
inputShow: Boolean,
|
||||
maxPage: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
leaveType: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่น emit ค่าที่กำหนด
|
||||
*/
|
||||
const emit = defineEmits([
|
||||
"update:filter",
|
||||
"update:Pagination",
|
||||
"update:inputvisible",
|
||||
"update:editvisible",
|
||||
]);
|
||||
|
||||
const table = ref<any>(null);
|
||||
|
||||
/**
|
||||
* ตั้งค่า pagination
|
||||
*/
|
||||
const currentPage = ref<number>(1);
|
||||
const pagination = ref({
|
||||
sortBy: "desc",
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: Number(props.pageSize),
|
||||
});
|
||||
|
||||
/** updateVisible*/
|
||||
function updateVisible(value: []) {
|
||||
emit("update:inputvisible", value);
|
||||
}
|
||||
|
||||
/** 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>("");
|
||||
|
||||
/** function updateFilter*/
|
||||
function filterTable() {
|
||||
emit("update:filter", year.value, type.value, status.value, filter.value);
|
||||
}
|
||||
|
||||
/** function updatePagination*/
|
||||
function updatePagination(p: number, ps: number) {
|
||||
emit("update:Pagination", p, ps);
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSize(newPageSize: any) {
|
||||
currentPage.value = 1;
|
||||
pagination.value.rowsPerPage = newPageSize.rowsPerPage;
|
||||
}
|
||||
|
||||
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
|
||||
updatePagination(currentPage.value, pagination.value.rowsPerPage);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-py-sm row">
|
||||
<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
|
||||
<div class="items-center col-12 row q-col-gutter-sm">
|
||||
<datepicker
|
||||
v-if="leaveStore.tabValue === 'list'"
|
||||
menu-class-name="modalfix"
|
||||
v-model="year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="filterTable"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
lazy-rules
|
||||
outlined
|
||||
:model-value="Number(year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- ค้นหาข้อความใน table -->
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="type"
|
||||
:label="`${'ประเภทใบลา'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.typeOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
use-input
|
||||
@update:model-value="filterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'LeaveTypeOption'
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<q-select
|
||||
outlined
|
||||
dense
|
||||
v-model="status"
|
||||
:label="`${'สถานะ'}`"
|
||||
emit-value
|
||||
map-options
|
||||
option-label="name"
|
||||
:options="leaveStore.statusOptions"
|
||||
option-value="id"
|
||||
hide-bottom-space
|
||||
style="min-width: 150px"
|
||||
class="col-xs-12 col-sm-auto"
|
||||
use-input
|
||||
@update:model-value="filterTable"
|
||||
@filter="(inputValue:any,
|
||||
doneFn:Function) => filterOption(inputValue, doneFn,'LeaveStatusOption'
|
||||
) "
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template></q-select
|
||||
>
|
||||
<q-space />
|
||||
|
||||
<!-- แสดงคอลัมน์ใน table -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
@update:model-value="updateVisible"
|
||||
:display-value="$q.lang.table.columns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
:options="attrs.columns"
|
||||
options-dense
|
||||
option-value="name"
|
||||
map-options
|
||||
emit-value
|
||||
style="min-width: 150px"
|
||||
class="gt-xs"
|
||||
>
|
||||
<template> </template>
|
||||
</q-select>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div>
|
||||
<q-table
|
||||
ref="table"
|
||||
flat
|
||||
bordered
|
||||
class="custom-table2"
|
||||
v-bind="attrs"
|
||||
virtual-scroll
|
||||
:virtual-scroll-sticky-size-start="48"
|
||||
dense
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
:pagination="pagination"
|
||||
@update:pagination="updatePageSize"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium" v-html="col.label" />
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
<q-pagination
|
||||
v-model="currentPage"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(props.maxPage)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
></q-pagination>
|
||||
</template>
|
||||
<template #body="props">
|
||||
<slot v-bind="props" name="columns"></slot>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-color {
|
||||
color: #4154b3;
|
||||
}
|
||||
|
||||
.custom-table2 {
|
||||
.q-table tr:nth-child(odd) td {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.q-table tr:nth-child(even) td {
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.q-table thead tr {
|
||||
background: #ecebeb;
|
||||
}
|
||||
|
||||
.q-table thead tr th {
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.q-table td:nth-of-type(2) {
|
||||
z-index: 3 !important;
|
||||
}
|
||||
|
||||
.q-table th:nth-of-type(2),
|
||||
.q-table td:nth-of-type(2) {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this will be the loading indicator */
|
||||
.q-table thead tr:last-child th {
|
||||
/* height of all previous header rows */
|
||||
top: 48px;
|
||||
}
|
||||
|
||||
.q-table thead tr:first-child th {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(props);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
||||
<div class="col">{{ props.data.absentDaySummon }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่</div>
|
||||
<div class="col">{{ props.data.absentDayLocation }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลงวันที่</div>
|
||||
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ ที่</div>
|
||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อภรรยา</div>
|
||||
<div class="col">{{ props.data.wifeDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่คลอด</div>
|
||||
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
69
src/modules/05_leave/components/formDetail/formHajj.vue
Normal file
69
src/modules/05_leave/components/formDetail/formHajj.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
81
src/modules/05_leave/components/formDetail/formHoliday.vue
Normal file
81
src/modules/05_leave/components/formDetail/formHoliday.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
||||
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
||||
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
79
src/modules/05_leave/components/formDetail/formLeave.vue
Normal file
79
src/modules/05_leave/components/formDetail/formLeave.vue
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">
|
||||
ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
|
||||
</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ สถานที่</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
45
src/modules/05_leave/components/formDetail/formMain.vue
Normal file
45
src/modules/05_leave/components/formDetail/formMain.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(props);
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรียน</div>
|
||||
<div class="col">{{ props.data.notification }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
|
||||
<div class="col">{{ props.data.fullname }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.positionName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.positionLevelName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.organizationName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
105
src/modules/05_leave/components/formDetail/formSpouse.vue
Normal file
105
src/modules/05_leave/components/formDetail/formSpouse.vue
Normal file
|
|
@ -0,0 +1,105 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayPosition }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
|
||||
<div class="col">{{ props.data.coupleDayLevelCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
</div>
|
||||
<div class="row q-mt-xs">
|
||||
<div class="col text-grey-8">
|
||||
<div class="q-ml-md" style="list-style-type: circle">
|
||||
<li>ประเทศ</li>
|
||||
<li>จำนวนวัน</li>
|
||||
<li>ตั้งแต่วันที่</li>
|
||||
<li>ถึงวันที่</li>
|
||||
<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ props.data.coupleDayCountryHistory }}</div>
|
||||
<div>{{ props.data.coupleDayTotalHistory }}</div>
|
||||
<div>{{ props.data.coupleDayStartDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDayEndDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDaySumTotalHistory }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
103
src/modules/05_leave/components/formDetail/formStudy.vue
Normal file
103
src/modules/05_leave/components/formDetail/formStudy.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveCount }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ศึกษาวิชา</div>
|
||||
<div class="col">{{ props.data.studyDaySubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ขั้นปริญญา</div>
|
||||
<div class="col">{{ props.data.studyDayDegreeLevel }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อสถานศึกษา</div>
|
||||
<div class="col">{{ props.data.studyDayUniversityName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
94
src/modules/05_leave/components/formDetail/formUpasom.vue
Normal file
94
src/modules/05_leave/components/formDetail/formUpasom.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">{{ props.data.leaveTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่บวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayLocationName }}
|
||||
{{ props.data.ordainDayLocationAddress }}
|
||||
{{ props.data.ordainDayLocationNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayBuddhistLentName }}
|
||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue