From 457e76f237a3a08a7ddbd72fe38274d61b94a44e Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Thu, 27 Jul 2023 17:13:38 +0700
Subject: [PATCH] update form probation

---
 .../probation/FormEvaluation/FormEvaluate.vue |   4 +-
 .../FormEvaluation/FormEvaluateScore.vue      | 789 ++++++++++++++++++
 .../FormEvaluation/Template2Format2.vue       |  29 +
 .../components/probation/MainDetail.vue       | 132 ++-
 4 files changed, 869 insertions(+), 85 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 1aff7102a..b78d8d0bf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -363,7 +363,7 @@ const putformData = () => {
         </q-list>
       </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+      <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>
@@ -455,7 +455,7 @@ const putformData = () => {
         </q-list>
       </q-card>
 
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section class="q-ml-md">
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
new file mode 100644
index 000000000..b99c70027
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -0,0 +1,789 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+
+const mixin = useCounterMixin();
+const { date2Thai, notifyError } = mixin;
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+// part 1
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false);
+const achievement_other = ref<any>([{ text: "", level: 0 }]);
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>([{ text: "", level: 0 }]);
+const behavio_strength_desc = ref<string>("");
+const behavio_inprove_desc = ref<string>("");
+// part 3
+const orientation = ref<num>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+//rules
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  let hasError = false;
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+  if (
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavio_strength_desc.value === "" ||
+    behavio_inprove_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === undefined ||
+        behavio_orther.value.text == "" ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavio_orther: behavio_orther.value,
+    behavio_strength_desc: behavio_strength_desc.value,
+    behavio_inprove_desc: behavio_inprove_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        ระหว่างวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 q-pt-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+    </div>
+
+    <div class="col-12 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>
+    <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="learn_level"
+                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="apply_level"
+                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="success_level"
+                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-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="achievement_other.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="achievement_other.level"
+                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 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.1 ความประพฤติ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_1" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="conduct_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.2 ความมีคุณธรรมจริยธรรม
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_2" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="moral_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.3 การรักษาวินัย
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_3" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="discipline_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.4 อื่นๆ
+          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+        </div>
+        <q-card
+          v-if="etc2"
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>
+                  <q-input
+                    v-model="behavio_orther.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="behavio_orther.level"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+      <!-- <FormComment /> -->
+      <div class="row col-12 q-gutter-lg no-margin">
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            จุดเด่น (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            outlined
+            dense
+            v-model="behavio_strength_desc"
+            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules
+            type="textarea"
+            label="กรอกจุดเด่น"
+            hide-bottom-space
+            :row="5"
+            :rules="behavio_strengthRules"
+            ref="behavio_strengthRef"
+          />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            outlined
+            dense
+            v-model="behavio_inprove_desc"
+            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules
+            type="textarea"
+            hide-bottom-space
+            label="กรอกสิ่งที่ควรปรับปรุง"
+            :row="5"
+            :rules="behavio_inproveRules"
+            ref="behavio_inproveRef"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- Part 3 -->
+    <!-- <Part3 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>1. การปฐมนิเทศ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label
+                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                >
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <!-- <Footer /> -->
+    <q-toolbar class="text-primary">
+      <q-space />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+    </q-toolbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
new file mode 100644
index 000000000..228f8de5a
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+const tab = ref<string>("save1");
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal
+}
+const Header = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormEvaluateScore = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
+)
+</script>  
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormEvaluateScore />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormEvaluateScore />
+      </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/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 1a58e429e..0eade7fc3 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -11,6 +11,9 @@ const TabsTemplate1 = defineAsyncComponent(
 const TabsTemplate2 = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
 );
+const TabsTemplate2Format2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue")
+);
 const TabsTemplate3 = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
 );
@@ -32,109 +35,70 @@ const activeTab = ref<string>("tab1");
 <template>
   <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
   <q-card flat bordered class="col-12">
-    <q-layout
-      view="hHh Lpr lff"
-      container
-      class="shadow-2 rounded-borders page-relative"
-      style="height: 82vh"
-    >
+    <q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders page-relative" style="height: 82vh">
       <q-header class="bg-grey-1">
         <q-toolbar>
-          <div
-            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
-          >
-            <q-btn
-              icon="mdi-arrow-left"
-              unelevated
-              round
-              dense
-              flat
-              color="primary"
-              class="q-mr-sm"
-              @click="router.go(-1)"
-            />
+          <div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
+            <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+              @click="router.go(-1)" />
             การทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
           </div>
         </q-toolbar>
         <q-separator />
       </q-header>
-      <q-drawer
-        v-model="drawer"
-        show-if-above
-        :width="150"
-        :breakpoint="500"
-        class="bg-grey-1"
-        bordered
-      >
+      <q-drawer v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
         <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
           <q-list class="text-grey-7">
-            <q-item
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              class="q-py-sm"
-              dense
-              v-ripple
-              :active="activeTab == 'tab1'"
-              @click="activeTab = 'tab1'"
-            >
-              <q-item-section avatar style="min-width: 40px">
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab1'" @click="activeTab = 'tab1'">
+              <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file" />
-              </q-item-section>
+              </q-item-section> -->
 
-              <q-item-section> แบบมอบหมายงาน</q-item-section>
+              <q-item-section> แบบมอบหมายงานฯ</q-item-section>
             </q-item>
 
-            <q-item
-              dense
-              class="q-py-sm"
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              v-ripple
-              :active="activeTab == 'tab2'"
-              @click="activeTab = 'tab2'"
-            >
-              <q-item-section avatar style="min-width: 40px">
+            <q-item dense class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium" clickable v-ripple
+              :active="activeTab == 'tab2'" @click="activeTab = 'tab2'">
+              <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-edit" />
-              </q-item-section>
+              </q-item-section> -->
 
               <q-item-section>
-                บันทึกผล
+                แบบบันทึกผล
               </q-item-section>
             </q-item>
 
-            <q-item
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              class="q-py-sm"
-              dense
-              v-ripple
-              :active="activeTab == 'tab3'"
-              @click="activeTab = 'tab3'"
-            >
-              <q-item-section avatar style="min-width: 40px">
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab3'" @click="activeTab = 'tab3'">
+              <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-star" />
-              </q-item-section>
+              </q-item-section> -->
 
               <q-item-section>
-                ประเมินผล
+                แบบประเมินผล (ผู้บังคับบัญชา)
               </q-item-section>
             </q-item>
 
-            <q-item
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              class="q-py-sm"
-              dense
-              v-ripple
-              :active="activeTab == 'tab4'"
-              @click="activeTab = 'tab4'"
-            >
-              <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file-chart" />
-              </q-item-section>
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab4'" @click="activeTab = 'tab4'">
+              <!-- <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-star" />
+              </q-item-section> -->
 
               <q-item-section>
-                รายงานการประเมินผล
+                แบบประเมินผล (คณะกรรมการ)
+              </q-item-section>
+            </q-item>
+
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab5'" @click="activeTab = 'tab5'">
+              <!-- <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-chart" />
+              </q-item-section> -->
+
+              <q-item-section>
+                แบบรายงานการประเมินฯ
               </q-item-section>
             </q-item>
           </q-list>
@@ -142,22 +106,24 @@ const activeTab = ref<string>("tab1");
       </q-drawer>
       <q-page-container>
         <q-layout view="hHh Lpr lFf" container style="height: 72vh">
-          <q-tab-panels
-            v-model="activeTab"
-            animated
-            class="shadow-2 rounded-borders"
-            vertical
-          >
+          <q-tab-panels v-model="activeTab" animated class="shadow-2 rounded-borders" vertical>
             <q-tab-panel name="tab1">
               <ProbationFormAssign />
             </q-tab-panel>
 
-            <q-tab-panel name="tab2"> <TabsTemplate1 /></q-tab-panel>
+            <q-tab-panel name="tab2">
+              <TabsTemplate1 />
+            </q-tab-panel>
 
             <q-tab-panel name="tab3">
               <TabsTemplate2 />
             </q-tab-panel>
+
             <q-tab-panel name="tab4">
+              <TabsTemplate2Format2 />
+            </q-tab-panel>
+
+            <q-tab-panel name="tab5">
               <TabsTemplate3 />
             </q-tab-panel>
           </q-tab-panels>