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>