hrms-checkin/src/views/HistoryView.vue

<script setup lang="ts">
import type { QTableProps } from 'quasar'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Table from '@/components/TableHistory.vue'
import ToolBar from '@/components/ToolBar.vue'

// importStores
import { useChekIn } from '@/stores/chekin'

const router = useRouter()
const stores = useChekIn()

onMounted(() => {
  fetchlist()
})

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">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <q-card flat class="row col-12 cardNone">
        <div
          class="bg-secondary text-white col-12 row items-center q-px-md q-py-sm"
        >
          <div class="col-2">
            <q-btn
              icon="arrow_backt"
              unelevated
              round
              dense
              flat
              color="white"
              @click="router.go(-1)"
            />
          </div>
          <q-space />
          <span class="text-body1 text-weight-bold col-8 text-center"
            >ประวัติการลงเวลา</span
          >
          <div class="col-2"></div>
        </div>
        <div class="col-12 q-pa-md text-grey-9">
          <ToolBar />
          <Table />
        </div>
      </q-card>
    </div>
  </div>
</template>