From 79889c94646dbd2217f758686094a9eae484b7b7 Mon Sep 17 00:00:00 2001
From: Tanyalak <tanyalak@frappet.com>
Date: Fri, 7 Jul 2023 17:26:40 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B0=E0=B8=9A=E0=B8=9A=E0=B8=97=E0=B8=94=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/interface/request/main/main.ts            |   6 +
 .../views/01_compete/DetailEx.vue             |   2 +-
 .../views/01_compete/PeriodAdd.vue            |  10 +-
 src/modules/05_placement/components/Main.vue  |   2 +-
 .../OrderPlacement/MainOrderPlacement.vue     |   2 +-
 .../components/probation/MainProbation.vue    | 566 ++++++++++++++++++
 .../components/probation/ProbationDetail.vue  | 333 +++++++++++
 .../05_placement/interface/request/Main.ts    |  27 +
 src/modules/05_placement/router.ts            |  24 +
 9 files changed, 964 insertions(+), 8 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/MainProbation.vue
 create mode 100644 src/modules/05_placement/components/probation/ProbationDetail.vue

diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index f3f39af82..377179b8d 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -193,6 +193,12 @@ const menuList = readonly<any[]>([
         path: "Orderplacement",
         role: "placement",
       },
+      {
+        key: 6.3,
+        label: "การทดลองงาน" /* การทดลองงาน */,
+        path: "probation",
+        role: "probation",
+      },
     ],
   },
   {
diff --git a/src/modules/03_recruiting/views/01_compete/DetailEx.vue b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
index 06fb879e3..6319215b0 100644
--- a/src/modules/03_recruiting/views/01_compete/DetailEx.vue
+++ b/src/modules/03_recruiting/views/01_compete/DetailEx.vue
@@ -2,7 +2,7 @@
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     <q-btn
-      icon="mdi-arrow-"
+      icon="mdi-arrow-left"
       unelevated
       round
       dense
diff --git a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
index 9fe708ead..ec41e4b9a 100644
--- a/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
+++ b/src/modules/03_recruiting/views/01_compete/PeriodAdd.vue
@@ -111,7 +111,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="dateExam != null ? date2Thai(dateExam) : null"
                   :label="`${'วันที่สอบ'}`"
                   :rules="[(val) => !!val || `${'กรุณาเลือกวันที่สอบ'}`]"
@@ -149,7 +149,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     dateAnnouncement != null
                       ? dateThaiRange(dateAnnouncement)
@@ -191,7 +191,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     dateRegister != null ? dateThaiRange(dateRegister) : null
                   "
@@ -231,7 +231,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     datePayment != null ? dateThaiRange(datePayment) : null
                   "
@@ -271,7 +271,7 @@
                 <q-input
                   outlined
                   dense
-                  class="full-width datepicker q-mb-md"
+                  class="full-width datepicker q-mb-sm"
                   :model-value="
                     dateAnnounce != null ? date2Thai(dateAnnounce) : null
                   "
diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index c4180bdfe..7098a4a3c 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -315,7 +315,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
     รายการสอบแข่งขัน / คัดเลือก
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-    <div class="row q-col-gutter-md">
+    <div class="row q-col-gutter-sm">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
           class="col-xs-12 col-sm-3 col-md-2"
diff --git a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
index 5c93f0fae..a63300ca2 100644
--- a/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
+++ b/src/modules/05_placement/components/OrderPlacement/MainOrderPlacement.vue
@@ -2,7 +2,7 @@
   <div class="toptitle text-dark col-12 row items-center">ออกคำสั่ง</div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-      <div class="row q-col-gutter-md">
+      <div class="row q-col-gutter-sm">
         <div class="row col-12 q-col-gutter-sm">
           <q-select
             class="col-xs-12 col-sm-3 col-md-2"
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
new file mode 100644
index 000000000..78ab58bc5
--- /dev/null
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -0,0 +1,566 @@
+<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>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
new file mode 100644
index 000000000..4a971e5a0
--- /dev/null
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -0,0 +1,333 @@
+<template>
+    <div class="toptitle text-dark 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)"
+        />
+        รายละเอียดงานที่ได้รับมอบหมายของ {{ name }}
+				
+    </div>
+    <q-card bordered class="row col-12 text-dark">
+			<div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
+				<div class="q-pl-sm text-weight-bold text-subtitle2">{{ name }}</div>
+				<q-space />
+				<q-btn outline color="blue" dense icon-right="mdi-open-in-new" class="q-px-sm" label="ดูข้อมูลทะเบียนประวัติ" />
+			</div>
+			<div class="col-12"><q-separator/></div>
+			<div class="row col-12 q-pa-md">
+				<div class="col-12 row bg-white q-col-gutter-md">
+					<div class="col-xs-3 col-sm-2 col-md-1 row ">
+						<q-img src="@/assets/avatar_user.jpg" />
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12 q-pl-md">
+							<div class="col-12 text-top">ตำแหน่งในสายงาน</div>
+							<div class="col-12 text-detail">{{position}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-2 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">ระดับ</div>
+							<div class="col-12 text-detail">{{level}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">สังกัด</div>
+							<div class="col-12 text-detail">{{institution}}</div>
+						</div>
+					</div>
+					<div class="col-xs-6 col-sm-3 row items-center">
+						<div class="col-12">
+							<div class="col-12 text-top">สถานะการทดลองงาน</div>
+							<div class="col-12 text-detail">
+								<q-icon size="20px" v-if="status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange" />
+								<q-icon size="20px" v-else-if="status == 'ไม่ผ่านการทดลอง'" name="mdi-close" color="red" />
+								<q-icon size="20px" v-else name="mdi-check" color="teal" />
+								{{ status }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+    </q-card>
+  <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 />
+				<div>
+					<q-btn flat round color="blue" icon="mdi-file-download-outline">
+						<q-tooltip> ดาวน์โหลด .Docx</q-tooltip>
+					</q-btn>
+				</div>
+				<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">
+							<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-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>    
+</template>
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, useAttrs } from "vue";
+import type { QTableProps } from "quasar";
+import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+const router = useRouter();
+
+const name = ref<string>('นายสมคิด ยอดใจ')
+const position = ref<string>('นักจัดการงานทั่วไป')
+const level = ref<string>('ชำนาญการพิเศษ')
+const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
+const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "startDate",
+	"endDete",
+  "intendant",
+  "commander",
+]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+
+// หัวตาราง
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "startDate",
+    align: "left",
+    label: "ตั้งแต่วันที่",
+    sortable: true,
+    field: "startDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "endDete",
+    align: "left",
+    label: "ถึงวันที่",
+    sortable: true,
+    field: "endDete",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "intendant",
+    align: "left",
+    label: "ผู้ดูแล",
+    sortable: true,
+    field: "intendant",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+	{
+    name: "commander",
+    align: "left",
+    label: "ผู้บังคับบัญชา",
+    sortable: true,
+    field: "commander",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  }
+]);
+
+// ข้อมูลตาราง (จำลอง)
+const rows = ref<FormProbationDetail[]>([
+  {
+		no: "1",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวรัชภรณ์ ภักดี",
+  	commander: "นายนภัทร  วันดี"
+	},
+	{
+		no: "2",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวทวิดา กมลเวชชี",
+  	commander: "นางพิศ โพธิ์ดำ"
+	},
+	{
+		no: "3",
+		startDate: "09 ก.ย. 2566",
+		endDete: "20 ต.ค. 2566",
+  	intendant: "นางสาวทวิดา กมลเวชชี",
+  	commander: "นายนภัทร  วันดี"
+	},
+]);
+
+const clickAdd = () => {
+};
+
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.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>
+.q-img {
+  border-radius: 5px;
+	height: 70px;
+}
+.text-top{
+	color: gray;
+	font-weight: 400;
+	padding-bottom: 3px;
+}
+.text-detail{
+	font-weight: 500;
+
+}
+.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>
\ No newline at end of file
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index cf01f9fe4..b7b38d6a1 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -21,5 +21,32 @@ interface FormOrderPlacementMainData {
   OrderType: string;
 }
 
+interface FormMainProbation {
+  no: string;
+  name: string;
+  position: string;
+  level: string;
+  institution: string;
+  time: string;
+  status: string;
+  orderNum: string;
+}
+interface FormMainProbation2 {
+  no: string;
+  name: string;
+  position: string;
+  level: string;
+  institution: string;
+}
+interface FormProbationDetail {
+  no: string;
+  startDate: string;
+  endDete: string;
+  intendant: string;
+  commander: string;
+}
 export type { FormPlacementMainData };
 export type { FormOrderPlacementMainData };
+export type { FormMainProbation };
+export type { FormMainProbation2 };
+export type { FormProbationDetail };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 22a1e2206..133d0d1fa 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -20,7 +20,11 @@ const detailOrderReplace = () =>
   import(
     "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
   );
+const mainProbation = () =>
+  import("@/modules/05_placement/components/probation/MainProbation.vue");
 
+const probationDetail = () =>
+  import("@/modules/05_placement/components/probation/ProbationDetail.vue");
 export default [
   {
     path: "/placement",
@@ -82,4 +86,24 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation",
+    name: "probation",
+    component: mainProbation,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
+  {
+    path: "/probation/detail/:id",
+    name: "probationDetail",
+    component: probationDetail,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
 ];