From 4a5990dacab368dc8f10df73ea29f95eaeccdef8 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 24 Aug 2023 22:26:12 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1=E0=B8=94=E0=B8=B2=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=99=E0=B9=8C=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94=E0=B9=80?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=AA=E0=B8=B2=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/probation/FormAssign.vue       | 150 +++++----
 .../probation/FormEvaluation/FormReport.vue   | 309 ++++--------------
 .../components/probation/MainDetail.vue       |   2 +-
 .../components/probation/SummaryScore.vue     |   4 +-
 4 files changed, 159 insertions(+), 306 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormAssign.vue b/src/modules/05_placement/components/probation/FormAssign.vue
index f24c4dfbe..b24ce1112 100644
--- a/src/modules/05_placement/components/probation/FormAssign.vue
+++ b/src/modules/05_placement/components/probation/FormAssign.vue
@@ -558,12 +558,12 @@ const putData = (id: string) => {
     },
   ];
   if (caretaker2.value) {
-  assign_director.push({
-    personal_id: caretaker2.value.id,
-    role: "mentor",
-    dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
-  });
-}
+    assign_director.push({
+      personal_id: caretaker2.value.id,
+      role: "mentor",
+      dated: date3.value instanceof Date ? dateToISO(date3.value) : dateToISO(new Date(date3.value)),
+    });
+  }
   const data = {
     personalId: GUID,
     fullname: fullname.value,
@@ -765,9 +765,27 @@ watch(knowledge.value, () => {
           เพิ่มแบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
         </div>
         <div v-else class="col-12 row q-gutter-md">
-          <div>แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ</div>
+          <div>
+            แบบมอบหมายงานการทดลองปฏิบัติหน้าที่ราชการ
+          </div>
           <!-- <q-space /> -->
-          <div v-if="status == false">
+          <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>
+                  <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+                  <q-item-section>ไฟล์ .PDF</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup>
+                  <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+                  <q-item-section>ไฟล์ .docx</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+
+          <div v-if="!status">
             <q-btn dense flat round color="primary" @click="edit()" icon="mdi-pencil-outline">
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
@@ -776,7 +794,8 @@ watch(knowledge.value, () => {
             <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
               <q-tooltip>ยกเลิก</q-tooltip>
             </q-btn>
-            <q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)" icon="mdi-content-save-outline">
+            <q-btn dense flat class="q-ml-md" round color="public" @click="saveEdit(assignId)"
+              icon="mdi-content-save-outline">
               <q-tooltip>บันทึกข้อมูล</q-tooltip>
             </q-btn>
           </div>
@@ -807,7 +826,8 @@ watch(knowledge.value, () => {
                     <div class="col-xs-12 col-sm-4">
                       <q-select :rules="[(val) => !!val || 'กรุณาเลือกระยะเวลา']" hide-bottom-space :options="monthOp"
                         class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless option-label="label"
-                        option-value="value" :outlined="status == true" v-model="monthSelect" :label="`ระยะเวลากี่เดือน`" />
+                        option-value="value" :outlined="status == true" v-model="monthSelect"
+                        :label="`ระยะเวลากี่เดือน`" />
                     </div>
                     <div class="col-xs-12 col-sm-4">
                       <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
@@ -837,10 +857,10 @@ watch(knowledge.value, () => {
                           {{ parseInt(value + 543) }}
                         </template>
                         <template #trigger>
-                          <q-input hide-bottom-space dense borderless :outlined="status == true" readonly class="full-width datepicker"
-                            :model-value="date_finish != null
-                                ? date2Thai(date_finish)
-                                : undefined
+                          <q-input hide-bottom-space dense borderless :outlined="status == true" readonly
+                            class="full-width datepicker" :model-value="date_finish != null
+                              ? date2Thai(date_finish)
+                              : undefined
                               " :label="`${'ถึงวันที่'}`" clearable @clear="clearDateExam2">
                           </q-input>
                         </template>
@@ -864,20 +884,18 @@ watch(knowledge.value, () => {
                   :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
                   dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select clearable 
-                  :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
-                  hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
-                  :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
+                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
+                  borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
               </div>
               <div v-else class="col-12 row q-col-gutter-md">
                 <q-select :rules="[(val) => !!val || 'กรุณาเลือกผู้ดูเเล']" option-value="id"
                   :options="filtermantor(OPcaretaker, [caretaker2])" class="col-xs-12 col-sm-6" :readonly="status != true"
                   dense hide-bottom-space borderless :outlined="status == true" v-model="caretaker1"
                   :label="`ผู้ดูแลคนที่ 1`" option-label="name" />
-                <q-select  clearable
-                  :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
-                  hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense borderless
-                  :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
+                <q-select clearable :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                  option-label="name" hide-bottom-space class="col-xs-12 col-sm-6" :readonly="status != true" dense
+                  borderless :outlined="status == true" v-model="caretaker2" :label="`ผู้ดูแลคนที่ 2`" />
               </div>
             </div>
             <div class="col-12">
@@ -937,9 +955,10 @@ watch(knowledge.value, () => {
                     <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="id" map-options :rules="index < 3? [(val) => !!val || 'กรุณาเลือกความสามารถ']: []" 
-                          hide-bottom-space :options="OPknowledge" class="bg-white" :readonly="status != true" dense
-                          borderless :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
+                          " option-value="id" map-options
+                          :rules="index < 3 ? [(val) => !!val || 'กรุณาเลือกความสามารถ'] : []" hide-bottom-space
+                          :options="OPknowledge" class="bg-white" :readonly="status != true" dense borderless
+                          :outlined="status == true" v-model="knowledge[index]" :label="`ความรู้ความสามารถในการปฏิบัติงาน ${index + 1
                             }`" />
                       </div>
                       <div v-if="index > 2" class="col-xs-12 col-sm-1 flex justify-center items-center">
@@ -1090,10 +1109,11 @@ watch(knowledge.value, () => {
                     <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="OPcomputer" class="bg-white" :readonly="status != true" dense borderless
-                          map-options :outlined="status == true" v-model="skill" label="ด้านที่ 1">
+                          `${item.title} - ${item.level_description}`
+                          " option-value="id" hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPcomputer"
+                          class="bg-white" :readonly="status != true" dense borderless map-options
+                          :outlined="status == true" v-model="skill" label="ด้านที่ 1">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1103,10 +1123,11 @@ watch(knowledge.value, () => {
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select ellipsis-2-lines :option-label="(item) =>
-                            `${item.title} - ${item.level_description}`
-                          " option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" 
-                          :options="OPenglish" class="bg-white" :readonly="status != true" dense borderless
-                          :outlined="status == true" v-model="skill2" label="ด้านที่ 2">
+                          `${item.title} - ${item.level_description}`
+                          " option-value="id" map-options hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPenglish"
+                          class="bg-white" :readonly="status != true" dense borderless :outlined="status == true"
+                          v-model="skill2" label="ด้านที่ 2">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1116,10 +1137,11 @@ watch(knowledge.value, () => {
                       </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="OPinfomation" class="bg-white" :readonly="status != true" dense map-options
-                          borderless :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
+                          `${item.title} - ${item.level_description}`
+                          " option-value="id" hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPinfomation"
+                          class="bg-white" :readonly="status != true" dense map-options borderless
+                          :outlined="status == true" v-model="skill3" label="ด้านที่ 3">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1129,10 +1151,11 @@ watch(knowledge.value, () => {
                       </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="OPresourse" class="bg-white" :readonly="status != true" dense map-options
-                          borderless :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
+                          `${item.title} - ${item.level_description}`
+                          " option-value="id" hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกความรู้ความสามารถ',]" :options="OPresourse"
+                          class="bg-white" :readonly="status != true" dense map-options borderless
+                          :outlined="status == true" v-model="skill4" label="ด้านที่ 4">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1211,8 +1234,8 @@ watch(knowledge.value, () => {
 
                       <div class="col-xs-12 col-sm-6">
                         <q-select hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะ']" :options="filterMain(OPmain, [main, main2, main3, main4])
-                          " :option-label="(item) => `${item.title} - ${item.description}`" 
-                          option-value="id" class="bg-white" :readonly="status != true" dense map-options borderless
+                          " :option-label="(item) => `${item.title} - ${item.description}`" option-value="id"
+                          class="bg-white" :readonly="status != true" dense map-options borderless
                           :outlined="status == true" v-model="main5" label="ตัวที่ 5">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
@@ -1228,10 +1251,10 @@ watch(knowledge.value, () => {
                     <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="filterData(OPgroup, [group2, group3])" class="bg-white"
-                          :readonly="status != true" dense borderless map-options :outlined="status == true"
-                          v-model="group" label="ตัวที่ 1">
+                          " option-value="id" hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
+                          :options="filterData(OPgroup, [group2, group3])" class="bg-white" :readonly="status != true"
+                          dense borderless map-options :outlined="status == true" v-model="group" label="ตัวที่ 1">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1241,10 +1264,10 @@ watch(knowledge.value, () => {
                       </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="filterData(OPgroup, [group, group3])" class="bg-white"
-                          :readonly="status != true" dense borderless map-options :outlined="status == true"
-                          v-model="group2" label="ตัวที่ 2">
+                          " option-value="id" hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
+                          :options="filterData(OPgroup, [group, group3])" class="bg-white" :readonly="status != true"
+                          dense borderless map-options :outlined="status == true" v-model="group2" label="ตัวที่ 2">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1254,10 +1277,10 @@ watch(knowledge.value, () => {
                       </div>
                       <div class="col-xs-12 col-sm-6">
                         <q-select :option-label="(item) => `${item.title} - ${item.description}`
-                          " option-value="id" map-options hide-bottom-space :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]" 
-                          :options="filterData(OPgroup, [group, group2])" class="bg-white"
-                          :readonly="status != true" dense borderless :outlined="status == true" v-model="group3"
-                          label="ตัวที่ 3">
+                          " option-value="id" map-options hide-bottom-space
+                          :rules="[(val) => !!val || 'กรุณาเลือกสมรรถนะประจํากลุ่มงาน',]"
+                          :options="filterData(OPgroup, [group, group2])" class="bg-white" :readonly="status != true"
+                          dense borderless :outlined="status == true" v-model="group3" label="ตัวที่ 3">
                           <template v-slot:selected-item="scope">
                             <div class="ellipsis-2-lines">
                               {{ scope.opt.title }} -
@@ -1597,12 +1620,12 @@ watch(knowledge.value, () => {
                     </template>
                   </datepicker>
                 </div>
-                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
+                <q-select clearable v-if="status == true" :options="filtermantor(OPcaretaker, [caretaker1])"
+                  option-value="id" option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense
+                  borderless :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
+                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id"
                   option-label="name" class="col-xs-12 col-sm-8" :readonly="status != true" dense borderless
                   :outlined="status == true" v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
-                <q-select clearable v-else :options="filtermantor(OPcaretaker, [caretaker1])" option-value="id" option-label="name"
-                  class="col-xs-12 col-sm-8" :readonly="status != true " dense borderless :outlined="status == true"
-                  v-model="caretaker2" label="ผู้ดูแลคนที่ 2" />
                 <div class="col-xs-12 col-sm-4">
                   <datepicker menu-class-name="modalfix" v-model="date3" :locale="'th'" autoApply borderless
                     :enableTimePicker="false" week-start="0" :readonly="status != true | !caretaker2">
@@ -1613,12 +1636,9 @@ watch(knowledge.value, () => {
                       {{ parseInt(value + 543) }}
                     </template>
                     <template #trigger>
-                      <q-input  hide-bottom-space
-                      
-                      :disable="!caretaker2"
-                        :readonly="status != true" dense s borderless :outlined="status == true"
-                        class="full-width datepicker" :model-value="date3 != null ? date2Thai(date3) : null"
-                        label="ลงวันที่">
+                      <q-input hide-bottom-space :disable="!caretaker2" :readonly="status != true" dense s borderless
+                        :outlined="status == true" class="full-width datepicker"
+                        :model-value="date3 != null ? date2Thai(date3) : null" label="ลงวันที่">
                         <template v-slot:prepend>
                           <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
                           </q-icon>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 930202bf7..b2b27ba48 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -156,16 +156,25 @@ const postData = async () => {
     <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-tooltip>ดาวน์โหลด</q-tooltip>
+        <q-menu>
+          <q-list style="min-width: 150px">
+            <q-item clickable v-close-popup>
+              <q-item-section avatar><q-icon color="red" name="mdi-file-pdf" /></q-item-section>
+              <q-item-section>ไฟล์ .PDF</q-item-section>
+            </q-item>
+            <q-item clickable v-close-popup>
+              <q-item-section avatar><q-icon color="blue" name="mdi-file-word" /></q-item-section>
+              <q-item-section>ไฟล์ .docx</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-btn>
+
       <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>
@@ -173,15 +182,8 @@ 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>
@@ -191,16 +193,8 @@ 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>
@@ -208,23 +202,10 @@ 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,16 +213,8 @@ 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>
@@ -249,23 +222,10 @@ 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>
@@ -278,64 +238,28 @@ 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="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
-            />
-          </div>     
+            <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="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
-            />
+            <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>
         </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>
 
@@ -349,27 +273,11 @@ 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>
@@ -377,23 +285,10 @@ 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>
@@ -409,27 +304,11 @@ 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>
@@ -437,25 +316,12 @@ 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>
@@ -471,27 +337,11 @@ 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>
@@ -499,25 +349,12 @@ 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>
@@ -531,11 +368,7 @@ const postData = async () => {
 
     <q-toolbar class="text-primary" v-if="action == 'add'">
       <q-space />
-      <q-btn
-        label="บันทึก"
-        color="secondary"
-        @click="savaForm"
-      />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index fa2aee5d4..2ce10c17c 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -111,7 +111,7 @@ const personalId = ref<string>(route.params.personalId.toString());
             <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
               :active="activeTab == 'tab7'" @click="activeTab = 'tab7'">
               <q-item-section>
-                แบบสํารวจความคิดเห็น
+                แบบสํารวจ<br/>ความคิดเห็น
               </q-item-section>
             </q-item>
 
diff --git a/src/modules/05_placement/components/probation/SummaryScore.vue b/src/modules/05_placement/components/probation/SummaryScore.vue
index 9004ac997..20ab6fe58 100644
--- a/src/modules/05_placement/components/probation/SummaryScore.vue
+++ b/src/modules/05_placement/components/probation/SummaryScore.vue
@@ -82,7 +82,7 @@ onMounted(() => {
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
       <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
       <!-- <q-space /> -->
-      <div v-if="action == 'edit'">
+      <!-- <div v-if="action == 'edit'">
         <div v-if="status == false">
           <q-btn
             dense
@@ -111,7 +111,7 @@ onMounted(() => {
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </div>
-      </div>
+      </div> -->
     </div>
     <div class="row col-12 q-gutter-lg">
       <q-card