From 21fd984366151e1ae278f6f50b2164e006b2e490 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Tue, 19 Mar 2024 12:02:09 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A=E0=B8=B5?= =?UTF-8?q?=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?= =?UTF-8?q?=E0=B8=95=E0=B8=B4:=20=E0=B9=80=E0=B8=84=E0=B8=A3=E0=B8=B7?= =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B2=E0=B8=8A=E0=B8=AF?= =?UTF-8?q?=20(=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../detail/Achievement/03_Insignia.vue | 505 ++++++------------ .../interface/request/Insignia.ts | 52 +- .../interface/response/Insignia.ts | 60 ++- .../07_insignia/interface/response/Main.ts | 14 +- 4 files changed, 248 insertions(+), 383 deletions(-) diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue index 26e68abab..e89123641 100644 --- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue +++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue @@ -4,7 +4,7 @@ import { useRoute } from "vue-router"; import { useQuasar } from "quasar"; import http from "@/plugins/http"; import config from "@/app.config"; -import type { QTableProps } from "quasar"; +import type { QTableProps, QForm } from "quasar"; import { useCounterMixin } from "@/stores/mixin"; import HistoryTable from "@/components/TableHistory.vue"; @@ -13,13 +13,17 @@ import type { DataOption, DataOptionInsignia, InsigniaOps, - Pagination, } from "@/modules/04_registryNew/interface/index/Main"; import type { RequestItemsObject, - Columns, - DataProps, + FormData, } from "@/modules/04_registryNew/interface/request/Insignia"; +import type { + ResponseObject, + ResponseInsigniaObject, + ResponseInsigniaType, +} 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(); @@ -27,35 +31,17 @@ const mixin = useCounterMixin(); const { date2Thai, success, - dateToISO, - messageError, - typeChangeName, - dialogMessage, showLoader, hideLoader, + messageError, + dialogConfirm, + dialogRemove, } = mixin; const profileId = ref( route.params.id ? route.params.id.toString() : "" ); -const insigniaData = reactive<{ - id: string; - isActive: boolean; - year: number | null; - receiveDate: Date | string | null; - insigniaId: string; - insigniaType: string; - no: string; - issue: string; - volumeNo: string; - volume: string; - section: string; - page: string; - dateAnnounce: Date | null | string; - refCommandNo: string; - refCommandDate: Date | null | string; - note: string; -}>({ +const insigniaData = reactive({ id: "", isActive: true, year: 0, @@ -75,7 +61,7 @@ const insigniaData = reactive<{ }); const editRow = ref(false); -const myForm = ref(); +const myForm = ref(); const isEdit = ref(false); const modal = ref(false); const modeView = ref("table"); @@ -92,7 +78,7 @@ const OpsFilter = ref({ insigniaOptions: [], }); -const rows = ref([]); +const rows = ref([]); const columns = ref([ { name: "year", @@ -102,6 +88,7 @@ const columns = ref([ field: "year", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => v + 543, }, { name: "receiveDate", @@ -111,6 +98,7 @@ const columns = ref([ field: "receiveDate", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -122,6 +110,7 @@ const columns = ref([ field: "insigniaId", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => Ops.value.insigniaOptions.find((r) => r.id === v)?.name, sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -130,9 +119,10 @@ const columns = ref([ align: "left", label: "ลำดับชั้น", sortable: true, - field: "insigniaType", + field: "insignia", 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" }), }, @@ -210,6 +200,7 @@ const columns = ref([ field: "dateAnnounce", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -232,6 +223,7 @@ const columns = ref([ field: "refCommandDate", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -256,8 +248,7 @@ const columnsHistory = ref([ field: "year", headerStyle: "font-size: 14px", style: "font-size: 14px", - sort: (a: string, b: string) => - a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), + format: (v) => v + 543, }, { name: "receiveDate", @@ -267,6 +258,7 @@ const columnsHistory = ref([ field: "receiveDate", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -275,9 +267,10 @@ const columnsHistory = ref([ align: "left", label: "ชื่อเครื่องราชฯ", sortable: true, - field: "insignia", + field: "insigniaId", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => Ops.value.insigniaOptions.find((r) => r.id === v)?.name, sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -286,9 +279,10 @@ const columnsHistory = ref([ align: "left", label: "ลำดับชั้น", sortable: true, - field: "insigniaType", + field: "insignia", 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" }), }, @@ -366,6 +360,7 @@ const columnsHistory = ref([ field: "dateAnnounce", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -388,6 +383,7 @@ const columnsHistory = ref([ field: "refCommandDate", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -410,6 +406,7 @@ const columnsHistory = ref([ field: "createdAt", headerStyle: "font-size: 14px", style: "font-size: 14px", + format: (v) => date2Thai(v), sort: (a: string, b: string) => a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }), }, @@ -449,220 +446,110 @@ const visibleColumnsHistory = ref([ "createdAt", ]); -const formFilter = reactive({ - page: 1, - pageSize: 10, - keyword: "", -}); - -const pagination = ref({ - page: formFilter.page, - rowsPerPage: formFilter.pageSize, -}); - async function fetchData() { - if (profileId.value) { - showLoader(); - await http - .get(config.API.profileNewInsignByProfileId(profileId.value)) - .then((res) => { - let data = res.data.result; - rows.value = []; - data.map((e: any) => { - rows.value.push({ - id: e.id, - insigniaId: e.insigniaId, - insigniaType: e.insigniaType, - year: e.year, - no: e.no, - issue: e.issue, - volumeNo: e.volumeNo, - volume: e.volume, - section: e.section, - page: e.page, - receiveDate: e.receiveDate, - dateAnnounce: e.dateAnnounce, - refCommandNo: e.refCommandNo, - refCommandDate: e.refCommandDate, - createdFullName: e.createdFullName, - createdAt: e.createdAt, - note: e.note, - }); - }); - }) - .catch((e) => { - messageError($q, e); - }) - .finally(() => { - hideLoader(); - // store.isLoad++; - }); + if (!profileId.value) return; + + showLoader(); + try { + const res = await http.get( + config.API.profileNewInsignByProfileId(profileId.value) + ); + console.log(res.data.result); + + rows.value = res.data.result; + } catch (error) { + messageError($q, error); + } finally { + hideLoader(); } } async function fetchInsignia() { showLoader(); - await http - .get(config.API.insignia) - .then((res) => { - const data = res.data.result; - let option: DataOptionInsignia[] = []; - data.map((r: any) => { - option.push({ - id: r.id.toString(), - name: r.name.toString() + ` (${r.shortName})`, - typeName: - r.insigniaType == null ? null : r.insigniaType.name.toString(), - }); - }); - Ops.value.insigniaOptions = option; - OpsFilter.value.insigniaOptions = option; - }) - .catch((e) => { - messageError($q, e); - }) - .finally(() => { - hideLoader(); - // store.isLoad++; - }); -} + try { + const res = await http.get(config.API.insigniaOrg); -async function saveData() { - if (profileId.value) { - showLoader(); - await http - .post(config.API.profileNewInsign, { - profileId: profileId.value, - isActive: insigniaData.isActive, - year: insigniaData.year, - no: insigniaData.no, - volume: insigniaData.volume, - section: insigniaData.section, - page: insigniaData.page, - receiveDate: dateToISO(insigniaData.receiveDate as Date), - insigniaId: insigniaData.insigniaId, - insigniaType: insigniaData.insigniaType, - dateAnnounce: insigniaData.dateAnnounce - ? dateToISO(insigniaData.dateAnnounce as Date) - : null, - issue: insigniaData.issue, - volumeNo: insigniaData.volumeNo, - refCommandDate: - insigniaData.refCommandDate == null - ? null - : dateToISO(insigniaData.refCommandDate as Date), - refCommandNo: insigniaData.refCommandNo, - // note: note.value, - }) - .then((res) => { - success($q, "บันทึกข้อมูลสำเร็จ"); - modal.value = false; - }) - .catch((e) => { - messageError($q, e); - }) - .finally(async () => { - await fetchData(); + const data = res.data.result; + let option: DataOptionInsignia[] = []; + data.map((r: Insignia) => { + option.push({ + id: r.id.toString(), + name: r.name.toString() + ` (${r.shortName})`, + typeName: r.insigniaTypeName.toString(), }); + }); + Ops.value.insigniaOptions = option; + OpsFilter.value.insigniaOptions = option; + } catch (error) { + messageError($q, error); + } finally { + hideLoader(); } } -async function editData() { - showLoader(); - await http - .patch(config.API.profileNewInsignById(insigniaData.id), { - profileId: profileId.value, - isActive: insigniaData.isActive, - year: insigniaData.year, - no: insigniaData.no, - volume: insigniaData.volume, - section: insigniaData.section, - page: insigniaData.page, - receiveDate: dateToISO(insigniaData.receiveDate as Date), - insigniaId: insigniaData.insigniaId, - insigniaType: insigniaData.insigniaType, - dateAnnounce: insigniaData.dateAnnounce - ? dateToISO(insigniaData.dateAnnounce as Date) - : null, - issue: insigniaData.issue, - volumeNo: insigniaData.volumeNo, - refCommandDate: - insigniaData.refCommandDate == null - ? null - : dateToISO(insigniaData.refCommandDate as Date), - refCommandNo: insigniaData.refCommandNo, - // note: note.value, - }) - .then((res) => { - success($q, "บันทึกข้อมูลสำเร็จ"); - modal.value = false; - }) - .catch((e) => { - messageError($q, e); - }) - .finally(async () => { - await fetchData(); - }); +async function addEditData(editStatus: boolean = false) { + if (!profileId.value) return; + + const url = editStatus + ? config.API.profileNewInsignById(insigniaData.id) + : config.API.profileNewInsign; + const method = editStatus ? "patch" : "post"; + const reqBody: RequestItemsObject = { + profileId: 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, "บันทึกข้อมูลสำเร็จ"); + await fetchData(); + } catch (e) { + messageError($q, e); + } finally { + hideLoader(); + } } async function clickDelete(dataId: string) { - $q.dialog({ - title: `ลบข้อมูล`, - message: `ต้องการทำการลบข้อมูลนี้ใช่หรือไม่?`, - cancel: "ยกเลิก", - ok: "ยืนยัน", - persistent: true, - }) - .onOk(async () => { - showLoader(); - await http - .delete(config.API.profileNewInsignById(dataId)) - .then((res) => { - success($q, "ลบข้อมูลสำเร็จ"); - modal.value = false; - }) - .catch((e) => { - messageError($q, e); - }) - .finally(async () => { - await fetchData(); - }); - }) - .onCancel(async () => { - await fetchData(); - }); + 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, props?: any) { +function onClickOpenDialog(editStatus: boolean = false, row?: ResponseObject) { modal.value = true; editRow.value = false; + isEdit.value = editStatus; - if (editStatus && props) { - isEdit.value = editStatus; - - insigniaData.id = props.row.id; - insigniaData.year = props.row.year == 0 ? 0 : props.row.year; - insigniaData.receiveDate = props.row.receiveDate; - insigniaData.insigniaId = props.row.insigniaId; - insigniaData.insigniaType = props.row.insigniaType; - insigniaData.no = props.row.no; - insigniaData.issue = props.row.issue; - insigniaData.volumeNo = props.row.volumeNo; - insigniaData.volume = props.row.volume; - insigniaData.section = props.row.section; - insigniaData.page = props.row.page; - insigniaData.dateAnnounce = - props.row.dateAnnounce == "-" ? "" : props.row.dateAnnounce; - insigniaData.refCommandNo = props.row.refCommandNo; - insigniaData.refCommandDate = - props.row.refCommandDate == "-" ? null : props.row.refCommandDate; - insigniaData.note = props.note; + 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; } else { - isEdit.value = editStatus; - insigniaData.id = ""; insigniaData.year = 0; - insigniaData.receiveDate = ""; + insigniaData.receiveDate = null; insigniaData.insigniaId = ""; insigniaData.insigniaType = ""; insigniaData.no = ""; @@ -689,65 +576,44 @@ async function clickClose() { }).onOk(async () => { modal.value = false; editRow.value = false; - // next.value = false; - // previous.value = false; }); } else { modal.value = false; - // next.value = false; - // previous.value = false; } } -async function clickHistory(row: RequestItemsObject) { +async function clickHistory(row: ResponseObject) { modalHistory.value = true; - // showLoader(); - // await http - // .get(config.API.profileInsignHisId(row.id)) - // .then((res) => { - // let data = res.data.result; - // rowsHistory.value = []; - // data.map((e: ResponseObject) => { - // rowsHistory.value.push({ - // id: e.id, - // insignia: e.insignia, - // insigniaId: e.insigniaId, - // insigniaType: e.insigniaType, - // year: e.year, - // no: e.no, - // issue: e.issue, - // volumeNo: e.volumeNo, - // volume: e.volume, - // section: e.section, - // page: e.page, - // receiveDate: new Date(e.receiveDate), - // dateAnnounce: new Date(e.dateAnnounce), - // refCommandNo: e.refCommandNo, - // refCommandDate: - // e.refCommandDate == null ? null : new Date(e.refCommandDate), - // createdFullName: e.createdFullName, - // createdAt: new Date(e.createdAt), - // }); - // }); - // }) - // .catch((e) => { - // messageError($q, e); - // }) - // .finally(() => { - // hideLoader(); - // }); + filterSearch.value = ""; + + showLoader(); + try { + const res = await http.get(config.API.profileNewInsignHisById(row.id)); + rowsHistory.value = res.data.result; + } catch (e) { + messageError($q, e); + } finally { + hideLoader(); + } } function onSubmit() { - myForm.value.validate().then(async (result: boolean) => { - if (result) { - isEdit.value ? await editData() : await saveData(); - modal.value = false; - } - }); + dialogConfirm( + $q, + async () => { + myForm.value?.validate().then(async (result: boolean) => { + if (result) { + addEditData(isEdit.value); + modal.value = false; + } + }); + }, + "ยืนยันการบันทึกข้อมูล", + "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?" + ); } -function filterSelector(val: any, update: Function, refData: string) { +function filterSelector(val: string, update: Function, refData: string) { switch (refData) { case "insigniaOptions": update(() => { @@ -763,7 +629,7 @@ function filterSelector(val: any, update: Function, refData: string) { watch( () => insigniaData.insigniaId, - (count: string, prevCount: string) => { + () => { const insigniaTypeFilter = Ops.value.insigniaOptions.filter( (r: DataOptionInsignia) => r.id === insigniaData.insigniaId ); @@ -875,34 +741,24 @@ onMounted(async () => { class="cursor-pointer" :key="col.name" :props="props" - @click="onClickOpenDialog(true, props)" > -
- {{ col.value == null ? "-" : date2Thai(col.value) }} -
-
- {{ col.value + 543 }} -
-
- {{ - col.value - ? (Ops.insigniaOptions.find((r) => r.id === col.value) || {}) - .name - : "-" - }} -
-
+
{{ col.value ? col.value : "-" }}
+ + ลบข้อมูล + { > ประวัติแก้ไขเครื่องราชอิสริยาภรณ์ - ลบข้อมูล - + --> @@ -940,7 +798,7 @@ onMounted(async () => { round color="primary" icon="mdi-pencil-outline" - @click="onClickOpenDialog(true, props)" + @click="onClickOpenDialog(true, props.row)" > แก่ไขข้อมุล @@ -968,32 +826,7 @@ onMounted(async () => { - - {{ col.value ? date2Thai(col.value) : "-" }} - - - {{ col.value + 543 }} - - - {{ - col.value - ? ( - Ops.insigniaOptions.find((r) => r.id === col.value) || - {} - ).name - : "-" - }} - - + {{ col.value ? col.value : "-" }} @@ -1113,7 +946,7 @@ onMounted(async () => { :label="`${'ชื่อเครื่องราชฯ'}`" :options="Ops.insigniaOptions" :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]" - @filter="(inputValue:any, + @filter="(inputValue:string, doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions' ) " @update:modelValue="() => (editRow = true)" @@ -1289,7 +1122,7 @@ onMounted(async () => { :model-value=" date2Thai(insigniaData.refCommandDate as Date) " - @clear="insigniaData.refCommandDate = ''" + @clear="insigniaData.refCommandDate = null" @update:modelValue="() => (editRow = true)" >