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

ปรับ code รายการลา

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2023-12-08 10:08:18 +07:00
parent 52bfaeb0e8
commit 7b8f8d705f
5 changed files with 168 additions and 248 deletions
Download patch file Download diff file Expand all files Collapse all files

137
src/modules/05_leave/componenst/Calendar.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import keycloak from "@/plugins/keycloak"; import keycloak from "@/plugins/keycloak";
import http from "@/plugins/http"; import http from "@/plugins/http";
@ -14,22 +14,18 @@ import interactionPlugin from "@fullcalendar/interaction";
import allLocales from "@fullcalendar/core/locales-all"; import allLocales from "@fullcalendar/core/locales-all";
import listPlugin from "@fullcalendar/list"; import listPlugin from "@fullcalendar/list";
/** import type*/
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts"; import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
import type {
DataCalendar,
LeaveType,
FilterList,
} from "@/modules/05_leave/interface/response/leave";
/** import componest*/
import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue"; import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
// import FormMain from "@/modules/05_leave/componenst/formDetail/formMain.vue";
import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
import FormUpasom from "@/modules/05_leave/componenst/formDetail/formUpasom.vue";
import FormHajj from "@/modules/05_leave/componenst/formDetail/formHajj.vue";
import FormCheckSelect from "@/modules/05_leave/componenst/formDetail/formCheckSelect.vue";
import FormStudy from "@/modules/05_leave/componenst/formDetail/formStudy.vue";
import FormLeaveToTraining from "@/modules/05_leave/componenst/formDetail/formLeaveToTraining.vue";
import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDetail/formLeaveToWorkInternational.vue";
import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
/** import stort*/
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
@ -40,16 +36,8 @@ const $q = useQuasar();
const emit = defineEmits(["update:dateYear"]); const emit = defineEmits(["update:dateYear"]);
/**
* ตัวแปรทั้งหมด
*/
const fullName = ref<string>(""); const fullName = ref<string>("");
const mainData = ref<any>([]); const mainData = ref<DataCalendar[]>([]);
const modalCancel = ref<boolean>(false);
const modeCancel = ref<boolean>(true);
const title = ref<string>("");
/** /**
* Option ของปฏิทิน * Option ของปฏิทิน
@ -78,40 +66,7 @@ const calendarOptions = ref<CalendarOptions>({
eventBorderColor: "#50a5fc", eventBorderColor: "#50a5fc",
displayEventTime: false, displayEventTime: false,
editable: true, editable: true,
events: [ events: [],
{
groupId: "2",
title: "ลาป่วย",
start: "2023-11-24",
end: "2023-11-25",
color: "#4CAF4F",
textColor: "white",
},
{
groupId: "4",
title: "ลากิจ",
start: "2023-11-15",
allDay: true,
color: "#4CAF4F",
textColor: "white",
},
{
groupId: "4",
title: "นางสาวสมศรี ใจดี (ลากิจ)",
start: "2023-11-21",
end: "2023-11-23",
allDay: true,
color: "#ddd",
},
{
groupId: "4",
title: "นายสมชาย สุขใจ",
start: "2023-11-21",
allDay: true,
color: "#ddd",
},
],
}); });
const dateMonth = ref<DataDateMonthObject>({ const dateMonth = ref<DataDateMonthObject>({
@ -119,18 +74,18 @@ const dateMonth = ref<DataDateMonthObject>({
year: new Date().getFullYear(), year: new Date().getFullYear(),
}); });
/** function เรียกข้อมูล calendar*/
async function fetchDataCalendar() { async function fetchDataCalendar() {
showLoader; showLoader();
await http await http
.post(config.API.leaveCalendar(), { .post(config.API.leaveCalendar(), {
year: dateMonth.value.year, year: dateMonth.value.year,
}) })
.then((res) => { .then((res) => {
console.log(res);
mainData.value = res.data.result; mainData.value = res.data.result;
const double_name = [ const double_name = [
...new Set(mainData.value.map((item: any) => item.fullName)), ...new Set(mainData.value.map((item: DataCalendar) => item.fullName)),
]; ];
for (let i = 1; i <= double_name.length; i++) { for (let i = 1; i <= double_name.length; i++) {
@ -147,11 +102,10 @@ async function fetchDataCalendar() {
const data = mainData.value.filter( const data = mainData.value.filter(
(e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย" (e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
); );
console.log(data);
const event = data.map((e: any) => ({ const event = data.map((e: DataCalendar) => ({
id: e.id, id: e.id,
title: e.leaveTypeName, title: `${e.fullName} (${e.leaveTypeName})`,
start: e.leaveStartDate, start: e.leaveStartDate,
end: e.leaveEndDate, end: e.leaveEndDate,
allDay: true, allDay: true,
@ -167,7 +121,8 @@ async function fetchDataCalendar() {
}); });
} }
const leaveType = ref<any>(); const leaveType = ref<LeaveType[]>([]);
/** function เรียกประเภทการลา */
async function fectOptionType() { async function fectOptionType() {
await http await http
.get(config.API.leaveType()) .get(config.API.leaveType())
@ -179,8 +134,6 @@ async function fectOptionType() {
}); });
} }
/**Status Form การลา*/
/** /**
* แปลง ปีและเดือนเป็นภาษาไทย * แปลง ปีและเดือนเป็นภาษาไทย
* @param val datepicker แบบเลือกปีและเดือน * @param val datepicker แบบเลือกปีและเดือน
@ -190,6 +143,7 @@ function monthYearThai(val: DataDateMonthObject) {
else return monthYear2Thai(val.month, val.year); else return monthYear2Thai(val.month, val.year);
} }
/** function อัปเดท Calendar */
async function updateMonth() { async function updateMonth() {
await fetchDataCalendar(); await fetchDataCalendar();
const calen = fullCalendar.value.getApi(); const calen = fullCalendar.value.getApi();
@ -197,33 +151,25 @@ async function updateMonth() {
calen.gotoDate(date); calen.gotoDate(date);
} }
/**
* ฟังก์ชั่นยกเลิก model
* @param text
*/
async function cancel(text: string) {
title.value = text;
modalCancel.value = true;
modeCancel.value = true;
}
const modal = ref<boolean>(false); const modal = ref<boolean>(false);
const leaveId = ref<string>(""); const leaveId = ref<string>("");
/** /**
* ฟังก์ชั่นเปิด model * function openPopupDateail
* @param id * @param id การลา
*/ */
async function onCilckview(id: string) { async function onCilckview(id: string) {
modal.value = true; modal.value = true;
leaveId.value = id; leaveId.value = id;
} }
/** function closePopup*/
async function onClickClose() { async function onClickClose() {
modal.value = false; modal.value = false;
} }
// filter calendar left /** filter calendar left */
const filterLists = ref<any[]>([]); const filterLists = ref<FilterList[]>([]);
const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]); const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
watch( watch(
@ -231,10 +177,10 @@ watch(
() => { () => {
const eventData = filterVal.value.map((item: any) => { const eventData = filterVal.value.map((item: any) => {
return mainData.value return mainData.value
.filter((e: any) => e.fullName === item) .filter((e: DataCalendar) => e.fullName === item)
.map((e: any) => ({ .map((e) => ({
id: e.id, id: e.id,
title: e.leaveTypeName, title: `${e.fullName} (${e.leaveTypeName})`,
start: e.leaveStartDate, start: e.leaveStartDate,
end: e.leaveEndDate, end: e.leaveEndDate,
allDay: true, allDay: true,
@ -248,8 +194,6 @@ onMounted(async () => {
if (keycloak.tokenParsed != null) { if (keycloak.tokenParsed != null) {
fullName.value = keycloak.tokenParsed.name; fullName.value = keycloak.tokenParsed.name;
} }
console.log(fullName.value);
await fetchDataCalendar(); await fetchDataCalendar();
await fectOptionType(); await fectOptionType();
}); });
@ -257,12 +201,10 @@ onMounted(async () => {
<template> <template>
<div class="row"> <div class="row">
<!-- Filter ตามคนและประเภทการลา -->
<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm"> <div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
<q-card class="col-12"> <q-card class="col-12">
<div class="q-gutter-sm"> <div class="q-gutter-sm">
<q-list bordered class="rounded-borders"> <q-list bordered class="rounded-borders">
<!-- <q-item-label header>User</q-item-label> -->
<q-item <q-item
v-for="(item, i) in filterLists" v-for="(item, i) in filterLists"
:key="i" :key="i"
@ -281,11 +223,6 @@ onMounted(async () => {
</q-item> </q-item>
</q-list> </q-list>
</div> </div>
<!-- show value filterVal -->
<!-- <div class="q-px-sm q-mt-sm">
Your selection is: <strong>{{ filterVal }}</strong>
</div> -->
</q-card> </q-card>
</div> </div>
@ -341,22 +278,12 @@ onMounted(async () => {
class="row col-12 items-center no-wrap" class="row col-12 items-center no-wrap"
:style="`background: + ${arg.event.color}`" :style="`background: + ${arg.event.color}`"
> >
<!-- <b>{{ arg.timeText }}</b> -->
<div <div
class="textHover col-10" class="textHover col-10"
@click="onCilckview(arg.event.id)" @click="onCilckview(arg.event.id)"
> >
{{ arg.event.title }} {{ arg.event.title }}
</div> </div>
<q-btn
dense
v-if="arg.event.groupId == 1"
icon="mdi-close"
flat
round
size="8px"
@click="cancel(arg.event.title)"
/>
</div> </div>
</template> </template>
</FullCalendar> </FullCalendar>
@ -382,14 +309,6 @@ onMounted(async () => {
/> />
<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span> <span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
</div> </div>
<!-- <div class="items-center row">
<q-icon size="10px" color="light-blue-14" name="mdi-circle" class="q-mr-sm" />
<span class="text-caption text-grey-8">สถานะอยู่ระหว่างดำเนินการ</span>
</div>
<div class="items-center row">
<q-icon size="10px" color="orange" name="mdi-circle" class="q-mr-sm" />
<span class="text-caption text-grey-8">สถานะใหม่</span>
</div> -->
</div> </div>
</div> </div>
</div> </div>

50
src/modules/05_leave/componenst/DialogDetail.vue
View file

@ -4,11 +4,14 @@ import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
/** import type*/
import type { import type {
FremDetail,
FormDelete, FormDelete,
FormDeleteRef, FormDeleteRef,
} from "@/modules/05_leave/interface/response/leave"; } from "@/modules/05_leave/interface/response/leave";
/** import componest*/
import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue"; import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue"; import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.vue";
import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue"; import FormHoliday from "@/modules/05_leave/componenst/formDetail/formHoliday.vue";
@ -21,6 +24,7 @@ import FormLeaveToWorkInternational from "@/modules/05_leave/componenst/formDeta
import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue"; import FormSpouse from "@/modules/05_leave/componenst/formDetail/formSpouse.vue";
import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue"; import FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
/** import stort*/
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
@ -33,6 +37,7 @@ const {
} = mixin; } = mixin;
const $q = useQuasar(); const $q = useQuasar();
const props = defineProps({ const props = defineProps({
modal: { modal: {
type: Boolean, type: Boolean,
@ -66,13 +71,8 @@ const titleName = ref<string>("");
const checkForm = ref<string>(""); const checkForm = ref<string>("");
/** Form รายละเอียดข้อมูล*/ /** Form รายละเอียดข้อมูล*/
const formData = reactive<any>({ const formData = reactive<FremDetail>({
id: "", //Id การยื่นขอลา id: "", //Id การยื่นขอลา
// reasonCommander: "", //เหตุผลผู้บังคับบัญชา
// reasonOligarch: "", //เหตุผลผู้มีอำนาจ
// positionName: "", //ตำแหน่งผู้ยื่นขอ
// positionLevelName: "", //ระดับผู้ยื่นขอ
// organizationName: "", //สังกัดผู้ยื่นขอ
leaveTypeName: "", // Name ประเภทการลา leaveTypeName: "", // Name ประเภทการลา
leaveTypeId: "", //Id ประเภทการลา leaveTypeId: "", //Id ประเภทการลา
fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
@ -81,12 +81,6 @@ const formData = reactive<any>({
leaveDateStart: new Date(), //วันเริ่มการลา leaveDateStart: new Date(), //วันเริ่มการลา
leaveDateEnd: new Date(), //วันสิ้นสุดการลา leaveDateEnd: new Date(), //วันสิ้นสุดการลา
leaveCount: 0, //จำนวนวันลา leaveCount: 0, //จำนวนวันลา
// leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
// leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
// leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
// leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
// leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
leaveWrote: "", //เขียนที่ leaveWrote: "", //เขียนที่
leaveAddress: "", //สถานที่ติดต่อขณะลา leaveAddress: "", //สถานที่ติดต่อขณะลา
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
@ -105,14 +99,14 @@ const formData = reactive<any>({
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร) wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto) restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto) restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท) ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท) ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท) ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท) ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท) ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท) ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท) ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์) hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
@ -137,6 +131,7 @@ const formData = reactive<any>({
step: "", step: "",
}); });
/** form ขอยกเลิก*/
const formDelete = reactive<FormDelete>({ const formDelete = reactive<FormDelete>({
writeAt: "", writeAt: "",
reason: "", reason: "",
@ -146,13 +141,16 @@ const formDelete = reactive<FormDelete>({
const writeAtRef = ref<Object | null>(null); const writeAtRef = ref<Object | null>(null);
const reasonRef = ref<Object | null>(null); const reasonRef = ref<Object | null>(null);
const docRef = ref<Object | null>(null); const docRef = ref<Object | null>(null);
const formDeleteRef: FormDeleteRef = { const formDeleteRef: FormDeleteRef = {
writeAt: writeAtRef, writeAt: writeAtRef,
reason: reasonRef, reason: reasonRef,
doc: docRef, doc: docRef,
}; };
/**
* function เรียกข้อมูลการลา
* @param id การลา
*/
async function fetchDataDetail(id: string) { async function fetchDataDetail(id: string) {
showLoader(); showLoader();
await http await http
@ -161,11 +159,6 @@ async function fetchDataDetail(id: string) {
const data = res.data.result; const data = res.data.result;
titleName.value = data.fullName; titleName.value = data.fullName;
formData.id = data.id; formData.id = data.id;
// formData.reasonCommander = data.reasonCommander;
// formData.reasonOligarch = data.reasonOligarch;
// formData.positionName = data.positionName;
// formData.positionLevelName = data.positionLevelName;
// formData.organizationName = data.organizationName;
formData.leaveTypeName = data.leaveTypeName; formData.leaveTypeName = data.leaveTypeName;
formData.leaveTypeId = data.leaveTypeId; formData.leaveTypeId = data.leaveTypeId;
formData.fullname = data.fullname; formData.fullname = data.fullname;
@ -176,9 +169,6 @@ async function fetchDataDetail(id: string) {
data.leaveStartDate && date2Thai(data.leaveStartDate); data.leaveStartDate && date2Thai(data.leaveStartDate);
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate); formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
formData.leaveCount = data.leaveTotal; formData.leaveCount = data.leaveTotal;
// formData.leaveLimit = data.leaveLimit;
// formData.leaveSummary = data.leaveSummary;
// formData.leaveRemain = data.leaveRemain;
formData.leaveWrote = data.leaveWrote; formData.leaveWrote = data.leaveWrote;
formData.leaveAddress = data.leaveAddress; formData.leaveAddress = data.leaveAddress;
formData.leaveNumber = data.leaveNumber; formData.leaveNumber = data.leaveNumber;
@ -196,8 +186,6 @@ async function fetchDataDetail(id: string) {
data.leavegovernmentDate && date2Thai(data.leavegovernmentDate); data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
formData.leaveSalary = data.leaveSalary; formData.leaveSalary = data.leaveSalary;
formData.leaveSalaryText = data.leaveSalaryText; formData.leaveSalaryText = data.leaveSalaryText;
// formData.leaveTypeDay =
// e.leaveTypeDay && stores.convertLeaveDaytype(e.leaveTypeDay);
formData.wifeDayName = data.wifeDayName; formData.wifeDayName = data.wifeDayName;
formData.wifeDayDateBorn = formData.wifeDayDateBorn =
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn); data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
@ -240,7 +228,6 @@ async function fetchDataDetail(id: string) {
data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory); data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory; formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory;
formData.step = data.step; formData.step = data.step;
// checkLeaveType(formData.leaveTypeId ? formData.leaveTypeId : "");
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName); checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
}) })
.catch((err) => { .catch((err) => {
@ -252,6 +239,11 @@ async function fetchDataDetail(id: string) {
}); });
} }
/**
* function check ประเภทการลา
* @param leaveTypeId ประเภทการลา
* @param leaveTypeName ประเภทการลา
*/
function checkLeaveType(leaveTypeId: string, leaveTypeName: string) { function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
if (props.leaveType) { if (props.leaveType) {
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId); const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
@ -282,6 +274,10 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
} }
} }
/**
* function เรียกข้อมูลยกเลิกการลา
* @param id ยกเลิกการลา
*/
async function fetchDataCancelDetail(id: string) { async function fetchDataCancelDetail(id: string) {
showLoader(); showLoader();
await http await http
@ -297,6 +293,7 @@ async function fetchDataCancelDetail(id: string) {
}); });
} }
/** function ยินยันการบันทึกข้อมูล*/
async function onClickSave() { async function onClickSave() {
const hasError = []; const hasError = [];
for (const key in formDeleteRef) { for (const key in formDeleteRef) {
@ -322,6 +319,7 @@ async function onClickSave() {
} }
} }
/** function บันทึกข้อมูล*/
async function onSubmit() { async function onSubmit() {
showLoader(); showLoader();
const id = props.leaveId ? props.leaveId : ""; const id = props.leaveId ? props.leaveId : "";

36
src/modules/05_leave/componenst/ListCalendar.vue
View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, reactive, onMounted } from "vue"; import { ref, onMounted } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue"; /** import type*/
import type { LeaveType } from "@/modules/05_leave/interface/response/leave";
import type { /** import componest*/
FormDelete, import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
FormDeleteRef,
} from "@/modules/05_leave/interface/response/leave";
import Table from "@/modules/05_leave/componenst/Table.vue"; import Table from "@/modules/05_leave/componenst/Table.vue";
/** import stort*/
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store"; import { useLeaveStore } from "@/modules/05_leave/store";
@ -22,6 +22,7 @@ const LeaveData = useLeaveStore();
const $q = useQuasar(); const $q = useQuasar();
/** filter */
const year = ref<number>(new Date().getFullYear()); const year = ref<number>(new Date().getFullYear());
const type = ref<string>("00000000-0000-0000-0000-000000000000"); const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL"); const status = ref<string>("ALL");
@ -32,6 +33,7 @@ const maxPage = ref<number>(1);
const page = ref<number>(1); const page = ref<number>(1);
const pageSize = ref<number>(10); const pageSize = ref<number>(10);
/** function เรียกข้อมูลการลา*/
async function fetchDataTable() { async function fetchDataTable() {
showLoader(); showLoader();
const body = { const body = {
@ -57,7 +59,8 @@ async function fetchDataTable() {
}); });
} }
const leaveType = ref<any>(); const leaveType = ref<LeaveType[]>();
/** function เรียกประเภทการลา */
async function fectOptionType() { async function fectOptionType() {
await http await http
.get(config.API.leaveType()) .get(config.API.leaveType())
@ -75,18 +78,28 @@ const leaveId = ref<string>("");
const leaveStatus = ref<string>(""); const leaveStatus = ref<string>("");
/** /**
* ฟังก์ชั่นเปิด model * function openPopupDateail
* @param text * @param id การลา
* @param status การลา
*/ */
const onClickView = async (id: string, status: string) => { const onClickView = async (id: string, status: string) => {
modal.value = true; modal.value = true;
leaveId.value = id; leaveId.value = id;
leaveStatus.value = status; leaveStatus.value = status;
}; };
/** function closePopup*/
async function onClickClose() { async function onClickClose() {
modal.value = false; modal.value = false;
} }
/**
* function updateFilter
* @param y ปีงบประมาณ
* @param t ประเภทการลา
* @param s สภานะ
* @param k คำค้นหา
*/
async function updateFilterTable(y: number, t: string, s: string, k: string) { async function updateFilterTable(y: number, t: string, s: string, k: string) {
if (t && s) { if (t && s) {
year.value = await y; year.value = await y;
@ -97,6 +110,11 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
} }
} }
/**
* function updatePagination
* @param p หน้า
* @param ps แถวต่อหน้า
*/
async function updatePagination(p: number, ps: number) { async function updatePagination(p: number, ps: number) {
(page.value = await p), (pageSize.value = await ps); (page.value = await p), (pageSize.value = await ps);
await fetchDataTable(); await fetchDataTable();

64
src/modules/05_leave/componenst/Table.vue
View file

@ -1,23 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, useAttrs, onMounted, watch } from "vue"; import { ref, useAttrs, watch } from "vue";
import { useQuasar } from "quasar"; import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";
import { useCounterMixin } from "@/stores/mixin";
import { useLeaveStore } from "@/modules/05_leave/store"; import { useLeaveStore } from "@/modules/05_leave/store";
const mixin = useCounterMixin(); /** import stort*/
const leaveStore = useLeaveStore(); const leaveStore = useLeaveStore();
const { messageError } = mixin; const { filterOption } = leaveStore;
const { fetchLeaveType, filterOption } = leaveStore;
const attrs = ref<any>(useAttrs()); const attrs = ref<any>(useAttrs());
const $q = useQuasar(); const $q = useQuasar();
const table = ref<any>(null);
const filterRef = ref<any>(null);
/** รับ props มาจากหน้าหลัก */ /** รับ props มาจากหน้าหลัก */
const props = defineProps({ const props = defineProps({
count: Number, count: Number,
@ -54,6 +47,8 @@ const emit = defineEmits([
"update:editvisible", "update:editvisible",
]); ]);
const table = ref<any>(null);
/** /**
* ตั้งค่า pagination * ตั้งค่า pagination
*/ */
@ -65,9 +60,10 @@ const pagination = ref({
rowsPerPage: Number(props.pageSize), rowsPerPage: Number(props.pageSize),
}); });
const updateVisible = (value: []) => { /** updateVisible*/
function updateVisible(value: []) {
emit("update:inputvisible", value); emit("update:inputvisible", value);
}; }
/** filter */ /** filter */
const year = ref<number>(new Date().getFullYear()); const year = ref<number>(new Date().getFullYear());
@ -75,38 +71,25 @@ const type = ref<string>("00000000-0000-0000-0000-000000000000");
const status = ref<string>("ALL"); const status = ref<string>("ALL");
const filter = ref<string>(""); const filter = ref<string>("");
/** function updateFilter*/
function filterTable() { function filterTable() {
emit("update:filter", year.value, type.value, status.value, filter.value); emit("update:filter", year.value, type.value, status.value, filter.value);
} }
/** function updatePagination*/
function updatePagination(p: number, ps: number) { function updatePagination(p: number, ps: number) {
emit("update:Pagination", p, ps); emit("update:Pagination", p, ps);
} }
/** function updatePageSize*/
function updatePageSize(newPageSize: any) { function updatePageSize(newPageSize: any) {
currentPage.value = 1; currentPage.value = 1;
pagination.value.rowsPerPage = newPageSize.rowsPerPage; pagination.value.rowsPerPage = newPageSize.rowsPerPage;
} }
// async function fectOptionType() {
// await http
// .get(config.API.leaveType())
// .then(async (res) => {
// const data = res.data.result;
// await fetchLeaveType(data);
// })
// .catch((err) => {
// messageError($q, err);
// });
// }
watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => { watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
updatePagination(currentPage.value, pagination.value.rowsPerPage); updatePagination(currentPage.value, pagination.value.rowsPerPage);
}); });
onMounted(async () => {
// await fectOptionType();
});
</script> </script>
<template> <template>
<div class="q-py-sm row"> <div class="q-py-sm row">
@ -198,28 +181,7 @@ onMounted(async () => {
</template></q-select </template></q-select
> >
<q-space /> <q-space />
<!-- <q-input
standout
dense
v-model="filter"
ref="filterRef"
@keydown.enter.prevent="filterTable"
outlined
debounce="300"
placeholder="ค้นหา"
class="gt-xs"
style="max-width: 150px"
>
<template v-slot:append>
<q-icon v-if="filter == ''" name="search" />
<q-icon
v-if="filter !== ''"
name="clear"
class="cursor-pointer"
@click="filter = ''"
/>
</template>
</q-input> -->
<!-- แสดงคอลัมน์ใน table --> <!-- แสดงคอลัมน์ใน table -->
<q-select <q-select
:model-value="inputvisible" :model-value="inputvisible"

129
src/modules/05_leave/interface/response/leave.ts
View file

@ -20,70 +20,60 @@ interface ListLeaveTable {
interface FremDetail { interface FremDetail {
id: string; //Id การยื่นขอลา id: string; //Id การยื่นขอลา
reasonCommander: string; //เหตุผลผู้บังคับบัญชา leaveTypeName: string; // Name ประเภทการลา
reasonOligarch: string; //เหตุผลผู้มีอำนาจ leaveTypeId: string; //Id ประเภทการลา
positionName: string; //ตำแหน่งผู้ยื่นขอ
positionLevelName: string; //ระดับผู้ยื่นขอ
organizationName: string; //สังกัดผู้ยื่นขอ
leaveTypeName: string | null; //Name ประเภทการลา
leaveTypeId: string | null; //Id ประเภทการลา
fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
dateSendLeave: Date | null; //วันที่ยื่นใบลา dateSendLeave: Date; // วันที่ยืนใบลา
leaveDateStart: Date | null; //วันเริ่มการลา
leaveDateEnd: Date | null; //วันสิ้นสุดการลา
leaveCount: number;
status: string; //สถานะการของลา status: string; //สถานะการของลา
leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน leaveDateStart: Date; //วันเริ่มการลา
leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน leaveDateEnd: Date; //วันสิ้นสุดการลา
leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน leaveCount: number; //จำนวนวันลา
// leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
// leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา
leaveWrote: string; //เขียนที่ leaveWrote: string; //เขียนที่
leaveAddress: string; //สถานที่ติดต่อขณะลา leaveAddress: string; //สถานที่ติดต่อขณะลา
leaveNumber: string; //หมายเลขที่ติดต่อขณะลา leaveNumber: string; //หมายเลขที่ติดต่อขณะลา
leaveDetail: string; //รายละเอียดการลา leaveDetail: string; //รายละเอียดการลา
leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด
leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา
leaveLastStart: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto) leaveLastStart: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
leaveLastEnd: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto) leaveLastEnd: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
leaveTotal: number; //จำนวนวันที่ลา(Auto) leaveTotal: number; //จำนวนวันที่ลา(Auto)
leavebirthDate: Date | null; //วันเดือนปีเกิด(Auto) leavebirthDate: Date; //วันเดือนปีเกิด(Auto)
leavegovernmentDate: Date | null; //วันที่เข้ารับราชการ(Auto) leavegovernmentDate: Date; //วันที่เข้ารับราชการ(Auto)
leaveSalary: Number; //เงินเดือนปัจจุบัน(Auto) leaveSalary: number; //เงินเดือนปัจจุบัน(Auto)
leaveSalaryText: String; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน) leaveSalaryText: string; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
leaveTypeDay: string; //ประเภทการลาในวันนั้นเช่น leaveTypeDay: string; //ประเภทการลาในวันนั้นเช่น
wifeDayName: String; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร) wifeDayName: string; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
wifeDayDateBorn: Date | null; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร) wifeDayDateBorn: Date; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
restDayOldTotal: Number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto) restDayOldTotal: number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
restDayCurrentTotal: number; //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto) restDayCurrentTotal: number; //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
ordainDayStatus: Boolean; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท) ordainDayStatus: string; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
ordainDayLocationName: String; //สถานที่บวช ชื่อวัด(ลาอุปสมบท) ordainDayLocationName: string; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
ordainDayLocationAddress: String; //สถานที่บวช ที่อยู่(ลาอุปสมบท) ordainDayLocationAddress: string; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
ordainDayLocationNumber: String; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท) ordainDayLocationNumber: string; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
ordainDayOrdination: Date | null; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท) ordainDayOrdination: Date; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
ordainDayBuddhistLentName: String; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท) ordainDayBuddhistLentName: string; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
ordainDayBuddhistLentAddress: String; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท) ordainDayBuddhistLentAddress: string; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
hajjDayStatus: Boolean; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์) hajjDayStatus: string; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
absentDaySummon: String; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDaySummon: string; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayLocation: String; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDayLocation: string; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayRegistorDate: Date | null; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDayRegistorDate: Date; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayGetIn: String; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDayGetIn: string; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
absentDayAt: String; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล) absentDayAt: string; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
studyDaySubject: String; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDaySubject: string; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayDegreeLevel: String; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDayDegreeLevel: string; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayUniversityName: String; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDayUniversityName: string; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayTrainingSubject: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDayTrainingSubject: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayTrainingName: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDayTrainingName: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayCountry: String; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDayCountry: string; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
studyDayScholarship: String; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน) studyDayScholarship: string; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
coupleDayName: String; //ชื่อคู่สมรส (ลาติดตามคู่สมรส) coupleDayName: string; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
coupleDayPosition: String; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส) coupleDayPosition: string; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
coupleDayLevel: String; //ระดับคู่สมรส (ลาติดตามคู่สมรส) coupleDayLevel: string; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
coupleDayLevelCountry: String; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส) coupleDayLevelCountry: string; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
coupleDayCountryHistory: String; //ประวัติ ประเทศ (ลาติดตามคู่สมรส) coupleDayCountryHistory: string; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
coupleDayTotalHistory: String; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส) coupleDayTotalHistory: string; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
coupleDayStartDateHistory: Date | null; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส) coupleDayStartDateHistory: Date; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
coupleDayEndDateHistory: Date | null; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส) coupleDayEndDateHistory: Date; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส) coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
step: string; step: string;
} }
@ -100,10 +90,43 @@ interface FormDeleteRef {
[key: string]: any; [key: string]: any;
} }
interface DataCalendar {
dateSendLeave: Date;
fullName: string;
id: string;
leaveEndDate: Date;
leaveStartDate: Date;
leaveTypeId: string;
leaveTypeName: string;
status: string;
}
interface LeaveType {
code: string;
createdAt: Date;
createdFullName: string;
createdUserId: string;
id: string;
lastUpdateFullName: string;
lastUpdateUserId: string;
lastUpdatedAt: Date | null;
limit: Number;
name: string;
}
interface FilterList {
id: string;
name: string;
color: string;
}
export type { export type {
ListLeave, ListLeave,
ListLeaveTable, ListLeaveTable,
FremDetail, FremDetail,
FormDelete, FormDelete,
FormDeleteRef, FormDeleteRef,
DataCalendar,
LeaveType,
FilterList,
}; };