ปรับ code รายการลา
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490
parent
52bfaeb0e8
commit
7b8f8d705f
5 changed files with 168 additions and 248 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import keycloak from "@/plugins/keycloak";
|
||||
import http from "@/plugins/http";
|
||||
|
|
@ -14,22 +14,18 @@ import interactionPlugin from "@fullcalendar/interaction";
|
|||
import allLocales from "@fullcalendar/core/locales-all";
|
||||
import listPlugin from "@fullcalendar/list";
|
||||
|
||||
/** import type*/
|
||||
import type { DataDateMonthObject } from "@/modules/05_leave/interface/request/Calendar.ts";
|
||||
import type {
|
||||
DataCalendar,
|
||||
LeaveType,
|
||||
FilterList,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
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";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
|
|
@ -40,16 +36,8 @@ const $q = useQuasar();
|
|||
|
||||
const emit = defineEmits(["update:dateYear"]);
|
||||
|
||||
/**
|
||||
* ตัวแปรทั้งหมด
|
||||
*/
|
||||
|
||||
const fullName = ref<string>("");
|
||||
const mainData = ref<any>([]);
|
||||
|
||||
const modalCancel = ref<boolean>(false);
|
||||
const modeCancel = ref<boolean>(true);
|
||||
const title = ref<string>("");
|
||||
const mainData = ref<DataCalendar[]>([]);
|
||||
|
||||
/**
|
||||
* Option ของปฏิทิน
|
||||
|
|
@ -78,40 +66,7 @@ const calendarOptions = ref<CalendarOptions>({
|
|||
eventBorderColor: "#50a5fc",
|
||||
displayEventTime: false,
|
||||
editable: true,
|
||||
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",
|
||||
},
|
||||
],
|
||||
events: [],
|
||||
});
|
||||
|
||||
const dateMonth = ref<DataDateMonthObject>({
|
||||
|
|
@ -119,18 +74,18 @@ const dateMonth = ref<DataDateMonthObject>({
|
|||
year: new Date().getFullYear(),
|
||||
});
|
||||
|
||||
/** function เรียกข้อมูล calendar*/
|
||||
async function fetchDataCalendar() {
|
||||
showLoader;
|
||||
showLoader();
|
||||
await http
|
||||
.post(config.API.leaveCalendar(), {
|
||||
year: dateMonth.value.year,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
mainData.value = res.data.result;
|
||||
|
||||
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++) {
|
||||
|
|
@ -147,11 +102,10 @@ async function fetchDataCalendar() {
|
|||
const data = mainData.value.filter(
|
||||
(e: any) => e.fullName === "นางสาวสาวิตรี ศรีสมัย"
|
||||
);
|
||||
console.log(data);
|
||||
|
||||
const event = data.map((e: any) => ({
|
||||
const event = data.map((e: DataCalendar) => ({
|
||||
id: e.id,
|
||||
title: e.leaveTypeName,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
start: e.leaveStartDate,
|
||||
end: e.leaveEndDate,
|
||||
allDay: true,
|
||||
|
|
@ -167,7 +121,8 @@ async function fetchDataCalendar() {
|
|||
});
|
||||
}
|
||||
|
||||
const leaveType = ref<any>();
|
||||
const leaveType = ref<LeaveType[]>([]);
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
|
|
@ -179,8 +134,6 @@ async function fectOptionType() {
|
|||
});
|
||||
}
|
||||
|
||||
/**Status Form การลา*/
|
||||
|
||||
/**
|
||||
* แปลง ปีและเดือนเป็นภาษาไทย
|
||||
* @param val datepicker แบบเลือกปีและเดือน
|
||||
|
|
@ -190,6 +143,7 @@ function monthYearThai(val: DataDateMonthObject) {
|
|||
else return monthYear2Thai(val.month, val.year);
|
||||
}
|
||||
|
||||
/** function อัปเดท Calendar */
|
||||
async function updateMonth() {
|
||||
await fetchDataCalendar();
|
||||
const calen = fullCalendar.value.getApi();
|
||||
|
|
@ -197,33 +151,25 @@ async function updateMonth() {
|
|||
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 leaveId = ref<string>("");
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นเปิด model
|
||||
* @param id
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
*/
|
||||
async function onCilckview(id: string) {
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
}
|
||||
|
||||
/** function closePopup*/
|
||||
async function onClickClose() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
// filter calendar left
|
||||
const filterLists = ref<any[]>([]);
|
||||
/** filter calendar left */
|
||||
const filterLists = ref<FilterList[]>([]);
|
||||
const filterVal = ref(["นางสาวสาวิตรี ศรีสมัย"]);
|
||||
|
||||
watch(
|
||||
|
|
@ -231,10 +177,10 @@ watch(
|
|||
() => {
|
||||
const eventData = filterVal.value.map((item: any) => {
|
||||
return mainData.value
|
||||
.filter((e: any) => e.fullName === item)
|
||||
.map((e: any) => ({
|
||||
.filter((e: DataCalendar) => e.fullName === item)
|
||||
.map((e) => ({
|
||||
id: e.id,
|
||||
title: e.leaveTypeName,
|
||||
title: `${e.fullName} (${e.leaveTypeName})`,
|
||||
start: e.leaveStartDate,
|
||||
end: e.leaveEndDate,
|
||||
allDay: true,
|
||||
|
|
@ -248,8 +194,6 @@ onMounted(async () => {
|
|||
if (keycloak.tokenParsed != null) {
|
||||
fullName.value = keycloak.tokenParsed.name;
|
||||
}
|
||||
console.log(fullName.value);
|
||||
|
||||
await fetchDataCalendar();
|
||||
await fectOptionType();
|
||||
});
|
||||
|
|
@ -257,12 +201,10 @@ onMounted(async () => {
|
|||
|
||||
<template>
|
||||
<div class="row">
|
||||
<!-- Filter ตามคนและประเภทการลา -->
|
||||
<div class="col-sm-12 col-md-3 q-mt-sm q-pr-sm">
|
||||
<q-card class="col-12">
|
||||
<div class="q-gutter-sm">
|
||||
<q-list bordered class="rounded-borders">
|
||||
<!-- <q-item-label header>User</q-item-label> -->
|
||||
<q-item
|
||||
v-for="(item, i) in filterLists"
|
||||
:key="i"
|
||||
|
|
@ -281,11 +223,6 @@ onMounted(async () => {
|
|||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<!-- show value filterVal -->
|
||||
<!-- <div class="q-px-sm q-mt-sm">
|
||||
Your selection is: <strong>{{ filterVal }}</strong>
|
||||
</div> -->
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
|
|
@ -341,22 +278,12 @@ onMounted(async () => {
|
|||
class="row col-12 items-center no-wrap"
|
||||
:style="`background: + ${arg.event.color}`"
|
||||
>
|
||||
<!-- <b>{{ arg.timeText }}</b> -->
|
||||
<div
|
||||
class="textHover col-10"
|
||||
@click="onCilckview(arg.event.id)"
|
||||
>
|
||||
{{ arg.event.title }}
|
||||
</div>
|
||||
<q-btn
|
||||
dense
|
||||
v-if="arg.event.groupId == 1"
|
||||
icon="mdi-close"
|
||||
flat
|
||||
round
|
||||
size="8px"
|
||||
@click="cancel(arg.event.title)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</FullCalendar>
|
||||
|
|
@ -382,14 +309,6 @@ onMounted(async () => {
|
|||
/>
|
||||
<span class="text-caption text-grey-8">การลาของบุคคลอื่น</span>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,14 @@ import { useQuasar } from "quasar";
|
|||
import http from "@/plugins/http";
|
||||
import config from "@/app.config";
|
||||
|
||||
/** import type*/
|
||||
import type {
|
||||
FremDetail,
|
||||
FormDelete,
|
||||
FormDeleteRef,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
|
||||
/** import componest*/
|
||||
import FormLeave from "@/modules/05_leave/componenst/formDetail/formLeave.vue";
|
||||
import FormChildbirth from "@/modules/05_leave/componenst/formDetail/formChildbirth.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 FormVocationalRehabilitation from "@/modules/05_leave/componenst/formDetail/formVocationalRehabilitation.vue";
|
||||
|
||||
/** import stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
const mixin = useCounterMixin();
|
||||
const {
|
||||
|
|
@ -33,6 +37,7 @@ const {
|
|||
} = mixin;
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const props = defineProps({
|
||||
modal: {
|
||||
type: Boolean,
|
||||
|
|
@ -66,13 +71,8 @@ const titleName = ref<string>("");
|
|||
const checkForm = ref<string>("");
|
||||
|
||||
/** Form รายละเอียดข้อมูล*/
|
||||
const formData = reactive<any>({
|
||||
const formData = reactive<FremDetail>({
|
||||
id: "", //Id การยื่นขอลา
|
||||
// reasonCommander: "", //เหตุผลผู้บังคับบัญชา
|
||||
// reasonOligarch: "", //เหตุผลผู้มีอำนาจ
|
||||
// positionName: "", //ตำแหน่งผู้ยื่นขอ
|
||||
// positionLevelName: "", //ระดับผู้ยื่นขอ
|
||||
// organizationName: "", //สังกัดผู้ยื่นขอ
|
||||
leaveTypeName: "", // Name ประเภทการลา
|
||||
leaveTypeId: "", //Id ประเภทการลา
|
||||
fullname: "", //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
|
|
@ -81,12 +81,6 @@ const formData = reactive<any>({
|
|||
leaveDateStart: new Date(), //วันเริ่มการลา
|
||||
leaveDateEnd: new Date(), //วันสิ้นสุดการลา
|
||||
leaveCount: 0, //จำนวนวันลา
|
||||
|
||||
// leaveLimit: 0, //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
// leaveSummary: 0, //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
// leaveRemain: 0, //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
// leaveStartDate: new Date(), //*วัน เดือน ปีเริ่มต้นลา
|
||||
// leaveEndDate: new Date(), //*วัน เดือน ปีสิ้นสุดลา
|
||||
leaveWrote: "", //เขียนที่
|
||||
leaveAddress: "", //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: "", //หมายเลขที่ติดต่อขณะลา
|
||||
|
|
@ -105,14 +99,14 @@ const formData = reactive<any>({
|
|||
wifeDayDateBorn: new Date(), //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: 0, //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
restDayCurrentTotal: 0, //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||
ordainDayStatus: false, //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayStatus: "", //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: "", //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: "", //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: "", //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: new Date(), //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: "", //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: "", //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: false, //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
|
||||
hajjDayStatus: "", //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
|
||||
absentDaySummon: "", //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: "", //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: new Date(), //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
|
|
@ -137,6 +131,7 @@ const formData = reactive<any>({
|
|||
step: "",
|
||||
});
|
||||
|
||||
/** form ขอยกเลิก*/
|
||||
const formDelete = reactive<FormDelete>({
|
||||
writeAt: "",
|
||||
reason: "",
|
||||
|
|
@ -146,13 +141,16 @@ const formDelete = reactive<FormDelete>({
|
|||
const writeAtRef = ref<Object | null>(null);
|
||||
const reasonRef = ref<Object | null>(null);
|
||||
const docRef = ref<Object | null>(null);
|
||||
|
||||
const formDeleteRef: FormDeleteRef = {
|
||||
writeAt: writeAtRef,
|
||||
reason: reasonRef,
|
||||
doc: docRef,
|
||||
};
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลการลา
|
||||
* @param id การลา
|
||||
*/
|
||||
async function fetchDataDetail(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
@ -161,11 +159,6 @@ async function fetchDataDetail(id: string) {
|
|||
const data = res.data.result;
|
||||
titleName.value = data.fullName;
|
||||
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;
|
||||
|
|
@ -176,9 +169,6 @@ async function fetchDataDetail(id: string) {
|
|||
data.leaveStartDate && date2Thai(data.leaveStartDate);
|
||||
formData.leaveDateEnd = data.leaveEndDate && date2Thai(data.leaveEndDate);
|
||||
formData.leaveCount = data.leaveTotal;
|
||||
// formData.leaveLimit = data.leaveLimit;
|
||||
// formData.leaveSummary = data.leaveSummary;
|
||||
// formData.leaveRemain = data.leaveRemain;
|
||||
formData.leaveWrote = data.leaveWrote;
|
||||
formData.leaveAddress = data.leaveAddress;
|
||||
formData.leaveNumber = data.leaveNumber;
|
||||
|
|
@ -196,8 +186,6 @@ async function fetchDataDetail(id: string) {
|
|||
data.leavegovernmentDate && date2Thai(data.leavegovernmentDate);
|
||||
formData.leaveSalary = data.leaveSalary;
|
||||
formData.leaveSalaryText = data.leaveSalaryText;
|
||||
// formData.leaveTypeDay =
|
||||
// e.leaveTypeDay && stores.convertLeaveDaytype(e.leaveTypeDay);
|
||||
formData.wifeDayName = data.wifeDayName;
|
||||
formData.wifeDayDateBorn =
|
||||
data.wifeDayDateBorn && date2Thai(data.wifeDayDateBorn);
|
||||
|
|
@ -240,7 +228,6 @@ async function fetchDataDetail(id: string) {
|
|||
data.coupleDayEndDateHistory && date2Thai(data.coupleDayEndDateHistory);
|
||||
formData.coupleDaySumTotalHistory = data.coupleDaySumTotalHistory;
|
||||
formData.step = data.step;
|
||||
// checkLeaveType(formData.leaveTypeId ? formData.leaveTypeId : "");
|
||||
checkLeaveType(formData.leaveTypeId, formData.leaveTypeName);
|
||||
})
|
||||
.catch((err) => {
|
||||
|
|
@ -252,6 +239,11 @@ async function fetchDataDetail(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* function check ประเภทการลา
|
||||
* @param leaveTypeId ประเภทการลา
|
||||
* @param leaveTypeName ประเภทการลา
|
||||
*/
|
||||
function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
|
||||
if (props.leaveType) {
|
||||
const filtertype = props.leaveType.find((e: any) => e.id === leaveTypeId);
|
||||
|
|
@ -282,6 +274,10 @@ function checkLeaveType(leaveTypeId: string, leaveTypeName: string) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* function เรียกข้อมูลยกเลิกการลา
|
||||
* @param id ยกเลิกการลา
|
||||
*/
|
||||
async function fetchDataCancelDetail(id: string) {
|
||||
showLoader();
|
||||
await http
|
||||
|
|
@ -297,6 +293,7 @@ async function fetchDataCancelDetail(id: string) {
|
|||
});
|
||||
}
|
||||
|
||||
/** function ยินยันการบันทึกข้อมูล*/
|
||||
async function onClickSave() {
|
||||
const hasError = [];
|
||||
for (const key in formDeleteRef) {
|
||||
|
|
@ -322,6 +319,7 @@ async function onClickSave() {
|
|||
}
|
||||
}
|
||||
|
||||
/** function บันทึกข้อมูล*/
|
||||
async function onSubmit() {
|
||||
showLoader();
|
||||
const id = props.leaveId ? props.leaveId : "";
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import { ref, onMounted } from "vue";
|
||||
import { useQuasar } from "quasar";
|
||||
import http from "@/plugins/http";
|
||||
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 {
|
||||
FormDelete,
|
||||
FormDeleteRef,
|
||||
} from "@/modules/05_leave/interface/response/leave";
|
||||
/** import componest*/
|
||||
import DialogDetail from "@/modules/05_leave/componenst/DialogDetail.vue";
|
||||
import Table from "@/modules/05_leave/componenst/Table.vue";
|
||||
|
||||
/** import stort*/
|
||||
import { useCounterMixin } from "@/stores/mixin";
|
||||
import { useLeaveStore } from "@/modules/05_leave/store";
|
||||
|
||||
|
|
@ -22,6 +22,7 @@ const LeaveData = useLeaveStore();
|
|||
|
||||
const $q = useQuasar();
|
||||
|
||||
/** filter */
|
||||
const year = ref<number>(new Date().getFullYear());
|
||||
const type = ref<string>("00000000-0000-0000-0000-000000000000");
|
||||
const status = ref<string>("ALL");
|
||||
|
|
@ -32,6 +33,7 @@ const maxPage = ref<number>(1);
|
|||
const page = ref<number>(1);
|
||||
const pageSize = ref<number>(10);
|
||||
|
||||
/** function เรียกข้อมูลการลา*/
|
||||
async function fetchDataTable() {
|
||||
showLoader();
|
||||
const body = {
|
||||
|
|
@ -57,7 +59,8 @@ async function fetchDataTable() {
|
|||
});
|
||||
}
|
||||
|
||||
const leaveType = ref<any>();
|
||||
const leaveType = ref<LeaveType[]>();
|
||||
/** function เรียกประเภทการลา */
|
||||
async function fectOptionType() {
|
||||
await http
|
||||
.get(config.API.leaveType())
|
||||
|
|
@ -75,18 +78,28 @@ const leaveId = ref<string>("");
|
|||
const leaveStatus = ref<string>("");
|
||||
|
||||
/**
|
||||
* ฟังก์ชั่นเปิด model
|
||||
* @param text
|
||||
* function openPopupDateail
|
||||
* @param id การลา
|
||||
* @param status การลา
|
||||
*/
|
||||
const onClickView = async (id: string, status: string) => {
|
||||
modal.value = true;
|
||||
leaveId.value = id;
|
||||
leaveStatus.value = status;
|
||||
};
|
||||
|
||||
/** function closePopup*/
|
||||
async function onClickClose() {
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* function updateFilter
|
||||
* @param y ปีงบประมาณ
|
||||
* @param t ประเภทการลา
|
||||
* @param s สภานะ
|
||||
* @param k คำค้นหา
|
||||
*/
|
||||
async function updateFilterTable(y: number, t: string, s: string, k: string) {
|
||||
if (t && s) {
|
||||
year.value = await y;
|
||||
|
|
@ -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) {
|
||||
(page.value = await p), (pageSize.value = await ps);
|
||||
await fetchDataTable();
|
||||
|
|
|
|||
|
|
@ -1,23 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, useAttrs, onMounted, watch } from "vue";
|
||||
import { ref, useAttrs, watch } from "vue";
|
||||
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";
|
||||
|
||||
const mixin = useCounterMixin();
|
||||
/** import stort*/
|
||||
const leaveStore = useLeaveStore();
|
||||
const { messageError } = mixin;
|
||||
const { fetchLeaveType, filterOption } = leaveStore;
|
||||
const { filterOption } = leaveStore;
|
||||
|
||||
const attrs = ref<any>(useAttrs());
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
const table = ref<any>(null);
|
||||
const filterRef = ref<any>(null);
|
||||
|
||||
/** รับ props มาจากหน้าหลัก */
|
||||
const props = defineProps({
|
||||
count: Number,
|
||||
|
|
@ -54,6 +47,8 @@ const emit = defineEmits([
|
|||
"update:editvisible",
|
||||
]);
|
||||
|
||||
const table = ref<any>(null);
|
||||
|
||||
/**
|
||||
* ตั้งค่า pagination
|
||||
*/
|
||||
|
|
@ -65,9 +60,10 @@ const pagination = ref({
|
|||
rowsPerPage: Number(props.pageSize),
|
||||
});
|
||||
|
||||
const updateVisible = (value: []) => {
|
||||
/** updateVisible*/
|
||||
function updateVisible(value: []) {
|
||||
emit("update:inputvisible", value);
|
||||
};
|
||||
}
|
||||
|
||||
/** filter */
|
||||
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 filter = ref<string>("");
|
||||
|
||||
/** function updateFilter*/
|
||||
function filterTable() {
|
||||
emit("update:filter", year.value, type.value, status.value, filter.value);
|
||||
}
|
||||
|
||||
/** function updatePagination*/
|
||||
function updatePagination(p: number, ps: number) {
|
||||
emit("update:Pagination", p, ps);
|
||||
}
|
||||
|
||||
/** function updatePageSize*/
|
||||
function updatePageSize(newPageSize: any) {
|
||||
currentPage.value = 1;
|
||||
pagination.value.rowsPerPage = newPageSize.rowsPerPage;
|
||||
}
|
||||
|
||||
// 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], () => {
|
||||
updatePagination(currentPage.value, pagination.value.rowsPerPage);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
// await fectOptionType();
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<div class="q-py-sm row">
|
||||
|
|
@ -198,28 +181,7 @@ onMounted(async () => {
|
|||
</template></q-select
|
||||
>
|
||||
<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 -->
|
||||
<q-select
|
||||
:model-value="inputvisible"
|
||||
|
|
|
|||
|
|
@ -20,70 +20,60 @@ interface ListLeaveTable {
|
|||
|
||||
interface FremDetail {
|
||||
id: string; //Id การยื่นขอลา
|
||||
reasonCommander: string; //เหตุผลผู้บังคับบัญชา
|
||||
reasonOligarch: string; //เหตุผลผู้มีอำนาจ
|
||||
positionName: string; //ตำแหน่งผู้ยื่นขอ
|
||||
positionLevelName: string; //ระดับผู้ยื่นขอ
|
||||
organizationName: string; //สังกัดผู้ยื่นขอ
|
||||
leaveTypeName: string | null; //Name ประเภทการลา
|
||||
leaveTypeId: string | null; //Id ประเภทการลา
|
||||
leaveTypeName: string; // Name ประเภทการลา
|
||||
leaveTypeId: string; //Id ประเภทการลา
|
||||
fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
|
||||
dateSendLeave: Date | null; //วันที่ยื่นใบลา
|
||||
leaveDateStart: Date | null; //วันเริ่มการลา
|
||||
leaveDateEnd: Date | null; //วันสิ้นสุดการลา
|
||||
leaveCount: number;
|
||||
dateSendLeave: Date; // วันที่ยืนใบลา
|
||||
status: string; //สถานะการของลา
|
||||
leaveLimit: number; //โควต้าลา(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveSummary: number; //ลาป่วยไปแล้ว(แต่ละประเภท)หน่วยเป็นวัน
|
||||
leaveRemain: number; //คงเหลือโควต้า(แต่ละประเภท)หน่วยเป็นวัน
|
||||
// leaveStartDate: Date | null; //*วัน เดือน ปีเริ่มต้นลา
|
||||
// leaveEndDate: Date | null; //*วัน เดือน ปีสิ้นสุดลา
|
||||
leaveDateStart: Date; //วันเริ่มการลา
|
||||
leaveDateEnd: Date; //วันสิ้นสุดการลา
|
||||
leaveCount: number; //จำนวนวันลา
|
||||
leaveWrote: string; //เขียนที่
|
||||
leaveAddress: string; //สถานที่ติดต่อขณะลา
|
||||
leaveNumber: string; //หมายเลขที่ติดต่อขณะลา
|
||||
leaveDetail: string; //รายละเอียดการลา
|
||||
leaveDocument: string; //อัปโหลดเอกสารประกอบรายละเอียด
|
||||
leaveDraftDocument: string; //อัปโหลดแบบฟอร์มการลา
|
||||
leaveLastStart: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastEnd: Date | null; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastStart: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ เริ่มเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveLastEnd: Date; //ลาครั้งสุดท้ายในประเภทนั้น ๆ สิ้นสุดเมื่อวันที่(ลาป่วย ลาคลอดบุตร และลากิจส่วนตัว)(Auto)
|
||||
leaveTotal: number; //จำนวนวันที่ลา(Auto)
|
||||
leavebirthDate: Date | null; //วันเดือนปีเกิด(Auto)
|
||||
leavegovernmentDate: Date | null; //วันที่เข้ารับราชการ(Auto)
|
||||
leaveSalary: Number; //เงินเดือนปัจจุบัน(Auto)
|
||||
leaveSalaryText: String; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||
leavebirthDate: Date; //วันเดือนปีเกิด(Auto)
|
||||
leavegovernmentDate: Date; //วันที่เข้ารับราชการ(Auto)
|
||||
leaveSalary: number; //เงินเดือนปัจจุบัน(Auto)
|
||||
leaveSalaryText: string; //เงินเดือนปัจจุบัน(เขียนเป็นคำอ่าน)
|
||||
leaveTypeDay: string; //ประเภทการลาในวันนั้นเช่น
|
||||
wifeDayName: String; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
wifeDayDateBorn: Date | null; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: Number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
wifeDayName: string; //ชื่อภรรยา(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
wifeDayDateBorn: Date; //วันที่คลอด(ลาไปช่วยเหลือภริยาที่คลอดบุตร)
|
||||
restDayOldTotal: number; //จำนวนวันลาพักผ่อนสะสม จากปีที่ผ่านมา(ลาพักผ่อน)(Auto)
|
||||
restDayCurrentTotal: number; //จำนวนวันลาพักผ่อนประจำปีปัจจุบัน(ลาพักผ่อน)(Auto)
|
||||
ordainDayStatus: Boolean; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: String; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: String; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: String; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: Date | null; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: String; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: String; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: Boolean; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
|
||||
absentDaySummon: String; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: String; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: Date | null; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayGetIn: String; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayAt: String; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
studyDaySubject: String; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayDegreeLevel: String; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayUniversityName: String; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingSubject: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingName: String; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayCountry: String; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayScholarship: String; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
coupleDayName: String; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayPosition: String; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevel: String; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevelCountry: String; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayCountryHistory: String; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayTotalHistory: String; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
coupleDayStartDateHistory: Date | null; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: Date | null; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
ordainDayStatus: string; //เคย/ไม่เคยบวช (ให้เลือก) (ลาอุปสมบท)
|
||||
ordainDayLocationName: string; //สถานที่บวช ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayLocationAddress: string; //สถานที่บวช ที่อยู่(ลาอุปสมบท)
|
||||
ordainDayLocationNumber: string; //สถานที่บวช หมายเลขโทรศัพท์(ลาอุปสมบท)
|
||||
ordainDayOrdination: Date; //สถานที่บวช วันอุปสมบท(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentName: string; //สถานที่จำพรรษา ชื่อวัด(ลาอุปสมบท)
|
||||
ordainDayBuddhistLentAddress: string; //สถานที่จำพรรษา ที่อยู่(ลาอุปสมบท)
|
||||
hajjDayStatus: string; //เคย/ไม่เคยไปประกอบพิธีฮัจย์ (ให้เลือก) (ลาประกอบพิธีฮัจย์)
|
||||
absentDaySummon: string; //ได้รับหมายเรียกของ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayLocation: string; //ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayRegistorDate: Date; //ลงวันที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayGetIn: string; //ให้เข้ารับการ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
absentDayAt: string; //ณ ที่ (ลาเข้ารับการตรวจเลือกหรือเข้ารับการเตรียมพล)
|
||||
studyDaySubject: string; //กรณีลาไปศึกษาต่อ ศึกษาวิชา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayDegreeLevel: string; //กรณีลาไปศึกษาต่อ ขั้นปริญญา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayUniversityName: string; //กรณีลาไปศึกษาต่อ ชื่อสถานศึกษา (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingSubject: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ด้าน/หลักสูตร (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayTrainingName: string; //กรณีลาไปฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน ณ สถานที่ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayCountry: string; //ประเทศ (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
studyDayScholarship: string; //ด้วยทุน (ลาไปศึกษา ฝึกอบรม ปฏิบัติการวิจัย หรือดูงาน)
|
||||
coupleDayName: string; //ชื่อคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayPosition: string; //ตำแหน่งคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevel: string; //ระดับคู่สมรส (ลาติดตามคู่สมรส)
|
||||
coupleDayLevelCountry: string; //ไปปฏิบัติราชการ ณ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayCountryHistory: string; //ประวัติ ประเทศ (ลาติดตามคู่สมรส)
|
||||
coupleDayTotalHistory: string; //ประวัติ เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
coupleDayStartDateHistory: Date; //ประวัติ ตั้งแต่วันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDayEndDateHistory: Date; //ประวัติ ถึงวันที่ (ลาติดตามคู่สมรส)
|
||||
coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
|
||||
step: string;
|
||||
}
|
||||
|
|
@ -100,10 +90,43 @@ interface FormDeleteRef {
|
|||
[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 {
|
||||
ListLeave,
|
||||
ListLeaveTable,
|
||||
FremDetail,
|
||||
FormDelete,
|
||||
FormDeleteRef,
|
||||
DataCalendar,
|
||||
LeaveType,
|
||||
FilterList,
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue