From 328dd6e1a3075b014bc808458ab9723001c6da66 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 30 Aug 2023 13:04:45 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=20?=
 =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |  12 +-
 .../probation/FormEvaluation/FormReport.vue   | 336 ++++++++++++++----
 .../components/probation/MainProbation.vue    | 176 +++++----
 .../components/probation/ProbationDetail.vue  | 143 ++++++--
 .../components/probation/SummarySurvey.vue    |   6 +-
 src/modules/05_placement/store.ts             |   3 -
 6 files changed, 492 insertions(+), 184 deletions(-)

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index ac67914a9..dd71c181c 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -27,9 +27,11 @@ export default {
   saveEditAssign: (personalId: string) =>
     `${finish}/probation-assign?id=${personalId}`,
   personalAdd: () => `${personal}/add`,
-  probationGetAssignList: (personalId:string) => 
-  `${finish}/probation-assign-list?personal_id=${personalId}`,
-  probationsGetAssign: (assignId:string) =>`${finish}/probation-assign?assign_id=${assignId}`,
+  probationGetAssignList: (personalId: string) =>
+    `${finish}/probation-assign-list?personal_id=${personalId}`,
+  probationsGetAssign: (assignId: string) => `${finish}/probation-assign?assign_id=${assignId}`,
+  changestatusProbations: (personalId: string) => `${evaluate}/probation/change-status?personal_id=${personalId}`,
+
   // probationGetAssignList: (personalId: string) =>
   //   `${finish}/probation-assign-list?personal_id=${personalId}`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
@@ -60,8 +62,8 @@ export default {
 
 
 
-  summarySurveyDetail:(id:string) => `${evaluate}/survey?assign_id=${id}`,
-  summaryReportDetail:(id:string) => `${evaluate}/report?assign_id=${id}`
+  summarySurveyDetail: (id: string) => `${evaluate}/survey?assign_id=${id}`,
+  summaryReportDetail: (id: string) => `${evaluate}/report?assign_id=${id}`
 
 
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 518c7ef97..b0dd406eb 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -70,11 +70,13 @@ const date_start = ref<Date>(new Date());
 const date_finish = ref<Date>();
 const develop = ref<number>();
 const result = ref<number>();
+const expand_month = ref<string>();
 const reson = ref<string>("");
 const chairman_dated = ref<Date>();
 const director1_dated = ref<any>("");
 const director2_dated = ref<any>("");
-const fullname = ref<string>("")
+const fullname = ref<string>("");
+
 const fecthResult = async (id: string) => {
   await http
     .get(config.API.createformReport(id))
@@ -92,8 +94,7 @@ const fecthResult = async (id: string) => {
       status.value = false;
       action.value = "edit";
     })
-    .catch((e) => {
-    });
+    .catch((e) => {});
 };
 
 // part new
@@ -105,6 +106,10 @@ const options = [
 const optionsResult = [
   { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
   { value: 2, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+  {
+    value: 3,
+    label: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก",
+  },
 ];
 
 const director_id = ref<any>(null);
@@ -137,7 +142,7 @@ const clickdownloadFile = async (type: string) => {
       responseType: "blob",
     })
     .then((res) => {
-      downloadFile(res,`แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
+      downloadFile(res, `แบบรายงานการประเมินฯ_${fullname.value}.${type}`);
     })
     .catch((e) => {
       messageError($q, e);
@@ -156,6 +161,7 @@ const postData = async () => {
     chairman_dated: chairman_dated.value,
     director1_dated: director1_dated.value,
     director2_dated: director2_dated.value,
+    expand_month: expand_month.value,
   };
   await http
     .post(config.API.createformReport(assignId.value), data)
@@ -167,24 +173,39 @@ const postData = async () => {
       messageError($q, e);
     });
 };
+const selectRuslt = () => {
+  if (result.value !== 3) {
+    expand_month.value = "";
+  }
+};
 </script>
 
 <template>
   <div class="row col-12">
-    
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>แบบรายงานการประเมินฯ</div>
       <!-- <q-space /> -->
-      <q-btn v-if="!status" size="12px" flat dense icon="mdi-download" color="primary">
+      <q-btn
+        v-if="!status"
+        size="12px"
+        flat
+        dense
+        icon="mdi-download"
+        color="primary"
+      >
         <q-tooltip>ดาวน์โหลด</q-tooltip>
         <q-menu>
           <q-list style="min-width: 150px">
             <q-item clickable v-close-popup @click="clickdownloadFile('pdf')">
-              <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+              <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 @click="clickdownloadFile('docx')">
-              <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+              <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>
@@ -193,7 +214,14 @@ const postData = async () => {
 
       <div v-if="action == 'edit'">
         <div v-if="status == false">
-          <q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
+          <q-btn
+            dense
+            flat
+            round
+            color="primary"
+            @click="edit()"
+            icon="mdi-pencil-outline"
+          >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
         </div>
@@ -201,8 +229,15 @@ const postData = async () => {
           <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
             <q-tooltip>ยกเลิก</q-tooltip>
           </q-btn>
-          <q-btn dense flat round class="q-ml-sm" color="public" @click="saveEdit(assignId)"
-            icon="mdi-content-save-outline">
+          <q-btn
+            dense
+            flat
+            round
+            class="q-ml-sm"
+            color="public"
+            @click="saveEdit(assignId)"
+            icon="mdi-content-save-outline"
+          >
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
@@ -212,8 +247,16 @@ const postData = async () => {
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :readonly="!status" :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :readonly="!status"
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -221,10 +264,23 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -232,8 +288,16 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply :readonly="!status"
-              borderless :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              :readonly="!status"
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -241,10 +305,23 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense :disable="!status" class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]">
+                <q-input
+                  outlined
+                  dense
+                  :disable="!status"
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -257,28 +334,78 @@ const postData = async () => {
       <div class="col-12 row q-mt-xs">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <q-select :rules="[
-              (val) =>
-                !!val ||
-                'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
-            ]" hide-bottom-space :options="options" class="col-xs-12 col-sm-6" dense borderless :disable="!status"
-              emit-value map-options option-label="label" option-value="value" outlined v-model="develop"
-              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+            <q-select
+              :rules="[
+                (val) =>
+                  !!val ||
+                  'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+              ]"
+              hide-bottom-space
+              :options="options"
+              class="col-xs-12 col-sm-6"
+              dense
+              borderless
+              :disable="!status"
+              emit-value
+              map-options
+              option-label="label"
+              option-value="value"
+              outlined
+              v-model="develop"
+              label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+            />
           </div>
           <div class="col-xs-12 col-sm-6">
-            <q-select :rules="[
-              (val) =>
-                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
-            ]" hide-bottom-space :options="optionsResult" class="col-xs-12 col-sm-6" :disable="!status" dense
-              borderless emit-value map-options option-label="label" option-value="value" outlined v-model="result"
-              label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+            <div class="row">
+              <q-select
+                class="col-sm-12"
+                :rules="[
+                  (val) =>
+                    !!val ||
+                    'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+                ]"
+                hide-bottom-space
+                :options="optionsResult"
+                :disable="!status"
+                dense
+                borderless
+                emit-value
+                map-options
+                option-label="label"
+                option-value="value"
+                outlined
+                v-model="result"
+                label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+                @update:model-value="selectRuslt"
+              />
+            </div>
+            <div class="row q-mt-xs" v-if="result === 3">
+              <q-input
+                outlined
+                dense
+                v-model="expand_month"
+                label="จำนวนเดือน"
+                :rules="[(val) => !!val || 'กรุณากรอกจำนวนเดือน']"
+                type="number"
+              />
+            </div>
           </div>
         </div>
       </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space dense borderless outlined :disable="!status" class="bg-white" type="textarea"
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']" />
+          <q-input
+            hide-bottom-space
+            dense
+            borderless
+            outlined
+            :disable="!status"
+            class="bg-white"
+            type="textarea"
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -292,11 +419,27 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="commander"
-              label="ชื่อ-นามสกุล" option-label="name" disable />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label="ชื่อ-นามสกุล"
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="chairman_dated" :locale="'th'" :readonly="!status" autoApply
-                borderless :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                :readonly="!status"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -304,10 +447,23 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="chairman_dated != null ? date2Thai(chairman_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -323,11 +479,27 @@ const postData = async () => {
             <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined label="ชื่อ-นามสกุล"
-              :disable="!status" :options="optionDirector" option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              label="ชื่อ-นามสกุล"
+              :disable="!status"
+              :options="optionDirector"
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
-                :readonly="!status" :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :readonly="!status"
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -335,12 +507,25 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director1_dated != null
-                      ? date2Thai(director1_dated)
-                      : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -356,11 +541,27 @@ const postData = async () => {
             <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined label="ชื่อ-นามสกุล"
-              :options="optionDirector" :disable="!status" option-label="name" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              label="ชื่อ-นามสกุล"
+              :options="optionDirector"
+              :disable="!status"
+              option-label="name"
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply
-                :readonly="!status" borderless :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -368,12 +569,25 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director2_dated != null
-                      ? date2Thai(director2_dated)
-                      : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    :disable="!status"
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index 88d7c3a87..523469728 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -16,14 +16,6 @@ const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
 const { messageError, success, showLoader, hideLoader, dialogConfirm } = mixin;
 
-const modal = ref<boolean>(false);
-const pagination = ref({
-  sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -33,8 +25,7 @@ const visibleColumns = ref<string[]>([
   "probation_no",
   "order_number",
   "probation_status",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
+]);
 // หัวตาราง
 const columns = ref<QTableProps["columns"]>([
   {
@@ -110,10 +101,8 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormMainProbation[]>([]);
-
 // หัวตาราง2
 const columns2 = ref<QTableProps["columns"]>([
   {
@@ -161,21 +150,26 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "status",
+    align: "left",
+    label: "สะถานะทดลองงาน",
+    sortable: true,
+    field: "status",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
 ]);
-
 // ข้อมูลตาราง (จำลอง)
 const rows2 = ref<FormMainProbation2[]>([]);
 
+const modal = ref<boolean>(false);
+const probationlist = ref<any>([]);
+
 onMounted(async () => {
   getpersonalList();
 });
 
-watch(modal, () => {
-  if (modal.value === true) {
-    fecthlistPersonal();
-  }
-});
-
 const getpersonalList = async () => {
   showLoader();
   await http
@@ -192,7 +186,7 @@ const getpersonalList = async () => {
         organization: item.organization,
         probation_no: item.probation_no,
         order_number: item.order_number,
-        probation_status: item.probation_status,
+        probation_status: statusProbationMain(item.probation_status),
       }));
     })
     .catch(() => {})
@@ -200,7 +194,6 @@ const getpersonalList = async () => {
       hideLoader();
     });
 };
-
 // fecth profile
 const fecthlistPersonal = async () => {
   showLoader();
@@ -215,45 +208,53 @@ const fecthlistPersonal = async () => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(() => {
-      hideLoader();
-    });
+    .finally(() => {});
+};
+const fecthlistProbation = async (id: string, data: any) => {
+  try {
+    probationlist.value = [];
+    const res = await http.post(
+      config.API.profileSearchNewOcIdType(id, "officer"),
+      {
+        criterias: data,
+      }
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
 };
 const findlist = async (id: string) => {
   let data = [
+    { criteriaType: "is_retire", criteriaValue: "false" },
+    { criteriaType: "is_probation", criteriaValue: "true" },
+  ];
+  let data2 = [
     { criteriaType: "is_retire", criteriaValue: "false" },
     { criteriaType: "is_probation", criteriaValue: "false" },
   ];
-  await http
-    .post(config.API.profileSearchNewOcIdType(id, "officer"), {
-      criterias: data,
-    })
-    .then((res) => {
-      rows2.value = res.data.result.map((e: any) => ({
-        id: e.id,
-        fullname: e.fullname,
-        position: e.position,
-        level: e.positionEmployeeLevel,
-        organizationOrganization: e.oc,
-      }));
-    });
-};
+  let response1 = await fecthlistProbation(id, data);
+  let response2 = await fecthlistProbation(id, data2);
 
-const clickDelete = (id: string) => {
-  $q.dialog({
-    title: "ยืนยันการลบข้อมูล",
-    message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
-    cancel: {
-      flat: true,
-      color: "negative",
-    },
-    persistent: true,
-  })
-    .onOk(async () => {})
-    .onCancel(() => {})
-    .onDismiss(() => {});
+  response1.forEach((e: any) =>
+    probationlist.value.push({ ...e, probation: true })
+  );
+  response2.forEach((e: any) =>
+    probationlist.value.push({ ...e, probation: false })
+  );
+  console.log(probationlist.value);
+  rows2.value = probationlist.value.map((e: any) => ({
+    id: e.id,
+    fullname: e.fullname,
+    position: e.position,
+    level: e.positionEmployeeLevel,
+    organizationOrganization: e.oc,
+    status: statusProbation(e.probation),
+  }));
+  modal.value = true;
 };
-
 const clickAdd = (id: string) => {
   dialogConfirm(
     $q,
@@ -279,25 +280,36 @@ const clickAdd = (id: string) => {
     "ยันยันการเพิ่มข้อมูล",
     "ต้องการเพิ่มข้อมูลนี้หรือไม่ ?"
   );
-  // $q.dialog({
-  //   title: "ยืนยันการเพิ่มข้อมูล",
-  //   message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
-  //   cancel: {
-  //     flat: true,
-  //     color: "negative",
-  //   },
-  //   persistent: true,
-  // })
-  //   .onOk(async () => {
-
-  // })
-  // .onCancel(() => {})
-  // .onDismiss(() => {});
 };
-
 const clickClose = async () => {
   modal.value = false;
 };
+const statusProbationMain = (val: string) => {
+  switch (val) {
+    case "1":
+      return "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ";
+    case "2":
+      return "พ้นการทดลองปฏิบัติหน้าที่ราชการ";
+    case "3":
+      return "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ";
+    case "4":
+      return "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากเปลี่ยนตำแหน่ง";
+    case "5":
+      return "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากลาออก";
+    case "6":
+      return "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากถึงแก่กรรม";
+    default:
+      return " ";
+  }
+};
+const statusProbation = (val: boolean) => {
+  switch (val) {
+    case true:
+      return "ทดลองงาน";
+    default:
+      return " ";
+  }
+};
 
 // ค้นหาในตาราง
 const filterKeyword = ref<string>("");
@@ -313,14 +325,30 @@ const resetFilter2 = () => {
   filterKeyword2.value = "";
   filterRef2.value.focus();
 };
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
+const pagination2 = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 const attrs = ref<any>(useAttrs());
-
 const paging = ref<boolean>(true);
 const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
+const paging2 = ref<boolean>(true);
+const paginationLabel2 = (start: string, end: string, total: string) => {
+  if (paging2.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 
 <template>
@@ -332,7 +360,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
       <div class="row col-12 q-col-gutter-sm">
         <div>
           <q-btn
-            @click="modal = true"
+            @click="fecthlistPersonal"
             size="12px"
             flat
             round
@@ -415,7 +443,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                 <div v-if="col.name == 'no'">
                   {{ props.rowIndex + 1 }}
                 </div>
-                <div v-else-if="col.name === 'probation_status'">
+                <!-- <div v-else-if="col.name === 'probation_status'">
                   <q-icon
                     size="20px"
                     v-if="props.row.probation_status === 'PENDING'"
@@ -451,7 +479,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
                       ? "ไม่ผ่านการทดลองงาน"
                       : ""
                   }}
-                </div>
+                </div> -->
                 <div v-else>
                   {{ col.value }}
                 </div>
@@ -517,8 +545,8 @@ const paginationLabel = (start: string, end: string, total: string) => {
               dense
               class="custom-header-table"
               v-bind="attrs"
-              :pagination-label="paginationLabel"
-              v-model:pagination="pagination"
+              :pagination-label="paginationLabel2"
+              v-model:pagination="pagination2"
             >
               <template v-slot:header="props">
                 <q-tr :props="props">
@@ -561,7 +589,7 @@ const paginationLabel = (start: string, end: string, total: string) => {
               </template>
               <template v-slot:pagination="scope">
                 <q-pagination
-                  v-model="pagination.page"
+                  v-model="pagination2.page"
                   active-color="primary"
                   color="dark"
                   :max="scope.pagesNumber"
diff --git a/src/modules/05_placement/components/probation/ProbationDetail.vue b/src/modules/05_placement/components/probation/ProbationDetail.vue
index 960f6a2eb..0a61ede7d 100644
--- a/src/modules/05_placement/components/probation/ProbationDetail.vue
+++ b/src/modules/05_placement/components/probation/ProbationDetail.vue
@@ -11,22 +11,24 @@ import config from "@/app.config";
 
 const $q = useQuasar(); //ใช้ noti quasar
 const mixin = useCounterMixin();
-const { messageError, success, showLoader, hideLoader, date2Thai } = mixin;
+const {
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+  date2Thai,
+  dialogConfirm,
+} = mixin;
 const router = useRouter();
 const route = useRoute();
 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",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
+const probation_statusold = ref<string>("");
 
 const visibleColumns = ref<string[]>([
   "no",
@@ -34,9 +36,7 @@ const visibleColumns = ref<string[]>([
   "date_finish",
   "mentors",
   "commander",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
-
-// หัวตาราง
+]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -84,31 +84,39 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
 ]);
-
-// ข้อมูลตาราง (จำลอง)
 const rows = ref<FormProbationDetail[]>([]);
 
-const clickAdd = () => {};
+const probation_statusOP = ref<any>([
+  {
+    id: "1",
+    label: "อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: "2",
+    label: "พ้นการทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่พ้นการทดลองปฏิบัติหน้าที่ราชการ",
+  },
+  {
+    id: "4",
+    label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากเปลี่ยนตำแหน่ง",
+  },
+  {
+    id: "5",
+    label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากลาออก",
+  },
+  {
+    id: "5",
+    label: "ยุติการทดลองปฏิบัติหน้าที่ราชการเนื่องจากถึงแก่กรรม",
+  },
+]);
 
-const clickSelect = (id: string) => {
-  router.push(`${route.fullPath}/${id}`);
-};
-
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<any>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  filterRef.value.focus();
-};
-
-const attrs = ref<any>(useAttrs());
-
-const paging = ref<boolean>(true);
-const paginationLabel = (start: string, end: string, total: string) => {
-  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
-  else return start + "-" + end + " ใน " + total;
-};
+onMounted(async () => {
+  await getpersonalList();
+  await getAssignList();
+});
 const getAssignList = async () => {
   showLoader();
   await http
@@ -141,17 +149,65 @@ const getpersonalList = async () => {
       position_level.value = data.position_level;
       organization.value = data.organization;
       probation_status.value = data.probation_status;
+      probation_statusold.value = data.probation_status;
     })
     .catch(() => {})
     .finally(() => {
       hideLoader();
     });
 };
+const selectStatus = async () => {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .put(config.API.changestatusProbations(personalId.value), {
+          status: probation_status.value,
+        })
+        .then((res) => {
+          success($q, "แก้ไขสถานะสำเร็จ");
+        })
+        .catch((err) => {
+          messageError($q, err);
+          probation_status.value = probation_statusold.value;
+        })
+        .finally(() => {
+          hideLoader();
+          getpersonalList();
+        });
+    },
+    "ยืนยันการเปลี่ยนสถานะทดลองงาน",
+    "ต้องการเปลี่ยนสถานะทดลองงานข้อมูลนี้หรือไม่ ?",
+    () => {
+      probation_status.value = probation_statusold.value;
+    }
+  );
+};
+const clickSelect = (id: string) => {
+  router.push(`${route.fullPath}/${id}`);
+};
 
-onMounted(async () => {
-  await getpersonalList();
-  await getAssignList();
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<any>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  filterRef.value.focus();
+};
+
+const attrs = ref<any>(useAttrs());
+const pagination = ref({
+  sortBy: "desc",
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
 });
+const paging = ref<boolean>(true);
+const paginationLabel = (start: string, end: string, total: string) => {
+  if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
+  else return start + "-" + end + " ใน " + total;
+};
 </script>
 
 <template>
@@ -210,7 +266,18 @@ onMounted(async () => {
           <div class="col-12">
             <div class="col-12 text-top">สถานะการทดลองงาน</div>
             <div class="col-12 text-detail">
-              <q-icon
+              <q-select
+                dense
+                borderless
+                v-model="probation_status"
+                :options="probation_statusOP"
+                option-label="label"
+                option-value="id"
+                @update:model-value="selectStatus"
+                emit-value
+                map-options
+              />
+              <!-- <q-icon
                 size="20px"
                 v-if="probation_status === 'PENDING'"
                 name="mdi-timer-sand"
@@ -245,7 +312,7 @@ onMounted(async () => {
                   : probation_status === "PASS"
                   ? "ผ่านการทดลองงาน"
                   : ""
-              }}
+              }} -->
             </div>
           </div>
         </div>
diff --git a/src/modules/05_placement/components/probation/SummarySurvey.vue b/src/modules/05_placement/components/probation/SummarySurvey.vue
index 6cce8aba7..520aac35e 100644
--- a/src/modules/05_placement/components/probation/SummarySurvey.vue
+++ b/src/modules/05_placement/components/probation/SummarySurvey.vue
@@ -99,7 +99,7 @@ onMounted(() => {
     <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">
         <q-input
@@ -117,7 +117,7 @@ onMounted(() => {
     <div class="col-12 row q-mt-md">
       <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">
         <q-input
@@ -136,7 +136,7 @@ onMounted(() => {
     <div class="col-12 row q-mt-md">
       <div class="text-top0 items-center">
         <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+        ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
       </div>
       <q-space />
       <q-rating
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index 5f16b8424..0160e9b7f 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -190,7 +190,6 @@ export const usePlacementDataStore = defineStore("placement", () => {
     DataUpdateMain,
   };
 });
-
 export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
   interface placementOrder {
     mappingPosition: { columns: String[] };
@@ -287,7 +286,6 @@ export const useOrderPlacementDataStore = defineStore("placementOrder", () => {
     DataMainOrder,
   };
 });
-
 export const useProbationDataStore = defineStore("probationDataStore", () => {
   const ratingColors = ref<string[]>([
     "light-blue-3",
@@ -311,7 +309,6 @@ export const useProbationDataStore = defineStore("probationDataStore", () => {
     setStepOrder,
   };
 });
-
 export const useTransferDataStore = defineStore("transferDataStore", () => {
   const statusText = (val: string) => {
     switch (val) {