From 286236dc6c674b7dd7f862663f01388c5a6cfe39 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Fri, 28 Jul 2023 10:08:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=87=E0=B8=B2=E0=B8=99=20=E0=B9=81=E0=B8=81=E0=B9=89?=
 =?UTF-8?q?=E0=B9=84=E0=B8=82=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B9=80=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=99=E0=B8=9C=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/FormReport.vue   | 560 +++++++-----------
 .../probation/FormEvaluation/Header.vue       |   8 +-
 .../FormEvaluation/Template2Format2.vue       |   4 +-
 .../probation/FormEvaluation/Template3.vue    |  14 +-
 4 files changed, 238 insertions(+), 348 deletions(-)

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 15c6ee09e..6be0a8872 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -1,348 +1,248 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
-import { useQuasar } from "quasar";
-import { useProbationDataStore } from "@/modules/05_placement/store";
+import { ref } from "vue";
+import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const Part2 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
-    )
-);
-const Part3 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
-    )
-);
-const Footer = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
-    )
-);
-
 const $q = useQuasar();
-const probationStore = useProbationDataStore();
-const { ratingColors } = probationStore;
-
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
-];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
-];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
-
+const myForm = ref<QForm>();
+const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
+const { date2Thai, notifyError } = mixin;
+const develop = ref<number>();
+const result = ref<number>();
+
+// part new
+const date_start = ref<Date>(new Date("10-10-2023"));
+const date_finish = ref<Date>();
+const reson = ref<string>("");
+
+const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
+const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+
+const director_id = ref<any>(null);
+const director_dated = ref<any>();
+const director_id2 = ref<any>(null);
+const director_dated2 = ref<any>();
+const director_id3 = ref<any>(null);
+const director_dated3 = ref<any>();
+const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+
+const savaForm = async () => {
+  await myForm.value!.validate().then((result: boolean) => {
+    if (result) {
+      $q.dialog({
+        title: "ยืนยันการบันทึกข้อมูล",
+        message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+        cancel: {
+          flat: true,
+          color: "negative",
+        },
+        persistent: true,
+      })
+        .onOk(async () => {
+          postData();
+
+        })
+        .onCancel(() => { })
+        .onDismiss(() => { });
+    }
+  });
+
+};
+
+const postData = async () => {
+  const data = await {
+    date_start: date_start.value,
+    date_finish: date_finish.value,
+    director_id: director_id.value,
+    director_dated: director_dated.value,
+    director_id2: director_id2.value,
+    director_dated2: director_dated2.value,
+    director_id3: director_id3.value,
+    director_dated3: director_dated3.value,
+  }
+
+  console.log("postData===>", data)
+};
 </script>
 
 <template>
-  <div class="row col-12 q-gutter-lg no-margin">
+  <div class="row col-12 q-mr-md">
+    <q-form ref="myForm">
 
-    <div class="col-12 row">
-      <div class="col-12 text-top0 row items-center">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-        ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      <div 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
+              :enableTimePicker="false" week-start="0">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input outlined dense class="full-width datepicker" :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>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
+              :enableTimePicker="false" week-start="0">
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input outlined dense class="full-width datepicker" :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>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
       </div>
-      <div class="col-12 text-top0 row items-center">
-        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
-        ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
-        ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+
+      <div class="col-12 row q-mt-xs">
+        <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 option-label="label" outlined v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+        </div>
       </div>
-      <div class="col-12 q-pt-md">
+      <div class="col-12 row q-mt-lg">
+        <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" dense borderless option-label="label" outlined
+            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
+
+        </div>
+      </div>
+
+      <div class="col-12 row q-mt-lg">
+        <div class="col-12">
+          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
+            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+        </div>
+      </div>
+
+      <div class="col-12 q-mt-lg">
         <q-separator size="3px" color="grey-2" />
       </div>
-    </div>
 
-    <div class="col-12 row">
-      <div class="col-12 text-top0 items-center">
-        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
-        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      <div class="row col-12 q-gutter-lg q-mt-sm">
+        <div class="col-12 row">
+          <div class="col-12 text-top2 row items-center">
+            ประธานคณะกรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
+              label="เลือกประธานคณะกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-12 row q-mt-xs">
+          <div class="col-12 text-top2 row items-center">
+            กรรมการ
+          </div>
+          <div class="col-12 row q-col-gutter-md">
+            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
+              label="เลือกกรรมการ" />
+            <div class="col-xs-12 col-sm-4">
+              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
+                :enableTimePicker="false" week-start="0">
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
+                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                    <template v-slot:prepend>
+                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
       </div>
-    </div>
-    <div class="col-12 row no-margin">
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.1. ความรู้ความสามารถ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.3. สมมรถนะ</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section class="q-ml-md">
-              <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
-                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                  ]" />
-              </q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-    </div>
-
-    <!-- Part 2 -->
-    <Part2 />
-
-    <!-- Part 3 -->
-    <Part3 />
-
-    <!-- Footer -->
-    <Footer />
+      <q-toolbar class="text-primary">
+        <q-space />
+        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      </q-toolbar>
+    </q-form>
   </div>
 </template>
 
@@ -366,4 +266,4 @@ const period = ref<number>(1);
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
index 579b4e5c6..5e87f4d44 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -27,7 +27,7 @@ watch(tabHead, () => {
           indicator-color="grey-1"
           class="text-grey-7"
         >
-          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-tab name="save1" label="ครั้งที่ 1" />
           <q-btn
             size="12px"
             flat
@@ -55,7 +55,7 @@ watch(tabHead, () => {
             </q-menu>
           </q-btn>
 
-          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-tab name="save2" label="ครั้งที่ 2" />
           <q-btn
             size="12px"
             flat
@@ -82,7 +82,7 @@ watch(tabHead, () => {
               </q-list>
             </q-menu>
           </q-btn>
-          <!-- <q-tab name="save3" label="บันทึกผลครั้งที่ 3" />
+          <!-- <q-tab name="save3" label="ครั้งที่ 3" />
             <q-btn size="12px" flat dense icon="mdi-download" :disable="tab !== 'save3'"
                 :color="tab !== 'save3' ? 'grey' : 'add'">
                 <q-tooltip>ดาวน์โหลด</q-tooltip>
@@ -104,7 +104,7 @@ watch(tabHead, () => {
         </q-tabs>
         <div>
           <q-btn color="blue" flat dense icon="mdi-plus">
-            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+            <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
       </div>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 228f8de5a..3e5e91bdf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -21,9 +21,9 @@ const FormEvaluateScore = defineAsyncComponent(
         <FormEvaluateScore />
       </q-tab-panel>
 
-      <q-tab-panel name="save2">
+      <!-- <q-tab-panel name="save2">
         <FormEvaluateScore />
-      </q-tab-panel>
+      </q-tab-panel> -->
     </q-tab-panels>
   </q-page-container>
 </template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
index e0adc68a6..fb54fdd4d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
@@ -14,17 +14,7 @@ const FormReport = defineAsyncComponent(
 </script>
 
 <template>
-  <Header :change-tab="changeTab" />
-
-  <q-page-container>
-    <q-tab-panels v-model="tab" animated>
-      <q-tab-panel name="save1">
+  <div class="col-12 q-ma-lg">
         <FormReport />
-      </q-tab-panel>
-
-      <q-tab-panel name="save2">
-        <FormReport />
-      </q-tab-panel>
-    </q-tab-panels>
-  </q-page-container>
+  </div>
 </template>
\ No newline at end of file