ปรับหน้าลงเวลาเข้างาน, ออกงาน, ประวัติการลาเวลา

src/modules/03_retire/views/main.vue

@@ -0,0 +1,156 @@
+<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_retire/store"
+import Table from "@/components/Table.vue"
+
+const RestData = useRestDataStore()
+const { statusText } = RestData
+const router = useRouter()
+const $q = useQuasar()
+const mixin = useCounterMixin()
+const { date2Thai, 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) => {
+			let data = res.data.result
+			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) => {
+			messageError($q, e)
+		})
+		.finally(() => {
+			hideLoader()
+		})
+}
+
+const clickAdd = async () => {
+	router.push(`/retire/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(`/retire/` + 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>