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

<script setup lang="ts">
import type { QTableProps } from "quasar"
import { ref, onMounted } from "vue"
import { useQuasar } from "quasar"
import { useRouter } from "vue-router"
import { useCounterMixin } from "@/stores/mixin"
import http from "@/plugins/http"
import config from "@/app.config"
import { useRestDataStore } from "@/modules/03_leave/store"
import Table from "@/components/Table.vue"

const RestData = useRestDataStore()
const { statusText } = RestData
const router = useRouter()
const $q = useQuasar()
const mixin = useCounterMixin()
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } = mixin

const filter = ref<string>("")
const visibleColumns = ref<String[]>(["no", "placeLeave", "dateStartLeave", "dateLeave", "statustext"])
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: "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: "statustext",
		align: "left",
		label: "สถานะ",
		sortable: true,
		field: "statustext",
		headerStyle: "font-size: 14px",
		style: "font-size: 14px; width:10%;",
	},
])
const rows = ref<any>([])
const initialPagination = ref({
	rowsPerPage: 0,
})

onMounted(() => {
	fectListleave()
})

const fectListleave = async () => {
	showLoader()
	await http
		.get(config.API.listUser())
		.then((res: any) => {
			// console.log(res);
			let data = res.data.result
			console.log(data)
			rows.value = data.map((e: any) => ({
				id: e.id,
				placeLeave: e.location,
				dateStartLeave: date2Thai(e.sendDate),
				dateLeave: date2Thai(e.activeDate),
				status: e.status,
				statustext: statusText(e.status),
			}))
		})
		.catch((e: any) => {
			console.log(e)
			messageError($q, e)
		})
		.finally(() => {
			hideLoader()
		})
}

const clickAdd = async () => {
	router.push(`/leave/add`)
}

const clickBack = () => {
	router.push(`/`)
}
</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="clickBack" />
				ลาออก
			</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/` + props.row.id)">
								<q-td key="no" :props="props">
									{{ props.rowIndex + 1 }}
								</q-td>
								<q-td key="placeLeave" :props="props">
									{{ props.row.placeLeave }}
								</q-td>
								<q-td key="dateStartLeave" :props="props">
									{{ props.row.dateStartLeave }}
								</q-td>
								<q-td key="dateStartLeave" :props="props">
									{{ props.row.dateStartLeave }}
								</q-td>
								<q-td key="statustext" :props="props">
									{{ props.row.statustext }}
								</q-td>
							</q-tr>
						</template>
					</Table>
				</q-card>
			</div>
		</div>
	</div>
</template>
<style></style>