hrms-user/src/modules/05_leave/componenst/Table.vue

<script setup lang="ts">
import { ref, useAttrs, reactive, onMounted } from "vue"
import { useLeaveStore } from "@/modules/05_leave/store"

const leaveStore = useLeaveStore()
const { filterSelector, searchFilterTable } = leaveStore
const attrs = ref<any>(useAttrs())
const table = ref<any>(null)
const filterRef = ref<any>(null)

/**
 * ตั้งค่า pagination
 */
const paginationLabel = (start: string, end: string, total: string) => {
	return start + "-" + end + " ใน " + total
}
const pagination = ref({
	sortBy: "desc",
	descending: false,
	page: 1,
	rowsPerPage: 10,
})

/** รับ props มาจากหน้าหลัก */
const props = defineProps({
	count: Number,
	pass: Number,
	notpass: Number,
	inputfilter: String,
	name: String,
	icon: String,
	inputvisible: Array,
	editvisible: Boolean,
	grid: Boolean,
	inputShow: Boolean,
})

/**
 *  ฟังก์ชั่น emit ค่าที่กำหนด
 */
const emit = defineEmits(["update:inputfilter", "update:inputvisible", "update:editvisible"])
const updateInput = (value: string | number | null) => {
	emit("update:inputfilter", value)
}
const updateVisible = (value: []) => {
	emit("update:inputvisible", value)
}

/**
 * reset ค่าที่ค้นหา
 */
const resetFilter = () => {
	// reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
	emit("update:inputfilter", "")
	filterRef.value.focus()
}
</script>
<template>
	<div class="q-py-sm row">
		<q-card bordered flat class="q-py-sm q-pl-sm col-12 row bg-grey-1 shadow-0">
			<div class="items-center col-12 row q-col-gutter-sm">
				<q-select
                  v-if="leaveStore.tabValue === 'list'"
                  outlined
                  dense
                  lazy-rules
                  v-model="leaveStore.fiscalYearyear"
                  :label="`${'ปี พ.ศ.'}`"
                  emit-value
                  map-options
                  option-label="name"
                  :options="leaveStore.fiscalyearOP"
                  option-value="id"
                  hide-bottom-space
                  style="min-width: 150px"
                  class="col-xs-12 col-sm-auto"
                  @update:model-value="searchFilterTable"
                  @filter="(inputValue:any,
                    doneFn:Function) => filterSelector(inputValue, doneFn,'fiscalyearOP'
                    ) "
                />
				<!-- ค้นหาข้อความใน table -->
				<q-select
					outlined
					dense
					lazy-rules
					v-model="leaveStore.LeaveType"
					:rules="[val => !!val || `${'กรุณาเลือกประเภทใบลา'}`]"
					:label="`${'ประเภทใบลา'}`"
					emit-value
					map-options
					option-label="name"
					:options="leaveStore.typeOptions"
					option-value="id"
					hide-bottom-space
					style="min-width: 150px"
					class="col-xs-12 col-sm-auto"
					@update:model-value="searchFilterTable"
					@filter="(inputValue:any,
                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveTypeOption'
                    ) "
				/>
				<q-select
					outlined
					dense
					lazy-rules
					v-model="leaveStore.LeaveStatus"
					:rules="[val => !!val || `${'กรุณาเลือกสถานะ'}`]"
					:label="`${'สถานะ'}`"
					emit-value
					map-options
					option-label="name"
					:options="leaveStore.statusOptions"
					option-value="id"
					hide-bottom-space
					style="min-width: 150px"
					class="col-xs-12 col-sm-auto"
					@update:model-value="searchFilterTable"
					@filter="(inputValue:any,
                    doneFn:Function) => filterSelector(inputValue, doneFn,'LeaveStatusOption'
                    ) "
				/>
				<q-space />
				<q-input standout dense :model-value="inputfilter" ref="filterRef" @update:model-value="updateInput" outlined debounce="300" placeholder="ค้นหา" class="gt-xs" style="max-width: 150px">
					<template v-slot:append>
						<q-icon v-if="inputfilter == ''" name="search" />
						<q-icon v-if="inputfilter !== ''" name="clear" class="cursor-pointer" @click="resetFilter" />
					</template>
				</q-input>
				<!-- แสดงคอลัมน์ใน table -->
				<q-select
					:model-value="inputvisible"
					@update:model-value="updateVisible"
					:display-value="$q.lang.table.columns"
					multiple
					outlined
					dense
					:options="attrs.columns"
					options-dense
					option-value="name"
					map-options
					emit-value
					style="min-width: 150px"
					class="gt-xs"
				>
					<template> </template>
				</q-select>
			</div>
		</q-card>
	</div>
	<div>
		<q-table
			ref="table"
			flat
			bordered
			class="custom-table2"
			v-bind="attrs"
			virtual-scroll
			:virtual-scroll-sticky-size-start="48"
			dense
			:pagination-label="paginationLabel"
			:pagination="pagination"
		>
			<template v-slot:header="props">
				<q-tr :props="props">
					<q-th v-for="col in props.cols" :key="col.name" :props="props">
						<span class="text-weight-medium" v-html="col.label" />
					</q-th>
				</q-tr>
			</template>
			<template v-slot:pagination="scope">
				<q-pagination v-model="pagination.page" active-color="primary" color="dark" :max="scope.pagesNumber" :max-pages="5" size="sm" boundary-links direction-links></q-pagination>
			</template>
			<template #body="props">
				<slot v-bind="props" name="columns"></slot>
			</template>
		</q-table>
	</div>
</template>

<style lang="scss">
.icon-color {
	color: #4154b3;
}

.custom-table2 {
	.q-table tr:nth-child(odd) td {
		background: white;
	}

	.q-table tr:nth-child(even) td {
		background: #f8f8f8;
	}

	.q-table thead tr {
		background: #ecebeb;
	}

	.q-table thead tr th {
		position: sticky;
	}

	.q-table td:nth-of-type(2) {
		z-index: 3 !important;
	}

	.q-table th:nth-of-type(2),
	.q-table td:nth-of-type(2) {
		position: sticky;
		left: 0;
		z-index: 1;
	}

	/* this will be the loading indicator */
	.q-table thead tr:last-child th {
		/* height of all previous header rows */
		top: 48px;
	}

	.q-table thead tr:first-child th {
		top: 0;
	}
}
</style>