แก้ไขการแสดงผลประวัติการลงเวลา

src/components/TableHistory.vue

@@ -9,6 +9,8 @@ import { useChekIn } from '@/stores/chekin'
 import Popup from '@/components/PopUp.vue'
 
 const stores = useChekIn()
+
+/** props from page */
 const props = defineProps({
   paging: {
     type: Boolean,
@@ -16,7 +18,7 @@ const props = defineProps({
   },
   pageSize: {
     type: Number,
-    defualt: 25,
+    defualt: 10,
   },
   page: {
     type: Number,
@@ -90,79 +92,72 @@ async function updatePagination(newPagination: any) {
   props.changePage(1, newPagination.rowsPerPage, true)
   initialPagination.value = newPagination
 }
+
+/** column history table */
 const columns = ref<QTableProps['columns']>([
   {
-    name: 'date',
+    name: 'checkInDate',
     align: 'left',
     label: 'วัน/เดือน/ปี',
     sortable: true,
-    field: 'date',
+    field: 'checkInDate',
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
   {
-    name: 'in',
+    name: 'checkInTime',
     align: 'left',
     label: 'เวลาเข้างาน',
     sortable: true,
-    field: 'in',
+    field: 'checkInTime',
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
   {
-    name: 'loIn',
+    name: 'checkInLocation',
     align: 'left',
     label: 'พิกัด',
     sortable: true,
-    field: 'loIn',
+    field: 'checkInLocation',
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px',
   },
   {
-    name: 'out',
+    name: 'checkInStatus',
-    align: 'left',
-    label: 'เวลาออกงาน',
-    sortable: true,
-    field: 'out',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:15%;',
-  },
-  {
-    name: 'loOut',
-    align: 'left',
-    label: 'พิกัด',
-    sortable: true,
-    field: 'loOut',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px',
-  },
-  {
-    name: 'Morningstatus',
     align: 'left',
     label: 'สถานะช่วงเช้า',
     sortable: true,
-    field: 'Morningstatus',
+    field: 'checkInStatus',
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
   },
   {
-    name: 'AfternoonStatus',
+    name: 'checkOutTime',
+    align: 'left',
+    label: 'เวลาออกงาน',
+    sortable: true,
+    field: 'checkOutTime',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px; width:15%;',
+  },
+  {
+    name: 'checkOutLocation',
+    align: 'left',
+    label: 'พิกัด',
+    sortable: true,
+    field: 'checkOutLocation',
+    headerStyle: 'font-size: 14px',
+    style: 'font-size: 14px',
+  },
+  {
+    name: 'checkOutStatus',
     align: 'left',
     label: 'สถานะช่วงบ่าย',
     sortable: true,
-    field: 'AfternoonStatus',
+    field: 'checkOutStatus',
     headerStyle: 'font-size: 14px',
     style: 'font-size: 14px; width:15%;',
-  },
+  }
-  {
-    name: 'status',
-    align: 'left',
-    label: 'สถานะ',
-    sortable: true,
-    field: 'status',
-    headerStyle: 'font-size: 14px',
-    style: 'font-size: 14px; width:10%;',
-  },
 ])
 // popup
 const modalPopup = ref<boolean>(false)
@@ -174,9 +169,11 @@ function openPopup(data: any) {
   titlePopup.value = title
   dataRow.value = data
 }
+
 function closePopup() {
   modalPopup.value = false
 }
+
 function classStatus(status: string) {
   switch (status) {
     case 'ขาดราชการ':
@@ -189,11 +186,24 @@ function classStatus(status: string) {
       break
   }
 }
+
 const pagination = ref({
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 2,
 })
+
+const checkRequestEdit = (checkInStatus: string, checkOutStatus: string) => {
+  if (
+    checkInStatus === 'ขาด' ||
+    checkInStatus === 'สาย' ||
+    checkOutStatus === 'ขาด' ||
+    checkOutStatus === 'สาย'
+  )
+    return true
+  else false
+}
 </script>
+
 <template>
   <q-table
     flat
@@ -220,16 +230,16 @@ const pagination = ref({
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div
-            v-if="col.name === 'Morningstatus'"
+            v-if="col.name === 'checkInStatus'"
-            :class="classStatus(props.row.Morningstatus)"
+            :class="classStatus(props.row.checkInStatus)"
           >
-            {{ props.row.Morningstatus }}
+            {{ props.row.checkInStatus }}
           </div>
           <div
-            v-else-if="col.name === 'AfternoonStatus'"
+            v-else-if="col.name === 'checkOutStatus'"
-            :class="classStatus(props.row.AfternoonStatus)"
+            :class="classStatus(props.row.checkOutStatus)"
           >
-            {{ props.row.AfternoonStatus }}
+            {{ props.row.checkOutStatus }}
           </div>
           <div v-else>
             {{ col.value }}
@@ -237,7 +247,13 @@ const pagination = ref({
         </q-td>
         <q-td>
           <q-btn
-            v-if="props.row.statusEdit === 'edit'"
+            v-if="
+              checkRequestEdit(
+                props.row.checkInStatus,
+                props.row.checkOutStatus
+              )
+            "
+            style="min-width: 110px"
             outline
             icon="edit"
             size="12px"
@@ -249,11 +265,13 @@ const pagination = ref({
             v-else
             :color="`${stores.classColorStatus(props.row.statusEdit)}-1`"
             :text-color="`${stores.classColorStatus(props.row.statusEdit)}-7`"
-            >{{ props.row.statusEditName }}</q-chip
+            >{{ props.row.statusEdit }}</q-chip
           >
         </q-td>
       </q-tr>
     </template>
+
+    <!-- กรณีแสดงผลบน mobile -->
     <template #item="props">
       <div
         class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
@@ -267,13 +285,13 @@ const pagination = ref({
               <q-item-section side>
                 <q-item-label>
                   <span
-                    v-if="col.name == 'Morningstatus'"
+                    v-if="col.name == 'checkInStatus'"
-                    :class="classStatus(props.row.Morningstatus)"
+                    :class="classStatus(props.row.checkInStatus)"
                     >{{ col.value }}</span
                   >
                   <span
-                    v-else-if="col.name == 'AfternoonStatus'"
+                    v-else-if="col.name == 'checkOutStatus'"
-                    :class="classStatus(props.row.AfternoonStatus)"
+                    :class="classStatus(props.row.checkOutStatus)"
                     >{{ col.value }}</span
                   >
                   <span v-else class="text-black">{{ col.value }} </span>
@@ -284,11 +302,18 @@ const pagination = ref({
           </q-list>
           <q-card-section>
             <div class="row">
-              <div class="col" v-if="props.row.statusEdit === 'edit'">
+              <div
+                class="col"
+                v-if="
+                  checkRequestEdit(
+                    props.row.checkInStatus,
+                    props.row.checkOutStatus
+                  )
+                "
+              >
                 <q-btn
                   class="full-width text-cen"
                   outline
-                  rounded
                   icon="edit"
                   label="ขอแก้ไข"
                   color="info"
@@ -303,7 +328,7 @@ const pagination = ref({
                     props.row.statusEdit
                   )}-7`"
                 >
-                  {{ props.row.statusEditName }}
+                  {{ props.row.statusEdit }}
                 </q-chip>
               </div>
             </div>

src/stores/chekin.ts

@@ -16,23 +16,16 @@ export const useChekIn = defineStore('checkin', () => {
     // console.log(data)
     rows.value = []
     const datalist = await data.map((e: any) => ({
-      id: e.checkInId,
+      checkInId: e.checkInId,
-      date: date2Thai(e.checkInDate),
+      checkInDate: date2Thai(e.checkInDate),
-      no: e.no,
+      checkInTime: e.checkInTime,
-      in: e.checkInTime,
+      checkOutTime: e.checkOutTime != '' ? e.checkOutTime : '-',
-      out: e.checkOutTime,
+      checkInStatus: convertStatus(e.checkInStatus),
-      Morningstatus: convertStatus(e.checkInStatus),
+      checkOutStatus:
-      AfternoonStatus: convertStatus(e.checkOutStatus),
+        e.checkOutStatus != null ? convertStatus(e.checkOutStatus) : '-',
-      loIn: e.checkInLocation,
+      checkInLocation: e.checkInLocation,
-      loOut: e.checkOutLocation,
+      checkOutLocation: e.checkOutLocation != '' ? e.checkOutLocation : '-',
-      status: e.statusEdit,
       // statusEditName: convertStatusEdit(e.statusEdit),
-      // checkInTime: e.checkInTime,
-      // checkInLocation: e.checkInLocation,
-      // checkOutTime: e.checkOutTime,
-      // checkOutLocation: e.checkOutLocation,
-      // checkInStatus: convertStatus(e.checkInStatus),
-      // checkOutStatus: convertStatus(e.checkOutStatus),
     }))
     rows.value = datalist
   }
@@ -65,6 +58,8 @@ export const useChekIn = defineStore('checkin', () => {
         return 'orange'
       case 'approve':
         return 'green'
+      case 'reject':
+        return 'red'
     }
   }
 

src/views/HistoryView.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import type { QTableProps } from 'quasar'
 import { ref, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
@@ -19,7 +18,6 @@ const { fetchHistoryList } = stores
 const $q = useQuasar() //ใช้ noti quasar
 
 onMounted(() => {
-  // fetchlist()
   fetchlistHistory()
 })
 
@@ -33,7 +31,7 @@ const filter = ref<string>('') //search data table
 async function changePage(
   pageVal: number,
   pageSizeVal: number,
-  loading: boolean = false
+  loading: false
 ) {
   page.value = await pageVal
   pageSize.value = await pageSizeVal
@@ -41,7 +39,7 @@ async function changePage(
 }
 
 //นำข้อมูลมาแสดง
-const fetchlistHistory = async (loading: boolean = true) => {
+const fetchlistHistory = async (loading = true) => {
   loading === true ?? showLoader()
   await http
     .get(
@@ -61,60 +59,6 @@ const fetchlistHistory = async (loading: boolean = true) => {
       hideLoader()
     })
 }
-
-// function fetchlist() {
-//   const listData = [
-//     {
-//       no: '1',
-//       date: '13/08/66',
-//       in: '11:20',
-//       loIn: 'สำนักงาน ก.ก ',
-//       out: '',
-//       loOut: '',
-//       status: '',
-//       Morningstatus: '1',
-//       AfternoonStatus: '1',
-//       statusEdit: 'wait',
-//     },
-//     {
-//       no: '2',
-//       date: '12/08/66',
-//       in: '08:04',
-//       loIn: 'สำนักงาน ก.ก ',
-//       out: '17:01',
-//       loOut: 'สำนักงาน ก.ก ',
-//       status: 'ลงเวลาเรียบร้อย',
-//       Morningstatus: '2',
-//       AfternoonStatus: '2',
-//       statusEdit: 'edit',
-//     },
-//     {
-//       no: '3',
-//       date: '11/08/66',
-//       in: '08:34',
-//       loIn: 'สำนักงาน ก.ก ',
-//       out: '17:36',
-//       loOut: 'สำนักงาน ก.ก ',
-//       status: 'สาย ทำงานครบ',
-//       Morningstatus: '3',
-//       AfternoonStatus: '2',
-//       statusEdit: 'edit',
-//     },
-//     {
-//       no: '4',
-//       date: '10/08/66',
-//       in: '08:48',
-//       loIn: 'สำนักงาน ก.ก ',
-//       out: '17:00',
-//       loOut: 'สำนักงาน ก.ก ',
-//       status: 'สาย ทำงานไม่ครบ',
-//       Morningstatus: '3',
-//       AfternoonStatus: '3',
-//       statusEdit: 'approve',
-//     },
-//   ]
-//   stores.fetchHistoryList(listData)
-// }
 </script>
 <template>
   <div class="col-12 row justify-center">
@@ -125,8 +69,7 @@ const fetchlistHistory = async (loading: boolean = true) => {
         >
           <div class="col-2">
             <q-btn
-              icon="arrow_backt"
+              icon="arrow_back"
-              unelevated
               round
               dense
               flat