ปรับ รายการลงเวลาปฏิบัติงาน

src/modules/09_leave/components/1_Work/DialogDetail.vue

@@ -2,15 +2,21 @@
 import { ref, reactive, watch } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useQuasar } from "quasar";
 
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";
 
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** useStore */
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader } = mixin;
+const stores = useWorklistDataStore();
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { convertSatatus } = stores;
+
+const $q = useQuasar(); //ใช้ noti quasar
 
 /** props จาก TableList */
 const props = defineProps({
@@ -22,7 +28,7 @@ const props = defineProps({
     type: Object,
     require: true,
   },
-  colse: {
+  close: {
     type: Function,
     require: true,
   },
@@ -63,9 +69,7 @@ async function fetchDetailByid(id: string) {
       formData.checkInImg = data.checkInImg;
       formData.checkInLat = data.checkInLat ? data.checkInLat : "";
       formData.checkInLon = data.checkInLon ? data.checkInLon : "";
-      formData.checkInLocation = data.checkInLocation
-        ? data.checkInLocation
-        : "-";
+      formData.checkInLocation = data.checkInPOI ? data.checkInPOI : "-";
       formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
       formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
       formData.checkOutImg = data.checkOutImg;
@@ -76,27 +80,32 @@ async function fetchDetailByid(id: string) {
         : "-";
       formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
       formData.fullName = data.fullName;
-      formData.checkOutLocation = data.checkOutLocation
-        ? data.checkOutLocation
-        : "-";
+      formData.checkOutLocation = data.checkOutPOI ? data.checkOutPOI : "-";
       formData.checkInDescription = data.checkInDescription
         ? data.checkInDescription
         : "-";
       formData.checkOutDescription = data.checkOutDescription
         ? data.checkOutDescription
         : "-";
-      formData.checkInStatus = data.checkInStatus;
-      formData.checkOutStatus = data.checkOutStatus;
+      formData.checkInStatus = data.checkInStatus
+        ? convertSatatus(data.checkInStatus)
+        : "-";
+      formData.checkOutStatus = data.checkOutStatus
+        ? convertSatatus(data.checkOutStatus)
+        : "-";
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closePopup();
     })
-    .catch((err) => {})
     .finally(() => {
       hideLoader();
     });
 }
 
 /** Function ปิด popup */
-function colsePopup() {
-  props.colse ? props.colse() : false;
+function closePopup() {
+  props.close ? props.close() : false;
 }
 
 watch(
@@ -122,7 +131,7 @@ watch(
           round
           dense
           style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup"
+          @click="closePopup"
         />
       </q-toolbar>
       <q-separator />
@@ -152,14 +161,26 @@ watch(
                   </q-item-section>
                 </q-item>
               </div>
-              <div class="col-3">
+              <div class="col-2">
                 <q-item>
                   <q-item-section>
-                    <q-item-label class="text-grey-8">สถานะ</q-item-label>
+                    <q-item-label class="text-grey-8"
+                      >สถานะเวลาเข้างาน
+                    </q-item-label>
                     <q-item-label>{{ formData.checkInStatus }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </div>
+              <div class="col-2">
+                <q-item>
+                  <q-item-section>
+                    <q-item-label class="text-grey-8"
+                      >สถานะเวลาออก</q-item-label
+                    >
+                    <q-item-label>{{ formData.checkOutStatus }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </div>
             </div>
           </q-card>
           <div class="row q-gutter-md q-pt-md">

src/modules/09_leave/components/1_Work/Tab1.vue

@@ -143,20 +143,22 @@ async function fetchListTimeRecord() {
         (e: DataResTime) => ({
           id: e.id,
           fullName: e.fullName,
-          checkInDate: e.checkInDate && date2Thai(e.checkInDate),
+          checkInDate: e.checkInDate ? date2Thai(e.checkInDate) : "-",
           checkInTime: e.checkInTime,
           checkInLocation: e.checkInLocation,
           checkInLat: e.checkInLat,
           checkInLon: e.checkInLon,
-          checkInStatus:
-            e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
-          checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
-          checkOutLocation: e.checkOutLocation,
-          checkOutTime: e.checkOutTime,
-          checkOutLat: e.checkOutLat,
-          checkOutLon: e.checkOutLon,
-          checkOutStatus:
-            e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
+          checkInStatus: e.checkInStatus
+            ? workStore.convertSatatus(e.checkInStatus)
+            : "-",
+          checkOutDate: e.checkOutDate ? date2Thai(e.checkOutDate) : "-",
+          checkOutLocation: e.checkOutLocation ? e.checkOutLocation : "-",
+          checkOutTime: e.checkOutTime ? e.checkOutTime : "-",
+          checkOutLat: e.checkOutLocation ? e.checkOutLat : "",
+          checkOutLon: e.checkOutLocation ? e.checkOutLon : "",
+          checkOutStatus: e.checkOutStatus
+            ? workStore.convertSatatus(e.checkOutStatus)
+            : "-",
         })
       );
       rows.value = datalist;
@@ -204,6 +206,7 @@ onMounted(async () => {
     :rowsPerPage="rowsPerPage"
     :maxPage="maxPage"
     @update:pagination="updatePaging"
+    :tab="'1'"
   />
 </template>
 

src/modules/09_leave/components/1_Work/Tab2.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -20,7 +21,9 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 /** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader, messageError } = mixin;
+
+const $q = useQuasar(); //ใช้ noti quasar
 
 /** ข้อมูลตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -125,7 +128,7 @@ async function fetchListLogRecord() {
       rows.value = datalist;
     })
     .catch((err) => {
-      console.log(err);
+      messageError($q, err);
       rows.value = [];
     })
     .finally(() => {
@@ -162,6 +165,7 @@ onMounted(async () => {
     :rowsPerPage="rowsPerPage"
     :maxPage="maxPage"
     @update:pagination="updatePagingProp"
+    :tab="'2'"
   />
 </template>
 

src/modules/09_leave/components/1_Work/TableList.vue

@@ -34,6 +34,10 @@ const props = defineProps({
     type: Number,
     require: true,
   },
+  tab: {
+    type: String,
+    require: true,
+  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -65,12 +69,14 @@ function updateProp(newPagination: any, page: number) {
  * @param data ข้อมูลรายละเอียด
  */
 function clickDetail(data: any) {
-  modal.value = true;
-  dataDetail.value = data;
+  if (props.tab === "1") {
+    modal.value = true;
+    dataDetail.value = data;
+  }
 }
 
 /** Function ปิด popup */
-function colseDeyail() {
+function closeDetail() {
   modal.value = false;
 }
 
@@ -150,7 +156,7 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </template>
   </d-table>
 
-  <DialogDetail :modal="modal" :detail="dataDetail" :colse="colseDeyail" />
+  <DialogDetail :modal="modal" :detail="dataDetail" :close="closeDetail" />
 </template>
 
 <style scoped></style>

src/modules/09_leave/stores/WorkStore.ts

@@ -39,6 +39,8 @@ export const useWorklistDataStore = defineStore("work", () => {
         return "สาย";
       case "ABSENT":
         return "ขาดราชการ";
+      default:
+        return "-";
     }
   }
   return {