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

ทะเบียนประวัติ: เครื่องราชฯ (refactor)

Browse source
This commit is contained in:
puriphatt 2024-03-22 10:46:22 +07:00
parent 80b78245bb
commit a946d3b1c9
4 changed files with 114 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

239
src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
View file

@ -15,16 +15,13 @@ import type {
DataOptionInsignia,
InsigniaOps,
} from "@/modules/04_registryNew/interface/index/Main";
import type {
RequestItemsObject,
FormData,
} from "@/modules/04_registryNew/interface/request/Insignia";
import type { RequestItemsObject } from "@/modules/04_registryNew/interface/request/Insignia";
import type { ResponseObject } from "@/modules/04_registryNew/interface/response/Insignia";
import type { ResponseObject as Insignia } from "@/modules/07_insignia/interface/response/Main";
const $q = useQuasar();
const route = useRoute();
const store = useInsigniaDataStore();
const { mapInsigniaOption } = store;
const mixin = useCounterMixin();
const {
date2Thai,
@ -39,27 +36,24 @@ const profileId = ref<string>(
route.params.id ? route.params.id.toString() : ""
);
const insigniaData = reactive<FormData>({
id: "",
isActive: true,
const id = ref<string>("");
const insigniaType = ref<string>("");
const insigniaForm = reactive<RequestItemsObject>({
year: 0,
receiveDate: null,
insigniaId: "",
insigniaType: "",
no: "",
issue: "",
volumeNo: "",
volume: "",
section: "",
page: "",
receiveDate: null,
insigniaId: "",
dateAnnounce: null,
refCommandNo: "",
issue: "",
volumeNo: "",
refCommandDate: null,
refCommandNo: "",
note: "",
});
const editRow = ref<boolean>(false);
const myForm = ref<QForm>();
const isEdit = ref<boolean>(false);
const modal = ref<boolean>(false);
const modeView = ref<string>("table");
@ -117,10 +111,9 @@ const columns = ref<QTableProps["columns"]>([
align: "left",
label: "ลำดับชั้น",
sortable: true,
field: "insignia",
field: (v) => v.insignia.insigniaType.name,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => v.name,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
@ -277,10 +270,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
align: "left",
label: "ลำดับชั้น",
sortable: true,
field: "insignia",
field: (v) => v.insignia.insigniaType.name,
headerStyle: "font-size: 14px",
style: "font-size: 14px",
format: (v) => v.name,
sort: (a: string, b: string) =>
a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
},
@ -464,16 +456,8 @@ async function fetchInsignia() {
showLoader();
try {
const res = await http.get(config.API.insigniaOrg);
const data = res.data.result;
store.insigniaOption = [];
data.map((r: Insignia) => {
store.insigniaOption.push({
id: r.id.toString(),
name: r.name.toString() + ` (${r.shortName})`,
typeName: r.insigniaTypeName.toString(),
});
});
mapInsigniaOption(data);
} catch (error) {
messageError($q, error);
} finally {
@ -485,27 +469,13 @@ async function addEditData(editStatus: boolean = false) {
if (!profileId.value) return;
const url = editStatus
? config.API.profileNewInsignById(insigniaData.id)
? config.API.profileNewInsignById(id.value)
: config.API.profileNewInsign;
const method = editStatus ? "patch" : "post";
const reqBody: RequestItemsObject = {
...insigniaForm,
profileId: editStatus ? undefined : profileId.value,
isActive: insigniaData.isActive,
year: insigniaData.year,
no: insigniaData.no,
volume: insigniaData.volume,
section: insigniaData.section,
page: insigniaData.page,
receiveDate: insigniaData.receiveDate,
insigniaId: insigniaData.insigniaId,
dateAnnounce: insigniaData.dateAnnounce,
issue: insigniaData.issue,
volumeNo: insigniaData.volumeNo,
refCommandDate: insigniaData.refCommandDate,
refCommandNo: insigniaData.refCommandNo,
note: insigniaData.note,
};
try {
await http[method](url, reqBody);
success($q, "บันทึกข้อมูลสำเร็จ");
@ -517,62 +487,47 @@ async function addEditData(editStatus: boolean = false) {
}
}
async function clickDelete(dataId: string) {
try {
await http.delete(config.API.profileNewInsignById(dataId));
success($q, "ลบข้อมูลสำเร็จ");
await fetchData();
modal.value = false;
} catch (error) {
messageError($q, error);
} finally {
hideLoader();
}
}
// async function clickDelete(dataId: string) {
// try {
// await http.delete(config.API.profileNewInsignById(dataId));
// success($q, "ลบข้อมูลสำเร็จ");
// await fetchData();
// modal.value = false;
// } catch (error) {
// messageError($q, error);
// } finally {
// hideLoader();
// }
// }
function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) {
modal.value = true;
editRow.value = false;
isEdit.value = editStatus;
if (editStatus && row) {
Object.assign(insigniaData, row);
insigniaData.year = row.year == 0 ? 0 : row.year;
insigniaData.dateAnnounce = row.dateAnnounce as Date;
insigniaData.refCommandDate = row.refCommandDate as Date;
id.value = row.id;
insigniaType.value = row.insignia.insigniaType.name;
insigniaForm.year = row.year;
insigniaForm.no = row.no;
insigniaForm.volume = row.volume;
insigniaForm.section = row.section;
insigniaForm.page = row.page;
insigniaForm.receiveDate = row.receiveDate;
insigniaForm.insigniaId = row.insigniaId;
insigniaForm.dateAnnounce = row.dateAnnounce;
insigniaForm.issue = row.issue;
insigniaForm.volumeNo = row.volumeNo;
insigniaForm.refCommandDate = row.refCommandDate;
insigniaForm.refCommandNo = row.refCommandNo;
insigniaForm.note = row.note;
} else {
insigniaData.id = "";
insigniaData.year = 0;
insigniaData.receiveDate = null;
insigniaData.insigniaId = "";
insigniaData.insigniaType = "";
insigniaData.no = "";
insigniaData.issue = "";
insigniaData.volumeNo = "";
insigniaData.volume = "";
insigniaData.section = "";
insigniaData.page = "";
insigniaData.dateAnnounce = null;
insigniaData.refCommandNo = "";
insigniaData.refCommandDate = null;
insigniaData.note = "";
clearData();
}
}
async function clickClose() {
if (editRow.value == true) {
dialogConfirm(
$q,
async () => {
modal.value = false;
editRow.value = false;
},
"ข้อมูลมีการแก้ไข",
"ยืนยันที่จะปิดโดยไม่บันทึกใช่หรือไม่?"
);
} else {
modal.value = false;
}
clearData();
modal.value = false;
}
async function clickHistory(row: ResponseObject) {
@ -594,12 +549,8 @@ function onSubmit() {
dialogConfirm(
$q,
async () => {
myForm.value?.validate().then(async (result: boolean) => {
if (result) {
addEditData(isEdit.value);
modal.value = false;
}
});
addEditData(isEdit.value);
modal.value = false;
},
"ยืนยันการบันทึกข้อมูล",
"ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
@ -620,17 +571,31 @@ function filterSelector(val: string, update: Function, refData: string) {
}
}
watch(
() => insigniaData.insigniaId,
() => {
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
(r: DataOptionInsignia) => r.id === insigniaData.insigniaId
);
if (insigniaTypeFilter.length > 0) {
insigniaData.insigniaType = insigniaTypeFilter[0].typeName;
}
function insigniaTypeSelection() {
const insigniaTypeFilter = Ops.value.insigniaOptions.filter(
(r: DataOptionInsignia) => r.id === insigniaForm.insigniaId
);
if (insigniaTypeFilter.length > 0) {
insigniaType.value = insigniaTypeFilter[0].typeName;
}
);
}
function clearData() {
id.value = "";
(insigniaType.value = ""), (insigniaForm.year = 0);
insigniaForm.receiveDate = null;
insigniaForm.insigniaId = "";
insigniaForm.no = "";
insigniaForm.issue = "";
insigniaForm.volumeNo = "";
insigniaForm.volume = "";
insigniaForm.section = "";
insigniaForm.page = "";
insigniaForm.dateAnnounce = null;
insigniaForm.refCommandNo = "";
insigniaForm.refCommandDate = null;
insigniaForm.note = "";
}
onMounted(async () => {
await fetchData();
@ -834,7 +799,7 @@ onMounted(async () => {
<q-dialog v-model="modal" persistent>
<q-card style="width: 600px">
<q-form greedy ref="myForm" @submit="onSubmit">
<q-form greedy @submit.prevent @validation-success="onSubmit">
<DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
<q-separator />
<q-card-section class="q-p-sm">
@ -843,7 +808,7 @@ onMounted(async () => {
<datepicker
autoApply
year-picker
v-model="insigniaData.year"
v-model="insigniaForm.year"
week-start="0"
menu-class-name="modalfix"
:locale="'th'"
@ -857,17 +822,15 @@ onMounted(async () => {
<q-input
dense
outlined
lazy-rules
hide-bottom-space
class="inputgreen"
:model-value="insigniaData.year !== 0 ? (insigniaData.year as number) + 543 : null"
:model-value="insigniaForm.year !== 0 ? (insigniaForm.year as number) + 543 : null"
:rules="[
(val:string) =>
!!val ||
`${'กรุณาเลือกปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`,
]"
:label="`${'ปีที่ยื่นขอพระราชทานเครื่องราชฯ'}`"
@update:modelValue="() => (editRow = true)"
>
<template v-slot:prepend>
<q-icon
@ -886,7 +849,7 @@ onMounted(async () => {
borderless
week-start="0"
menu-class-name="modalfix"
v-model="insigniaData.receiveDate"
v-model="insigniaForm.receiveDate"
:locale="'th'"
:enableTimePicker="false"
>
@ -905,13 +868,12 @@ onMounted(async () => {
for="inputDatereceive"
ref="dateReceivedRef"
:model-value="
insigniaData.receiveDate != null
? date2Thai(insigniaData.receiveDate as Date)
insigniaForm.receiveDate != null
? date2Thai(insigniaForm.receiveDate as Date)
: null
"
:label="`${'วันที่ได้รับ'}`"
:rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
@update:modelValue="() => (editRow = true)"
>
<template v-slot:prepend>
<q-icon
@ -936,7 +898,7 @@ onMounted(async () => {
option-value="id"
input-debounce="0"
option-label="name"
v-model="insigniaData.insigniaId"
v-model="insigniaForm.insigniaId"
class="inputgreen"
:label="`${'ชื่อเครื่องราชฯ'}`"
:options="Ops.insigniaOptions"
@ -944,7 +906,7 @@ onMounted(async () => {
@filter="(inputValue:string,
doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
) "
@update:modelValue="() => (editRow = true)"
@update:modelValue="insigniaTypeSelection"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -954,9 +916,8 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.insigniaType"
v-model="insigniaType"
:label="`${'ลำดับชั้น'}`"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -965,11 +926,10 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.no"
v-model="insigniaForm.no"
class="inputgreen"
:label="`${'ลำดับที่'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกลำดับที่'}`]"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -978,11 +938,10 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.issue"
v-model="insigniaForm.issue"
class="inputgreen"
:label="`${'ราชกิจจาฯ ฉบับที่'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกราชกิจจาฯ ฉบับที่'}`]"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -991,11 +950,10 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.volumeNo"
v-model="insigniaForm.volumeNo"
class="inputgreen"
:label="`${'เล่มที่'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่มที่'}`]"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -1004,11 +962,10 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.volume"
v-model="insigniaForm.volume"
class="inputgreen"
:label="`${'เล่ม'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกเล่ม'}`]"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -1017,11 +974,10 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.section"
v-model="insigniaForm.section"
class="inputgreen"
:label="`${'ตอน'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกตอน'}`]"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
@ -1030,18 +986,17 @@ onMounted(async () => {
lazy-rules
outlined
hide-bottom-space
v-model="insigniaData.page"
v-model="insigniaForm.page"
class="inputgreen"
:label="`${'หน้า'}`"
:rules="[(val:string) => !!val || `${'กรุณากรอกหน้า'}`]"
@update:modelValue="() => (editRow = true)"
/>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<datepicker
autoApply
week-start="0"
v-model="insigniaData.dateAnnounce"
v-model="insigniaForm.dateAnnounce"
menu-class-name="modalfix"
:locale="'th'"
:enableTimePicker="false"
@ -1054,16 +1009,14 @@ onMounted(async () => {
<q-input
dense
outlined
lazy-rules
hide-bottom-space
class="inputgreen"
:model-value="date2Thai(insigniaData.dateAnnounce as Date)"
:model-value="date2Thai(insigniaForm.dateAnnounce as Date)"
:label="`${'วันที่ประกาศในราชกิจจาฯ'}`"
:rules="[
(val:string) =>
!!val || `${'กรุณาเลือกวันที่ประกาศในราชกิจจาฯ'}`,
]"
@update:modelValue="() => (editRow = true)"
>
<template v-slot:prepend>
<q-icon
@ -1082,10 +1035,9 @@ onMounted(async () => {
outlined
lazy-rules
hide-bottom-space
v-model="insigniaData.refCommandNo"
v-model="insigniaForm.refCommandNo"
class="inputgreen"
:label="`${'เลขที่คำสั่ง'}`"
@update:modelValue="() => (editRow = true)"
>
<template v-slot:append>
<q-icon name="mdi-file" class="cursor-pointer" />
@ -1096,7 +1048,7 @@ onMounted(async () => {
<datepicker
autoApply
week-start="0"
v-model="insigniaData.refCommandDate"
v-model="insigniaForm.refCommandDate"
menu-class-name="modalfix"
:locale="'th'"
:enableTimePicker="false"
@ -1110,15 +1062,13 @@ onMounted(async () => {
dense
outlined
clearable
lazy-rules
hide-bottom-space
class="inputgreen"
:label="`${'เอกสารอ้างอิง (ลง วัน/เดือน/ปี)'}`"
:model-value="
date2Thai(insigniaData.refCommandDate as Date)
date2Thai(insigniaForm.refCommandDate as Date)
"
@clear="insigniaData.refCommandDate = null"
@update:modelValue="() => (editRow = true)"
@clear="insigniaForm.refCommandDate = null"
>
<template v-slot:prepend>
<q-icon
@ -1136,10 +1086,9 @@ onMounted(async () => {
dense
outlined
hide-bottom-space
v-model="insigniaData.note"
v-model="insigniaForm.note"
class="inputgreen"
label="หมายเหตุ"
@update:modelValue="() => (editRow = true)"
/>
</div>
</div>
@ -1173,7 +1122,7 @@ onMounted(async () => {
v-model:tittle="tittleHistory"
>
<template #columns="props">
<q-tr :props="props">
<q-tr class="cursor-pointer" :props="props">
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div class="table_ellipsis">
{{ col.value ? col.value : "-" }}

22
src/modules/04_registryNew/interface/request/Insignia.ts
View file

@ -1,6 +1,5 @@
interface RequestItemsObject {
profileId?: string;
isActive: boolean;
year: number;
no: string;
volume: string;
@ -16,23 +15,4 @@ interface RequestItemsObject {
note: string;
}
interface FormData {
id: string;
isActive: boolean;
year: number;
receiveDate: Date | null;
insigniaId: string;
insigniaType: string;
no: string;
issue: string;
volumeNo: string;
volume: string;
section: string;
page: string;
dateAnnounce: Date | null;
refCommandNo: string;
refCommandDate: Date | null;
note: string;
}
export type { RequestItemsObject, FormData };
export type { RequestItemsObject };

13
src/modules/04_registryNew/interface/response/Insignia.ts
View file

@ -1,29 +1,26 @@
interface ResponseObject {
id: string;
createdAt: string;
createdUserId: Date | string;
lastUpdatedAt: Date | string;
createdUserId: Date | null;
lastUpdatedAt: Date | null;
lastUpdateUserId: string;
createdFullName: string;
lastUpdateFullName: string;
profileId: string;
isActive: boolean;
year: number;
no: string;
volume: string;
section: string;
page: string;
receiveDate: Date | string;
receiveDate: Date | null;
insigniaId: string;
insignia: ResponseInsigniaObject;
dateAnnounce: Date | string;
dateAnnounce: Date | null;
issue: string;
volumeNo: string;
refCommandDate: Date | string;
refCommandDate: Date | null;
refCommandNo: string;
note: string;
insigniaName?: string
}
interface ResponseInsigniaObject {

15
src/modules/04_registryNew/stores/insignia.ts
View file

@ -1,8 +1,21 @@
import { ref, computed } from "vue";
import { defineStore } from "pinia";
import type { DataOptionInsignia } from "@/modules/04_registryNew/interface/index/Main";
import type { ResponseObject as Insignia } from "@/modules/07_insignia/interface/response/Main";
export const useInsigniaDataStore = defineStore("insigniaDataStore", () => {
const insigniaOption = ref<DataOptionInsignia[]>([]);
return { insigniaOption };
function mapInsigniaOption(resData: any) {
insigniaOption.value = [];
resData.map((r: Insignia) => {
insigniaOption.value.push({
id: r.id.toString(),
name: r.name.toString() + ` (${r.shortName})`,
typeName: r.insigniaTypeName.toString(),
});
});
}
return { insigniaOption, mapInsigniaOption };
});