From f4aa92634e39880de95e868b20418b6bcea7a0f3 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Mon, 7 Aug 2023 18:07:32 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B8=84=E0=B9=89=E0=B8=B2=E0=B8=87=20?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=B4=E0=B8=A5=E0=B9=80=E0=B8=95=E0=B8=AD=E0=B8=A3?=
 =?UTF-8?q?=E0=B9=8C=203.2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/FormAssign.vue       | 888 +++++++-----------
 1 file changed, 328 insertions(+), 560 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index 895acb766..e719eea9b 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -283,17 +283,22 @@
                     </div>
                     <div
                       v-for="(item, index) in knowledgeArray"
+                      :key="index"
                       class="col-12 row q-col-gutter-sm"
                     >
                       <div class="col-11 q-my-xs">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title}-${item.description}`
+                          "
+                          :option-value="(level) => level.level_id"
                           :rules="
                             index < 3
                               ? [(val) => !!val || 'กรุณาเลือกความสามารถ']
                               : []
                           "
                           hide-bottom-space
-                          :options="getOpknowledge(item)"
+                          :options="OPknowledge"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -346,15 +351,17 @@
                             v-for="(item, index) in checkRule"
                             :key="item.id"
                           >
-                            <div v-if="index == 0" class="col-1 text-center">
+                            <div v-if="index === 0" class="col-1 text-center">
                               <q-checkbox
-                                v-show="item.status_select === 1"
+                                :true-value="1"
+                                :false-value="0"
+                                v-if="item.status_select === 1"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
                               />
                             </div>
-                            <div v-if="index == 0" class="col-11">
+                            <div v-if="index === 0" class="col-11">
                               {{ item.description }}
                             </div>
                           </div>
@@ -365,11 +372,11 @@
                             class="row bg-grey-2 q-py-xs borderCheck"
                           >
                             <div class="col-1"></div>
-                            <div class="col-10 ">
+                            <div class="col-10">
                               {{ item.description }}
                             </div>
                           </div>
-                          </div>
+                        </div>
                         <div v-for="(item, index) in checkRule" :key="item.id">
                           <div
                             v-if="index === 2"
@@ -386,6 +393,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -412,6 +421,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -438,6 +449,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -464,6 +477,8 @@
                           >
                             <div class="col-1 text-center">
                               <q-checkbox
+                                :true-value="1"
+                                :false-value="0"
                                 v-model="item.checked"
                                 dense
                                 :disable="routeName != 'probationWorkAdd'"
@@ -520,11 +535,16 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPcomputer"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -536,11 +556,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPenglish"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -552,11 +577,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPinfomation"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -568,11 +598,16 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) =>
+                              `${item.title} - ${item.level_description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',
                           ]"
-                          :options="OPskill"
+                          :options="OPresourse"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -600,9 +635,13 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -614,9 +653,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main3,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -628,9 +671,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main4,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -642,9 +689,13 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main3,main5])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -654,11 +705,16 @@
                           label="ตัวที่ 4"
                         />
                       </div>
+
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="OPmain"
+                          :options="filterMain(OPmain,[main,main2,main3,main4])"
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -675,11 +731,16 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group2,group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -691,11 +752,15 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group,group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -707,11 +772,15 @@
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          :option-label="
+                            (item) => `${item.title} - ${item.description}`
+                          "
+                          option-value="id"
                           hide-bottom-space
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="OPgroup"
+                          :options="filterData(OPgroup,[group,group2])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -1284,10 +1353,12 @@
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
-import { ref, computed, watch } from "vue";
+import { ref, computed, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
 
+import config from "@/app.config";
 const $q = useQuasar();
 const val1 = ref([
   {
@@ -1300,7 +1371,12 @@ const val1 = ref([
 const router = useRouter();
 const mixin = useCounterMixin();
 const { date2Thai, notifyError } = mixin;
-
+const filterData = (options: any[], excludedGroups: any[]) => {
+  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+};
+const filterMain = (options: any[], excludedGroups: any[]) => {
+  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+};
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 const fullnameFoot = ref<string>("");
@@ -1323,7 +1399,41 @@ const other5_no2_desc = ref<object>({});
 const experimenter_dated = ref<Date>();
 const createdAt = ref<Date>();
 const updatedAt = ref<Date>();
+const group = ref<any | null>(null);
+const group2 = ref<any | null>(null);
+const group3 = ref<any | null>(null);
+const main = ref<any>();
+const main2 = ref<any>();
+const main3 = ref<any>();
+const main4 = ref<any>();
+const main5 = ref<any>();
 
+
+const Other = ref<string>("");
+const commander = ref<string>("");
+
+const date1 = ref<Date>();
+const date2 = ref<Date>();
+const date3 = ref<Date>();
+const date4 = ref<Date>();
+
+const OPmain = ref<
+  Array<{
+    id: number;
+    title: string;
+    description: string;
+    level: number;
+  }>
+>([]);
+
+const OPgroup = ref<
+  Array<{
+    id: number;
+    title: string;
+    description: string;
+    level: number;
+  }>
+>([]);
 const clearDateExam = () => {
   date_start.value = null;
 };
@@ -1338,6 +1448,7 @@ const name = ref<string>("");
 const position = ref<string>("");
 
 const monthSelect = ref<number>();
+
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
 const OPcaretaker = [
@@ -1375,8 +1486,18 @@ const resetActivity = () => {
 //-----------------(3.2)-----------//
 
 const knowledgeCount = ref<number>(3);
-const knowledge = ref<string[]>(Array(knowledgeCount.value).fill(""));
-const OPknowledge = ["1", "2", "3", "4"];
+const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
+const OPknowledge = ref<
+  Array<{
+    knowledge_id: number;
+    title: number;
+    options: Array<Option>;
+  }>
+>([]);
+interface Option {
+  level_id: number;
+  level_desc: string;
+}
 const addKnowledge = () => {
   if (knowledgeCount.value < 6) {
     knowledgeCount.value++;
@@ -1413,534 +1534,159 @@ const addProductivity = () => {
 const ProductivityArray = computed(() => {
   return Array(productivityCount.value).fill("");
 });
-
-const checkRule = ref([
-  {
-    id: 1,
-    parent_id: 0,
-    description: "๑. รัฐธรรมนูญ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 2,
-    parent_id: 0,
-    description: "๒. กฎหมายปกครอง",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 3,
-    parent_id: 2,
-    description: "๒.๑. ด้านการบริหารราชการ เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 4,
-    parent_id: 3,
-    description: "๑) กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 5,
-    parent_id: 3,
-    description: "๒) กฎหมายว่าด้วยระเบียบบริหารราชการแผ่นดิน",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 6,
-    parent_id: 3,
-    description: "๓) กฎหมายว่าด้วยลักษณะปกครองท้องที่",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 7,
-    parent_id: 3,
-    description:
-      "๔) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจารณ์พ.ศ.๒๕๓๙",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:39:59.000Z",
-    updatedAt: "2023-07-24T10:39:59.000Z",
-    checked: false,
-  },
-  {
-    id: 8,
-    parent_id: 3,
-    description:
-      "๕) ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองและสังคมที่ดีพ.ศ.๒๕๔๒",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 9,
-    parent_id: 3,
-    description:
-      "๖) พระราชกฤษฎีกาว่าด้วยหลักเกณฑ์และวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ.๒๕๔๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,  
-  },
-  {
-    id: 10,
-    parent_id: 2,
-    description: "๒.๒. ด้านการปฏิบัติราชการ เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 11,
-    parent_id: 10,
-    description: "๑) ระเบียบกรุงเทพมหานครว่าด้วยวิธีปฏิบัติงานสารบรรณ พ.ศ.๒๕๔๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 12,
-    parent_id: 10,
-    description: "๒) กฎหมายว่าด้วยวิธีปฏิบัติราชการทางปกครอง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 13,
-    parent_id: 10,
-    description: "๓) กฎหมายว่าด้วยความรับผิดทางละเมิดของเจ้าหน้าที่",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 14,
-    parent_id: 10,
-    description: "๔) กฎหมายว่าด้วยการข้อมูลข่าวสารของทางราชการ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 15,
-    parent_id: 10,
-    description: "๕) ระเบียบสำนักนายกรัฐมนตรีว่าด้วยงานสารบรรณ พ.ศ.๒๕๒๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 16,
-    parent_id: 10,
-    description: "๖) ระเบียบว่าด้วยการรักษาความลับของทางราชการ พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 17,
-    parent_id: 2,
-    description: "๒.๓ ด้านการบริหารทรัพยากรบุคคล เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 18,
-    parent_id: 17,
-    description:
-      "๑) กฎหมายว่าด้วยระเบียบข้าราชการกรุงเทพมหานครและบุคลากรกรุงเทพมหานคร/กฎ ก.ก./หลักเกณฑ์ วิธีการ/มติ ก.ก. ที่เกี่ยวข้อง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 19,
-    parent_id: 17,
-    description:
-      "๒) กฎหมายว่าด้วยระเบียบข้าราชการพลเรือนและกฎ ก.พ. ที่เกี่ยวข้อง",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 20,
-    parent_id: 2,
-    description: "๒.๔. ด้านการบริหารงบประมาณและการคลัง เช่น",
-    status_select: 0,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 21,
-    parent_id: 20,
-    description:
-      "๑) ข้อบัญญัติกรุงเทพมหานคร เรื่อง วิธีการงบประมาณ พ.ศ.๒๕๒๙ ซึ่งแก้ไขเพิ่มเติมโดย(ฉบับที่๒)พ.ศ.๒๕๓๓ และ(ฉบับที่๓)พ.ศ.๒๕๓๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 22,
-    parent_id: 20,
-    description:
-      "๒) ระเบียบกรุงเทพมหานครว่าด้วยการรับเงิน การเบิกจ่ายเงิน การเก็บรักษาเงิน การนำส่งเงินและการตรวจเงิน(ฉบับที่๘) พ.ศ.๒๕๔๔ (ฉบับที่๙)พ.ศ.๒๕๔๘",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 23,
-    parent_id: 20,
-    description:
-      "๓) ระเบียบกรุงเทพมหานครว่าด้วยค่าใช้จ่ายในการฝึกอบรบ พ.ศ.๒๕๔๑",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 24,
-    parent_id: 20,
-    description: "๔) พระราชบัญญัติวิธีการงบประมาณ พ.ศ.๒๕๐๒",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 25,
-    parent_id: 20,
-    description:
-      "๕) ระเบียบคณะกรรมการการตรวจเงินแผ่นดินว่าด้วยวินัยทางงบประมาณและการคลัง พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 26,
-    parent_id: 20,
-    description: "๖) กฎหมายว่าด้วยความผิดเกี่ยวกับการเสนอราคาต่อหน่วยของรัฐ",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 27,
-    parent_id: 20,
-    description:
-      "๗) พระราชกฤษฎีกาการจ่ายเงินเดือน เงินปี บำเหน็จ บำนาญ และเงินอื่นในลักษณะเดียวกัน พ.ศ.๒๕๓๕",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 28,
-    parent_id: 20,
-    description: "๘) พระราชกฤษฎีกาค่าใช้จ่ายในการเดินทางไปราชการ พ.ศ.๒๕๒๖",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-  {
-    id: 29,
-    parent_id: 20,
-    description:
-      "๙) ระเบียบกระทรวงการคลังว่าด้วยการเบิกจ่ายเบี้ยเลี้ยงเดินทาง และค่าเช่าที่พักในการเดินทางไปราชการ พ.ศ.๒๕๓๔ (ฉบับที่๙) พ.ศ.๒๕๔๔",
-    status_select: 1,
-    active: 1,
-    createdAt: "2023-07-24T10:40:00.000Z",
-    updatedAt: "2023-07-24T10:40:00.000Z",
-    checked: false,
-  },
-]);
-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,
-  },
-]);
-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,
-  },
-]);
-const checkList23 = ref([
-  {
-    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,
-  },
-]);
-const law = ref([]);
-const listlaw = [
-  { id: 1, label: "2.1.1 กฎหมายว่าด้วยระเบียบบริหารราชการกรุงเทพมหานคร" },
-  { id: 2, label: "2.1.2 กฎหมายว่าด้วยระเบียบบริหารราชการเเผ่นดิน" },
-  { id: 3, label: "2.1.3 กฎหมายว่าด้วยลักษณะปกครองทองที่" },
-  {
-    id: 4,
-    label:
-      "2.1.4 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการรับฟังความคิดเห็นสาธารณะโดยวิธีประชาพิจาร์ณ พ.ศ. ๒๕๓๙",
-  },
-  {
-    id: 5,
-    label:
-      "2.1.5 ระเบียบสำนักนายกรัฐมนตรี ว่าด้วยการสร้างระบบบริหารกิจการบ้านเมืองเเละสังคมที่ดี พ.ศ. ๒๕๔๒",
-  },
-  {
-    id: 5,
-    label:
-      "2.1.6 พระราชกฤษฏีกาว่าด้วยหลักเกณฑ์เเละวิธีการบริหารกิจการบ้านเมืองที่ดี พ.ศ. ๒๕๔๖",
-  },
-];
 interface CheckboxItem {
   id: number;
-  text: string;
-  checked: boolean;
+  parent_id: number;
+  description: string;
+  status_select: number;
+  checked: number;
 }
 
-// const nameRef = ref()
-// const positionRef = ref()
-// const monthRef = ref()
-// const startDateRef = ref()
-
-// const caregiverRef1 = ref()
-// const caregiverRef2 = ref()
+const checkRule = ref<CheckboxItem[]>([]);
+  const getcompetency = async () => {
+  await http.get(config.API.competencyOptions()).then((res: any) => {
+    const data = res.data.data;
+    OPmain.value = data;
+    main.value = data[0];
+    main2.value = data[1];
+    main3.value = data[2];
+    main4.value = data[3];
+    main5.value = data[4];
+  });
+};
+const getCompetencyGroup = async () => {
+  await http.get(config.API.competencyGroupOptions()).then((res: any) => {
+    const data = res.data.data;
+    OPgroup.value = data;
+    group.value = data[0];
+    group2.value = data[1];
+    group3.value = data[2];
+  });
+};
+const getKnowledge = async () => {
+  await http.get(config.API.knowledgeOptions()).then((res: any) => {
+    OPknowledge.value = res.data.data;
+  });
+};
+const getSkill = async () => {
+  await http.get(config.API.skillOptions()).then((res: any) => {
+    const skillData = res.data.data;
+    OPcomputer.value = [skillData.computer];
+    OPenglish.value = [skillData.english];
+    OPinfomation.value = [skillData.information];
+    OPresourse.value = [skillData.resourse];
+    skill.value = skillData.computer;
+    skill2.value = skillData.english;
+    skill3.value = skillData.information;
+    skill4.value = skillData.resourse;
+  });
+};
+const getLaw = async () => {
+  await http.get(config.API.lawOptions()).then((res: any) => {
+    checkRule.value = res.data.data;
+  });
+};
 
 const putData = () => {
-  const checkboxData: Record<string, CheckboxItem[]> = {
-    checkRule: checkRule.value.filter((item) => item.checked),
-  };
+  const assign_job = activityArray.value.map((item, index) => {
+    const activityDesc = activity_desc.value[index]?.trim();
+    const goalDesc = goal_desc.value[index]?.trim();
 
-  const assign_job = activityArray.value.map((item, index) => ({
-    id: index + 1,
-    activity_desc: activity_desc.value[index],
-    goal_desc: goal_desc.value[index],
-  }));
-  const know_ledge = knowledgeArray.value.map((item, index) => ({
-    id: index + 1,
-    knowledge: knowledge.value[index],
-  }));
-  const Productivity_assign = ProductivityArray.value.map((item, index) => ({
-    id: index + 1,
-    output_desc: output_desc.value[index],
-    indicator_desc: indicator_desc.value[index],
+    if (activityDesc !== "" && goalDesc !== "") {
+      return {
+        id: index + 1,
+        activity_desc: activityDesc,
+        goal_desc: goalDesc,
+      };
+    } else {
+      return null; 
+    }
+  });
+  const know_ledge = knowledge.value.map((item) => ({
+    id: item ? item.id : null,
+    level: item ? item.level : null,
   }));
+
+
+  const Productivity_assign = ProductivityArray.value.map((item, index) => {
+    const outputDesc = output_desc.value[index]?.trim();
+    const indicatorDesc = indicator_desc.value[index]?.trim();
+
+    if (outputDesc !== "" && indicatorDesc !== "") {
+      return {
+        id: index + 1,
+        activity_desc: outputDesc,
+        goal_desc: indicatorDesc,
+      };
+    } else {
+      return null; 
+    }
+  });
+  const groupData = group.value
+    ? { id: group.value.id, level: group.value.level }
+    : null;
+  const group2Data = group2.value
+    ? { id: group2.value.id, level: group2.value.level }
+    : null;
+  const group3Data = group3.value
+    ? { id: group3.value.id, level: group3.value.level }
+    : null;
+
+  const skillData = skill.value
+    ? { id: skill.value.id, level: skill.value.level }
+    : null;
+  const skill2Data = skill2.value
+    ? { id: skill2.value.id, level: skill2.value.level }
+    : null;
+  const skill3Data = skill3.value
+    ? { id: skill3.value.id, level: skill3.value.level }
+    : null;
+  const skill4Data = skill4.value
+    ? { id: skill4.value.id, level: skill4.value.level }
+    : null;
+
+  const mainData = main.value
+    ? { id: main.value.id, level: main.value.level }
+    : null;
+  const main2Data = main2.value
+    ? { id: main2.value.id, level: main2.value.level }
+    : null;
+  const main3Data = main3.value
+    ? { id: main3.value.id, level: main3.value.level }
+    : null;
+  const main4Data = main4.value
+    ? { id: main4.value.id, level: main4.value.level }
+    : null;
+  const main5Data = main5.value
+    ? { id: main5.value.id, level: main5.value.level }
+    : null;
+
   const data = {
     fullname: fullname.value,
     position: position.value,
-    monthSelect: monthSelect.value,
+    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
     date_start: date_start.value,
     date_finish: date_finish.value,
     caretaker_1: caretaker1.value,
     caretaker_2: caretaker2.value,
     knowledge: know_ledge,
-    assign_job: assign_job,
+    assign_job: assign_job.filter((item) => item !== null),
     otherlaw: OtherLaw.value,
-    skill: skill.value,
-    skill_2: skill2.value,
-    skill_3: skill3.value,
-    skill_4: skill4.value,
-    main: main.value,
-    main_2: main2.value,
-    main_3: main3.value,
-    main_4: main4.value,
-    main_5: main5.value,
-    group: group.value,
-    group_2: group2.value,
-    group_3: group3.value,
+    skill: skillData,
+    skill_2: skill2Data,
+    skill_3: skill3Data,
+    skill_4: skill4Data,
+    main: mainData,
+    main_2: main2Data,
+    main_3: main3Data,
+    main_4: main4Data,
+    main_5: main5Data,
+    group: groupData,
+    group_2: group2Data,
+    group_3: group3Data,
     other: Other.value,
     other_5: Other5.value,
-    productivity_assign: Productivity_assign,
+    productivity_assign: Productivity_assign.filter((item) => item !== null),
     commander: commander.value,
     date_1: date1.value,
     date_2: date2.value,
@@ -1950,7 +1696,12 @@ const putData = () => {
     position_foot: positionFoot.value,
     caretaker_foot: caretakerFoot.value,
     caretaker_foot2: caretakerFoot2.value,
-    checkarray: checkboxData,
+    checkarray: checkRule.value
+      .filter((item) => item.checked === 1)
+      .map((item) => ({
+        id: item.id,
+        checked: item.checked,
+      })),
   };
   console.log("test", data);
 };
@@ -1966,8 +1717,6 @@ const saveData = async () => {
   // workInfopRef.value.validate();
   myForm.value.validate().then(async (result: boolean) => {
     if (result) {
-      // แสดงข้อมูลใน Console
-
       $q.dialog({
         title: "บันทึกข้อมูล",
         message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
@@ -1977,45 +1726,64 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          putData();
+          // putData();
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
       // ลอง
-      // putData();
+      putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
 const OtherLaw = ref<string>("");
 
-const skill = ref<string>("ความรู้ความสามารถด้าน 1");
-const skill2 = ref<string>("ความรู้ความสามารถด้าน 2");
-const skill3 = ref<string>("ความรู้ความสามารถด้าน 3");
-const skill4 = ref<string>("ความรู้ความสามารถด้าน 4");
-const OPskill = [""];
 
-const main = ref<string>("คุณธรรมจริยธรรม");
-const main2 = ref<string>("การให้บริการที่ดี");
-const main3 = ref<string>("การมุ่งผลสัมฤทธิ์");
-const main4 = ref<string>("ทํางานเป็นทีม");
-const main5 = ref<string>("การสั่งสมความเชี่ยวชาญในอาชีพ");
-const OPmain = [""];
+const skill = ref<any>();
+const skill2 = ref<any>();
+const skill3 = ref<any>();
+const skill4 = ref<any>();
+const OPcomputer = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPenglish = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPinfomation = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
+const OPresourse = ref<
+  Array<{
+    id: number;
+    title: string;
+    level: number;
+    level_description: string;
+  }>
+>([]);
 
-const group = ref<string>("");
-const group2 = ref<string>("");
-const group3 = ref<string>("");
-const OPgroup = ["test"];
-
-const Other = ref<string>("");
-
-const commander = ref<string>("");
-
-const date1 = ref<Date>();
-const date2 = ref<Date>();
-const date3 = ref<Date>();
-const date4 = ref<Date>();
+onMounted(async () => {
+  await getLaw();
+  await getcompetency();
+  await getCompetencyGroup();
+  await getSkill();
+  await getKnowledge();
+});
 </script>
 <style lang="scss" scoped>
 .border_y {

From 44ab2aa17e36cd2e988e468f28f068d42b761677 Mon Sep 17 00:00:00 2001
From: setthawutttty <stw.ttty@gmail.com>
Date: Wed, 9 Aug 2023 12:09:46 +0700
Subject: [PATCH 2/2] no message

---
 src/api/05_placement/api.probation.ts         |   8 +-
 .../components/probation/FormAssign.vue       | 453 +++++++++++++-----
 .../components/probation/MainProbation.vue    | 144 ++----
 .../components/probation/ProbationDetail.vue  |  73 ++-
 .../05_placement/interface/request/Main.ts    |  32 +-
 src/modules/05_placement/router.ts            |   2 +-
 6 files changed, 463 insertions(+), 249 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 351a6685a..b774f3e36 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -1,6 +1,8 @@
 import env from "../index";
 const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
+const calculate = `${env.API_PROBATION_URI}/calculate`;
+const finish = `${env.API_PROBATION_URI}/assign`;
 
 export default {
   competencyOptions: () => `${dataOptions}/competency`,
@@ -8,7 +10,11 @@ export default {
   knowledgeOptions: () => `${dataOptions}/knowledge`,
   skillOptions: () => `${dataOptions}/skill`,
   lawOptions: () => `${dataOptions}/law`,
-
+  personalList: () => `${personal}/list`,
+  personal: (personalId:string) => `${personal}?personal_id=${personalId}`,
+  newAssign: (personalId:string) => `${dataOptions}/new-assign?personal_id=${personalId}`,
+  calculateDate: () => `${calculate}/assign-finish`,
+  saveFinish: (personalId:string) => `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
 };
diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index e719eea9b..bc24c0b4c 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -67,6 +67,7 @@
                     dense
                     borderless
                     option-label="label"
+                    option-value="value"
                     :outlined="routeName === 'probationWorkAdd'"
                     v-model="monthSelect"
                     :label="`ระยะเวลากี่เดือน`"
@@ -154,6 +155,7 @@
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
+                  option-value="personal_id"
                   :options="OPcaretaker"
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
@@ -163,10 +165,13 @@
                   :outlined="routeName == 'probationWorkAdd'"
                   v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`"
+                  option-label="name"
                 />
                 <q-select
                   :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']"
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   hide-bottom-space
                   class="col-xs-12 col-sm-6"
                   :readonly="routeName != 'probationWorkAdd'"
@@ -552,10 +557,18 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill"
                           label="ด้านที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
+                          ellipsis-2-lines
                           :option-label="
                             (item) =>
                               `${item.title} - ${item.level_description}`
@@ -573,7 +586,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill2"
                           label="ด้านที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -594,7 +614,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill3"
                           label="ด้านที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -615,7 +642,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="skill4"
                           label="ด้านที่ 4"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.level_description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -641,7 +675,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main2,main3,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main2, main3, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -649,7 +685,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main"
                           label="ตัวที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -659,7 +702,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main3,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main3, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -667,7 +712,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main2"
                           label="ตัวที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -677,7 +729,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main4,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main4, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -685,7 +739,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main3"
                           label="ตัวที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -695,7 +756,9 @@
                           option-value="id"
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main3,main5])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main5])
+                          "
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -703,14 +766,23 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main4"
                           label="ตัวที่ 4"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
 
                       <div class="col-xs-12 col-sm-6">
                         <q-select
                           hide-bottom-space
                           :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']"
-                          :options="filterMain(OPmain,[main,main2,main3,main4])"
+                          :options="
+                            filterMain(OPmain, [main, main2, main3, main4])
+                          "
                           :option-label="
                             (item) => `${item.title} - ${item.description}`
                           "
@@ -722,7 +794,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="main5"
                           label="ตัวที่ 5"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -731,7 +810,6 @@
                     <div class="col-12 row q-col-gutter-sm">
                       <div class="col-xs-12 col-sm-6">
                         <q-select
-
                           :option-label="
                             (item) => `${item.title} - ${item.description}`
                           "
@@ -740,7 +818,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group2,group3])"
+                          :options="filterData(OPgroup, [group2, group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -748,7 +826,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group"
                           label="ตัวที่ 1"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -760,7 +845,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group,group3])"
+                          :options="filterData(OPgroup, [group, group3])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -768,7 +853,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group2"
                           label="ตัวที่ 2"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select
@@ -780,7 +872,7 @@
                           :rules="[
                             (val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',
                           ]"
-                          :options="filterData(OPgroup,[group,group2])"
+                          :options="filterData(OPgroup, [group, group2])"
                           class="bg-white"
                           :readonly="routeName != 'probationWorkAdd'"
                           dense
@@ -788,7 +880,14 @@
                           :outlined="routeName == 'probationWorkAdd'"
                           v-model="group3"
                           label="ตัวที่ 3"
-                        />
+                        >
+                          <template v-slot:selected-item="scope">
+                            <div class="ellipsis-2-lines">
+                              {{ scope.opt.title }} -
+                              {{ scope.opt.description }}
+                            </div>
+                          </template></q-select
+                        >
                       </div>
                     </div>
                   </div>
@@ -1179,6 +1278,8 @@
               <div class="col-12 row q-col-gutter-md">
                 <q-select
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1229,6 +1330,8 @@
                 </div>
                 <q-select
                   :options="OPcaretaker"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1287,7 +1390,9 @@
               </div>
               <div class="col-12 row q-col-gutter-md">
                 <q-select
-                  :options="OPcaretaker"
+                  :options="OPcommander"
+                  option-value="personal_id"
+                  option-label="name"
                   class="col-xs-12 col-sm-8"
                   :readonly="routeName != 'probationWorkAdd'"
                   dense
@@ -1345,14 +1450,19 @@
           v-show="routeName == 'probationWorkAdd'"
           class="flex justify-end q-pa-sm q-gutter-sm"
         >
-          <q-btn unelevated label="บันทึก" color="public" @click="saveData()" />
+          <q-btn
+            unelevated
+            label="บันทึก"
+            color="public"
+            @click="saveData(personalId)"
+          />
         </div>
       </q-card>
     </div>
   </q-form>
 </template>
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { useRouter, useRoute } from "vue-router";
 import { ref, computed, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
@@ -1370,13 +1480,26 @@ const val1 = ref([
 
 const router = useRouter();
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
+const {
+  date2Thai,
+  notifyError,
+  dateToISO,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const filterData = (options: any[], excludedGroups: any[]) => {
-  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
 };
 const filterMain = (options: any[], excludedGroups: any[]) => {
-  return options.filter((item) => !excludedGroups.some((group) => group && group.id === item.id));
+  return options.filter(
+    (item) => !excludedGroups.some((group) => group && group.id === item.id)
+  );
 };
+const route = useRoute();
 const checkValidate = ref<boolean>(false);
 const myForm = ref<any>(null);
 const fullnameFoot = ref<string>("");
@@ -1384,12 +1507,12 @@ const positionFoot = ref<string>("");
 const caretakerFoot = ref<string>("");
 const caretakerFoot2 = ref<string>("");
 const id = ref<number>();
-const personal_id = ref<string>();
+const personalId = route.params.personalId as string;
 const fullname = ref<string>();
 const knowledge_skill_map_no = ref<string[]>([]);
 const round_no = ref<number>();
-const date_start = ref<Date | null>(null);
-const date_finish = ref<Date | null>(null);
+const date_start = ref<Date>();
+const date_finish = ref<Date>();
 const behavior_desc = ref<string>();
 const other_desc = ref<object>({});
 const other4_desc = ref<string>();
@@ -1408,7 +1531,6 @@ const main3 = ref<any>();
 const main4 = ref<any>();
 const main5 = ref<any>();
 
-
 const Other = ref<string>("");
 const commander = ref<string>("");
 
@@ -1447,19 +1569,36 @@ const routeName = router.currentRoute.value.name;
 const name = ref<string>("");
 const position = ref<string>("");
 
-const monthSelect = ref<number>();
+const monthSelect = ref<number | string>();
 
 const caretaker1 = ref<string>("");
 const caretaker2 = ref<string>("");
-const OPcaretaker = [
-  "นางสาวรัชภรณ์ ภักดี",
-  "นางสาวทวิดา กมลเวชชี",
-  "test1",
-  "test2",
-  "test3",
-  "test4",
-];
-const monthOp = [{ value: "6", label: "6 เดือน" }];
+const OPcaretaker = ref<
+  {
+    personal_id: string;
+    name: string;
+    PositionId: string;
+    PositionLevelId: string;
+    PositionLineId: string;
+    OrganizationOrganization: string;
+  }[]
+>([]);
+
+const OPcommander = ref<
+  {
+    personal_id: string;
+    name: string;
+    PositionId: string;
+    PositionLevelId: string;
+    PositionLineId: string;
+    OrganizationOrganization: string;
+  }[]
+>([]);
+interface MonthOption {
+  value: number;
+  label: string;
+}
+const monthOp: MonthOption[] = [];
 //-----------------(3.1)-----------//
 const activityCount = ref<number>(2);
 const activityDataArray = ref<any[]>([]);
@@ -1486,10 +1625,10 @@ const resetActivity = () => {
 //-----------------(3.2)-----------//
 
 const knowledgeCount = ref<number>(3);
-const knowledge = ref<any[]>(Array.from({ length: knowledgeCount.value }, () => null));
+const knowledge = ref<any[]>([]);
 const OPknowledge = ref<
   Array<{
-    knowledge_id: number;
+    id: number;
     title: number;
     options: Array<Option>;
   }>
@@ -1543,7 +1682,21 @@ interface CheckboxItem {
 }
 
 const checkRule = ref<CheckboxItem[]>([]);
-  const getcompetency = async () => {
+const getAssignNew = async (id: string) => {
+  await http.get(config.API.newAssign(id)).then((res: any) => {
+    const data = res.data.data;
+    const monthOption = {
+      value: data.assign_month,
+      label: `${data.assign_month} เดือน`,
+    };
+    console.log("Assign-New", data);
+    monthOp.push(monthOption);
+    monthSelect.value = `${data.assign_month} เดือน`;
+    OPcaretaker.value = data.mentors;
+    OPcommander.value = [data.commander];
+  });
+};
+const getcompetency = async () => {
   await http.get(config.API.competencyOptions()).then((res: any) => {
     const data = res.data.data;
     OPmain.value = data;
@@ -1587,7 +1740,24 @@ const getLaw = async () => {
   });
 };
 
-const putData = () => {
+const postDateTime = async () => {
+  await http
+    .post(config.API.calculateDate(), {
+      month: monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+      start_date: dateToISO(date_start.value as Date),
+    })
+    .then(async (res) => {
+      const result = res.data;
+      date_finish.value = result.finish_date;
+    })
+    .catch((e) => {})
+    .finally(async () => {
+      hideLoader();
+    });
+};
+
+const putData = (id: string) => {
+  const GUID = id;
   const assign_job = activityArray.value.map((item, index) => {
     const activityDesc = activity_desc.value[index]?.trim();
     const goalDesc = goal_desc.value[index]?.trim();
@@ -1599,7 +1769,7 @@ const putData = () => {
         goal_desc: goalDesc,
       };
     } else {
-      return null; 
+      return null;
     }
   });
   const know_ledge = knowledge.value.map((item) => ({
@@ -1607,7 +1777,6 @@ const putData = () => {
     level: item ? item.level : null,
   }));
 
-
   const Productivity_assign = ProductivityArray.value.map((item, index) => {
     const outputDesc = output_desc.value[index]?.trim();
     const indicatorDesc = indicator_desc.value[index]?.trim();
@@ -1615,88 +1784,94 @@ const putData = () => {
     if (outputDesc !== "" && indicatorDesc !== "") {
       return {
         id: index + 1,
-        activity_desc: outputDesc,
-        goal_desc: indicatorDesc,
+        output_desc: outputDesc,
+        indicator_desc: indicatorDesc,
       };
     } else {
-      return null; 
+      return null;
     }
   });
-  const groupData = group.value
-    ? { id: group.value.id, level: group.value.level }
-    : null;
-  const group2Data = group2.value
-    ? { id: group2.value.id, level: group2.value.level }
-    : null;
-  const group3Data = group3.value
-    ? { id: group3.value.id, level: group3.value.level }
-    : null;
 
-  const skillData = skill.value
-    ? { id: skill.value.id, level: skill.value.level }
-    : null;
-  const skill2Data = skill2.value
-    ? { id: skill2.value.id, level: skill2.value.level }
-    : null;
-  const skill3Data = skill3.value
-    ? { id: skill3.value.id, level: skill3.value.level }
-    : null;
-  const skill4Data = skill4.value
-    ? { id: skill4.value.id, level: skill4.value.level }
-    : null;
+  const allGroup = [];
+  if (group.value)
+    allGroup.push({ id: group.value.id, level: group.value.level });
+  if (group2.value)
+    allGroup.push({ id: group2.value.id, level: group2.value.level });
+  if (group3.value)
+    allGroup.push({ id: group3.value.id, level: group3.value.level });
 
-  const mainData = main.value
-    ? { id: main.value.id, level: main.value.level }
-    : null;
-  const main2Data = main2.value
-    ? { id: main2.value.id, level: main2.value.level }
-    : null;
-  const main3Data = main3.value
-    ? { id: main3.value.id, level: main3.value.level }
-    : null;
-  const main4Data = main4.value
-    ? { id: main4.value.id, level: main4.value.level }
-    : null;
-  const main5Data = main5.value
-    ? { id: main5.value.id, level: main5.value.level }
-    : null;
+  const allSkills = [];
+  if (skill.value)
+    allSkills.push({ id: skill.value.id, level: skill.value.level });
+  if (skill2.value)
+    allSkills.push({ id: skill2.value.id, level: skill2.value.level });
+  if (skill3.value)
+    allSkills.push({ id: skill3.value.id, level: skill3.value.level });
+  if (skill4.value)
+    allSkills.push({ id: skill4.value.id, level: skill4.value.level });
+
+  const allCompetency = [];
+  if (main.value)
+    allCompetency.push({ id: skill.value.id, level: main.value.level });
+  if (main2.value)
+    allCompetency.push({ id: main2.value.id, level: main2.value.level });
+  if (main3.value)
+    allCompetency.push({ id: main3.value.id, level: main3.value.level });
+  if (main4.value)
+    allCompetency.push({ id: main4.value.id, level: main4.value.level });
+  if (main5.value)
+    allCompetency.push({ id: main5.value.id, level: main5.value.level });
+
+  const assign_director = [
+    {
+      personal_id: caretakerFoot.value.personal_id,
+      role: "mentor",
+      dated: date2.value instanceof Date ? dateToISO(date2.value) : null,
+    },
+    {
+      personal_id: caretakerFoot2.value.personal_id,
+      role: "mentor",
+      dated: date3.value instanceof Date ? dateToISO(date3.value) : null,
+    },
+    {
+      personal_id: commander.value.personal_id,
+      role: "commander",
+      dated: date4.value instanceof Date ? dateToISO(date4.value) : null,
+    },
+  ];
 
   const data = {
+    personalId: GUID,
     fullname: fullname.value,
     position: position.value,
-    monthSelect: monthSelect.value !== undefined ? parseInt((monthSelect.value as any).value) : null,
-    date_start: date_start.value,
+    monthSelect:monthSelect.value !== null ? parseInt(monthSelect.value) : null,
+    date_start:
+      date_start.value instanceof Date
+        ? dateToISO(date_start.value)
+        : new Date(),
     date_finish: date_finish.value,
-    caretaker_1: caretaker1.value,
-    caretaker_2: caretaker2.value,
-    knowledge: know_ledge,
-    assign_job: assign_job.filter((item) => item !== null),
-    otherlaw: OtherLaw.value,
-    skill: skillData,
-    skill_2: skill2Data,
-    skill_3: skill3Data,
-    skill_4: skill4Data,
-    main: mainData,
-    main_2: main2Data,
-    main_3: main3Data,
-    main_4: main4Data,
-    main_5: main5Data,
-    group: groupData,
-    group_2: group2Data,
-    group_3: group3Data,
-    other: Other.value,
-    other_5: Other5.value,
-    productivity_assign: Productivity_assign.filter((item) => item !== null),
-    commander: commander.value,
-    date_1: date1.value,
-    date_2: date2.value,
-    date_3: date3.value,
-    date_4: date4.value,
+    // caretaker_1: caretaker1.value,
+    // caretaker_2: caretaker2.value,
+    assign_knowledges: know_ledge,
+    assign_jobs: assign_job.filter((item) => item !== null),
+    other_desc: OtherLaw.value,
+    assign_skill: allSkills,
+    assign_competency: allCompetency,
+    assign_competency_group: allGroup,
+    other4_desc: Other.value,
+    other5_no1_desc: Other5.value,
+    assign_outputs: Productivity_assign.filter((item) => item !== null),
+    // commander: commander.value,
+    assign_director: assign_director,
+    experimenter_dated: date1.value instanceof Date ? dateToISO(date1.value) : new Date(),
+    // date_2: date2.value instanceof Date ? dateToISO(date2.value) : new Date(),
+    // date_3: date3.value instanceof Date ? dateToISO(date3.value) : new Date(),
+    // date_4: date4.value instanceof Date ? dateToISO(date4.value) : new Date(),
     fullname_foot: fullnameFoot.value,
     position_foot: positionFoot.value,
-    caretaker_foot: caretakerFoot.value,
-    caretaker_foot2: caretakerFoot2.value,
-    checkarray: checkRule.value
+    // caretaker_foot: caretakerFoot.value,
+    // caretaker_foot2: caretakerFoot2.value,
+    assign_law: checkRule.value
       .filter((item) => item.checked === 1)
       .map((item) => ({
         id: item.id,
@@ -1706,16 +1881,8 @@ const putData = () => {
   console.log("test", data);
 };
 
-const saveData = async () => {
-  // myForm.value.resetValidation();
-  // nameRef.value.validate();
-  // positionRef.value.validate();
-  // monthRef.value.validate();
-  // startDateRef.value.validate();
-  // caregiverRef1.value.validate();
-  // caregiverRef2.value.validate();
-  // workInfopRef.value.validate();
-  myForm.value.validate().then(async (result: boolean) => {
+const saveData = (id: string) => {
+  myForm.value.validate().then((result: boolean) => {
     if (result) {
       $q.dialog({
         title: "บันทึกข้อมูล",
@@ -1726,20 +1893,24 @@ const saveData = async () => {
         },
       })
         .onOk(async () => {
-          // putData();
+          const data = putData(id);
+          await http
+            .post(config.API.saveFinish(id), data)
+            .then(async (res) => {})
+            .catch((e) => {})
+            .finally(async () => {
+              hideLoader();
+            });
         })
         .onCancel(() => {})
         .onDismiss(() => {});
     } else {
-      // ลอง
-      putData();
       notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
     }
   });
 };
 const OtherLaw = ref<string>("");
 
-
 const skill = ref<any>();
 const skill2 = ref<any>();
 const skill3 = ref<any>();
@@ -1783,6 +1954,20 @@ onMounted(async () => {
   await getCompetencyGroup();
   await getSkill();
   await getKnowledge();
+  await getAssignNew(personalId);
+});
+watch(
+  () => [monthSelect.value, date_start.value],
+  () => {
+    if (monthSelect.value !== undefined && date_start.value !== undefined) {
+      postDateTime();
+    }
+  }
+);
+watch(knowledge.value, () => {
+  knowledge.value.forEach((item) => {
+    OPknowledge.value = OPknowledge.value.filter((e) => e.id != item.id);
+  });
 });
 </script>
 <style lang="scss" scoped>
@@ -1813,4 +1998,12 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
 }
+.q-item span {
+  white-space: normal;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 8467377f8..18e4fa248 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -84,7 +84,7 @@
             <q-tr
               :props="props"
               class="cursor-pointer"
-              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
+              @click="router.push(`/probation/detail/${props.row.personal_id}`)"
             >
               <q-td v-for="col in props.cols" :key="col.name" :props="props">
                 <div v-if="col.name == 'no'">
@@ -257,12 +257,12 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-  "position",
-  "level",
-  "institution",
-  "time",
-  "status",
-  "orderNum",
+  "position_line",
+  "position_level",
+  "organization",
+  "probation_no",
+  "order_number",
+  "probation_status",
 ]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
 
 // หัวตาราง
@@ -286,114 +286,63 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "position",
+    name: "position_line",
     align: "left",
     label: "ตำแหน่งในสายงาน",
     sortable: true,
-    field: "position",
+    field: "position_line",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "level",
+    name: "position_level",
     align: "left",
     label: "ระดับ",
     sortable: true,
-    field: "level",
+    field: "position_level",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "institution",
+    name: "organization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "time",
+    name: "probation_no",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
     sortable: true,
-    field: "time",
+    field: "probation_no",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "orderNum",
+    name: "order_number",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
     sortable: true,
-    field: "orderNum",
+    field: "order_number",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
   {
-    name: "status",
+    name: "probation_status",
     align: "left",
     label: "สถานะทดลองงาน",
     sortable: true,
-    field: "status",
+    field: "probation_status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
-const rows = ref<FormMainProbation[]>([
-  {
-    no: "1",
-    name: "นายสมคิด ยอดใจ ",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-    time: "1",
-    status: "อยู่ระหว่างการทดลองงาน",
-    orderNum: "11/2566",
-  },
-  {
-    no: "2",
-    name: "นายเกียรติศักดิ์ บัณฑิต",
-    position: "นักวิชาการพัสดุ",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-    time: "1",
-    status: "อยู่ระหว่างการทดลองงาน",
-    orderNum: "11/2566",
-  },
-  {
-    no: "3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-    time: "1",
-    status: "อยู่ระหว่างการทดลองงาน",
-    orderNum: "11/2566",
-  },
-  {
-    no: "4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-    time: "1",
-    status: "ไม่ผ่านการทดลอง",
-    orderNum: "11/2566",
-  },
-  {
-    no: "5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-    position: "นักจัดการงานทั่วไป",
-    level: "ปฏิบัติการ",
-    institution: "กลุ่มงานช่วยนักบริหาร",
-    time: "1",
-    status: "ผ่านการทดลองงาน",
-    orderNum: "11/2566",
-  },
-]);
+const rows = ref<FormMainProbation[]>([]);
 
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
@@ -483,28 +432,37 @@ const rows2 = ref<FormMainProbation2[]>([
   //   },
 ]);
 
-onMounted(async () => {});
-
-watch(modal, () => {
-  if (modal.value === true) {
-    fecthOrganiz();
-  }
+onMounted(async () => {
+  getpersonalList();
 });
 
-const fecthOrganiz = async () => {
+// watch(modal, () => {
+//   if (modal.value === true) {
+//     getpersonalList();
+//   }
+// });
+
+const getpersonalList = async () => {
   showLoader();
   await http
-    .get(config.API.profileOrganizRoot)
+    .get(config.API.personalList())
     .then((res) => {
-      console.log(res);
-      let id = res.data.result[0].id;
-      if (id !== "") {
-        findlist(id);
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
+      const data = res.data.data;
+      rows.value = data.map((item: FormMainProbation) => ({
+        personal_id: item.personal_id,
+        name: item.name,
+        position_line: item.position_line,
+        position_line_id: item.position_line_id,
+        position_level: item.position_level,
+        position_level_id: item.position_level_id,
+        organization: item.organization,
+        probation_no: item.probation_no,
+        order_number: item.order_number,
+        probation_status: item.probation_status,
+      }));
+      console.log("(data)", data);
     })
+    .catch(() => {})
     .finally(() => {
       hideLoader();
     });
@@ -559,15 +517,11 @@ const clickAdd = (id: string) => {
     .onOk(async () => {
       const postData = {
         personal_id: id,
-      }
+      };
       console.log("postData:", postData);
-      await http
-    .post(config.API.personalAdd(), postData)
-    .then((res) => {
-      console.log("res:", res);
-      
-    });
-
+      await http.post(config.API.personalAdd(), postData).then((res) => {
+        console.log("res:", res);
+      });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index cb43dad2d..628b2f7c0 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -34,19 +34,19 @@
         <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 class="col-12 text-detail">{{ position_line }}</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 class="col-12 text-detail">{{ position_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 class="col-12 text-detail">{{ organization }}</div>
           </div>
         </div>
         <div class="col-xs-6 col-sm-3 row items-center">
@@ -55,18 +55,18 @@
             <div class="col-12 text-detail">
               <q-icon
                 size="20px"
-                v-if="status == 'อยู่ระหว่างการทดลองงาน'"
+                v-if="probation_status == 'PENDING'"
                 name="mdi-timer-sand"
                 color="deep-orange"
               />
               <q-icon
                 size="20px"
-                v-else-if="status == 'ไม่ผ่านการทดลอง'"
+                v-else-if="probation_status == 'ไม่ผ่านการทดลอง'"
                 name="mdi-close"
                 color="red"
               />
               <q-icon size="20px" v-else name="mdi-check" color="teal" />
-              {{ status }}
+              {{ probation_status == 'PENDING' ? 'อยู่ในระหว่างการทดลองงาน' : '' }}
             </div>
           </div>
         </div>
@@ -78,7 +78,7 @@
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
-            @click="router.push(`/probation/add`)"
+            @click="router.push(`/probation/add/${personalId}`)"
             size="12px"
             flat
             round
@@ -191,17 +191,26 @@
 </template>
 <script setup lang="ts">
 import { useRouter, useRoute } from "vue-router";
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs,onMounted } from "vue";
 import type { QTableProps } from "quasar";
 import type { FormProbationDetail } from "@/modules/05_placement/interface/request/Main";
+import type { FormProbationPersonal } from "@/modules/05_placement/interface/request/Main";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
 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 personalId = ref<string>(route.params.id as string);
+const name = ref<string>("");
+const position_line = ref<string>("");
+const position_level = ref<string>("");
+const organization = ref<string>("");
+const probation_status = ref<string>("");
 
 const pagination = ref({
   sortBy: "desc",
@@ -314,6 +323,42 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const getpersonalList = async () => {
+  showLoader();
+  await http
+    .get(config.API.personal(personalId.value))
+    .then((res) => {
+      const data = res.data.data;
+      name.value = data.name
+      position_line.value = data.position_line
+      position_level.value = data.position_level
+      organization.value = data.organization
+      probation_status.value = data.probation_status
+
+      // rows.value = data.map((item: FormProbationPersonal) => ({
+      //   personal_id: item.personal_id,
+      //   name: item.name,
+      //   position_line: item.position_line,
+      //   position_line_id: item.position_line_id,
+      //   position_level: item.position_level,
+      //   position_level_id: item.position_level_id,
+      //   organization: item.organization,
+      //   probation_no: item.probation_no,
+      //   order_number: item.order_number,
+      //   probation_status: item.probation_status,
+      // }));
+      console.log("(data)", data);
+    })
+    .catch(() => {})
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+onMounted(async () => {
+  await getpersonalList()
+  console.log()
+})
 </script>
 <style lang="scss" scope>
 .q-img {
diff --git a/src/modules/05_placement/interface/request/Main.ts b/src/modules/05_placement/interface/request/Main.ts
index 84af7910f..1da302c4c 100644
--- a/src/modules/05_placement/interface/request/Main.ts
+++ b/src/modules/05_placement/interface/request/Main.ts
@@ -24,14 +24,17 @@ interface FormOrderPlacementMainData {
 }
 
 interface FormMainProbation {
-  no: string;
-  name: string;
-  position: string;
-  level: string;
-  institution: string;
-  time: string;
-  status: string;
-  orderNum: string;
+  personal_id: number,
+  ordering: number,
+  name: string,
+  position_line: string,
+  position_line_id: string,
+  position_level: string,
+  position_level_id: string,
+  organization: string,
+  probation_no: number,
+  order_number: string,
+  probation_status: string
 }
 interface FormMainProbation2 {
   no: string;
@@ -47,8 +50,21 @@ interface FormProbationDetail {
   intendant: string;
   commander: string;
 }
+interface FormProbationPersonal {
+  personal_id: string,
+  name: string,
+  position_line: string,
+  position_line_id: string,
+  position_level: string,
+  position_level_id: string,
+  organization: string,
+  probation_no: number,
+  order_number: string,
+  probation_status: string
+}
 export type { FormPlacementMainData };
 export type { FormOrderPlacementMainData };
 export type { FormMainProbation };
 export type { FormMainProbation2 };
 export type { FormProbationDetail };
+export type { FormProbationPersonal };
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index b6e30b8d2..d99900d33 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -165,7 +165,7 @@ export default [
     },
   },
   {
-    path: "/probation/add",
+    path: "/probation/add/:personalId",
     name: "probationWorkAdd",
     component: probationFormAssign,
     meta: {