hrms-user/src/modules/03_leave/views/Main.vue

<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref } from "vue"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"

const router = useRouter()
const $q = useQuasar()

import Table from "@/components/Table.vue"

const filter = ref<string>("")
const rows = ref<any>([
	{ placeLeave: "สํานักงานกรุงเทพมหานคร ", dateStartLeave: "02/02/2566", dateLeave: "10/03/2565", status: "รอดำเนินการ" },
	{ placeLeave: "สํานักงานกรุงเทพมหานคร ", dateStartLeave: "02/02/2566", dateLeave: "10/03/2565", status: "เสร็จสิ้น" },
	{ placeLeave: "สํานักงานกรุงเทพมหานคร ", dateStartLeave: "02/02/2566", dateLeave: "10/03/2565", status: "เสร็จสิ้น" },
])
const initialPagination = ref({
	rowsPerPage: 0,
})
const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "status"])

const columns = ref<QTableProps["columns"]>([
	{
		name: "no",
		align: "left",
		label: "ลำดับ",
		sortable: true,
		field: "no",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:5px;",
	},
	{
		name: "placeLeave",
		align: "left",
		label: "สถานที่ยื่นขอลาออกจากราชการ",
		sortable: true,
		field: "placeLeave",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "dateStartLeave",
		align: "left",
		label: "วันที่ยื่นขอลาออกจากราชการ",
		sortable: true,
		field: "dateStartLeave",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:15%;",
	},
	{
		name: "dateLeave",
		align: "left",
		label: "วันที่ขอลาออกจากราชการ",
		sortable: true,
		field: "dateLeave",
		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 clickAdd = async () => {
	router.push(`/leave/add`)
}
</script>
<template>
	<div class="col-12 row justify-center">
		<div class="col-xs-12 col-sm-12 col-md-11">
			<div class="toptitle text-white col-12 row items-center">
				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
				ลาออก
			</div>
			<div class="col-12">
				<q-card bordered class="q-pa-md">
					<Table
						style="max-height: 80vh"
						:rows="rows"
						:columns="columns"
						:filter="filter"
						:visible-columns="visibleColumns"
						v-model:inputfilter="filter"
						v-model:inputvisible="visibleColumns"
						:pagination="initialPagination"
						:inputShow="false"
						:add="clickAdd"
						:titleText="''"
					>
						<template #columns="props">
							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/leave/1`)">
								<q-td v-for="col in props.cols" :key="col.name" :props="props">
									<div v-if="col.name == 'no'">
										{{ props.rowIndex + 1 }}
									</div>
									<div v-else-if="col.name == 'status'">
										<q-icon size="20px" v-if="props.row.status == 'รอดำเนินการ'" name="mdi-timer-sand" color="deep-orange">
											<q-tooltip>รอดำเนินการ</q-tooltip>
										</q-icon>
										<q-icon size="20px" v-else name="mdi-check" color="teal">
											<q-tooltip>เสร็จสิ้น</q-tooltip>
										</q-icon>
									</div>
									<div v-else>
										{{ col.value }}
									</div>
								</q-td>
							</q-tr>
						</template>
					</Table>
				</q-card>
			</div>
		</div>
	</div>
</template>
<style></style>