hrms-bangkok/hrms-user
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

เพิ่มปุ่มลบ/refactor

Browse source
This commit is contained in:
AnandaTon 2024-01-12 17:45:20 +07:00
parent 01b550520e
commit aa76e7d030
30 changed files with 8420 additions and 7699 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/api/leave/api.leave.ts
View file

@ -1,14 +1,15 @@
import env from "../index" import env from "../index";
const retirementResign = `${env.API_URI}/retirement` const retirementResign = `${env.API_URI}/retirement`;
const leave = `${env.API_URI}/leave` const leave = `${env.API_URI}/leave`;
const holiday = `${env.API_URI}/metadata/holiday/` const holiday = `${env.API_URI}/metadata/holiday/`;
export default { export default {
listUser: () => `${retirementResign}/resign/user`, listUser: () => `${retirementResign}/resign/user`,
listResign: () => `${retirementResign}/resign`, listResign: () => `${retirementResign}/resign`,
resingByid: (id: string) => `${retirementResign}/resign/${id}`, resingByid: (id: string) => `${retirementResign}/resign/${id}`,
questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`, questionnaireByid: (id: string) =>
`${retirementResign}/resign/questionnaire/${id}`,
listquestionnaire: () => `${retirementResign}/resign/questionnaire`, listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
// คำถาม // คำถาม
questionList: () => `${retirementResign}/resign/questionnaire/question`, questionList: () => `${retirementResign}/resign/questionnaire/question`,
@ -26,6 +27,8 @@ export default {
leaveCheck: () => `${leave}/user/check`, leaveCheck: () => `${leave}/user/check`,
leaveReport: (id: string) => `${leave}/report/${id}`, leaveReport: (id: string) => `${leave}/report/${id}`,
leaveSendReport: () => `${leave}/report-template/docx`, leaveSendReport: () => `${leave}/report-template/docx`,
leaveDocumentId: (id: string) => `${leave}/user/file/document/${id}`,
listHolidayHistoryYearMonth: (year: number, month: number) => `${holiday}${year}/${month}`, listHolidayHistoryYearMonth: (year: number, month: number) =>
} `${holiday}${year}/${month}`,
};

325
src/modules/05_leave/components/Calendar.vue
View file

@ -1,46 +1,50 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, watch } from "vue" import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar" import { useQuasar } from "quasar";
import keycloak from "@/plugins/keycloak" import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http" import http from "@/plugins/http";
import config from "@/app.config" import config from "@/app.config";
/**import calendar*/ /**import calendar*/
import FullCalendar from "@fullcalendar/vue3" import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid" import dayGridPlugin from "@fullcalendar/daygrid";
// import type { CalendarOptions } from "@fullcalendar/core" // import type { CalendarOptions } from "@fullcalendar/core"
import timeGridPlugin from "@fullcalendar/timegrid" import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction" import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all" import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list" import listPlugin from "@fullcalendar/list";
/** import type*/ /** import type*/
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts" import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
import type { DataCalendar, LeaveType } from "@/modules/05_leave/interface/response/leave" import type {
DataCalendar,
LeaveType,
} from "@/modules/05_leave/interface/response/leave";
/** import componest*/ /** import componest*/
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue" import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
/** import stort*/ /** import stort*/
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin";
// import { aR } from "@fullcalendar/core/internal-common" // import { aR } from "@fullcalendar/core/internal-common"
/**ตัวแปรที่ใช้ */
const mixin = useCounterMixin() const mixin = useCounterMixin();
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai, dateToISO } = mixin const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
const $q = useQuasar();
const $q = useQuasar() const emit = defineEmits(["update:dateYear"]);
const fullName = ref<string>("");
const emit = defineEmits(["update:dateYear"]) const mainData = ref<DataCalendar[]>([]);
const keycloakId = ref<string>(
const fullName = ref<string>("") keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
const mainData = ref<DataCalendar[]>([]) );
const modal = ref<boolean>(false);
const keycloakId = ref<string>(keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "") const leaveId = ref<string>("");
/** /**
* Option ของปฏิทิน * Option ของปฏิทิน
*/ */
const fullCalendar = ref<any>() //ref calendar const fullCalendar = ref<any>(); //ref calendar
const calendarOptions = ref<any>({ const calendarOptions = ref<any>({
plugins: [ plugins: [
dayGridPlugin, dayGridPlugin,
@ -65,38 +69,43 @@ const calendarOptions = ref<any>({
displayEventTime: false, displayEventTime: false,
editable: true, editable: true,
events: [], events: [],
}) });
/**Map ตัวแปร dateMonth */
const dateMonth = ref<DataDateMonthObject>({ const dateMonth = ref<DataDateMonthObject>({
month: new Date().getMonth(), month: new Date().getMonth(),
year: new Date().getFullYear(), year: new Date().getFullYear(),
}) });
/** function เรียกข้อมูล calendar*/ /** function เรียกข้อมูล calendar*/
async function fetchDataCalendar() { async function fetchDataCalendar() {
showLoader() showLoader();
await http await http
.post(config.API.leaveCalendar(), { .post(config.API.leaveCalendar(), {
year: dateMonth.value.year, year: dateMonth.value.year,
}) })
.then(res => { .then((res) => {
mainData.value = res.data.result mainData.value = res.data.result;
const double_name = [...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId))] const double_name = [
filterLists.value = [] ...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
];
filterLists.value = [];
for (let i = 1; i <= double_name.length; i++) { for (let i = 1; i <= double_name.length; i++) {
const name = double_name[i - 1] const name = double_name[i - 1];
const filterName = { const filterName = {
id: name, id: name,
name: convertKeycloakId(name), name: convertKeycloakId(name),
color: name === keycloakId.value ? "green" : "grey", color: name === keycloakId.value ? "green" : "grey",
} };
filterLists.value.push(filterName) filterLists.value.push(filterName);
} }
console.log(double_name) console.log(double_name);
if (filterVal.value.length !== 0) { if (filterVal.value.length !== 0) {
const data = mainData.value.filter((e: any) => e.keycloakId === keycloakId.value) const data = mainData.value.filter(
(e: any) => e.keycloakId === keycloakId.value
);
const event = data const event = data
.filter((x: any) => x.status != "REJECT" && x.status != "DELETE") .filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
@ -104,45 +113,57 @@ async function fetchDataCalendar() {
id: e.id, id: e.id,
title: `${e.fullName} (${e.leaveTypeName})`, title: `${e.fullName} (${e.leaveTypeName})`,
start: e.leaveStartDate, start: e.leaveStartDate,
end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(), end: new Date(
new Date(e.leaveEndDate).setHours(23, 59, 59)
).toISOString(),
allDay: e.leaveStartDate === e.leaveEndDate ? true : false, allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
textColor: "black", textColor: "black",
})) }));
calendarOptions.value.events = event calendarOptions.value.events = event;
console.log(calendarOptions.value.events) console.log(calendarOptions.value.events);
} }
}) })
.catch(err => { .catch((err) => {
messageError($q, err) messageError($q, err);
}) })
.finally(() => { .finally(() => {
hideLoader() hideLoader();
}) });
await fetchData() await fetchData();
} }
/** /**
* fetch วันหยุดในปฏิทิน * fetch วันหยุดในปฏิทิน
*/ */
const fetchData = async () => { const fetchData = async () => {
showLoader() showLoader();
await http await http
.get(config.API.listHolidayHistoryYearMonth(dateMonth.value.year, dateMonth.value.month + 1)) .get(
.then(res => { config.API.listHolidayHistoryYearMonth(
const dataNormal = res.data.result.normal dateMonth.value.year,
const dataSixDays = res.data.result.sixDays dateMonth.value.month + 1
const data = dataNormal )
)
.then((res) => {
const dataNormal = res.data.result.normal;
const dataSixDays = res.data.result.sixDays;
const data = dataNormal;
const event = data.map((e: any) => ({ const event = data.map((e: any) => ({
id: e.id, id: e.id,
title: `${e.name} `, title: `${e.name} `,
start: e.holidayDate, start: e.holidayDate,
end: new Date(new Date(e.holidayDate).setHours(23, 59, 59)).toISOString(), end: new Date(
new Date(e.holidayDate).setHours(23, 59, 59)
).toISOString(),
allDay: e.holidayDate === e.holidayDate ? true : false, allDay: e.holidayDate === e.holidayDate ? true : false,
color: " #CCE5FF", color: " #CCE5FF",
textColor: "#0080FF", textColor: "#0080FF",
})) }));
calendarOptions.value.events = [...calendarOptions.value.events, ...event] calendarOptions.value.events = [
...calendarOptions.value.events,
...event,
];
// const dataSix = dataSixDays // const dataSix = dataSixDays
// const eventSix = dataSix.map((e: any) => ({ // const eventSix = dataSix.map((e: any) => ({
// id: e.id, // id: e.id,
@ -154,32 +175,33 @@ const fetchData = async () => {
// textColor: "#FF8000", // textColor: "#FF8000",
// })) // }))
// calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix] // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
console.log(calendarOptions.value.events) console.log(calendarOptions.value.events);
}) })
.catch(e => { .catch((e) => {
messageError($q, e) messageError($q, e);
}) })
.finally(async () => { .finally(async () => {
hideLoader() hideLoader();
}) });
} };
/**function แปลงkeycloakId */
function convertKeycloakId(id: any) { function convertKeycloakId(id: any) {
const filterName = mainData.value.find((e: any) => e.keycloakId === id) const filterName = mainData.value.find((e: any) => e.keycloakId === id);
return filterName?.fullName return filterName?.fullName;
} }
const leaveType = ref<LeaveType[]>([])
/** function เรียกประเภทการลา */ /** function เรียกประเภทการลา */
const leaveType = ref<LeaveType[]>([]);
async function fectOptionType() { async function fectOptionType() {
await http await http
.get(config.API.leaveType()) .get(config.API.leaveType())
.then(async res => { .then(async (res) => {
leaveType.value = res.data.result leaveType.value = res.data.result;
})
.catch(err => {
messageError($q, err)
}) })
.catch((err) => {
messageError($q, err);
});
} }
/** /**
@ -187,66 +209,72 @@ async function fectOptionType() {
* @param val datepicker แบบเลือกปีและเดือน * @param val datepicker แบบเลือกปีและเดือน
*/ */
function monthYearThai(val: DataDateMonthObject) { function monthYearThai(val: DataDateMonthObject) {
if (val == null) return "" if (val == null) return "";
else return monthYear2Thai(val.month, val.year) else return monthYear2Thai(val.month, val.year);
} }
/** function อัปเดท Calendar */ /** function อัปเดท Calendar */
async function updateMonth() { async function updateMonth() {
await fetchDataCalendar() await fetchDataCalendar();
await fetchData() await fetchData();
const calen = fullCalendar.value.getApi() const calen = fullCalendar.value.getApi();
const date = new Date(dateMonth.value.year, dateMonth.value.month) const date = new Date(dateMonth.value.year, dateMonth.value.month);
calen.gotoDate(date) calen.gotoDate(date);
} }
const modal = ref<boolean>(false)
const leaveId = ref<string>("")
/** /**
* function openPopupDateail * function openPopupDateail
* @param id การลา * @param id การลา
*/ */
async function onCilckview(id: string) { async function onCilckview(id: string) {
modal.value = true modal.value = true;
leaveId.value = id leaveId.value = id;
} }
/** function closePopup*/ /** function closePopup*/
async function onClickClose() { async function onClickClose() {
modal.value = false modal.value = false;
} }
/** filter calendar left */ /** filter calendar left */
const filterLists = ref<any>([]) const filterLists = ref<any>([]);
const filterVal = ref<any>([]) const filterVal = ref<any>([]);
/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
watch( watch(
() => filterVal.value, () => filterVal.value,
() => { () => {
const eventData = filterVal.value.map((item: any) => { const eventData = filterVal.value.map((item: any) => {
return mainData.value return mainData.value
.filter((e: DataCalendar) => e.keycloakId === item && e.status != "REJECT" && e.status != "DELETE") .filter(
.map(e => ({ (e: DataCalendar) =>
e.keycloakId === item &&
e.status != "REJECT" &&
e.status != "DELETE"
)
.map((e) => ({
id: e.id, id: e.id,
title: `${e.fullName} (${e.leaveTypeName})`, title: `${e.fullName} (${e.leaveTypeName})`,
start: e.leaveStartDate, start: e.leaveStartDate,
end: new Date(new Date(e.leaveEndDate).setHours(23, 59, 59)).toISOString(), end: new Date(
new Date(e.leaveEndDate).setHours(23, 59, 59)
).toISOString(),
allDay: e.leaveStartDate === e.leaveEndDate ? true : false, allDay: e.leaveStartDate === e.leaveEndDate ? true : false,
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC", color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
textColor: "black", textColor: "black",
})) }));
}) });
const allEventData = [].concat(...eventData) const allEventData = [].concat(...eventData);
calendarOptions.value.events = allEventData calendarOptions.value.events = allEventData;
} }
) );
/**Hook */
onMounted(async () => { onMounted(async () => {
filterVal.value.push(keycloakId.value) filterVal.value.push(keycloakId.value);
await fetchDataCalendar() await fetchDataCalendar();
await fectOptionType() await fectOptionType();
}) });
</script> </script>
<template> <template>
@ -255,8 +283,18 @@ onMounted(async () => {
<q-card class="col-12" flat bordered> <q-card class="col-12" flat bordered>
<div class="q-gutter-sm col-12"> <div class="q-gutter-sm col-12">
<q-list class="rounded-borders q-pt-sm" dense> <q-list class="rounded-borders q-pt-sm" dense>
<q-item v-for="(item, i) in filterLists" :key="i" tag="label" v-ripple> <q-item
<q-checkbox size="sm" v-model="filterVal" :val="item.id" :color="item.color" /> 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-section>
<q-item-label>{{ item.name }}</q-item-label> <q-item-label>{{ item.name }}</q-item-label>
</q-item-section> </q-item-section>
@ -270,16 +308,40 @@ onMounted(async () => {
<div class="q-mt-sm col-12"> <div class="q-mt-sm col-12">
<div class="row col-12 q-gutter-sm"> <div class="row col-12 q-gutter-sm">
<div class="demo-app-main"> <div class="demo-app-main">
<q-card bordered flat class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0"> <q-card
bordered
flat
class="q-pa-sm q-mb-sm col-12 row bg-grey-1 shadow-0"
>
<div class="items-center col-12 row q-col-gutter-sm"> <div class="items-center col-12 row q-col-gutter-sm">
<!-- filter เลือกเดือนปี --> <!-- filter เลือกเดือนปี -->
<datepicker v-model="dateMonth" :locale="'th'" autoApply month-picker :enableTimePicker="false" @update:modelValue="updateMonth"> <datepicker
v-model="dateMonth"
:locale="'th'"
autoApply
month-picker
:enableTimePicker="false"
@update:modelValue="updateMonth"
>
<template #year="{ year }">{{ year + 543 }}</template> <template #year="{ year }">{{ year + 543 }}</template>
<template #year-overlay-value="{ value }">{{ parseInt(value + 543) }}</template> <template #year-overlay-value="{ value }">{{
parseInt(value + 543)
}}</template>
<template #trigger> <template #trigger>
<q-input :model-value="monthYearThai(dateMonth)" dense outlined bg-color="white" style="width: 130px"> <q-input
:model-value="monthYearThai(dateMonth)"
dense
outlined
bg-color="white"
style="width: 130px"
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon> <q-icon
name="event"
class="cursor-pointer"
style="color: var(--q-primary)"
>
</q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
@ -288,14 +350,29 @@ onMounted(async () => {
</q-card> </q-card>
<div class="main-content"> <div class="main-content">
<FullCalendar ref="fullCalendar" class="demo-app-calendar" :options="calendarOptions"> <FullCalendar
ref="fullCalendar"
class="demo-app-calendar"
:options="calendarOptions"
>
<template v-slot:eventContent="arg"> <template v-slot:eventContent="arg">
<div v-if="arg.event.textColor == 'black'" class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`"> <div
<div class="textHover col-10" @click="onCilckview(arg.event.id)"> v-if="arg.event.textColor == 'black'"
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 }} {{ arg.event.title }}
</div> </div>
</div> </div>
<div v-else class="row col-12 items-center no-wrap" :style="`background: + ${arg.event.color}`"> <div
v-else
class="row col-12 items-center no-wrap"
:style="`background: + ${arg.event.color}`"
>
<div class="textHover col-10"> <div class="textHover col-10">
{{ arg.event.title }} {{ arg.event.title }}
</div> </div>
@ -307,15 +384,30 @@ onMounted(async () => {
</div> </div>
<div class="row q-col-gutter-lg justify-end"> <div class="row q-col-gutter-lg justify-end">
<div class="items-center row"> <div class="items-center row">
<q-icon size="10px" color="blue" name="mdi-circle" class="q-mr-sm" /> <q-icon
size="10px"
color="blue"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">วันหยุด</span> <span class="text-caption text-grey-8">วันหยุด</span>
</div> </div>
<div class="items-center row"> <div class="items-center row">
<q-icon size="10px" color="green-7" name="mdi-circle" class="q-mr-sm" /> <q-icon
size="10px"
color="green-7"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">การลาของฉัน</span> <span class="text-caption text-grey-8">การลาของฉัน</span>
</div> </div>
<div class="items-center row"> <div class="items-center row">
<q-icon size="10px" color="grey-6" name="mdi-circle" class="q-mr-sm" /> <q-icon
size="10px"
color="grey-6"
name="mdi-circle"
class="q-mr-sm"
/>
<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span> <span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
</div> </div>
</div> </div>
@ -323,7 +415,12 @@ onMounted(async () => {
</div> </div>
</div> </div>
<DialogDetail :modal="modal" :leaveId="leaveId" :onClickClose="onClickClose" :leaveType="leaveType" /> <DialogDetail
:modal="modal"
:leaveId="leaveId"
:onClickClose="onClickClose"
:leaveType="leaveType"
/>
</template> </template>
<style scope lang="scss"> <style scope lang="scss">

504
src/modules/05_leave/components/DialogDetail.vue
View file

@ -1,37 +1,54 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, watch } from "vue" import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar" import { useQuasar } from "quasar";
import http from "@/plugins/http" import http from "@/plugins/http";
import config from "@/app.config" import config from "@/app.config";
/** import type*/ /** import type*/
import type { FremDetail, FormDelete, FormDeleteRef, FromCancelDetail } from "@/modules/05_leave/interface/response/leave" import type {
FremDetail,
FormDelete,
FormDeleteRef,
FromCancelDetail,
} from "@/modules/05_leave/interface/response/leave";
/** import componest*/ /** import componest*/
import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue" import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue" import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue" import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue" import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue";
import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue" import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue";
import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue" import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue";
import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue" import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue";
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue" import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue";
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue" import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue";
import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue" import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue";
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue" import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue";
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue" import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";
/** import stort*/ /** import stort*/
import { useCounterMixin } from "@/stores/mixin" import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store" import { useLeaveStore } from "@/modules/05_leave/store";
const dataStore = useLeaveStore() /**ตัวแปร */
const { convertStatud } = dataStore const dataStore = useLeaveStore();
const mixin = useCounterMixin() const { convertStatud } = dataStore;
const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm, calculateDurationYmd } = mixin const titleMain = ref<string>("รายละเอียดการลาของ");
const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
const $q = useQuasar() const titleName = ref<string>("");
const mixin = useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
date2Thai,
success,
dialogConfirm,
calculateDurationYmd,
} = mixin;
const $q = useQuasar();
/**Prop */
const props = defineProps({ const props = defineProps({
modal: { modal: {
type: Boolean, type: Boolean,
@ -57,13 +74,10 @@ const props = defineProps({
type: Function, type: Function,
require: true, require: true,
}, },
}) });
const titleMain = ref<string>("รายละเอียดการลาของ")
const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ")
const titleName = ref<string>("")
/**checkForm Form การลา*/ /**checkForm Form การลา*/
const checkForm = ref<string>("") const checkForm = ref<string>("");
/** Form รายละเอียดข้อมูล*/ /** Form รายละเอียดข้อมูล*/
const formData = reactive<FremDetail>({ const formData = reactive<FremDetail>({
@ -125,8 +139,9 @@ const formData = reactive<FremDetail>({
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส) coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
approveStep: "", approveStep: "",
dear: "", dear: "",
leaveRange: "" leaveRange: "",
}) });
/** Form รายละเอียดข้อมูล*/ /** Form รายละเอียดข้อมูล*/
const formDataCancle = reactive<FromCancelDetail>({ const formDataCancle = reactive<FromCancelDetail>({
id: "", id: "",
@ -142,103 +157,131 @@ const formDataCancle = reactive<FromCancelDetail>({
leaveTotal: 0, leaveTotal: 0,
leaveStartDate: new Date(), leaveStartDate: new Date(),
leaveEndDate: new Date(), leaveEndDate: new Date(),
}) });
/** form ขอยกเลิก*/ /** form ขอยกเลิก*/
const formDelete = reactive<FormDelete>({ const formDelete = reactive<FormDelete>({
writeAt: "", writeAt: "",
reason: "", reason: "",
doc: null, doc: null,
}) });
/**Validate ข้อมูล */ /**Validate ข้อมูล */
const writeAtRef = ref<Object | null>(null) const writeAtRef = ref<Object | null>(null);
const reasonRef = ref<Object | null>(null) const reasonRef = ref<Object | null>(null);
const docRef = ref<Object | null>(null) const docRef = ref<Object | null>(null);
const formDeleteRef: FormDeleteRef = { const formDeleteRef: FormDeleteRef = {
writeAt: writeAtRef, writeAt: writeAtRef,
reason: reasonRef, reason: reasonRef,
doc: docRef, doc: docRef,
} };
/** /**
* function เรียกข้อมูลการลา * function เรียกข้อมูลการลา
* @param id การลา * @param id การลา
*/ */
async function fetchDataDetail(id: string) { async function fetchDataDetail(id: string) {
showLoader() showLoader();
await http await http
.get(config.API.leaveUserId(id), {}) .get(config.API.leaveUserId(id), {})
.then(res => { .then((res) => {
const data = res.data.result const data = res.data.result;
titleName.value = data.fullName ?? "-" titleName.value = data.fullName ?? "-";
formData.id = data.id ?? "-" formData.id = data.id ?? "-";
formData.leaveTypeName = data.leaveTypeName ?? "-" formData.leaveTypeName = data.leaveTypeName ?? "-";
formData.leaveTypeId = data.leaveTypeId ?? "-" formData.leaveTypeId = data.leaveTypeId ?? "-";
formData.fullname = data.fullName ?? "-" formData.fullname = data.fullName ?? "-";
formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave) formData.dateSendLeave =
formData.status = data.status ?? "-" data.dateSendLeave && date2Thai(data.dateSendLeave);
formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate) formData.status = data.status ?? "-";
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate) formData.leaveDateStart =
formData.leaveCount = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate) data.leaveStartDate && date2Thai(data.leaveStartDate);
formData.leaveWrote = data.leaveWrote ?? "-" formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
formData.leaveAddress = data.leaveAddress ?? "-" formData.leaveCount = calculateDurationYmd(
formData.leaveNumber = data.leaveNumber ?? "-" data.leaveStartDate,
formData.leaveDetail = data.leaveDetail ?? "-" data.leaveEndDate
formData.leaveDocument = data.leaveDocument );
formData.leaveDocument = data.leaveDocument formData.leaveWrote = data.leaveWrote ?? "-";
formData.leaveRange = data.leaveRange formData.leaveAddress = data.leaveAddress ?? "-";
formData.leaveLastStart = data.leaveLastStart && date2Thai(data.leaveLastStart) formData.leaveNumber = data.leaveNumber ?? "-";
formData.leaveLastEnd = data.leaveLastStart && date2Thai(data.leaveLastEnd) formData.leaveDetail = data.leaveDetail ?? "-";
formData.leaveDocument = data.leaveDocument;
formData.leaveDocument = data.leaveDocument;
formData.leaveRange = data.leaveRange;
formData.leaveLastStart =
data.leaveLastStart && date2Thai(data.leaveLastStart);
formData.leaveLastEnd =
data.leaveLastStart && date2Thai(data.leaveLastEnd);
// formData.leaveTotal = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate) // formData.leaveTotal = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
formData.leaveTotal = data.leaveTotal formData.leaveTotal = data.leaveTotal;
formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate) formData.leavebirthDate =
formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate) data.leaveBirthDate && date2Thai(data.leaveBirthDate);
formData.leaveSalary = data.leaveSalary ? data.leaveSalary.toLocaleString("th-TH") : "-" formData.leavegovernmentDate =
formData.leaveSalaryText = data.leaveSalaryText ?? "-" data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
formData.wifeDayName = data.wifeDayName ?? "-" formData.leaveSalary = data.leaveSalary
formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn) ? data.leaveSalary.toLocaleString("th-TH")
formData.restDayOldTotal = data.restDayOldTotal ?? "-" : "-";
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-" formData.leaveSalaryText = data.leaveSalaryText ?? "-";
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช" formData.wifeDayName = data.wifeDayName ?? "-";
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-" formData.wifeDayDateBorn =
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-" data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-" formData.restDayOldTotal = data.restDayOldTotal ?? "-";
formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination) formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-" formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-" formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
formData.hajjDayStatus = data.hajjDayStatus ? "เคย" : "ไม่เคยไปประกอบพิธีฮัจญ์" formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
formData.absentDaySummon = data.absentDaySummon ?? "-" formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
formData.absentDayLocation = data.absentDayLocation ?? "-" formData.ordainDayOrdination =
formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate) data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
formData.absentDayGetIn = data.absentDayGetIn ?? "-" formData.ordainDayBuddhistLentName =
formData.absentDayAt = data.absentDayAt ?? "-" data.ordainDayBuddhistLentName ?? "-";
formData.studyDaySubject = data.studyDaySubject ?? "-" formData.ordainDayBuddhistLentAddress =
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-" data.ordainDayBuddhistLentAddress ?? "-";
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-" formData.hajjDayStatus = data.hajjDayStatus
formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-" ? "เคย"
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-" : "ไม่เคยไปประกอบพิธีฮัจญ์";
formData.studyDayCountry = data.studyDayCountry ?? "-" formData.absentDaySummon = data.absentDaySummon ?? "-";
formData.studyDayScholarship = data.studyDayScholarship ?? "-" formData.absentDayLocation = data.absentDayLocation ?? "-";
formData.coupleDayName = data.coupleDayName ?? "-" formData.absentDayRegistorDate =
formData.coupleDayPosition = data.coupleDayPosition ?? "-" data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
formData.coupleDayLevel = data.coupleDayLevel ?? "-" formData.absentDayGetIn = data.absentDayGetIn ?? "-";
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-" formData.absentDayAt = data.absentDayAt ?? "-";
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-" formData.studyDaySubject = data.studyDaySubject ?? "-";
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-" formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory && date2Thai(data.coupleDayStartDateHistory) formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory) formData.studyDayTrainingSubject =
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-" data.studyDayTrainingSubject ?? "-" ?? "-";
formData.approveStep = data.approveStep ?? "-" formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
formData.dear = data.dear ?? "-" formData.studyDayCountry = data.studyDayCountry ?? "-";
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName, formData.ordainDayLocationName, formData.studyDayTrainingSubject) 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,
formData.ordainDayLocationName,
formData.studyDayTrainingSubject
);
}) })
.catch(err => { .catch((err) => {
props.onClickClose?.() props.onClickClose?.();
messageError($q, err) messageError($q, err);
}) })
.finally(() => { .finally(() => {
hideLoader() hideLoader();
}) });
} }
/** /**
@ -246,38 +289,43 @@ async function fetchDataDetail(id: string) {
* @param leaveTypeId ประเภทการลา * @param leaveTypeId ประเภทการลา
* @param leaveTypeName ประเภทการลา * @param leaveTypeName ประเภทการลา
*/ */
function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLocationName: string, studyDayTrainingSubject: string) { function checkLeaveType(
console.log(leaveTypeName) leaveTypeId: string,
console.log(leaveTypeId) leaveTypeName: string,
console.log(ordainDayLocationName) ordainDayLocationName: string,
studyDayTrainingSubject: string
) {
console.log(leaveTypeName);
console.log(leaveTypeId);
console.log(ordainDayLocationName);
if (props.leaveType) { if (props.leaveType) {
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId) const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
const type = filtertype.code const type = filtertype.code;
console.log(type) console.log(type);
if (type === "LV-001" || type === "LV-002" || type === "LV-003") { if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
checkForm.value = "FormLeave" checkForm.value = "FormLeave";
} else if (type === "LV-004") { } else if (type === "LV-004") {
checkForm.value = "FormChildbirth" checkForm.value = "FormChildbirth";
} else if (type === "LV-005") { } else if (type === "LV-005") {
checkForm.value = "FormHoliday" checkForm.value = "FormHoliday";
} else if (type === "LV-006" && ordainDayLocationName === "") { } else if (type === "LV-006" && ordainDayLocationName === "") {
checkForm.value = "FormHajj" checkForm.value = "FormHajj";
} else if (type === "LV-006") { } else if (type === "LV-006") {
checkForm.value = "FormUpasom" checkForm.value = "FormUpasom";
} else if (type === "LV-007") { } else if (type === "LV-007") {
checkForm.value = "FormCheckSelect" checkForm.value = "FormCheckSelect";
} else if (type === "LV-008" && studyDayTrainingSubject === "") { } else if (type === "LV-008" && studyDayTrainingSubject === "") {
checkForm.value = "FormStudy" checkForm.value = "FormStudy";
} else if (type === "LV-008") { } else if (type === "LV-008") {
checkForm.value = "FormLeaveToTraining" checkForm.value = "FormLeaveToTraining";
} else if (type === "LV-009") { } else if (type === "LV-009") {
checkForm.value = "FormLeaveToWorkInternational" checkForm.value = "FormLeaveToWorkInternational";
} else if (type === "LV-010") { } else if (type === "LV-010") {
checkForm.value = "FormSpouse" checkForm.value = "FormSpouse";
} else if (type === "LV-011") { } else if (type === "LV-011") {
checkForm.value = "FormVocationalRehabilitation" checkForm.value = "FormVocationalRehabilitation";
} }
} }
} }
@ -287,95 +335,100 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLoc
* @param id ยกเลิกการลา * @param id ยกเลิกการลา
*/ */
async function fetchDataCancelDetail(id: string) { async function fetchDataCancelDetail(id: string) {
showLoader() showLoader();
await http await http
.get(config.API.leaveCancelById(id)) .get(config.API.leaveCancelById(id))
.then(res => { .then((res) => {
const data = res.data.result const data = res.data.result;
formDataCancle.leaveTypeName = data.leaveTypeName ?? "-" formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
formDataCancle.leaveWrote = data.leaveWrote ?? "-" formDataCancle.leaveWrote = data.leaveWrote ?? "-";
formDataCancle.fullname = data.fullName ?? "-" formDataCancle.fullname = data.fullName ?? "-";
formDataCancle.status = convertStatud(data.status) ?? "-" formDataCancle.status = convertStatud(data.status) ?? "-";
formDataCancle.leaveStartDate = data.leaveStartDate && date2Thai(data.leaveStartDate) formDataCancle.leaveStartDate =
formDataCancle.leaveEndDate = data.leaveEndDate && date2Thai(data.leaveEndDate) data.leaveStartDate && date2Thai(data.leaveStartDate);
formDataCancle.leaveTotal = data.leaveTotal ?? "-" formDataCancle.leaveEndDate =
formDataCancle.leaveAddress = data.leaveAddress ?? "-" data.leaveEndDate && date2Thai(data.leaveEndDate);
formDataCancle.leaveNumber = data.leaveNumber ?? "-" formDataCancle.leaveTotal = data.leaveTotal ?? "-";
formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-" formDataCancle.leaveAddress = data.leaveAddress ?? "-";
formDataCancle.leaveDetail = data.leaveDetail ?? "-" formDataCancle.leaveNumber = data.leaveNumber ?? "-";
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
formDataCancle.leaveDetail = data.leaveDetail ?? "-";
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
console.log(res) console.log(res);
}) })
.catch(err => { .catch((err) => {
messageError($q, err) messageError($q, err);
}) })
.finally(() => { .finally(() => {
hideLoader() hideLoader();
}) });
} }
/** function ยินยันการบันทึกข้อมูล*/ /** function ยินยันการบันทึกข้อมูล*/
async function onClickSave() { async function onClickSave() {
const hasError = [] const hasError = [];
for (const key in formDeleteRef) { for (const key in formDeleteRef) {
if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) { if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
const property = formDeleteRef[key] const property = formDeleteRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate() const isValid = property.value.validate();
hasError.push(isValid) hasError.push(isValid);
} }
} }
} }
if (hasError.every(result => result === true)) { if (hasError.every((result) => result === true)) {
dialogConfirm( dialogConfirm(
$q, $q,
() => { () => {
onSubmit() onSubmit();
}, },
"ยืนยันการบันทึกข้อมูล", "ยืนยันการบันทึกข้อมูล",
"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?" "ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
) );
} else { } else {
console.log(hasError) console.log(hasError);
} }
} }
/** function บันทึกข้อมูล*/ /** function บันทึกข้อมูล*/
async function onSubmit() { async function onSubmit() {
showLoader() showLoader();
const id = props.leaveId ? props.leaveId : "" const id = props.leaveId ? props.leaveId : "";
const formData = new FormData() const formData = new FormData();
formData.append("leaveWrote", formDelete.writeAt) formData.append("leaveWrote", formDelete.writeAt);
formData.append("reason", formDelete.reason) formData.append("reason", formDelete.reason);
formData.append("doc", formDelete.doc) formData.append("doc", formDelete.doc);
await http await http
.post(config.API.leaveCancelById(id), formData) .post(config.API.leaveCancelById(id), formData)
.then(() => { .then(() => {
success($q, "บันทึกข้อมูลสำเร็จ") success($q, "บันทึกข้อมูลสำเร็จ");
props.onClickClose?.() props.onClickClose?.();
}) })
.catch(err => { .catch((err) => {
messageError($q, err) messageError($q, err);
}) })
.finally(() => { .finally(() => {
props.fetchDataTable?.() props.fetchDataTable?.();
hideLoader() hideLoader();
}) });
} }
/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
watch( watch(
() => props.modal, () => props.modal,
() => { () => {
if (props.modal === true) { if (props.modal === true) {
formDelete.writeAt = "" formDelete.writeAt = "";
formDelete.reason = "" formDelete.reason = "";
formDelete.doc = null formDelete.doc = null;
props.leaveStatus === "DELETE" ? props.leaveId && fetchDataCancelDetail(props.leaveId) : props.leaveId && fetchDataDetail(props.leaveId) props.leaveStatus === "DELETE"
? props.leaveId && fetchDataCancelDetail(props.leaveId)
: props.leaveId && fetchDataDetail(props.leaveId);
} }
} }
) );
</script> </script>
<template> <template>
@ -384,20 +437,38 @@ watch(
<q-card-section class="row items-center q-pa-sm"> <q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div> <div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
<q-space /> <q-space />
<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" /> <q-btn
icon="close"
unelevated
round
dense
@click="props.onClickClose"
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-section class="q-p-md row q-gutter-y-md"> <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
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> <div class="col-12 q-col-gutter-sm row items-center"></div>
<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว --> <!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" /> <FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร --> <!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
<FormChildbirth v-else-if="checkForm === 'FormChildbirth'" :data="formData" /> <FormChildbirth
v-else-if="checkForm === 'FormChildbirth'"
:data="formData"
/>
<!-- ลาพักผ่อน --> <!-- ลาพักผ่อน -->
<FormHoliday v-else-if="checkForm === 'FormHoliday'" :data="formData" /> <FormHoliday
v-else-if="checkForm === 'FormHoliday'"
:data="formData"
/>
<!-- ลาอุปสมบท --> <!-- ลาอุปสมบท -->
<FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" /> <FormUpasom v-else-if="checkForm === 'FormUpasom'" :data="formData" />
@ -406,28 +477,70 @@ watch(
<FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" /> <FormHajj v-else-if="checkForm === 'FormHajj'" :data="formData" />
<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล --> <!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
<FormCheckSelect v-else-if="checkForm === 'FormCheckSelect'" :data="formData" /> <FormCheckSelect
v-else-if="checkForm === 'FormCheckSelect'"
:data="formData"
/>
<!-- ลาไปศึกษา --> <!-- ลาไปศึกษา -->
<FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" /> <FormStudy v-else-if="checkForm === 'FormStudy'" :data="formData" />
<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน --> <!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
<FormLeaveToTraining v-else-if="checkForm === 'FormLeaveToTraining'" :data="formData" /> <FormLeaveToTraining
v-else-if="checkForm === 'FormLeaveToTraining'"
:data="formData"
/>
<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ --> <!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
<FormLeaveToWorkInternational v-else-if="checkForm === 'FormLeaveToWorkInternational'" :data="formData" /> <FormLeaveToWorkInternational
v-else-if="checkForm === 'FormLeaveToWorkInternational'"
:data="formData"
/>
<!-- ลาติดตามคู่สมรส --> <!-- ลาติดตามคู่สมรส -->
<FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" /> <FormSpouse v-else-if="checkForm === 'FormSpouse'" :data="formData" />
<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ --> <!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" /> <FormVocationalRehabilitation
v-else-if="checkForm === 'FormVocationalRehabilitation'"
:data="formData"
/>
</div> </div>
<div flat class="col-xs-6 col-sm-6" v-if="props.leaveStatus === 'CANCEL'"> <div
<q-input ref="writeAtRef" v-model="formDelete.writeAt" label="เขียนที่" :rules="[val => !!val || 'กรุณากรอกเขียนที่']" lazy-rules outlined dense /> flat
<q-input ref="reasonRef" v-model="formDelete.reason" type="textarea" label="กรอกเหตุผล" :rules="[val => !!val || 'กรูณากรอกเหตุผล']" lazy-rules outlined dense /> class="col-xs-6 col-sm-6"
<q-file ref="docRef" outlined v-model="formDelete.doc" label="เลือกไฟล์เอกสารหลักฐาน" :rules="[val => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']" lazy-rules use-chips dense> v-if="props.leaveStatus === 'CANCEL'"
>
<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
outlined
dense
/>
<q-file
ref="docRef"
outlined
v-model="formDelete.doc"
label="เลือกไฟล์เอกสารหลักฐาน"
:rules="[(val) => !!val || 'กรูณา เลือกไฟล์เอกสารหลักฐาน']"
lazy-rules
use-chips
dense
>
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" /> <q-icon name="attach_file" />
</template> </template>
@ -435,17 +548,36 @@ watch(
</div> </div>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-section class="row items-center q-pa-sm" v-if="props.leaveStatus === 'CANCEL'"> <q-card-section
class="row items-center q-pa-sm"
v-if="props.leaveStatus === 'CANCEL'"
>
<q-space /> <q-space />
<q-btn label="ยืนยัน" unelevated color="secondary" dense class="q-px-md" @click="onClickSave" /> <q-btn
label="ยืนยัน"
unelevated
color="secondary"
dense
class="q-px-md"
@click="onClickSave"
/>
</q-card-section> </q-card-section>
</q-card> </q-card>
<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'"> <q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
<q-card-section class="row items-center q-pa-sm"> <q-card-section class="row items-center q-pa-sm">
<div class="text-bold q-pl-sm">{{ titleMainCancle }}{{ titleName }}</div> <div class="text-bold q-pl-sm">
{{ titleMainCancle }}{{ titleName }}
</div>
<q-space /> <q-space />
<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" /> <q-btn
icon="close"
unelevated
round
dense
@click="props.onClickClose"
style="color: #ff8080; background-color: #ffdede"
/>
</q-card-section> </q-card-section>
<q-separator /> <q-separator />
<q-card-section class="q-p-md row q-gutter-y-md"> <q-card-section class="q-p-md row q-gutter-y-md">

976
src/modules/05_leave/components/FormLeave/01_SickForm.vue
View file

File diff suppressed because it is too large Load diff

811
src/modules/05_leave/components/FormLeave/03_Birth.vue
View file

@ -13,38 +13,38 @@ const dataStore = useLeaveStore();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const router = useRouter(); const router = useRouter();
const $q = useQuasar(); const $q = useQuasar();
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } = const { date2Thai, dateToISO, dialogRemove, success, messageError, fails } =
mixin; mixin;
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
onConfirm: { onConfirm: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}); });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataBirth = reactive<any>({ const formDataBirth = reactive<any>({
type: dataStore.typeId, type: dataStore.typeId,
leaveWrote: "", leaveWrote: "",
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
leaveTotal: "", leaveTotal: "",
leaveLast: "", leaveLast: "",
leaveNumber: "", leaveNumber: "",
leaveAddress: "", leaveAddress: "",
leaveDetail: "", leaveDetail: "",
leaveDocument: [], leaveDocument: [],
}); });
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
@ -59,61 +59,61 @@ const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = { const FormRef: FormRef = {
leaveWrote: leaveWroteRef, leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
leaveTotal: leaveTotalRef, leaveTotal: leaveTotalRef,
leaveNumber: leaveNumberRef, leaveNumber: leaveNumberRef,
leaveAddress: leaveAddressRef, leaveAddress: leaveAddressRef,
leaveDetail: leaveDetailRef, leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef, leaveDocument: leaveDocumentRef,
}; };
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>(""); const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]); const fileDocDataUpload = ref<File[]>([]);
async function fileUploadDoc(files: any) { async function fileUploadDoc(files: any) {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file); fileDocDataUpload.value.push(file);
}); });
} }
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function onValidate() { function onValidate() {
const hasError = []; const hasError = [];
for (const key in FormRef) { for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) { if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]; const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate(); const isValid = property.value.validate();
hasError.push(isValid); hasError.push(isValid);
} }
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
const formData = new FormData(); const formData = new FormData();
if (formDataBirth.leaveDocument.length > 0) { if (formDataBirth.leaveDocument.length > 0) {
formDataBirth.leaveDocument.forEach((file: File) => { formDataBirth.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file); formData.append("leaveDocument", file);
}); });
} }
// formData.append("leaveDocument", formDataBirth.leaveDocument); // formData.append("leaveDocument", formDataBirth.leaveDocument);
formData.append("type", formDataBirth.type); formData.append("type", formDataBirth.type);
formData.append( formData.append(
"leaveStartDate", "leaveStartDate",
dateToISO(new Date(formDataBirth.leaveStartDate)) dateToISO(new Date(formDataBirth.leaveStartDate))
); );
formData.append( formData.append(
"leaveEndDate", "leaveEndDate",
dateToISO(new Date(formDataBirth.leaveEndDate)) dateToISO(new Date(formDataBirth.leaveEndDate))
); );
formData.append("leaveWrote", formDataBirth.leaveWrote); formData.append("leaveWrote", formDataBirth.leaveWrote);
formData.append("leaveAddress", formDataBirth.leaveAddress); formData.append("leaveAddress", formDataBirth.leaveAddress);
formData.append("leaveNumber", formDataBirth.leaveNumber); formData.append("leaveNumber", formDataBirth.leaveNumber);
formData.append("leaveDetail", formDataBirth.leaveDetail); formData.append("leaveDetail", formDataBirth.leaveDetail);
props.onSubmit(formData, isLeave.value); props.onSubmit(formData, isLeave.value);
} }
} }
/** /**
@ -122,346 +122,379 @@ function onValidate() {
*/ */
const isLeave = ref<boolean>(true); const isLeave = ref<boolean>(true);
async function fetchCheck() { async function fetchCheck() {
await http await http
.post(config.API.leaveCheck(), { .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null, type: dataStore.typeId ?? null,
StartLeaveDate: formDataBirth.leaveStartDate ?? null, StartLeaveDate: formDataBirth.leaveStartDate ?? null,
EndLeaveDate: formDataBirth.leaveEndDate ?? null, EndLeaveDate: formDataBirth.leaveEndDate ?? null,
}) })
.then((res: any) => { .then((res: any) => {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataBirth.leaveTotal = data.totalDate; formDataBirth.leaveTotal = data.totalDate;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
}); });
} }
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
}); });
//เเจ้งเตือนลบข้อมูล
const clickDelete = (id: string) => {
dialogRemove($q, () => onClickDelete(id));
};
/**
* function ลบรายการ
* @param id
*/
const onClickDelete = async (id: string) => {
await http
.delete(config.API.leaveUserId(id))
.then(async (res) => {
console.log("delete");
})
.catch((err) => {
messageError($q, err);
});
};
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
const leaveDocumentList = ref<any>(); const leaveDocumentList = ref<any>();
const statusCheck = ref<any>(""); const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => { watch(props.data, () => {
if (props.data) { if (props.data) {
formDataBirth.leaveWrote = props.data.leaveWrote; formDataBirth.leaveWrote = props.data.leaveWrote;
formDataBirth.leaveStartDate = props.data.leaveStartDate; formDataBirth.leaveStartDate = props.data.leaveStartDate;
formDataBirth.leaveEndDate = props.data.leaveEndDate; formDataBirth.leaveEndDate = props.data.leaveEndDate;
formDataBirth.leaveTotal = props.data.leaveTotal; formDataBirth.leaveTotal = props.data.leaveTotal;
formDataBirth.leaveNumber = props.data.leaveNumber; formDataBirth.leaveNumber = props.data.leaveNumber;
formDataBirth.leaveAddress = props.data.leaveAddress; formDataBirth.leaveAddress = props.data.leaveAddress;
formDataBirth.leaveDetail = props.data.leaveDetail; formDataBirth.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
formDataBirth.leaveDocument = []; formDataBirth.leaveDocument = [];
} }
}); });
/** Hook */
onMounted(() => { onMounted(() => {
if (props.data) { if (props.data) {
formDataBirth.leaveWrote = props.data.leaveWrote; formDataBirth.leaveWrote = props.data.leaveWrote;
formDataBirth.leaveStartDate = props.data.leaveStartDate; formDataBirth.leaveStartDate = props.data.leaveStartDate;
formDataBirth.leaveEndDate = props.data.leaveEndDate; formDataBirth.leaveEndDate = props.data.leaveEndDate;
formDataBirth.leaveTotal = props.data.leaveTotal; formDataBirth.leaveTotal = props.data.leaveTotal;
formDataBirth.leaveNumber = props.data.leaveNumber; formDataBirth.leaveNumber = props.data.leaveNumber;
formDataBirth.leaveAddress = props.data.leaveAddress; formDataBirth.leaveAddress = props.data.leaveAddress;
formDataBirth.leaveDetail = props.data.leaveDetail; formDataBirth.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
} }
}); });
</script> </script>
<!-- ฟอร์มลาคลอดบุตร--> <!-- ฟอร์มลาคลอดบุตร-->
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div> </div>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
outlined outlined
v-model="formDataBirth.leaveWrote" v-model="formDataBirth.leaveWrote"
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveStartDate" v-model="formDataBirth.leaveStartDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value="formDataBirth.leaveEndDate = null" @update:model-value="formDataBirth.leaveEndDate = null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataBirth.leaveStartDate != null formDataBirth.leaveStartDate != null
? date2Thai(formDataBirth.leaveStartDate) ? date2Thai(formDataBirth.leaveStartDate)
: null : null
" "
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<datepicker <datepicker
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataBirth.leaveEndDate" v-model="formDataBirth.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
borderless borderless
hide-bottom-space hide-bottom-space
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!formDataBirth.leaveStartDate" :readonly="!formDataBirth.leaveStartDate"
:min-date="formDataBirth.leaveStartDate" :min-date="formDataBirth.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
hide-bottom-space hide-bottom-space
:readonly="!formDataBirth.leaveStartDate" :readonly="!formDataBirth.leaveStartDate"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
:model-value=" :model-value="
formDataBirth.leaveEndDate != null formDataBirth.leaveEndDate != null
? date2Thai(formDataBirth.leaveEndDate) ? date2Thai(formDataBirth.leaveEndDate)
: null : null
" "
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <q-input
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="formDataBirth.leaveTotal" v-model="formDataBirth.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา"
readonly readonly
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
> >
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }} {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
<q-input <q-input
class="col-12 col-md-3 col-sm-6" class="col-12 col-md-3 col-sm-6"
dense dense
outlined outlined
ref="leaveLastRef" ref="leaveLastRef"
for="leaveLastRef" for="leaveLastRef"
v-model="dataStore.leaveLast" v-model="dataStore.leaveLast"
label="ลาครั้งสุดท้ายเมื่อวันที่" label="ลาครั้งสุดท้ายเมื่อวันที่"
readonly readonly
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
/> />
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-input <q-input
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveNumberRef" ref="leaveNumberRef"
for="leaveNumberRef" for="leaveNumberRef"
v-model="formDataBirth.leaveNumber" v-model="formDataBirth.leaveNumber"
mask="(###)-###-####" mask="(###)-###-####"
unmasked-value unmasked-value
label="หมายเลขโทรศัพท์ที่ติดต่อได้" label="หมายเลขโทรศัพท์ที่ติดต่อได้"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`, (val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
]" ]"
/> />
<q-input <q-input
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
ref="leaveAddressRef" ref="leaveAddressRef"
for="leaveAddressRef" for="leaveAddressRef"
v-model="formDataBirth.leaveAddress" v-model="formDataBirth.leaveAddress"
label="ที่อยู่ที่ติดต่อได้ระหว่างลา" label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[ :rules="[
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`, (val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
]" ]"
/> />
</div> </div>
</div> </div>
<q-input <q-input
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
outlined outlined
bg-color="white" bg-color="white"
ref="leaveDetailRef" ref="leaveDetailRef"
for="leaveDetailRef" for="leaveDetailRef"
v-model="formDataBirth.leaveDetail" v-model="formDataBirth.leaveDetail"
label="รายละเอียด" label="รายละเอียด"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
/> />
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->
<q-file <q-file
for="leaveDocumentRef" for="leaveDocumentRef"
hide-bottom-space hide-bottom-space
v-model="formDataBirth.leaveDocument" v-model="formDataBirth.leaveDocument"
@added="fileUploadDoc" @added="fileUploadDoc"
dense dense
bg-color="white" bg-color="white"
label="เอกสารประกอบ" label="เอกสารประกอบ"
outlined outlined
multiple multiple
use-chips use-chips
class="q-pl-sm col-12" class="q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</div> </div>
<div class="col-12 row" v-if="data"> <div class="col-12 row" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>
<q-list <q-list
separator separator
v-if="leaveDocumentList && leaveDocumentList.length > 0" v-if="leaveDocumentList && leaveDocumentList.length > 0"
> >
<q-item <q-item
v-for="(document, index) in leaveDocumentList" v-for="(document, index) in leaveDocumentList"
:key="index" :key="index"
class="q-my-xs" class="q-my-xs"
> >
<q-item-section> <q-item-section>
<q-item-label class="row items-baseline"> <q-item-label class="row items-baseline">
<div class="col"> <div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }} {{ "เอกสารแนบที่ " + (index + 1) }}
</div> </div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
label="ดาวน์โหลด" label="ดาวน์โหลด"
size="12px" size="12px"
> class="q-mr-md"
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> >
</q-btn> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-item-label> </q-btn>
</q-item-section> <q-btn
</q-item> @click="clickDelete"
</q-list> target="_blank"
</q-card> outline
</div> color="red"
</div> label="ลบไฟล์"
</div> size="12px"
</q-card> >
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</div>
</q-card>
<q-separator class="q-mt-sm" /> <q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn <q-btn
v-if="!props.data || props.data.status == 'DRAFT'" v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit" id="onSubmit"
type="submit" type="submit"
unelevated unelevated
dense dense
class="q-px-md items-center btnBlue" class="q-px-md items-center btnBlue"
label="บันทึก" label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
> >
<q-btn <q-btn
v-if="data && statusCheck != 'NEW'" v-if="data && statusCheck != 'NEW'"
id="onSubmit" id="onSubmit"
type="button" type="button"
unelevated unelevated
dense dense
class="q-px-md items-center q-ml-sm" class="q-px-md items-center q-ml-sm"
color="primary" color="primary"
label="ยื่นใบลา" label="ยื่นใบลา"
@click="onConfirm()" @click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
> >
</div> </div>
</form> </form>
</template> </template>

961
src/modules/05_leave/components/FormLeave/04_HelpWifeBirthForm.vue
View file

File diff suppressed because it is too large Load diff

951
src/modules/05_leave/components/FormLeave/05_VacationForm.vue
View file

File diff suppressed because it is too large Load diff

1297
src/modules/05_leave/components/FormLeave/06_OrdinationForm.vue
View file

File diff suppressed because it is too large Load diff

857
src/modules/05_leave/components/FormLeave/07_HajjForm.vue
View file

@ -14,13 +14,13 @@ const dataStore = useLeaveStore();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
dialogConfirm, dialogRemove,
calculateDurationYmd, calculateDurationYmd,
fails, fails,
messageError, messageError,
success, success,
dateToISO, dateToISO,
} = mixin; } = mixin;
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
const files = ref<any>(null); const files = ref<any>(null);
@ -34,85 +34,85 @@ const leaveDocumentRef = ref<object | null>(null);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
onConfirm: { onConfirm: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}); });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataHaji = reactive<any>({ const formDataHaji = reactive<any>({
type: dataStore.typeId, type: dataStore.typeId,
leaveWrote: "", leaveWrote: "",
leavegovernmentDate: null, leavegovernmentDate: null,
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
totalLeave: 0, totalLeave: 0,
hajjDayStatus: "true", hajjDayStatus: "true",
leaveDocument: [], leaveDocument: [],
leaveDetail: "", leaveDetail: "",
}); });
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: HajiForm = { const formRef: HajiForm = {
leaveWrote: leaveWroteRef, leaveWrote: leaveWroteRef,
leavegovernmentDate: leavegovernmentDateRef, leavegovernmentDate: leavegovernmentDateRef,
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
leaveDocument: leaveDocumentRef, leaveDocument: leaveDocumentRef,
}; };
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
const nameFile = ref<string>(""); const nameFile = ref<string>("");
const fileDocDataUpload = ref<File[]>([]); const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => { const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file); fileDocDataUpload.value.push(file);
}); });
}; };
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */ /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() { function onValidate() {
const hasError = []; const hasError = [];
for (const key in formRef) { for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) { if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]; const property = formRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate(); const isValid = property.value.validate();
hasError.push(isValid); hasError.push(isValid);
} }
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
const formData = new FormData(); const formData = new FormData();
if (formDataHaji.leaveDocument) { if (formDataHaji.leaveDocument) {
formDataHaji.leaveDocument.forEach((file: File) => { formDataHaji.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file); formData.append("leaveDocument", file);
}); });
} }
// formData.append("leaveDocument", formDataHaji.leaveDocument); // formData.append("leaveDocument", formDataHaji.leaveDocument);
formData.append("type", formDataHaji.type); formData.append("type", formDataHaji.type);
formData.append( formData.append(
"leaveStartDate", "leaveStartDate",
dateToISO(new Date(formDataHaji.leaveStartDate)) dateToISO(new Date(formDataHaji.leaveStartDate))
); );
formData.append( formData.append(
"leaveEndDate", "leaveEndDate",
dateToISO(new Date(formDataHaji.leaveEndDate)) dateToISO(new Date(formDataHaji.leaveEndDate))
); );
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus); formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
formData.append("leaveWrote", formDataHaji.leaveWrote); formData.append("leaveWrote", formDataHaji.leaveWrote);
formData.append("leaveDetail", formDataHaji.leaveDetail); formData.append("leaveDetail", formDataHaji.leaveDetail);
props.onSubmit(formData, isLeave.value); props.onSubmit(formData, isLeave.value);
} }
} }
/** /**
@ -121,375 +121,408 @@ function onValidate() {
*/ */
const isLeave = ref<boolean>(true); const isLeave = ref<boolean>(true);
async function fetchCheck() { async function fetchCheck() {
console.log("check"); console.log("check");
await http await http
.post(config.API.leaveCheck(), { .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null, type: dataStore.typeId ?? null,
StartLeaveDate: formDataHaji.leaveStartDate ?? null, StartLeaveDate: formDataHaji.leaveStartDate ?? null,
EndLeaveDate: formDataHaji.leaveEndDate ?? null, EndLeaveDate: formDataHaji.leaveEndDate ?? null,
}) })
.then((res: any) => { .then((res: any) => {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataHaji.leaveTotal = data.totalDate; formDataHaji.leaveTotal = data.totalDate;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
}); });
} }
/** /**
* function อัพเดทค่า LeaveTotal * function อัพเดทค่า LeaveTotal
*/ */
function updateLeaveTotal() { function updateLeaveTotal() {
const newLeaveTotal = calculateDurationYmd( const newLeaveTotal = calculateDurationYmd(
formDataHaji.leaveStartDate, formDataHaji.leaveStartDate,
formDataHaji.leaveEndDate formDataHaji.leaveEndDate
); );
formDataHaji.leaveTotal = newLeaveTotal; formDataHaji.leaveTotal = newLeaveTotal;
} }
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
}); });
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
const leaveDocumentList = ref<any>(); const leaveDocumentList = ref<any>();
const statusCheck = ref<any>(""); const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => { watch(props.data, () => {
if (props.data) { if (props.data) {
formDataHaji.leaveWrote = props.data.leaveWrote; formDataHaji.leaveWrote = props.data.leaveWrote;
formDataHaji.leaveTotal = props.data.leaveTotal; formDataHaji.leaveTotal = props.data.leaveTotal;
formDataHaji.leaveStartDate = props.data.leaveStartDate; formDataHaji.leaveStartDate = props.data.leaveStartDate;
formDataHaji.leaveEndDate = props.data.leaveEndDate; formDataHaji.leaveEndDate = props.data.leaveEndDate;
formDataHaji.totalLeave = props.data.totalLeave; formDataHaji.totalLeave = props.data.totalLeave;
formDataHaji.hajjDayStatus = props.data.hajjDayStatus; formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
formDataHaji.leaveDetail = props.data.leaveDetail; formDataHaji.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
formDataHaji.leaveDocument = []; formDataHaji.leaveDocument = [];
} }
}); });
/**Hook */
onMounted(() => { onMounted(() => {
if (props.data) { if (props.data) {
formDataHaji.leaveWrote = props.data.leaveWrote; formDataHaji.leaveWrote = props.data.leaveWrote;
formDataHaji.leaveTotal = props.data.leaveTotal; formDataHaji.leaveTotal = props.data.leaveTotal;
formDataHaji.leaveStartDate = props.data.leaveStartDate; formDataHaji.leaveStartDate = props.data.leaveStartDate;
formDataHaji.leaveEndDate = props.data.leaveEndDate; formDataHaji.leaveEndDate = props.data.leaveEndDate;
formDataHaji.totalLeave = props.data.totalLeave; formDataHaji.totalLeave = props.data.totalLeave;
formDataHaji.hajjDayStatus = props.data.hajjDayStatus; formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
formDataHaji.leaveDetail = props.data.leaveDetail; formDataHaji.leaveDetail = props.data.leaveDetail;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
// formDataHaji.leaveDocument = props.data.leaveDocument; // formDataHaji.leaveDocument = props.data.leaveDocument;
} }
}); });
//เเจ้งเตือนลบข้อมูล
const clickDelete = (id: string) => {
dialogRemove($q, () => onClickDelete(id));
};
/**
* function ลบรายการ
* @param id
*/
const onClickDelete = async (id: string) => {
await http
.delete(config.API.leaveUserId(id))
.then(async (res) => {
console.log("delete");
})
.catch((err) => {
messageError($q, err);
});
};
</script> </script>
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div> </div>
<form @submit.prevent="onValidate" class="full-width"> <form @submit.prevent="onValidate" class="full-width">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <q-input
v-model="formDataHaji.leaveWrote" v-model="formDataHaji.leaveWrote"
ref="leaveWroteRef" ref="leaveWroteRef"
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<div class="full-width"> <div class="full-width">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<datepicker <datepicker
v-model="formDataHaji.leaveStartDate" v-model="formDataHaji.leaveStartDate"
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value="formDataHaji.leaveEndDate = null" @update:model-value="formDataHaji.leaveEndDate = null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leaveStartDateRef" ref="leaveStartDateRef"
bg-color="white" bg-color="white"
class="full-width datepicker" class="full-width datepicker"
outlined outlined
dense dense
hide-bottom-space hide-bottom-space
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
:model-value=" :model-value="
formDataHaji.leaveStartDate != null formDataHaji.leaveStartDate != null
? date2Thai(formDataHaji.leaveStartDate) ? date2Thai(formDataHaji.leaveStartDate)
: null : null
" "
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<datepicker <datepicker
v-model="formDataHaji.leaveEndDate" v-model="formDataHaji.leaveEndDate"
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
@update:model-value="updateLeaveTotal(), fetchCheck()" @update:model-value="updateLeaveTotal(), fetchCheck()"
:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'" :readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
:min-date="formDataHaji.leaveStartDate" :min-date="formDataHaji.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leaveEndDateRef" ref="leaveEndDateRef"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
outlined outlined
dense dense
:readonly=" :readonly="
!formDataHaji.leaveStartDate || statusCheck === 'NEW' !formDataHaji.leaveStartDate || statusCheck === 'NEW'
" "
hide-bottom-space hide-bottom-space
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:model-value=" :model-value="
formDataHaji.leaveEndDate != null formDataHaji.leaveEndDate != null
? date2Thai(formDataHaji.leaveEndDate) ? date2Thai(formDataHaji.leaveEndDate)
: null : null
" "
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <q-input
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-2 col-sm-6" class="col-12 col-md-2 col-sm-6"
dense dense
outlined outlined
ref="leaveTotalRef" ref="leaveTotalRef"
for="leaveTotalRef" for="leaveTotalRef"
v-model="formDataHaji.leaveTotal" v-model="formDataHaji.leaveTotal"
label="จำนวนวันที่ลา" label="จำนวนวันที่ลา"
readonly readonly
> >
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }} {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
<datepicker <datepicker
class="col-12 col-md-4 col-sm-6" class="col-12 col-md-4 col-sm-6"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
readonly readonly
week-start="0" week-start="0"
:locale="'th'" :locale="'th'"
:enableTimePicker="false" :enableTimePicker="false"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leavegovernmentDateRef" ref="leavegovernmentDateRef"
bg-color="white" bg-color="white"
class="full-width" class="full-width"
outlined outlined
dense dense
readonly readonly
hide-bottom-space hide-bottom-space
:label="`${'วันที่เข้ารับราชการ'}`" :label="`${'วันที่เข้ารับราชการ'}`"
:model-value=" :model-value="
dataStore.dateAppoint != null dataStore.dateAppoint != null
? date2Thai(dataStore.dateAppoint) ? date2Thai(dataStore.dateAppoint)
: null : null
" "
:rules="[ :rules="[
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`, (val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
]" ]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--black)" style="color: var(--black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
</div> </div>
</div> </div>
<div class="q-pl-sm text-weight-bold text-dark col-12"> <div class="q-pl-sm text-weight-bold text-dark col-12">
เคยไปประกอบพิธีฮัจญ์หรือไม่ เคยไปประกอบพิธีฮัจญ์หรือไม่
</div> </div>
<div class="col-12"> <div class="col-12">
<q-radio <q-radio
v-model="formDataHaji.hajjDayStatus" v-model="formDataHaji.hajjDayStatus"
:disable="statusCheck === 'NEW'" :disable="statusCheck === 'NEW'"
:val="true" :val="true"
checked-icon="task_alt" checked-icon="task_alt"
label="เคย" label="เคย"
/> />
<q-radio <q-radio
v-model="formDataHaji.hajjDayStatus" v-model="formDataHaji.hajjDayStatus"
:disable="statusCheck === 'NEW'" :disable="statusCheck === 'NEW'"
:val="false" :val="false"
checked-icon="task_alt" checked-icon="task_alt"
label="ไม่เคยไปประกอบพิธีฮัจญ์" label="ไม่เคยไปประกอบพิธีฮัจญ์"
/> />
</div> </div>
<q-input <q-input
v-model="formDataHaji.leaveDetail" v-model="formDataHaji.leaveDetail"
class="col-12 q-mt-sm cursor-pointer inputgreen" class="col-12 q-mt-sm cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
type="textarea" type="textarea"
label="รายละเอียด" label="รายละเอียด"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
/> />
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<!-- multiple --> <!-- multiple -->
<q-file <q-file
v-model="formDataHaji.leaveDocument" v-model="formDataHaji.leaveDocument"
multiple multiple
bg-color="white" bg-color="white"
label="เอกสารประกอบ" label="เอกสารประกอบ"
use-chips use-chips
@added="fileUploadDoc" @added="fileUploadDoc"
dense dense
outlined outlined
hide-bottom-space hide-bottom-space
class="col-12 q-pl-sm col-12" class="col-12 q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</div> </div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>
<q-list <q-list
separator separator
v-if="leaveDocumentList && leaveDocumentList.length > 0" v-if="leaveDocumentList && leaveDocumentList.length > 0"
> >
<q-item <q-item
v-for="(document, index) in leaveDocumentList" v-for="(document, index) in leaveDocumentList"
:key="index" :key="index"
class="q-my-xs" class="q-my-xs"
> >
<q-item-section> <q-item-section>
<q-item-label class="row items-baseline"> <q-item-label class="row items-baseline">
<div class="col"> <div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }} {{ "เอกสารแนบที่ " + (index + 1) }}
</div> </div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
label="ดาวน์โหลด" label="ดาวน์โหลด"
size="12px" size="12px"
> class="q-mr-md"
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> >
</q-btn> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-item-label> </q-btn>
</q-item-section> <q-btn
</q-item> @click="clickDelete"
</q-list> target="_blank"
</q-card> outline
</div> color="red"
</div> label="ลบไฟล์"
</div> size="12px"
</q-card> >
<q-separator class="q-mt-sm" /> <q-tooltip>ลบไฟล์</q-tooltip>
<div class="row col-12 q-pt-md"> </q-btn>
<q-space /> </q-item-label>
<q-btn </q-item-section>
v-if="!props.data || props.data.status == 'DRAFT'" </q-item>
id="onSubmit" </q-list>
type="submit" </q-card>
unelevated </div>
dense </div>
class="q-px-md items-center btnBlue" </div>
label="บันทึก" </q-card>
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn <q-separator class="q-mt-sm" />
> <div class="row col-12 q-pt-md">
<q-btn <q-space />
v-if="data && statusCheck != 'NEW'" <q-btn
id="onSubmit" v-if="!props.data || props.data.status == 'DRAFT'"
type="button" id="onSubmit"
unelevated type="submit"
dense unelevated
class="q-px-md items-center q-ml-sm" dense
color="primary" class="q-px-md items-center btnBlue"
label="ยื่นใบลา" label="บันทึก"
@click="onConfirm()" ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn >
> <q-btn
</div> v-if="data && statusCheck != 'NEW'"
</form> id="onSubmit"
type="button"
unelevated
dense
class="q-px-md items-center q-ml-sm"
color="primary"
label="ยื่นใบลา"
@click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
>
</div>
</form>
</template> </template>

953
src/modules/05_leave/components/FormLeave/08_MilitaryForm.vue
View file

File diff suppressed because it is too large Load diff

1245
src/modules/05_leave/components/FormLeave/09_StudyForm.vue
View file

File diff suppressed because it is too large Load diff

1213
src/modules/05_leave/components/FormLeave/10_TrainForm.vue
View file

File diff suppressed because it is too large Load diff

849
src/modules/05_leave/components/FormLeave/11_WorkInternationalForm.vue
View file

@ -14,14 +14,14 @@ const dataStore = useLeaveStore();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
dialogConfirm, dialogRemove,
fails, fails,
dateToISO, dateToISO,
success, success,
messageError, messageError,
showLoader, showLoader,
hideLoader, hideLoader,
} = mixin; } = mixin;
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
const router = useRouter(); const router = useRouter();
@ -29,29 +29,29 @@ const isSave = ref<boolean>(false);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
onConfirm: { onConfirm: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}); });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataWorkInternational = reactive<any>({ const formDataWorkInternational = reactive<any>({
type: dataStore.typeId, type: dataStore.typeId,
leaveWrote: "", leaveWrote: "",
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
leaveDetail: "", leaveDetail: "",
leaveDocument: [], leaveDocument: [],
leaveDraftDocument: null, leaveDraftDocument: null,
}); });
/** ตัวแปร ref สำหรับแสดง validate */ /** ตัวแปร ref สำหรับแสดง validate */
@ -63,11 +63,11 @@ const leaveDocumentRef = ref<object | null>(null);
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const FormRef: FormRef = { const FormRef: FormRef = {
leaveWrote: leaveWroteRef, leaveWrote: leaveWroteRef,
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
leaveDetail: leaveDetailRef, leaveDetail: leaveDetailRef,
leaveDocument: leaveDocumentRef, leaveDocument: leaveDocumentRef,
}; };
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -75,266 +75,288 @@ const nameFile = ref<string>("");
const nameFileDraft = ref<string>(""); const nameFileDraft = ref<string>("");
const fileDocDataUpload = ref<File[]>([]); const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => { const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file); fileDocDataUpload.value.push(file);
}); });
}; };
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */ /** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
async function onValidate() { async function onValidate() {
const hasError = []; const hasError = [];
for (const key in FormRef) { for (const key in FormRef) {
if (Object.prototype.hasOwnProperty.call(FormRef, key)) { if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
const property = FormRef[key]; const property = FormRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate(); const isValid = property.value.validate();
hasError.push(isValid); hasError.push(isValid);
} }
} }
} }
// ถ้า Validate ผ่านให้บันทึกข้อมูล // ถ้า Validate ผ่านให้บันทึกข้อมูล
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
const formData = new FormData(); const formData = new FormData();
if (formDataWorkInternational.leaveDocument.length > 0) { if (formDataWorkInternational.leaveDocument.length > 0) {
formDataWorkInternational.leaveDocument.forEach((file: File) => { formDataWorkInternational.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file); formData.append("leaveDocument", file);
}); });
// formData.append("leaveDocument", formDataWorkInternational.leaveDocument) // formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
} }
if (formDataWorkInternational.leaveDraftDocument) { if (formDataWorkInternational.leaveDraftDocument) {
formData.append( formData.append(
"leaveDraftDocument", "leaveDraftDocument",
formDataWorkInternational.leaveDraftDocument formDataWorkInternational.leaveDraftDocument
); );
} }
formData.append("type", formDataWorkInternational.type); // formData.append("type", formDataWorkInternational.type); //
formData.append( formData.append(
"leaveStartDate", "leaveStartDate",
dateToISO(formDataWorkInternational.leaveStartDate) dateToISO(formDataWorkInternational.leaveStartDate)
); // ); //
formData.append( formData.append(
"leaveEndDate", "leaveEndDate",
dateToISO(formDataWorkInternational.leaveEndDate) dateToISO(formDataWorkInternational.leaveEndDate)
); // ); //
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); // formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
formData.append("leaveDetail", formDataWorkInternational.leaveDetail); // formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
await props.onSubmit(formData, isLeave.value); await props.onSubmit(formData, isLeave.value);
} }
} }
//download function //download function
async function onClickDownloadFile(id: string, fileName: string) { async function onClickDownloadFile(id: string, fileName: string) {
showLoader(); showLoader();
await http await http
.get(config.API.leaveReport(id)) .get(config.API.leaveReport(id))
.then(async (res) => { .then(async (res) => {
const data = res.data.result; const data = res.data.result;
await genReport(data, fileName); await genReport(data, fileName);
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader();
}); });
} }
//เเจ้งเตือนลบข้อมูล
const clickDelete = (id: string) => {
dialogRemove($q, () => onClickDelete(id));
};
/**
* function ลบรายการ
* @param id
*/
const onClickDelete = async (id: string) => {
await http
.delete(config.API.leaveUserId(id))
.then(async (res) => {
console.log("delete");
})
.catch((err) => {
messageError($q, err);
});
};
/** /**
* check ว่าลาได้ไหม จาก api * check ว่าลาได้ไหม จาก api
* @param formData * @param formData
*/ */
const isLeave = ref<boolean>(true); const isLeave = ref<boolean>(true);
async function fetchCheck() { async function fetchCheck() {
await http await http
.post(config.API.leaveCheck(), { .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null, type: dataStore.typeId ?? null,
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null, StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null, EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
}) })
.then((res: any) => { .then((res: any) => {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
formDataWorkInternational.leaveTotal = data.totalDate; formDataWorkInternational.leaveTotal = data.totalDate;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
}); });
} }
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
}); });
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
const leaveDocumentList = ref<any>(); const leaveDocumentList = ref<any>();
const leaveDraftDocument = ref<string>(); const leaveDraftDocument = ref<string>();
const statusCheck = ref<any>(""); const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props, () => { watch(props, () => {
if (props.data) { if (props.data) {
formDataWorkInternational.leaveWrote = props.data.leaveWrote; formDataWorkInternational.leaveWrote = props.data.leaveWrote;
formDataWorkInternational.leaveStartDate = new Date( formDataWorkInternational.leaveStartDate = new Date(
props.data.leaveStartDate props.data.leaveStartDate
); );
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate); formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
formDataWorkInternational.leaveDetail = props.data.leaveDetail; formDataWorkInternational.leaveDetail = props.data.leaveDetail;
leaveDraftDocument.value = props.data.leaveDraftDocument; leaveDraftDocument.value = props.data.leaveDraftDocument;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
formDataWorkInternational.leaveDraftDocument = null; formDataWorkInternational.leaveDraftDocument = null;
formDataWorkInternational.leaveDocument = []; formDataWorkInternational.leaveDocument = [];
} }
}); });
/**Hook */
onMounted(() => { onMounted(() => {
if (props.data) { if (props.data) {
formDataWorkInternational.leaveWrote = props.data.leaveWrote; formDataWorkInternational.leaveWrote = props.data.leaveWrote;
formDataWorkInternational.leaveStartDate = new Date( formDataWorkInternational.leaveStartDate = new Date(
props.data.leaveStartDate props.data.leaveStartDate
); );
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate); formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
formDataWorkInternational.leaveDetail = props.data.leaveDetail; formDataWorkInternational.leaveDetail = props.data.leaveDetail;
// formDataWorkInternational.leaveDocument = props.data.leaveDocument; // formDataWorkInternational.leaveDocument = props.data.leaveDocument;
leaveDraftDocument.value = props.data.leaveDraftDocument; leaveDraftDocument.value = props.data.leaveDraftDocument;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
} }
}); });
</script> </script>
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div> </div>
<form @submit.prevent.stop="onValidate"> <form @submit.prevent.stop="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<q-input <q-input
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
for="leaveWroteRef" for="leaveWroteRef"
dense dense
outlined outlined
v-model="formDataWorkInternational.leaveWrote" v-model="formDataWorkInternational.leaveWrote"
label="เขียนที่" label="เขียนที่"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveStartDate" v-model="formDataWorkInternational.leaveStartDate"
:locale="'th'" :locale="'th'"
hide-bottom-space hide-bottom-space
autoApply autoApply
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value="formDataWorkInternational.leaveEndDate = null" @update:model-value="formDataWorkInternational.leaveEndDate = null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveStartDateRef" ref="leaveStartDateRef"
for="leaveStartDateRef" for="leaveStartDateRef"
hide-bottom-space hide-bottom-space
bg-color="white" bg-color="white"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataWorkInternational.leaveStartDate != null formDataWorkInternational.leaveStartDate != null
? date2Thai(formDataWorkInternational.leaveStartDate) ? date2Thai(formDataWorkInternational.leaveStartDate)
: null : null
" "
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<datepicker <datepicker
:class="!isLeave ? dateEndInputStyle : ''" :class="!isLeave ? dateEndInputStyle : ''"
class="col-12 col-md-6 col-sm-6 cursor-pointer" class="col-12 col-md-6 col-sm-6 cursor-pointer"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="formDataWorkInternational.leaveEndDate" v-model="formDataWorkInternational.leaveEndDate"
:locale="'th'" :locale="'th'"
autoApply autoApply
hide-bottom-space hide-bottom-space
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
@update:model-value="fetchCheck()" @update:model-value="fetchCheck()"
week-start="0" week-start="0"
:readonly=" :readonly="
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW' !formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
" "
:min-date="formDataWorkInternational.leaveStartDate" :min-date="formDataWorkInternational.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
ref="leaveEndDateRef" ref="leaveEndDateRef"
for="leaveEndDateRef" for="leaveEndDateRef"
:readonly=" :readonly="
!formDataWorkInternational.leaveStartDate || !formDataWorkInternational.leaveStartDate ||
statusCheck === 'NEW' statusCheck === 'NEW'
" "
class="full-width datepicker" class="full-width datepicker"
:model-value=" :model-value="
formDataWorkInternational.leaveEndDate != null formDataWorkInternational.leaveEndDate != null
? date2Thai(formDataWorkInternational.leaveEndDate) ? date2Thai(formDataWorkInternational.leaveEndDate)
: null : null
" "
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="event" class="cursor-pointer" color="primary"> <q-icon name="event" class="cursor-pointer" color="primary">
</q-icon> </q-icon>
</template> </template>
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }} {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<!-- <q-input <!-- <q-input
class="col-md-3 col-sm-12" class="col-md-3 col-sm-12"
dense dense
outlined outlined
@ -347,171 +369,182 @@ onMounted(() => {
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]" :rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
/> --> /> -->
<q-input <q-input
hide-bottom-space hide-bottom-space
type="textarea" type="textarea"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
dense dense
bg-color="white" bg-color="white"
outlined outlined
ref="leaveDetailRef" ref="leaveDetailRef"
for="leaveDetailRef" for="leaveDetailRef"
v-model="formDataWorkInternational.leaveDetail" v-model="formDataWorkInternational.leaveDetail"
label="รายละเอียด" label="รายละเอียด"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
/> />
<div class="full-width" v-if="statusCheck != 'NEW'"> <div class="full-width" v-if="statusCheck != 'NEW'">
<div class="q-col-gutter-sm row"> <div class="q-col-gutter-sm row">
<q-file <q-file
ref="fileRef" ref="fileRef"
bg-color="white" bg-color="white"
v-model="formDataWorkInternational.leaveDocument" v-model="formDataWorkInternational.leaveDocument"
multiple multiple
@added="fileUploadDoc" @added="fileUploadDoc"
dense dense
label="เอกสารประกอบ" label="เอกสารประกอบ"
outlined outlined
use-chips use-chips
class="q-pl-sm col-12" class="q-pl-sm col-12"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</div> </div>
<div class="col-12" v-if="data"> <div class="col-12" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>
<q-list <q-list
v-if="leaveDocumentList && leaveDocumentList.length > 0" v-if="leaveDocumentList && leaveDocumentList.length > 0"
separator separator
> >
<q-item <q-item
v-for="(document, index) in leaveDocumentList" v-for="(document, index) in leaveDocumentList"
:key="index" :key="index"
class="q-my-xs" class="q-my-xs"
> >
<q-item-section> <q-item-section>
<q-item-label class="row items-baseline"> <q-item-label class="row items-baseline">
<div class="col"> <div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }} {{ "เอกสารแนบที่ " + (index + 1) }}
</div> </div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
label="ดาวน์โหลด" label="ดาวน์โหลด"
size="12px" size="12px"
> class="q-mr-md"
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> >
</q-btn> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-item-label> </q-btn>
</q-item-section> <q-btn
</q-item> @click="clickDelete"
</q-list> target="_blank"
</q-card> outline
</div> color="red"
</div> label="ลบไฟล์"
</div> size="12px"
</q-card> >
<q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</div>
</q-card>
<div v-if="data && data.id" class="q-mt-md"> <div v-if="data && data.id" class="q-mt-md">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark"> <div class="q-pl-sm text-weight-bold text-dark">
ดาวน์โหลด/อัปโหลดแบบฟอร์ม ดาวน์โหลด/อัปโหลดแบบฟอร์ม
</div> </div>
</div> </div>
<q-card class="bg-grey-1 q-pa-sm" bordered> <q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row"> <div class="row">
<div class="col-sm-3 q-my-sm"> <div class="col-sm-3 q-my-sm">
<div class="column q-mx-xs"> <div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center"> <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
ดาวน์โหลด ดาวน์โหลด
</div> --> </div> -->
<q-btn <q-btn
color="primary" color="primary"
icon="download" icon="download"
label="ดาวน์โหลดแบบฟอร์ม" label="ดาวน์โหลดแบบฟอร์ม"
@click=" @click="
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`) onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
" "
/> />
</div> </div>
</div> </div>
<div class="col-sm-5 q-my-sm"> <div class="col-sm-5 q-my-sm">
<div class="column q-mx-xs"> <div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center"> <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
อัปโหลด อัปโหลด
</div> --> </div> -->
<q-file <q-file
v-model="formDataWorkInternational.leaveDraftDocument" v-model="formDataWorkInternational.leaveDraftDocument"
use-chips use-chips
dense dense
label="อัปโหลดแบบฟอร์ม" label="อัปโหลดแบบฟอร์ม"
outlined outlined
bg-color="white" bg-color="white"
accept="application/pdf" accept="application/pdf"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</div> </div>
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm"> <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
<div class="column q-mx-xs"> <div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center"> <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
ดูไฟล์อัปโหลด ดูไฟล์อัปโหลด
</div> --> </div> -->
<q-btn <q-btn
icon="visibility" icon="visibility"
color="blue" color="blue"
label="ดาวน์โหลดไฟล์" label="ดาวน์โหลดไฟล์"
:href="leaveDraftDocument" :href="leaveDraftDocument"
target="_blank" target="_blank"
/> />
</div> </div>
</div> </div>
<!-- <div class="col-md-1 self-end q-mb-sm"> <!-- <div class="col-md-1 self-end q-mb-sm">
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc" <q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
><q-tooltip>อัปโหลด</q-tooltip></q-btn ><q-tooltip>อัปโหลด</q-tooltip></q-btn
> >
</div> --> </div> -->
</div> </div>
</q-card> </q-card>
</div> </div>
<div v-if="!isSave"> <div v-if="!isSave">
<q-separator class="q-mt-sm" /> <q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn <q-btn
v-if="!props.data || props.data.status == 'DRAFT'" v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit" id="onSubmit"
type="submit" type="submit"
unelevated unelevated
dense dense
class="q-px-md items-center btnBlue" class="q-px-md items-center btnBlue"
label="บันทึก" label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
> >
<q-btn <q-btn
v-if="data && statusCheck != 'NEW'" v-if="data && statusCheck != 'NEW'"
id="onSubmit" id="onSubmit"
type="button" type="button"
unelevated unelevated
dense dense
class="q-px-md items-center q-ml-sm" class="q-px-md items-center q-ml-sm"
color="primary" color="primary"
label="ยื่นใบลา" label="ยื่นใบลา"
@click="onConfirm()" @click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
> >
</div> </div>
</div> </div>
</form> </form>
</template> </template>

1409
src/modules/05_leave/components/FormLeave/12_FollowSpouseForm.vue
View file

File diff suppressed because it is too large Load diff

809
src/modules/05_leave/components/FormLeave/13_RehabilitationForm.vue
View file

@ -14,14 +14,14 @@ const dataStore = useLeaveStore();
const $q = useQuasar(); const $q = useQuasar();
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
dialogConfirm, dialogRemove,
fails, fails,
dateToISO, dateToISO,
success, success,
messageError, messageError,
showLoader, showLoader,
hideLoader, hideLoader,
} = mixin; } = mixin;
const router = useRouter(); const router = useRouter();
const edit = ref<boolean>(true); const edit = ref<boolean>(true);
@ -35,80 +35,80 @@ const leaveWroteRef = ref<object | null>(null);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
default: null, default: null,
}, },
onSubmit: { onSubmit: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
onConfirm: { onConfirm: {
type: Function, type: Function,
default: () => "", default: () => "",
}, },
}); });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formDataRehabilitation = reactive<any>({ const formDataRehabilitation = reactive<any>({
type: dataStore.typeId, type: dataStore.typeId,
leaveWrote: "", leaveWrote: "",
leaveStartDate: null, leaveStartDate: null,
leaveEndDate: null, leaveEndDate: null,
leaveDocument: [], leaveDocument: [],
leaveDetail: "", leaveDetail: "",
leaveDraftDocument: null, leaveDraftDocument: null,
}); });
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */ /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const formRef: RehabilitationForm = { const formRef: RehabilitationForm = {
leaveStartDate: leaveStartDateRef, leaveStartDate: leaveStartDateRef,
leaveEndDate: leaveEndDateRef, leaveEndDate: leaveEndDateRef,
leaveWrote: leaveWroteRef, leaveWrote: leaveWroteRef,
}; };
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */ /** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
function onValidate() { function onValidate() {
const hasError = []; const hasError = [];
for (const key in formRef) { for (const key in formRef) {
if (Object.prototype.hasOwnProperty.call(formRef, key)) { if (Object.prototype.hasOwnProperty.call(formRef, key)) {
const property = formRef[key]; const property = formRef[key];
if (property.value && typeof property.value.validate === "function") { if (property.value && typeof property.value.validate === "function") {
const isValid = property.value.validate(); const isValid = property.value.validate();
hasError.push(isValid); hasError.push(isValid);
} }
} }
} }
if (hasError.every((result) => result === true)) { if (hasError.every((result) => result === true)) {
const formData = new FormData(); const formData = new FormData();
if (formDataRehabilitation.leaveDocument.length > 0) { if (formDataRehabilitation.leaveDocument.length > 0) {
formDataRehabilitation.leaveDocument.forEach((file: File) => { formDataRehabilitation.leaveDocument.forEach((file: File) => {
formData.append("leaveDocument", file); formData.append("leaveDocument", file);
}); });
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument) // formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
} }
if (formDataRehabilitation.leaveDraftDocument) { if (formDataRehabilitation.leaveDraftDocument) {
formData.append( formData.append(
"leaveDraftDocument", "leaveDraftDocument",
formDataRehabilitation.leaveDraftDocument formDataRehabilitation.leaveDraftDocument
); );
} }
formData.append("type", formDataRehabilitation.type); // formData.append("type", formDataRehabilitation.type); //
formData.append( formData.append(
"leaveStartDate", "leaveStartDate",
dateToISO(new Date(formDataRehabilitation.leaveStartDate)) dateToISO(new Date(formDataRehabilitation.leaveStartDate))
); // ); //
formData.append( formData.append(
"leaveEndDate", "leaveEndDate",
dateToISO(new Date(formDataRehabilitation.leaveEndDate)) dateToISO(new Date(formDataRehabilitation.leaveEndDate))
); );
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); // formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); // formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
props.onSubmit(formData, isLeave.value); props.onSubmit(formData, isLeave.value);
} }
} }
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */ /** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
@ -116,9 +116,9 @@ const nameFile = ref<string>("");
const nameFileDraft = ref<string>(""); const nameFileDraft = ref<string>("");
const fileDocDataUpload = ref<File[]>([]); const fileDocDataUpload = ref<File[]>([]);
const fileUploadDoc = async (files: any) => { const fileUploadDoc = async (files: any) => {
files.forEach((file: any) => { files.forEach((file: any) => {
fileDocDataUpload.value.push(file); fileDocDataUpload.value.push(file);
}); });
}; };
/** /**
@ -127,354 +127,387 @@ const fileUploadDoc = async (files: any) => {
*/ */
const isLeave = ref<boolean>(true); const isLeave = ref<boolean>(true);
async function FetchCheck() { async function FetchCheck() {
await http await http
.post(config.API.leaveCheck(), { .post(config.API.leaveCheck(), {
type: dataStore.typeId ?? null, type: dataStore.typeId ?? null,
StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null, StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null, EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
}) })
.then((res: any) => { .then((res: any) => {
const data = res.data.result; const data = res.data.result;
isLeave.value = data.isLeave; isLeave.value = data.isLeave;
}) })
.catch((e: any) => { .catch((e: any) => {
messageError($q, e); messageError($q, e);
}); });
} }
//download function //download function
async function onClickDownloadFile(id: string, fileName: string) { async function onClickDownloadFile(id: string, fileName: string) {
showLoader(); showLoader();
await http await http
.get(config.API.leaveReport(id)) .get(config.API.leaveReport(id))
.then(async (res) => { .then(async (res) => {
const data = res.data.result; const data = res.data.result;
await genReport(data, fileName); await genReport(data, fileName);
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
}) })
.finally(() => { .finally(() => {
hideLoader(); hideLoader();
}); });
} }
//เเจ้งเตือนลบข้อมูล
const clickDelete = (id: string) => {
dialogRemove($q, () => onClickDelete(id));
};
/**
* function ลบรายการ
* @param id
*/
const onClickDelete = async (id: string) => {
await http
.delete(config.API.leaveUserId(id))
.then(async (res) => {
console.log("delete");
})
.catch((err) => {
messageError($q, err);
});
};
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
const dateEndInputStyle = computed(() => { const dateEndInputStyle = computed(() => {
return !isLeave.value ? "input-alert" : ""; return !isLeave.value ? "input-alert" : "";
}); });
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
const leaveDocumentList = ref<any>(); const leaveDocumentList = ref<any>();
const leaveDraftDocument = ref<string>(); const leaveDraftDocument = ref<string>();
const statusCheck = ref<any>(""); const statusCheck = ref<any>("");
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
watch(props.data, () => { watch(props.data, () => {
if (props.data) { if (props.data) {
formDataRehabilitation.leaveWrote = props.data.leaveWrote; formDataRehabilitation.leaveWrote = props.data.leaveWrote;
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate); formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate); formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
formDataRehabilitation.leaveDetail = props.data.leaveDetail; formDataRehabilitation.leaveDetail = props.data.leaveDetail;
leaveDraftDocument.value = props.data.leaveDraftDocument; leaveDraftDocument.value = props.data.leaveDraftDocument;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
formDataRehabilitation.leaveDraftDocument = null; formDataRehabilitation.leaveDraftDocument = null;
formDataRehabilitation.leaveDocument = []; formDataRehabilitation.leaveDocument = [];
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
} }
}); });
/**Hook */
onMounted(() => { onMounted(() => {
if (props.data) { if (props.data) {
formDataRehabilitation.leaveWrote = props.data.leaveWrote; formDataRehabilitation.leaveWrote = props.data.leaveWrote;
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate); formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate); formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
formDataRehabilitation.leaveDetail = props.data.leaveDetail; formDataRehabilitation.leaveDetail = props.data.leaveDetail;
// formDataRehabilitation.leaveDocument = props.data.leaveDocument; // formDataRehabilitation.leaveDocument = props.data.leaveDocument;
leaveDraftDocument.value = props.data.leaveDraftDocument; leaveDraftDocument.value = props.data.leaveDraftDocument;
leaveDocumentList.value = props.data.leaveDocument; leaveDocumentList.value = props.data.leaveDocument;
statusCheck.value = props.data.status; statusCheck.value = props.data.status;
} }
}); });
</script> </script>
<template> <template>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div> <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
</div> </div>
<form @submit.prevent="onValidate"> <form @submit.prevent="onValidate">
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="row q-pa-sm q-col-gutter-sm"> <div class="row q-pa-sm q-col-gutter-sm">
<q-input <q-input
v-model="formDataRehabilitation.leaveWrote" v-model="formDataRehabilitation.leaveWrote"
class="col-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-sm-12 cursor-pointer inputgreen"
ref="leaveWroteRef" ref="leaveWroteRef"
dense dense
outlined outlined
bg-color="white" bg-color="white"
label="เขียนที่" label="เขียนที่"
hide-bottom-space hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:rules="[(val) => !!val || `${'เขียนที่'}`]" :rules="[(val) => !!val || `${'เขียนที่'}`]"
/> />
<datepicker <datepicker
v-model="formDataRehabilitation.leaveStartDate" v-model="formDataRehabilitation.leaveStartDate"
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
week-start="0" week-start="0"
:enableTimePicker="false" :enableTimePicker="false"
:locale="'th'" :locale="'th'"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
@update:model-value="formDataRehabilitation.leaveEndDate = null" @update:model-value="formDataRehabilitation.leaveEndDate = null"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leaveStartDateRef" ref="leaveStartDateRef"
class="full-width datepicker" class="full-width datepicker"
bg-color="white" bg-color="white"
outlined outlined
dense dense
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
:model-value=" :model-value="
formDataRehabilitation.leaveStartDate != null formDataRehabilitation.leaveStartDate != null
? date2Thai(formDataRehabilitation.leaveStartDate) ? date2Thai(formDataRehabilitation.leaveStartDate)
: null : null
" "
:label="`${'ลาตั้งแต่วันที่'}`" :label="`${'ลาตั้งแต่วันที่'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<datepicker <datepicker
:class="!isLeave ? dateEndInputStyle : ''" :class="!isLeave ? dateEndInputStyle : ''"
v-model="formDataRehabilitation.leaveEndDate" v-model="formDataRehabilitation.leaveEndDate"
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen" class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
menu-class-name="modalfix" menu-class-name="modalfix"
autoApply autoApply
borderless borderless
week-start="0" week-start="0"
:locale="'th'" :locale="'th'"
@update:model-value="FetchCheck()" @update:model-value="FetchCheck()"
:readonly=" :readonly="
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW' !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
" "
:enableTimePicker="false" :enableTimePicker="false"
:min-date="formDataRehabilitation.leaveStartDate" :min-date="formDataRehabilitation.leaveStartDate"
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
ref="leaveEndDateRef" ref="leaveEndDateRef"
class="full-width datepicker" class="full-width datepicker"
outlined outlined
dense dense
lazy-rules lazy-rules
hide-bottom-space hide-bottom-space
:readonly=" :readonly="
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW' !formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
" "
:model-value=" :model-value="
formDataRehabilitation.leaveEndDate != null formDataRehabilitation.leaveEndDate != null
? date2Thai(formDataRehabilitation.leaveEndDate) ? date2Thai(formDataRehabilitation.leaveEndDate)
: null : null
" "
:label="`${'ลาถึงวันที่'}`" :label="`${'ลาถึงวันที่'}`"
:bottom-slots="!isLeave ? true : false" :bottom-slots="!isLeave ? true : false"
:color="!isLeave ? 'red' : 'black'" :color="!isLeave ? 'red' : 'black'"
:bg-color="!isLeave ? 'red-2' : 'white'" :bg-color="!isLeave ? 'red-2' : 'white'"
:border-color="!isLeave ? 'red' : 'gray'" :border-color="!isLeave ? 'red' : 'gray'"
:input-class="!isLeave ? dateEndInputStyle : ''" :input-class="!isLeave ? dateEndInputStyle : ''"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer" class="cursor-pointer"
style="color: var(--q-primary)" style="color: var(--q-primary)"
> >
</q-icon> </q-icon>
</template> </template>
<template v-slot:hint> <template v-slot:hint>
<span style="color: red"> <span style="color: red">
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }} {{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
</span> </span>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <q-input
v-model="formDataRehabilitation.leaveDetail" v-model="formDataRehabilitation.leaveDetail"
:readonly="!edit || statusCheck === 'NEW'" :readonly="!edit || statusCheck === 'NEW'"
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen" class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
bg-color="white" bg-color="white"
dense dense
outlined outlined
type="textarea" type="textarea"
label="รายละเอียด" label="รายละเอียด"
/> />
<div class="col-12" v-if="statusCheck != 'NEW'"> <div class="col-12" v-if="statusCheck != 'NEW'">
<q-file <q-file
v-model="formDataRehabilitation.leaveDocument" v-model="formDataRehabilitation.leaveDocument"
@added="fileUploadDoc" @added="fileUploadDoc"
multiple multiple
use-chips use-chips
bg-color="white" bg-color="white"
dense dense
outlined outlined
label="เอกสารประกอบ" label="เอกสารประกอบ"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
<div class="col-12 q-mt-sm" v-if="data"> <div class="col-12 q-mt-sm" v-if="data">
<div class="col-12 col-md-12 col-sm-12"> <div class="col-12 col-md-12 col-sm-12">
<q-card> <q-card>
<q-list separator> <q-list separator>
<q-item <q-item
v-for="(document, index) in leaveDocumentList" v-for="(document, index) in leaveDocumentList"
:key="index" :key="index"
class="q-my-xs" class="q-my-xs"
> >
<q-item-section> <q-item-section>
<q-item-label class="row items-baseline"> <q-item-label class="row items-baseline">
<div class="col"> <div class="col">
{{ "เอกสารแนบที่ " + (index + 1) }} {{ "เอกสารแนบที่ " + (index + 1) }}
</div> </div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
label="ดาวน์โหลด" label="ดาวน์โหลด"
size="12px" size="12px"
> class="q-mr-md"
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip> >
</q-btn> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
</q-item-label> </q-btn>
</q-item-section> <q-btn
</q-item> @click="clickDelete"
</q-list> target="_blank"
</q-card> outline
</div> color="red"
</div> label="ลบไฟล์"
</div> size="12px"
</div> >
</q-card> <q-tooltip>ลบไฟล์</q-tooltip>
</q-btn>
</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-card>
</div>
</div>
</div>
</div>
</q-card>
<div v-if="data && data.id" class="q-mt-md"> <div v-if="data && data.id" class="q-mt-md">
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" /> <q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
<div class="q-pl-sm text-weight-bold text-dark"> <div class="q-pl-sm text-weight-bold text-dark">
ดาวน์โหลด/อัปโหลดแบบฟอร์ม ดาวน์โหลด/อัปโหลดแบบฟอร์ม
</div> </div>
</div> </div>
<q-card class="bg-grey-1 q-pa-sm" bordered> <q-card class="bg-grey-1 q-pa-sm" bordered>
<div class="row"> <div class="row">
<div class="col-sm-3 q-my-sm"> <div class="col-sm-3 q-my-sm">
<div class="column q-mx-xs"> <div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center"> <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
ดาวน์โหลด ดาวน์โหลด
</div> --> </div> -->
<q-btn <q-btn
color="primary" color="primary"
icon="download" icon="download"
label="ดาวน์โหลดแบบฟอร์ม" label="ดาวน์โหลดแบบฟอร์ม"
@click=" @click="
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`) onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
" "
/> />
</div> </div>
</div> </div>
<div class="col-sm-5 q-my-sm"> <div class="col-sm-5 q-my-sm">
<div class="column q-mx-xs"> <div class="column q-mx-xs">
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center"> <!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
อัปโหลด อัปโหลด
</div> --> </div> -->
<q-file <q-file
v-model="formDataRehabilitation.leaveDraftDocument" v-model="formDataRehabilitation.leaveDraftDocument"
use-chips use-chips
dense dense
label="อัปโหลดแบบฟอร์ม" label="อัปโหลดแบบฟอร์ม"
outlined outlined
bg-color="white" bg-color="white"
accept="application/pdf" accept="application/pdf"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon name="attach_file" color="primary" /> <q-icon name="attach_file" color="primary" />
</template> </template>
</q-file> </q-file>
</div> </div>
</div> </div>
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm"> <div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
<div class="column q-mx-xs"> <div class="column q-mx-xs">
<q-btn <q-btn
icon="visibility" icon="visibility"
color="blue" color="blue"
label="ดาวน์โหลดไฟล์" label="ดาวน์โหลดไฟล์"
:href="leaveDraftDocument" :href="leaveDraftDocument"
target="_blank" target="_blank"
/> />
</div> </div>
</div> </div>
</div> </div>
</q-card> </q-card>
</div> </div>
<div v-if="!isSave"> <div v-if="!isSave">
<q-separator class="q-mt-sm" /> <q-separator class="q-mt-sm" />
<div class="row col-12 q-pt-md"> <div class="row col-12 q-pt-md">
<q-space /> <q-space />
<q-btn <q-btn
v-if="!props.data || props.data.status == 'DRAFT'" v-if="!props.data || props.data.status == 'DRAFT'"
id="onSubmit" id="onSubmit"
type="submit" type="submit"
unelevated unelevated
dense dense
class="q-px-md items-center btnBlue" class="q-px-md items-center btnBlue"
label="บันทึก" label="บันทึก"
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn ><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
> >
<q-btn <q-btn
v-if="data && statusCheck != 'NEW'" v-if="data && statusCheck != 'NEW'"
id="onSubmit" id="onSubmit"
type="button" type="button"
unelevated unelevated
dense dense
class="q-px-md items-center q-ml-sm" class="q-px-md items-center q-ml-sm"
color="primary" color="primary"
label="ยื่นใบลา" label="ยื่นใบลา"
@click="onConfirm()" @click="onConfirm()"
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn ><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
> >
</div> </div>
</div> </div>
</form> </form>
</template> </template>

294
src/modules/05_leave/components/FormLeave/Form.vue
View file

@ -5,167 +5,169 @@ import { useQuasar } from "quasar";
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence"; import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
import { useLeaveStore } from "@/modules/05_leave/store"; import { useLeaveStore } from "@/modules/05_leave/store";
/**ตัวแปรที่ใช้ */
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const dataStore = useLeaveStore(); const dataStore = useLeaveStore();
const { date2Thai } = mixin; const { date2Thai } = mixin;
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
model: { model: {
type: String, type: String,
default: "", default: "",
}, },
}); });
/** ข้อมูล v-model ของฟอร์ม */ /** ข้อมูล v-model ของฟอร์ม */
const formData = reactive<FormData>({ const formData = reactive<FormData>({
dateStart: new Date(), dateStart: new Date(),
subject: "เรื่อง", subject: "เรื่อง",
who: "เรียนผู้ใด", who: "เรียนผู้ใด",
requestName: "ชื่อผู้ยื่น", requestName: "ชื่อผู้ยื่น",
position: "ตำแหน่ง", position: "ตำแหน่ง",
level: "ระดับ", level: "ระดับ",
ocRequest: "สังกัด", ocRequest: "สังกัด",
leaveabsentDaySummon: "2", leaveabsentDaySummon: "2",
leaveUse: "1", leaveUse: "1",
leaveRemaining: "1", leaveRemaining: "1",
}); });
/**Hook */
onMounted(() => { onMounted(() => {
dataStore.typeLeave = ""; dataStore.typeLeave = "";
}); });
</script> </script>
<template> <template>
<q-card bordered class="q-pa-md bg-grey-1"> <q-card bordered class="q-pa-md bg-grey-1">
<div class="col-12 row q-pa-sm q-col-gutter-sm"> <div class="col-12 row q-pa-sm q-col-gutter-sm">
<datepicker <datepicker
class="col-12 col-sm-4" class="col-12 col-sm-4"
menu-class-name="modalfix" menu-class-name="modalfix"
v-model="dataStore.dateSendLeave" v-model="dataStore.dateSendLeave"
:locale="'th'" :locale="'th'"
autoApply autoApply
borderless borderless
:enableTimePicker="false" :enableTimePicker="false"
week-start="0" week-start="0"
readonly readonly
> >
<template #year="{ year }"> <template #year="{ year }">
{{ year + 543 }} {{ year + 543 }}
</template> </template>
<template #year-overlay-value="{ value }"> <template #year-overlay-value="{ value }">
{{ parseInt(value + 543) }} {{ parseInt(value + 543) }}
</template> </template>
<template #trigger> <template #trigger>
<q-input <q-input
outlined outlined
dense dense
bg-color="white" bg-color="white"
hide-bottom-space hide-bottom-space
readonly readonly
class="full-width" class="full-width"
:model-value=" :model-value="
dataStore.dateSendLeave != null dataStore.dateSendLeave != null
? date2Thai(dataStore.dateSendLeave) ? date2Thai(dataStore.dateSendLeave)
: null : null
" "
:label="`${'วันที่ยื่นใบลา'}`" :label="`${'วันที่ยื่นใบลา'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
> >
<template v-slot:prepend> <template v-slot:prepend>
<q-icon <q-icon
name="event" name="event"
class="cursor-pointer inputblack" class="cursor-pointer inputblack"
style="color: var(--black)" style="color: var(--black)"
> >
</q-icon> </q-icon>
</template> </template>
</q-input> </q-input>
</template> </template>
</datepicker> </datepicker>
<q-input <q-input
class="col-12 col-sm-4" class="col-12 col-sm-4"
dense dense
bg-color="white" bg-color="white"
outlined outlined
readonly readonly
v-model="dataStore.typeLeave" v-model="dataStore.typeLeave"
label="เรื่อง" label="เรื่อง"
/> />
<q-input <q-input
class="col-12 col-sm-4" class="col-12 col-sm-4"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.dear" v-model="dataStore.dear"
label="เรียน" label="เรียน"
/> />
<q-input <q-input
class="col-12 col-sm-3" class="col-12 col-sm-3"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.fullName" v-model="dataStore.fullName"
label="ชื่อผู้ยื่นขอ" label="ชื่อผู้ยื่นขอ"
/> />
<q-input <q-input
class="col-12 col-sm-3" class="col-12 col-sm-3"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.positionName" v-model="dataStore.positionName"
label="ตำแหน่งผู้ยื่นขอ" label="ตำแหน่งผู้ยื่นขอ"
/> />
<q-input <q-input
class="col-12 col-sm-3" class="col-12 col-sm-3"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.positionLevelName" v-model="dataStore.positionLevelName"
label="ระดับผู้ยื่นขอ" label="ระดับผู้ยื่นขอ"
/> />
<q-input <q-input
class="col-12 col-sm-3" class="col-12 col-sm-3"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.organizationName" v-model="dataStore.organizationName"
label="สังกัดผู้ยื่นขอ" label="สังกัดผู้ยื่นขอ"
/> />
<q-input <q-input
v-if="props.model === 'LV-005'" v-if="props.model === 'LV-005'"
class="col-12 col-sm-4" class="col-12 col-sm-4"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.leaveLimit" v-model="dataStore.leaveLimit"
label="จำนวนสิทธิ์การลาที่ได้รับ" label="จำนวนสิทธิ์การลาที่ได้รับ"
/> />
<q-input <q-input
class="col-12 col-sm-4" class="col-12 col-sm-4"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.leaveTotal" v-model="dataStore.leaveTotal"
label="จำนวนสิทธิ์การลาที่ใช้ไป" label="จำนวนสิทธิ์การลาที่ใช้ไป"
/> />
<q-input <q-input
v-if="props.model === 'LV-005'" v-if="props.model === 'LV-005'"
class="col-12 col-sm-4" class="col-12 col-sm-4"
dense dense
outlined outlined
readonly readonly
bg-color="white" bg-color="white"
v-model="dataStore.leaveRemain" v-model="dataStore.leaveRemain"
label="จำนวนสิทธิ์การลาคงเหลือ" label="จำนวนสิทธิ์การลาคงเหลือ"
/> />
</div> </div>
</q-card> </q-card>
</template> </template>

434
src/modules/05_leave/components/ListView.vue
View file

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

185
src/modules/05_leave/components/formDetail/01_SickForm.vue
View file

@ -1,97 +1,106 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveRange == 'ALL' ? props.data.leaveTotal + ' วัน' : props.data.leaveRange == 'MORNING' ? 'ลาครึ่งวันเช้า (0.5)': 'ลาครึ่งวันบ่าย (0.5)' }} {{
</div> props.data.leaveRange == "ALL"
</div> ? props.data.leaveTotal + " วัน"
<div class="row"> : props.data.leaveRange == "MORNING"
<div class="col text-grey-8"></div> ? "ลาครึ่งวันเช้า (0.5)"
<div class="col">{{ props.data.leaveTypeDay }}</div> : "ลาครึ่งวันบ่าย (0.5)"
</div> }}
<div class="row"> </div>
<div class="col text-grey-8"> </div>
ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่ <div class="row">
</div> <div class="col text-grey-8"></div>
<div class="col">{{ props.data.leaveLastStart }}</div> <div class="col">{{ props.data.leaveTypeDay }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div> <div class="col text-grey-8">
<div class="col">{{ props.data.leaveNumber }}</div> ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
</div> </div>
<div class="row"> <div class="col">{{ props.data.leaveLastStart }}</div>
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div> </div>
<div class="col">{{ props.data.leaveAddress }}</div> <div class="row">
</div> <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
<div class="row"> <div class="col">{{ props.data.leaveNumber }}</div>
<div class="col text-grey-8">รายละเอียด</div> </div>
<div class="col"> <div class="row">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
</div> <div class="col">{{ props.data.leaveAddress }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
<div {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
v-if=" </div>
props.data.leaveDocument && props.data.leaveDocument.length > 0 </div>
" <div class="row">
> <div class="col text-grey-8">เอกสารแนบ</div>
<div <div class="col">
v-for="(document, index) in props.data.leaveDocument" <div
:key="index" v-if="
:style="{ marginBottom: '10px' }" props.data.leaveDocument && props.data.leaveDocument.length > 0
> "
<div> >
<q-btn <div
:href="document" v-for="(document, index) in props.data.leaveDocument"
target="_blank" :key="index"
outline :style="{ marginBottom: '10px' }"
color="blue" >
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" <div>
size="12px" <q-btn
> :href="document"
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> target="_blank"
</q-btn> outline
</div> color="blue"
</div> :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
</div> size="12px"
<div v-else>-</div> >
</div> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</div> </q-btn>
</div> </div>
</q-card-section> </div>
</div>
<div v-else>-</div>
</div>
</div>
</div>
</q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

175
src/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue
View file

@ -1,94 +1,97 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }} {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ชื่อภรรยา</div> <div class="col text-grey-8">ชื่อภรรยา</div>
<div class="col">{{ props.data.wifeDayName }}</div> <div class="col">{{ props.data.wifeDayName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่คลอด</div> <div class="col text-grey-8">วันที่คลอด</div>
<div class="col">{{ props.data.wifeDayDateBorn }}</div> <div class="col">{{ props.data.wifeDayDateBorn }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div> <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
<div class="col">{{ props.data.leaveNumber }}</div> <div class="col">{{ props.data.leaveNumber }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div> <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
<div class="col">{{ props.data.leaveAddress }}</div> <div class="col">{{ props.data.leaveAddress }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '11px' }" :style="{ marginBottom: '11px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

189
src/modules/05_leave/components/formDetail/05_VacationForm.vue
View file

@ -1,99 +1,108 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div> <div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
<div class="col">{{ props.data.restDayOldTotal }}</div> <div class="col">{{ props.data.restDayOldTotal }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div> <div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
<div class="col">{{ props.data.restDayCurrentTotal }}</div> <div class="col">{{ props.data.restDayCurrentTotal }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveRange == 'ALL' ? props.data.leaveTotal + ' วัน' : props.data.leaveRange == 'MORNING' ? 'ลาครึ่งวันเช้า (0.5)': 'ลาครึ่งวันบ่าย (0.5)' }} {{
</div> props.data.leaveRange == "ALL"
</div> ? props.data.leaveTotal + " วัน"
<div class="row"> : props.data.leaveRange == "MORNING"
<div class="col text-grey-8"></div> ? "ลาครึ่งวันเช้า (0.5)"
<div class="col">{{ props.data.leaveTypeDay }}</div> : "ลาครึ่งวันบ่าย (0.5)"
</div> }}
<div class="row"> </div>
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div> </div>
<div class="col">{{ props.data.leaveNumber }}</div> <div class="row">
</div> <div class="col text-grey-8"></div>
<div class="row"> <div class="col">{{ props.data.leaveTypeDay }}</div>
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div> </div>
<div class="col">{{ props.data.leaveAddress }}</div> <div class="row">
</div> <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
<div class="row"> <div class="col">{{ props.data.leaveNumber }}</div>
<div class="col text-grey-8">รายละเอียด</div> </div>
<div class="col"> <div class="row">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
</div> <div class="col">{{ props.data.leaveAddress }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
<div {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
v-if=" </div>
props.data.leaveDocument && props.data.leaveDocument.length > 0 </div>
" <div class="row">
> <div class="col text-grey-8">เอกสารแนบ</div>
<div <div class="col">
v-for="(document, index) in props.data.leaveDocument" <div
:key="index" v-if="
:style="{ marginBottom: '10px' }" props.data.leaveDocument && props.data.leaveDocument.length > 0
> "
<div> >
<q-btn <div
:href="document" v-for="(document, index) in props.data.leaveDocument"
target="_blank" :key="index"
outline :style="{ marginBottom: '10px' }"
color="blue" >
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" <div>
size="12px" <q-btn
> :href="document"
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> target="_blank"
</q-btn> outline
</div> color="blue"
</div> :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
</div> size="12px"
<div v-else>-</div> >
</div> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</div> </q-btn>
</div> </div>
</q-card-section> </div>
</div>
<div v-else>-</div>
</div>
</div>
</div>
</q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

209
src/modules/05_leave/components/formDetail/06_OrdinationForm.vue
View file

@ -1,112 +1,115 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveLastStart }}</div> <div class="col">{{ props.data.leaveLastStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveLastEnd }}</div> <div class="col">{{ props.data.leaveLastEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }} {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div> <div class="col text-grey-8">วันเดือนปีเกิด</div>
<div class="col">{{ props.data.leavebirthDate }}</div> <div class="col">{{ props.data.leavebirthDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เคย/ไม่เคยบวช</div> <div class="col text-grey-8">เคย/ไม่เคยบวช</div>
<div class="col"> <div class="col">
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }} {{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">สถานที่บวช</div> <div class="col text-grey-8">สถานที่บวช</div>
<div class="col"> <div class="col">
{{ props.data.ordainDayLocationName }} {{ props.data.ordainDayLocationName }}
{{ props.data.ordainDayLocationAddress }} {{ props.data.ordainDayLocationAddress }}
{{ props.data.ordainDayLocationNumber }} {{ props.data.ordainDayLocationNumber }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันอุปสมบท</div> <div class="col text-grey-8">วันอุปสมบท</div>
<div class="col">{{ props.data.ordainDayOrdination }}</div> <div class="col">{{ props.data.ordainDayOrdination }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">สถานที่จำพรรษา</div> <div class="col text-grey-8">สถานที่จำพรรษา</div>
<div class="col"> <div class="col">
{{ props.data.ordainDayBuddhistLentName }} {{ props.data.ordainDayBuddhistLentName }}
{{ props.data.ordainDayBuddhistLentAddress }} {{ props.data.ordainDayBuddhistLentAddress }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

159
src/modules/05_leave/components/formDetail/07_HajjForm.vue
View file

@ -1,87 +1,90 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }} {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div> <div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div> <div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

183
src/modules/05_leave/components/formDetail/08_MilitaryForm.vue
View file

@ -1,100 +1,103 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
console.log(props); console.log(props);
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }} {{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ได้รับหมายเรียกของ</div> <div class="col text-grey-8">ได้รับหมายเรียกของ</div>
<div class="col">{{ props.data.absentDaySummon }}</div> <div class="col">{{ props.data.absentDaySummon }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ที่</div> <div class="col text-grey-8">ที่</div>
<div class="col">{{ props.data.absentDayLocation }}</div> <div class="col">{{ props.data.absentDayLocation }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลงวันที่</div> <div class="col text-grey-8">ลงวันที่</div>
<div class="col">{{ props.data.absentDayRegistorDate }}</div> <div class="col">{{ props.data.absentDayRegistorDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ให้เข้ารับการ</div> <div class="col text-grey-8">ให้เข้ารับการ</div>
<div class="col">{{ props.data.absentDayGetIn }}</div> <div class="col">{{ props.data.absentDayGetIn }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ณ ที่</div> <div class="col text-grey-8">ณ ที่</div>
<div class="col">{{ props.data.absentDayAt }}</div> <div class="col">{{ props.data.absentDayAt }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

227
src/modules/05_leave/components/formDetail/09_StudyForm.vue
View file

@ -1,121 +1,124 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }} {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div> <div class="col text-grey-8">วันเดือนปีเกิด</div>
<div class="col">{{ props.data.leavebirthDate }}</div> <div class="col">{{ props.data.leavebirthDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div> <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
<div class="col"> <div class="col">
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }}) {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ศึกษาวิชา</div> <div class="col text-grey-8">ศึกษาวิชา</div>
<div class="col">{{ props.data.studyDaySubject }}</div> <div class="col">{{ props.data.studyDaySubject }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ขั้นปริญญา</div> <div class="col text-grey-8">ขั้นปริญญา</div>
<div class="col">{{ props.data.studyDayDegreeLevel }}</div> <div class="col">{{ props.data.studyDayDegreeLevel }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ชื่อสถานศึกษา</div> <div class="col text-grey-8">ชื่อสถานศึกษา</div>
<div class="col">{{ props.data.studyDayUniversityName }}</div> <div class="col">{{ props.data.studyDayUniversityName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ประเทศ</div> <div class="col text-grey-8">ประเทศ</div>
<div class="col">{{ props.data.studyDayCountry }}</div> <div class="col">{{ props.data.studyDayCountry }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ด้วยทุน</div> <div class="col text-grey-8">ด้วยทุน</div>
<div class="col">{{ props.data.studyDayScholarship }}</div> <div class="col">{{ props.data.studyDayScholarship }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div> <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
<div class="col">{{ props.data.leaveNumber }}</div> <div class="col">{{ props.data.leaveNumber }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div> <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
<div class="col">{{ props.data.leaveAddress }}</div> <div class="col">{{ props.data.leaveAddress }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>

219
src/modules/05_leave/components/formDetail/10_TrainForm.vue
View file

@ -1,116 +1,119 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }} {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div> <div class="col text-grey-8">วันเดือนปีเกิด</div>
<div class="col">{{ props.data.leavebirthDate }}</div> <div class="col">{{ props.data.leavebirthDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div> <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
<div class="col"> <div class="col">
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }}) {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ด้าน/หลักสูตร</div> <div class="col text-grey-8">ด้าน/หลักสูตร</div>
<div class="col">{{ props.data.studyDayTrainingSubject }}</div> <div class="col">{{ props.data.studyDayTrainingSubject }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ณ สถานที่</div> <div class="col text-grey-8">ณ สถานที่</div>
<div class="col">{{ props.data.studyDayTrainingName }}</div> <div class="col">{{ props.data.studyDayTrainingName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ประเทศ</div> <div class="col text-grey-8">ประเทศ</div>
<div class="col">{{ props.data.studyDayCountry }}</div> <div class="col">{{ props.data.studyDayCountry }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ด้วยทุน</div> <div class="col text-grey-8">ด้วยทุน</div>
<div class="col">{{ props.data.studyDayScholarship }}</div> <div class="col">{{ props.data.studyDayScholarship }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div> <div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
<div class="col">{{ props.data.leaveNumber }}</div> <div class="col">{{ props.data.leaveNumber }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div> <div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
<div class="col">{{ props.data.leaveAddress }}</div> <div class="col">{{ props.data.leaveAddress }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>

175
src/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue
View file

@ -1,92 +1,95 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }} {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารประกอบ</div> <div class="col text-grey-8">เอกสารประกอบ</div>
<div class="col" v-if="props.data.leaveDocument"> <div class="col" v-if="props.data.leaveDocument">
<q-btn <q-btn
:href="props.data.leaveDocument" :href="props.data.leaveDocument"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
label="ดาวน์โหลด" label="ดาวน์โหลด"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
> >
</div> </div>
<div class="col" v-else>-</div> <div class="col" v-else>-</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>

237
src/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue
View file

@ -1,123 +1,126 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">จำนวนวันที่ลา</div> <div class="col text-grey-8">จำนวนวันที่ลา</div>
<div class="col"> <div class="col">
{{ props.data.leaveCount ? props.data.leaveCount : "-" }} {{ props.data.leaveCount ? props.data.leaveCount : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันเดือนปีเกิด</div> <div class="col text-grey-8">วันเดือนปีเกิด</div>
<div class="col">{{ props.data.leavebirthDate }}</div> <div class="col">{{ props.data.leavebirthDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่เข้ารับราชการ</div> <div class="col text-grey-8">วันที่เข้ารับราชการ</div>
<div class="col">{{ props.data.leavegovernmentDate }}</div> <div class="col">{{ props.data.leavegovernmentDate }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div> <div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
<div class="col"> <div class="col">
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }}) {{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ชื่อคู่สมรส</div> <div class="col text-grey-8">ชื่อคู่สมรส</div>
<div class="col">{{ props.data.coupleDayName }}</div> <div class="col">{{ props.data.coupleDayName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ตำแหน่งคู่สมรส</div> <div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
<div class="col">{{ props.data.coupleDayPosition }}</div> <div class="col">{{ props.data.coupleDayPosition }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div> <div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
<div class="col">{{ props.data.coupleDayLevelCountry }}</div> <div class="col">{{ props.data.coupleDayLevelCountry }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div> <div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
</div> </div>
<div class="row q-mt-xs"> <div class="row q-mt-xs">
<div class="col text-grey-8"> <div class="col text-grey-8">
<div class="q-ml-md" style="list-style-type: circle"> <div class="q-ml-md" style="list-style-type: circle">
<li>ประเทศ</li> <li>ประเทศ</li>
<li>จำนวนวัน</li> <li>จำนวนวัน</li>
<li>ตั้งแต่วันที่</li> <li>ตั้งแต่วันที่</li>
<li>ถึงวันที่</li> <li>ถึงวันที่</li>
<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li> <li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div>{{ props.data.coupleDayCountryHistory }}</div> <div>{{ props.data.coupleDayCountryHistory }}</div>
<div>{{ props.data.coupleDayTotalHistory }}</div> <div>{{ props.data.coupleDayTotalHistory }}</div>
<div>{{ props.data.coupleDayStartDateHistory }}</div> <div>{{ props.data.coupleDayStartDateHistory }}</div>
<div>{{ props.data.coupleDayEndDateHistory }}</div> <div>{{ props.data.coupleDayEndDateHistory }}</div>
<div>{{ props.data.coupleDaySumTotalHistory }}</div> <div>{{ props.data.coupleDaySumTotalHistory }}</div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>

163
src/modules/05_leave/components/formDetail/13_RehabilitationForm.vue
View file

@ -1,86 +1,89 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col text-grey-8">วันที่ยื่นใบลา</div> <div class="col text-grey-8">วันที่ยื่นใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เรื่อง</div> <div class="col text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เขียนที่</div> <div class="col text-grey-8">เขียนที่</div>
<div class="col">{{ props.data.leaveWrote }}</div> <div class="col">{{ props.data.leaveWrote }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาตั้งแต่วันที่</div> <div class="col text-grey-8">ลาตั้งแต่วันที่</div>
<div class="col">{{ props.data.leaveDateStart }}</div> <div class="col">{{ props.data.leaveDateStart }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">ลาถึงวันที่</div> <div class="col text-grey-8">ลาถึงวันที่</div>
<div class="col">{{ props.data.leaveDateEnd }}</div> <div class="col">{{ props.data.leaveDateEnd }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">รายละเอียด</div> <div class="col text-grey-8">รายละเอียด</div>
<div class="col"> <div class="col">
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }} {{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารประกอบ</div> <div class="col text-grey-8">เอกสารประกอบ</div>
<div class="col" v-if="props.data.leaveDocument"> <div class="col" v-if="props.data.leaveDocument">
<q-btn <q-btn
:href="props.data.leaveDocument" :href="props.data.leaveDocument"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
label="ดาวน์โหลด" label="ดาวน์โหลด"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
> >
</div> </div>
<div class="col" v-else>-</div> <div class="col" v-else>-</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารแนบ</div> <div class="col text-grey-8">เอกสารแนบ</div>
<div class="col"> <div class="col">
<div <div
v-if=" v-if="
props.data.leaveDocument && props.data.leaveDocument.length > 0 props.data.leaveDocument && props.data.leaveDocument.length > 0
" "
> >
<div <div
v-for="(document, index) in props.data.leaveDocument" v-for="(document, index) in props.data.leaveDocument"
:key="index" :key="index"
:style="{ marginBottom: '10px' }" :style="{ marginBottom: '10px' }"
> >
<div> <div>
<q-btn <q-btn
:href="document" :href="document"
target="_blank" target="_blank"
outline outline
color="blue" color="blue"
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`" :label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
size="12px" size="12px"
> >
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip> <q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
</q-btn> </q-btn>
</div> </div>
</div> </div>
</div> </div>
<div v-else>-</div> <div v-else>-</div>
</div> </div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>

17
src/modules/05_leave/components/formDetail/formCancel.vue
View file

@ -1,12 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}) });
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
@ -57,7 +59,16 @@ const props = defineProps({
<div class="row"> <div class="row">
<div class="col text-grey-8">เอกสารการยกเลิกการลา</div> <div class="col text-grey-8">เอกสารการยกเลิกการลา</div>
<div class="col" v-if="props.data.leaveDocDelete"> <div class="col" v-if="props.data.leaveDocDelete">
<q-btn :href="props.data.leaveDocDelete" target="_blank" outline color="blue" label="ดาวน์โหลด" size="12px"> <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn> <q-btn
:href="props.data.leaveDocDelete"
target="_blank"
outline
color="blue"
label="ดาวน์โหลด"
size="12px"
>
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
>
</div> </div>
<div class="col" v-else>-</div> <div class="col" v-else>-</div>
</div> </div>

76
src/modules/05_leave/components/formDetail/formMain.vue
View file

@ -1,45 +1,47 @@
<script setup lang="ts"> <script setup lang="ts">
/**
* รับ prop จาก component
*/
const props = defineProps({ const props = defineProps({
data: { data: {
type: Object, type: Object,
required: true, required: true,
}, },
}); });
console.log(props);
</script> </script>
<template> <template>
<q-card-section> <q-card-section>
<div class="q-pa-md q-gutter-md"> <div class="q-pa-md q-gutter-md">
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">วันที่ยืนใบลา</div> <div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
<div class="col">{{ props.data.dateSendLeave }}</div> <div class="col">{{ props.data.dateSendLeave }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">เรื่อง</div> <div class="col-4 text-grey-8">เรื่อง</div>
<div class="col">{{ props.data.leaveTypeName }}</div> <div class="col">{{ props.data.leaveTypeName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">เรียน</div> <div class="col-4 text-grey-8">เรียน</div>
<div class="col">{{ props.data.notification }}</div> <div class="col">{{ props.data.notification }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div> <div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
<div class="col">{{ props.data.fullname }}</div> <div class="col">{{ props.data.fullname }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div> <div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
<div class="col">{{ props.data.positionName }}</div> <div class="col">{{ props.data.positionName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div> <div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
<div class="col">{{ props.data.positionLevelName }}</div> <div class="col">{{ props.data.positionLevelName }}</div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div> <div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
<div class="col">{{ props.data.organizationName }}</div> <div class="col">{{ props.data.organizationName }}</div>
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
</template> </template>
<style scoped></style> <style scoped></style>