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

Merge branch 'develop' into devTee

Browse source
This commit is contained in:
setthawutttty 2025-05-07 22:09:08 +07:00
commit b8f2fbcc36
8 changed files with 424 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/File/สรรหาสอบแข่งขัน_จำนวนผู้สอบทั้งหมด.xlsx
View file

Binary file not shown.

2
src/api/manage/api.insignia.ts
View file

@ -7,6 +7,7 @@ const insignia = `${env.API_URI}/metadata/insignia/`;
const insigniaType = `${env.API_URI}/metadata/insignia-type/`;
const insigniaOrg = `${env.API_URI}/org/insignia/insignia/`;
const insigniaTypeOrg = `${env.API_URI}/org/insignia/insignia-type/`;
const insigniaReclaim = `${env.API_URI}/insignia/manage/reclaim`;
export default {
/**
@ -47,4 +48,5 @@ export default {
insigniaSortOrg: (id: string) => `${insigniaOrg}sort/${id}`,
checkIsofficer: `${env.API_URI}/org/workflow/keycloak/isofficer/`,
insigniaReclaim,
};

202
src/modules/07_insignia/components/7_Reclaim/DialogForm.vue
View file

@ -1,20 +1,29 @@
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";
import { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
import { useInsigniaReclaimStore } from "@/modules/07_insignia/storeReclaim";
import http from "@/plugins/http";
import config from "@/app.config";
/** impotrType */
import type { PropType } from "vue";
import type { QTableColumn } from "quasar";
import type {
DataReclaim,
DataNoteList,
DataRound,
} from "@/modules/07_insignia/interface/response/Reclaim";
/** impotrComponents */
import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar();
const brrowDataStore = useBrrowDataStore();
const { roundData } = storeToRefs(useInsigniaReclaimStore());
const mixin = useCounterMixin();
const {
date2Thai,
@ -24,19 +33,27 @@ const {
showLoader,
hideLoader,
onSearchDataTable,
convertDateToAPI,
} = mixin;
/** props*/
const modal = defineModel<boolean>("modal", { required: true });
const isEdit = defineModel<boolean>("isEdit", { required: true });
const insigniaReclaimId = defineModel<string>("insigniaReclaimId", {
required: true,
default: "",
});
const props = defineProps({});
const props = defineProps({
fetchData: { type: Function, required: true },
insigniaReclaimData: {
type: Object as PropType<DataReclaim>,
},
});
const rows = ref<any[]>([]);
const rowsMain = ref<any[]>([]);
const rows = ref<DataNoteList[]>([]);
const rowsMain = ref<DataNoteList[]>([]);
const keyword = ref<string>("");
const selected = ref<any[]>([]);
const selected = ref<DataNoteList[]>([]);
const columns = ref<QTableColumn[]>([
{
name: "noNumber",
@ -89,7 +106,7 @@ const columns = ref<QTableColumn[]>([
{
name: "requestInsignia",
align: "left",
label: "เครื่องราชๆ",
label: "เครื่องราชฯ",
field: "requestInsignia",
format(val, row) {
return `${row.requestInsignia ?? ""}
@ -113,64 +130,6 @@ const columns = ref<QTableColumn[]>([
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
// {
// name: "date",
// align: "left",
// label: "วันที่ในราชกิจนุเบกษา",
// field: "date",
// sortable: true,
// format(val, row) {
// return date2Thai(val);
// },
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "volumeNo",
// align: "left",
// label: "เล่มที่ในราชกิจนุเบกษา",
// field: "volumeNo",
// sortable: true,
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "section",
// align: "left",
// label: "ตอนที่ในราชกิจนุเบกษา",
// field: "section",
// sortable: true,
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "page",
// align: "left",
// label: "หน้าในราชกิจนุเบกษา",
// field: "page",
// sortable: true,
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "no",
// align: "left",
// label: "ลำดับที่ในราชกิจจานุเบกษา",
// field: "no",
// sortable: true,
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
// {
// name: "number",
// align: "left",
// label: "หมายเลขใบกำกับ",
// field: "number",
// sortable: true,
// headerStyle: "font-size: 14px",
// style: "font-size: 14px",
// },
]);
const visibleColumns = ref<string[]>([
"noNumber",
@ -180,34 +139,28 @@ const visibleColumns = ref<string[]>([
"position",
"requestInsignia",
"dateReceive",
// "date",
// "volumeNo",
// "section",
// "page",
// "no",
// "number",
]);
const roundNo = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
const insigniaNoteId = ref<string | undefined>(""); //รอบการขอเครื่องราชฯ
const insigniaNoteProfileId = ref<string>("");
const cardid = ref<string>(""); //เลขประจำตัวประชาชน
const fullName = ref<string>(""); //ชื่อ-นามสกุล
const insigniaType = ref<string>(""); //เครื่องราชฯ
const receivedate = ref<Date | null>(); //วันที่ยืม
const receivedate = ref<Date | null>(null); //วันที่ยืม
const reason = ref<string>(""); //หมายเหตุการเรียกคืน
const filterSelectRound = ref<any>();
/** function เคลียร์ข้อมูลในฟอร์ม*/
function clearData() {}
const filterSelectRound = ref<DataRound[]>([]);
/** function เรียกข้อมูลรายชื่อที่ได้รับเครื่องราช*/
async function fecthListPerson() {
if (roundNo.value !== "" && roundNo.value !== null) {
rows.value = [];
rowsMain.value = [];
if (insigniaNoteId.value !== "" && insigniaNoteId.value !== null) {
let data = {
// insigniaTypeId: props.typeId,
insigniaNoteId: roundNo.value,
insigniaNoteId: insigniaNoteId.value,
insigniaId: "",
};
showLoader();
await http
.post(config.API.noteSearchList(), data)
.then((res) => {
@ -216,20 +169,54 @@ async function fecthListPerson() {
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
}
}
/**
* function บันทึกการเพิ่มข้อมูล
*/
/** function บันทึกการเพิ่มข้อมูล*/
async function onSubmit() {
dialogConfirm($q, async () => {});
dialogConfirm($q, async () => {
showLoader();
const pathAPI = !isEdit.value
? config.API.insigniaReclaim
: config.API.insigniaReclaim + `/${insigniaReclaimId.value}`;
const method = !isEdit.value ? "post" : "put";
await http[method](pathAPI, {
insigniaNoteProfileId: !isEdit.value
? insigniaNoteProfileId.value
: undefined,
reclaimDate: receivedate.value,
reclaimNote: reason.value,
})
.then(async () => {
await props.fetchData?.();
closeDialog();
success($q, "บันทึกข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
/** function closePopup*/
function closeDialog() {
modal.value = false;
selected.value = [];
fullName.value = "";
cardid.value = "";
insigniaType.value = "";
receivedate.value = null;
reason.value = "";
keyword.value = "";
}
function serchDataTable() {
@ -240,8 +227,38 @@ function serchDataTable() {
);
}
watch(selected, () => {
if (modal.value) {
const data = selected.value[0];
insigniaNoteProfileId.value = data ? data.id : "";
fullName.value = data ? data.fullName : "";
cardid.value = data ? data.citizenId : "";
insigniaType.value = data
? `${data.requestInsignia} (${data.requestInsigniaShortName})`
: "";
}
});
/** function callback เช็ค props ถ้าเปิด dialog ให้ดึงรายการข้อมูล*/
watch(modal, () => {});
watch(modal, (val) => {
if (val) {
filterSelectRound.value = roundData.value?.filter((e) => e.id !== "all");
insigniaNoteId.value = filterSelectRound.value[0].id;
if (isEdit.value) {
const data = props.insigniaReclaimData;
fullName.value = data ? data?.fullName : "";
cardid.value = data ? data.citizenId : "";
insigniaType.value = data
? `${data.requestInsignia} (${data.requestInsigniaShortName})`
: "";
receivedate.value = data ? data.reclaimDate : null;
reason.value = data ? data.reclaimReason : "";
} else {
fecthListPerson();
}
}
});
</script>
<template>
@ -302,6 +319,7 @@ watch(modal, () => {});
:rows-per-page-options="[10, 25, 50, 100]"
selection="single"
v-model:selected="selected"
:visible-columns="visibleColumns"
>
<template v-slot:header="props">
<q-tr :props="props">
@ -346,10 +364,10 @@ watch(modal, () => {});
<q-separator vertical />
<div class="q-pa-md col">
<div class="row q-col-gutter-sm">
<div class="col-12">
<div class="col-12" v-if="!isEdit">
<q-select
:class="!isEdit ? 'inputgreen' : ''"
v-model="roundNo"
v-model="insigniaNoteId"
:readonly="isEdit"
dense
outlined
@ -398,7 +416,7 @@ watch(modal, () => {});
</div>
<div class="col-12 q-mt-md text-weight-bold text-grey-7">
รายละเอียดการเรียกคือเครื่องราชฯ
รายละเอียดการเรียกคืนเครื่องราชฯ
</div>
<div class="col-xs-12 col-sm-6">
<q-input
@ -456,6 +474,7 @@ watch(modal, () => {});
</div>
<div class="col-12">
<q-input
class="inputgreen"
v-model="reason"
dense
outlined
@ -473,7 +492,12 @@ watch(modal, () => {});
<q-separator />
<q-card-actions align="right">
<q-btn label="บันทึก" type="submit" color="public">
<q-btn
label="บันทึก"
type="submit"
color="public"
:disable="selected.length === 0 && !isEdit"
>
<q-tooltip>บันทึก</q-tooltip>
</q-btn>
</q-card-actions>

76
src/modules/07_insignia/interface/response/Reclaim.ts Normal file
View file

@ -0,0 +1,76 @@
interface DataReclaim {
id: string;
reclaimOrganizationId: string;
reclaimOrganization: string;
reclaimDate: Date | null;
reclaimReason: string;
lastUpdatedAt: string;
createdAt: string;
insigniaNoteProfileId: string;
citizenId: string;
prefix: string;
position: string;
fullName: string;
profileType: string;
requestInsignia: string;
requestInsigniaId: string;
requestInsigniaShortName: string;
dateReceive: string;
organizationOrganizationSend: string;
organizationOrganizationReceive: string;
insigniaNoteProfileStatus: string;
issue: string;
date: string;
volumeNo: string;
section: string;
page: string;
no: string;
datePayment: string;
typePayment: string;
address: string;
number: string;
salary: number;
}
interface DataRound {
id: string;
name: string;
year: number;
}
interface DataNoteList {
address: string;
citizenId: string;
date: string;
datePayment: string;
dateReceive: string;
dateReceiveInsignia: string;
dateReturnInsignia: string;
docReceiveInsignia: string;
docReturnInsignia: string;
fullName: string;
id: string;
issue: string;
no: string;
number: string;
orgReceiveInsignia: string;
orgReceiveInsigniaId: string;
orgReturnInsignia: string;
orgReturnInsigniaId: string;
organizationOrganizationReceive: string;
organizationOrganizationSend: string;
page: string;
position: string;
prefix: string;
profileType: string;
requestInsignia: string;
requestInsigniaId: string;
requestInsigniaShortName: string;
salary: number;
section: string;
status: string;
typePayment: string;
volumeNo: string;
}
export type { DataReclaim, DataRound, DataNoteList };

9
src/modules/07_insignia/storeReclaim.ts
View file

@ -1,10 +1,13 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
import type { DataRound } from "@/modules/07_insignia/interface/response/Reclaim";
export const useInsigniaReclaimStore = defineStore("insigniaReclaim", () => {
const roundData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]);
const insigniaTypeData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]);
const employeeClassData = ref<any[]>([
const roundData = ref<DataRound[]>([{ name: "ทั้งหมด", id: "all", year: 0 }]);
const insigniaTypeData = ref<OptionData[]>([{ name: "ทั้งหมด", id: "all" }]);
const employeeClassData = ref<OptionData[]>([
{ name: "ทั้งหมด", id: "all" },
{ name: "ข้าราชการ กทม.สามัญ", id: "officer" },
{ name: "ลูกจ้างประจำ", id: "perm" },

8
src/modules/07_insignia/views/02_ManageMain.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { onMounted, onUnmounted, defineAsyncComponent, ref } from "vue";
import { useQuasar } from "quasar";
import { useRoute } from "vue-router";
@ -19,12 +19,16 @@ import type { ResponsePeriod } from "@/modules/07_insignia/interface/response/Ma
/**import Componrnts*/
import cardTop from "@/modules/07_insignia/components/2_Manage/StatCard.vue"; // stat
import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
// import tab1 from "@/modules/07_insignia/components/2_Manage/Tab1.vue"; //คนที่ยืนขอ
import tab2 from "@/modules/07_insignia/components/2_Manage/Tab2.vue"; //คนไม่ที่ยืนขอ
import tab3 from "@/modules/07_insignia/components/2_Manage/Tab3.vue"; //คนที่ถูกลบ
import tab4 from "@/modules/07_insignia/components/2_Manage/Tab4.vue"; //หน่วยงานที่ไม่ได้ส่งชื่อ
import DialogPopupReason from "@/components/Dialogs/PopupReason.vue"; //หมายเหตุ
const tab1 = defineAsyncComponent(
() => import("@/modules/07_insignia/components/2_Manage/Tab1.vue")
);
/**use */
const $q = useQuasar(); //ใช้ noti quasar
const route = useRoute();

290
src/modules/07_insignia/views/07_ReclaimMain.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { useQuasar } from "quasar";
@ -10,6 +10,11 @@ import http from "@/plugins/http";
import config from "@/app.config";
import type { QTableColumn } from "quasar";
import type { OptionData } from "@/modules/07_insignia/interface/index/Main";
import type {
DataReclaim,
DataRound,
} from "@/modules/07_insignia/interface/response/Reclaim";
import DialogForm from "@/modules/07_insignia/components/7_Reclaim/DialogForm.vue";
@ -17,18 +22,26 @@ const $q = useQuasar();
const { roundData, insigniaTypeData, employeeClassData } = storeToRefs(
useInsigniaReclaimStore()
);
const { showLoader, hideLoader, messageError, dialogRemove } =
useCounterMixin();
const {
showLoader,
hideLoader,
messageError,
dialogRemove,
success,
date2Thai,
onSearchDataTable,
} = useCounterMixin();
/** Table*/
const rows = ref<any[]>([]);
const rows = ref<DataReclaim[]>([]);
const rowsMain = ref<DataReclaim[]>([]);
const keyword = ref<string>("");
const columns = ref<QTableColumn[]>([
{
name: "no",
name: "noNumber",
align: "left",
label: "ลำดับ",
field: "no",
field: "noNumber",
sortable: false,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
@ -52,11 +65,17 @@ const columns = ref<QTableColumn[]>([
style: "font-size: 14px",
},
{
name: "employeeType",
name: "profileType",
align: "left",
label: "ประเภทตำแหน่ง",
field: "employeeType",
field: "profileType",
sortable: true,
format(val, row) {
return (
employeeClassData.value.find((e) => e.id === val.toLowerCase())?.name ??
""
);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -66,6 +85,9 @@ const columns = ref<QTableColumn[]>([
label: "ประเภทเครื่องราชฯ",
field: "insigniaType",
sortable: true,
format(val, row) {
return `${row.requestInsignia} (${row.requestInsigniaShortName})`;
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -75,6 +97,9 @@ const columns = ref<QTableColumn[]>([
label: "วันที่ได้รับพระราชทาน",
field: "dateReceive",
sortable: true,
format(val, row) {
return date2Thai(val);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -84,6 +109,9 @@ const columns = ref<QTableColumn[]>([
label: "วันที่ในราชกิจนุเบกษา",
field: "date",
sortable: true,
format(val, row) {
return date2Thai(val);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
@ -115,89 +143,100 @@ const columns = ref<QTableColumn[]>([
style: "font-size: 14px",
},
{
name: "number",
name: "no",
align: "left",
label: "ลำดับที่ในราชกิจจานุเบกษา",
field: "no",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "number",
align: "left",
label: "หมายเลขใบกำกับ",
field: "number",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "vatnumber",
align: "left",
label: "หมายเลขใบกำกับ",
field: "vatnumber",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "payType",
name: "typePayment",
align: "left",
label: "รูปแบบการจ่าย",
field: "payType",
field: "typePayment",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "dateReturn",
name: "reclaimDate",
align: "left",
label: "วันที่เรียกคืน",
field: "dateReturn",
field: "reclaimDate",
sortable: true,
format(val, row) {
return date2Thai(val);
},
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
{
name: "reasonReturn",
name: "reclaimReason",
align: "left",
label: "หมายเหตุการเรียกคืน",
field: "reasonReturn",
field: "reclaimReason",
sortable: true,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
},
]);
const visibleColumns = ref<string[]>([
"no",
"noNumber",
"citizenId",
"fullName",
"employeeType",
"profileType",
"insigniaType",
"dateReceive",
"date",
"volumeNo",
"section",
"page",
"no",
"number",
"vatnumber",
"payType",
"dateReturn",
"reasonReturn",
"typePayment",
"reclaimDate",
"reclaimReason",
]);
const isInsigniaRound = ref<boolean>(true);
const isInsigniaRound = ref<boolean>(false);
const roundOps = ref<any[]>(roundData.value);
const insigniaTypeOps = ref<any[]>(insigniaTypeData.value);
const employeeClassOps = ref<any[]>(employeeClassData.value);
const roundOps = ref<DataRound[]>(roundData.value);
const insigniaTypeOps = ref<OptionData[]>(insigniaTypeData.value);
const employeeClassOps = ref<OptionData[]>(employeeClassData.value);
const modalForm = ref<boolean>(false);
const isEdit = ref<boolean>(false);
const insigniaReclaimId = ref<string>("");
const insigniaReclaimData = ref<DataReclaim>();
const yearRound = ref<number>(); //รอบการเสนอขอ
const insigniaType = ref<string>("all");
const employeeType = ref<string>("all");
/** function เรียกรอบการเสนอขอพระราชทานเครื่องราชฯ*/
async function fetchInsigniaRound() {
roundData.value = [{ name: "ทั้งหมด", id: "all" }];
roundData.value = [{ name: "ทั้งหมด", id: "all", year: 0 }];
await http
.get(config.API.noteround(), { params: { path: "BORROW" } })
.then(async (res) => {
let data = res.data.result;
// isInsigniaRound.value = data.length !== 0 ? true : false;
const newOption = data.map((e: any) => ({ name: e.name, id: e.id }));
roundData.value.push(...newOption);
roundData.value.push(...data);
roundOps.value = roundData.value;
yearRound.value = data[0].year;
if (data.length > 0) {
isInsigniaRound.value = true;
}
})
.catch((err) => {
messageError($q, err);
@ -211,7 +250,10 @@ async function fetchInsigniaType() {
.get(config.API.insigniaOrg)
.then(async (res) => {
let data = res.data.result;
const newOption = data.map((e: any) => ({ name: e.name, id: e.id }));
const newOption = data.map((e: OptionData) => ({
name: e.name,
id: e.id,
}));
insigniaTypeData.value.push(...newOption);
insigniaTypeOps.value = insigniaTypeData.value;
})
@ -220,36 +262,121 @@ async function fetchInsigniaType() {
});
}
function fetchDataReclaim() {
rows.value = [
{
id: "1",
no: "001",
citizenId: "1103701234567",
fullName: "นายสมชาย ใจดี",
employeeType: "ข้าราชการ",
insigniaType: "เครื่องราชอิสริยาภรณ์ชั้นที่ 4",
dateReceive: "2024-12-10",
date: "2025-01-15",
volumeNo: "78",
section: "ก",
page: "35",
number: "1432",
vatnumber: "3101234567890",
payType: "โอนเงินผ่านธนาคาร",
dateReturn: "2025-02-01",
reasonReturn: "เปลี่ยนประเภทสิทธิ",
},
];
async function fetchDataReclaim() {
await http
.post(config.API.insigniaReclaim + `-list`, {
year: yearRound.value,
})
.then((res) => {
const data = res.data.result;
rowsMain.value = data;
rows.value = data;
onSearchDataReclaim();
})
.catch((err) => {
messageError($q, err);
});
}
function onOpenDialogForm(actions: boolean, id: string = "") {
modalForm.value = true;
function onOpenDialogForm(
actions: boolean,
data: DataReclaim = {} as DataReclaim
) {
isEdit.value = actions;
insigniaReclaimId.value = actions ? data.id : "";
insigniaReclaimData.value = data;
modalForm.value = true;
}
function onDeleteDataReclaim(id: string) {
dialogRemove($q, async () => {});
dialogRemove($q, async () => {
showLoader();
await http
.delete(config.API.insigniaReclaim + `/${id}`)
.then(async () => {
await fetchDataReclaim();
success($q, "ลบข้อมูลสำเร็จ");
})
.catch((err) => {
messageError($q, err);
})
.finally(() => {
hideLoader();
});
});
}
function onSearchDataReclaim() {
if (insigniaType.value !== "all" && employeeType.value !== "all") {
const data = rowsMain.value.filter(
(e: DataReclaim) =>
e.requestInsigniaId === insigniaType.value &&
e.profileType === employeeType.value.toLocaleUpperCase()
);
rows.value = onSearchDataTable(
keyword.value,
data,
columns.value ? columns.value : []
);
} else if (insigniaType.value !== "all" && employeeType.value === "all") {
const data = rowsMain.value.filter(
(e: DataReclaim) => e.requestInsigniaId === insigniaType.value
);
rows.value = onSearchDataTable(
keyword.value,
data,
columns.value ? columns.value : []
);
} else if (insigniaType.value === "all" && employeeType.value !== "all") {
const data = rowsMain.value.filter(
(e: DataReclaim) =>
e.profileType.toLocaleUpperCase() ===
employeeType.value.toLocaleUpperCase()
);
rows.value = onSearchDataTable(
keyword.value,
data,
columns.value ? columns.value : []
);
} else if (insigniaType.value === "all" && employeeType.value === "all") {
rows.value = onSearchDataTable(
keyword.value,
rowsMain.value,
columns.value ? columns.value : []
);
}
}
/**
* function ค้นหาข้อมูลใน option
* @param val คำค้นหา
* @param update function
* @param name ชื่อ Selec
*/
function filterSelector(val: string, update: Function, name: string) {
update(() => {
const needle = val.toLowerCase();
if (name === "employeeClassOps") {
employeeClassOps.value = employeeClassData.value.filter(
(v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
);
} else if (name === "fileterInsigniaList") {
insigniaTypeOps.value = insigniaTypeData.value.filter(
(v: OptionData) => v.name.toLowerCase().indexOf(needle) > -1
);
} else if (name === "filterSelectRoundAllOption") {
roundOps.value = roundData.value.filter(
(v: DataRound) => v.name.toLowerCase().indexOf(needle) > -1
);
}
});
}
async function fetchNewData() {
showLoader();
await fetchDataReclaim();
onSearchDataReclaim();
hideLoader();
}
/** Hook*/
@ -257,7 +384,7 @@ onMounted(async () => {
try {
showLoader();
await Promise.allSettled([fetchInsigniaRound(), fetchInsigniaType()]);
fetchDataReclaim();
await fetchDataReclaim();
} catch (error) {
console.log(error);
} finally {
@ -277,6 +404,7 @@ onMounted(async () => {
<div class="row q-col-gutter-y-sm">
<div class="row q-col-gutter-sm items-center">
<q-select
v-model="yearRound"
dense
outlined
lazy-rules
@ -291,6 +419,10 @@ onMounted(async () => {
:options="roundOps"
option-value="year"
style="width: 340px"
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'filterSelectRoundAllOption'
)"
@update:model-value="fetchNewData()"
>
<template v-slot:no-option>
<q-item>
@ -301,7 +433,6 @@ onMounted(async () => {
</template>
</q-select>
</div>
<q-space />
<div class="row q-col-gutter-sm">
<q-input
@ -310,6 +441,7 @@ onMounted(async () => {
v-model="keyword"
outlined
placeholder="ค้นหา"
@keydown.enter.pervent="onSearchDataReclaim()"
>
<template v-slot:append>
<q-icon name="search" />
@ -336,6 +468,7 @@ onMounted(async () => {
<q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
<div class="row col-12 q-col-gutter-sm">
<q-select
v-model="insigniaType"
dense
outlined
use-input
@ -349,6 +482,10 @@ onMounted(async () => {
map-options
option-label="name"
option-value="id"
@update:model-value="onSearchDataReclaim"
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'fileterInsigniaList'
)"
>
<template v-slot:no-option>
<q-item>
@ -361,6 +498,7 @@ onMounted(async () => {
<q-select
class="col-2"
v-model="employeeType"
dense
outlined
lazy-rules
@ -374,6 +512,10 @@ onMounted(async () => {
:options="employeeClassOps"
option-label="name"
option-value="id"
@update:model-value="onSearchDataReclaim"
@filter="(inputValue: string,
doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
)"
>
<template v-slot:no-option>
<q-item>
@ -440,7 +582,7 @@ onMounted(async () => {
round
color="edit"
icon="edit"
@click.stop.pervent="onOpenDialogForm(true, props.row.id)"
@click.stop.pervent="onOpenDialogForm(true, props.row)"
><q-tooltip>แก้ไขข้อมูล</q-tooltip>
</q-btn>
<q-btn
@ -455,8 +597,11 @@ onMounted(async () => {
</q-btn>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div>
{{ col.value ?? "-" }}
<div v-if="col.name === 'noNumber'">
{{ props.rowIndex + 1 }}
</div>
<div v-else>
{{ col.value ? col.value : "-" }}
</div>
</q-td>
</q-tr>
@ -488,7 +633,14 @@ onMounted(async () => {
</div>
</q-card>
<DialogForm v-model:modal="modalForm" :is-edit="isEdit" />
<DialogForm
v-model:modal="modalForm"
:is-edit="isEdit"
:insignia-reclaim-id="insigniaReclaimId"
:fetch-data="fetchDataReclaim"
:round-data="roundData"
:insignia-reclaim-data="insigniaReclaimData"
/>
</template>
<style scoped></style>

2
src/modules/09_leave/components/07_LeaveHistory/DialogForm.vue
View file

@ -467,7 +467,6 @@ watch(modal, async (val) => {
outlined
label="จำนวนสิทธิ์การลา"
hide-bottom-space
mask="##"
/>
</div>
<div class="col-12">
@ -478,7 +477,6 @@ watch(modal, async (val) => {
outlined
label="วันลาที่ใช้ไป"
hide-bottom-space
mask="##"
/>
</div>
</div>