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

API เรียกคืนเครื่องราชฯ

Browse source
This commit is contained in:
DESKTOP-1R2VSQH\Lenovo ThinkPad E490 2025-05-07 17:18:06 +07:00
parent 0ff6ad85f0
commit 27da100141
7 changed files with 421 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

@ -1,20 +1,29 @@
<script setup lang="ts"> <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 { QForm, useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin"; import { useCounterMixin } from "@/stores/mixin";
import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow"; import { useBrrowDataStore } from "@/modules/07_insignia/storeBrrow";
import { useInsigniaReclaimStore } from "@/modules/07_insignia/storeReclaim";
import http from "@/plugins/http"; import http from "@/plugins/http";
import config from "@/app.config"; import config from "@/app.config";
/** impotrType */ /** impotrType */
import type { PropType } from "vue";
import type { QTableColumn } from "quasar"; import type { QTableColumn } from "quasar";
import type {
DataReclaim,
DataNoteList,
DataRound,
} from "@/modules/07_insignia/interface/response/Reclaim";
/** impotrComponents */ /** impotrComponents */
import DialogHeader from "@/components/DialogHeader.vue"; import DialogHeader from "@/components/DialogHeader.vue";
const $q = useQuasar(); const $q = useQuasar();
const brrowDataStore = useBrrowDataStore(); const brrowDataStore = useBrrowDataStore();
const { roundData } = storeToRefs(useInsigniaReclaimStore());
const mixin = useCounterMixin(); const mixin = useCounterMixin();
const { const {
date2Thai, date2Thai,
@ -24,19 +33,27 @@ const {
showLoader, showLoader,
hideLoader, hideLoader,
onSearchDataTable, onSearchDataTable,
convertDateToAPI,
} = mixin; } = mixin;
/** props*/ /** props*/
const modal = defineModel<boolean>("modal", { required: true }); const modal = defineModel<boolean>("modal", { required: true });
const isEdit = defineModel<boolean>("isEdit", { 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 rows = ref<DataNoteList[]>([]);
const rowsMain = ref<any[]>([]); const rowsMain = ref<DataNoteList[]>([]);
const keyword = ref<string>(""); const keyword = ref<string>("");
const selected = ref<any[]>([]); const selected = ref<DataNoteList[]>([]);
const columns = ref<QTableColumn[]>([ const columns = ref<QTableColumn[]>([
{ {
name: "noNumber", name: "noNumber",
@ -113,64 +130,6 @@ const columns = ref<QTableColumn[]>([
headerStyle: "font-size: 14px", headerStyle: "font-size: 14px",
style: "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[]>([ const visibleColumns = ref<string[]>([
"noNumber", "noNumber",
@ -180,34 +139,28 @@ const visibleColumns = ref<string[]>([
"position", "position",
"requestInsignia", "requestInsignia",
"dateReceive", "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 cardid = ref<string>(""); //เลขประจำตัวประชาชน
const fullName = ref<string>(""); //ชื่อ-นามสกุล const fullName = ref<string>(""); //ชื่อ-นามสกุล
const insigniaType = ref<string>(""); //เครื่องราชฯ const insigniaType = ref<string>(""); //เครื่องราชฯ
const receivedate = ref<Date | null>(); //วันที่ยืม const receivedate = ref<Date | null>(null); //วันที่ยืม
const reason = ref<string>(""); //หมายเหตุการเรียกคืน const reason = ref<string>(""); //หมายเหตุการเรียกคืน
const filterSelectRound = ref<any>(); const filterSelectRound = ref<DataRound[]>([]);
/** function เคลียร์ข้อมูลในฟอร์ม*/
function clearData() {}
/** function เรียกข้อมูลรายชื่อที่ได้รับเครื่องราช*/ /** function เรียกข้อมูลรายชื่อที่ได้รับเครื่องราช*/
async function fecthListPerson() { async function fecthListPerson() {
if (roundNo.value !== "" && roundNo.value !== null) { rows.value = [];
rowsMain.value = [];
if (insigniaNoteId.value !== "" && insigniaNoteId.value !== null) {
let data = { let data = {
// insigniaTypeId: props.typeId, insigniaNoteId: insigniaNoteId.value,
insigniaNoteId: roundNo.value,
insigniaId: "", insigniaId: "",
}; };
showLoader();
await http await http
.post(config.API.noteSearchList(), data) .post(config.API.noteSearchList(), data)
.then((res) => { .then((res) => {
@ -216,20 +169,54 @@ async function fecthListPerson() {
}) })
.catch((err) => { .catch((err) => {
messageError($q, err); messageError($q, err);
})
.finally(() => {
hideLoader();
}); });
} }
} }
/** /** function บันทึกการเพิ่มข้อมูล*/
* function บันทึกการเพิ่มข้อมูล
*/
async function onSubmit() { 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 closePopup*/
function closeDialog() { function closeDialog() {
modal.value = false; modal.value = false;
selected.value = [];
fullName.value = "";
cardid.value = "";
insigniaType.value = "";
receivedate.value = null;
reason.value = "";
keyword.value = "";
} }
function serchDataTable() { function serchDataTable() {
@ -240,8 +227,39 @@ 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 ให้ดึงรายการข้อมูล*/ /** 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;
console.log(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> </script>
<template> <template>
@ -346,10 +364,10 @@ watch(modal, () => {});
<q-separator vertical /> <q-separator vertical />
<div class="q-pa-md col"> <div class="q-pa-md col">
<div class="row q-col-gutter-sm"> <div class="row q-col-gutter-sm">
<div class="col-12"> <div class="col-12" v-if="!isEdit">
<q-select <q-select
:class="!isEdit ? 'inputgreen' : ''" :class="!isEdit ? 'inputgreen' : ''"
v-model="roundNo" v-model="insigniaNoteId"
:readonly="isEdit" :readonly="isEdit"
dense dense
outlined outlined
@ -456,6 +474,7 @@ watch(modal, () => {});
</div> </div>
<div class="col-12"> <div class="col-12">
<q-input <q-input
class="inputgreen"
v-model="reason" v-model="reason"
dense dense
outlined outlined
@ -473,7 +492,12 @@ watch(modal, () => {});
<q-separator /> <q-separator />
<q-card-actions align="right"> <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-tooltip>บันทึก</q-tooltip>
</q-btn> </q-btn>
</q-card-actions> </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 { defineStore } from "pinia";
import { ref } from "vue"; 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", () => { export const useInsigniaReclaimStore = defineStore("insigniaReclaim", () => {
const roundData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]); const roundData = ref<DataRound[]>([{ name: "ทั้งหมด", id: "all", year: 0 }]);
const insigniaTypeData = ref<any[]>([{ name: "ทั้งหมด", id: "all" }]); const insigniaTypeData = ref<OptionData[]>([{ name: "ทั้งหมด", id: "all" }]);
const employeeClassData = ref<any[]>([ const employeeClassData = ref<OptionData[]>([
{ name: "ทั้งหมด", id: "all" }, { name: "ทั้งหมด", id: "all" },
{ name: "ข้าราชการ กทม.สามัญ", id: "officer" }, { name: "ข้าราชการ กทม.สามัญ", id: "officer" },
{ name: "ลูกจ้างประจำ", id: "perm" }, { name: "ลูกจ้างประจำ", id: "perm" },

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

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

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

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

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

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