From 626e6023c32b3520bae157c25aefa0a57fbf25f0 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 25 Jul 2023 18:04:11 +0700
Subject: [PATCH 1/8] no message

---
 .../components/ListRetirement/AddList.vue     | 110 +++++++++++++-----
 .../components/ListRetirement/TableList.vue   |  67 +++++++++--
 src/modules/06_retirement/router.ts           |   4 +-
 src/modules/06_retirement/views/Main.vue      |   2 +-
 4 files changed, 143 insertions(+), 40 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 01c06f54c..eb21b9163 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -4,24 +4,31 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success } = mixin;
+const { messageError, success, showLoader, hideLoader } = mixin;
+const route = useRoute();
 
+const type_params = route.params.type;
 const props = defineProps({
   retireld: String,
+  listId: String,
+  UpdateListId: Function,
 });
 
 const modal = ref<boolean>(false);
 const retireld = ref<any>();
+const type = ref<any>();
+const listId = ref(props.listId);
 
 const columns = ref<any["columns"]>([
   {
-    name: "order",
+    name: "index",
     required: true,
     label: "ลำดับ",
-    field: "order",
+    field: "index",
     align: "left",
   },
   {
@@ -108,27 +115,73 @@ const filter = ref<string>("");
 watch(modal, () => {
   if (modal.value === true) {
     retireld.value = props.retireld;
-    fecthlistRetire(retireld.value);
+    if (type_params === "officer") {
+      type.value = type_params;
+    } else type.value = "all";
+
+    fecthlistRetire();
   }
 });
-const fecthlistRetire = async (retireld: any) => {
-  // await http
-  //   .get(config.API.listRetire(retireld))
-  //   .then((res) => {
-  //     console.log(res);
-  //     rows.value = res.data.result.map((e: any) => ({
-  //       order: e.order,
-  //       fullname: e.fullName,
-  //       position: e.position,
-  //       level: e.positionEmployeeLevel,
-  //       organizationOrganization: e.organizationOrganization,
-  //     }));
-  //   })
-  //   .catch((e) => {
-  //     messageError($q, e);
-  //   });
+const updateListId = (val: any) => {
+  listId.value = val;
+  if (props.UpdateListId) {
+    props.UpdateListId(listId.value);
+  }
 };
-const clickAdd = () => {
+const fecthlistRetire = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      const id = res.data.result[0].id;
+      console.log(id);
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [{}];
+  if (type.value === "officer") {
+    data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
+  } else if (type.value === "all") {
+    console.log("all");
+    data = [
+      { criteriaType: "is_retire", criteriaValue: "false" },
+      { criteriaType: "employee_class", criteriaValue: "perm" },
+    ];
+  }
+  console.log(data);
+
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, type.value), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log(res.data.result);
+      rows.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const clickAdd = (props: any) => {
+  console.log(props.row.id);
+  let data: any = props.row.id;
+
   $q.dialog({
     title: "ยืนยันการเพิ่มข้อมูล",
     message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
@@ -141,15 +194,17 @@ const clickAdd = () => {
     .onOk(async () => {
       console.log("เพิ่มข้อมูล");
       await http
-        .put(config.API.profileRetire("123"))
-        .then(() => {
+        .put(config.API.profileRetire(data), { profileId: data })
+        .then((res) => {
           success($q, "เพิ่มข้อมูลสำเร็จ");
+          updateListId(data);
         })
         .catch((e) => {
           messageError($q, e);
         })
         .finally(() => {
           fecthlistRetire();
+          modal.value = false;
         });
     })
     .onCancel(() => {})
@@ -236,10 +291,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
           </template>
           <template v-slot:body="props">
             <q-tr :props="props" class="cursor-pointer">
-              <!-- <q-td>{{ props.rowIndex + 1 }}</q-td> -->
-              <q-td key="order" :props="props">
+              <q-td>{{ props.rowIndex + 1 }}</q-td>
+              <!-- <q-td key="order" :props="props">
                 {{ props.row.order }}
-              </q-td>
+              </q-td> -->
               <q-td key="fullname" :props="props">
                 {{ props.row.fullname }}
               </q-td>
@@ -254,9 +309,10 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-td>
                 <q-btn
                   outline
+                  :props="props"
                   label="เพิ่ม"
                   class="text-teal-5"
-                  @click="clickAdd"
+                  @click="clickAdd(props)"
                 />
               </q-td>
             </q-tr>
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 441aa85bf..adb0c5dc5 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
 import AddList from "../ListRetirement/AddList.vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -19,12 +19,16 @@ const modalNote = ref<boolean>(false);
 const note = ref<string>("");
 const retireProfileId = ref<string>("");
 const retireld = ref<string>();
+const listId = ref<string>("");
 
 onMounted(() => {
-  console.log(route.params.id);
+  console.log(route.params);
   if (route.params.id === undefined) {
     fecthlistprofile(type_params, year_params);
-  } else fecthlist(retireld_params);
+  }
+  if (route.params.id !== undefined) {
+    fecthlist(retireld_params);
+  }
 });
 const fecthlistprofile = async (type: any, year: any) => {
   showLoader();
@@ -45,7 +49,6 @@ const fecthlistprofile = async (type: any, year: any) => {
         positionLavel: e.positionEmployeeLevel,
         bureau: e.oc,
       }));
-      console.log(rows.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -59,7 +62,7 @@ const fecthlist = async (id: any) => {
   await http
     .get(config.API.listRetire(id))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
       retireld.value = res.data.result.id;
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
@@ -278,7 +281,6 @@ const clickDelete = (prop: any) => {
 const backHistory = () => {
   window.history.back();
 };
-
 const fetchReason = async (val: string) => {
   await http
     .get(config.API.reasonId(val))
@@ -328,6 +330,14 @@ const visibleNote = computed(() => {
     return true;
   }
 });
+watch(listId, () => {
+  if (route.params.id === undefined) {
+    fecthlistprofile(type_params, year_params);
+  } else fecthlist(retireld_params);
+});
+const UpdateListId = (newListId: string) => {
+  listId.value = newListId;
+};
 // const saveList = () => {
 //   $q.dialog({
 //     title: "ยืนยันกาบันทึกข้อมูล",
@@ -355,6 +365,23 @@ const visibleNote = computed(() => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
+const classrow = (prop: any) => {
+  console.log(listId.value);
+  if (prop.id === listId.value) {
+    return "color: #26a69a ";
+  } else return "";
+};
+const paging = ref<boolean>(true);
+const pagination = ref({
+  sortBy: "fullname",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+const paginationLabel = (start: number, end: number, total: number) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 
 <template>
@@ -374,7 +401,11 @@ const visibleNote = computed(() => {
   <div>
     <q-card class="col-12 q-pa-md">
       <q-toolbar>
-        <AddList :retireld="retireld" />
+        <AddList
+          :retireld="retireld"
+          :listId="listId"
+          :UpdateListId="UpdateListId"
+        />
         <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
@@ -443,10 +474,11 @@ const visibleNote = computed(() => {
           :columns="columns"
           row-key="name"
           class="custom-header-table"
-          hide-bottom
           :filter="filter"
           :visible-columns="visibleColumns"
           no-data-label="ไม่มีข้อมูล"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
         >
           <template v-slot:header="props">
             <q-tr :props="props">
@@ -461,8 +493,12 @@ const visibleNote = computed(() => {
             </q-tr>
           </template>
           <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
-              <q-td key="order" :props="props">{{ props.row.order }}</q-td>
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              :style="classrow(props.row)"
+            >
+              <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>
               <q-td key="name" :props="props">{{ props.row.name }}</q-td>
               <q-td key="organizationOrganization" :props="props">{{
@@ -516,6 +552,17 @@ const visibleNote = computed(() => {
               </q-td>
             </q-tr>
           </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              color="primary"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
         </q-table>
       </div>
     </q-card>
diff --git a/src/modules/06_retirement/router.ts b/src/modules/06_retirement/router.ts
index 5008215f7..bb5a3c6bf 100644
--- a/src/modules/06_retirement/router.ts
+++ b/src/modules/06_retirement/router.ts
@@ -32,8 +32,8 @@ export default [
     },
   },
   {
-    path: "/retirement/list/:id",
-    name: "retirement/list/id",
+    path: "/retirement/listretire/:id/:type",
+    name: "retirement/list/id/type",
     component: Listretirement,
     meta: {
       Auth: true,
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 1872a756f..98372c02b 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -398,7 +398,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
 const nextPage = (prop: any) => {
   console.log(prop.id);
 
-  router.push(`/retirement/list/${prop.id}`);
+  router.push(`/retirement/listretire/${prop.id}/${type.value}`);
 };
 
 watch(type, () => {

From bf6473cf2831f5840f5c99bbe35a1e5f74a20db3 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 25 Jul 2023 18:06:52 +0700
Subject: [PATCH 2/8] update package  bma-org-chart

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 86d69369e..893544660 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@quasar/extras": "^1.15.8",
     "@tato30/vue-pdf": "^1.5.1",
     "@vuepic/vue-datepicker": "^3.6.3",
-    "bma-org-chart": "^0.0.7",
+    "bma-org-chart": "^0.0.8",
     "keycloak-js": "^20.0.2",
     "moment": "^2.29.4",
     "pinia": "^2.0.29",

From 1084f4bde25428d3b65f63798925bbebb8457c1a Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 25 Jul 2023 18:13:44 +0700
Subject: [PATCH 3/8] =?UTF-8?q?fix=20bug=20display=20&=20popup=20confirm?=
 =?UTF-8?q?=20=E0=B9=80=E0=B8=81=E0=B8=A9=E0=B8=B5=E0=B8=A2=E0=B8=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/modules/06_retirement/views/Main.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index 98372c02b..b5a054580 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -141,7 +141,7 @@
                   {{ props.row.Date }}
                 </q-td>
                 <q-td key="retireNumber" :props="props">
-                  {{ props.row.retireNumber }}
+                  {{ props.row.total }}
                 </q-td>
                 <!-- <q-td auto-width>
                   <q-btn
@@ -299,7 +299,7 @@ const columns2 = ref<QTableProps["columns"]>([
     align: "left",
     label: "จำนวนผู้เกษียณ",
     sortable: true,
-    field: "position",
+    field: "total",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -361,7 +361,21 @@ const rows2 = ref<FormMainProbation2[]>([
 
 const clickAdd = () => {
   //   modal.value = true;
-  router.push(`/retirement/list/${type.value}/${currentYear}`);
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูลประกาศเกษียณ",
+    message: "ต้องการเพิ่มข้อมูลประกาศเกษียณใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      router.push(`/retirement/list/${type.value}/${currentYear}`);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+
 };
 const clickClose = async () => {
   modal.value = false;

From d6c2fbbc8d31d68ff86b95f142caddc3e33eb2a7 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 25 Jul 2023 18:28:05 +0700
Subject: [PATCH 4/8] no message

---
 .../components/ListRetirement/AddList.vue           | 13 ++++++++++---
 .../components/ListRetirement/TableList.vue         |  4 ++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index eb21b9163..865c20433 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -12,6 +12,7 @@ const { messageError, success, showLoader, hideLoader } = mixin;
 const route = useRoute();
 
 const type_params = route.params.type;
+const id = route.params.id;
 const props = defineProps({
   retireld: String,
   listId: String,
@@ -113,6 +114,8 @@ const rows = ref<any>([
 ]);
 const filter = ref<string>("");
 watch(modal, () => {
+  console.log(props);
+
   if (modal.value === true) {
     retireld.value = props.retireld;
     if (type_params === "officer") {
@@ -179,7 +182,11 @@ const findlist = async (id: string) => {
     });
 };
 const clickAdd = (props: any) => {
-  console.log(props.row.id);
+  console.log(retireld.value, id);
+  if (retireld.value == undefined) {
+    retireld.value = id;
+  }
+
   let data: any = props.row.id;
 
   $q.dialog({
@@ -194,7 +201,7 @@ const clickAdd = (props: any) => {
     .onOk(async () => {
       console.log("เพิ่มข้อมูล");
       await http
-        .put(config.API.profileRetire(data), { profileId: data })
+        .put(config.API.profileRetire(retireld.value), { profileId: data })
         .then((res) => {
           success($q, "เพิ่มข้อมูลสำเร็จ");
           updateListId(data);
@@ -203,7 +210,7 @@ const clickAdd = (props: any) => {
           messageError($q, e);
         })
         .finally(() => {
-          fecthlistRetire();
+          // fecthlistRetire();
           modal.value = false;
         });
     })
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index adb0c5dc5..aa9311d18 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -62,7 +62,7 @@ const fecthlist = async (id: any) => {
   await http
     .get(config.API.listRetire(id))
     .then((res: any) => {
-      // console.log(res);
+      console.log(res);
       retireld.value = res.data.result.id;
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
@@ -366,7 +366,7 @@ const UpdateListId = (newListId: string) => {
 //     .onDismiss(() => {});
 // };
 const classrow = (prop: any) => {
-  console.log(listId.value);
+  console.log(prop.id);
   if (prop.id === listId.value) {
     return "color: #26a69a ";
   } else return "";

From 97b5e638136512ac957c71d0c2e227e7e637034e Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 25 Jul 2023 21:14:52 +0700
Subject: [PATCH 5/8] =?UTF-8?q?update=20=E0=B9=80=E0=B8=81=E0=B8=A9?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=93=20+=20=E0=B8=9B=E0=B8=B4=E0=B8=94?=
 =?UTF-8?q?=20route=20=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=A5=E0=B8=B0=E0=B9=80=E0=B8=AD=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=94=E0=B8=96=E0=B8=B6=E0=B8=87=E0=B9=81=E0=B8=81?=
 =?UTF-8?q?=E0=B9=88=E0=B8=81=E0=B8=A3=E0=B8=A3=E0=B8=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ListRetirement/AddList.vue     | 16 +++----
 .../components/ListRetirement/TableList.vue   | 47 +++++++++----------
 .../components/resign/Deceased.vue            |  4 +-
 src/modules/06_retirement/views/Main.vue      |  8 ++--
 4 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 865c20433..a9e7a4636 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -16,7 +16,10 @@ const id = route.params.id;
 const props = defineProps({
   retireld: String,
   listId: String,
-  UpdateListId: Function,
+  UpdateListId: {
+		type: Function,
+		default: () => console.log("UpdateListId"),
+	},
 });
 
 const modal = ref<boolean>(false);
@@ -125,11 +128,8 @@ watch(modal, () => {
     fecthlistRetire();
   }
 });
-const updateListId = (val: any) => {
-  listId.value = val;
-  if (props.UpdateListId) {
-    props.UpdateListId(listId.value);
-  }
+const updateListData = (retireld: string, pId: string) => {
+    props.UpdateListId(retireld, pId);
 };
 const fecthlistRetire = async () => {
   showLoader();
@@ -199,12 +199,12 @@ const clickAdd = (props: any) => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("เพิ่มข้อมูล");
+      // console.log("เพิ่มข้อมูล");
       await http
         .put(config.API.profileRetire(retireld.value), { profileId: data })
         .then((res) => {
           success($q, "เพิ่มข้อมูลสำเร็จ");
-          updateListId(data);
+          updateListData(retireld.value, data);
         })
         .catch((e) => {
           messageError($q, e);
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index aa9311d18..29f390b44 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -19,23 +19,23 @@ const modalNote = ref<boolean>(false);
 const note = ref<string>("");
 const retireProfileId = ref<string>("");
 const retireld = ref<string>();
-const listId = ref<string>("");
+const profileId = ref<string>("");
 
 onMounted(() => {
-  console.log(route.params);
-  if (route.params.id === undefined) {
+  // console.log(route.params);
+  if (retireld_params === undefined) {
     fecthlistprofile(type_params, year_params);
-  }
-  if (route.params.id !== undefined) {
+  } else {
     fecthlist(retireld_params);
   }
 });
+
 const fecthlistprofile = async (type: any, year: any) => {
   showLoader();
   await http
     .get(config.API.profile(type, year))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
       retireld.value = res.data.result.id;
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
@@ -62,10 +62,11 @@ const fecthlist = async (id: any) => {
   await http
     .get(config.API.listRetire(id))
     .then((res: any) => {
-      console.log(res);
+      // console.log(res);
       retireld.value = res.data.result.id;
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
+        profileId: e.profileId,
         order: e.order,
         fixname: e.prefix,
         name: e.fullName,
@@ -76,7 +77,7 @@ const fecthlist = async (id: any) => {
         positionLavel: e.positionEmployeeLevel,
         bureau: e.oc,
       }));
-      console.log(rows.value);
+      // console.log(rows.value);
     })
     .catch((e: any) => {
       messageError($q, e);
@@ -250,7 +251,7 @@ const visibleColumns = ref<any>([
 const filter = ref<string>("");
 
 const clickDelete = (prop: any) => {
-  console.log(prop.id);
+  // console.log(prop.id);
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -270,7 +271,7 @@ const clickDelete = (prop: any) => {
           messageError($q, e);
         })
         .finally(() => {
-          if (route.params.id === undefined) {
+          if (retireld_params === undefined) {
             fecthlistprofile(type_params, year_params);
           } else fecthlist(retireld_params);
         });
@@ -285,7 +286,7 @@ const fetchReason = async (val: string) => {
   await http
     .get(config.API.reasonId(val))
     .then((res: any) => {
-      console.log(res.data.result);
+      // console.log(res.data.result);
 
       note.value = res.data.result.reason;
       retireProfileId.value = res.data.result.id;
@@ -305,7 +306,7 @@ const saveNote = () => {
     persistent: true,
   })
     .onOk(async () => {
-      console.log("บันทึกข้อมูล");
+      // console.log("บันทึกข้อมูล");
       await http
         .post(config.API.createnote(), {
           retireProfileId: retireProfileId.value,
@@ -330,13 +331,10 @@ const visibleNote = computed(() => {
     return true;
   }
 });
-watch(listId, () => {
-  if (route.params.id === undefined) {
-    fecthlistprofile(type_params, year_params);
-  } else fecthlist(retireld_params);
-});
-const UpdateListId = (newListId: string) => {
-  listId.value = newListId;
+
+const UpdateListId = async (retireld: string, pId: string) => {
+  profileId.value = pId
+  await fecthlist(retireld)
 };
 // const saveList = () => {
 //   $q.dialog({
@@ -366,14 +364,13 @@ const UpdateListId = (newListId: string) => {
 //     .onDismiss(() => {});
 // };
 const classrow = (prop: any) => {
-  console.log(prop.id);
-  if (prop.id === listId.value) {
-    return "color: #26a69a ";
+  if (prop.profileId === profileId.value) {
+    return "color: #26a69a; border: 1px solid #26a69a;";
   } else return "";
 };
 const paging = ref<boolean>(true);
 const pagination = ref({
-  sortBy: "fullname",
+  sortBy: "order",
   descending: true,
   page: 1,
   rowsPerPage: 10,
@@ -403,8 +400,8 @@ const paginationLabel = (start: number, end: number, total: number) => {
       <q-toolbar>
         <AddList
           :retireld="retireld"
-          :listId="listId"
-          :UpdateListId="UpdateListId"
+          :profile-id="profileId"
+          :update-list-id="UpdateListId"
         />
         <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
diff --git a/src/modules/06_retirement/components/resign/Deceased.vue b/src/modules/06_retirement/components/resign/Deceased.vue
index 457e09713..798dc2ad0 100644
--- a/src/modules/06_retirement/components/resign/Deceased.vue
+++ b/src/modules/06_retirement/components/resign/Deceased.vue
@@ -2,7 +2,7 @@
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
-const router = useRouter();
+// const router = useRouter();
 const pagination = ref({
     sortBy: "desc",
     descending: false,
@@ -187,7 +187,7 @@ const columns = ref<QTableProps["columns"]>([
               </q-tr>
             </template>
             <template v-slot:body="props">
-              <q-tr :props="props" class="cursor-pointer" @click=" router.push(`/retirement/resign/${props.rowIndex + 1}`)">
+              <q-tr :props="props" class="cursor-pointer">
                 <!-- <q-td key="no" :props="props">
                   {{ props.rowIndex + 1 }}
                 </q-td> -->
diff --git a/src/modules/06_retirement/views/Main.vue b/src/modules/06_retirement/views/Main.vue
index b5a054580..6574a1f67 100644
--- a/src/modules/06_retirement/views/Main.vue
+++ b/src/modules/06_retirement/views/Main.vue
@@ -246,15 +246,15 @@ const visibleColumns2 = ref<string[]>(["no", "name", "retireNumber"]);
 const getYear = () => {
   yearOptions.length = 0;
   yearOptions.push(currentYear + 543);
-  console.log(yearOptions);
+  // console.log(yearOptions);
   get(type.value, currentYear);
   fiscalyear.value = currentYear + 543;
 };
-const get = async (type: string, year: string) => {
+const get = async (type: string, year: any) => {
   await http
     .get(config.API.retirement(type, year))
     .then((res) => {
-      console.log(res);
+      // console.log(res);
 
       rows.value = [];
       let data = res.data.result;
@@ -410,7 +410,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
   else return start + "-" + end + " ใน " + total;
 };
 const nextPage = (prop: any) => {
-  console.log(prop.id);
+  // console.log(prop.id);
 
   router.push(`/retirement/listretire/${prop.id}/${type.value}`);
 };

From d035692f44460c19770aa5bc780c02a2640f42ae Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 26 Jul 2023 00:57:05 +0700
Subject: [PATCH 6/8] test & update

---
 .../components/ListRetirement/AddList.vue     | 14 +++++++-----
 .../components/ListRetirement/TableList.vue   | 22 ++++++++++---------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index a9e7a4636..7f72cdc63 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -117,7 +117,7 @@ const rows = ref<any>([
 ]);
 const filter = ref<string>("");
 watch(modal, () => {
-  console.log(props);
+  // console.log(props);
 
   if (modal.value === true) {
     retireld.value = props.retireld;
@@ -137,7 +137,7 @@ const fecthlistRetire = async () => {
     .get(config.API.profileOrganizRoot)
     .then((res) => {
       const id = res.data.result[0].id;
-      console.log(id);
+      // console.log(id);
       if (id !== "") {
         findlist(id);
       }
@@ -152,20 +152,20 @@ const findlist = async (id: string) => {
   if (type.value === "officer") {
     data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
   } else if (type.value === "all") {
-    console.log("all");
+    // console.log("all");
     data = [
       { criteriaType: "is_retire", criteriaValue: "false" },
       { criteriaType: "employee_class", criteriaValue: "perm" },
     ];
   }
-  console.log(data);
+  // console.log(data);
 
   await http
     .post(config.API.profileSearchNewOcIdType(id, type.value), {
       criterias: data,
     })
     .then((res) => {
-      console.log(res.data.result);
+      // console.log(res.data.result);
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
         fullname: e.fullname,
@@ -182,13 +182,15 @@ const findlist = async (id: string) => {
     });
 };
 const clickAdd = (props: any) => {
-  console.log(retireld.value, id);
+  // console.log("props===>",props.row.id)
   if (retireld.value == undefined) {
     retireld.value = id;
   }
 
   let data: any = props.row.id;
 
+  console.log("retireld & profileId",retireld.value, data);
+
   $q.dialog({
     title: "ยืนยันการเพิ่มข้อมูล",
     message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 29f390b44..1fb471a7c 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -332,9 +332,11 @@ const visibleNote = computed(() => {
   }
 });
 
-const UpdateListId = async (retireld: string, pId: string) => {
+const UpdateListId = (retireld: string, pId: string) => {
   profileId.value = pId
-  await fecthlist(retireld)
+  fecthlist(retireld)
+  console.log("profileId",profileId.value);
+
 };
 // const saveList = () => {
 //   $q.dialog({
@@ -363,15 +365,15 @@ const UpdateListId = async (retireld: string, pId: string) => {
 //     .onCancel(() => {})
 //     .onDismiss(() => {});
 // };
-const classrow = (prop: any) => {
-  if (prop.profileId === profileId.value) {
-    return "color: #26a69a; border: 1px solid #26a69a;";
-  } else return "";
-};
+// const classrow = (prop: any) => {
+//   if (profileId.value!=='' && prop.profileId === profileId.value) {
+//     return "color: #26a69a;";
+//   } else return "";
+// };
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "order",
-  descending: true,
+  descending: false,
   page: 1,
   rowsPerPage: 10,
 });
@@ -401,7 +403,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
         <AddList
           :retireld="retireld"
           :profile-id="profileId"
-          :update-list-id="UpdateListId"
+          :UpdateListId="UpdateListId"
         />
         <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
@@ -493,7 +495,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
             <q-tr
               :props="props"
               class="cursor-pointer"
-              :style="classrow(props.row)"
+              :style="props.row.profileId === profileId && 'color: #26a69a;'"
             >
               <q-td key="order" :props="props">{{ props.row.order }} </q-td>
               <q-td key="fixname" :props="props">{{ props.row.fixname }}</q-td>

From 4c9d1cf6bb7245b2c4cf16a9819a0f052c424c4e Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 26 Jul 2023 01:06:35 +0700
Subject: [PATCH 7/8] fix bug add

---
 .../06_retirement/components/ListRetirement/TableList.vue      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 1fb471a7c..249ff5489 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -62,8 +62,7 @@ const fecthlist = async (id: any) => {
   await http
     .get(config.API.listRetire(id))
     .then((res: any) => {
-      // console.log(res);
-      retireld.value = res.data.result.id;
+      // retireld.value = res.data.result.id;
       rows.value = res.data.result.map((e: any) => ({
         id: e.id,
         profileId: e.profileId,

From 86c61e8bf31926aa06289bf5044b293e42175a82 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Wed, 26 Jul 2023 03:15:51 +0700
Subject: [PATCH 8/8] =?UTF-8?q?=E0=B9=81=E0=B8=A2=E0=B8=81=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=20component=20=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=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

---
 .../components/probation/FormAssign.vue       | 236 +++--
 .../components/probation/FormEvaluation.vue   | 806 ++----------------
 .../components/probation/MainDetail.vue       | 297 ++++---
 .../components/probation/ProbationDetail.vue  | 527 ++++++------
 .../components/probation/form/formEva1.vue    | 472 ++++++++++
 .../components/probation/form/formEva2.vue    | 289 +++++++
 .../components/probation/form/formEva3.vue    | 130 +++
 .../probation/form/formEvaOrder.vue           |  83 ++
 .../probation/form/formEvacomment.vue         |  45 +
 .../components/probation/tabs/tabs2.vue       | 116 +++
 .../components/probation/tabs/tabs3.vue       | 116 +++
 .../components/probation/tabs/tabs4.vue       | 116 +++
 src/modules/05_placement/router.ts            | 313 ++++---
 src/modules/05_placement/store.ts             |  14 +
 14 files changed, 2228 insertions(+), 1332 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/form/formEva1.vue
 create mode 100644 src/modules/05_placement/components/probation/form/formEva2.vue
 create mode 100644 src/modules/05_placement/components/probation/form/formEva3.vue
 create mode 100644 src/modules/05_placement/components/probation/form/formEvaOrder.vue
 create mode 100644 src/modules/05_placement/components/probation/form/formEvacomment.vue
 create mode 100644 src/modules/05_placement/components/probation/tabs/tabs2.vue
 create mode 100644 src/modules/05_placement/components/probation/tabs/tabs3.vue
 create mode 100644 src/modules/05_placement/components/probation/tabs/tabs4.vue

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 871af71dc..b7cbad9fc 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -10,13 +10,17 @@
         color="primary"
         class="q-mr-sm"
         @click="router.go(-1)"
+        v-if="routeName == 'probationWorkAdd'"
       />
       <div v-if="routeName == 'probationWorkAdd'">
         เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
       </div>
       <div v-else>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
     </div>
-    <q-card bordered class="col-12 text-dark">
+    <q-card
+      :bordered="routeName == 'probationWorkAdd'"
+      class="col-12 text-dark"
+    >
       <div class="row col-12 q-pa-lg">
         <div class="row col-12 q-gutter-lg">
           <div class="col-12 row">
@@ -251,22 +255,21 @@
                             :disable="routeName != 'probationWorkAdd'"
                           />
                         </div>
-                        <div class="col-2 ">1. รัฐธรรมนูญ</div>
+                        <div class="col-2">1. รัฐธรรมนูญ</div>
                       </div>
 
                       <div class="row q-mt-xs bg-grey-3 q-py-xs">
                         <div class="col-1"></div>
                         <div class="col-2">2.กฎหมายปกครอง</div>
                       </div>
-                      <div class="row bg-grey-2 q-py-xs borderCheck ">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md ">2.1 ทำงานได้</div>
+                        <div class="col-10 q-pl-md">2.1 ทำงานได้</div>
                       </div>
                       <div
                         v-for="item in checkList21"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
-						
                       >
                         <div class="col-1 text-center">
                           <q-checkbox
@@ -278,11 +281,13 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md">2.2 ด้านการปฏิบัติราชการ</div>
+                        <div class="col-10 q-pl-md">
+                          2.2 ด้านการปฏิบัติราชการ
+                        </div>
                       </div>
-					  <div
+                      <div
                         v-for="item in checkList22"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
@@ -297,11 +302,13 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md">2.3 ด้านการบริหารทรัพยากรบุคคล</div>
+                        <div class="col-10 q-pl-md">
+                          2.3 ด้านการบริหารทรัพยากรบุคคล
+                        </div>
                       </div>
-					  <div
+                      <div
                         v-for="item in checkList23"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
@@ -316,11 +323,13 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row bg-grey-2 q-py-xs borderCheck">
+                      <div class="row bg-grey-2 q-py-xs borderCheck">
                         <div class="col-1"></div>
-                        <div class="col-10  q-pl-md">2.4 ด้านการบริหารงบประมาณและการคลัง</div>
+                        <div class="col-10 q-pl-md">
+                          2.4 ด้านการบริหารงบประมาณและการคลัง
+                        </div>
                       </div>
-					  <div
+                      <div
                         v-for="item in checkList24"
                         :key="item.id"
                         class="row q-py-xs borderCheck border_y"
@@ -335,7 +344,7 @@
 
                         <div class="col-9 q-pl-xl">{{ item.text }}</div>
                       </div>
-					  <div class="row q-mt-xs bg-grey-3 q-py-xs">
+                      <div class="row q-mt-xs bg-grey-3 q-py-xs">
                         <div class="col-1 text-center">
                           <q-checkbox
                             v-model="val3"
@@ -343,7 +352,9 @@
                             :disable="routeName != 'probationWorkAdd'"
                           />
                         </div>
-                        <div class="col-11">3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน</div>
+                        <div class="col-11">
+                          3. กฎหมายอื่นๆ ที่เกี่ยวข้องกับการปฏิบัติงาน
+                        </div>
                       </div>
                     </div>
                   </q-card>
@@ -641,9 +652,9 @@
                 icon="mdi-plus"
                 flat
                 class="q-ml-sm"
-				@click="addProductivity"
+                @click="addProductivity"
               />
-			  <q-btn
+              <q-btn
                 v-if="productivityCount > 1 && routeName == 'probationWorkAdd'"
                 round
                 color="red"
@@ -659,7 +670,12 @@
               </q-chip>
             </div>
             <div class="col-12 row q-gutter-md">
-              <q-card v-for="item in productivityCount" flat bordered class="col-12 q-pa-sm bg-grey-1">
+              <q-card
+                v-for="item in productivityCount"
+                flat
+                bordered
+                class="col-12 q-pa-sm bg-grey-1"
+              >
                 <div class="col-12 row q-col-gutter-sm">
                   <div class="col-xs-12 col-sm-6">
                     <q-input
@@ -669,7 +685,7 @@
                       dense
                       borderless
                       :outlined="routeName == 'probationWorkAdd'"
-                      v-model="Productivitys[item-1]"
+                      v-model="Productivitys[item - 1]"
                       label="ผลผลิตของงานที่คาดหวัง (ไม่เกิน 10 บรรทัด)"
                     />
                   </div>
@@ -681,7 +697,7 @@
                       dense
                       borderless
                       :outlined="routeName == 'probationWorkAdd'"
-                      v-model="goals1[item-1]"
+                      v-model="goals1[item - 1]"
                       label="ตัวชี้วัดความสําเร็จของงาน (ไม่เกิน 10 บรรทัด)"
                     />
                   </div>
@@ -1143,48 +1159,156 @@ const Productivitys = ref<string[]>(Array(productivityCount.value).fill(""));
 const goals1 = ref<string[]>(Array(productivityCount.value).fill(""));
 
 const addProductivity = () => {
-	productivityCount.value++;
+  productivityCount.value++;
 };
 const resetProductivity = () => {
-	productivityCount.value = 1;
+  productivityCount.value = 1;
   Productivitys.value = Array(productivityCount.value).fill("");
   goals1.value = Array(productivityCount.value).fill("");
 };
 const checkList21 = ref([
-  { id: 1, text: '2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร', checked: false },
-  { id: 2, text: '2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน', checked: false },
-  { id: 3, text: '2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่', checked: false },
-  { id: 4, text: '2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙', checked: false },
-  { id: 5, text: '2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒', checked: false },
-  { id: 6, text: '2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖', checked: false },
+  {
+    id: 1,
+    text: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
+    checked: false,
+  },
+  { id: 3, text: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่", checked: false },
+  {
+    id: 4,
+    text: "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์ พ.ศ. ๒๕๓๙",
+    checked: false,
+  },
+  {
+    id: 5,
+    text: "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดี พ.ศ. ๒๕๔๒",
+    checked: false,
+  },
+  {
+    id: 6,
+    text: "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
+    checked: false,
+  },
 ]);
 const checkList22 = ref([
-  { id: 1, text: '2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖', checked: false },
-  { id: 2, text: '2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง', checked: false },
-  { id: 3, text: '2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่', checked: false },
-  { id: 4, text: '2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ', checked: false },
-  { id: 5, text: '2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖', checked: false },
-  { id: 6, text: '2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔', checked: false },
+  {
+    id: 1,
+    text: "2.2.1 ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.2.2 กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
+    checked: false,
+  },
+  {
+    id: 3,
+    text: "2.2.3 กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
+    checked: false,
+  },
+  {
+    id: 4,
+    text: "2.2.4 กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
+    checked: false,
+  },
+  {
+    id: 5,
+    text: "2.2.5 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
+    checked: false,
+  },
+  {
+    id: 6,
+    text: "2.2.6 ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
+    checked: false,
+  },
 ]);
 const checkList23 = ref([
-  { id: 1, text: '2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง', checked: false },
-  { id: 2, text: '2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง', checked: false },
+  {
+    id: 1,
+    text: "2.3.1กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.3.2 กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
+    checked: false,
+  },
 ]);
 const checkList24 = ref([
-  { id: 1, text: '2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖', checked: false },
-  { id: 2, text: '2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘', checked: false },
-  { id: 3, text: '2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑', checked: false },
-  { id: 4, text: '2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒', checked: false },
-  { id: 5, text: '2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔', checked: false },
-  { id: 6, text: '2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ', checked: false },
-  { id: 7, text: '2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕', checked: false },
-  { id: 8, text: '2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖', checked: false },
-  { id: 9, text: '2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔', checked: false },
-  { id: 10, text: '2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔', checked: false },
-  { id: 11, text: '2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕', checked: false },
-  { id: 12, text: '2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗', checked: false },
-  { id: 13, text: '2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗', checked: false },
-  { id: 14, text: '2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘', checked: false },
+  {
+    id: 1,
+    text: "2.4.1 ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
+    checked: false,
+  },
+  {
+    id: 2,
+    text: "2.4.2 ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
+    checked: false,
+  },
+  {
+    id: 3,
+    text: "2.4.3 ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
+    checked: false,
+  },
+  {
+    id: 4,
+    text: "2.4.4 พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
+    checked: false,
+  },
+  {
+    id: 5,
+    text: "2.4.5 ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
+    checked: false,
+  },
+  {
+    id: 6,
+    text: "2.4.6 กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
+    checked: false,
+  },
+  {
+    id: 7,
+    text: "2.4.7 พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
+    checked: false,
+  },
+  {
+    id: 8,
+    text: "2.4.8 พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
+    checked: false,
+  },
+  {
+    id: 9,
+    text: "2.4.9 ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
+    checked: false,
+  },
+  {
+    id: 10,
+    text: "2.4.10 ระเบียบสำนักนายกรัฐมนตรีว่าด้วยการพัสดุ พ.ศ.๒๕๓๕ (ฉบับที่๒) พ.ศ.๒๕๓๘ (ฉบับที่๓) พ.ศ.๒๕๓๙ (ฉบับที่๔) พ.ศ.๒๕๔๑ (ฉบับที่๕) พ.ศ.๒๕๔๒ (ฉบับที่๖) พ.ศ.๒๕๔๔",
+    checked: false,
+  },
+  {
+    id: 11,
+    text: "2.4.11 ระเบียบกระทรวงการคลัง ว่าด้วยค่าใช้จ่ายในการฝึกอบรมของส่วนราชการ พ.ศ.๒๕๔๕",
+    checked: false,
+  },
+  {
+    id: 12,
+    text: "2.4.12 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกค่าใช้จ่ายเกี่ยวกับการรักษาพยาบาลข้าราชการผู้ได้รับอันตราย หรือการป่วยเจ็บเพราะเหตุปฏิบัติราชการ พ.ศ.๒๕๔๗",
+    checked: false,
+  },
+  {
+    id: 13,
+    text: "2.4.13 ระเบียบกระทรวงการคลัง ว่าด้วยการเบิกเงินสวัสดิการเกี่ยวกับการศึกษาบุตร พ.ศ.๒๕๔๗",
+    checked: false,
+  },
+  {
+    id: 14,
+    text: "2.4.14 ประกาศกระทรวงการคลัง เรื่อง หลักเกณฑ์การจัดหาพัสดุ โดยการประมูลด้วยระบบอิเล็กทรอนิกส์ (e-Auction) พ.ศ.๒๕๔๘",
+    checked: false,
+  },
 ]);
 const law = ref([]);
 const listlaw = [
@@ -1237,12 +1361,12 @@ const date3 = ref<Date>(new Date());
 const date4 = ref<Date>(new Date());
 </script>
 <style lang="scss" scoped>
-.border_y{
-	border-left:1px solid #d8d8d8 ;
-	border-right:1px solid #d8d8d8 ;
+.border_y {
+  border-left: 1px solid #d8d8d8;
+  border-right: 1px solid #d8d8d8;
 }
-.borderCheck{
-	border-bottom: 1px solid #d8d8d8;
+.borderCheck {
+  border-bottom: 1px solid #d8d8d8;
 }
 .text-top2 {
   font-weight: 500;
diff --git a/src/modules/05_placement/components/probation/FormEvaluation.vue b/src/modules/05_placement/components/probation/FormEvaluation.vue
index 1ac78ef04..ee62da9da 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation.vue
@@ -1,7 +1,7 @@
 <!-- card ข้อมูลส่วนตัว -->
 <template>
-	<div class="q-pb-md">
-		<!-- <div class="toptitle text-dark col-12 row items-center">
+  <div class="q-pb-md">
+    <!-- <div class="toptitle text-dark col-12 row items-center">
 			<q-btn
 				icon="mdi-arrow-left"
 				unelevated
@@ -14,752 +14,118 @@
 			/>
 			ฟอร์มแบบประเมินสำหรับผู้ดูแล
 		</div> -->
-		<div class="col-12 text-dark">
-			<div class="row col-12 q-pa-lg">
-				<div class="row col-12 q-gutter-lg">
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center ">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-							<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-							ถึงวันที
-							<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
-						</div>
-						<div class="col-12 text-top0 row items-center">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
-							<span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
-							ระหว่างวันที่
-							<span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-							ถึงวันที่
-							<span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
-						</div>
-						<div class="col-12 q-pt-md">
-							<q-separator size="3px" color="grey-2" />
-						</div>
-					</div>
+    <div class="col-12 text-dark">
+      <div class="row col-12 q-gutter-lg q-pa-lg">
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+            <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+            ถึงวันที
+            <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+          </div>
+          <div class="col-12 text-top0 row items-center">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            การทดลองปฏิบัติหน้าที่ราชการมีผล ดังนี้
+            <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+            ระหว่างวันที่
+            <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+            ถึงวันที่
+            <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+          </div>
+          <div class="col-12 q-pt-md">
+            <q-separator size="3px" color="grey-2" />
+          </div>
+        </div>
+        <!--------------------- 1 --------------------->
+        <FormEva1 />
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
 
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-							ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-						</div>
-						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
-							1.ผลผลิตของงานที่คาดหวัง
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list, i) in list1_1" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
-						</div>
-						<div class="col-xs-12 col-sm-11 col-md-10  offset-md-1 text-top2">
-							1.ผลผลิตของงานที่เกิดขึ้น
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list, i) in list1_2" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<!-- <q-item-label>{{ list.label }}</q-item-label> -->
-										<q-input outlined dense v-model="text2_1"
-											class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules type="textarea"
-											label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1"/>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model1" :val="list.id" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.2 ความรู้ความสามารถ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ความรู้ความสามารถ</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model1_2" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.3 ทักษะ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ทักษะ</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model1_3" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.4 สมรรถนะ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>สมรรถนะ</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model1_4" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.5 ความสามารถในการเรียนรู้งาน
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model1_5" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model1_6" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							1.7 อื่นๆ
-							<q-checkbox class="q-ml-sm" dense v-model="etc" />
-						</div>
-						<q-card v-if="etc" flat bordered
-							class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>
-											<q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow
-												hide-bottom-space outlined class="bg-white"
-												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
-										</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="modelEtc" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							จุดเด่น (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input outlined dense v-model="text2_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
-					</div>
+        <!--------------------- 2 --------------------->
+        <FormEva2 />
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
 
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</div>
+        <!--------------------- 3 --------------------->
+        <FormEva3 />
+        <div class="col-12">
+          <q-separator size="3px" color="grey-2" />
+        </div>
+        <!--------------------- ผู้บังคับบัญชาผู้มอบหมายงาน --------------------->
+        <FormEvaOrder />
+      </div>
 
-					<!-- 2 -->
-					<div class="col-12 row">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-							พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-						</div>
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.1 ความประพฤติ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list, i) in list2_1" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.2 ความมีคุณธรรมจริยธรรม
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list, i) in list2_2" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.3 การรักษาวินัย
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense v-for="(list, i) in list2_3" :key="i">
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>{{ list.label }}</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							2.4 อื่นๆ
-							<q-checkbox class="q-ml-sm" dense v-model="etc_4" />
-						</div>
-						<q-card v-if="etc_4" flat bordered
-							class="col-xs-12 col-sm-11 col-md-10  offset-md-1 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>
-											<q-input v-model="etc_text2" label="กรอกอื่นๆ" dense lazy-rules autogrow
-												hide-bottom-space outlined class="bg-white"
-												:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
-										</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<q-rating v-model="modelEtc" max="5" size="sm" color="grey"
-											:color-selected="ratingColors" label="ระดับการประเมินพฤติกรรม">
-											<template v-slot:tip-1>
-												<q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-2>
-												<q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-3>
-												<q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-											</template>
-											<template v-slot:tip-4>
-												<q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-											</template>
-											<template v-slot:tip-5>
-												<q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-											</template>
-										</q-rating>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							จุดเด่น (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input outlined dense v-model="text3_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
-					</div>
-					<div class="col-12 row">
-						<div class="col-12 text-top0 row items-center q-pl-lg">
-							<q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-							สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
-						</div>
-						<q-input outlined dense v-model="text3_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-							lazy-rules type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
-							:rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
-					</div>
-
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</div>
-
-					<!-- 3 -->
-					<div class="col-12 row justify-center">
-						<div class="col-12 text-top0 items-center">
-							<q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-							การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-						</div>
-						<q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
-							<q-list dense>
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>1. การปฐมนิเทศ</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<div class="row">
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_1" val="1" label="ดำเนินการเเล้ว" />
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_1" val="0" label=" ยังไม่ได้ดำเนินการ" />
-										</div>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" />
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<div class="row">
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_2" val="1" label="ดำเนินการเเล้ว" />
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_2" val="0" label=" ยังไม่ได้ดำเนินการ" />
-										</div>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" />
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<div class="row">
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_3" val="1" label="ดำเนินการเเล้ว" />
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_3" val="0" label=" ยังไม่ได้ดำเนินการ" />
-										</div>
-									</q-item-section>
-								</q-item>
-								<q-separator class="q-my-xs" />
-								<q-item dense tag="label" v-ripple>
-									<q-item-section>
-										<q-item-label>4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label>
-									</q-item-section>
-									<q-item-section side>
-										<div class="row">
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_4" val="1" label="ดำเนินการเเล้ว" />
-											<q-radio checked-icon="task_alt" unchecked-icon="panorama_fish_eye"
-												v-model="radio_4" val="0" label=" ยังไม่ได้ดำเนินการ" />
-										</div>
-									</q-item-section>
-								</q-item>
-							</q-list>
-						</q-card>
-					</div>
-
-					<div class="col-12">
-						<q-separator size="3px" color="grey-2" />
-					</div>
-
-					<div class="col-12 row">
-						<div class="col-12 text-top2 row items-center">
-							ผู้บังคับบัญชาผู้มอบหมายงาน
-						</div>
-						<div class="col-12 row q-col-gutter-md">
-							<q-select class="col-xs-12 col-sm-8" dense v-model="Autherise" outlined :options="option"
-								label="ผู้บังคับบัญชา" />
-							<div class="col-xs-12 col-sm-4">
-								<datepicker menu-class-name="modalfix" v-model="dateAutherise" :locale="'th'" autoApply
-									borderless :enableTimePicker="false" week-start="0">
-									<template #year="{ year }">
-										{{ year + 543 }}
-									</template>
-									<template #year-overlay-value="{ value }">
-										{{ parseInt(value + 543) }}
-									</template>
-									<template #trigger>
-										<q-input outlined dense class="full-width datepicker col-3" :model-value="dateAutherise != null ? date2Thai(dateAutherise) : null
-											" :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
-											<template v-slot:prepend>
-												<q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
-												</q-icon>
-											</template>
-										</q-input>
-									</template>
-								</datepicker>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<q-separator />
-			<div class="flex justify-end q-px-sm q-pt-sm">
-				<q-btn dense class="q-px-md" unelevated label="บันทึก" color="public" />
-			</div>
-		</div>
-	</div>
+      <q-separator />
+      <div class="flex justify-end q-px-sm q-pt-sm">
+        <q-footer class="bg-white q-px-lg q-py-sm flex justify-end">
+          <q-btn
+            dense
+            class="q-px-md"
+            unelevated
+            label="บันทึก"
+            color="public"
+          />
+        </q-footer>
+      </div>
+    </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, defineAsyncComponent } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
 import router from "@/router";
 
+const FormEva1 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/form/formEva1.vue")
+);
+const FormEva2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/form/formEva2.vue")
+);
+const FormEva3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/form/formEva3.vue")
+);
+const FormEvaOrder = defineAsyncComponent(
+  () =>
+    import("@/modules/05_placement/components/probation/form/formEvaOrder.vue")
+);
+
 const $q = useQuasar();
-const ratingColors = ['light-blue-3', 'light-blue-6', 'blue', 'blue-9', 'blue-10'];
-const list1_1 = [
-	{ id: '1', label: 'ผลผลิตของงานที่คาดหวัง 1' },
-	{ id: '2', label: 'ผลผลิตของงานที่คาดหวัง 2' },
-	{ id: '3', label: 'ผลผลิตของงานที่คาดหวัง 3' },
-	{ id: '4', label: 'ผลผลิตของงานที่คาดหวัง 4' },
-	{ id: '5', label: 'ผลผลิตของงานที่คาดหวัง 5' }
-];
-const list1_2 = [
-	{ id: '1', label: 'ผลผลิตของงานที่เกิดขึ้น 1' },
-	{ id: '2', label: 'ผลผลิตของงานที่เกิดขึ้น 2' },
-	{ id: '3', label: 'ผลผลิตของงานที่เกิดขึ้น 3' },
-	{ id: '4', label: 'ผลผลิตของงานที่เกิดขึ้น 4' },
-	{ id: '5', label: 'ผลผลิตของงานที่เกิดขึ้น 5' }
-];
 
-const list2_1 = [
-	{ id: '1', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี' },
-	{ id: '2', label: 'มีความรับผิดชอบในการปฏิบัติบัติงาน' },
-	{ id: '3', label: 'ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน' },
-	{ id: '4', label: 'ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร' },
-];
-const list2_2 = [
-	{ id: '1', label: 'อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ' },
-	{ id: '2', label: 'มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต' },
-	{ id: '3', label: 'ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ' },
-];
-
-const list2_3 = [
-	{ id: '1', label: 'มีความรับรัผิดชอบในการรักษาเวลาทำงาน' },
-	{ id: '2', label: 'แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ' },
-	{ id: '3', label: 'ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน' },
-	{ id: '4', label: 'ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ' },
-	{ id: '5', label: 'ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ' }
-];
-
-const etc_text = ref<any>(null);
-const etc_text2 = ref<any>(null);
-
-const text3_1 = ref<any>(null);
-const text3_2 = ref<any>(null);
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
 
-const Autherise = ref<any>(null);
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const dateAutherise = ref<any>(new Date());
-const etc = ref<any>(false);
-const etc_4 = ref<any>(false);
-const radio_1 = ref<any>(null);
-const radio_2 = ref<any>(null);
-const radio_3 = ref<any>(null);
-const radio_4 = ref<any>(null);
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
-const text2_1 = ref<string>('');
-const text2_2 = ref<string>('');
-
 const onSubmit = () => {
-	$q.notify({
-		color: "green-4",
-		textColor: "white",
-		icon: "cloud_done",
-		message: "ส่งแบบประเมินเเล้ว",
-	});
+  $q.notify({
+    color: "green-4",
+    textColor: "white",
+    icon: "cloud_done",
+    message: "ส่งแบบประเมินเเล้ว",
+  });
 };
 
 const onReset = () => {
-	router.push({ name: "probation" });
+  router.push({ name: "probation" });
 };
 </script>
 
 <style lang="scss" scoped>
 .text-top2 {
-	font-weight: 500;
-	padding-bottom: 8px;
-	color: rgb(70, 68, 68);
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
 }
 
 .text-top0 {
-	font-weight: 600;
-	padding-bottom: 8px;
-	color: rgb(70, 68, 68);
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
 }
-
-.text-Hd {
-	font-weight: 600;
-	font-size: 1rem;
-	padding-bottom: 5px;
-	color: #02A998;
-}
-
-.q-rating__icon {
-	text-shadow: transparent !important;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 551575019..f1a22fc3e 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -1,171 +1,170 @@
 <template>
-	<!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
-	<q-card flat bordered class="col-12">
-		<q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders page-relative" style="height: 82vh">
-			<q-header class="bg-grey-1">
-				<q-toolbar>
-					<div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
-						<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-							@click="router.go(-1)" />
-						บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
-					</div>
-				</q-toolbar>
-				<q-separator />
-			</q-header>
-			<q-drawer v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
-				<q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
-					<q-list class="text-grey-7">
-						<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
-							v-ripple>
-							<q-item-section avatar style="min-width: 40px">
-								<q-icon size="18px" name="mdi-file" />
-							</q-item-section>
+  <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
+  <q-card flat bordered class="col-12">
+    <q-layout
+      view="hHh Lpr lff"
+      container
+      class="shadow-2 rounded-borders page-relative"
+      style="height: 82vh"
+    >
+      <q-header class="bg-grey-1">
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
+          </div>
+        </q-toolbar>
+        <q-separator />
+      </q-header>
+      <q-drawer
+        v-model="drawer"
+        show-if-above
+        :width="150"
+        :breakpoint="500"
+        class="bg-grey-1"
+        bordered
+      >
+        <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
+          <q-list class="text-grey-7">
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab1'"
+              @click="activeTab = 'tab1'"
+            >
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file" />
+              </q-item-section>
 
-							<q-item-section>
-								แบบมอบหมายงาน
-							</q-item-section>
-						</q-item>
+              <q-item-section> แบบมอบหมายงาน </q-item-section>
+            </q-item>
 
-						<q-item dense active class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium"
-							clickable v-ripple>
-							<q-item-section avatar style="min-width: 40px">
-								<q-icon size="18px" name="mdi-file-edit" />
-							</q-item-section>
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab2'"
+              @click="activeTab = 'tab2'"
+            >
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-edit" />
+              </q-item-section>
 
-							<q-item-section>
-								บันทึกผลการทดลองปฏิบัติหน้าที่ราชการ (2)
-							</q-item-section>
-						</q-item>
+              <q-item-section>
+                บันทึกผลการทดลองปฏิบัติหน้าที่ราชการ (2)
+              </q-item-section>
+            </q-item>
 
-						<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
-							v-ripple>
-							<q-item-section avatar style="min-width: 40px">
-								<q-icon size="18px" name="mdi-file-star" />
-							</q-item-section>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab3'"
+              @click="activeTab = 'tab3'"
+            >
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-star" />
+              </q-item-section>
 
-							<q-item-section>
-								ประเมินผลการทดลองปฏิบัติหน้าที่ราชการ (1)
-							</q-item-section>
-						</q-item>
+              <q-item-section>
+                ประเมินผลการทดลองปฏิบัติหน้าที่ราชการ (1)
+              </q-item-section>
+            </q-item>
 
-						<q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense
-							v-ripple>
-							<q-item-section avatar style="min-width: 40px">
-								<q-icon size="18px" name="mdi-file-chart" />
-							</q-item-section>
+            <q-item
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              class="q-py-sm"
+              dense
+              v-ripple
+              :active="activeTab == 'tab4'"
+              @click="activeTab = 'tab4'"
+            >
+              <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-chart" />
+              </q-item-section>
 
-							<q-item-section>
-								รายงานการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
-							</q-item-section>
-						</q-item>
-					</q-list>
-				</q-scroll-area>
-			</q-drawer>
-			<q-page-container>
-				<q-layout view="hHh Lpr lff" container style="height: 72vh">
-					<q-header class="bg-grey-1">
-						<div class="bg-grey-1">
-							<div class="col-12 row q-gutter-x-md items-center">
-								<q-tabs dense v-model="tab" active-class="text-primary text-weight-medium"
-									indicator-color="grey-1" class="text-grey-7">
-									<q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
-									<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save1'"
-										:color="tab !== 'save1' ? 'grey' : 'add'">
-										<q-tooltip>ดาวน์โหลด</q-tooltip>
-										<q-menu>
-											<q-list style="min-width: 150px">
-												<q-item clickable v-close-popup>
-													<q-item-section avatar><q-icon color="red"
-															name="mdi-file-pdf" /></q-item-section>
-													<q-item-section>ไฟล์ .PDF</q-item-section>
-												</q-item>
-												<q-item clickable v-close-popup>
-													<q-item-section avatar><q-icon color="blue"
-															name="mdi-file-word" /></q-item-section>
-													<q-item-section>ไฟล์ .docx</q-item-section>
-												</q-item>
-											</q-list>
-										</q-menu>
-									</q-btn>
+              <q-item-section>
+                รายงานการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-scroll-area>
+      </q-drawer>
+      <q-page-container>
+        <q-layout view="hHh Lpr lFf" container style="height: 72vh">
+          <q-tab-panels
+            v-model="activeTab"
+            animated
+            class="shadow-2 rounded-borders"
+            vertical
+          >
+            <q-tab-panel name="tab1">
+              <ProbationFormAssign />
+            </q-tab-panel>
 
-									<q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
-									<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save2'"
-										:color="tab !== 'save2' ? 'grey' : 'add'">
-										<q-tooltip>ดาวน์โหลด</q-tooltip>
-										<q-menu>
-											<q-list style="min-width: 150px">
-												<q-item clickable v-close-popup>
-													<q-item-section avatar><q-icon color="red"
-															name="mdi-file-pdf" /></q-item-section>
-													<q-item-section>ไฟล์ .PDF</q-item-section>
-												</q-item>
-												<q-item clickable v-close-popup>
-													<q-item-section avatar><q-icon color="blue"
-															name="mdi-file-word" /></q-item-section>
-													<q-item-section>ไฟล์ .docx</q-item-section>
-												</q-item>
-											</q-list>
-										</q-menu>
-									</q-btn>
-									<!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
-									<q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
-										:color="tab !== 'save3' ? 'grey' : 'add'">
-										<q-tooltip>ดาวน์โหลด</q-tooltip>
-										<q-menu>
-											<q-list style="min-width: 150px">
-												<q-item clickable v-close-popup>
-													<q-item-section avatar><q-icon color="red"
-															name="mdi-file-pdf" /></q-item-section>
-													<q-item-section>ไฟล์ .PDF</q-item-section>
-												</q-item>
-												<q-item clickable v-close-popup>
-													<q-item-section avatar><q-icon color="blue"
-															name="mdi-file-word" /></q-item-section>
-													<q-item-section>ไฟล์ .docx</q-item-section>
-												</q-item>
-											</q-list>
-										</q-menu>
-									</q-btn> -->
-								</q-tabs>
-								<div>
-									<q-btn color="blue" flat dense icon="mdi-plus">
-										<q-tooltip>
-											เพิ่มบันทึกผลการทดลอง
-										</q-tooltip>
-									</q-btn>
-								</div>
-							</div>
-							<q-separator />
-						</div>
-					</q-header>
-					<q-page-container>
-						<div class="col-12 row">
-							<Form />
-						</div>
-					</q-page-container>
-				</q-layout>
-			</q-page-container>
-		</q-layout>
-	</q-card>
+            <q-tab-panel name="tab2"> <Tabs2 /></q-tab-panel>
+
+            <q-tab-panel name="tab3">
+              <Tabs3 />
+            </q-tab-panel>
+            <q-tab-panel name="tab4">
+              <Tabs4 />
+            </q-tab-panel>
+          </q-tab-panels>
+        </q-layout>
+      </q-page-container>
+    </q-layout>
+  </q-card>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref } from "vue";
-import Form from "@/modules/05_placement/components/probation/FormEvaluation.vue";
+import { ref, defineAsyncComponent } from "vue";
+
+const ProbationFormAssign = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormAssign.vue")
+);
+const Tabs2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
+);
+const Tabs3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
+);
+const Tabs4 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
+);
 
 const router = useRouter();
 const drawer = ref<boolean>(true);
-const tab = ref('save1');
+const activeTab = ref<string>("tab1");
 </script>
 <style lang="scss" scope>
 .btn-absolute {
-	z-index: 50;
-	position: absolute;
-	left: 200px;
-	top: 10px;
+  z-index: 50;
+  position: absolute;
+  left: 200px;
+  top: 10px;
 }
 
 .btnShadow {
-	box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%), 3px 3px 7px 1px rgba(95, 95, 95, 0.15) !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 7faf54272..cb43dad2d 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -1,274 +1,302 @@
 <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 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>
-    <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>
+    <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="router.push(`/probation/add`)" 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>
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="router.push(`/probation/add`)"
+            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-th auto-width />
-										</q-tr>
-									</template>
-									<template v-slot:body="props">
-										<q-tr :props="props" class="cursor-pointer" @click="router.push(`/probation/form`)">
-											<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-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-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr
+              :props="props"
+              class="cursor-pointer"
+              @click="clickSelect(props.row.no)"
+            >
+              <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 flat dense size="12px" round color="blue" icon="mdi-file-download-outline">
 									<q-tooltip> ดาวน์โหลด .Docx</q-tooltip>
 								</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>
-					</div>   
-			  </q-card>    
+            </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 { useRouter, useRoute } 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 route = useRoute();
 
-const name = ref<string>('นายสมคิด ยอดใจ')
-const position = ref<string>('นักจัดการงานทั่วไป')
-const level = ref<string>('ชำนาญการพิเศษ')
-const institution = ref<string>('ฝ่ายบริหารงานทั่วไป')
-const status = ref<string>('อยู่ระหว่างการทดลองงาน')
+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,
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
 
 const visibleColumns = ref<string[]>([
-	"no",
-	"startDate",
-	"endDete",
-	"intendant",
-	"commander",
+  "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",
-	}
+  {
+    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: "25 ต.ค. 2566",
-		endDete: "24 ม.ค. 2567",
-		intendant: "นางสาวทวิดา กมลเวชชี",
-		commander: "นางพิศ โพธิ์ดำ"
-	},
-	// {
-	// 	no: "3",
-	// 	startDate: "09 ก.ย. 2566",
-	// 	endDete: "20 ต.ค. 2566",
-	// intendant: "นางสาวทวิดา กมลเวชชี",
-	// commander: "นายนภัทร  วันดี"
-	// },
+  {
+    no: "1",
+    startDate: "09 ก.ย. 2566",
+    endDete: "20 ต.ค. 2566",
+    intendant: "นางสาวรัชภรณ์ ภักดี",
+    commander: "นายนภัทร  วันดี",
+  },
+  {
+    no: "2",
+    startDate: "25 ต.ค. 2566",
+    endDete: "24 ม.ค. 2567",
+    intendant: "นางสาวทวิดา กมลเวชชี",
+    commander: "นางพิศ โพธิ์ดำ",
+  },
+  // {
+  // 	no: "3",
+  // 	startDate: "09 ก.ย. 2566",
+  // 	endDete: "20 ต.ค. 2566",
+  // intendant: "นางสาวทวิดา กมลเวชชี",
+  // commander: "นายนภัทร  วันดี"
+  // },
 ]);
 
-const clickAdd = () => {
+const clickAdd = () => {};
+
+const clickSelect = (id: string) => {
+  //   console.log(route.fullPath);
+  router.push(`${route.fullPath}/${id}`);
 };
 
 // ค้นหาในตาราง
@@ -290,16 +318,15 @@ const paginationLabel = (start: string, end: string, total: string) => {
 <style lang="scss" scope>
 .q-img {
   border-radius: 5px;
-	height: 70px;
+  height: 70px;
 }
-.text-top{
-	color: gray;
-	font-weight: 400;
-	padding-bottom: 3px;
+.text-top {
+  color: gray;
+  font-weight: 400;
+  padding-bottom: 3px;
 }
-.text-detail{
-	font-weight: 500;
-
+.text-detail {
+  font-weight: 500;
 }
 .custom-header-table {
   max-height: 64vh;
@@ -331,4 +358,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/form/formEva1.vue b/src/modules/05_placement/components/probation/form/formEva1.vue
new file mode 100644
index 000000000..c5f777842
--- /dev/null
+++ b/src/modules/05_placement/components/probation/form/formEva1.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่คาดหวัง
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list1_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        1.ผลผลิตของงานที่เกิดขึ้น
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list1_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+              <q-input
+                outlined
+                dense
+                v-model="text2_1"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                hide-bottom-space
+                :row="1"
+              />
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.2 ความรู้ความสามารถ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>ความรู้ความสามารถ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_2"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.3 ทักษะ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>ทักษะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_3"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.4 สมรรถนะ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>สมรรถนะ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_4"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.5 ความสามารถในการเรียนรู้งาน
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>ความสามารถในการเรียนรู้งาน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_5"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.6 ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label
+                >ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1_6"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.7 อื่นๆ
+        <q-checkbox class="q-ml-sm" dense v-model="etc" />
+      </div>
+      <q-card
+        v-if="etc"
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-input
+                  v-model="etc_text"
+                  label="กรอกอื่นๆ"
+                  dense
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]"
+                />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="modelEtc"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <FormComment />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const FormComment = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
+    )
+);
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list1_1 = [
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+];
+const list1_2 = [
+  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
+  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
+  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
+  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
+  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+];
+
+const etc_text = ref<any>(null);
+const text2_1 = ref<string>("");
+
+const model = ref<any>(0);
+const model1 = ref<any>(0);
+const model1_2 = ref<any>(0);
+const model1_3 = ref<any>(0);
+const model1_4 = ref<any>(0);
+const model1_5 = ref<any>(0);
+const model1_6 = ref<any>(0);
+const modelEtc = ref<any>(0);
+const etc = ref<any>(false);
+</script>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/form/formEva2.vue b/src/modules/05_placement/components/probation/form/formEva2.vue
new file mode 100644
index 000000000..0b4771475
--- /dev/null
+++ b/src/modules/05_placement/components/probation/form/formEva2.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.1 ความประพฤติ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_1" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.2 ความมีคุณธรรมจริยธรรม
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.3 การรักษาวินัย
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense v-for="(list, i) in list2_3" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>{{ list.label }}</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        2.4 อื่นๆ
+        <q-checkbox class="q-ml-sm" dense v-model="etc_4" />
+      </div>
+      <q-card
+        v-if="etc_4"
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-input
+                  v-model="etc_text2"
+                  label="กรอกอื่นๆ"
+                  dense
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]"
+                />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="modelEtc"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <FormComment />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+const FormComment = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
+    )
+);
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+
+const etc_text2 = ref<any>(null);
+const modelEtc = ref<any>(0);
+const etc_4 = ref<any>(false);
+const model = ref<any>(0);
+</script>
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/form/formEva3.vue b/src/modules/05_placement/components/probation/form/formEva3.vue
new file mode 100644
index 000000000..e368f2dc6
--- /dev/null
+++ b/src/modules/05_placement/components/probation/form/formEva3.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row justify-center">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+        การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+      >
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>1. การปฐมนิเทศ</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+          <q-separator class="q-my-xs" />
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label
+                >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <div class="row">
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const radio_1 = ref<any>(null);
+const radio_2 = ref<any>(null);
+const radio_3 = ref<any>(null);
+const radio_4 = ref<any>(null);
+</script>
+
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/form/formEvaOrder.vue b/src/modules/05_placement/components/probation/form/formEvaOrder.vue
new file mode 100644
index 000000000..2a0c7f662
--- /dev/null
+++ b/src/modules/05_placement/components/probation/form/formEvaOrder.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top2 row items-center">
+        ผู้บังคับบัญชาผู้มอบหมายงาน
+      </div>
+      <div class="col-12 row q-col-gutter-md">
+        <q-select
+          class="col-xs-12 col-sm-8"
+          dense
+          v-model="Autherise"
+          outlined
+          :options="option"
+          label="ผู้บังคับบัญชา"
+        />
+        <div class="col-xs-12 col-sm-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAutherise"
+            :locale="'th'"
+            autoApply
+            borderless
+            :enableTimePicker="false"
+            week-start="0"
+          >
+            <template #year="{ year }">
+              {{ year + 543 }}
+            </template>
+            <template #year-overlay-value="{ value }">
+              {{ parseInt(value + 543) }}
+            </template>
+            <template #trigger>
+              <q-input
+                outlined
+                dense
+                class="full-width datepicker col-3"
+                :model-value="
+                  dateAutherise != null ? date2Thai(dateAutherise) : null
+                "
+                :label="`${'ลงวันที่'}`"
+                :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+              >
+                <template v-slot:prepend>
+                  <q-icon
+                    name="event"
+                    class="cursor-pointer"
+                    style="color: var(--q-primary)"
+                  >
+                  </q-icon>
+                </template>
+              </q-input>
+            </template>
+          </datepicker>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const Autherise = ref<any>(null);
+
+const dateAutherise = ref<any>(new Date());
+
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+</script>
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/form/formEvacomment.vue b/src/modules/05_placement/components/probation/form/formEvacomment.vue
new file mode 100644
index 000000000..5dc58496c
--- /dev/null
+++ b/src/modules/05_placement/components/probation/form/formEvacomment.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        จุดเด่น (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_1"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        label="กรอกจุดเด่น"
+        hide-bottom-space
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_2"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        hide-bottom-space
+        label="กรอกสิ่งที่ควรปรับปรุง"
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const text2_1 = ref<string>("");
+const text2_2 = ref<string>("");
+</script>
diff --git a/src/modules/05_placement/components/probation/tabs/tabs2.vue b/src/modules/05_placement/components/probation/tabs/tabs2.vue
new file mode 100644
index 000000000..60ed911ee
--- /dev/null
+++ b/src/modules/05_placement/components/probation/tabs/tabs2.vue
@@ -0,0 +1,116 @@
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tab"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save1'"
+            :color="tab !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+
+          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save2'"
+            :color="tab !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+                        <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                            :color="tab !== 'save3' ? 'grey' : 'add'">
+                            <q-tooltip>ดาวน์โหลด</q-tooltip>
+                            <q-menu>
+                                <q-list style="min-width: 150px">
+                                    <q-item clickable v-close-popup>
+                                        <q-item-section avatar><q-icon color="red"
+                                                name="mdi-file-pdf" /></q-item-section>
+                                        <q-item-section>ไฟล์ .PDF</q-item-section>
+                                    </q-item>
+                                    <q-item clickable v-close-popup>
+                                        <q-item-section avatar><q-icon color="blue"
+                                                name="mdi-file-word" /></q-item-section>
+                                        <q-item-section>ไฟล์ .docx</q-item-section>
+                                    </q-item>
+                                </q-list>
+                            </q-menu>
+                        </q-btn> -->
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <Form />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <Form />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Form = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
+);
+const tab = ref<string>("save1");
+</script>
diff --git a/src/modules/05_placement/components/probation/tabs/tabs3.vue b/src/modules/05_placement/components/probation/tabs/tabs3.vue
new file mode 100644
index 000000000..62cebf32c
--- /dev/null
+++ b/src/modules/05_placement/components/probation/tabs/tabs3.vue
@@ -0,0 +1,116 @@
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tab"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save1'"
+            :color="tab !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+
+          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save2'"
+            :color="tab !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                              :color="tab !== 'save3' ? 'grey' : 'add'">
+                              <q-tooltip>ดาวน์โหลด</q-tooltip>
+                              <q-menu>
+                                  <q-list style="min-width: 150px">
+                                      <q-item clickable v-close-popup>
+                                          <q-item-section avatar><q-icon color="red"
+                                                  name="mdi-file-pdf" /></q-item-section>
+                                          <q-item-section>ไฟล์ .PDF</q-item-section>
+                                      </q-item>
+                                      <q-item clickable v-close-popup>
+                                          <q-item-section avatar><q-icon color="blue"
+                                                  name="mdi-file-word" /></q-item-section>
+                                          <q-item-section>ไฟล์ .docx</q-item-section>
+                                      </q-item>
+                                  </q-list>
+                              </q-menu>
+                          </q-btn> -->
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <Form />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <Form />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Form = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
+);
+const tab = ref<string>("save1");
+</script>
diff --git a/src/modules/05_placement/components/probation/tabs/tabs4.vue b/src/modules/05_placement/components/probation/tabs/tabs4.vue
new file mode 100644
index 000000000..62cebf32c
--- /dev/null
+++ b/src/modules/05_placement/components/probation/tabs/tabs4.vue
@@ -0,0 +1,116 @@
+<template>
+  <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tab"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save1'"
+            :color="tab !== 'save1' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+
+          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tab !== 'save2'"
+            :color="tab !== 'save2' ? 'grey' : 'add'"
+          >
+            <q-tooltip>ดาวน์โหลด</q-tooltip>
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="red" name="mdi-file-pdf"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar
+                    ><q-icon color="blue" name="mdi-file-word"
+                  /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+                          <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
+                              :color="tab !== 'save3' ? 'grey' : 'add'">
+                              <q-tooltip>ดาวน์โหลด</q-tooltip>
+                              <q-menu>
+                                  <q-list style="min-width: 150px">
+                                      <q-item clickable v-close-popup>
+                                          <q-item-section avatar><q-icon color="red"
+                                                  name="mdi-file-pdf" /></q-item-section>
+                                          <q-item-section>ไฟล์ .PDF</q-item-section>
+                                      </q-item>
+                                      <q-item clickable v-close-popup>
+                                          <q-item-section avatar><q-icon color="blue"
+                                                  name="mdi-file-word" /></q-item-section>
+                                          <q-item-section>ไฟล์ .docx</q-item-section>
+                                      </q-item>
+                                  </q-list>
+                              </q-menu>
+                          </q-btn> -->
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <Form />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <Form />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+const Form = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation.vue")
+);
+const tab = ref<string>("save1");
+</script>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 8b1d5a8d3..90d23090b 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -21,7 +21,7 @@ const detailOrderReplace = () =>
     "@/modules/05_placement/components/OrderPlacement/detailOrderPlacement.vue"
   );
 
-  // ระบบทดลองงาน
+// ระบบทดลองงาน
 const mainProbation = () =>
   import("@/modules/05_placement/components/probation/MainProbation.vue");
 
@@ -33,179 +33,178 @@ const probationFormEvaluation = () =>
 
 const probationWorkAdd = () =>
   import("@/modules/05_placement/components/probation/MainDetail.vue");
-  const probationFormAssign = () =>
-    import("@/modules/05_placement/components/probation/FormAssign.vue");
-  const transfer = () =>
-    import("@/modules/05_placement/components/Transfer/transferMain.vue");
-  const transferbyId = () =>
-    import("@/modules/05_placement/components/Transfer/transferRegistry.vue");
+const probationFormAssign = () =>
+  import("@/modules/05_placement/components/probation/FormAssign.vue");
+const transfer = () =>
+  import("@/modules/05_placement/components/Transfer/transferMain.vue");
+const transferbyId = () =>
+  import("@/modules/05_placement/components/Transfer/transferRegistry.vue");
 
-
-  // คำสั่งช่วยราชการ/ส่งตัวกลับ
-  const RepatriationOrder = () =>
+// คำสั่งช่วยราชการ/ส่งตัวกลับ
+const RepatriationOrder = () =>
   import("@/modules/05_placement/components/RepatriationOrder/List.vue");
-  const RepatriationOrderAdd = () =>
+const RepatriationOrderAdd = () =>
   import("@/modules/05_placement/components/RepatriationOrder/AddOrder.vue");
 
-  export default [
-    {
-      path: "/placement",
-      name: "placement",
-      component: PlacementMain,
-      meta: {
-        Auth: true,
-        Key: [6.1],
-        Role: "placement",
-      },
+export default [
+  {
+    path: "/placement",
+    name: "placement",
+    component: PlacementMain,
+    meta: {
+      Auth: true,
+      Key: [6.1],
+      Role: "placement",
     },
-    {
-      path: "/placement/personal-list/:examId",
-      name: "placementDetail",
-      component: PlacementDetail,
-      meta: {
-        Auth: true,
-        Key: [6.1],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/personal-list/:examId",
+    name: "placementDetail",
+    component: PlacementDetail,
+    meta: {
+      Auth: true,
+      Key: [6.1],
+      Role: "placement",
     },
-    {
-      path: "/placement/personal-detail/:personalId",
-      name: "PlacementPersonalDetail",
-      component: PlacementPersonalDetail,
-      meta: {
-        Auth: true,
-        Key: [6.1],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/personal-detail/:personalId",
+    name: "PlacementPersonalDetail",
+    component: PlacementPersonalDetail,
+    meta: {
+      Auth: true,
+      Key: [6.1],
+      Role: "placement",
     },
-    {
-      path: "/placement/order",
-      name: "Orderplacement",
-      component: MainOrderPlacement,
-      meta: {
-        Auth: true,
-        Key: [6.2],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/order",
+    name: "Orderplacement",
+    component: MainOrderPlacement,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
     },
-    {
-      path: "/placement/order/detail",
-      name: "OrderplacementDetail",
-      component: detailOrderReplace,
-      meta: {
-        Auth: true,
-        Key: [6.2],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/order/detail",
+    name: "OrderplacementDetail",
+    component: detailOrderReplace,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
     },
-    {
-      path: "/placement/addOrderPlacement",
-      name: "addOrderPlacement",
-      component: addOrderPlacement,
-      meta: {
-        Auth: true,
-        Key: [6.2],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/placement/addOrderPlacement",
+    name: "addOrderPlacement",
+    component: addOrderPlacement,
+    meta: {
+      Auth: true,
+      Key: [6.2],
+      Role: "placement",
     },
-    {
-      path: "/probation",
-      name: "probation",
-      component: mainProbation,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        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",
-      },
+  },
+  {
+    path: "/probation/detail/:id",
+    name: "probationDetail",
+    component: probationDetail,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/form",
-      name: "probationForm",
-      component: probationFormEvaluation,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/detail/:id/:form",
+    name: "probationForm",
+    component: probationFormEvaluation,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/work/add",
-      name: "probationWorkAdd",
-      component: probationWorkAdd,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/work/add",
+    name: "probationWorkAdd",
+    component: probationWorkAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/work/:id",
-      name: "probationWork",
-      component: probationWorkAdd,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/work/:id",
+    name: "probationWork",
+    component: probationWorkAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/probation/add",
-      name: "probationWorkAdd",
-      component: probationFormAssign,
-      meta: {
-        Auth: true,
-        Key: [6.3],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/probation/add",
+    name: "probationWorkAdd",
+    component: probationFormAssign,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
     },
-    {
-      path: "/transfer",
-      name: "transfer",
-      component: transfer,
-      meta: {
-        Auth: true,
-        Key: [6.4],
-        Role: "placement",
-      }
+  },
+  {
+    path: "/transfer",
+    name: "transfer",
+    component: transfer,
+    meta: {
+      Auth: true,
+      Key: [6.4],
+      Role: "placement",
     },
-    {
-      path: "/transfer/:id",
-      name: "transfer-id",
-      component: transferbyId,
-      meta: {
-        Auth: true,
-        Key: [6.4],
-        Role: "placement",
-      }
+  },
+  {
+    path: "/transfer/:id",
+    name: "transfer-id",
+    component: transferbyId,
+    meta: {
+      Auth: true,
+      Key: [6.4],
+      Role: "placement",
     },
-    {
-      path: "/repatriation-order",
-      name: "repatriation-order",
-      component: RepatriationOrder,
-      meta: {
-        Auth: true,
-        Key: [6.6],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/repatriation-order",
+    name: "repatriation-order",
+    component: RepatriationOrder,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
     },
-    {
-      path: "/repatriation-order/add",
-      name: "repatriation-order-add",
-      component: RepatriationOrderAdd,
-      meta: {
-        Auth: true,
-        Key: [6.6],
-        Role: "placement",
-      },
+  },
+  {
+    path: "/repatriation-order/add",
+    name: "repatriation-order-add",
+    component: RepatriationOrderAdd,
+    meta: {
+      Auth: true,
+      Key: [6.6],
+      Role: "placement",
     },
-  ];
+  },
+];
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 3f51227be..29f73c9b7 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -281,3 +281,17 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
     DataMainOrder,
   };
 });
+
+export const useProbationDataStore = defineStore("probationDataStore", () => {
+  const ratingColors = ref<string[]>([
+    "light-blue-3",
+    "light-blue-6",
+    "blue",
+    "blue-9",
+    "blue-10",
+  ]);
+
+  return {
+    ratingColors,
+  };
+});