From afc9be8ab8daa994ff9f2671062e915c19a1b1d3 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Wed, 26 Jul 2023 15:37:34 +0700
Subject: [PATCH 1/3] =?UTF-8?q?update=20structure=20=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../probation/FormEvaluation/Footer.vue       |  83 ++++
 .../probation/FormEvaluation/FormEvaluate.vue | 369 ++++++++++++++
 .../probation/FormEvaluation/FormReport.vue   | 369 ++++++++++++++
 .../FormEvaluation/FormSaveResult.vue         | 469 ++++++++++++++++++
 .../probation/FormEvaluation/Header.vue       | 115 +++++
 .../FormEvaluation/SubForm/Part1.vue          | 432 ++++++++++++++++
 .../FormEvaluation/SubForm/Part1Template2.vue | 312 ++++++++++++
 .../FormEvaluation/SubForm/Part2.vue          | 289 +++++++++++
 .../FormEvaluation/SubForm/Part3.vue          | 131 +++++
 .../SubForm/PartHighlightImprove.vue          |  45 ++
 .../probation/FormEvaluation/Template1.vue    |  31 ++
 .../probation/FormEvaluation/Template2.vue    |  29 ++
 .../probation/FormEvaluation/Template3.vue    |  30 ++
 .../components/probation/MainDetail.vue       |  67 +--
 14 files changed, 2743 insertions(+), 28 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Header.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Template3.vue

diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Footer.vue b/src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
new file mode 100644
index 000000000..20f98ed57
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Footer.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <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="Autherise"
+          outlined
+          :options="option"
+          label="ผู้บังคับบัญชา"
+        />
+        <div class="col-xs-12 col-sm-4">
+          <datepicker
+            menu-class-name="modalfix"
+            v-model="dateAutherise"
+            :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="
+                  dateAutherise != null ? date2Thai(dateAutherise) : 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>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+const mixin = useCounterMixin();
+const { date2Thai } = mixin;
+const Autherise = ref<any>(null);
+
+const dateAutherise = ref<any>(new Date());
+
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+</script>
+<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);
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
new file mode 100644
index 000000000..15c6ee09e
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -0,0 +1,369 @@
+<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 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 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);
+</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="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 />
+  </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/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
new file mode 100644
index 000000000..15c6ee09e
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -0,0 +1,369 @@
+<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 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 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);
+</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="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 />
+  </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/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
new file mode 100644
index 000000000..c5aa2bc4f
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -0,0 +1,469 @@
+<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 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 text2_2 = ref<string>("");
+const etc = ref<any>(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);
+</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 class="col-12 text-top0 row items-center q-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        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 list1_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="model" :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 < list1_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" />
+        1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        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 list1_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+              <q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
+                type="textarea" label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1" />
+            </q-item-section>
+            <q-item-section side>
+              <q-rating v-model="model1" :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 < list1_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+
+    <div class="col-12 row">
+      <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.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.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-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-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.8 อื่นๆ
+                <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>
+
+    <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="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
+          type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
+      </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="text2_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
+          type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
+          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
+      </div>
+    </div>
+
+    <!-- Part 2 -->
+    <Part2 />
+
+    <!-- Part 3 -->
+    <Part3 />
+
+    <!-- Footer -->
+    <Footer />
+
+  </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/Header.vue b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
new file mode 100644
index 000000000..579b4e5c6
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+const tabHead = ref<string>("save1");
+
+const props = defineProps({
+  changeTab: {
+    type: Function,
+    default() {
+      return 'Default function'
+    }
+  }
+})
+
+watch(tabHead, () => {
+  props.changeTab(tabHead.value)
+});
+</script>
+
+<template>
+      <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-x-md items-center">
+        <q-tabs
+          dense
+          v-model="tabHead"
+          active-class="text-primary text-weight-medium"
+          indicator-color="grey-1"
+          class="text-grey-7"
+        >
+          <q-tab name="save1" label="บันทึกผลครั้งที่ 1" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tabHead !== 'save1'"
+            :color="tabHead !== 'save1' ? 'grey' : 'add'"
+          >
+            <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>
+
+          <q-tab name="save2" label="บันทึกผลครั้งที่ 2" />
+          <q-btn
+            size="12px"
+            flat
+            dense
+            icon="mdi-download"
+            :disable="tabHead !== 'save2'"
+            :color="tabHead !== 'save2' ? 'grey' : 'add'"
+          >
+            <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>
+          <!-- <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>
+                <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> -->
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus">
+            <q-tooltip> เพิ่มบันทึกผลการทดลอง </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header>
+
+</template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue
new file mode 100644
index 000000000..d33baba54
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1.vue
@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+const PartHighlightImprove = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.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);
+</script>
+
+<template>
+  <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">1</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" />
+        1.1 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        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 list1_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="model"
+                :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 < list1_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" />
+        1.2 ความสำเร็จของงานที่ได้รับมอบหมาย
+      </div>
+      <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+        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 list1_2" :key="i">
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+              <q-input
+                outlined
+                dense
+                v-model="text2_1"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                hide-bottom-space
+                :row="1"
+              />
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="model1"
+                :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 < list1_2.length" />
+        </q-list>
+      </q-card>
+    </div>
+
+    <div class="col-12 row">
+      <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.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.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-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-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.8 อื่นๆ
+                <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>
+
+    <PartHighlightImprove />
+  </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/SubForm/Part1Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue
new file mode 100644
index 000000000..2f4120f67
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part1Template2.vue
@@ -0,0 +1,312 @@
+<template>
+  <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">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="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>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+
+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);
+</script>
+
+<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/SubForm/Part2.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue
new file mode 100644
index 000000000..0b4771475
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue
@@ -0,0 +1,289 @@
+<template>
+  <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="model"
+                :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="model"
+                :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="model"
+                :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="etc_4" />
+      </div>
+      <q-card
+        v-if="etc_4"
+        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="etc_text2"
+                  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>
+    <FormComment />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+
+import { useQuasar } from "quasar";
+
+import { useProbationDataStore } from "@/modules/05_placement/store";
+const FormComment = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/form/formEvacomment.vue"
+    )
+);
+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 etc_text2 = ref<any>(null);
+const modelEtc = ref<any>(0);
+const etc_4 = ref<any>(false);
+const model = ref<any>(0);
+</script>
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue
new file mode 100644
index 000000000..d4b0b14d5
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const radio_1 = ref<any>(null);
+const radio_2 = ref<any>(null);
+const radio_3 = ref<any>(null);
+const radio_4 = ref<any>(null);
+</script>
+
+<template>
+  <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="radio_1"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_1"
+                  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="radio_2"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_2"
+                  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="radio_3"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_3"
+                  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="radio_4"
+                  val="1"
+                  label="ดำเนินการเเล้ว"
+                />
+                <q-radio
+                  checked-icon="task_alt"
+                  unchecked-icon="panorama_fish_eye"
+                  v-model="radio_4"
+                  val="0"
+                  label=" ยังไม่ได้ดำเนินการ"
+                />
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue
new file mode 100644
index 000000000..5dc58496c
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/SubForm/PartHighlightImprove.vue
@@ -0,0 +1,45 @@
+<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-pl-lg">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        จุดเด่น (ไม่เกิน 5 บรรทัด)
+      </div>
+      <q-input
+        outlined
+        dense
+        v-model="text2_1"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        label="กรอกจุดเด่น"
+        hide-bottom-space
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </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="text2_2"
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+        lazy-rules
+        type="textarea"
+        hide-bottom-space
+        label="กรอกสิ่งที่ควรปรับปรุง"
+        :row="5"
+        :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const text2_1 = ref<string>("");
+const text2_2 = ref<string>("");
+</script>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
new file mode 100644
index 000000000..251df64ee
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -0,0 +1,31 @@
+<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 FormSaveResult = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
+)
+</script>  
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormSaveResult />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormSaveResult />
+      </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/Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
new file mode 100644
index 000000000..72f5cc6db
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2.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 FormEvaluate = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue")
+)
+</script>  
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormEvaluate />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormEvaluate />
+      </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
new file mode 100644
index 000000000..e0adc68a6
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template3.vue
@@ -0,0 +1,30 @@
+<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 FormReport = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormReport.vue")
+)
+</script>
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormReport />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormReport />
+      </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 f1a22fc3e..1a58e429e 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+import { ref, defineAsyncComponent } from "vue";
+
+const ProbationFormAssign = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormAssign.vue")
+);
+const TabsTemplate1 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template1.vue")
+);
+const TabsTemplate2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
+);
+const TabsTemplate3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
+);
+// const Tabs2 = defineAsyncComponent(
+//   () => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
+// );
+const Tabs3 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
+);
+const Tabs4 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
+);
+
+const router = useRouter();
+const drawer = ref<boolean>(true);
+const activeTab = ref<string>("tab1");
+</script>
+
 <template>
   <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
   <q-card flat bordered class="col-12">
@@ -22,7 +53,7 @@
               class="q-mr-sm"
               @click="router.go(-1)"
             />
-            บันทึกผลการทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
+            การทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
           </div>
         </q-toolbar>
         <q-separator />
@@ -50,7 +81,7 @@
                 <q-icon size="18px" name="mdi-file" />
               </q-item-section>
 
-              <q-item-section> แบบมอบหมายงาน </q-item-section>
+              <q-item-section> แบบมอบหมายงาน</q-item-section>
             </q-item>
 
             <q-item
@@ -67,7 +98,7 @@
               </q-item-section>
 
               <q-item-section>
-                บันทึกผลการทดลองปฏิบัติหน้าที่ราชการ (2)
+                บันทึกผล
               </q-item-section>
             </q-item>
 
@@ -85,7 +116,7 @@
               </q-item-section>
 
               <q-item-section>
-                ประเมินผลการทดลองปฏิบัติหน้าที่ราชการ (1)
+                ประเมินผล
               </q-item-section>
             </q-item>
 
@@ -103,7 +134,7 @@
               </q-item-section>
 
               <q-item-section>
-                รายงานการประเมินผลการทดลองปฏิบัติหน้าที่ราชการ
+                รายงานการประเมินผล
               </q-item-section>
             </q-item>
           </q-list>
@@ -121,13 +152,13 @@
               <ProbationFormAssign />
             </q-tab-panel>
 
-            <q-tab-panel name="tab2"> <Tabs2 /></q-tab-panel>
+            <q-tab-panel name="tab2"> <TabsTemplate1 /></q-tab-panel>
 
             <q-tab-panel name="tab3">
-              <Tabs3 />
+              <TabsTemplate2 />
             </q-tab-panel>
             <q-tab-panel name="tab4">
-              <Tabs4 />
+              <TabsTemplate3 />
             </q-tab-panel>
           </q-tab-panels>
         </q-layout>
@@ -135,27 +166,7 @@
     </q-layout>
   </q-card>
 </template>
-<script setup lang="ts">
-import { useRouter } from "vue-router";
-import { ref, defineAsyncComponent } from "vue";
 
-const ProbationFormAssign = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormAssign.vue")
-);
-const Tabs2 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/tabs/tabs2.vue")
-);
-const Tabs3 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/tabs/tabs3.vue")
-);
-const Tabs4 = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/tabs/tabs4.vue")
-);
-
-const router = useRouter();
-const drawer = ref<boolean>(true);
-const activeTab = ref<string>("tab1");
-</script>
 <style lang="scss" scope>
 .btn-absolute {
   z-index: 50;

From 78163d36c0ff1394f5fd83c43df23280179b21e6 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Wed, 26 Jul 2023 18:49:20 +0700
Subject: [PATCH 2/3] =?UTF-8?q?=E0=B9=82=E0=B8=AD=E0=B8=99=E0=B8=84?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B8=A3=E0=B8=A3=E0=B8=AB=E0=B8=B2=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=9A=E0=B8=A3=E0=B8=A3=E0=B8=88=E0=B8=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/recruiting/api.disable.ts             | 59 +++++++--------
 src/api/recruiting/api.period-exam.ts         |  1 +
 src/api/recruiting/api.recruit.ts             | 63 ++++++++--------
 .../03_recruiting/components/Career.vue       |  2 +
 .../03_recruiting/components/Education.vue    |  1 +
 .../components/TableCandidate.vue             | 42 ++++++++++-
 .../03_recruiting/views/01_compete/Detail.vue | 40 ++++++++++
 .../views/02_qualify/DisableDetail.vue        | 42 ++++++++++-
 .../views/02_qualify/manageDetail.vue         |  4 +-
 .../components/PersonalList/Detail.vue        | 73 ++++++++++++++-----
 .../components/PersonalList/Table.vue         |  5 +-
 11 files changed, 249 insertions(+), 83 deletions(-)

diff --git a/src/api/recruiting/api.disable.ts b/src/api/recruiting/api.disable.ts
index 6475349b7..a9419030f 100644
--- a/src/api/recruiting/api.disable.ts
+++ b/src/api/recruiting/api.disable.ts
@@ -1,39 +1,40 @@
 /**
  * api สรรหา
  */
-import env from "../index"
-const disableExam = `${env.API_CANDIDATE_URI}/candidate/disable-exam/`
-const diable_report = `${env.API_URI}/report/exam/`
+import env from "../index";
+const disableExam = `${env.API_CANDIDATE_URI}/candidate/disable-exam/`;
+const diable_report = `${env.API_URI}/report/exam/`;
 
 export default {
-    getDisableCandidates: `${disableExam}candidate`,
-    saveDisableCandidates: `${disableExam}candidate`,
-    deleteDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
-    getDisableExamDetail: (id: string, examId: string) =>
-        `${disableExam}exam/${id}/${examId}`,
+  getDisableCandidates: `${disableExam}candidate`,
+  saveDisableCandidates: `${disableExam}candidate`,
+  deleteDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
+  getDisableExamDetail: (id: string, examId: string) =>
+    `${disableExam}exam/${id}/${examId}`,
 
-    saveDisableScores: (id: string) => `${disableExam}score/${id}`,
+  saveDisableScores: (id: string) => `${disableExam}score/${id}`,
 
-    getDisableExamResultById: (id: string) => `${disableExam}exam/${id}`,
+  getDisableExamResultById: (id: string) => `${disableExam}exam/${id}`,
 
-    // จัดการรอบการสอบ
-    saveDisablePeriod: `${disableExam}period`,
-    editDisablePeriod: (id: string) => `${disableExam}period/${id}`,
-    getDisablePeriodById: (id: string) => `${disableExam}period/${id}`,
-    uploadDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
-    getDisableImportHistory: (id: string) => `${disableExam}history/${id}`,
+  // จัดการรอบการสอบ
+  saveDisablePeriod: `${disableExam}period`,
+  editDisablePeriod: (id: string) => `${disableExam}period/${id}`,
+  getDisablePeriodById: (id: string) => `${disableExam}period/${id}`,
+  uploadDisableCandidates: (id: string) => `${disableExam}candidate/${id}`,
+  getDisableImportHistory: (id: string) => `${disableExam}history/${id}`,
 
-    // รายงาน
-    downloadDisableExamReport: (id: string, examId: string, type: number = 2) =>
-        `${diable_report}certificate/${type}/${id}/${examId}`,
-    downloadDisableScoreReport: (id: string, examId: string) =>
-        `${diable_report}score/${id}/${examId}`,
-    exportDisableExam: (id: string) => `${disableExam}export/exam/${id}`,
-    exportDisablePassExam: (id: string) => `${disableExam}export/pass-exam/${id}`,
-    exportDisablePassResultExam: (id: string) =>
-        `${disableExam}export/pass/${id}`,
+  // รายงาน
+  downloadDisableExamReport: (id: string, examId: string, type: number = 2) =>
+    `${diable_report}certificate/${type}/${id}/${examId}`,
+  downloadDisableScoreReport: (id: string, examId: string) =>
+    `${diable_report}score/${id}/${examId}`,
+  exportDisableExam: (id: string) => `${disableExam}export/exam/${id}`,
+  exportDisablePassExam: (id: string) => `${disableExam}export/pass-exam/${id}`,
+  exportDisablePassResultExam: (id: string) =>
+    `${disableExam}export/pass/${id}`,
 
-    exportDisableCandidateList: (id: string) => `${diable_report}candidate/${id}`,
-    exportDisablePassExamList: (id: string) => `${diable_report}pass/${id}`,
-
-}
+  exportDisableCandidateList: (id: string) => `${diable_report}candidate/${id}`,
+  exportDisablePassExamList: (id: string) => `${diable_report}pass/${id}`,
+  periodDisableToPlacement: (examId: string) =>
+    `${disableExam}placement/${examId}`,
+};
diff --git a/src/api/recruiting/api.period-exam.ts b/src/api/recruiting/api.period-exam.ts
index 6e73724cd..d3676b4aa 100644
--- a/src/api/recruiting/api.period-exam.ts
+++ b/src/api/recruiting/api.period-exam.ts
@@ -83,4 +83,5 @@ export default {
 
   exportExamCandidateList: (id: string) => `${exam_report}candidate-exam/${id}`,
   exportExamPassExamList: (id: string) => `${exam_report}pass-exam/${id}`,
+  periodExamToPlacement: (examId: string) => `${periodExam}placement/${examId}`,
 };
diff --git a/src/api/recruiting/api.recruit.ts b/src/api/recruiting/api.recruit.ts
index cc0438f4b..5b7a0d383 100644
--- a/src/api/recruiting/api.recruit.ts
+++ b/src/api/recruiting/api.recruit.ts
@@ -1,41 +1,44 @@
 /**
  * api สรรหา - สอบแข่งขัน
  */
-import env from "../index"
-const recruit = `${env.API_URI}/recruit/`
-const recruit_report = `${env.API_URI}/report/recruit/`
+import env from "../index";
+const recruit = `${env.API_URI}/recruit/`;
+const recruit_report = `${env.API_URI}/report/recruit/`;
 
 export default {
-    getCandidates: `${recruit}candidate`,
-    saveCandidates: `${recruit}candidate`,
-    deleteCandidates: (id: string) => `${recruit}candidate/${id}`,
-    getExamDetail: (id: string, examId: string) => `${recruit}exam/${id}/${examId}`,
+  getCandidates: `${recruit}candidate`,
+  saveCandidates: `${recruit}candidate`,
+  deleteCandidates: (id: string) => `${recruit}candidate/${id}`,
+  getExamDetail: (id: string, examId: string) =>
+    `${recruit}exam/${id}/${examId}`,
 
-    saveScores: (id: string) => `${recruit}score/${id}`,
+  saveScores: (id: string) => `${recruit}score/${id}`,
 
-    getExamResultById: (id: string) => `${recruit}exam/${id}`,
+  getExamResultById: (id: string) => `${recruit}exam/${id}`,
 
-    // จัดการรอบการสอบ
-    savePeriod: `${recruit}period`,
-    editPeriod: (id: string) => `${recruit}period/${id}`,
-    getPeriodById: (id: string) => `${recruit}period/${id}`,
-    uploadCandidates: (id: string) => `${recruit}candidate/${id}`,
-    getImportHistory: (id: string) => `${recruit}history/${id}`,
+  // จัดการรอบการสอบ
+  savePeriod: `${recruit}period`,
+  editPeriod: (id: string) => `${recruit}period/${id}`,
+  getPeriodById: (id: string) => `${recruit}period/${id}`,
+  uploadCandidates: (id: string) => `${recruit}candidate/${id}`,
+  getImportHistory: (id: string) => `${recruit}history/${id}`,
 
-    //upload
-    periodRecruitDoc: (examId: string) => `${recruit}doc/${examId}`,
-    periodRecruitImg: (examId: string) => `${recruit}img/${examId}`,
-    periodDeleteDoc: (docId: string) => `${recruit}doc/${docId}`,
-    periodDeleteImg: (docId: string) => `${recruit}img/${docId}`,
+  //upload
+  periodRecruitDoc: (examId: string) => `${recruit}doc/${examId}`,
+  periodRecruitImg: (examId: string) => `${recruit}img/${examId}`,
+  periodDeleteDoc: (docId: string) => `${recruit}doc/${docId}`,
+  periodDeleteImg: (docId: string) => `${recruit}img/${docId}`,
 
-    // รายงาน
-    downloadExamReport: (id: string, examId: string, type: number = 2) => `${recruit_report}certificate/${type}/${id}/${examId}`,
-    downloadScoreReport: (id: string, examId: string) => `${recruit_report}score/${id}/${examId}`,
-    exportExam: (id: string) => `${recruit}export/exam/${id}`,
-    exportPassExam: (id: string) => `${recruit}export/pass-exam/${id}`,
-    exportPassResultExam: (id: string) => `${recruit}export/pass/${id}`,
+  // รายงาน
+  downloadExamReport: (id: string, examId: string, type: number = 2) =>
+    `${recruit_report}certificate/${type}/${id}/${examId}`,
+  downloadScoreReport: (id: string, examId: string) =>
+    `${recruit_report}score/${id}/${examId}`,
+  exportExam: (id: string) => `${recruit}export/exam/${id}`,
+  exportPassExam: (id: string) => `${recruit}export/pass-exam/${id}`,
+  exportPassResultExam: (id: string) => `${recruit}export/pass/${id}`,
 
-    exportCandidateList: (id: string) => `${recruit_report}candidate/${id}`,
-    exportPassExamList: (id: string) => `${recruit_report}pass/${id}`,
-
-}
\ No newline at end of file
+  exportCandidateList: (id: string) => `${recruit_report}candidate/${id}`,
+  exportPassExamList: (id: string) => `${recruit_report}pass/${id}`,
+  periodRecruitToPlacement: (examId: string) => `${recruit}placement/${examId}`,
+};
diff --git a/src/modules/03_recruiting/components/Career.vue b/src/modules/03_recruiting/components/Career.vue
index 902f68346..ea833743b 100644
--- a/src/modules/03_recruiting/components/Career.vue
+++ b/src/modules/03_recruiting/components/Career.vue
@@ -468,6 +468,7 @@ const saveData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
+      modal.value = false;
       await fetchData();
     });
 };
@@ -493,6 +494,7 @@ const editData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
+      modal.value = false;
       await fetchData();
     });
 };
diff --git a/src/modules/03_recruiting/components/Education.vue b/src/modules/03_recruiting/components/Education.vue
index 6b39a276b..b7f73f24e 100644
--- a/src/modules/03_recruiting/components/Education.vue
+++ b/src/modules/03_recruiting/components/Education.vue
@@ -497,6 +497,7 @@ const saveData = async () => {
       messageError($q, e);
     })
     .finally(async () => {
+      modal.value = false;
       await fetchData();
     });
 };
diff --git a/src/modules/03_recruiting/components/TableCandidate.vue b/src/modules/03_recruiting/components/TableCandidate.vue
index e454070d0..717b31e44 100644
--- a/src/modules/03_recruiting/components/TableCandidate.vue
+++ b/src/modules/03_recruiting/components/TableCandidate.vue
@@ -58,6 +58,17 @@
           </q-list>
         </q-menu>
       </q-btn>
+      <q-btn
+        size="md"
+        icon="mdi-content-save-move-outline"
+        round
+        flat
+        color="indigo"
+        v-if="statusPayment && setSeat == true"
+        @click="candidateToPlacement"
+      >
+        <q-tooltip>บรรจุผู้ผ่านการคัดเลือก</q-tooltip>
+      </q-btn>
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
@@ -137,7 +148,7 @@
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
@@ -145,6 +156,7 @@ import config from "@/app.config";
 import { useQuasar } from "quasar";
 
 const route = useRoute();
+const router = useRouter();
 const dataStore = useDataStore();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
@@ -277,6 +289,34 @@ const uploadFile = async () => {
   }
 };
 
+const candidateToPlacement = async () => {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      await http
+        .get(config.API.periodExamToPlacement(examId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านคัดเลือกเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          loaderPage(false);
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
 const uploadDataSeat = async () => {
   loaderPage(true);
   const formData = new FormData();
diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index 6da585171..e9361bd30 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -13,6 +13,17 @@
     />
     รายชื่อผู้สมัครสอบแข่งขัน {{ name }} ครั้งที่ {{ round }}/{{ year }}
     <q-space />
+    <q-btn
+      size="md"
+      icon="mdi-content-save-move-outline"
+      round
+      flat
+      color="indigo"
+      v-if="rows.length > 0"
+      @click="candidateToPlacement"
+    >
+      <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
+    </q-btn>
     <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
       <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
       <q-menu>
@@ -464,6 +475,35 @@ const fetchData = async () => {
       loaderPage(false);
     });
 };
+
+const candidateToPlacement = async () => {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .get(config.API.periodRecruitToPlacement(importId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านสอบแข่งขันเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          loaderPage(false);
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
index 1b31b8a2d..91b22c7ed 100644
--- a/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/DisableDetail.vue
@@ -13,6 +13,17 @@
     />
     รายชื่อผู้สมัครสอบรอบ {{ name }} ครั้งที่ {{ round }}/{{ year }}
     <q-space />
+    <q-btn
+      size="md"
+      icon="mdi-content-save-move-outline"
+      round
+      flat
+      color="indigo"
+      v-if="rows.length > 0"
+      @click="candidateToPlacement"
+    >
+      <q-tooltip>บรรจุผู้ผ่านการคัดเลือกผู้พิการ</q-tooltip>
+    </q-btn>
     <q-btn class="bg-teal-1" icon="mdi-download" round color="primary" flat>
       <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
       <q-menu>
@@ -129,7 +140,7 @@ const pass = ref<number>(0);
 const notpass = ref<number>(0);
 const importId = ref<string>(route.params.id as string); // Period Import Id
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, success } = mixin;
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([
   "examID",
@@ -419,6 +430,35 @@ const fetchData = async () => {
       loaderPage(false);
     });
 };
+
+const candidateToPlacement = async () => {
+  $q.dialog({
+    title: "ยืนยันการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ",
+    message: "ต้องการนำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      loaderPage(true);
+      await http
+        .get(config.API.periodDisableToPlacement(importId.value))
+        .then((res) => {
+          success($q, "นำผู้ผ่านคัดเลือกคนพิการเข้าสู่ระบบบรรจุ");
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(async () => {
+          loaderPage(false);
+          router.go(-1);
+        });
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <style></style>
diff --git a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
index 74b8776c2..4a91aa660 100644
--- a/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
+++ b/src/modules/03_recruiting/views/02_qualify/manageDetail.vue
@@ -455,7 +455,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "registerDate",
     align: "left",
-    label: "วันเและเวลาที่สมัคร",
+    label: "วันและเวลาที่สมัคร",
     sortable: true,
     field: "registerDate",
     headerStyle: "font-size: 14px; min-width: 200px",
@@ -514,7 +514,7 @@ const fetchData = async () => {
           avatar: r.profileImg != null ? r.profileImg.detail : "",
           citizenId: r.citizenId,
           number: r.number,
-          registerDate: r.registerDate,
+          registerDate: date2Thai(r.registerDate),
           examIdenNumber: r.examIdenNumber,
           seatNumber: r.seatNumber,
           resultC: r.resultC,
diff --git a/src/modules/05_placement/components/PersonalList/Detail.vue b/src/modules/05_placement/components/PersonalList/Detail.vue
index d72880f1c..16c76ae88 100644
--- a/src/modules/05_placement/components/PersonalList/Detail.vue
+++ b/src/modules/05_placement/components/PersonalList/Detail.vue
@@ -6,15 +6,15 @@ import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue
 import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useCounterMixin } from "@/stores/mixin"
-import { useQuasar } from "quasar"
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
 import { usePlacementDataStore } from "@/modules/05_placement/store";
 
 const DataStore = usePlacementDataStore();
 
-const $q = useQuasar
-const mixin = useCounterMixin()
-const { messageError, showLoader, hideLoader } = mixin
+const $q = useQuasar;
+const mixin = useCounterMixin();
+const { messageError, showLoader, hideLoader } = mixin;
 let roleAdmin = ref<boolean>(false);
 const router = useRouter();
 const route = useRoute();
@@ -53,7 +53,7 @@ const getStat = async () => {
     })
     .catch((e) => {
       messageError($q, e);
-    })
+    });
 };
 
 onMounted(async () => {
@@ -65,14 +65,15 @@ onMounted(async () => {
     roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
   }
 
-  await getStat()
+  await getStat();
 
-  examData.value = await DataStore.DataMainOrig.find((x: any) => x.id == examId);
-
-  title.value = examData.value.examRound;
-  round.value = examData.value.examOrder;
-  year.value = examData.value.fiscalYear;
+  examData.value = await DataStore.DataMainOrig.find(
+    (x: any) => x.id == examId
+  );
 
+  title.value = examData.value == null ? null : examData.value.examRound;
+  round.value = examData.value == null ? null : examData.value.examOrder;
+  year.value = examData.value == null ? null : examData.value.fiscalYear;
 });
 
 const fetchPlacementData = async () => {
@@ -93,18 +94,48 @@ const fetchPlacementData = async () => {
 <template>
   <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 row">
     <div class="toptitle">
-      <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+      <q-btn
+        icon="mdi-arrow-left"
+        unelevated
+        round
+        dense
+        flat
+        color="primary"
+        class="q-mr-sm"
+        @click="router.go(-1)"
+      />
       รายชื่อผู้สอบในรอบ {{ title }} ครั้งที่ {{ round }} ปี {{ year }}
     </div>
     <q-card bordered class="q-py-sm row col-12">
       <div class="col-12 row bg-white">
         <div class="fit q-px-md q-py-sm">
           <div class="row col-12 q-col-gutter-md fit">
-            <cardTop :amount="stat.total" label="จำนวนทั้งหมด" color="#016987" />
-            <cardTop v-if="roleAdmin" :amount="stat.unContain" label="จำนวนที่ยังไม่บรรจุ" color="#02A998" />
-            <cardTop :amount="stat.prepareContain" label="จำนวนที่เตรียมบรรจุ" color="#2EA0FF" />
-            <cardTop :amount="stat.contain" label="จำนวนที่บรรจุแล้ว" color="#4154B3" />
-            <cardTop :amount="stat.disclaim" label="จำนวนที่สละสิทธิ์" color="#FF5C5F" />
+            <cardTop
+              :amount="stat.total"
+              label="จำนวนทั้งหมด"
+              color="#016987"
+            />
+            <cardTop
+              v-if="roleAdmin"
+              :amount="stat.unContain"
+              label="จำนวนที่ยังไม่บรรจุ"
+              color="#02A998"
+            />
+            <cardTop
+              :amount="stat.prepareContain"
+              label="จำนวนที่เตรียมบรรจุ"
+              color="#2EA0FF"
+            />
+            <cardTop
+              :amount="stat.contain"
+              label="จำนวนที่บรรจุแล้ว"
+              color="#4154B3"
+            />
+            <cardTop
+              :amount="stat.disclaim"
+              label="จำนวนที่สละสิทธิ์"
+              color="#FF5C5F"
+            />
           </div>
         </div>
       </div>
@@ -112,7 +143,11 @@ const fetchPlacementData = async () => {
   </div>
   <q-card flat bordered class="col-12 q-mt-sm q-pt-sm">
     <div>
-      <AddTablePosition :statCard="getStat" class="q-pa-none" @get-stat="getStat" />
+      <AddTablePosition
+        :statCard="getStat"
+        class="q-pa-none"
+        @get-stat="getStat"
+      />
     </div>
   </q-card>
 </template>
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index cec7c0c36..aff05ffc6 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -232,7 +232,10 @@ const getTable = async () => {
             organizationShortName: data.organizationShortName,
             positionNumber: data.positionNumber,
             positionPath: data.positionPath,
-            reportingDate: dateText(new Date(data.reportingDate)),
+            reportingDate:
+              data.reportingDate == null
+                ? null
+                : dateText(new Date(data.reportingDate)),
             examNumber: data.examNumber,
             bmaOfficer: convertBmaOfficer(data.bmaOfficer),
             statusId: data.statusId,

From 99f56a89f2ebb9e26b6f2640f980087bb3bbfd92 Mon Sep 17 00:00:00 2001
From: Kittapath <kittapath@frappet.com>
Date: Wed, 26 Jul 2023 19:50:56 +0700
Subject: [PATCH 3/3] =?UTF-8?q?=E0=B9=81=E0=B8=82=E0=B9=88=E0=B8=87?=
 =?UTF-8?q?=E0=B8=82=E0=B8=B1=E0=B8=99=E0=B8=94=E0=B8=B9=E0=B8=8A=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=A3=E0=B8=AD=E0=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../03_recruiting/views/01_compete/Detail.vue        | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/modules/03_recruiting/views/01_compete/Detail.vue b/src/modules/03_recruiting/views/01_compete/Detail.vue
index e9361bd30..ff4b32fcb 100644
--- a/src/modules/03_recruiting/views/01_compete/Detail.vue
+++ b/src/modules/03_recruiting/views/01_compete/Detail.vue
@@ -133,7 +133,7 @@ const router = useRouter();
 const route = useRoute();
 const { loaderPage } = dataStore;
 const mixin = useCounterMixin();
-const { messageError } = mixin;
+const { messageError, success } = mixin;
 const year = ref<string>("");
 const round = ref<string>("");
 const name = ref<string>("");
@@ -451,10 +451,12 @@ const fetchData = async () => {
       notpass.value = header.notpass;
 
       // period information
-      name.value = period.name;
-      round.value = period.order as string;
-      year.value =
-        period.year >= 2500 ? period.year : ((period.year + 543) as string);
+      if (period != null) {
+        name.value = period.name;
+        round.value = period.order;
+        year.value =
+          period.year >= 2500 ? period.year : ((period.year + 543) as string);
+      }
 
       const data = res.data.result.data;
       if (data.length > 0) {