From 7d00ea2fb8595756113696efd4608c4396222c4b Mon Sep 17 00:00:00 2001 From: setthawutttty Date: Mon, 16 Jun 2025 10:45:28 +0700 Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0?= =?UTF-8?q?=E0=B9=80=E0=B8=AD=E0=B8=B5=E0=B8=A2=E0=B8=94=E0=B8=81=E0=B8=B2?= =?UTF-8?q?=E0=B8=A3=E0=B8=A5=E0=B8=87=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/02_WorkList/DialogDetail.vue | 80 ++++++++++++++++--- src/modules/09_leave/stores/WorkStore.ts | 69 +++++++++++++++- 2 files changed, 139 insertions(+), 10 deletions(-) diff --git a/src/modules/09_leave/components/02_WorkList/DialogDetail.vue b/src/modules/09_leave/components/02_WorkList/DialogDetail.vue index 9d3e19323..f205b5eea 100644 --- a/src/modules/09_leave/components/02_WorkList/DialogDetail.vue +++ b/src/modules/09_leave/components/02_WorkList/DialogDetail.vue @@ -77,6 +77,7 @@ async function fetchDetailByid(id: string, type: string) { .get(config.API.recordById(id, type)) .then((res) => { const data = res.data.result; + stores.getData(data); formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate); formData.checkInImg = data.checkInImg; formData.checkInLat = data.checkInLat ? data.checkInLat : ""; @@ -122,9 +123,34 @@ async function fetchDetailByid(id: string, type: string) { /** Function ปิด popup */ function closePopup() { + clear(); props.close ? props.close() : false; } +function clear() { + formData.checkInDate = null; + formData.checkInImg = ""; + formData.checkInLat = null; + formData.checkInLon = null; + formData.checkInLocation = ""; + formData.checkInTime = ""; + formData.checkInStatus = ""; + formData.checkInDescription = ""; + formData.checkOutDate = null; + formData.checkOutImg = ""; + formData.checkOutLat = null; + formData.checkOutLon = null; + formData.checkOutLocation = ""; + formData.checkOutTime = ""; + formData.checkOutStatus = ""; + formData.fullName = ""; + formData.checkOutDescription = ""; + formData.isLocationCheckIn = false; + formData.checkInLocationName = ""; + formData.isLocationCheckOut = false; + formData.checkOutLocationName = ""; +} + const modalMap = ref(false); const titleMap = ref(""); function onClickMap(title: string) { @@ -133,11 +159,35 @@ function onClickMap(title: string) { } watch( - () => props.modal, - () => { - props.modal === true && - props.detail && - fetchDetailByid(props.detail.id, props.typeTab as string); + () => [props.modal, props.detail && props.detail.id], + ([newModal, newId], [oldModal, oldId]) => { + if (props.modal && props.detail) { + if (newId !== oldId) { + fetchDetailByid(props.detail.id, props.typeTab as string); + } else { + formData.checkInDate = stores.formData.checkInDate; + formData.checkInImg = stores.formData.checkInImg; + formData.checkInLat = stores.formData.checkInLat; + formData.checkInLon = stores.formData.checkInLon; + formData.checkInLocation = stores.formData.checkInLocation; + formData.checkInTime = stores.formData.checkInTime; + formData.checkInStatus = stores.formData.checkInStatus; + formData.checkInDescription = stores.formData.checkInDescription; + formData.checkOutDate = stores.formData.checkOutDate; + formData.checkOutImg = stores.formData.checkOutImg; + formData.checkOutLat = stores.formData.checkOutLat; + formData.checkOutLon = stores.formData.checkOutLon; + formData.checkOutLocation = stores.formData.checkOutLocation; + formData.checkOutTime = stores.formData.checkOutTime; + formData.checkOutStatus = stores.formData.checkOutStatus; + formData.fullName = stores.formData.fullName; + formData.checkOutDescription = stores.formData.checkOutDescription; + formData.isLocationCheckIn = stores.formData.isLocationCheckIn; + formData.checkInLocationName = stores.formData.checkInLocationName; + formData.isLocationCheckOut = stores.formData.isLocationCheckOut; + formData.checkOutLocationName = stores.formData.checkOutLocationName; + } + } } ); @@ -224,7 +274,11 @@ watch( ในสถานที่
- นอกสถานที่ ({{ formData.checkInLocationName }}) + {{ + formData.checkInLocationName + ? `นอกสถานที่ (${formData.checkInLocationName})` + : "" + }}
@@ -270,7 +324,9 @@ watch(
หมายเหตุ
-
{{ formData.checkInDescription }}
+
+ {{ formData.checkInDescription }} +
@@ -288,7 +344,11 @@ watch( ในสถานที่
- นอกสถานที่ ({{ formData.checkOutLocationName }}) + {{ + formData.checkInLocationName + ? `นอกสถานที่ (${formData.checkInLocationName})` + : "" + }}
@@ -334,7 +394,9 @@ watch(
หมายเหตุ
-
{{ formData.checkOutDescription }}
+
+ {{ formData.checkOutDescription }} +
diff --git a/src/modules/09_leave/stores/WorkStore.ts b/src/modules/09_leave/stores/WorkStore.ts index fd8be1224..934190c14 100644 --- a/src/modules/09_leave/stores/WorkStore.ts +++ b/src/modules/09_leave/stores/WorkStore.ts @@ -1,11 +1,16 @@ import { defineStore } from "pinia"; -import { ref } from "vue"; +import { ref, reactive } from "vue"; +import { useCounterMixin } from "@/stores/mixin"; /** import Type */ import type { QTableProps } from "quasar"; +import type { FormDetail } from "@/modules/09_leave/interface/response/work"; + export const useWorklistDataStore = defineStore("work", () => { /** ข้อมูล Table */ + const mixin = useCounterMixin() + const { date2Thai } = mixin const columns = ref([]); const visibleColumns = ref([]); @@ -29,10 +34,72 @@ export const useWorklistDataStore = defineStore("work", () => { return "-"; } } + + const formData = reactive({ + checkInDate: null, + checkInImg: "", + checkInLat: null, + checkInLon: null, + checkInLocation: "", + checkInTime: "", + checkInStatus: "", + checkInDescription: "", + checkOutDate: null, + checkOutImg: "", + checkOutLat: null, + checkOutLon: null, + checkOutLocation: "", + checkOutTime: "", + checkOutStatus: "", + fullName: "", + checkOutDescription: "", + isLocationCheckIn: false, + checkInLocationName: "", + isLocationCheckOut: false, + checkOutLocationName: "", + }); + + function getData(data: any) { + formData.checkInDate = data.checkInDate && date2Thai(data.checkInDate); + formData.checkInImg = data.checkInImg; + formData.checkInLat = data.checkInLat ? data.checkInLat : ""; + formData.checkInLon = data.checkInLon ? data.checkInLon : ""; + formData.checkInLocation = data.checkInPOI ? data.checkInPOI : "-"; + formData.checkInTime = data.checkInTime ? data.checkInTime : "-"; + formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate); + formData.checkOutImg = data.checkOutImg; + formData.checkOutLat = data.checkOutLat ? data.checkOutLat : ""; + formData.checkOutLon = data.checkOutLon ? data.checkOutLon : ""; + formData.checkOutLocation = data.checkOutLocation + ? data.checkOutLocation + : "-"; + formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-"; + formData.fullName = data.fullName; + formData.checkOutLocation = data.checkOutPOI ? data.checkOutPOI : "-"; + formData.checkInDescription = data.checkInDescription + ? data.checkInDescription + : "-"; + formData.checkOutDescription = data.checkOutDescription + ? data.checkOutDescription + : "-"; + formData.checkInStatus = data.checkInStatus + ? convertSatatus(data.checkInStatus) + : "-"; + formData.checkOutStatus = data.checkOutStatus + ? convertSatatus(data.checkOutStatus) + : "-"; + + formData.isLocationCheckIn = data.isLocationCheckIn; + formData.checkInLocationName = data.checkInLocationName; + formData.isLocationCheckOut = data.isLocationCheckOut; + formData.checkOutLocationName = data.checkOutLocationName; + } return { columns, visibleColumns, selectDate, convertSatatus, + getData, + formData }; });