เพิ่มปุ่มลบ/refactor
This commit is contained in:
AnandaTon
parent
01b550520e
commit
aa76e7d030
30 changed files with 8420 additions and 7699 deletions
|
|
@ -1,14 +1,15 @@
|
|||
import env from "../index"
|
||||
import env from "../index";
|
||||
|
||||
const retirementResign = `${env.API_URI}/retirement`
|
||||
const leave = `${env.API_URI}/leave`
|
||||
const holiday = `${env.API_URI}/metadata/holiday/`
|
||||
const retirementResign = `${env.API_URI}/retirement`;
|
||||
const leave = `${env.API_URI}/leave`;
|
||||
const holiday = `${env.API_URI}/metadata/holiday/`;
|
||||
|
||||
export default {
|
||||
listUser: () => `${retirementResign}/resign/user`,
|
||||
listResign: () => `${retirementResign}/resign`,
|
||||
resingByid: (id: string) => `${retirementResign}/resign/${id}`,
|
||||
questionnaireByid: (id: string) => `${retirementResign}/resign/questionnaire/${id}`,
|
||||
questionnaireByid: (id: string) =>
|
||||
`${retirementResign}/resign/questionnaire/${id}`,
|
||||
listquestionnaire: () => `${retirementResign}/resign/questionnaire`,
|
||||
// คำถาม
|
||||
questionList: () => `${retirementResign}/resign/questionnaire/question`,
|
||||
|
|
@ -26,6 +27,8 @@ export default {
|
|||
leaveCheck: () => `${leave}/user/check`,
|
||||
leaveReport: (id: string) => `${leave}/report/${id}`,
|
||||
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}`,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,46 +1,50 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import keycloak from "@/plugins/keycloak"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/**import calendar*/
|
||||
import FullCalendar from "@fullcalendar/vue3"
|
||||
import dayGridPlugin from "@fullcalendar/daygrid"
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
// import type { CalendarOptions } from "@fullcalendar/core"
|
||||
import timeGridPlugin from "@fullcalendar/timegrid"
|
||||
import interactionPlugin from "@fullcalendar/interaction"
|
||||
import allLocales from "@fullcalendar/core/locales-all"
|
||||
import listPlugin from "@fullcalendar/list"
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import allLocales from "@fullcalendar/core/locales-all";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
/** import type*/
|
||||
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"
|
||||
import type { DataCalendar, LeaveType } from "@/modules/05_leave/interface/response/leave"
|
||||
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
|
||||
import type {
|
||||
DataCalendar,
|
||||
LeaveType,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue"
|
||||
import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
|
||||
|
||||
/** import stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
// import { aR } from "@fullcalendar/core/internal-common"
|
||||
|
||||
const mixin = useCounterMixin()
|
||||
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai, dateToISO } = mixin
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
const emit = defineEmits(["update:dateYear"])
|
||||
|
||||
const fullName = ref<string>("")
|
||||
const mainData = ref<DataCalendar[]>([])
|
||||
|
||||
const keycloakId = ref<string>(keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : "")
|
||||
/**ตัวแปรที่ใช้ */
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
|
||||
const $q = useQuasar();
|
||||
const emit = defineEmits(["update:dateYear"]);
|
||||
const fullName = ref<string>("");
|
||||
const mainData = ref<DataCalendar[]>([]);
|
||||
const keycloakId = ref<string>(
|
||||
keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
|
||||
);
|
||||
const modal = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
*/
|
||||
const fullCalendar = ref<any>() //ref calendar
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<any>({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
|
|
@ -65,38 +69,43 @@ const calendarOptions = ref<any>({
|
|||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: [],
|
||||
})
|
||||
});
|
||||
|
||||
/**Map ตัวแปร dateMonth */
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
})
|
||||
});
|
||||
|
||||
/** function เรียกข้อมูล calendar*/
|
||||
async function fetchDataCalendar() {
|
||||
showLoader()
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCalendar(), {
|
||||
year: dateMonth.value.year,
|
||||
})
|
||||
.then(res => {
|
||||
mainData.value = res.data.result
|
||||
.then((res) => {
|
||||
mainData.value = res.data.result;
|
||||
|
||||
const double_name = [...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId))]
|
||||
filterLists.value = []
|
||||
const double_name = [
|
||||
...new Set(mainData.value.map((item: DataCalendar) => item.keycloakId)),
|
||||
];
|
||||
filterLists.value = [];
|
||||
for (let i = 1; i <= double_name.length; i++) {
|
||||
const name = double_name[i - 1]
|
||||
const name = double_name[i - 1];
|
||||
const filterName = {
|
||||
id: name,
|
||||
name: convertKeycloakId(name),
|
||||
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) {
|
||||
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
|
||||
.filter((x: any) => x.status != "REJECT" && x.status != "DELETE")
|
||||
|
|
@ -104,45 +113,57 @@ async function fetchDataCalendar() {
|
|||
id: e.id,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
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,
|
||||
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
|
||||
textColor: "black",
|
||||
}))
|
||||
calendarOptions.value.events = event
|
||||
console.log(calendarOptions.value.events)
|
||||
}));
|
||||
calendarOptions.value.events = event;
|
||||
console.log(calendarOptions.value.events);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
await fetchData()
|
||||
hideLoader();
|
||||
});
|
||||
await fetchData();
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch วันหยุดในปฏิทิน
|
||||
*/
|
||||
const fetchData = async () => {
|
||||
showLoader()
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.listHolidayHistoryYearMonth(dateMonth.value.year, dateMonth.value.month + 1))
|
||||
.then(res => {
|
||||
const dataNormal = res.data.result.normal
|
||||
const dataSixDays = res.data.result.sixDays
|
||||
const data = dataNormal
|
||||
.get(
|
||||
config.API.listHolidayHistoryYearMonth(
|
||||
dateMonth.value.year,
|
||||
dateMonth.value.month + 1
|
||||
)
|
||||
)
|
||||
.then((res) => {
|
||||
const dataNormal = res.data.result.normal;
|
||||
const dataSixDays = res.data.result.sixDays;
|
||||
const data = dataNormal;
|
||||
const event = data.map((e: any) => ({
|
||||
id: e.id,
|
||||
title: `${e.name} `,
|
||||
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,
|
||||
color: " #CCE5FF",
|
||||
textColor: "#0080FF",
|
||||
}))
|
||||
calendarOptions.value.events = [...calendarOptions.value.events, ...event]
|
||||
}));
|
||||
calendarOptions.value.events = [
|
||||
...calendarOptions.value.events,
|
||||
...event,
|
||||
];
|
||||
// const dataSix = dataSixDays
|
||||
// const eventSix = dataSix.map((e: any) => ({
|
||||
// id: e.id,
|
||||
|
|
@ -154,32 +175,33 @@ const fetchData = async () => {
|
|||
// textColor: "#FF8000",
|
||||
// }))
|
||||
// calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
|
||||
console.log(calendarOptions.value.events)
|
||||
console.log(calendarOptions.value.events);
|
||||
})
|
||||
.catch(e => {
|
||||
messageError($q, e)
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader()
|
||||
})
|
||||
}
|
||||
hideLoader();
|
||||
});
|
||||
};
|
||||
|
||||
/**function แปลงkeycloakId */
|
||||
function convertKeycloakId(id: any) {
|
||||
const filterName = mainData.value.find((e: any) => e.keycloakId === id)
|
||||
return filterName?.fullName
|
||||
const filterName = mainData.value.find((e: any) => e.keycloakId === id);
|
||||
return filterName?.fullName;
|
||||
}
|
||||
|
||||
const leaveType = ref<LeaveType[]>([])
|
||||
/** function เรียกประเภทการลา */
|
||||
const leaveType = ref<LeaveType[]>([]);
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async res => {
|
||||
leaveType.value = res.data.result
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
.then(async (res) => {
|
||||
leaveType.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -187,66 +209,72 @@ async function fectOptionType() {
|
|||
* @param val datepicker แบบเลือกปีและเดือน
|
||||
*/
|
||||
function monthYearThai(val: DataDateMonthObject) {
|
||||
if (val == null) return ""
|
||||
else return monthYear2Thai(val.month, val.year)
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
}
|
||||
|
||||
/** function อัปเดท Calendar */
|
||||
async function updateMonth() {
|
||||
await fetchDataCalendar()
|
||||
await fetchData()
|
||||
const calen = fullCalendar.value.getApi()
|
||||
const date = new Date(dateMonth.value.year, dateMonth.value.month)
|
||||
calen.gotoDate(date)
|
||||
await fetchDataCalendar();
|
||||
await fetchData();
|
||||
const calen = fullCalendar.value.getApi();
|
||||
const date = new Date(dateMonth.value.year, dateMonth.value.month);
|
||||
calen.gotoDate(date);
|
||||
}
|
||||
|
||||
const modal = ref<boolean>(false)
|
||||
const leaveId = ref<string>("")
|
||||
|
||||
/**
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
*/
|
||||
async function onCilckview(id: string) {
|
||||
modal.value = true
|
||||
leaveId.value = id
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
}
|
||||
|
||||
/** function closePopup*/
|
||||
async function onClickClose() {
|
||||
modal.value = false
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/** filter calendar left */
|
||||
const filterLists = ref<any>([])
|
||||
const filterVal = ref<any>([])
|
||||
const filterLists = ref<any>([]);
|
||||
const filterVal = ref<any>([]);
|
||||
|
||||
/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่Calendar */
|
||||
watch(
|
||||
() => filterVal.value,
|
||||
() => {
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter((e: DataCalendar) => e.keycloakId === item && e.status != "REJECT" && e.status != "DELETE")
|
||||
.map(e => ({
|
||||
.filter(
|
||||
(e: DataCalendar) =>
|
||||
e.keycloakId === item &&
|
||||
e.status != "REJECT" &&
|
||||
e.status != "DELETE"
|
||||
)
|
||||
.map((e) => ({
|
||||
id: e.id,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
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,
|
||||
color: e.keycloakId === keycloakId.value ? "#DCEDC8" : "#CFD8DC",
|
||||
textColor: "black",
|
||||
}))
|
||||
})
|
||||
const allEventData = [].concat(...eventData)
|
||||
calendarOptions.value.events = allEventData
|
||||
}));
|
||||
});
|
||||
const allEventData = [].concat(...eventData);
|
||||
calendarOptions.value.events = allEventData;
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
/**Hook */
|
||||
onMounted(async () => {
|
||||
filterVal.value.push(keycloakId.value)
|
||||
await fetchDataCalendar()
|
||||
await fectOptionType()
|
||||
})
|
||||
filterVal.value.push(keycloakId.value);
|
||||
await fetchDataCalendar();
|
||||
await fectOptionType();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -255,8 +283,18 @@ onMounted(async () => {
|
|||
<q-card class="col-12" flat bordered>
|
||||
<div class="q-gutter-sm col-12">
|
||||
<q-list class="rounded-borders q-pt-sm" dense>
|
||||
<q-item v-for="(item, i) in filterLists" :key="i" tag="label" v-ripple>
|
||||
<q-checkbox size="sm" v-model="filterVal" :val="item.id" :color="item.color" />
|
||||
<q-item
|
||||
v-for="(item, i) in filterLists"
|
||||
:key="i"
|
||||
tag="label"
|
||||
v-ripple
|
||||
>
|
||||
<q-checkbox
|
||||
size="sm"
|
||||
v-model="filterVal"
|
||||
:val="item.id"
|
||||
:color="item.color"
|
||||
/>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
|
|
@ -270,16 +308,40 @@ onMounted(async () => {
|
|||
<div class="q-mt-sm col-12">
|
||||
<div class="row col-12 q-gutter-sm">
|
||||
<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">
|
||||
<!-- 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-overlay-value="{ value }">{{ parseInt(value + 543) }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input :model-value="monthYearThai(dateMonth)" dense outlined bg-color="white" style="width: 130px">
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
style="width: 130px"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)"> </q-icon>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
|
|
@ -288,14 +350,29 @@ onMounted(async () => {
|
|||
</q-card>
|
||||
|
||||
<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">
|
||||
<div 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)">
|
||||
<div
|
||||
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 }}
|
||||
</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">
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
|
|
@ -307,15 +384,30 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="row q-col-gutter-lg justify-end">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -323,7 +415,12 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<DialogDetail :modal="modal" :leaveId="leaveId" :onClickClose="onClickClose" :leaveType="leaveType" />
|
||||
<DialogDetail
|
||||
:modal="modal"
|
||||
:leaveId="leaveId"
|
||||
:onClickClose="onClickClose"
|
||||
:leaveType="leaveType"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scope lang="scss">
|
||||
|
|
|
|||
|
|
@ -1,37 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from "vue"
|
||||
import { useQuasar } from "quasar"
|
||||
import http from "@/plugins/http"
|
||||
import config from "@/app.config"
|
||||
import { ref, reactive, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** import type*/
|
||||
import type { FremDetail, FormDelete, FormDeleteRef, FromCancelDetail } from "@/modules/05_leave/interface/response/leave"
|
||||
import type {
|
||||
FremDetail,
|
||||
FormDelete,
|
||||
FormDeleteRef,
|
||||
FromCancelDetail,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue"
|
||||
import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue"
|
||||
import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue"
|
||||
import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue"
|
||||
import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue"
|
||||
import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue"
|
||||
import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue"
|
||||
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue"
|
||||
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue"
|
||||
import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue"
|
||||
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue"
|
||||
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue"
|
||||
import FormLeave from "@/modules/05_leave/components/formDetail/01_SickForm.vue";
|
||||
import FormChildbirth from "@/modules/05_leave/components/formDetail/04_HelpWifeBirthForm.vue";
|
||||
import FormHoliday from "@/modules/05_leave/components/formDetail/05_VacationForm.vue";
|
||||
import FormUpasom from "@/modules/05_leave/components/formDetail/06_OrdinationForm.vue";
|
||||
import FormHajj from "@/modules/05_leave/components/formDetail/07_HajjForm.vue";
|
||||
import FormCheckSelect from "@/modules/05_leave/components/formDetail/08_MilitaryForm.vue";
|
||||
import FormStudy from "@/modules/05_leave/components/formDetail/09_StudyForm.vue";
|
||||
import FormLeaveToTraining from "@/modules/05_leave/components/formDetail/10_TrainForm.vue";
|
||||
import FormLeaveToWorkInternational from "@/modules/05_leave/components/formDetail/11_WorkInternationalForm.vue";
|
||||
import FormSpouse from "@/modules/05_leave/components/formDetail/12_FollowSpouseForm.vue";
|
||||
import FormVocationalRehabilitation from "@/modules/05_leave/components/formDetail/13_RehabilitationForm.vue";
|
||||
import FormCancel from "@/modules/05_leave/components/formDetail/formCancel.vue";
|
||||
|
||||
/** import stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin"
|
||||
import { useLeaveStore } from "@/modules/05_leave/store"
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
const dataStore = useLeaveStore()
|
||||
const { convertStatud } = dataStore
|
||||
const mixin = useCounterMixin()
|
||||
const { showLoader, hideLoader, messageError, date2Thai, success, dialogConfirm, calculateDurationYmd } = mixin
|
||||
|
||||
const $q = useQuasar()
|
||||
/**ตัวแปร */
|
||||
const dataStore = useLeaveStore();
|
||||
const { convertStatud } = dataStore;
|
||||
const titleMain = ref<string>("รายละเอียดการลาของ");
|
||||
const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ");
|
||||
const titleName = ref<string>("");
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
date2Thai,
|
||||
success,
|
||||
dialogConfirm,
|
||||
calculateDurationYmd,
|
||||
} = mixin;
|
||||
const $q = useQuasar();
|
||||
|
||||
/**Prop */
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
|
|
@ -57,13 +74,10 @@ const props = defineProps({
|
|||
type: Function,
|
||||
require: true,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const titleMain = ref<string>("รายละเอียดการลาของ")
|
||||
const titleMainCancle = ref<string>("รายละเอียดการยกเลิกการลาของ")
|
||||
const titleName = ref<string>("")
|
||||
/**checkForm Form การลา*/
|
||||
const checkForm = ref<string>("")
|
||||
const checkForm = ref<string>("");
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formData = reactive<FremDetail>({
|
||||
|
|
@ -125,8 +139,9 @@ const formData = reactive<FremDetail>({
|
|||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
approveStep: "",
|
||||
dear: "",
|
||||
leaveRange: ""
|
||||
})
|
||||
leaveRange: "",
|
||||
});
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formDataCancle = reactive<FromCancelDetail>({
|
||||
id: "",
|
||||
|
|
@ -142,103 +157,131 @@ const formDataCancle = reactive<FromCancelDetail>({
|
|||
leaveTotal: 0,
|
||||
leaveStartDate: new Date(),
|
||||
leaveEndDate: new Date(),
|
||||
})
|
||||
});
|
||||
|
||||
/** form ขอยกเลิก*/
|
||||
const formDelete = reactive<FormDelete>({
|
||||
writeAt: "",
|
||||
reason: "",
|
||||
doc: null,
|
||||
})
|
||||
});
|
||||
|
||||
/**Validate ข้อมูล */
|
||||
const writeAtRef = ref<Object | null>(null)
|
||||
const reasonRef = ref<Object | null>(null)
|
||||
const docRef = ref<Object | null>(null)
|
||||
const writeAtRef = ref<Object | null>(null);
|
||||
const reasonRef = ref<Object | null>(null);
|
||||
const docRef = ref<Object | null>(null);
|
||||
const formDeleteRef: FormDeleteRef = {
|
||||
writeAt: writeAtRef,
|
||||
reason: reasonRef,
|
||||
doc: docRef,
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลการลา
|
||||
* @param id การลา
|
||||
*/
|
||||
async function fetchDataDetail(id: string) {
|
||||
showLoader()
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveUserId(id), {})
|
||||
.then(res => {
|
||||
const data = res.data.result
|
||||
titleName.value = data.fullName ?? "-"
|
||||
formData.id = data.id ?? "-"
|
||||
formData.leaveTypeName = data.leaveTypeName ?? "-"
|
||||
formData.leaveTypeId = data.leaveTypeId ?? "-"
|
||||
formData.fullname = data.fullName ?? "-"
|
||||
formData.dateSendLeave = data.dateSendLeave && date2Thai(data.dateSendLeave)
|
||||
formData.status = data.status ?? "-"
|
||||
formData.leaveDateStart = data.leaveStartDate && date2Thai(data.leaveStartDate)
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate)
|
||||
formData.leaveCount = calculateDurationYmd(data.leaveStartDate, data.leaveEndDate)
|
||||
formData.leaveWrote = data.leaveWrote ?? "-"
|
||||
formData.leaveAddress = data.leaveAddress ?? "-"
|
||||
formData.leaveNumber = data.leaveNumber ?? "-"
|
||||
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)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
titleName.value = data.fullName ?? "-";
|
||||
formData.id = data.id ?? "-";
|
||||
formData.leaveTypeName = data.leaveTypeName ?? "-";
|
||||
formData.leaveTypeId = data.leaveTypeId ?? "-";
|
||||
formData.fullname = data.fullName ?? "-";
|
||||
formData.dateSendLeave =
|
||||
data.dateSendLeave && date2Thai(data.dateSendLeave);
|
||||
formData.status = data.status ?? "-";
|
||||
formData.leaveDateStart =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = calculateDurationYmd(
|
||||
data.leaveStartDate,
|
||||
data.leaveEndDate
|
||||
);
|
||||
formData.leaveWrote = data.leaveWrote ?? "-";
|
||||
formData.leaveAddress = data.leaveAddress ?? "-";
|
||||
formData.leaveNumber = data.leaveNumber ?? "-";
|
||||
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 = data.leaveTotal
|
||||
formData.leavebirthDate = data.leaveBirthDate && date2Thai(data.leaveBirthDate)
|
||||
formData.leavegovernmentDate = data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate)
|
||||
formData.leaveSalary = data.leaveSalary ? data.leaveSalary.toLocaleString("th-TH") : "-"
|
||||
formData.leaveSalaryText = data.leaveSalaryText ?? "-"
|
||||
formData.wifeDayName = data.wifeDayName ?? "-"
|
||||
formData.wifeDayDateBorn = data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn)
|
||||
formData.restDayOldTotal = data.restDayOldTotal ?? "-"
|
||||
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-"
|
||||
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช"
|
||||
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-"
|
||||
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-"
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-"
|
||||
formData.ordainDayOrdination = data.ordainDayOrdination && date2Thai(data.ordainDayOrdination)
|
||||
formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName ?? "-"
|
||||
formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress ?? "-"
|
||||
formData.hajjDayStatus = data.hajjDayStatus ? "เคย" : "ไม่เคยไปประกอบพิธีฮัจญ์"
|
||||
formData.absentDaySummon = data.absentDaySummon ?? "-"
|
||||
formData.absentDayLocation = data.absentDayLocation ?? "-"
|
||||
formData.absentDayRegistorDate = data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate)
|
||||
formData.absentDayGetIn = data.absentDayGetIn ?? "-"
|
||||
formData.absentDayAt = data.absentDayAt ?? "-"
|
||||
formData.studyDaySubject = data.studyDaySubject ?? "-"
|
||||
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-"
|
||||
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-"
|
||||
formData.studyDayTrainingSubject = data.studyDayTrainingSubject ?? "-" ?? "-"
|
||||
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-"
|
||||
formData.studyDayCountry = data.studyDayCountry ?? "-"
|
||||
formData.studyDayScholarship = data.studyDayScholarship ?? "-"
|
||||
formData.coupleDayName = data.coupleDayName ?? "-"
|
||||
formData.coupleDayPosition = data.coupleDayPosition ?? "-"
|
||||
formData.coupleDayLevel = data.coupleDayLevel ?? "-"
|
||||
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-"
|
||||
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-"
|
||||
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-"
|
||||
formData.coupleDayStartDateHistory = data.coupleDayStartDateHistory && date2Thai(data.coupleDayStartDateHistory)
|
||||
formData.coupleDayEndDateHistory = data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory)
|
||||
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-"
|
||||
formData.approveStep = data.approveStep ?? "-"
|
||||
formData.dear = data.dear ?? "-"
|
||||
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName, formData.ordainDayLocationName, formData.studyDayTrainingSubject)
|
||||
formData.leaveTotal = data.leaveTotal;
|
||||
formData.leavebirthDate =
|
||||
data.leaveBirthDate && date2Thai(data.leaveBirthDate);
|
||||
formData.leavegovernmentDate =
|
||||
data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
|
||||
formData.leaveSalary = data.leaveSalary
|
||||
? data.leaveSalary.toLocaleString("th-TH")
|
||||
: "-";
|
||||
formData.leaveSalaryText = data.leaveSalaryText ?? "-";
|
||||
formData.wifeDayName = data.wifeDayName ?? "-";
|
||||
formData.wifeDayDateBorn =
|
||||
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
|
||||
formData.restDayOldTotal = data.restDayOldTotal ?? "-";
|
||||
formData.restDayCurrentTotal = data.restDayCurrentTotal ?? "-";
|
||||
formData.ordainDayStatus = data.ordainDayStatus ? "เคย" : "ไม่เคยบวช";
|
||||
formData.ordainDayLocationName = data.ordainDayLocationName ?? "-";
|
||||
formData.ordainDayLocationAddress = data.ordainDayLocationAddress ?? "-";
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber ?? "-";
|
||||
formData.ordainDayOrdination =
|
||||
data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
|
||||
formData.ordainDayBuddhistLentName =
|
||||
data.ordainDayBuddhistLentName ?? "-";
|
||||
formData.ordainDayBuddhistLentAddress =
|
||||
data.ordainDayBuddhistLentAddress ?? "-";
|
||||
formData.hajjDayStatus = data.hajjDayStatus
|
||||
? "เคย"
|
||||
: "ไม่เคยไปประกอบพิธีฮัจญ์";
|
||||
formData.absentDaySummon = data.absentDaySummon ?? "-";
|
||||
formData.absentDayLocation = data.absentDayLocation ?? "-";
|
||||
formData.absentDayRegistorDate =
|
||||
data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
|
||||
formData.absentDayGetIn = data.absentDayGetIn ?? "-";
|
||||
formData.absentDayAt = data.absentDayAt ?? "-";
|
||||
formData.studyDaySubject = data.studyDaySubject ?? "-";
|
||||
formData.studyDayDegreeLevel = data.studyDayDegreeLevel ?? "-";
|
||||
formData.studyDayUniversityName = data.studyDayUniversityName ?? "-";
|
||||
formData.studyDayTrainingSubject =
|
||||
data.studyDayTrainingSubject ?? "-" ?? "-";
|
||||
formData.studyDayTrainingName = data.studyDayTrainingName ?? "-";
|
||||
formData.studyDayCountry = data.studyDayCountry ?? "-";
|
||||
formData.studyDayScholarship = data.studyDayScholarship ?? "-";
|
||||
formData.coupleDayName = data.coupleDayName ?? "-";
|
||||
formData.coupleDayPosition = data.coupleDayPosition ?? "-";
|
||||
formData.coupleDayLevel = data.coupleDayLevel ?? "-";
|
||||
formData.coupleDayLevelCountry = data.coupleDayLevelCountry ?? "-";
|
||||
formData.coupleDayCountryHistory = data.coupleDayCountryHistory ?? "-";
|
||||
formData.coupleDayTotalHistory = data.coupleDayTotalHistory ?? "-";
|
||||
formData.coupleDayStartDateHistory =
|
||||
data.coupleDayStartDateHistory &&
|
||||
date2Thai(data.coupleDayStartDateHistory);
|
||||
formData.coupleDayEndDateHistory =
|
||||
data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
|
||||
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory ?? "-";
|
||||
formData.approveStep = data.approveStep ?? "-";
|
||||
formData.dear = data.dear ?? "-";
|
||||
checkLeaveType(
|
||||
formData.leaveTypeId,
|
||||
formData.leaveTypeName,
|
||||
formData.ordainDayLocationName,
|
||||
formData.studyDayTrainingSubject
|
||||
);
|
||||
})
|
||||
.catch(err => {
|
||||
props.onClickClose?.()
|
||||
messageError($q, err)
|
||||
.catch((err) => {
|
||||
props.onClickClose?.();
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -246,38 +289,43 @@ async function fetchDataDetail(id: string) {
|
|||
* @param leaveTypeId ประเภทการลา
|
||||
* @param leaveTypeName ประเภทการลา
|
||||
*/
|
||||
function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLocationName: string, studyDayTrainingSubject: string) {
|
||||
console.log(leaveTypeName)
|
||||
console.log(leaveTypeId)
|
||||
console.log(ordainDayLocationName)
|
||||
function checkLeaveType(
|
||||
leaveTypeId: string,
|
||||
leaveTypeName: string,
|
||||
ordainDayLocationName: string,
|
||||
studyDayTrainingSubject: string
|
||||
) {
|
||||
console.log(leaveTypeName);
|
||||
console.log(leaveTypeId);
|
||||
console.log(ordainDayLocationName);
|
||||
|
||||
if (props.leaveType) {
|
||||
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId)
|
||||
const type = filtertype.code
|
||||
console.log(type)
|
||||
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
|
||||
const type = filtertype.code;
|
||||
console.log(type);
|
||||
|
||||
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
|
||||
checkForm.value = "FormLeave"
|
||||
checkForm.value = "FormLeave";
|
||||
} else if (type === "LV-004") {
|
||||
checkForm.value = "FormChildbirth"
|
||||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "LV-005") {
|
||||
checkForm.value = "FormHoliday"
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "LV-006" && ordainDayLocationName === "") {
|
||||
checkForm.value = "FormHajj"
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-006") {
|
||||
checkForm.value = "FormUpasom"
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect"
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "LV-008" && studyDayTrainingSubject === "") {
|
||||
checkForm.value = "FormStudy"
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "LV-008") {
|
||||
checkForm.value = "FormLeaveToTraining"
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "LV-009") {
|
||||
checkForm.value = "FormLeaveToWorkInternational"
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
} else if (type === "LV-010") {
|
||||
checkForm.value = "FormSpouse"
|
||||
checkForm.value = "FormSpouse";
|
||||
} else if (type === "LV-011") {
|
||||
checkForm.value = "FormVocationalRehabilitation"
|
||||
checkForm.value = "FormVocationalRehabilitation";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -287,95 +335,100 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string, ordainDayLoc
|
|||
* @param id ยกเลิกการลา
|
||||
*/
|
||||
async function fetchDataCancelDetail(id: string) {
|
||||
showLoader()
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveCancelById(id))
|
||||
.then(res => {
|
||||
const data = res.data.result
|
||||
formDataCancle.leaveTypeName = data.leaveTypeName ?? "-"
|
||||
formDataCancle.leaveWrote = data.leaveWrote ?? "-"
|
||||
formDataCancle.fullname = data.fullName ?? "-"
|
||||
formDataCancle.status = convertStatud(data.status) ?? "-"
|
||||
formDataCancle.leaveStartDate = data.leaveStartDate && date2Thai(data.leaveStartDate)
|
||||
formDataCancle.leaveEndDate = data.leaveEndDate && date2Thai(data.leaveEndDate)
|
||||
formDataCancle.leaveTotal = data.leaveTotal ?? "-"
|
||||
formDataCancle.leaveAddress = data.leaveAddress ?? "-"
|
||||
formDataCancle.leaveNumber = data.leaveNumber ?? "-"
|
||||
formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-"
|
||||
formDataCancle.leaveDetail = data.leaveDetail ?? "-"
|
||||
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formDataCancle.leaveTypeName = data.leaveTypeName ?? "-";
|
||||
formDataCancle.leaveWrote = data.leaveWrote ?? "-";
|
||||
formDataCancle.fullname = data.fullName ?? "-";
|
||||
formDataCancle.status = convertStatud(data.status) ?? "-";
|
||||
formDataCancle.leaveStartDate =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formDataCancle.leaveEndDate =
|
||||
data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formDataCancle.leaveTotal = data.leaveTotal ?? "-";
|
||||
formDataCancle.leaveAddress = data.leaveAddress ?? "-";
|
||||
formDataCancle.leaveNumber = data.leaveNumber ?? "-";
|
||||
formDataCancle.leaveResonDelete = data.leaveReasonDelete ?? "-";
|
||||
formDataCancle.leaveDetail = data.leaveDetail ?? "-";
|
||||
formDataCancle.leaveDocDelete = data.leaveDocDelete ?? null;
|
||||
|
||||
console.log(res)
|
||||
console.log(res);
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader()
|
||||
})
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/** function ยินยันการบันทึกข้อมูล*/
|
||||
async function onClickSave() {
|
||||
const hasError = []
|
||||
const hasError = [];
|
||||
for (const key in formDeleteRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formDeleteRef, key)) {
|
||||
const property = formDeleteRef[key]
|
||||
const property = formDeleteRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate()
|
||||
hasError.push(isValid)
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every(result => result === true)) {
|
||||
if (hasError.every((result) => result === true)) {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
() => {
|
||||
onSubmit()
|
||||
onSubmit();
|
||||
},
|
||||
"ยืนยันการบันทึกข้อมูล",
|
||||
"ต้องการยินยันการบันทึกข้อมูลนี้หรือไม่ ?"
|
||||
)
|
||||
);
|
||||
} else {
|
||||
console.log(hasError)
|
||||
console.log(hasError);
|
||||
}
|
||||
}
|
||||
|
||||
/** function บันทึกข้อมูล*/
|
||||
async function onSubmit() {
|
||||
showLoader()
|
||||
const id = props.leaveId ? props.leaveId : ""
|
||||
const formData = new FormData()
|
||||
formData.append("leaveWrote", formDelete.writeAt)
|
||||
formData.append("reason", formDelete.reason)
|
||||
formData.append("doc", formDelete.doc)
|
||||
showLoader();
|
||||
const id = props.leaveId ? props.leaveId : "";
|
||||
const formData = new FormData();
|
||||
formData.append("leaveWrote", formDelete.writeAt);
|
||||
formData.append("reason", formDelete.reason);
|
||||
formData.append("doc", formDelete.doc);
|
||||
await http
|
||||
.post(config.API.leaveCancelById(id), formData)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ")
|
||||
props.onClickClose?.()
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
props.onClickClose?.();
|
||||
})
|
||||
.catch(err => {
|
||||
messageError($q, err)
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
props.fetchDataTable?.()
|
||||
hideLoader()
|
||||
})
|
||||
props.fetchDataTable?.();
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาแล้วเปิด modal */
|
||||
watch(
|
||||
() => props.modal,
|
||||
() => {
|
||||
if (props.modal === true) {
|
||||
formDelete.writeAt = ""
|
||||
formDelete.reason = ""
|
||||
formDelete.doc = null
|
||||
formDelete.writeAt = "";
|
||||
formDelete.reason = "";
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
@ -384,20 +437,38 @@ watch(
|
|||
<q-card-section class="row items-center q-pa-sm">
|
||||
<div class="text-bold q-pl-sm">{{ titleMain }}{{ titleName }}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" unelevated round dense @click="props.onClickClose" style="color: #ff8080; background-color: #ffdede" />
|
||||
<q-btn
|
||||
icon="close"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
@click="props.onClickClose"
|
||||
style="color: #ff8080; background-color: #ffdede"
|
||||
/>
|
||||
</q-card-section>
|
||||
<q-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
<div flat :class="props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'">
|
||||
<div
|
||||
flat
|
||||
:class="
|
||||
props.leaveStatus === 'CANCEL' ? 'col-xs-6 col-sm-6' : 'col-12'
|
||||
"
|
||||
>
|
||||
<div class="col-12 q-col-gutter-sm row items-center"></div>
|
||||
<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
|
||||
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
|
||||
|
||||
<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
|
||||
<FormChildbirth v-else-if="checkForm === 'FormChildbirth'" :data="formData" />
|
||||
<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" />
|
||||
|
|
@ -406,28 +477,70 @@ watch(
|
|||
<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" />
|
||||
|
||||
<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
|
||||
<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" />
|
||||
|
||||
<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
|
||||
<FormVocationalRehabilitation v-else-if="checkForm === 'FormVocationalRehabilitation'" :data="formData" />
|
||||
<FormVocationalRehabilitation
|
||||
v-else-if="checkForm === 'FormVocationalRehabilitation'"
|
||||
:data="formData"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div flat class="col-xs-6 col-sm-6" v-if="props.leaveStatus === 'CANCEL'">
|
||||
<q-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>
|
||||
<div
|
||||
flat
|
||||
class="col-xs-6 col-sm-6"
|
||||
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>
|
||||
<q-icon name="attach_file" />
|
||||
</template>
|
||||
|
|
@ -435,17 +548,36 @@ watch(
|
|||
</div>
|
||||
</q-card-section>
|
||||
<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-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>
|
||||
|
||||
<q-card q-card style="min-width: 70%" v-if="props.leaveStatus === 'DELETE'">
|
||||
<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-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-separator />
|
||||
<q-card-section class="q-p-md row q-gutter-y-md">
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -13,38 +13,38 @@ const dataStore = useLeaveStore();
|
|||
const mixin = useCounterMixin();
|
||||
const router = useRouter();
|
||||
const $q = useQuasar();
|
||||
const { date2Thai, dateToISO, dialogConfirm, success, messageError, fails } =
|
||||
mixin;
|
||||
const { date2Thai, dateToISO, dialogRemove, success, messageError, fails } =
|
||||
mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataBirth = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveTotal: "",
|
||||
leaveLast: "",
|
||||
leaveNumber: "",
|
||||
leaveAddress: "",
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
});
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
|
|
@ -59,61 +59,61 @@ const leaveDocumentRef = ref<object | null>(null);
|
|||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveTotal: leaveTotalRef,
|
||||
leaveNumber: leaveNumberRef,
|
||||
leaveAddress: leaveAddressRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
};
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
async function fileUploadDoc(files: any) {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
}
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
if (formDataBirth.leaveDocument.length > 0) {
|
||||
formDataBirth.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
}
|
||||
// formData.append("leaveDocument", formDataBirth.leaveDocument);
|
||||
formData.append("type", formDataBirth.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(new Date(formDataBirth.leaveStartDate))
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(new Date(formDataBirth.leaveEndDate))
|
||||
);
|
||||
formData.append("leaveWrote", formDataBirth.leaveWrote);
|
||||
formData.append("leaveAddress", formDataBirth.leaveAddress);
|
||||
formData.append("leaveNumber", formDataBirth.leaveNumber);
|
||||
formData.append("leaveDetail", formDataBirth.leaveDetail);
|
||||
const hasError = [];
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
if (formDataBirth.leaveDocument.length > 0) {
|
||||
formDataBirth.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
}
|
||||
// formData.append("leaveDocument", formDataBirth.leaveDocument);
|
||||
formData.append("type", formDataBirth.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(new Date(formDataBirth.leaveStartDate))
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(new Date(formDataBirth.leaveEndDate))
|
||||
);
|
||||
formData.append("leaveWrote", formDataBirth.leaveWrote);
|
||||
formData.append("leaveAddress", formDataBirth.leaveAddress);
|
||||
formData.append("leaveNumber", formDataBirth.leaveNumber);
|
||||
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);
|
||||
async function fetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataBirth.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataBirth.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataBirth.leaveTotal = data.totalDate;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataBirth.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataBirth.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataBirth.leaveTotal = data.totalDate;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
|
||||
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 statusCheck = ref<any>("");
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, () => {
|
||||
if (props.data) {
|
||||
formDataBirth.leaveWrote = props.data.leaveWrote;
|
||||
formDataBirth.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveNumber = props.data.leaveNumber;
|
||||
formDataBirth.leaveAddress = props.data.leaveAddress;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataBirth.leaveDocument = [];
|
||||
}
|
||||
if (props.data) {
|
||||
formDataBirth.leaveWrote = props.data.leaveWrote;
|
||||
formDataBirth.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveNumber = props.data.leaveNumber;
|
||||
formDataBirth.leaveAddress = props.data.leaveAddress;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataBirth.leaveDocument = [];
|
||||
}
|
||||
});
|
||||
|
||||
/** Hook */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataBirth.leaveWrote = props.data.leaveWrote;
|
||||
formDataBirth.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveNumber = props.data.leaveNumber;
|
||||
formDataBirth.leaveAddress = props.data.leaveAddress;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
if (props.data) {
|
||||
formDataBirth.leaveWrote = props.data.leaveWrote;
|
||||
formDataBirth.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataBirth.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataBirth.leaveTotal = props.data.leaveTotal;
|
||||
formDataBirth.leaveNumber = props.data.leaveNumber;
|
||||
formDataBirth.leaveAddress = props.data.leaveAddress;
|
||||
formDataBirth.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ฟอร์มลาคลอดบุตร-->
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataBirth.leaveWrote"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveStartDate != null
|
||||
? date2Thai(formDataBirth.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveStartDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataBirth.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataBirth.leaveStartDate != null
|
||||
? date2Thai(formDataBirth.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
:min-date="formDataBirth.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
:model-value="
|
||||
formDataBirth.leaveEndDate != null
|
||||
? date2Thai(formDataBirth.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataBirth.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
<datepicker
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataBirth.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
@update:model-value="fetchCheck()"
|
||||
borderless
|
||||
hide-bottom-space
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
:min-date="formDataBirth.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
hide-bottom-space
|
||||
:readonly="!formDataBirth.leaveStartDate"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
:model-value="
|
||||
formDataBirth.leaveEndDate != null
|
||||
? date2Thai(formDataBirth.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataBirth.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveLastRef"
|
||||
for="leaveLastRef"
|
||||
v-model="dataStore.leaveLast"
|
||||
label="ลาครั้งสุดท้ายเมื่อวันที่"
|
||||
readonly
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
/>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-input
|
||||
class="col-12 col-md-3 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveNumberRef"
|
||||
for="leaveNumberRef"
|
||||
v-model="formDataBirth.leaveNumber"
|
||||
mask="(###)-###-####"
|
||||
unmasked-value
|
||||
label="หมายเลขโทรศัพท์ที่ติดต่อได้"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อได้'}`,
|
||||
]"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataBirth.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
multiple
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list
|
||||
separator
|
||||
v-if="leaveDocumentList && leaveDocumentList.length > 0"
|
||||
>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-input
|
||||
class="col-12 col-md-9 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
ref="leaveAddressRef"
|
||||
for="leaveAddressRef"
|
||||
v-model="formDataBirth.leaveAddress"
|
||||
label="ที่อยู่ที่ติดต่อได้ระหว่างลา"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณากรอกที่อยู่ที่ติดต่อได้ระหว่างลา'}`,
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataBirth.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
for="leaveDocumentRef"
|
||||
hide-bottom-space
|
||||
v-model="formDataBirth.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
multiple
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list
|
||||
separator
|
||||
v-if="leaveDocumentList && leaveDocumentList.length > 0"
|
||||
>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
class="q-mr-md"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
@click="clickDelete"
|
||||
target="_blank"
|
||||
outline
|
||||
color="red"
|
||||
label="ลบไฟล์"
|
||||
size="12px"
|
||||
>
|
||||
<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">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -14,13 +14,13 @@ const dataStore = useLeaveStore();
|
|||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
calculateDurationYmd,
|
||||
fails,
|
||||
messageError,
|
||||
success,
|
||||
dateToISO,
|
||||
date2Thai,
|
||||
dialogRemove,
|
||||
calculateDurationYmd,
|
||||
fails,
|
||||
messageError,
|
||||
success,
|
||||
dateToISO,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const files = ref<any>(null);
|
||||
|
|
@ -34,85 +34,85 @@ const leaveDocumentRef = ref<object | null>(null);
|
|||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataHaji = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: 0,
|
||||
hajjDayStatus: "true",
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leavegovernmentDate: null,
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
totalLeave: 0,
|
||||
hajjDayStatus: "true",
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: HajiForm = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
leavegovernmentDate: leavegovernmentDateRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
};
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
const nameFile = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
if (formDataHaji.leaveDocument) {
|
||||
formDataHaji.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
}
|
||||
// formData.append("leaveDocument", formDataHaji.leaveDocument);
|
||||
formData.append("type", formDataHaji.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(new Date(formDataHaji.leaveStartDate))
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(new Date(formDataHaji.leaveEndDate))
|
||||
);
|
||||
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
|
||||
formData.append("leaveWrote", formDataHaji.leaveWrote);
|
||||
formData.append("leaveDetail", formDataHaji.leaveDetail);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
const hasError = [];
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
if (formDataHaji.leaveDocument) {
|
||||
formDataHaji.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
}
|
||||
// formData.append("leaveDocument", formDataHaji.leaveDocument);
|
||||
formData.append("type", formDataHaji.type);
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(new Date(formDataHaji.leaveStartDate))
|
||||
);
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(new Date(formDataHaji.leaveEndDate))
|
||||
);
|
||||
formData.append("hajjDayStatus", formDataHaji.hajjDayStatus);
|
||||
formData.append("leaveWrote", formDataHaji.leaveWrote);
|
||||
formData.append("leaveDetail", formDataHaji.leaveDetail);
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -121,375 +121,408 @@ function onValidate() {
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
async function fetchCheck() {
|
||||
console.log("check");
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataHaji.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataHaji.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataHaji.leaveTotal = data.totalDate;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
console.log("check");
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataHaji.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataHaji.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataHaji.leaveTotal = data.totalDate;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function อัพเดทค่า LeaveTotal
|
||||
*/
|
||||
function updateLeaveTotal() {
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHaji.leaveStartDate,
|
||||
formDataHaji.leaveEndDate
|
||||
);
|
||||
formDataHaji.leaveTotal = newLeaveTotal;
|
||||
const newLeaveTotal = calculateDurationYmd(
|
||||
formDataHaji.leaveStartDate,
|
||||
formDataHaji.leaveEndDate
|
||||
);
|
||||
formDataHaji.leaveTotal = newLeaveTotal;
|
||||
}
|
||||
|
||||
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
|
||||
const dateEndInputStyle = computed(() => {
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
});
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
const leaveDocumentList = ref<any>();
|
||||
const statusCheck = ref<any>("");
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, () => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataHaji.leaveDocument = [];
|
||||
}
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataHaji.leaveDocument = [];
|
||||
}
|
||||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
// formDataHaji.leaveDocument = props.data.leaveDocument;
|
||||
}
|
||||
if (props.data) {
|
||||
formDataHaji.leaveWrote = props.data.leaveWrote;
|
||||
formDataHaji.leaveTotal = props.data.leaveTotal;
|
||||
formDataHaji.leaveStartDate = props.data.leaveStartDate;
|
||||
formDataHaji.leaveEndDate = props.data.leaveEndDate;
|
||||
formDataHaji.totalLeave = props.data.totalLeave;
|
||||
formDataHaji.hajjDayStatus = props.data.hajjDayStatus;
|
||||
formDataHaji.leaveDetail = props.data.leaveDetail;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
// 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>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate" class="full-width">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveWrote"
|
||||
ref="leaveWroteRef"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
:model-value="
|
||||
formDataHaji.leaveStartDate != null
|
||||
? date2Thai(formDataHaji.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<div class="full-width">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataHaji.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
bg-color="white"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
hide-bottom-space
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
:model-value="
|
||||
formDataHaji.leaveStartDate != null
|
||||
? date2Thai(formDataHaji.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
|
||||
:min-date="formDataHaji.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
:readonly="
|
||||
!formDataHaji.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:model-value="
|
||||
formDataHaji.leaveEndDate != null
|
||||
? date2Thai(formDataHaji.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
v-model="formDataHaji.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
@update:model-value="updateLeaveTotal(), fetchCheck()"
|
||||
:readonly="!formDataHaji.leaveStartDate || statusCheck === 'NEW'"
|
||||
:min-date="formDataHaji.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
:readonly="
|
||||
!formDataHaji.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
hide-bottom-space
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:model-value="
|
||||
formDataHaji.leaveEndDate != null
|
||||
? date2Thai(formDataHaji.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
@update:model-value="fetchCheck()"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
<q-input
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-2 col-sm-6"
|
||||
dense
|
||||
outlined
|
||||
ref="leaveTotalRef"
|
||||
for="leaveTotalRef"
|
||||
v-model="formDataHaji.leaveTotal"
|
||||
label="จำนวนวันที่ลา"
|
||||
readonly
|
||||
>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
bg-color="white"
|
||||
class="full-width"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
dataStore.dateAppoint != null
|
||||
? date2Thai(dataStore.dateAppoint)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<datepicker
|
||||
class="col-12 col-md-4 col-sm-6"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
readonly
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
:enableTimePicker="false"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leavegovernmentDateRef"
|
||||
bg-color="white"
|
||||
class="full-width"
|
||||
outlined
|
||||
dense
|
||||
readonly
|
||||
hide-bottom-space
|
||||
:label="`${'วันที่เข้ารับราชการ'}`"
|
||||
:model-value="
|
||||
dataStore.dateAppoint != null
|
||||
? date2Thai(dataStore.dateAppoint)
|
||||
: null
|
||||
"
|
||||
:rules="[
|
||||
(val) => !!val || `${'กรุณาเลือกวันที่เข้ารับราชการ'}`,
|
||||
]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
เคยไปประกอบพิธีฮัจญ์หรือไม่
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="formDataHaji.hajjDayStatus"
|
||||
:disable="statusCheck === 'NEW'"
|
||||
:val="true"
|
||||
checked-icon="task_alt"
|
||||
label="เคย"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataHaji.hajjDayStatus"
|
||||
:disable="statusCheck === 'NEW'"
|
||||
:val="false"
|
||||
checked-icon="task_alt"
|
||||
label="ไม่เคยไปประกอบพิธีฮัจญ์"
|
||||
/>
|
||||
</div>
|
||||
<div class="q-pl-sm text-weight-bold text-dark col-12">
|
||||
เคยไปประกอบพิธีฮัจญ์หรือไม่
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<q-radio
|
||||
v-model="formDataHaji.hajjDayStatus"
|
||||
:disable="statusCheck === 'NEW'"
|
||||
:val="true"
|
||||
checked-icon="task_alt"
|
||||
label="เคย"
|
||||
/>
|
||||
<q-radio
|
||||
v-model="formDataHaji.hajjDayStatus"
|
||||
:disable="statusCheck === 'NEW'"
|
||||
:val="false"
|
||||
checked-icon="task_alt"
|
||||
label="ไม่เคยไปประกอบพิธีฮัจญ์"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveDetail"
|
||||
class="col-12 q-mt-sm cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
v-model="formDataHaji.leaveDocument"
|
||||
multiple
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
use-chips
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-12 q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list
|
||||
separator
|
||||
v-if="leaveDocumentList && leaveDocumentList.length > 0"
|
||||
>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
<q-input
|
||||
v-model="formDataHaji.leaveDetail"
|
||||
class="col-12 q-mt-sm cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<!-- multiple -->
|
||||
<q-file
|
||||
v-model="formDataHaji.leaveDocument"
|
||||
multiple
|
||||
bg-color="white"
|
||||
label="เอกสารประกอบ"
|
||||
use-chips
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
outlined
|
||||
hide-bottom-space
|
||||
class="col-12 q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list
|
||||
separator
|
||||
v-if="leaveDocumentList && leaveDocumentList.length > 0"
|
||||
>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
class="q-mr-md"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
@click="clickDelete"
|
||||
target="_blank"
|
||||
outline
|
||||
color="red"
|
||||
label="ลบไฟล์"
|
||||
size="12px"
|
||||
>
|
||||
<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" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -14,14 +14,14 @@ const dataStore = useLeaveStore();
|
|||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
fails,
|
||||
dateToISO,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
dialogRemove,
|
||||
fails,
|
||||
dateToISO,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const edit = ref<boolean>(true);
|
||||
const router = useRouter();
|
||||
|
|
@ -29,29 +29,29 @@ const isSave = ref<boolean>(false);
|
|||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataWorkInternational = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
leaveDraftDocument: null,
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDetail: "",
|
||||
leaveDocument: [],
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
|
||||
/** ตัวแปร ref สำหรับแสดง validate */
|
||||
|
|
@ -63,11 +63,11 @@ const leaveDocumentRef = ref<object | null>(null);
|
|||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const FormRef: FormRef = {
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveDetail: leaveDetailRef,
|
||||
leaveDocument: leaveDocumentRef,
|
||||
};
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
|
|
@ -75,266 +75,288 @@ const nameFile = ref<string>("");
|
|||
const nameFileDraft = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
|
||||
async function onValidate() {
|
||||
const hasError = [];
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
// ถ้า Validate ผ่านให้บันทึกข้อมูล
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
const hasError = [];
|
||||
for (const key in FormRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(FormRef, key)) {
|
||||
const property = FormRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
// ถ้า Validate ผ่านให้บันทึกข้อมูล
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
|
||||
if (formDataWorkInternational.leaveDocument.length > 0) {
|
||||
formDataWorkInternational.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
if (formDataWorkInternational.leaveDocument.length > 0) {
|
||||
formDataWorkInternational.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
|
||||
// formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
|
||||
}
|
||||
// formData.append("leaveDocument", formDataWorkInternational.leaveDocument)
|
||||
}
|
||||
|
||||
if (formDataWorkInternational.leaveDraftDocument) {
|
||||
formData.append(
|
||||
"leaveDraftDocument",
|
||||
formDataWorkInternational.leaveDraftDocument
|
||||
);
|
||||
}
|
||||
formData.append("type", formDataWorkInternational.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(formDataWorkInternational.leaveStartDate)
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(formDataWorkInternational.leaveEndDate)
|
||||
); //
|
||||
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
|
||||
await props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
if (formDataWorkInternational.leaveDraftDocument) {
|
||||
formData.append(
|
||||
"leaveDraftDocument",
|
||||
formDataWorkInternational.leaveDraftDocument
|
||||
);
|
||||
}
|
||||
formData.append("type", formDataWorkInternational.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(formDataWorkInternational.leaveStartDate)
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(formDataWorkInternational.leaveEndDate)
|
||||
); //
|
||||
formData.append("leaveWrote", formDataWorkInternational.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataWorkInternational.leaveDetail); //
|
||||
await props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
//download function
|
||||
async function onClickDownloadFile(id: string, fileName: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
//เเจ้งเตือนลบข้อมูล
|
||||
const 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
|
||||
* @param formData
|
||||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
async function fetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataWorkInternational.leaveTotal = data.totalDate;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataWorkInternational.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataWorkInternational.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
formDataWorkInternational.leaveTotal = data.totalDate;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/** แจ้งเมื่อวันลาไม่ถูกต้อง */
|
||||
const dateEndInputStyle = computed(() => {
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
});
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
const leaveDocumentList = ref<any>();
|
||||
const leaveDraftDocument = ref<string>();
|
||||
const statusCheck = ref<any>("");
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props, () => {
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataWorkInternational.leaveDraftDocument = null;
|
||||
formDataWorkInternational.leaveDocument = [];
|
||||
}
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
formDataWorkInternational.leaveDraftDocument = null;
|
||||
formDataWorkInternational.leaveDocument = [];
|
||||
}
|
||||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
if (props.data) {
|
||||
formDataWorkInternational.leaveWrote = props.data.leaveWrote;
|
||||
formDataWorkInternational.leaveStartDate = new Date(
|
||||
props.data.leaveStartDate
|
||||
);
|
||||
formDataWorkInternational.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataWorkInternational.leaveDetail = props.data.leaveDetail;
|
||||
// formDataWorkInternational.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent.stop="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
for="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
v-model="formDataWorkInternational.leaveWrote"
|
||||
label="เขียนที่"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveStartDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveStartDate"
|
||||
:locale="'th'"
|
||||
hide-bottom-space
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataWorkInternational.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveStartDateRef"
|
||||
for="leaveStartDateRef"
|
||||
hide-bottom-space
|
||||
bg-color="white"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveStartDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:min-date="formDataWorkInternational.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate ||
|
||||
statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveEndDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
class="col-12 col-md-6 col-sm-6 cursor-pointer"
|
||||
menu-class-name="modalfix"
|
||||
v-model="formDataWorkInternational.leaveEndDate"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
hide-bottom-space
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="fetchCheck()"
|
||||
week-start="0"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:min-date="formDataWorkInternational.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
ref="leaveEndDateRef"
|
||||
for="leaveEndDateRef"
|
||||
:readonly="
|
||||
!formDataWorkInternational.leaveStartDate ||
|
||||
statusCheck === 'NEW'
|
||||
"
|
||||
class="full-width datepicker"
|
||||
:model-value="
|
||||
formDataWorkInternational.leaveEndDate != null
|
||||
? date2Thai(formDataWorkInternational.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer" color="primary">
|
||||
</q-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <q-input
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<!-- <q-input
|
||||
class="col-md-3 col-sm-12"
|
||||
dense
|
||||
outlined
|
||||
|
|
@ -347,171 +369,182 @@ onMounted(() => {
|
|||
:rules="[val => !!val || `${'กรุณากรอกจำนวนวัน'}`]"
|
||||
/> -->
|
||||
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveDocument"
|
||||
multiple
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list
|
||||
v-if="leaveDocumentList && leaveDocumentList.length > 0"
|
||||
separator
|
||||
>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-input
|
||||
hide-bottom-space
|
||||
type="textarea"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
ref="leaveDetailRef"
|
||||
for="leaveDetailRef"
|
||||
v-model="formDataWorkInternational.leaveDetail"
|
||||
label="รายละเอียด"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
/>
|
||||
<div class="full-width" v-if="statusCheck != 'NEW'">
|
||||
<div class="q-col-gutter-sm row">
|
||||
<q-file
|
||||
ref="fileRef"
|
||||
bg-color="white"
|
||||
v-model="formDataWorkInternational.leaveDocument"
|
||||
multiple
|
||||
@added="fileUploadDoc"
|
||||
dense
|
||||
label="เอกสารประกอบ"
|
||||
outlined
|
||||
use-chips
|
||||
class="q-pl-sm col-12"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list
|
||||
v-if="leaveDocumentList && leaveDocumentList.length > 0"
|
||||
separator
|
||||
>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
class="q-mr-md"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
@click="clickDelete"
|
||||
target="_blank"
|
||||
outline
|
||||
color="red"
|
||||
label="ลบไฟล์"
|
||||
size="12px"
|
||||
>
|
||||
<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 style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
||||
</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="data && data.id" class="q-mt-md">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
||||
</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
ดาวน์โหลด
|
||||
</div> -->
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลดแบบฟอร์ม"
|
||||
@click="
|
||||
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลดแบบฟอร์ม"
|
||||
@click="
|
||||
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
อัปโหลด
|
||||
</div> -->
|
||||
<q-file
|
||||
v-model="formDataWorkInternational.leaveDraftDocument"
|
||||
use-chips
|
||||
dense
|
||||
label="อัปโหลดแบบฟอร์ม"
|
||||
outlined
|
||||
bg-color="white"
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<q-file
|
||||
v-model="formDataWorkInternational.leaveDraftDocument"
|
||||
use-chips
|
||||
dense
|
||||
label="อัปโหลดแบบฟอร์ม"
|
||||
outlined
|
||||
bg-color="white"
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
ดูไฟล์อัปโหลด
|
||||
</div> -->
|
||||
<q-btn
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
:href="leaveDraftDocument"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
:href="leaveDraftDocument"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="col-md-1 self-end q-mb-sm">
|
||||
<q-btn v-if="formDataWorkInternational.leaveDraftDocument != null" use-chips flat round color="primary" icon="mdi-arrow-up-bold" @click="fileUploadDoc"
|
||||
><q-tooltip>อัปโหลด</q-tooltip></q-btn
|
||||
>
|
||||
</div> -->
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -14,14 +14,14 @@ const dataStore = useLeaveStore();
|
|||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
date2Thai,
|
||||
dialogConfirm,
|
||||
fails,
|
||||
dateToISO,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
dialogRemove,
|
||||
fails,
|
||||
dateToISO,
|
||||
success,
|
||||
messageError,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
} = mixin;
|
||||
const router = useRouter();
|
||||
const edit = ref<boolean>(true);
|
||||
|
|
@ -35,80 +35,80 @@ const leaveWroteRef = ref<object | null>(null);
|
|||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
onSubmit: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
onConfirm: {
|
||||
type: Function,
|
||||
default: () => "",
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formDataRehabilitation = reactive<any>({
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveDraftDocument: null,
|
||||
type: dataStore.typeId,
|
||||
leaveWrote: "",
|
||||
leaveStartDate: null,
|
||||
leaveEndDate: null,
|
||||
leaveDocument: [],
|
||||
leaveDetail: "",
|
||||
leaveDraftDocument: null,
|
||||
});
|
||||
|
||||
/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
|
||||
const formRef: RehabilitationForm = {
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
leaveStartDate: leaveStartDateRef,
|
||||
leaveEndDate: leaveEndDateRef,
|
||||
leaveWrote: leaveWroteRef,
|
||||
};
|
||||
|
||||
/** ฟังก์ชั่นตรวจสอบความถูกต้องก่อน บันทึก */
|
||||
function onValidate() {
|
||||
const hasError = [];
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
const hasError = [];
|
||||
for (const key in formRef) {
|
||||
if (Object.prototype.hasOwnProperty.call(formRef, key)) {
|
||||
const property = formRef[key];
|
||||
if (property.value && typeof property.value.validate === "function") {
|
||||
const isValid = property.value.validate();
|
||||
hasError.push(isValid);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (hasError.every((result) => result === true)) {
|
||||
const formData = new FormData();
|
||||
|
||||
if (formDataRehabilitation.leaveDocument.length > 0) {
|
||||
formDataRehabilitation.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
|
||||
}
|
||||
if (formDataRehabilitation.leaveDocument.length > 0) {
|
||||
formDataRehabilitation.leaveDocument.forEach((file: File) => {
|
||||
formData.append("leaveDocument", file);
|
||||
});
|
||||
// formData.append("leaveDocument", formDataRehabilitation.leaveDocument)
|
||||
}
|
||||
|
||||
if (formDataRehabilitation.leaveDraftDocument) {
|
||||
formData.append(
|
||||
"leaveDraftDocument",
|
||||
formDataRehabilitation.leaveDraftDocument
|
||||
);
|
||||
}
|
||||
if (formDataRehabilitation.leaveDraftDocument) {
|
||||
formData.append(
|
||||
"leaveDraftDocument",
|
||||
formDataRehabilitation.leaveDraftDocument
|
||||
);
|
||||
}
|
||||
|
||||
formData.append("type", formDataRehabilitation.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(new Date(formDataRehabilitation.leaveStartDate))
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(new Date(formDataRehabilitation.leaveEndDate))
|
||||
);
|
||||
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
formData.append("type", formDataRehabilitation.type); //
|
||||
formData.append(
|
||||
"leaveStartDate",
|
||||
dateToISO(new Date(formDataRehabilitation.leaveStartDate))
|
||||
); //
|
||||
formData.append(
|
||||
"leaveEndDate",
|
||||
dateToISO(new Date(formDataRehabilitation.leaveEndDate))
|
||||
);
|
||||
formData.append("leaveWrote", formDataRehabilitation.leaveWrote); //
|
||||
formData.append("leaveDetail", formDataRehabilitation.leaveDetail); //
|
||||
props.onSubmit(formData, isLeave.value);
|
||||
}
|
||||
}
|
||||
|
||||
/** ส่วนของการประกาศและเลือกไฟล์เอกสารประกอบ */
|
||||
|
|
@ -116,9 +116,9 @@ const nameFile = ref<string>("");
|
|||
const nameFileDraft = ref<string>("");
|
||||
const fileDocDataUpload = ref<File[]>([]);
|
||||
const fileUploadDoc = async (files: any) => {
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
files.forEach((file: any) => {
|
||||
fileDocDataUpload.value.push(file);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -127,354 +127,387 @@ const fileUploadDoc = async (files: any) => {
|
|||
*/
|
||||
const isLeave = ref<boolean>(true);
|
||||
async function FetchCheck() {
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
await http
|
||||
.post(config.API.leaveCheck(), {
|
||||
type: dataStore.typeId ?? null,
|
||||
StartLeaveDate: formDataRehabilitation.leaveStartDate ?? null,
|
||||
EndLeaveDate: formDataRehabilitation.leaveEndDate ?? null,
|
||||
})
|
||||
.then((res: any) => {
|
||||
const data = res.data.result;
|
||||
isLeave.value = data.isLeave;
|
||||
})
|
||||
.catch((e: any) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
//download function
|
||||
async function onClickDownloadFile(id: string, fileName: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
//เเจ้งเตือนลบข้อมูล
|
||||
const 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(() => {
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
return !isLeave.value ? "input-alert" : "";
|
||||
});
|
||||
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
const leaveDocumentList = ref<any>();
|
||||
const leaveDraftDocument = ref<string>();
|
||||
const statusCheck = ref<any>("");
|
||||
/** ตรวจสอบว่ามีการส่งข้อมูลเข้ามาที่ฟอร์มไหม เมื่อมีการส่งจะ map ข้อมูลเข้า v-model ของฟอร์ม */
|
||||
watch(props.data, () => {
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataRehabilitation.leaveDraftDocument = null;
|
||||
formDataRehabilitation.leaveDocument = [];
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
formDataRehabilitation.leaveDraftDocument = null;
|
||||
formDataRehabilitation.leaveDocument = [];
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
if (props.data) {
|
||||
formDataRehabilitation.leaveWrote = props.data.leaveWrote;
|
||||
formDataRehabilitation.leaveStartDate = new Date(props.data.leaveStartDate);
|
||||
formDataRehabilitation.leaveEndDate = new Date(props.data.leaveEndDate);
|
||||
formDataRehabilitation.leaveDetail = props.data.leaveDetail;
|
||||
// formDataRehabilitation.leaveDocument = props.data.leaveDocument;
|
||||
leaveDraftDocument.value = props.data.leaveDraftDocument;
|
||||
leaveDocumentList.value = props.data.leaveDocument;
|
||||
statusCheck.value = props.data.status;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveWrote"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
|
||||
</div>
|
||||
<form @submit.prevent="onValidate">
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="row q-pa-sm q-col-gutter-sm">
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveWrote"
|
||||
class="col-12 col-sm-12 cursor-pointer inputgreen"
|
||||
ref="leaveWroteRef"
|
||||
dense
|
||||
outlined
|
||||
bg-color="white"
|
||||
label="เขียนที่"
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:rules="[(val) => !!val || `${'เขียนที่'}`]"
|
||||
/>
|
||||
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveStartDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<datepicker
|
||||
v-model="formDataRehabilitation.leaveStartDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:enableTimePicker="false"
|
||||
:locale="'th'"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
@update:model-value="formDataRehabilitation.leaveEndDate = null"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveStartDateRef"
|
||||
class="full-width datepicker"
|
||||
bg-color="white"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveStartDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveStartDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาตั้งแต่วันที่'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกลาตั้งแต่วันที่'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveEndDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
<datepicker
|
||||
:class="!isLeave ? dateEndInputStyle : ''"
|
||||
v-model="formDataRehabilitation.leaveEndDate"
|
||||
class="col-12 col-md-4 col-sm-6 cursor-pointer inputgreen"
|
||||
menu-class-name="modalfix"
|
||||
autoApply
|
||||
borderless
|
||||
week-start="0"
|
||||
:locale="'th'"
|
||||
@update:model-value="FetchCheck()"
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:enableTimePicker="false"
|
||||
:min-date="formDataRehabilitation.leaveStartDate"
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
ref="leaveEndDateRef"
|
||||
class="full-width datepicker"
|
||||
outlined
|
||||
dense
|
||||
lazy-rules
|
||||
hide-bottom-space
|
||||
:readonly="
|
||||
!formDataRehabilitation.leaveStartDate || statusCheck === 'NEW'
|
||||
"
|
||||
:model-value="
|
||||
formDataRehabilitation.leaveEndDate != null
|
||||
? date2Thai(formDataRehabilitation.leaveEndDate)
|
||||
: null
|
||||
"
|
||||
:label="`${'ลาถึงวันที่'}`"
|
||||
:bottom-slots="!isLeave ? true : false"
|
||||
:color="!isLeave ? 'red' : 'black'"
|
||||
:bg-color="!isLeave ? 'red-2' : 'white'"
|
||||
:border-color="!isLeave ? 'red' : 'gray'"
|
||||
:input-class="!isLeave ? dateEndInputStyle : ''"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<template v-slot:hint>
|
||||
<span style="color: red">
|
||||
{{ !isLeave ? "จำนวนวันลาเกินที่กำหนด" : "" }}
|
||||
</span>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
<q-input
|
||||
v-model="formDataRehabilitation.leaveDetail"
|
||||
:readonly="!edit || statusCheck === 'NEW'"
|
||||
class="col-12 col-md-12 col-sm-12 cursor-pointer inputgreen"
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
type="textarea"
|
||||
label="รายละเอียด"
|
||||
/>
|
||||
|
||||
<div class="col-12" v-if="statusCheck != 'NEW'">
|
||||
<q-file
|
||||
v-model="formDataRehabilitation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
multiple
|
||||
use-chips
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เอกสารประกอบ"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="col-12 q-mt-sm" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list separator>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
<div class="col-12" v-if="statusCheck != 'NEW'">
|
||||
<q-file
|
||||
v-model="formDataRehabilitation.leaveDocument"
|
||||
@added="fileUploadDoc"
|
||||
multiple
|
||||
use-chips
|
||||
bg-color="white"
|
||||
dense
|
||||
outlined
|
||||
label="เอกสารประกอบ"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
<div class="col-12 q-mt-sm" v-if="data">
|
||||
<div class="col-12 col-md-12 col-sm-12">
|
||||
<q-card>
|
||||
<q-list separator>
|
||||
<q-item
|
||||
v-for="(document, index) in leaveDocumentList"
|
||||
:key="index"
|
||||
class="q-my-xs"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="row items-baseline">
|
||||
<div class="col">
|
||||
{{ "เอกสารแนบที่ " + (index + 1) }}
|
||||
</div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
class="q-mr-md"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
@click="clickDelete"
|
||||
target="_blank"
|
||||
outline
|
||||
color="red"
|
||||
label="ลบไฟล์"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ลบไฟล์</q-tooltip>
|
||||
</q-btn>
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
|
||||
<div v-if="data && data.id" class="q-mt-md">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
||||
</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<div v-if="data && data.id" class="q-mt-md">
|
||||
<div style="display: flex; align-items: center">
|
||||
<q-icon name="mdi-numeric-4-circle" size="20px" color="primary" />
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ดาวน์โหลด/อัปโหลดแบบฟอร์ม
|
||||
</div>
|
||||
</div>
|
||||
<q-card class="bg-grey-1 q-pa-sm" bordered>
|
||||
<div class="row">
|
||||
<div class="col-sm-3 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
ดาวน์โหลด
|
||||
</div> -->
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลดแบบฟอร์ม"
|
||||
@click="
|
||||
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="download"
|
||||
label="ดาวน์โหลดแบบฟอร์ม"
|
||||
@click="
|
||||
onClickDownloadFile(data.id, `แบบฟอร์ม${data.leaveTypeName}`)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<!-- <div class="q-pl-sm text-weight-bold text-dark text-center">
|
||||
อัปโหลด
|
||||
</div> -->
|
||||
<q-file
|
||||
v-model="formDataRehabilitation.leaveDraftDocument"
|
||||
use-chips
|
||||
dense
|
||||
label="อัปโหลดแบบฟอร์ม"
|
||||
outlined
|
||||
bg-color="white"
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
<q-file
|
||||
v-model="formDataRehabilitation.leaveDraftDocument"
|
||||
use-chips
|
||||
dense
|
||||
label="อัปโหลดแบบฟอร์ม"
|
||||
outlined
|
||||
bg-color="white"
|
||||
accept="application/pdf"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="attach_file" color="primary" />
|
||||
</template>
|
||||
</q-file>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<q-btn
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
:href="leaveDraftDocument"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div v-if="leaveDraftDocument" class="col-sm-2 q-my-sm">
|
||||
<div class="column q-mx-xs">
|
||||
<q-btn
|
||||
icon="visibility"
|
||||
color="blue"
|
||||
label="ดาวน์โหลดไฟล์"
|
||||
:href="leaveDraftDocument"
|
||||
target="_blank"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div v-if="!isSave">
|
||||
<q-separator class="q-mt-sm" />
|
||||
<div class="row col-12 q-pt-md">
|
||||
<q-space />
|
||||
<q-btn
|
||||
v-if="!props.data || props.data.status == 'DRAFT'"
|
||||
id="onSubmit"
|
||||
type="submit"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center btnBlue"
|
||||
label="บันทึก"
|
||||
><q-tooltip>บันทึกแบบร่าง</q-tooltip></q-btn
|
||||
>
|
||||
<q-btn
|
||||
v-if="data && statusCheck != 'NEW'"
|
||||
id="onSubmit"
|
||||
type="button"
|
||||
unelevated
|
||||
dense
|
||||
class="q-px-md items-center q-ml-sm"
|
||||
color="primary"
|
||||
label="ยื่นใบลา"
|
||||
@click="onConfirm()"
|
||||
><q-tooltip>ยื่นใบลา</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,167 +5,169 @@ import { useQuasar } from "quasar";
|
|||
import type { FormData } from "@/modules/05_leave/interface/request/AddAbsence";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
/**ตัวแปรที่ใช้ */
|
||||
const mixin = useCounterMixin();
|
||||
const dataStore = useLeaveStore();
|
||||
const { date2Thai } = mixin;
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
model: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
model: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
/** ข้อมูล v-model ของฟอร์ม */
|
||||
const formData = reactive<FormData>({
|
||||
dateStart: new Date(),
|
||||
subject: "เรื่อง",
|
||||
who: "เรียนผู้ใด",
|
||||
requestName: "ชื่อผู้ยื่น",
|
||||
position: "ตำแหน่ง",
|
||||
level: "ระดับ",
|
||||
ocRequest: "สังกัด",
|
||||
leaveabsentDaySummon: "2",
|
||||
leaveUse: "1",
|
||||
leaveRemaining: "1",
|
||||
dateStart: new Date(),
|
||||
subject: "เรื่อง",
|
||||
who: "เรียนผู้ใด",
|
||||
requestName: "ชื่อผู้ยื่น",
|
||||
position: "ตำแหน่ง",
|
||||
level: "ระดับ",
|
||||
ocRequest: "สังกัด",
|
||||
leaveabsentDaySummon: "2",
|
||||
leaveUse: "1",
|
||||
leaveRemaining: "1",
|
||||
});
|
||||
|
||||
/**Hook */
|
||||
onMounted(() => {
|
||||
dataStore.typeLeave = "";
|
||||
dataStore.typeLeave = "";
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-sm-4"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dataStore.dateSendLeave"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width"
|
||||
:model-value="
|
||||
dataStore.dateSendLeave != null
|
||||
? date2Thai(dataStore.dateSendLeave)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่ยื่นใบลา'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer inputblack"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
v-model="dataStore.typeLeave"
|
||||
label="เรื่อง"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.dear"
|
||||
label="เรียน"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.fullName"
|
||||
label="ชื่อผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.positionName"
|
||||
label="ตำแหน่งผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.positionLevelName"
|
||||
label="ระดับผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.organizationName"
|
||||
label="สังกัดผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.model === 'LV-005'"
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.leaveLimit"
|
||||
label="จำนวนสิทธิ์การลาที่ได้รับ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.leaveTotal"
|
||||
label="จำนวนสิทธิ์การลาที่ใช้ไป"
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.model === 'LV-005'"
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.leaveRemain"
|
||||
label="จำนวนสิทธิ์การลาคงเหลือ"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
<q-card bordered class="q-pa-md bg-grey-1">
|
||||
<div class="col-12 row q-pa-sm q-col-gutter-sm">
|
||||
<datepicker
|
||||
class="col-12 col-sm-4"
|
||||
menu-class-name="modalfix"
|
||||
v-model="dataStore.dateSendLeave"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
borderless
|
||||
:enableTimePicker="false"
|
||||
week-start="0"
|
||||
readonly
|
||||
>
|
||||
<template #year="{ year }">
|
||||
{{ year + 543 }}
|
||||
</template>
|
||||
<template #year-overlay-value="{ value }">
|
||||
{{ parseInt(value + 543) }}
|
||||
</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
outlined
|
||||
dense
|
||||
bg-color="white"
|
||||
hide-bottom-space
|
||||
readonly
|
||||
class="full-width"
|
||||
:model-value="
|
||||
dataStore.dateSendLeave != null
|
||||
? date2Thai(dataStore.dateSendLeave)
|
||||
: null
|
||||
"
|
||||
:label="`${'วันที่ยื่นใบลา'}`"
|
||||
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ยื่นใบลา'}`]"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer inputblack"
|
||||
style="color: var(--black)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
bg-color="white"
|
||||
outlined
|
||||
readonly
|
||||
v-model="dataStore.typeLeave"
|
||||
label="เรื่อง"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.dear"
|
||||
label="เรียน"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.fullName"
|
||||
label="ชื่อผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.positionName"
|
||||
label="ตำแหน่งผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.positionLevelName"
|
||||
label="ระดับผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-3"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.organizationName"
|
||||
label="สังกัดผู้ยื่นขอ"
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.model === 'LV-005'"
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.leaveLimit"
|
||||
label="จำนวนสิทธิ์การลาที่ได้รับ"
|
||||
/>
|
||||
<q-input
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.leaveTotal"
|
||||
label="จำนวนสิทธิ์การลาที่ใช้ไป"
|
||||
/>
|
||||
<q-input
|
||||
v-if="props.model === 'LV-005'"
|
||||
class="col-12 col-sm-4"
|
||||
dense
|
||||
outlined
|
||||
readonly
|
||||
bg-color="white"
|
||||
v-model="dataStore.leaveRemain"
|
||||
label="จำนวนสิทธิ์การลาคงเหลือ"
|
||||
/>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -16,13 +16,24 @@ import Table from "@/modules/05_leave/components/Table.vue";
|
|||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
/**ตัวแปรที่ใช้ */
|
||||
const mixin = useCounterMixin();
|
||||
const { showLoader, hideLoader, messageError, date2Thai, monthYear2Thai } =
|
||||
mixin;
|
||||
const {
|
||||
showLoader,
|
||||
hideLoader,
|
||||
messageError,
|
||||
date2Thai,
|
||||
monthYear2Thai,
|
||||
dialogRemove,
|
||||
} = mixin;
|
||||
const LeaveData = useLeaveStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const $q = useQuasar();
|
||||
const leaveType = ref<LeaveType[]>();
|
||||
const modal = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
const leaveStatus = ref<string>("");
|
||||
|
||||
/** filter */
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
|
|
@ -37,66 +48,85 @@ const pageSize = ref<number>(10);
|
|||
|
||||
/** function เรียกข้อมูลการลา*/
|
||||
async function fetchDataTable() {
|
||||
showLoader();
|
||||
const body = {
|
||||
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: type.value, //*Id ประเภทการลา
|
||||
status: status.value, //*สถานะการของลา
|
||||
page: page.value.toString(), //*หน้า
|
||||
pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
|
||||
keyword: filter.value, //keyword ค้นหา
|
||||
};
|
||||
await http
|
||||
.post(config.API.leaveTableList(), body)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
LeaveData.fetchListLeave(data);
|
||||
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
showLoader();
|
||||
const body = {
|
||||
year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: type.value, //*Id ประเภทการลา
|
||||
status: status.value, //*สถานะการของลา
|
||||
page: page.value.toString(), //*หน้า
|
||||
pageSize: pageSize.value.toString(), //*จำนวนแถวต่อหน้า
|
||||
keyword: filter.value, //keyword ค้นหา
|
||||
};
|
||||
await http
|
||||
.post(config.API.leaveTableList(), body)
|
||||
.then((res) => {
|
||||
const data = res.data.result.data;
|
||||
LeaveData.fetchListLeave(data);
|
||||
maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const leaveType = ref<LeaveType[]>();
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async (res) => {
|
||||
leaveType.value = res.data.result;
|
||||
LeaveData.fetchLeaveType(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then(async (res) => {
|
||||
leaveType.value = res.data.result;
|
||||
LeaveData.fetchLeaveType(res.data.result);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
const modal = ref<boolean>(false);
|
||||
const leaveId = ref<string>("");
|
||||
const leaveStatus = ref<string>("");
|
||||
|
||||
/**
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
* @param status การลา
|
||||
*/
|
||||
const onClickView = async (id: string, status: string) => {
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
leaveStatus.value = status;
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
leaveStatus.value = status;
|
||||
};
|
||||
|
||||
/**
|
||||
* function ไปหน้า edit
|
||||
* @param id
|
||||
*/
|
||||
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*/
|
||||
async function onClickClose() {
|
||||
modal.value = false;
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -107,13 +137,13 @@ async function onClickClose() {
|
|||
* @param k คำค้นหา
|
||||
*/
|
||||
async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
||||
if (t && s) {
|
||||
year.value = await y;
|
||||
type.value = await t;
|
||||
status.value = await s;
|
||||
filter.value = await k;
|
||||
await fetchDataTable();
|
||||
}
|
||||
if (t && s) {
|
||||
year.value = await y;
|
||||
type.value = await t;
|
||||
status.value = await s;
|
||||
filter.value = await k;
|
||||
await fetchDataTable();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -122,164 +152,174 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
|||
* @param ps แถวต่อหน้า
|
||||
*/
|
||||
async function updatePagination(p: number, ps: number) {
|
||||
(page.value = await p), (pageSize.value = await ps);
|
||||
await fetchDataTable();
|
||||
(page.value = await p), (pageSize.value = await ps);
|
||||
await fetchDataTable();
|
||||
}
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
await fetchDataTable();
|
||||
await fectOptionType();
|
||||
await fetchDataTable();
|
||||
await fectOptionType();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<Table
|
||||
:rows="LeaveData.rows"
|
||||
:columns="LeaveData.columns"
|
||||
:visible-columns="LeaveData.visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="LeaveData.visibleColumns"
|
||||
:inputShow="true"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
@update:filter="updateFilterTable"
|
||||
@update:Pagination="updatePagination"
|
||||
:maxPage="maxPage"
|
||||
:pageSize="pageSize"
|
||||
:leaveType="leaveType"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
key="no"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="leaveTypeName"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ props.row.leaveTypeName }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="dateLeave"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ props.row.dateLeave }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="dateSendLeave"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ props.row.dateSendLeave }}
|
||||
</q-td>
|
||||
<Table
|
||||
:rows="LeaveData.rows"
|
||||
:columns="LeaveData.columns"
|
||||
:visible-columns="LeaveData.visibleColumns"
|
||||
v-model:inputfilter="filter"
|
||||
v-model:inputvisible="LeaveData.visibleColumns"
|
||||
:inputShow="true"
|
||||
:grid="$q.screen.gt.xs ? false : true"
|
||||
@update:filter="updateFilterTable"
|
||||
@update:Pagination="updatePagination"
|
||||
:maxPage="maxPage"
|
||||
:pageSize="pageSize"
|
||||
:leaveType="leaveType"
|
||||
>
|
||||
<template #columns="props">
|
||||
<q-tr :props="props" class="cursor-pointer">
|
||||
<q-td
|
||||
key="no"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ (page - 1) * pageSize + props.rowIndex + 1 }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="leaveTypeName"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ props.row.leaveTypeName }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="dateLeave"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ props.row.dateLeave }}
|
||||
</q-td>
|
||||
<q-td
|
||||
key="dateSendLeave"
|
||||
:props="props"
|
||||
@click="onClickView(props.row.id, props.row.status)"
|
||||
>
|
||||
{{ props.row.dateSendLeave }}
|
||||
</q-td>
|
||||
|
||||
<q-td key="status" :props="props">
|
||||
<div class="col-12 row items-center">
|
||||
<div @click="onClickView(props.row.id, props.row.status)">
|
||||
<q-icon
|
||||
v-if="props.row.status == 'DRAFT'"
|
||||
size="10px"
|
||||
color="light-grey"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="props.row.status == 'APPROVE'"
|
||||
size="10px"
|
||||
color="light-green"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else-if="props.row.status == 'REJECT'"
|
||||
size="10px"
|
||||
color="red-6"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else-if="props.row.status == 'PENDING'"
|
||||
size="10px"
|
||||
color="light-blue-14"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else-if="props.row.status == 'NEW'"
|
||||
size="10px"
|
||||
color="orange"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="props.row.status == 'DELETE'"
|
||||
size="10px"
|
||||
color="grey-10"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-td key="status" :props="props">
|
||||
<div class="col-12 row items-center">
|
||||
<div @click="onClickView(props.row.id, props.row.status)">
|
||||
<q-icon
|
||||
v-if="props.row.status == 'DRAFT'"
|
||||
size="10px"
|
||||
color="light-grey"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="props.row.status == 'APPROVE'"
|
||||
size="10px"
|
||||
color="light-green"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else-if="props.row.status == 'REJECT'"
|
||||
size="10px"
|
||||
color="red-6"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else-if="props.row.status == 'PENDING'"
|
||||
size="10px"
|
||||
color="light-blue-14"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-else-if="props.row.status == 'NEW'"
|
||||
size="10px"
|
||||
color="orange"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
<q-icon
|
||||
v-if="props.row.status == 'DELETE'"
|
||||
size="10px"
|
||||
color="grey-10"
|
||||
name="mdi-circle"
|
||||
class="q-mr-sm"
|
||||
/>
|
||||
|
||||
<span class="q-pr-md">{{ props.row.statusConvert }}</span>
|
||||
</div>
|
||||
<q-space />
|
||||
<span class="q-pr-md">{{ props.row.statusConvert }}</span>
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
props.row.status != 'DELETE' &&
|
||||
props.row.status != 'REJECT' &&
|
||||
props.row.status != 'CANCEL'
|
||||
"
|
||||
flat
|
||||
icon="mdi-dots-vertical"
|
||||
color="grey-8"
|
||||
for="#cancel"
|
||||
dense
|
||||
round
|
||||
unelevated
|
||||
>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickView(props.row.id, 'CANCEL')"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>ขอยกเลิก</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="props.row.status == 'DRAFT'"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickEdit(props.row.id)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>แก้ไข</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
<q-btn
|
||||
v-if="
|
||||
props.row.status != 'DELETE' &&
|
||||
props.row.status != 'REJECT' &&
|
||||
props.row.status != 'CANCEL'
|
||||
"
|
||||
flat
|
||||
icon="mdi-dots-vertical"
|
||||
color="grey-8"
|
||||
for="#cancel"
|
||||
dense
|
||||
round
|
||||
unelevated
|
||||
>
|
||||
<q-menu>
|
||||
<q-list>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickView(props.row.id, 'CANCEL')"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>ขอยกเลิก</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="props.row.status == 'DRAFT'"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="onClickEdit(props.row.id)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>แก้ไข</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
v-if="props.row.status == 'DRAFT'"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="clickDelete(props.row.id)"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label>ลบรายการการลา</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
</Table>
|
||||
|
||||
<DialogDetail
|
||||
:modal="modal"
|
||||
:leaveId="leaveId"
|
||||
:leaveStatus="leaveStatus"
|
||||
:onClickClose="onClickClose"
|
||||
:leaveType="leaveType"
|
||||
:fetchDataTable="fetchDataTable"
|
||||
/>
|
||||
<DialogDetail
|
||||
:modal="modal"
|
||||
:leaveId="leaveId"
|
||||
:leaveStatus="leaveStatus"
|
||||
:onClickClose="onClickClose"
|
||||
:leaveType="leaveType"
|
||||
:fetchDataTable="fetchDataTable"
|
||||
/>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,97 +1,106 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveRange == 'ALL' ? props.data.leaveTotal + ' วัน' : props.data.leaveRange == 'MORNING' ? 'ลาครึ่งวันเช้า (0.5)': 'ลาครึ่งวันบ่าย (0.5)' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">
|
||||
ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
|
||||
</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{
|
||||
props.data.leaveRange == "ALL"
|
||||
? props.data.leaveTotal + " วัน"
|
||||
: props.data.leaveRange == "MORNING"
|
||||
? "ลาครึ่งวันเช้า (0.5)"
|
||||
: "ลาครึ่งวันบ่าย (0.5)"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">
|
||||
ลาครั้งสุดท้ายในประเภทนั้น ๆ เมื่อวันที่
|
||||
</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,94 +1,97 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อภรรยา</div>
|
||||
<div class="col">{{ props.data.wifeDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่คลอด</div>
|
||||
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '11px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อภรรยา</div>
|
||||
<div class="col">{{ props.data.wifeDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่คลอด</div>
|
||||
<div class="col">{{ props.data.wifeDayDateBorn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '11px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,99 +1,108 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
||||
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
||||
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveRange == 'ALL' ? props.data.leaveTotal + ' วัน' : props.data.leaveRange == 'MORNING' ? 'ลาครึ่งวันเช้า (0.5)': 'ลาครึ่งวันบ่าย (0.5)' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา</div>
|
||||
<div class="col">{{ props.data.restDayOldTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันลาพักผ่อนประจำปีปัจจุบัน</div>
|
||||
<div class="col">{{ props.data.restDayCurrentTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{
|
||||
props.data.leaveRange == "ALL"
|
||||
? props.data.leaveTotal + " วัน"
|
||||
: props.data.leaveRange == "MORNING"
|
||||
? "ลาครึ่งวันเช้า (0.5)"
|
||||
: "ลาครึ่งวันบ่าย (0.5)"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,112 +1,115 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่บวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayLocationName }}
|
||||
{{ props.data.ordainDayLocationAddress }}
|
||||
{{ props.data.ordainDayLocationNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayBuddhistLentName }}
|
||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveLastEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่บวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayLocationName }}
|
||||
{{ props.data.ordainDayLocationAddress }}
|
||||
{{ props.data.ordainDayLocationNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayBuddhistLentName }}
|
||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,87 +1,90 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,100 +1,103 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(props);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
||||
<div class="col">{{ props.data.absentDaySummon }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่</div>
|
||||
<div class="col">{{ props.data.absentDayLocation }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลงวันที่</div>
|
||||
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ ที่</div>
|
||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveTotal ? props.data.leaveTotal + " วัน" : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ได้รับหมายเรียกของ</div>
|
||||
<div class="col">{{ props.data.absentDaySummon }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่</div>
|
||||
<div class="col">{{ props.data.absentDayLocation }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลงวันที่</div>
|
||||
<div class="col">{{ props.data.absentDayRegistorDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ ที่</div>
|
||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,121 +1,124 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ศึกษาวิชา</div>
|
||||
<div class="col">{{ props.data.studyDaySubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ขั้นปริญญา</div>
|
||||
<div class="col">{{ props.data.studyDayDegreeLevel }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อสถานศึกษา</div>
|
||||
<div class="col">{{ props.data.studyDayUniversityName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ศึกษาวิชา</div>
|
||||
<div class="col">{{ props.data.studyDaySubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ขั้นปริญญา</div>
|
||||
<div class="col">{{ props.data.studyDayDegreeLevel }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อสถานศึกษา</div>
|
||||
<div class="col">{{ props.data.studyDayUniversityName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -1,116 +1,119 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ สถานที่</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ สถานที่</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,95 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารประกอบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารประกอบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,123 +1,126 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayPosition }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
|
||||
<div class="col">{{ props.data.coupleDayLevelCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
</div>
|
||||
<div class="row q-mt-xs">
|
||||
<div class="col text-grey-8">
|
||||
<div class="q-ml-md" style="list-style-type: circle">
|
||||
<li>ประเทศ</li>
|
||||
<li>จำนวนวัน</li>
|
||||
<li>ตั้งแต่วันที่</li>
|
||||
<li>ถึงวันที่</li>
|
||||
<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ props.data.coupleDayCountryHistory }}</div>
|
||||
<div>{{ props.data.coupleDayTotalHistory }}</div>
|
||||
<div>{{ props.data.coupleDayStartDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDayEndDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDaySumTotalHistory }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">จำนวนวันที่ลา</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveCount ? props.data.leaveCount : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayPosition }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
|
||||
<div class="col">{{ props.data.coupleDayLevelCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
</div>
|
||||
<div class="row q-mt-xs">
|
||||
<div class="col text-grey-8">
|
||||
<div class="q-ml-md" style="list-style-type: circle">
|
||||
<li>ประเทศ</li>
|
||||
<li>จำนวนวัน</li>
|
||||
<li>ตั้งแต่วันที่</li>
|
||||
<li>ถึงวันที่</li>
|
||||
<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ props.data.coupleDayCountryHistory }}</div>
|
||||
<div>{{ props.data.coupleDayTotalHistory }}</div>
|
||||
<div>{{ props.data.coupleDayStartDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDayEndDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDaySumTotalHistory }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,86 +1,89 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารประกอบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่ยื่นใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveDetail ? props.data.leaveDetail : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารประกอบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col">
|
||||
<div
|
||||
v-if="
|
||||
props.data.leaveDocument && props.data.leaveDocument.length > 0
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
|
|
@ -57,7 +59,16 @@ const props = defineProps({
|
|||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารการยกเลิกการลา</div>
|
||||
<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 class="col" v-else>-</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* รับ prop จาก component
|
||||
*/
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
console.log(props);
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรียน</div>
|
||||
<div class="col">{{ props.data.notification }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
|
||||
<div class="col">{{ props.data.fullname }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.positionName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.positionLevelName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.organizationName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">วันที่ยืนใบลา</div>
|
||||
<div class="col">{{ props.data.dateSendLeave }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรื่อง</div>
|
||||
<div class="col">{{ props.data.leaveTypeName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรียน</div>
|
||||
<div class="col">{{ props.data.notification }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ชื่อผู้ยื่นขอ</div>
|
||||
<div class="col">{{ props.data.fullname }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ตำแหน่งผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.positionName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">ระดับผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.positionLevelName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">สังกัดผู้ยืนขอ</div>
|
||||
<div class="col">{{ props.data.organizationName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue