ปรับ Code การลาลงเวลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
d150dedb81
commit
99419877c4
42 changed files with 123 additions and 148 deletions
502
src/modules/09_leave/components/05_Leave/Calendar.vue
Normal file
502
src/modules/09_leave/components/05_Leave/Calendar.vue
Normal file
|
|
@ -0,0 +1,502 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
import moment from "moment";
|
||||
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import allLocales from "@fullcalendar/core/locales-all";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
|
||||
/** importType*/
|
||||
import type { CalendarOptions } from "@fullcalendar/core";
|
||||
import type {
|
||||
DataDateMonthObject,
|
||||
ResCalendar,
|
||||
} from "@/modules/09_leave/interface/response/leave";
|
||||
import { tokenParsed } from "@/plugins/auth";
|
||||
|
||||
/** use*/
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
|
||||
const $q = useQuasar();
|
||||
const router = useRouter();
|
||||
|
||||
const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
|
||||
|
||||
const keycloakId = ref<string>("");
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
*/
|
||||
const fullCalendar = ref<any>(); //ref calendar
|
||||
const calendarOptions = ref<CalendarOptions>({
|
||||
plugins: [
|
||||
dayGridPlugin,
|
||||
timeGridPlugin,
|
||||
interactionPlugin, // needed for dateClick
|
||||
listPlugin,
|
||||
],
|
||||
buttonText: {
|
||||
listYear: "รายการ",
|
||||
dayGridMonth: "ปฏิทิน",
|
||||
test: "เพิ่มวันหยุด",
|
||||
},
|
||||
headerToolbar: false,
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: [],
|
||||
selectable: true,
|
||||
dayMaxEvents: true,
|
||||
weekends: true,
|
||||
locale: "th",
|
||||
locales: allLocales,
|
||||
expandRows: true,
|
||||
nowIndicator: true,
|
||||
height: "100%",
|
||||
eventColor: "#fff",
|
||||
eventTextColor: "#4A5568",
|
||||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
events: [],
|
||||
});
|
||||
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
month: new Date().getMonth(),
|
||||
year: new Date().getFullYear(),
|
||||
});
|
||||
const mainData = ref<ResCalendar[]>([]);
|
||||
|
||||
/** function เรียกข้อมูล Calendar*/
|
||||
async function fetchDataCalendar(type: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCalendar(), {
|
||||
year: dateMonth.value.year,
|
||||
})
|
||||
.then(async (res) => {
|
||||
mainData.value = res.data.result;
|
||||
const double_name = [
|
||||
...new Set(mainData.value.map((item: ResCalendar) => item.keycloakId)),
|
||||
];
|
||||
|
||||
filterLists.value = [];
|
||||
for (let i = 1; i <= double_name.length; i++) {
|
||||
const name = double_name[i - 1];
|
||||
const filterName = {
|
||||
id: name,
|
||||
name: convertKeycloakId(name),
|
||||
color: "green",
|
||||
};
|
||||
|
||||
filterLists.value.push(filterName);
|
||||
type === "onMounted" && filterVal.value.push(name);
|
||||
}
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter((e: ResCalendar) => e.keycloakId === item)
|
||||
.map((e: ResCalendar) => ({
|
||||
id: e.id,
|
||||
title: `${e.fullName} (${e.leaveTypeName}) `,
|
||||
start: e.leaveStartDate,
|
||||
end: moment(e.leaveEndDate).format("YYYY-MM-DD") + " 23:59:59",
|
||||
color: leaveStore.colorType(e.leaveTypeId),
|
||||
textColor: "black",
|
||||
allDay: false,
|
||||
}));
|
||||
});
|
||||
const allEventData = [].concat(...eventData);
|
||||
calendarOptions.value.events = allEventData;
|
||||
await fetchDataHoliday(calendarOptions.value.events);
|
||||
})
|
||||
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
const calen = fullCalendar.value.getApi();
|
||||
const date = new Date(dateMonth.value.year, dateMonth.value.month);
|
||||
calen.gotoDate(date);
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* fetch วันหยุดในปฏิทิน
|
||||
*/
|
||||
async function fetchDataHoliday(optionsCalendaMain: any) {
|
||||
await http
|
||||
.get(
|
||||
config.API.listHolidayHistoryYearMonth(
|
||||
dateMonth.value.year,
|
||||
dateMonth.value.month + 1
|
||||
)
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
|
||||
const dataNormal = res.data.result.normal;
|
||||
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(),
|
||||
allDay: e.holidayDate === e.holidayDate ? true : false,
|
||||
color: " #CCE5FF",
|
||||
textColor: "#0080FF",
|
||||
}));
|
||||
calendarOptions.value.events = [...optionsCalendaMain, ...event];
|
||||
})
|
||||
.catch((e) => {
|
||||
messageError($q, e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function convert ชื่อ
|
||||
* @param id profile
|
||||
*/
|
||||
function convertKeycloakId(id: any) {
|
||||
const filterName = mainData.value.find(
|
||||
(e: ResCalendar) => e.keycloakId === id
|
||||
);
|
||||
return filterName?.fullName;
|
||||
}
|
||||
|
||||
// filter calendar left
|
||||
const filterLists = ref<any[]>([]);
|
||||
const filterVal = ref<any>([]);
|
||||
|
||||
function redirectToDetail(id: string) {
|
||||
router.push(`leave/detail/${id}`);
|
||||
}
|
||||
|
||||
/** function เปลี่ยน calendar*/
|
||||
async function changCalendar() {
|
||||
await fetchDataCalendar("chang");
|
||||
}
|
||||
|
||||
function monthYearThai(val: DataDateMonthObject) {
|
||||
if (val == null) return "";
|
||||
else return monthYear2Thai(val.month, val.year);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => filterVal.value,
|
||||
async () => {
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter((e: ResCalendar) => e.keycloakId === item)
|
||||
.map((e: ResCalendar) => ({
|
||||
id: e.id,
|
||||
title: `${e.fullName} (${e.leaveTypeName}) `,
|
||||
start: e.leaveStartDate,
|
||||
end: moment(e.leaveEndDate).format("YYYY-MM-DD") + " 23:59:59",
|
||||
color: leaveStore.colorType(e.leaveTypeId),
|
||||
textColor: "black",
|
||||
allDay: false,
|
||||
}));
|
||||
});
|
||||
const allEventData = [].concat(...eventData);
|
||||
calendarOptions.value.events = allEventData;
|
||||
await fetchDataHoliday(calendarOptions.value.events);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
|
||||
*/
|
||||
onMounted(async () => {
|
||||
const user = await tokenParsed();
|
||||
keycloakId.value = user?.sub;
|
||||
await fetchDataCalendar("onMounted");
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-mt-sm">
|
||||
<div class="row q-gutter-sm">
|
||||
<div class="col-3">
|
||||
<q-list bordered class="rounded-borders">
|
||||
<q-item
|
||||
v-for="(item, i) in filterLists"
|
||||
:key="i"
|
||||
tag="label"
|
||||
v-ripple
|
||||
>
|
||||
<q-checkbox
|
||||
size="sm"
|
||||
v-model="filterVal"
|
||||
:val="item.id"
|
||||
:color="item.color"
|
||||
/>
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.name }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<div class="row q-gutter-sm q-pb-sm main-content">
|
||||
<div class="demo-app-main">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<datepicker
|
||||
v-model="dateMonth"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
month-picker
|
||||
:enableTimePicker="false"
|
||||
@update:modelValue="changCalendar"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
:model-value="monthYearThai(dateMonth)"
|
||||
dense
|
||||
outlined
|
||||
style="width: 130px"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
</div>
|
||||
<FullCalendar
|
||||
ref="fullCalendar"
|
||||
class="demo-app-calendar"
|
||||
:options="calendarOptions"
|
||||
>
|
||||
<template v-slot:eventContent="arg">
|
||||
<div
|
||||
class="row col-12 items-center no-wrap"
|
||||
:style="
|
||||
checkPermission($route)?.attrIsGet
|
||||
? `background: + ${arg.event.color}`
|
||||
: `background: + ${arg.event.color};pointer-events: none;cursor: auto;`
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="textHover col-10"
|
||||
@click="
|
||||
checkPermission($route)?.attrIsGet
|
||||
? redirectToDetail(arg.event.id)
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<q-tooltip>{{ arg.event.title }} </q-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
<div class="row q-col-gutter-sm">
|
||||
<div
|
||||
v-for="(item, index) in leaveStore.leaveType"
|
||||
:key="index"
|
||||
class="items-center col-3"
|
||||
>
|
||||
<q-icon
|
||||
size="10px"
|
||||
name="mdi-circle"
|
||||
class="q-mr-xs"
|
||||
:style="`color: ${leaveStore.colorType(item.id)}`"
|
||||
/>
|
||||
<span class="text-caption">{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="items-center col-3">
|
||||
<q-icon
|
||||
size="10px"
|
||||
name="mdi-circle"
|
||||
class="q-mr-xs"
|
||||
style="color: #cce5ff"
|
||||
/>
|
||||
<span class="text-caption">วันหยุดในปฏิทิน</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scope lang="scss">
|
||||
.main-content {
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
.color-main {
|
||||
color: #18a259;
|
||||
}
|
||||
|
||||
.padding-content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.demo-app-main {
|
||||
flex-grow: 1;
|
||||
/* padding: 3em; */
|
||||
}
|
||||
|
||||
.fc {
|
||||
/* the calendar root */
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fc-day-today {
|
||||
background-color: #f8f8f8 !important;
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-number {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-day-today .fc-daygrid-day-frame {
|
||||
padding: 5%;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button {
|
||||
color: black;
|
||||
background-color: #fafafa;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button:active {
|
||||
color: white;
|
||||
background-color: #22a15e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc .fc-button-group > .fc-button.fc-button-active {
|
||||
color: white;
|
||||
background-color: #22a15e;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
background-color: white;
|
||||
padding: 0px 10px 0px 10px;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.fc .fc-scrollgrid-liquid > thead {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.dp-custom-cell {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.dp__today {
|
||||
border: 1px solid var(--q-primary);
|
||||
}
|
||||
|
||||
.dp__range_end,
|
||||
.dp__range_start,
|
||||
.dp__active_date {
|
||||
background: var(--q-primary);
|
||||
color: var(--dp-primary-text-color);
|
||||
}
|
||||
|
||||
.datepicker .q-field__label {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__messages {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__native {
|
||||
padding-left: 5px;
|
||||
color: var(--q-primary) !important;
|
||||
}
|
||||
|
||||
.datepicker .q-field__prepend {
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__append {
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.datepicker .q-field__after {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc .fc-popover {
|
||||
z-index: 6000;
|
||||
}
|
||||
|
||||
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.subName {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.subInput {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
overflow: hidden;
|
||||
border-color: transparent !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
text-align: left;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
|
||||
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
.fc-theme-standard td,
|
||||
.fc-theme-standard th {
|
||||
border: 1px solid #ebe9f1;
|
||||
}
|
||||
|
||||
.textHover:hover {
|
||||
color: #f3faf6;
|
||||
}
|
||||
</style>
|
||||
895
src/modules/09_leave/components/05_Leave/DetailLeave.vue
Normal file
895
src/modules/09_leave/components/05_Leave/DetailLeave.vue
Normal file
|
|
@ -0,0 +1,895 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, computed } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
|
||||
/** importType */
|
||||
import type { FremData } from "@/modules/09_leave/interface/request/leave";
|
||||
import type { LeaveType } from "@/modules/09_leave/interface/response/leave";
|
||||
|
||||
/** importForm*/
|
||||
import DialogReason from "@/components/Dialogs/PopupReason.vue";
|
||||
import FormMain from "@/modules/09_leave/components/05_Leave/formDetail/formMain.vue"; // from ซ้าย
|
||||
import FormLeave from "@/modules/09_leave/components/05_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
|
||||
import FormChildbirth from "@/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
|
||||
import FormHoliday from "@/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
|
||||
import FormUpasom from "@/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
|
||||
import FormHajj from "@/modules/09_leave/components/05_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
|
||||
import FormCheckSelect from "@/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
|
||||
import FormStudy from "@/modules/09_leave/components/05_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
|
||||
import FormLeaveToTraining from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
|
||||
import FormLeaveToWorkInternational from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
|
||||
import FormSpouse from "@/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
|
||||
import FormVocationalRehabilitation from "@/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
|
||||
import WorkFlow from "@/components/Workflow/Main.vue";
|
||||
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
messageError,
|
||||
success,
|
||||
} = mixin;
|
||||
const stores = useLeavelistDataStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const paramsId = route.params.id.toString();
|
||||
const workflowRef = ref<any>(null);
|
||||
const modalApprove = ref(false);
|
||||
const typeDocx = ref<string>("docx");
|
||||
const typePdf = ref<string>("pdf");
|
||||
const dialogTitle = ref<string>("อนุมัติ");
|
||||
const dialogLabel = ref<string>("เหตุผล");
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formData = reactive<FremData>({
|
||||
id: "", //Id การยื่นขอลา
|
||||
reasonCommander: "", //เหตุผลผู้บังคับบัญชา
|
||||
reasonOligarch: "", //เหตุผลผู้มีอำนาจ
|
||||
positionName: "", //ตำแหน่งผู้ยื่นขอ
|
||||
positionLevelName: "", //ระดับผู้ยื่นขอ
|
||||
organizationName: "", //สังกัดผู้ยื่นขอ
|
||||
leaveTypeName: "", // Name ประเภทการลา
|
||||
leaveTypeId: "", //Id ประเภทการลา
|
||||
fullName: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: null, // วันที่ยื่นใบลา
|
||||
leaveDateStart: null, //วันเริ่มการลา
|
||||
leaveDateEnd: null, //วันสิ้นสุดการลา
|
||||
leaveCount: 0, //จำนวนวันลา
|
||||
status: "", //สถานะการของลา
|
||||
leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||
leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveTotal: 0, //จำนวนวันที่ลา(Auto)
|
||||
leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
|
||||
leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
|
||||
leaveSalary: "", //เงินเดือนปัจจุบัน(Auto)
|
||||
leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||
leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
|
||||
wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||
ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
|
||||
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
approveStep: "",
|
||||
dear: "",
|
||||
leaveRange: "",
|
||||
profileType: "",
|
||||
});
|
||||
|
||||
const isLoadData = ref<boolean>(false);
|
||||
|
||||
/**
|
||||
* Function fetch รายละเอียดของข้อมูล
|
||||
* @param paramsId รับ ID จาก paramID
|
||||
*/
|
||||
async function fetchDetailLeave(paramsId: string) {
|
||||
isLoadData.value = false;
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveListById(paramsId))
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
formData.id = data.id;
|
||||
formData.reasonCommander = data.reasonCommander
|
||||
? data.reasonCommander
|
||||
: "-";
|
||||
formData.reasonOligarch = data.reasonOligarch ? data.reasonOligarch : "-";
|
||||
formData.positionName = data.positionName ? data.positionName : "-";
|
||||
formData.positionLevelName = data.positionLevelName
|
||||
? data.positionLevelName
|
||||
: "-";
|
||||
formData.organizationName = data.organizationName
|
||||
? data.organizationName
|
||||
: "-";
|
||||
formData.leaveTypeName = data.leaveTypeName ? data.leaveTypeName : "-";
|
||||
formData.leaveTypeId = data.leaveTypeId ? data.leaveTypeId : "-";
|
||||
formData.fullName = data.fullName ? data.fullName : "-";
|
||||
formData.dateSendLeave =
|
||||
data.dateSendLeave && date2Thai(data.dateSendLeave);
|
||||
formData.leaveDateStart =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = data.leaveCount ? data.leaveCount : "0";
|
||||
formData.status = data.status && stores.convertSatatus(data.status);
|
||||
formData.leaveLimit = data.leaveLimit ? data.leaveLimit : "0";
|
||||
formData.leaveSummary = data.leaveSummary ? data.leaveSummary : "0";
|
||||
formData.leaveRemain = data.leaveRemain ? data.leaveRemain : "0";
|
||||
formData.leaveWrote = data.leaveWrote ? data.leaveWrote : "-";
|
||||
formData.leaveAddress = data.leaveAddress ? data.leaveAddress : "-";
|
||||
formData.leaveNumber = data.leaveNumber ? data.leaveNumber : "-";
|
||||
formData.leaveRange = data.leaveRange;
|
||||
formData.leaveDetail = data.leaveDetail ? data.leaveDetail : "-";
|
||||
formData.leaveDocument = data.leaveDocument;
|
||||
formData.leaveDraftDocument = data.leaveDraftDocument;
|
||||
formData.leaveLastStart =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastStart);
|
||||
formData.leaveLastEnd = data.leaveLastEnd && date2Thai(data.leaveLastEnd);
|
||||
formData.leaveTotal = data.leaveTotal ? data.leaveTotal : "0";
|
||||
formData.leavebirthDate =
|
||||
data.leaveBirthDate && date2Thai(data.leaveBirthDate);
|
||||
formData.leavegovernmentDate =
|
||||
data.leaveGovernmentDate && date2Thai(data.leaveGovernmentDate);
|
||||
formData.leaveSalary = data.leaveSalary
|
||||
? formattedNumber(data.leaveSalary)
|
||||
: "-";
|
||||
formData.leaveSalaryText = data.leaveSalaryText
|
||||
? data.leaveSalaryText
|
||||
: "-";
|
||||
formData.leaveTypeDay =
|
||||
data.leaveTypeDay && stores.convertLeaveDaytype(data.leaveTypeDay);
|
||||
formData.wifeDayName = data.wifeDayName ? data.wifeDayName : "-";
|
||||
formData.wifeDayDateBorn =
|
||||
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
|
||||
formData.restDayOldTotal = data.restDayOldTotal
|
||||
? data.restDayOldTotal
|
||||
: "0";
|
||||
formData.restDayCurrentTotal = data.restDayCurrentTotal
|
||||
? data.restDayCurrentTotal
|
||||
: "0";
|
||||
formData.ordainDayStatus = data.ordainDayStatus;
|
||||
formData.ordainDayLocationName = data.ordainDayLocationName
|
||||
? data.ordainDayLocationName
|
||||
: "-";
|
||||
formData.ordainDayLocationAddress = data.ordainDayLocationAddress
|
||||
? data.ordainDayLocationAddress
|
||||
: "-";
|
||||
formData.ordainDayLocationNumber = data.ordainDayLocationNumber
|
||||
? data.ordainDayLocationNumber
|
||||
: "-";
|
||||
formData.ordainDayOrdination =
|
||||
data.ordainDayOrdination && date2Thai(data.ordainDayOrdination);
|
||||
formData.ordainDayBuddhistLentName = data.ordainDayBuddhistLentName
|
||||
? data.ordainDayBuddhistLentName
|
||||
: "-";
|
||||
formData.ordainDayBuddhistLentAddress = data.ordainDayBuddhistLentAddress
|
||||
? data.ordainDayBuddhistLentAddress
|
||||
: "-";
|
||||
formData.hajjDayStatus = data.hajjDayStatus;
|
||||
formData.absentDaySummon = data.absentDaySummon
|
||||
? data.absentDaySummon
|
||||
: "-";
|
||||
formData.absentDayLocation = data.absentDayLocation
|
||||
? data.absentDayLocation
|
||||
: "-";
|
||||
formData.absentDayRegistorDate =
|
||||
data.absentDayRegistorDate && date2Thai(data.absentDayRegistorDate);
|
||||
formData.absentDayGetIn = data.absentDayGetIn ? data.absentDayGetIn : "-";
|
||||
formData.absentDayAt = data.absentDayAt ? data.absentDayAt : "-";
|
||||
formData.studyDaySubject = data.studyDaySubject
|
||||
? data.studyDaySubject
|
||||
: "-";
|
||||
formData.studyDayDegreeLevel = data.studyDayDegreeLevel
|
||||
? data.studyDayDegreeLevel
|
||||
: "-";
|
||||
formData.studyDayUniversityName = data.studyDayUniversityName
|
||||
? data.studyDayUniversityName
|
||||
: "-";
|
||||
formData.studyDayTrainingSubject = data.studyDayTrainingSubject
|
||||
? data.studyDayTrainingSubject
|
||||
: "-";
|
||||
formData.studyDayTrainingName = data.studyDayTrainingName
|
||||
? data.studyDayTrainingName
|
||||
: "-";
|
||||
formData.studyDayCountry = data.studyDayCountry
|
||||
? data.studyDayCountry
|
||||
: "-";
|
||||
formData.studyDayScholarship = data.studyDayScholarship
|
||||
? data.studyDayScholarship
|
||||
: "-";
|
||||
formData.coupleDayName = data.coupleDayName ? data.coupleDayName : "-";
|
||||
formData.coupleDayPosition = data.coupleDayPosition
|
||||
? data.coupleDayPosition
|
||||
: "-";
|
||||
formData.coupleDayLevel = data.coupleDayLevel ? data.coupleDayLevel : "-";
|
||||
formData.coupleDayLevelCountry = data.coupleDayLevelCountry
|
||||
? data.coupleDayLevelCountry
|
||||
: "-";
|
||||
formData.coupleDayCountryHistory = data.coupleDayCountryHistory
|
||||
? data.coupleDayCountryHistory
|
||||
: "-";
|
||||
formData.coupleDayTotalHistory = data.coupleDayTotalHistory
|
||||
? data.coupleDayTotalHistory
|
||||
: "-";
|
||||
formData.coupleDayStartDateHistory =
|
||||
data.coupleDayStartDateHistory &&
|
||||
date2Thai(data.coupleDayStartDateHistory);
|
||||
formData.coupleDayEndDateHistory =
|
||||
data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
|
||||
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory
|
||||
? data.coupleDaySumTotalHistory
|
||||
: "-";
|
||||
formData.approveStep = data.approveStep ? data.approveStep : "-";
|
||||
formData.dear = data.dear ? data.dear : "-";
|
||||
formData.profileType = data.profileType;
|
||||
|
||||
isLoadData.value = true;
|
||||
|
||||
/** ส่งประเภทของการลาไป Function เช็คประเภทการลา*/
|
||||
await fectOptionType();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
const leaveType = ref<LeaveType[]>();
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then((res) => {
|
||||
leaveType.value = res.data.result;
|
||||
checkLeaveType(formData.leaveTypeId, formData);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
/**Status Form การลา*/
|
||||
const checkForm = ref<string>("");
|
||||
/**
|
||||
* Function เช็คประเภทการลา
|
||||
* @param type รับค่า
|
||||
*/
|
||||
function checkLeaveType(leaveTypeId: string, formData: FremData) {
|
||||
if (leaveType.value) {
|
||||
const filtertype: LeaveType | undefined = leaveType.value.find(
|
||||
(e: any) => e.id === leaveTypeId
|
||||
);
|
||||
const type = filtertype?.code;
|
||||
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
|
||||
checkForm.value = "FormLeave";
|
||||
} else if (type === "LV-004") {
|
||||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "LV-005") {
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "LV-006" && formData.ordainDayLocationName !== "-") {
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (type === "LV-006") {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "LV-008" && formData.studyDayTrainingSubject === "-") {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "LV-008") {
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "LV-009") {
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
} else if (type === "LV-010") {
|
||||
checkForm.value = "FormSpouse";
|
||||
} else if (type === "LV-011") {
|
||||
checkForm.value = "FormVocationalRehabilitation";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Function dialog*/
|
||||
async function openModal(data: string) {
|
||||
if (data === "approve") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "อนุมัติ";
|
||||
}
|
||||
if (data === "UnApprove") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "ไม่อนุมัติ";
|
||||
}
|
||||
if (data === "authority") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "ความคิดเห็นของผู้บังคับบัญชา";
|
||||
dialogLabel.value = "ความคิดเห็น";
|
||||
}
|
||||
}
|
||||
|
||||
/** function ส่งไปผู้บังคับบัญชา*/
|
||||
function sendToCommand() {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {},
|
||||
"ยืนยันการส่งไปผู้บังคับบัญชา",
|
||||
"ต้องการยืนยันการส่งไปผู้บังคับบัญชานี้ใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
|
||||
/** Function Save */
|
||||
function clickSave(reason: string) {
|
||||
const body = {
|
||||
reason: reason,
|
||||
};
|
||||
|
||||
if (dialogTitle.value === "อนุมัติ") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.leaveApprove(formData.id), body)
|
||||
.then(async () => {
|
||||
await fetchDetailLeave(paramsId);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modalApprove.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันอนุมัติ",
|
||||
"ต้องการยืนยันอนุมัติใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
if (dialogTitle.value === "ไม่อนุมัติ") {
|
||||
//leaveReject
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.put(config.API.leaveReject(formData.id), body)
|
||||
.then(async () => {
|
||||
await fetchDetailLeave(paramsId);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modalApprove.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันไม่อนุมัติ",
|
||||
"ต้องการยืนยันไม่อนุมัติใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
if (dialogTitle.value === "ความคิดเห็นของผู้บังคับบัญชา") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveApproveToComander(formData.id))
|
||||
.then(async () => {
|
||||
await http
|
||||
.put(config.API.leaveComanderApprove(formData.id), body)
|
||||
.then(async () => {
|
||||
await fetchDetailLeave(paramsId);
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
modalApprove.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
hideLoader();
|
||||
});
|
||||
},
|
||||
"ยืนยันการแสดงความคิดเห็นของผู้บังคับบัญชา",
|
||||
"ต้องการยืนยันการแสดงความคิดเห็นของผู้บังคับบัญชานี้ใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function onClickDownloadFile(id: string, fileName: string, type: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReport(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName, type);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
|
||||
function formattedNumber(x: number) {
|
||||
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||
}
|
||||
|
||||
const isCheckData = computed(() => {
|
||||
if (formData.reasonCommander !== "-" && formData.reasonOligarch !== "-") {
|
||||
return true;
|
||||
} else return false;
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
if (paramsId) {
|
||||
await fetchDetailLeave(paramsId);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<div class="q-mr-lg">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave`)"
|
||||
/>
|
||||
รายละเอียดการลาของ{{ formData.fullName }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
onClickDownloadFile(
|
||||
formData.id,
|
||||
checkForm !== 'FormUpasom' && checkForm !== 'FormHajj'
|
||||
? formData.leaveTypeName
|
||||
: formData.hajjDayStatus
|
||||
? 'ลาประกอบพิธีฮัจญ์'
|
||||
: 'ลาอุปสมบท',
|
||||
typeDocx
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .DOCX</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
onClickDownloadFile(
|
||||
formData.id,
|
||||
checkForm !== 'FormUpasom' && checkForm !== 'FormHajj'
|
||||
? formData.leaveTypeName
|
||||
: formData.hajjDayStatus
|
||||
? 'ลาประกอบพิธีฮัจญ์'
|
||||
: 'ลาอุปสมบท',
|
||||
typePdf
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-sm">
|
||||
<q-card flat bordered class="col-12 q-mt-sm">
|
||||
<div class="col-12 row q-py-md q-pl-md">
|
||||
<div class="col-12 q-col-gutter-md">
|
||||
<!-- ประเภทการลา -->
|
||||
<div class="row col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md col-12">
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<div class="col-xs-12 col-sm-5 row items-center q-my-xs">
|
||||
<div class="col-12 row">
|
||||
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
|
||||
<div class="col text-primary">
|
||||
{{
|
||||
checkForm !== "FormUpasom" && checkForm !== "FormHajj"
|
||||
? formData.leaveTypeName
|
||||
: formData.hajjDayStatus
|
||||
? "ลาประกอบพิธีฮัจญ์"
|
||||
: "ลาอุปสมบท"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-xs-5 col-sm-3 text-grey-8">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col text-weight-medium">
|
||||
{{ formData.fullName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<div class="row col-12 q-gutter-md">
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-blue-10">
|
||||
{{ formData.leaveLimit }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ได้รับ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveSummary }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">
|
||||
{{ formData.leaveRemain }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">คงเหลือ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ข้อมูลการลา -->
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<!-- ข้อมูลซ้าย -->
|
||||
<div class="col-xs-12 col-sm-5 row">
|
||||
<!-- card ซ้าย -->
|
||||
<q-card flat bordered class="col-12">
|
||||
<FormMain :data="formData" :checkForm="checkForm" />
|
||||
</q-card>
|
||||
</div>
|
||||
<!-- ข้อมูลขวา -->
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<q-card flat bordered class="col-12">
|
||||
<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
|
||||
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
|
||||
|
||||
<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
|
||||
<FormChildbirth
|
||||
v-else-if="checkForm === 'FormChildbirth'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาพักผ่อน -->
|
||||
<FormHoliday
|
||||
v-else-if="checkForm === 'FormHoliday'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาอุปสมบท -->
|
||||
<FormUpasom
|
||||
v-else-if="checkForm === 'FormUpasom'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาประกอบพิธีฮัจญ์ -->
|
||||
<FormHajj
|
||||
v-else-if="checkForm === 'FormHajj'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
|
||||
<FormCheckSelect
|
||||
v-else-if="checkForm === 'FormCheckSelect'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปศึกษา -->
|
||||
<FormStudy
|
||||
v-else-if="checkForm === 'FormStudy'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
|
||||
<FormLeaveToTraining
|
||||
v-else-if="checkForm === 'FormLeaveToTraining'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
|
||||
<FormLeaveToWorkInternational
|
||||
v-else-if="checkForm === 'FormLeaveToWorkInternational'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาติดตามคู่สมรส -->
|
||||
<FormSpouse
|
||||
v-else-if="checkForm === 'FormSpouse'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
|
||||
<FormVocationalRehabilitation
|
||||
v-else-if="checkForm === 'FormVocationalRehabilitation'"
|
||||
:data="formData"
|
||||
/>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ความคิดเห็นของผู้บังคับบัญชา -->
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div class="bg-grey-1 q-pa-sm col-12 row items-center">
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ความคิดเห็นของผู้บังคับบัญชา
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
workflowRef?.permission.isUpdate &&
|
||||
checkPermission($route)?.attrIsUpdate &&
|
||||
formData.reasonCommander === '-'
|
||||
"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ความคิดเห็นของผู้บังคับบัญชา"
|
||||
@click="openModal('authority')"
|
||||
><q-tooltip>ความคิดเห็นของผู้บังคับบัญชา</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-detail">
|
||||
{{ formData.reasonCommander }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ความคิดเห็นของผู้มีอำนาจ -->
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card bordered class="row col-12 text-dark">
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ความคิดเห็นของผู้มีอำนาจ
|
||||
</div>
|
||||
<q-space />
|
||||
|
||||
<div
|
||||
class="row q-gutter-sm"
|
||||
v-if="
|
||||
workflowRef?.permission.isUpdate &&
|
||||
checkPermission($route)?.attrIsUpdate &&
|
||||
formData.reasonOligarch === '-'
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ไม่อนุมัติ"
|
||||
@click="openModal('UnApprove')"
|
||||
><q-tooltip>ไม่อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- v-if="
|
||||
formData.approveStep === 'st3' &&
|
||||
formData.status !== 'ยกเลิก' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
" -->
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
label="อนุมัติ"
|
||||
@click="openModal('approve')"
|
||||
><q-tooltip>อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12"><q-separator /></div>
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ผลการพิจารณา
|
||||
</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{
|
||||
formData.reasonOligarch !== "-"
|
||||
? formData.status
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ความคิดเห็น
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-detail">
|
||||
{{ formData.reasonOligarch }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow -->
|
||||
<div class="col-xs-12 col-sm-12" v-if="isLoadData">
|
||||
<WorkFlow
|
||||
ref="workflowRef"
|
||||
:id="paramsId"
|
||||
v-model:is-check-data="isCheckData"
|
||||
:sys-name="
|
||||
formData.profileType === 'OFFICER'
|
||||
? 'SYS_LEAVE_LIST'
|
||||
: 'SYS_LEAVE_LIST_EMP'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <q-separator v-if="checkPermission($route)?.attrIsUpdate" /> -->
|
||||
<!-- <div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn
|
||||
v-if="
|
||||
formData.approveStep === 'st1' &&
|
||||
formData.status !== 'ยกเลิก' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ส่งไปยังผู้บังคับบัญชา"
|
||||
@click="sendToCommand"
|
||||
><q-tooltip>ส่งไปยังผู้บังคับบัญชา</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
formData.approveStep === 'st2' &&
|
||||
formData.status !== 'ยกเลิก' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ส่งไปยังผู้มีอำนาจ"
|
||||
@click="openModal('authority')"
|
||||
><q-tooltip>ส่งไปยังผู้มีอำนาจ</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<q-btn
|
||||
v-if="
|
||||
formData.approveStep === 'st3' &&
|
||||
formData.status !== 'ยกเลิก' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ไม่อนุมัติ"
|
||||
@click="openModal('UnApprove')"
|
||||
><q-tooltip>ไม่อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="
|
||||
formData.approveStep === 'st3' &&
|
||||
formData.status !== 'ยกเลิก' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
unelevated
|
||||
color="primary"
|
||||
label="อนุมัติ"
|
||||
@click="openModal('approve')"
|
||||
><q-tooltip>อนุมัติ</q-tooltip>
|
||||
</q-btn>
|
||||
</div> -->
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogReason
|
||||
v-model:modal="modalApprove"
|
||||
:title="dialogTitle"
|
||||
:label="dialogLabel"
|
||||
:savaForm="clickSave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.font-size {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
770
src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
Normal file
770
src/modules/09_leave/components/05_Leave/DetailLeaveReject.vue
Normal file
|
|
@ -0,0 +1,770 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import genReport from "@/plugins/genreport";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
|
||||
/** importType */
|
||||
import type {
|
||||
LeaveType,
|
||||
FormReject,
|
||||
} from "@/modules/09_leave/interface/response/leave";
|
||||
import type { FremData } from "@/modules/09_leave/interface/request/leave";
|
||||
|
||||
/** importForm*/
|
||||
import DialogReason from "@/components/Dialogs/PopupReason.vue";
|
||||
import FormMain from "@/modules/09_leave/components/05_Leave/formDetail/formMain.vue"; // from ซ้าย
|
||||
import FormLeave from "@/modules/09_leave/components/05_Leave/formDetail/formLeave.vue"; // ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว
|
||||
import FormChildbirth from "@/modules/09_leave/components/05_Leave/formDetail/formChildbirth.vue"; // ลาไปช่วยเหลือภริยาที่คลอดบุตร
|
||||
import FormHoliday from "@/modules/09_leave/components/05_Leave/formDetail/formHoliday.vue"; //ลาพักผ่อน
|
||||
import FormUpasom from "@/modules/09_leave/components/05_Leave/formDetail/formUpasom.vue"; // ลาอุปสมบท
|
||||
import FormHajj from "@/modules/09_leave/components/05_Leave/formDetail/formHajj.vue"; //ลาประกอบพิธีฮัจญ์
|
||||
import FormCheckSelect from "@/modules/09_leave/components/05_Leave/formDetail/formCheckSelect.vue"; //ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล
|
||||
import FormStudy from "@/modules/09_leave/components/05_Leave/formDetail/formStudy.vue"; //ลาไปศึกษา
|
||||
import FormLeaveToTraining from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToTraining.vue"; // ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน
|
||||
import FormLeaveToWorkInternational from "@/modules/09_leave/components/05_Leave/formDetail/formLeaveToWorkInternational.vue"; // ลาไปปฏิบัติงานในองค์การระหว่างประเทศ
|
||||
import FormSpouse from "@/modules/09_leave/components/05_Leave/formDetail/formSpouse.vue"; // ลาติดตามคู่สมรส
|
||||
import FormVocationalRehabilitation from "@/modules/09_leave/components/05_Leave/formDetail/formVocationalRehabilitation.vue"; //ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ
|
||||
import WorkFlow from "@/components/Workflow/Main.vue";
|
||||
|
||||
/** use */
|
||||
const $q = useQuasar();
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
dialogConfirm,
|
||||
showLoader,
|
||||
hideLoader,
|
||||
date2Thai,
|
||||
messageError,
|
||||
success,
|
||||
} = mixin;
|
||||
const stores = useLeavelistDataStore();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const paramsId = route.params.id.toString();
|
||||
|
||||
const typeDocx = ref<string>("docx");
|
||||
const typePdf = ref<string>("pdf");
|
||||
const modalApprove = ref(false);
|
||||
const dialogTitleUnapprove = ref<string>("ไม่อนุมัติ");
|
||||
const dialogTitle = ref<string>("อนุมัติ");
|
||||
|
||||
/** ฟังก์ชั่น อัปโหลด
|
||||
* consolelog ไว้ก่อน
|
||||
*/
|
||||
const filesUpload = ref<any>(null);
|
||||
function upLoadFile() {
|
||||
console.log("upload", filesUpload.value);
|
||||
}
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formDataReject = reactive<FormReject>({
|
||||
id: "", //*Id การยื่นขอลา
|
||||
leaveTypeName: "", //Name ประเภทการลา
|
||||
fullName: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
status: "", //สถานะการของลา
|
||||
leaveDocDelete: "", //เอกสารการยกเลิกการลา
|
||||
leaveReasonDelete: "", //เหตุผลการยกเลิกการลา
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveTotal: 0, //จำนวนวันที่ลา
|
||||
leaveStartDate: new Date(), //วัน เดือน ปีเริ่มต้นลา
|
||||
leaveEndDate: new Date(), //วัน เดือน ปีสิ้นสุดลา
|
||||
});
|
||||
|
||||
const formData = reactive<FremData>({
|
||||
id: "", //Id การยื่นขอลา
|
||||
reasonCommander: "", //เหตุผลผู้บังคับบัญชา
|
||||
reasonOligarch: "", //เหตุผลผู้มีอำนาจ
|
||||
positionName: "", //ตำแหน่งผู้ยื่นขอ
|
||||
positionLevelName: "", //ระดับผู้ยื่นขอ
|
||||
organizationName: "", //สังกัดผู้ยื่นขอ
|
||||
leaveTypeName: "", // Name ประเภทการลา
|
||||
leaveTypeId: "", //Id ประเภทการลา
|
||||
fullName: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: null, // วันที่ยื่นใบลา
|
||||
leaveDateStart: null, //วันเริ่มการลา
|
||||
leaveDateEnd: null, //วันสิ้นสุดการลา
|
||||
leaveCount: 0, //จำนวนวันลา
|
||||
status: "", //สถานะการของลา
|
||||
leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: "", //รายละเอียดการลา
|
||||
leaveDocument: "", //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveDraftDocument: "", //อัปโหลดแบบฟอร์มการลา
|
||||
leaveLastStart: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastEnd: new Date(), //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveTotal: 0, //จำนวนวันที่ลา(Auto)
|
||||
leavebirthDate: new Date(), //วันเดือนปีเกิด(Auto)
|
||||
leavegovernmentDate: new Date(), //วันที่เข้ารับราชการ(Auto)
|
||||
leaveSalary: "", //เงินเดือนปัจจุบัน(Auto)
|
||||
leaveSalaryText: "", //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||
leaveTypeDay: "", //ประเภทการลาในวันนั้นเช่น
|
||||
wifeDayName: "", //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||
ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจญ์ (ให้เลือก) (ลาประกอบพิธีฮัจญ์)
|
||||
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayGetIn: "", //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayAt: "", //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
studyDaySubject: "", //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayDegreeLevel: "", //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayUniversityName: "", //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingSubject: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingName: "", //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayCountry: "", //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayScholarship: "", //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
coupleDayName: "", //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayPosition: "", //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevel: "", //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevelCountry: "", //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayCountryHistory: "", //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayTotalHistory: "", //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
coupleDayStartDateHistory: new Date(), //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: new Date(), //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: "", //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
approveStep: "",
|
||||
dear: "",
|
||||
profileType: "",
|
||||
});
|
||||
|
||||
const isLoadData = ref<boolean>(false);
|
||||
|
||||
onMounted(async () => {
|
||||
if (paramsId) {
|
||||
showLoader();
|
||||
Promise.all([
|
||||
fetchDetailDeleteLeave(paramsId),
|
||||
fetchDetailLeave(paramsId),
|
||||
]).finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Function fetch รายละเอียดของข้อมูล
|
||||
* @param paramsId รับ ID จาก paramID
|
||||
*/
|
||||
async function fetchDetailDeleteLeave(paramsId: string) {
|
||||
await http
|
||||
.get(config.API.leaveListDeleteByid(paramsId))
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
formDataReject.id = data.id;
|
||||
formDataReject.leaveTypeName = data.leaveTypeName;
|
||||
formDataReject.fullName = data.fullName;
|
||||
formDataReject.status = data.status;
|
||||
formDataReject.leaveDocDelete = data.leaveDocDelete;
|
||||
formDataReject.leaveReasonDelete = data.leaveReasonDelete
|
||||
? data.leaveReasonDelete
|
||||
: "-";
|
||||
formDataReject.leaveWrote = data.leaveWrote;
|
||||
formDataReject.leaveAddress = data.leaveAddress;
|
||||
formDataReject.leaveNumber = data.leaveNumber;
|
||||
formDataReject.leaveDetail = data.leaveDetail;
|
||||
formDataReject.leaveTotal = data.leaveTotal;
|
||||
formDataReject.leaveStartDate = data.leaveStartDate;
|
||||
formDataReject.leaveEndDate = data.leaveEndDate;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
async function fetchDetailLeave(paramsId: string) {
|
||||
isLoadData.value = false;
|
||||
await http
|
||||
.get(config.API.leaveListById(paramsId))
|
||||
.then(async (res) => {
|
||||
const data = await res.data.result;
|
||||
formData.id = data.id;
|
||||
formData.reasonCommander = data.reasonCommander;
|
||||
formData.reasonOligarch = data.reasonOligarch;
|
||||
formData.positionName = data.positionName;
|
||||
formData.positionLevelName = data.positionLevelName;
|
||||
formData.organizationName = data.organizationName;
|
||||
formData.leaveTypeName = data.leaveTypeName;
|
||||
formData.leaveTypeId = data.leaveTypeId;
|
||||
formData.fullName = data.fullName;
|
||||
formData.dateSendLeave =
|
||||
data.dateSendLeave && date2Thai(data.dateSendLeave);
|
||||
formData.leaveDateStart =
|
||||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = data.leaveCount;
|
||||
formData.status = data.status && data.status;
|
||||
formData.leaveLimit = data.leaveLimit;
|
||||
formData.leaveSummary = data.leaveSummary;
|
||||
formData.leaveRemain = data.leaveRemain;
|
||||
formData.leaveWrote = data.leaveWrote;
|
||||
formData.leaveAddress = data.leaveAddress;
|
||||
formData.leaveNumber = data.leaveNumber;
|
||||
formData.leaveDetail = data.leaveDetail;
|
||||
formData.leaveDocument = data.leaveDocument;
|
||||
formData.leaveDraftDocument = data.leaveDraftDocument;
|
||||
formData.leaveLastStart =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastStart);
|
||||
formData.leaveLastEnd =
|
||||
data.leaveLastStart && date2Thai(data.leaveLastEnd);
|
||||
formData.leaveTotal = data.leaveTotal;
|
||||
formData.leavebirthDate =
|
||||
data.leavebirthDate && date2Thai(data.leavebirthDate);
|
||||
formData.leavegovernmentDate =
|
||||
data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
|
||||
formData.leaveSalary = data.leaveSalary;
|
||||
formData.leaveSalaryText = data.leaveSalaryText;
|
||||
formData.leaveTypeDay =
|
||||
data.leaveTypeDay && stores.convertLeaveDaytype(data.leaveTypeDay);
|
||||
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 ? data.dear : "-";
|
||||
formData.profileType = data.profileType;
|
||||
isLoadData.value = true;
|
||||
await fectOptionType();
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
const leaveType = ref<LeaveType[]>();
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then((res) => {
|
||||
leaveType.value = res.data.result;
|
||||
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**Status Form การลา*/
|
||||
const checkForm = ref<string>("");
|
||||
/**
|
||||
* Function เช็คประเภทการลา
|
||||
* @param type รับค่า
|
||||
*/
|
||||
function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
|
||||
if (leaveType.value) {
|
||||
const filtertype: LeaveType | undefined = leaveType.value.find(
|
||||
(e: any) => e.id === leaveTypeId
|
||||
);
|
||||
const type = filtertype?.code;
|
||||
if (type === "LV-001" || type === "LV-002" || type === "LV-003") {
|
||||
checkForm.value = "FormLeave";
|
||||
} else if (type === "LV-004") {
|
||||
checkForm.value = "FormChildbirth";
|
||||
} else if (type === "LV-005") {
|
||||
checkForm.value = "FormHoliday";
|
||||
} else if (type === "LV-006") {
|
||||
checkForm.value = "FormUpasom";
|
||||
} else if (type === "LV-006" && leaveTypeName === "พิธีฮัจญ์ฯ") {
|
||||
checkForm.value = "FormHajj";
|
||||
} else if (type === "LV-007") {
|
||||
checkForm.value = "FormCheckSelect";
|
||||
} else if (type === "LV-008" && leaveTypeName === "ลาไปศีกษา") {
|
||||
checkForm.value = "FormStudy";
|
||||
} else if (type === "LV-008") {
|
||||
checkForm.value = "FormLeaveToTraining";
|
||||
} else if (type === "LV-009") {
|
||||
checkForm.value = "FormLeaveToWorkInternational";
|
||||
} else if (type === "LV-010") {
|
||||
checkForm.value = "FormSpouse";
|
||||
} else if (type === "LV-011") {
|
||||
checkForm.value = "FormVocationalRehabilitation";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Function dialog*/
|
||||
const openModal = async (data: string) => {
|
||||
if (data === "approve") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "อนุมัติการยกเลิก";
|
||||
}
|
||||
if (data === "UnApprove") {
|
||||
modalApprove.value = true;
|
||||
dialogTitle.value = "ไม่อนุมัติการยกเลิก";
|
||||
}
|
||||
};
|
||||
|
||||
/** Function Save*/
|
||||
function clickSave(reason: string) {
|
||||
const body = {
|
||||
reason: reason,
|
||||
};
|
||||
if (dialogTitle.value === "อนุมัติการยกเลิก") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await http
|
||||
.put(config.API.leaveDeleteApprove(formDataReject.id), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchDetailDeleteLeave(paramsId);
|
||||
modalApprove.value = false;
|
||||
});
|
||||
},
|
||||
"ยืนยันการอนุมัติการยกเลิก",
|
||||
"ต้องการยืนยันการอนุมัติการยกเลิกใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
if (dialogTitle.value === "ไม่อนุมัติการยกเลิก") {
|
||||
dialogConfirm(
|
||||
$q,
|
||||
async () => {
|
||||
await http
|
||||
.put(config.API.leaveDeleteReject(formDataReject.id), body)
|
||||
.then(() => {
|
||||
success($q, "บันทึกข้อมูลสำเร็จ");
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(async () => {
|
||||
await fetchDetailDeleteLeave(paramsId);
|
||||
modalApprove.value = false;
|
||||
});
|
||||
},
|
||||
"ยืนยันไม่อนุมัติการยกเลิก",
|
||||
"ต้องการยืนยันไม่อนุมัติการยกเลิกใช่หรือไม่ ?"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
async function onClickDownloadFile(id: string, fileName: string, type: string) {
|
||||
showLoader();
|
||||
await http
|
||||
.get(config.API.leaveReportReject(id))
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
await genReport(data, fileName, type);
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toptitle text-dark col-12 row items-center">
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<div class="q-mr-lg">
|
||||
<q-btn
|
||||
icon="mdi-arrow-left"
|
||||
unelevated
|
||||
round
|
||||
dense
|
||||
flat
|
||||
color="primary"
|
||||
class="q-mr-sm"
|
||||
@click="router.push(`/leave`)"
|
||||
/>
|
||||
รายละเอียดการขอยกเลิกของ {{ formData.fullName }}
|
||||
</div>
|
||||
<div>
|
||||
<q-btn class="q-mr-sm" icon="mdi-download" round color="primary" flat>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
onClickDownloadFile(
|
||||
formData.id,
|
||||
'ยกเลิก' + formData.leaveTypeName,
|
||||
typeDocx
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="blue" name="mdi-file-word"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .DOCX</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="
|
||||
onClickDownloadFile(
|
||||
formData.id,
|
||||
'ยกเลิก' + formData.leaveTypeName,
|
||||
typePdf
|
||||
)
|
||||
"
|
||||
>
|
||||
<q-item-section avatar
|
||||
><q-icon color="red" name="mdi-file-pdf"
|
||||
/></q-item-section>
|
||||
<q-item-section>ไฟล์ .PDF</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
<q-space />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="q-pa-sm">
|
||||
<q-card flat bordered class="col-12">
|
||||
<div class="col-12 row q-py-md q-pl-md">
|
||||
<div class="col-12 q-col-gutter-md">
|
||||
<div class="col-xs-12 col-sm-12 row">
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
รายละเอียดการขอยกเลิก
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">เขียนที่</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ formDataReject.leaveWrote }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">วันที่</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ date2Thai(formDataReject.leaveStartDate) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">เหตุผล</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ formDataReject.leaveReasonDelete }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
เอกสารประกอบ
|
||||
</div>
|
||||
<div class="col-12 text-detail">
|
||||
<q-btn
|
||||
v-if="formDataReject.leaveDocDelete"
|
||||
:href="formDataReject.leaveDocDelete"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
<span v-else>-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="row col-12">
|
||||
<q-card bordered class="bg-grey-1 q-pa-md col-12">
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<div class="col-xs-12 col-sm-5 row items-center q-my-xs">
|
||||
<div class="col-12 row">
|
||||
<div class="col-xs-5 col-sm-3 text-grey-8">ประเภทการลา</div>
|
||||
<div class="col text-primary">
|
||||
{{ formData.leaveTypeName }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 row">
|
||||
<div class="col-xs-5 col-sm-3 text-grey-8">
|
||||
ชื่อ-นามสกุล
|
||||
</div>
|
||||
<div class="col text-weight-medium">
|
||||
{{ formData.fullName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<div class="row col-12 q-gutter-md">
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-blue-10">
|
||||
{{ formData.leaveLimit }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ได้รับ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-light-blue-6">
|
||||
{{ formData.leaveSummary }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">ใช้ไป</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
<div
|
||||
v-if="formData.leaveTypeName == 'ลาพักผ่อน'"
|
||||
class="col-3"
|
||||
>
|
||||
<q-card bordered class="items-center row col-12 q-pa-md">
|
||||
<div class="text-h6 text-weight-bold text-indigo-7">
|
||||
{{ formData.leaveRemain }}
|
||||
</div>
|
||||
<div class="col-12 text-subtitle2 text-weight-regular">
|
||||
<span class="gt-xs">คงเหลือ</span>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="row q-col-gutter-md col-12">
|
||||
<div class="col-xs-12 col-sm-5 row">
|
||||
<!-- card ซ้าย -->
|
||||
<q-card flat bordered class="col-12">
|
||||
<FormMain :data="formData" />
|
||||
</q-card>
|
||||
</div>
|
||||
<!-- ข้อมูลการลา -->
|
||||
<div class="col-xs-12 col-sm-7 row">
|
||||
<q-card flat bordered class="col-12">
|
||||
<!-- ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว -->
|
||||
<FormLeave v-if="checkForm === 'FormLeave'" :data="formData" />
|
||||
|
||||
<!-- ลาไปช่วยเหลือภริยาที่คลอดบุตร -->
|
||||
<FormChildbirth
|
||||
v-else-if="checkForm === 'FormChildbirth'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาพักผ่อน -->
|
||||
<FormHoliday
|
||||
v-else-if="checkForm === 'FormHoliday'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาอุปสมบท -->
|
||||
<FormUpasom
|
||||
v-else-if="checkForm === 'FormUpasom'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาประกอบพิธีฮัจญ์ -->
|
||||
<FormHajj
|
||||
v-else-if="checkForm === 'FormHajj'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล -->
|
||||
<FormCheckSelect
|
||||
v-else-if="checkForm === 'FormCheckSelect'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปศึกษา -->
|
||||
<FormStudy
|
||||
v-else-if="checkForm === 'FormStudy'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน -->
|
||||
<FormLeaveToTraining
|
||||
v-else-if="checkForm === 'FormLeaveToTraining'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปปฏิบัติงานในองค์การระหว่างประเทศ -->
|
||||
<FormLeaveToWorkInternational
|
||||
v-else-if="checkForm === 'FormLeaveToWorkInternational'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาติดตามคู่สมรส -->
|
||||
<FormSpouse
|
||||
v-else-if="checkForm === 'FormSpouse'"
|
||||
:data="formData"
|
||||
/>
|
||||
|
||||
<!-- ลาไปฟื้นฟูสมรรถภาพด้านอาชีพ -->
|
||||
<FormVocationalRehabilitation
|
||||
v-else-if="checkForm === 'FormVocationalRehabilitation'"
|
||||
:data="formData"
|
||||
/>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- ความคิดเห็นของผู้มีอำนาจ -->
|
||||
<div
|
||||
class="col-xs-12 col-sm-12 row"
|
||||
v-if="formDataReject.status !== 'NEW'"
|
||||
>
|
||||
<q-card bordered class="row col-12 text-dark q-mt-sm">
|
||||
<div
|
||||
class="bg-grey-1 q-pa-sm col-12 row items-center text-primary"
|
||||
>
|
||||
<div class="q-pl-sm text-weight-bold text-dark">
|
||||
ความคิดเห็นของผู้มีอำนาจ
|
||||
</div>
|
||||
</div>
|
||||
<q-separator />
|
||||
<div class="row col-12 q-pa-md">
|
||||
<div class="col-12 row bg-white q-col-gutter-md">
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ผลการพิจารณา
|
||||
</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ stores.convertSatatus(formDataReject.status) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6 row items-start">
|
||||
<div class="col-12 text-weight-bold text-top">
|
||||
ความคิดเห็น
|
||||
</div>
|
||||
<div class="col-12 text-detail">
|
||||
{{ formDataReject.leaveReasonDelete }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Workflow -->
|
||||
<div class="col-xs-12 col-sm-12" v-if="isLoadData">
|
||||
<WorkFlow
|
||||
ref="workflowRef"
|
||||
:id="paramsId"
|
||||
:sys-name="
|
||||
formData.profileType === 'OFFICER'
|
||||
? 'SYS_LEAVE_LIST'
|
||||
: 'SYS_LEAVE_LIST_EMP'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<q-separator v-if="checkPermission($route)?.attrIsUpdate" />
|
||||
<div class="row q-pa-md q-gutter-md justify-end">
|
||||
<q-btn
|
||||
v-if="
|
||||
formDataReject.status === 'NEW' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
unelevated
|
||||
color="orange-5"
|
||||
label="ไม่อนุมัติการยกเลิก"
|
||||
@click="openModal('UnApprove')"
|
||||
><q-tooltip>ไม่อนุมัติการยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
v-if="
|
||||
formDataReject.status === 'NEW' &&
|
||||
checkPermission($route)?.attrIsUpdate
|
||||
"
|
||||
unelevated
|
||||
color="primary"
|
||||
label="อนุมัติการยกเลิก"
|
||||
@click="openModal('approve')"
|
||||
><q-tooltip>อนุมัติการยกเลิก</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<DialogReason
|
||||
v-model:modal="modalApprove"
|
||||
:title="dialogTitle"
|
||||
label="เหตุผล"
|
||||
:savaForm="clickSave"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.font-size {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
</style>
|
||||
159
src/modules/09_leave/components/05_Leave/Tab1.vue
Normal file
159
src/modules/09_leave/components/05_Leave/Tab1.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
/**importType*/
|
||||
import type { QuerySting } from "@/modules/09_leave/interface/request/leave";
|
||||
|
||||
import TableList from "@/modules/09_leave/components/05_Leave/TableList.vue";
|
||||
import ToolBar from "@/modules/09_leave/components/05_Leave/ToolBarLeave.vue";
|
||||
import CalendarView from "@/modules/09_leave/components/05_Leave/Calendar.vue";
|
||||
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const dataToobar = ref<any[]>([]);
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
|
||||
const querySting = reactive<QuerySting>({
|
||||
year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: leaveStore.filter.type, //*Id ประเภทการลา
|
||||
status: leaveStore.filter.status, //*สถานะการของลา
|
||||
page: 1, //*สถานะการของลา
|
||||
pageSize: 10, //*สถานะการของลา
|
||||
keyword: leaveStore.filter.keyword, //keyword ค้นหา
|
||||
});
|
||||
|
||||
//** เรียกข้อมูลจาก API*/
|
||||
async function fecthLeaveList() {
|
||||
leaveStore.rows = [];
|
||||
querySting.status = await (querySting.status == null
|
||||
? "ALL"
|
||||
: querySting.status);
|
||||
querySting.type = await (querySting.type == null
|
||||
? "00000000-0000-0000-0000-000000000000"
|
||||
: querySting.type);
|
||||
|
||||
if (querySting.status != null && querySting.type != null) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveList(), querySting)
|
||||
.then(async (res) => {
|
||||
const data = res.data.result;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / querySting.pageSize
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
await leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** function เรียกข้อมูลสถานะ*/
|
||||
async function fetchOption() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then((res) => {
|
||||
dataToobar.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
function getSearch() {
|
||||
querySting.page = 1;
|
||||
fecthLeaveList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => querySting.pageSize,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => leaveStore.tabView,
|
||||
async () => {
|
||||
leaveStore.tabView === "list" &&
|
||||
(await Promise.all([fetchOption(), fecthLeaveList()]));
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchOption(), fecthLeaveList()]);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-toolbar class="text-primary" style="padding: 0">
|
||||
<q-space />
|
||||
<q-btn
|
||||
name="list"
|
||||
round
|
||||
size="12px"
|
||||
flat
|
||||
icon="mdi-format-list-bulleted"
|
||||
@click="leaveStore.tabView = 'list'"
|
||||
:color="leaveStore.tabView == 'list' ? 'primary' : 'grey-6'"
|
||||
class="q-ml-sm"
|
||||
>
|
||||
<q-tooltip>รายการ</q-tooltip>
|
||||
</q-btn>
|
||||
<q-separator vertical inset />
|
||||
<q-tabs
|
||||
v-model="leaveStore.tabView"
|
||||
indicator-color="transparent"
|
||||
align="left"
|
||||
active-color="activetab"
|
||||
class="text-nativetab"
|
||||
inline-label
|
||||
dense
|
||||
>
|
||||
<q-btn
|
||||
name="calendar"
|
||||
round
|
||||
size="12px"
|
||||
flat
|
||||
icon="mdi-calendar-month"
|
||||
@click="leaveStore.tabView = 'calendar'"
|
||||
:color="leaveStore.tabView == 'calendar' ? 'primary' : 'grey-6'"
|
||||
class="q-mr-sm"
|
||||
>
|
||||
<q-tooltip>ปฏิทิน</q-tooltip>
|
||||
</q-btn>
|
||||
</q-tabs>
|
||||
</q-toolbar>
|
||||
<div v-if="leaveStore.tabView === 'list'">
|
||||
<ToolBar
|
||||
:dataToobar="dataToobar"
|
||||
v-model:query-sting="querySting"
|
||||
:get-list="fecthLeaveList"
|
||||
:get-search="getSearch"
|
||||
/>
|
||||
<TableList
|
||||
v-model:total="total"
|
||||
v-model:total-list="totalList"
|
||||
v-model:pagination="querySting"
|
||||
:dataToobar="dataToobar"
|
||||
:getList="fecthLeaveList"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
112
src/modules/09_leave/components/05_Leave/Tab2.vue
Normal file
112
src/modules/09_leave/components/05_Leave/Tab2.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
/**importType*/
|
||||
import type {
|
||||
QuerySting,
|
||||
DateFilter,
|
||||
} from "@/modules/09_leave/interface/request/leave";
|
||||
|
||||
import TableList from "@/modules/09_leave/components/05_Leave/TableList.vue";
|
||||
import ToolBar from "@/modules/09_leave/components/05_Leave/ToolBarLeave.vue";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const { showLoader, hideLoader, messageError } = mixin;
|
||||
const { fetchListLeaveReject } = leaveStore;
|
||||
const dataToobar = ref<any[]>([]);
|
||||
const $q = useQuasar(); //ใช้ noti quasar
|
||||
|
||||
const total = ref<number>(0);
|
||||
const totalList = ref<number>(1);
|
||||
|
||||
const querySting = reactive<QuerySting>({
|
||||
year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
|
||||
type: leaveStore.filter.type, //*Id ประเภทการลา
|
||||
status: leaveStore.filter.status, //*สถานะการของลา
|
||||
page: 1, //*สถานะการของลา
|
||||
pageSize: 10, //*สถานะการของลา
|
||||
keyword: leaveStore.filter.keyword, //keyword ค้นหา
|
||||
});
|
||||
//** เรียกข้อมูลจาก API*/
|
||||
async function fecthLeaveList() {
|
||||
leaveStore.rows = [];
|
||||
querySting.status = await (querySting.status == null
|
||||
? "ALL"
|
||||
: querySting.status);
|
||||
querySting.type = await (querySting.type == null
|
||||
? "00000000-0000-0000-0000-000000000000"
|
||||
: querySting.type);
|
||||
|
||||
if (querySting.status != null && querySting.type != null) {
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveListDelete(), querySting)
|
||||
.then((res) => {
|
||||
const data = res.data.result;
|
||||
totalList.value = Math.ceil(
|
||||
res.data.result.total / querySting.pageSize
|
||||
);
|
||||
total.value = res.data.result.total;
|
||||
fetchListLeaveReject(data.data); /** ส่งข้อมูลไป stores*/
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
})
|
||||
.finally(() => {
|
||||
hideLoader();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/** function เรียกข้อมูลสถานะ*/
|
||||
async function fetchOption() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
.then((res) => {
|
||||
dataToobar.value = res.data.result;
|
||||
})
|
||||
.catch((err) => {
|
||||
messageError($q, err);
|
||||
});
|
||||
}
|
||||
|
||||
function getSearch() {
|
||||
querySting.page = 1;
|
||||
fecthLeaveList();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => querySting.pageSize,
|
||||
async () => {
|
||||
getSearch();
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([fetchOption(), fecthLeaveList()]);
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<ToolBar
|
||||
:dataToobar="dataToobar"
|
||||
v-model:query-sting="querySting"
|
||||
:get-list="fecthLeaveList"
|
||||
:get-search="getSearch"
|
||||
/>
|
||||
<TableList
|
||||
v-model:total="total"
|
||||
v-model:total-list="totalList"
|
||||
v-model:pagination="querySting"
|
||||
:dataToobar="dataToobar"
|
||||
:getList="fecthLeaveList"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
323
src/modules/09_leave/components/05_Leave/TableList.vue
Normal file
323
src/modules/09_leave/components/05_Leave/TableList.vue
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import type { QTableProps } from "quasar";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
import { checkPermission } from "@/utils/permissions";
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
const router = useRouter();
|
||||
|
||||
const total = defineModel<number>("total", { required: true });
|
||||
const totalList = defineModel<number>("totalList", { required: true });
|
||||
const pagination = defineModel<any>("pagination", { required: true });
|
||||
|
||||
/** ข้อมูลหัวตาราง รายการลา */
|
||||
const columnsLeave = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "leaveTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "citizenId",
|
||||
align: "left",
|
||||
label: "เลขประจำตัวประชาชน",
|
||||
field: "citizenId",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "agency",
|
||||
align: "left",
|
||||
label: "หน่วยงาน",
|
||||
sortable: true,
|
||||
field: "agency",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "org",
|
||||
align: "left",
|
||||
label: "ส่วนราชการ",
|
||||
sortable: true,
|
||||
field: "org",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
align: "left",
|
||||
label: "ตำแหน่ง",
|
||||
sortable: true,
|
||||
field: "position",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "level",
|
||||
align: "left",
|
||||
label: "ระดับ",
|
||||
sortable: true,
|
||||
field: "level",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateSendLeave",
|
||||
align: "left",
|
||||
label: "วันที่ยื่นใบลา",
|
||||
sortable: true,
|
||||
field: "dateSendLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateLeave",
|
||||
align: "left",
|
||||
label: "วันที่ลา",
|
||||
sortable: true,
|
||||
field: "dateLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะ",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleColumnsLeave = ref<string[]>([
|
||||
"no",
|
||||
"leaveTypeName",
|
||||
"citizenId",
|
||||
"fullName",
|
||||
"dateSendLeave",
|
||||
"dateLeave",
|
||||
"agency",
|
||||
"org",
|
||||
"position",
|
||||
"level",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const columnsReject = ref<QTableProps["columns"]>([
|
||||
{
|
||||
name: "no",
|
||||
align: "left",
|
||||
label: "ลำดับ",
|
||||
sortable: false,
|
||||
field: "no",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "leaveTypeName",
|
||||
align: "left",
|
||||
label: "ประเภทการลา",
|
||||
sortable: true,
|
||||
field: "leaveTypeName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "fullName",
|
||||
align: "left",
|
||||
label: "ผู้ยื่นยกเลิกใบลา",
|
||||
sortable: true,
|
||||
field: "fullName",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "dateSendLeave",
|
||||
align: "left",
|
||||
label: "วันที่ขอยกเลิก",
|
||||
sortable: true,
|
||||
field: "dateSendLeave",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
align: "left",
|
||||
label: "สถานะการยกเลิก",
|
||||
sortable: true,
|
||||
field: "status",
|
||||
headerStyle: "font-size: 14px",
|
||||
style: "font-size: 14px",
|
||||
},
|
||||
]);
|
||||
const visibleReject = ref<string[]>([
|
||||
"no",
|
||||
"leaveTypeName",
|
||||
"fullName",
|
||||
"dateSendLeave",
|
||||
"status",
|
||||
]);
|
||||
|
||||
const props = defineProps({
|
||||
getList: Function,
|
||||
rows: {
|
||||
type: Object,
|
||||
require: true,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
rowsPerPage: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
maxPage: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
totalList: {
|
||||
type: Number,
|
||||
require: true,
|
||||
},
|
||||
dataToobar: Object,
|
||||
});
|
||||
|
||||
/** ไปหน้ารายละเอียด */
|
||||
function redirectToDetail(id: string) {
|
||||
const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
|
||||
router.push(`${routePrefix}/detail/${id}`);
|
||||
}
|
||||
|
||||
function updatePagination(newPagination: any) {
|
||||
pagination.value.page = 1;
|
||||
pagination.value.pageSize = newPagination.rowsPerPage;
|
||||
}
|
||||
|
||||
/**
|
||||
* แปลง สถานะ เป็น text
|
||||
* @param val
|
||||
*/
|
||||
function convert(val: any) {
|
||||
const filtertype = props.dataToobar?.find(
|
||||
(e: any) => e.id === val.leaveTypeId
|
||||
);
|
||||
const type = filtertype?.code;
|
||||
if (type == "LV-006" && val.hajjDayStatus == false) {
|
||||
return "ลาอุปสมบท";
|
||||
} else if (type == "LV-006" && val.hajjDayStatus == true) {
|
||||
return "ลาประกอบพิธีฮัจญ์";
|
||||
} else {
|
||||
return val.leaveTypeName;
|
||||
}
|
||||
}
|
||||
|
||||
/** Hook*/
|
||||
onMounted(() => {
|
||||
if (leaveStore.tabMenu === "1") {
|
||||
leaveStore.visibleColumns = visibleColumnsLeave.value;
|
||||
leaveStore.columns = columnsLeave.value;
|
||||
} else if (leaveStore.tabMenu === "2") {
|
||||
leaveStore.visibleColumns = visibleReject.value;
|
||||
leaveStore.columns = columnsReject.value;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<d-table
|
||||
ref="table"
|
||||
:columns="leaveStore.columns"
|
||||
:rows="leaveStore.rows"
|
||||
row-key="id"
|
||||
flat
|
||||
bordered
|
||||
:paging="true"
|
||||
dense
|
||||
class="custom-header-table"
|
||||
:visible-columns="leaveStore.visibleColumns"
|
||||
:rows-per-page-options="[10, 25, 50, 100]"
|
||||
@update:pagination="updatePagination"
|
||||
>
|
||||
<template v-slot:header="props">
|
||||
<q-tr :props="props">
|
||||
<q-th auto-width> </q-th>
|
||||
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<span class="text-weight-medium">{{ col.label }}</span>
|
||||
</q-th>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:body="props">
|
||||
<q-tr :props="props">
|
||||
<q-td auto-width>
|
||||
<q-btn
|
||||
v-if="checkPermission($route)?.attrIsGet"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="mdi-eye"
|
||||
color="info"
|
||||
@click.prevent="redirectToDetail(props.row.id)"
|
||||
>
|
||||
<q-tooltip>รายละเอียด</q-tooltip>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
<q-td v-for="col in props.cols" :key="col.name" :props="props">
|
||||
<div v-if="col.name == 'no'">
|
||||
{{
|
||||
(pagination.page - 1) * pagination.pageSize + props.rowIndex + 1
|
||||
}}
|
||||
</div>
|
||||
<div v-else-if="col.name == 'leaveTypeName'">
|
||||
{{ convert(props.row) }}
|
||||
</div>
|
||||
|
||||
<div v-else class="table_ellipsis">
|
||||
{{ col.value }}
|
||||
</div>
|
||||
</q-td>
|
||||
</q-tr>
|
||||
</template>
|
||||
<template v-slot:pagination="scope">
|
||||
ทั้งหมด {{ total }} รายการ
|
||||
<q-pagination
|
||||
v-model="pagination.page"
|
||||
active-color="primary"
|
||||
color="dark"
|
||||
:max="Number(totalList)"
|
||||
size="sm"
|
||||
boundary-links
|
||||
direction-links
|
||||
:max-pages="5"
|
||||
@update:model-value="props.getList?.()"
|
||||
></q-pagination>
|
||||
</template>
|
||||
</d-table>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
262
src/modules/09_leave/components/05_Leave/ToolBarLeave.vue
Normal file
262
src/modules/09_leave/components/05_Leave/ToolBarLeave.vue
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
|
||||
import type {
|
||||
DateFilter,
|
||||
QuerySting,
|
||||
} from "@/modules/09_leave/interface/request/leave";
|
||||
import type { DataOption } from "@/modules/09_leave/interface/index/Main";
|
||||
|
||||
/** importStores*/
|
||||
import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
|
||||
|
||||
const querySting = defineModel<QuerySting>("querySting", { required: true });
|
||||
|
||||
const $q = useQuasar();
|
||||
const leaveStore = useLeavelistDataStore();
|
||||
|
||||
const props = defineProps({
|
||||
dataToobar: Array,
|
||||
getSearch: Function,
|
||||
getList: Function,
|
||||
});
|
||||
|
||||
|
||||
/** Option*/
|
||||
const optionTypeMain = ref<DataOption[]>([]);
|
||||
const optionType = ref<DataOption[]>([]);
|
||||
const optionStatus = ref<DataOption[]>([
|
||||
{
|
||||
id: "ALL",
|
||||
name: "ทั้งหมด",
|
||||
},
|
||||
{
|
||||
id: "NEW",
|
||||
name: "ใหม่",
|
||||
},
|
||||
{
|
||||
id: "PENDING",
|
||||
name: "กำลังดำเนินการ",
|
||||
},
|
||||
{
|
||||
id: "APPROVE",
|
||||
name: "อนุมัติ",
|
||||
},
|
||||
{
|
||||
id: "REJECT",
|
||||
name: "ไม่อนุมัติ",
|
||||
},
|
||||
]);
|
||||
const optionStatus2 = ref<DataOption[]>([
|
||||
{
|
||||
id: "ALL",
|
||||
name: "ทั้งหมด",
|
||||
},
|
||||
{
|
||||
id: "NEW",
|
||||
name: "ใหม่",
|
||||
},
|
||||
{
|
||||
id: "APPROVE",
|
||||
name: "อนุมัติ",
|
||||
},
|
||||
{
|
||||
id: "REJECT",
|
||||
name: "ไม่อนุมัติ",
|
||||
},
|
||||
]);
|
||||
|
||||
const optionStatusMain = ref<DataOption[]>(
|
||||
leaveStore.tabMenu == "1" ? optionStatus.value : optionStatus2.value
|
||||
);
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
|
||||
* @param val คำที่ค้นหา
|
||||
* @param update Function
|
||||
* @param name ประเภทของ Select
|
||||
*/
|
||||
function filterOption(val: string, update: any, name: string) {
|
||||
update(() => {
|
||||
const needle = val.toLowerCase();
|
||||
if (name === "type") {
|
||||
optionType.value = optionTypeMain.value.filter(
|
||||
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
} else if (name === "status") {
|
||||
optionStatus.value = optionStatusMain.value.filter(
|
||||
(v: any) => v.name.toLowerCase().indexOf(needle) > -1
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
watch(
|
||||
async () => props.dataToobar,
|
||||
() => {
|
||||
if (props.dataToobar) {
|
||||
const data = props.dataToobar;
|
||||
leaveStore.leaveType = data;
|
||||
optionTypeMain.value = [
|
||||
{ id: "00000000-0000-0000-0000-000000000000", name: "ทั้งหมด" },
|
||||
];
|
||||
|
||||
const option = data.map((e: any) => ({
|
||||
id: e.id,
|
||||
name: e.name,
|
||||
}));
|
||||
|
||||
optionTypeMain.value.push(...option);
|
||||
optionType.value = optionTypeMain.value;
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="row col-12 q-col-gutter-sm q-mb-sm">
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<datepicker
|
||||
menu-class-name="modalfix"
|
||||
v-model="querySting.year"
|
||||
class="col-2"
|
||||
:locale="'th'"
|
||||
autoApply
|
||||
year-picker
|
||||
:enableTimePicker="false"
|
||||
@update:model-value="props.getSearch?.()"
|
||||
>
|
||||
<template #year="{ year }">{{ year + 543 }}</template>
|
||||
<template #year-overlay-value="{ value }">{{
|
||||
parseInt(value + 543)
|
||||
}}</template>
|
||||
<template #trigger>
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
:model-value="Number(querySting.year) + 543"
|
||||
:label="`${'ปีงบประมาณ'}`"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon
|
||||
name="event"
|
||||
class="cursor-pointer"
|
||||
style="color: var(--q-primary)"
|
||||
>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
</datepicker>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
for="selectType"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="querySting.type"
|
||||
:options="optionType"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="ประเภทการลา"
|
||||
@update:model-value="props.getSearch?.()"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'type')
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template
|
||||
v-if="
|
||||
querySting.type !== '00000000-0000-0000-0000-000000000000'
|
||||
"
|
||||
v-slot:append
|
||||
>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(optionType = optionTypeMain),
|
||||
(querySting.type =
|
||||
'00000000-0000-0000-0000-000000000000'),
|
||||
props.getSearch?.()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
for="selectStatus"
|
||||
emit-value
|
||||
map-options
|
||||
outlined
|
||||
dense
|
||||
v-model="querySting.status"
|
||||
:options="optionStatus"
|
||||
option-value="id"
|
||||
option-label="name"
|
||||
label="สถานะ"
|
||||
@update:model-value="props.getSearch?.()"
|
||||
use-input
|
||||
@filter="
|
||||
(inputValue:any, doneFn:Function) =>
|
||||
filterOption(inputValue, doneFn, 'status')
|
||||
"
|
||||
>
|
||||
<template v-slot:no-option>
|
||||
<q-item>
|
||||
<q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
<template v-if="querySting.status !== 'ALL'" v-slot:append>
|
||||
<q-icon
|
||||
name="cancel"
|
||||
@click.stop.prevent="
|
||||
(optionStatus = optionStatusMain),
|
||||
(querySting.status = 'ALL'),
|
||||
props.getSearch?.()
|
||||
"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</q-select>
|
||||
</div>
|
||||
<q-space />
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-input
|
||||
for="filterTable"
|
||||
dense
|
||||
outlined
|
||||
v-model="querySting.keyword"
|
||||
label="ค้นหา"
|
||||
@keydown.enter.prevent="props.getSearch?.()"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3 col-md-2">
|
||||
<q-select
|
||||
for="visibleColumns"
|
||||
v-model="leaveStore.visibleColumns"
|
||||
multiple
|
||||
outlined
|
||||
dense
|
||||
options-dense
|
||||
:display-value="$q.lang.table.columns"
|
||||
emit-value
|
||||
map-options
|
||||
style="min-width: 140px"
|
||||
:options="leaveStore.columns"
|
||||
option-value="name"
|
||||
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.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 }}</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
|
||||
? props.data.absentDayRegistorDate
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ให้เข้ารับการ</div>
|
||||
<div class="col">{{ props.data.absentDayGetIn }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ ที่</div>
|
||||
<div class="col">{{ props.data.absentDayAt }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.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 }}</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 ? props.data.wifeDayDateBorn : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.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 }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยไปประกอบพิธีฮัจญ์</div>
|
||||
<div class="col">{{ props.data.hajjDayStatus ? "เคย" : "ไม่เคย" }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.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.leaveTotal }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8"></div>
|
||||
<div class="col">{{ props.data.leaveTypeDay }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.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 ? props.data.leaveLastStart : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<script setup lang="ts">
|
||||
/** importStore */
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { calculateDurationYmd } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
function convertDateToEng(dataThia: string) {
|
||||
const thaiDateParts: string[] = dataThia.split(" ");
|
||||
const thaiMonthAbbreviation: string = thaiDateParts[1];
|
||||
|
||||
const thaiMonths: { [key: string]: string } = {
|
||||
"ม.ค.": "Jan",
|
||||
"ก.พ.": "Feb",
|
||||
"มี.ค.": "Mar",
|
||||
"เม.ย.": "Apr",
|
||||
"พ.ค.": "May",
|
||||
"มิ.ย.": "Jun",
|
||||
"ก.ค.": "Jul",
|
||||
"ส.ค.": "Aug",
|
||||
"ก.ย.": "Sep",
|
||||
"ต.ค.": "Oct",
|
||||
"พ.ย.": "Nov",
|
||||
"ธ.ค.": "Dec",
|
||||
};
|
||||
const englishMonth: string = thaiMonths[thaiMonthAbbreviation];
|
||||
|
||||
if (englishMonth) {
|
||||
const englishDateString: string = `${englishMonth} ${thaiDateParts[0]} ${thaiDateParts[2]}`;
|
||||
const dateObject: Date = new Date(englishDateString);
|
||||
return dateObject.toString();
|
||||
}
|
||||
}
|
||||
</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.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">
|
||||
{{
|
||||
calculateDurationYmd(
|
||||
convertDateToEng(props.data.leaveDateStart),
|
||||
convertDateToEng(props.data.leaveDateEnd)
|
||||
)
|
||||
}}
|
||||
</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
|
||||
? props.data.leavegovernmentDate
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้าน/หลักสูตร</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingSubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ณ สถานที่</div>
|
||||
<div class="col">{{ props.data.studyDayTrainingName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
|
||||
<div class="col" v-if="props.data.leaveDraftDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDraftDocument"
|
||||
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" v-if="props.data.leaveDocument">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<div>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดเอกสารแนบที่ {{ index + 1 }}</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
checkForm: String,
|
||||
});
|
||||
</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.checkForm !== "FormUpasom" && props.checkForm !== "FormHajj"
|
||||
? props.data.leaveTypeName
|
||||
: props.data.hajjDayStatus
|
||||
? "ลาประกอบพิธีฮัจญ์"
|
||||
: "ลาอุปสมบท"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4 text-grey-8">เรียน</div>
|
||||
<div class="col">{{ props.data.dear }}</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>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<script setup lang="ts">
|
||||
/** importStore */
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { calculateDurationYmd } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
function convertDateToEng(dataThia: string) {
|
||||
const thaiDateParts: string[] = dataThia.split(" ");
|
||||
const thaiMonthAbbreviation: string = thaiDateParts[1];
|
||||
|
||||
const thaiMonths: { [key: string]: string } = {
|
||||
"ม.ค.": "Jan",
|
||||
"ก.พ.": "Feb",
|
||||
"มี.ค.": "Mar",
|
||||
"เม.ย.": "Apr",
|
||||
"พ.ค.": "May",
|
||||
"มิ.ย.": "Jun",
|
||||
"ก.ค.": "Jul",
|
||||
"ส.ค.": "Aug",
|
||||
"ก.ย.": "Sep",
|
||||
"ต.ค.": "Oct",
|
||||
"พ.ย.": "Nov",
|
||||
"ธ.ค.": "Dec",
|
||||
};
|
||||
const englishMonth: string = thaiMonths[thaiMonthAbbreviation];
|
||||
|
||||
if (englishMonth) {
|
||||
const englishDateString: string = `${englishMonth} ${thaiDateParts[0]} ${thaiDateParts[2]}`;
|
||||
const dateObject: Date = new Date(englishDateString);
|
||||
return dateObject.toString();
|
||||
}
|
||||
}
|
||||
</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.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">
|
||||
{{
|
||||
calculateDurationYmd(
|
||||
convertDateToEng(props.data.leaveDateStart),
|
||||
convertDateToEng(props.data.leaveDateEnd)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leavebirthDate ? props.data.leavebirthDate : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">
|
||||
{{
|
||||
props.data.leavegovernmentDate
|
||||
? props.data.leavegovernmentDate
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ตำแหน่งคู่สมรส</div>
|
||||
<div class="col">{{ props.data.coupleDayPosition }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ไปปฏิบัติราชการ ณ ประเทศ</div>
|
||||
<div class="col">{{ props.data.coupleDayLevelCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประวัติการลาติดตามคู่สมรสครั้งสุดท้าย</div>
|
||||
</div>
|
||||
<div class="row q-mt-xs">
|
||||
<div class="col text-grey-8">
|
||||
<div class="q-ml-md" style="list-style-type: circle">
|
||||
<li>ประเทศ</li>
|
||||
<li>จำนวนวัน</li>
|
||||
<li>ตั้งแต่วันที่</li>
|
||||
<li>ถึงวันที่</li>
|
||||
<li>ลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย</li>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div>{{ props.data.coupleDayCountryHistory }}</div>
|
||||
<div>{{ props.data.coupleDayTotalHistory }}</div>
|
||||
<div>{{ props.data.coupleDayStartDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDayEndDateHistory }}</div>
|
||||
<div>{{ props.data.coupleDaySumTotalHistory }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<script setup lang="ts">
|
||||
/** importStore */
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
const { calculateDurationYmd } = mixin;
|
||||
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
function convertDateToEng(dataThia: string) {
|
||||
const thaiDateParts: string[] = dataThia.split(" ");
|
||||
const thaiMonthAbbreviation: string = thaiDateParts[1];
|
||||
|
||||
const thaiMonths: { [key: string]: string } = {
|
||||
"ม.ค.": "Jan",
|
||||
"ก.พ.": "Feb",
|
||||
"มี.ค.": "Mar",
|
||||
"เม.ย.": "Apr",
|
||||
"พ.ค.": "May",
|
||||
"มิ.ย.": "Jun",
|
||||
"ก.ค.": "Jul",
|
||||
"ส.ค.": "Aug",
|
||||
"ก.ย.": "Sep",
|
||||
"ต.ค.": "Oct",
|
||||
"พ.ย.": "Nov",
|
||||
"ธ.ค.": "Dec",
|
||||
};
|
||||
const englishMonth: string = thaiMonths[thaiMonthAbbreviation];
|
||||
|
||||
if (englishMonth) {
|
||||
const englishDateString: string = `${englishMonth} ${thaiDateParts[0]} ${thaiDateParts[2]}`;
|
||||
const dateObject: Date = new Date(englishDateString);
|
||||
return dateObject.toString();
|
||||
}
|
||||
}
|
||||
</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.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">
|
||||
{{
|
||||
calculateDurationYmd(
|
||||
convertDateToEng(props.data.leaveDateStart),
|
||||
convertDateToEng(props.data.leaveDateEnd)
|
||||
)
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">{{ props.data.leavebirthDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">{{ props.data.leavegovernmentDate }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เงินเดือนปัจจุบัน</div>
|
||||
<div class="col">
|
||||
{{ props.data.leaveSalary }} ({{ props.data.leaveSalaryText }})
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ศึกษาวิชา</div>
|
||||
<div class="col">{{ props.data.studyDaySubject }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ขั้นปริญญา</div>
|
||||
<div class="col">{{ props.data.studyDayDegreeLevel }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ชื่อสถานศึกษา</div>
|
||||
<div class="col">{{ props.data.studyDayUniversityName }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ประเทศ</div>
|
||||
<div class="col">{{ props.data.studyDayCountry }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ด้วยทุน</div>
|
||||
<div class="col">{{ props.data.studyDayScholarship }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">หมายเลขที่ติดต่อขณะลา</div>
|
||||
<div class="col">{{ props.data.leaveNumber }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ที่อยู่ที่ติดต่อได้ระหว่างลา</div>
|
||||
<div class="col">{{ props.data.leaveAddress }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.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 }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันเดือนปีเกิด</div>
|
||||
<div class="col">
|
||||
{{ props.data.leavebirthDate ? props.data.leavebirthDate : "-" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันที่เข้ารับราชการ</div>
|
||||
<div class="col">
|
||||
{{
|
||||
props.data.leavegovernmentDate
|
||||
? props.data.leavegovernmentDate
|
||||
: "-"
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เคย/ไม่เคยบวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayStatus ? "เคย" : "ไม่เคย" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่บวช</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayLocationName }}
|
||||
{{ props.data.ordainDayLocationAddress }}
|
||||
{{ props.data.ordainDayLocationNumber }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">วันอุปสมบท</div>
|
||||
<div class="col">{{ props.data.ordainDayOrdination }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">สถานที่จำพรรษา</div>
|
||||
<div class="col">
|
||||
{{ props.data.ordainDayBuddhistLentName }}
|
||||
{{ props.data.ordainDayBuddhistLentAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแนบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<q-card-section>
|
||||
<div class="q-pa-md q-gutter-md">
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เขียนที่</div>
|
||||
<div class="col">{{ props.data.leaveWrote }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาตั้งแต่วันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateStart }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">ลาถึงวันที่</div>
|
||||
<div class="col">{{ props.data.leaveDateEnd }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">รายละเอียด</div>
|
||||
<div class="col">{{ props.data.leaveDetail }}</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารประกอบ</div>
|
||||
<div class="col" v-if="props.data.leaveDocument.length !== 0">
|
||||
<div
|
||||
v-for="(document, index) in props.data.leaveDocument"
|
||||
:key="index"
|
||||
:style="{ marginBottom: '10px' }"
|
||||
>
|
||||
<q-btn
|
||||
:href="document.path"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
:label="`ดาวน์โหลดเอกสารแนบที่ ${index + 1}`"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col text-grey-8">เอกสารแบบฟอร์ม</div>
|
||||
<div class="col" v-if="props.data.leaveDraftDocument">
|
||||
<q-btn
|
||||
:href="props.data.leaveDraftDocument"
|
||||
target="_blank"
|
||||
outline
|
||||
color="blue"
|
||||
label="ดาวน์โหลด"
|
||||
size="12px"
|
||||
>
|
||||
<q-tooltip>ดาวน์โหลดไฟล์</q-tooltip></q-btn
|
||||
>
|
||||
</div>
|
||||
<div class="col" v-else>-</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue