hrms-user/src/modules/04_checkin/views/history.vue

<template>
    <div class="col-12 row justify-center">
        <div class="col-xs-12 col-sm-12 col-md-11 ">  
            <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="mdi-arrow-left"
                            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">
                    <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>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref } from "vue";
import { useRouter } from "vue-router";
import Table from "@/modules/04_checkin/componenst/TableHistory.vue"

const router = useRouter();

const filter = ref<string>("")
const visibleColumns = ref<String[]>(["date", "in", "loIn", "out", "loOut", "status"])
const columns = ref<QTableProps["columns"]>([
	{
		name: "no",
		align: "left",
		label: "ลำดับ",
		sortable: true,
		field: "no",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:5%;",
	},
	{
		name: "date",
		align: "left",
		label: "วัน/เดือน/ปี",
		sortable: true,
		field: "date",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "in",
		align: "left",
		label: "เวลาเข้างาน",
		sortable: true,
		field: "in",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "loIn",
		align: "left",
		label: "พิกัด",
		sortable: true,
		field: "loIn",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px",
	},
    {
		name: "out",
		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: "status",
		align: "left",
		label: "สถานะ",
		sortable: true,
		field: "status",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:10%;",
	},
])
const rows = ref<any>([
    {no:'1',date: '13/08/66',in: '11:20',loIn: 'สำนักงาน ก.ก ', out: '',loOut: '',status: '' },
    {no:'2',date: '12/08/66',in: '08:04',loIn: 'สำนักงาน ก.ก ', out: '17:01',loOut: 'สำนักงาน ก.ก ',status: 'ลงเวลาเรียบร้อย' },
    {no:'3',date: '11/08/66',in: '08:34',loIn: 'สำนักงาน ก.ก ', out: '17:36',loOut: 'สำนักงาน ก.ก ',status: 'สาย ทำงานครบ' },
    {no:'4',date: '10/08/66',in: '08:48',loIn: 'สำนักงาน ก.ก ', out: '17:00',loOut: 'สำนักงาน ก.ก ',status: 'สาย ทำงานไม่ครบ' },
])
const initialPagination = ref({
	rowsPerPage: 0,
})
</script>