hrms-mgt/src/modules/05_placement/components/probation/MainProbation.vue

<template>
    <div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div>
		<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
			<div class="row q-col-gutter-sm">
				<div class="row col-12 q-col-gutter-sm">
					<div>
						<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
							<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
						</q-btn>
					</div>
					<q-space />

					<q-input
						class="col-xs-12 col-sm-3 col-md-2"
						standout
						dense
						v-model="filterKeyword"
						ref="filterRef"
						outlined
						debounce="300"
						placeholder="ค้นหา"
					>
						<template v-slot:append>
							<q-icon v-if="filterKeyword == ''" name="search" />
							<q-icon
								v-if="filterKeyword !== ''"
								name="clear"
								class="cursor-pointer"
								@click="resetFilter"
							/>
						</template>
					</q-input>

					<q-select
						v-model="visibleColumns"
						multiple
						outlined
						dense
						options-dense
						:display-value="$q.lang.table.columns"
						emit-value
						map-options
						:options="columns"
						option-value="name"
						options-cover
						style="min-width: 150px"
						class="col-xs-12 col-sm-3 col-md-2"
					/>
				</div>
				<div class="col-12">
					<q-table
						ref="table"
						:columns="columns"
						:rows="rows"
						:filter="filterKeyword"
						row-key="Order"
						flat
						bordered
						:paging="true"
						dense
						class="custom-header-table"
						v-bind="attrs"
						:visible-columns="visibleColumns"
						:pagination-label="paginationLabel"
						v-model: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">{{ col.label }}</span>
								</q-th>
							</q-tr>
						</template>
						<template v-slot:body="props">
							<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/detail/${props.rowIndex + 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-if="props.row.status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red">
											<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>
						<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>
					</q-table>
				</div>
			</div>
    </q-card>

		<q-dialog v-model="modal" persistent>
			<q-card style="width: 900px; max-width: 80vw;">
				<q-form ref="myForm">
					<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
					<q-separator />
					<q-card-section class="q-pa-md q-col-gutter-sm">
						<q-input
							class="col-12"
							standout
							dense
							v-model="filterKeyword2"
							ref="filterRef2"
							outlined
							debounce="300"
							placeholder="ค้นหา"
						>
							<template v-slot:append>
								<q-icon v-if="filterKeyword2 == ''" name="search" />
								<q-icon
									v-if="filterKeyword2 !== ''"
									name="clear"
									class="cursor-pointer"
									@click="resetFilter2"
								/>
							</template>
						</q-input>
						<div class="col-12">
							<q-table
								ref="table2"
								:columns="columns2"
								:rows="rows2"
								:filter="filterKeyword2"
								row-key="Order"
								flat
								bordered
								:paging="true"
								dense
								class="custom-header-table"
								v-bind="attrs"
								:visible-columns="visibleColumns2"
								:pagination-label="paginationLabel"
								v-model: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">{{ col.label }}</span>
										</q-th>
										<q-th auto-width />
									</q-tr>
								</template>
								<template v-slot:body="props">
									<q-tr :props="props" class="cursor-pointer">
										<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>
												{{ col.value }}
											</div>
										</q-td>
										<q-td auto-width>
											<q-btn
												dense
												class="q-px-md"
												outline
												color="primary"
												v-close-popup
												label="เพิ่ม"
											>
											</q-btn>
										</q-td>
									</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>
							</q-table>
						</div>
					</q-card-section>        
				</q-form>
			</q-card>
  	</q-dialog>
</template>

<script setup lang="ts">
import { ref, useAttrs } from "vue";
import type { QTableProps } from "quasar";
import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main";
import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
import router from "@/router";
import { useQuasar } from "quasar";

const $q = useQuasar(); //ใช้ noti quasar
const modal = ref<boolean>(false);
const pagination = ref({
  sortBy: "desc",
  descending: false,
  page: 1,
  rowsPerPage: 10,
});

const visibleColumns = ref<string[]>([
  "no",
  "name",
	"position",
  "level",
  "institution",
  "time",
  "status",
  "orderNum",
]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง

// หัวตาราง
const columns = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "institution",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "institution",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "time",
    align: "center",
    label: "ครั้งที่ทดลองงาน",
    sortable: true,
    field: "time",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "orderNum",
    align: "center",
    label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
    sortable: true,
    field: "orderNum",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
  {
    name: "status",
    align: "center",
    label: "สถานะทดลองงาน",
    sortable: true,
    field: "status",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  }
]);

// ข้อมูลตาราง (จำลอง)
const rows = ref<FormMainProbation[]>([
	{
		no:"1",
		name: "นายสมคิด ยอดใจ ",
		position: "นักวิชาการพัสดุ",
		level: "ปฏิบัติการ",
		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
		time: "1",
		status: "อยู่ระหว่างการทดลองงาน",
		orderNum: "11/2566",
	},
	{
		no:"2",
		name: "นายเกียรติศักดิ์ บัณฑิต",
		position: "นักวิชาการพัสดุ",
		level: "ปฏิบัติการ",
		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
		time: "1",
		status: "อยู่ระหว่างการทดลองงาน",
		orderNum: "11/2566",
	},
	{
		no:"3",
		name: "นางสาวกัณฐิมา กาฬสินธุ์",
		position: "นักจัดการงานทั่วไป",
		level: "ปฏิบัติการ",
		institution: "กลุ่มงานช่วยนักบริหาร",
		time: "1",
		status: "อยู่ระหว่างการทดลองงาน",
		orderNum: "11/2566",
	},
	{
		no:"4",
		name: "นางสาวเมขลา กระจ่างมนตรี",
		position: "นักจัดการงานทั่วไป",
		level: "ปฏิบัติการ",
		institution: "กลุ่มงานช่วยนักบริหาร",
		time: "1",
		status: "ไม่ผ่านการทดลอง",
		orderNum: "11/2566",
	},
	{
		no:"5",
		name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
		position: "นักจัดการงานทั่วไป",
		level: "ปฏิบัติการ",
		institution: "กลุ่มงานช่วยนักบริหาร",
		time: "1",
		status: "ผ่านการทดลองงาน",
		orderNum: "11/2566",
	}
]);

const visibleColumns2 = ref<string[]>([
  "no",
  "name",
	"position",
  "level",
  "institution"
]);

// หัวตาราง2
const columns2 = ref<QTableProps["columns"]>([
  {
    name: "no",
    align: "left",
    label: "ลำดับ",
    sortable: true,
    field: "no",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px"
  },
  {
    name: "name",
    align: "left",
    label: "ชื่อ-สกุล",
    sortable: true,
    field: "name",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "position",
    align: "left",
    label: "ตำแหน่งในสายงาน",
    sortable: true,
    field: "position",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "level",
    align: "left",
    label: "ระดับ",
    sortable: true,
    field: "level",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  },
	{
    name: "institution",
    align: "left",
    label: "สังกัด",
    sortable: true,
    field: "institution",
    headerStyle: "font-size: 14px",
    style: "font-size: 14px",
  }
]);

// ข้อมูลตาราง (จำลอง)
const rows2 = ref<FormMainProbation2[]>([
  {
		no:"1",
    name: "นายใจดี ยอดใจ ",
		position: "นักวิชาการพัสดุ",
		level: "ปฏิบัติการ",
  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
	{
		no:"2",
    name: "นายจักกริน บัณฑิต",
		position: "นักวิชาการพัสดุ",
		level: "ปฏิบัติการ",
  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
  },
	{
		no:"3",
    name: "นางสาวกัณฐิมา กาฬสินธุ์",
		position: "นักจัดการงานทั่วไป",
		level: "ปฏิบัติการ",
  	institution: "กลุ่มงานช่วยนักบริหาร",
  },
	{
		no:"4",
    name: "นางสาวเมขลา กระจ่างมนตรี",
		position: "นักจัดการงานทั่วไป",
		level: "ปฏิบัติการ",
  	institution: "กลุ่มงานช่วยนักบริหาร",
  },
	{
		no:"5",
    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
		position: "นักจัดการงานทั่วไป",
		level: "ปฏิบัติการ",
  	institution: "กลุ่มงานช่วยนักบริหาร",
  }
]);

const clickDelete = (id: string) => {
  $q.dialog({
    title: "ยืนยันการลบข้อมูล",
    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};


const clickAdd = () => {
	modal.value = true
};
const clickClose = async () => {
  modal.value = false;
};

// ค้นหาในตาราง
const filterKeyword = ref<string>("");
const filterRef = ref<any>(null);
const resetFilter = () => {
  filterKeyword.value = "";
  filterRef.value.focus();
};

const filterKeyword2 = ref<string>("");
const filterRef2 = ref<any>(null);
const resetFilter2 = () => {
  filterKeyword2.value = "";
  filterRef2.value.focus();
};

const attrs = ref<any>(useAttrs());

const paging = ref<boolean>(true);
const paginationLabel = (start: string, end: string, total: string) => {
  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
  else return start + "-" + end + " ใน " + total;
};

</script>

<style lang="scss" scope>
.filter-card {
  background-color: #f1f1f1b0;
}

.toggle-expired-account {
  font-size: 12px;
  font-weight: 400;
  font-size: 15px;
  line-height: 150%;
  color: #35373c;
}

.icon-color {
  color: #4154b3;
}

.custom-header-table {
  max-height: 64vh;

  .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;
    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>