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",
    },
    {
      no: "2",
      date: "12/08/66",
      in: "08:04",
      loIn: "สำนักงาน ก.ก ",
      out: "17:01",
      loOut: "สำนักงาน ก.ก ",
      status: "ลงเวลาเรียบร้อย",
      Morningstatus: "2",
      AfternoonStatus: "2",
    },
    {
      no: "3",
      date: "11/08/66",
      in: "08:34",
      loIn: "สำนักงาน ก.ก ",
      out: "17:36",
      loOut: "สำนักงาน ก.ก ",
      status: "สาย ทำงานครบ",
      Morningstatus: "3",
      AfternoonStatus: "2",
    },
    {
      no: "4",
      date: "10/08/66",
      in: "08:48",
      loIn: "สำนักงาน ก.ก ",
      out: "17:00",
      loOut: "สำนักงาน ก.ก ",
      status: "สาย ทำงานไม่ครบ",
      Morningstatus: "3",
      AfternoonStatus: "3",
    },
  ];
  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 />
          <!-- <Table
            :style="$q.screen.gt.xs ? 'max-height: 64vh' : ''"
            :rows="rows"
            :columns="columns"
            :filter="filter"
            :visible-columns="visibleColumns"
            v-model:inputfilter="filter"
            v-model:inputvisible="visibleColumns"
            :pagination="initialPagination"
            :inputShow="false"
            :grid="$q.screen.gt.xs ? false : true"
          >
            <template #columns="props">
              <q-tr :props="props">
                <q-td key="no" :props="props">
                  {{ props.rowIndex + 1 }}
                </q-td>
                <q-td key="date" :props="props">
                  {{ props.row.date }}
                </q-td>
                <q-td key="in" :props="props">
                  {{ props.row.in }}
                </q-td>
                <q-td key="loIn" :props="props">
                  {{ props.row.loIn }}
                </q-td>
                <q-td key="out" :props="props">
                  {{ props.row.out }}
                </q-td>
                <q-td key="loOut" :props="props">
                  {{ props.row.loOut }}
                </q-td>
                <q-td key="status" :props="props">
                  <span
                    :class="
                      props.row.status == 'ลงเวลาเรียบร้อย'
                        ? 'text-blue'
                        : 'text-orange'
                    "
                    >{{ props.row.status }}</span
                  >
                </q-td>
              </q-tr>
            </template>
            <template #item="props">
              <div
                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
              >
                <q-card bordered flat class="q-py-sm shadow-0">
                  <q-list dense>
                    <q-item
                      v-for="col in props.cols"
                      :key="col.name"
                      :props="props"
                    >
                      <q-item-section>
                        <q-item-label caption>{{ col.label }}</q-item-label>
                      </q-item-section>
                      <q-item-section side>
                        <q-item-label>
                          <span
                            v-if="col.name == 'status'"
                            :class="
                              props.row.status == 'ลงเวลาเรียบร้อย'
                                ? 'text-blue'
                                : 'text-orange'
                            "
                            >{{ col.value }}</span
                          >
                          <span v-else class="text-black">{{ col.value }}</span>
                        </q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-card>
              </div>
            </template>
          </Table> -->
        </div>
      </q-card>
    </div>
  </div>
</template>