From fb026c06223d770a97bf4beca419cacda959d82a Mon Sep 17 00:00:00 2001
From: setthawutttty <trx.setthawut@gmail.com>
Date: Tue, 21 Jan 2025 11:09:18 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=9C=E0=B8=A5=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=8F=E0=B8=B4=E0=B8=9A=E0=B8=B1=E0=B8=95=E0=B8=B4=E0=B8=AB?=
 =?UTF-8?q?=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=8A=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=81=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B0=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=AA=E0=B8=B3=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=A7=E0=B8=88=E0=B8=84=E0=B8=A7=E0=B8=B2=E0=B8=A1=E0=B8=84?=
 =?UTF-8?q?=E0=B8=B4=E0=B8=94=E0=B9=80=E0=B8=AB=E0=B9=87=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/02_ResultPage.vue              | 522 ++++++++++++------
 .../components/ResultTemplate.vue             | 367 ------------
 src/modules/15_probationReport/views/main.vue | 109 +++-
 3 files changed, 453 insertions(+), 545 deletions(-)
 delete mode 100644 src/modules/15_probationReport/components/ResultTemplate.vue

diff --git a/src/modules/15_probationReport/components/02_ResultPage.vue b/src/modules/15_probationReport/components/02_ResultPage.vue
index 1a7cccb..7b172b4 100644
--- a/src/modules/15_probationReport/components/02_ResultPage.vue
+++ b/src/modules/15_probationReport/components/02_ResultPage.vue
@@ -1,180 +1,368 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import { useRoute, useRouter } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-import { useProbationReport } from "@/modules/15_probationReport/store";
-
-import type { ProbationReportType } from "@/modules/15_probationReport/interface/Main";
-
-import ResultPage from "@/modules/15_probationReport/components/ResultTemplate.vue";
 
 const mixin = useCounterMixin();
-const store = useProbationReport();
+const { date2Thai } = mixin;
 
-const { date2Thai, showLoader, hideLoader, messageError } = mixin;
-const route = useRoute();
-
-const $q = useQuasar();
-const develop_orientation_score = ref<number>();
-const develop_self_learning_score = ref<number>();
-const develop_training_seminar_score = ref<number>();
-const develop_other_training_score = ref<number>();
-const develop_total_score = ref<number>();
-const develop_orientation_percent = ref<number>();
-const develop_self_learning_percent = ref<number>();
-const develop_training_seminar_percent = ref<number>();
-const develop_other_training_percent = ref<number>();
-const develop_total_percent = ref<number>();
-const develop_result = ref<number>();
-const achievement_score = ref<number>();
-const achievement_score_total = ref<number>();
-const achievement_percent = ref<number>();
-const achievement_result = ref<number>();
-const behavior_score = ref<number>();
-const behavior_score_total = ref<number>();
-const behavior_percent = ref<number>();
-const behavior_result = ref<number>();
-const sum_score = ref<number>();
-const sum_percent = ref<number>();
-const reason = ref<string>();
-const pass_result = ref<number>();
-const evaluate_date = ref<Date>();
-const dev_options = reactive([
-  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
-  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
-]);
-const result_option = reactive([
-  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
-  { name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
-  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
-]);
-
-const formData = ref<ProbationReportType>({
-  develop_orientation_score: 0,
-  develop_self_learning_score: 0,
-  develop_training_seminar_score: 0,
-  develop_other_training_score: 0,
-  develop_total_score: 0,
-  develop_orientation_percent: 0,
-  develop_self_learning_percent: 0,
-  develop_training_seminar_percent: 0,
-  develop_other_training_percent: 0,
-  develop_total_percent: 0,
-  develop_result: 0,
-  achievement_score: 0,
-  achievement_score_total: 0,
-  achievement_percent: 0,
-  achievement_result: 0,
-  behavior_score: 0,
-  behavior_score_total: 0,
-  behavior_percent: 0,
-  behavior_result: 0,
-  sum_score: 0,
-  sum_percent: 0,
-  reason: "",
-  pass_result: 0,
-  evaluate_date: new Date(),
-});
-/** get คะแนน */
-async function getReportScore() {
-  showLoader();
-  await http
-    .get(config.API.summaryReportDetail(store.assignId))
-    .then((res) => {
-      const data = res.data.result;
-      formData.value.develop_orientation_score = data.develop_orientation_score;
-      formData.value.develop_self_learning_score =
-        data.develop_self_learning_score;
-      formData.value.develop_training_seminar_score =
-        data.develop_training_seminar_score;
-      formData.value.develop_other_training_score =
-        data.develop_other_training_score;
-      formData.value.develop_total_score = data.develop_total_score;
-      formData.value.develop_orientation_percent =
-        data.develop_orientation_percent;
-      formData.value.develop_self_learning_percent =
-        data.develop_self_learning_percent;
-      formData.value.develop_training_seminar_percent =
-        data.develop_training_seminar_percent;
-      formData.value.develop_other_training_percent =
-        data.develop_other_training_percent;
-      formData.value.develop_total_percent = data.develop_total_percent;
-      formData.value.develop_result =
-        data.develop_result == 0 ? 2 : data.develop_result;
-      formData.value.achievement_score = data.achievement_score;
-      formData.value.achievement_score_total = data.achievement_score_total;
-      formData.value.achievement_percent = data.achievement_percent;
-      formData.value.achievement_result = data.achievement_result;
-      formData.value.behavior_score = data.behavior_score;
-      formData.value.behavior_score_total = data.behavior_score_total;
-      formData.value.behavior_percent = data.behavior_percent;
-      formData.value.behavior_result = data.behavior_result;
-      formData.value.sum_score = data.sum_score;
-      formData.value.sum_percent = data.sum_percent;
-      formData.value.reason = data.reason;
-      formData.value.pass_result = data.pass_result;
-      formData.value.evaluate_date = data.evaluate_date;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ดึง ข้อมูลแบบสำรวจ */
-async function getAssignId() {
-  await http.get(config.API.summaryDetail()).then(async (res: any) => {
-    store.assignId = res.data.result.assignId;
-  });
-}
-
-/** get ค่า เมื่อโหลดหน้า */
-onMounted(async () => {
-  if (!store.assignId) {
-    await getAssignId();
-  }
-
-  getReportScore();
-});
+const formData = defineModel<any>("formData", { required: true });
+const dev_options = defineModel<any>("dev_options", { required: true });
+const result_option = defineModel<any>("result_option", { required: true });
+const status = ref<boolean>(false);
 </script>
 <template>
-  <div class="row col-12">
-    <q-tabs
-      v-model="store.tabSub"
-      inline-label
-      align="left"
-      class="text-grey"
-      active-color="primary"
-      active-bg-color="teal-1"
-      indicator-color="primary"
-    >
-      <q-tab name="RESULT1" label="ผลการประเมินการฯ ครั้งที่ 1" />
-      <q-tab name="RESULT2" label="ผลการประเมินการฯ ครั้งที่ 2" />
-    </q-tabs>
+  <div class="row col-12 q-ma-xs">
+    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
+      <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
+    </div>
+    <div class="row col-12 q-pt-lg q-px-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">1</q-avatar>
+          ผลการประเมิน
+        </div>
+      </div>
+      <q-card class="text-top0 col-12">
+        <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. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
 
-    <q-separator />
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ formData.achievement_score }}</div>
+                  <div class="col">{{ formData.achievement_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
 
-    <q-tab-panels v-model="store.tabSub" animated>
-      <q-tab-panel name="RESULT1">
-        <ResultPage
-          v-model:form-data="formData"
-          v-model:dev_options="dev_options"
-          v-model:result_option="result_option"
+            <q-item-section side v-if="formData.achievement_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+      <q-card class="text-top0 col-12">
+        <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" />
+                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ formData.behavior_score }}</div>
+                  <div class="col">{{ formData.behavior_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="formData.behavior_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label class="text-black"
+                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
+              >
+            </q-item-section>
+            <q-item-section>
+              <q-item-label style="color: gray">
+                <div class="row text-weight-light">
+                  <div class="col">คะแนน</div>
+                  <div class="col">ร้อยละ</div>
+                </div>
+              </q-item-label>
+              <q-item-label caption style="color: #464444">
+                <div class="row text-weight-bold">
+                  <div class="col">{{ formData.sum_score }}</div>
+                  <div class="col">{{ formData.sum_percent }}</div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side v-if="formData.pass_result == 1">
+              ผ่าน (สูงกว่าร้อยละ 60)
+            </q-item-section>
+            <q-item-section side v-else>
+              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="row col-12 q-pt-lg q-px-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">2</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
+            <div class="row q-gutter-md q-pl-md">
+              <div class="col-8 text-weight-medium">หัวข้อ</div>
+              <div class="col">คะแนน</div>
+              <div class="col">ร้อยละ</div>
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">1. การปฐมนิเทศ</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_orientation_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_orientation_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
+            <div class="col">
+              <q-input
+                dense
+                outlined
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_self_learning_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_self_learning_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_training_seminar_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_training_seminar_percent"
+              />
+            </div>
+          </div>
+          <q-separator class="q-my-xs" />
+          <div class="row q-gutter-md align-center q-pl-md">
+            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_other_training_score"
+              />
+            </div>
+
+            <div class="col">
+              <q-input
+                outlined
+                dense
+                type="number"
+                :readonly="!status"
+                v-model="formData.develop_other_training_percent"
+              />
+            </div>
+          </div>
+
+          <q-separator class="q-my-xs" />
+          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
+            <div class="row q-gutter-md q-pl-sm">
+              <div class="col-8 text-weight-medium">
+                <q-item-label
+                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
+                >
+              </div>
+              <div class="col q-pl-md">{{ formData.develop_total_score }}</div>
+              <div class="col q-pl-md">
+                {{ formData.develop_total_percent }}
+              </div>
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+    <div class="row col-12 q-gutter-lg q-mt-md">
+      <div class="col-xs-12 col-sm-6">
+        <div class="col-12 text-top0 items-center">
+          ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-12"
+            dense
+            v-model="formData.develop_result"
+            outlined
+            :options="dev_options"
+            option-label="label"
+            option-value="value"
+            map-options
+            emit-value
+            :readonly="!status"
+          />
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-sm-11">
+        <div class="col-12 text-top0 row items-center">
+          เหตุผลอื่นๆ ในการพิจารณา
+        </div>
+        <q-input
+          type="textarea"
+          outlined
+          dense
+          class="col-12"
+          v-model="formData.reason"
+          lazy-rules
+          autogrow
+          hide-bottom-space
+          :row="3"
+          :readonly="!status"
         />
-      </q-tab-panel>
-      <q-tab-panel name="RESULT2">
-        <ResultPage
-          v-model:form-data="formData"
-          v-model:dev_options="dev_options"
-          v-model:result_option="result_option"
-        />
-      </q-tab-panel>
-    </q-tab-panels>
+      </div>
+
+      <div class="col-xs-12 col-sm-11">
+        <div class="col-12 row q-col-gutter-md">
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              ผลการทดลองปฏิบัติหน้าที่ราชการ
+            </div>
+            <div class="col-12">
+              <q-select
+                class="col-12"
+                dense
+                v-model="formData.pass_result"
+                outlined
+                :options="result_option"
+                option-label="name"
+                option-value="value"
+                map-options
+                emit-value
+                :readonly="!status"
+              />
+            </div>
+          </div>
+          <div class="col-xs-12 col-sm-6">
+            <div class="col-12 text-top0 items-center">
+              วัน เดือน ปี ที่ประเมิน
+            </div>
+            <div class="col-12">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="formData.evaluate_date"
+                :locale="'th'"
+                autoApply
+                :readonly="!status"
+                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
+                    :readonly="!status"
+                    class="full-width datepicker"
+                    :model-value="
+                      formData.evaluate_date != null
+                        ? date2Thai(formData.evaluate_date)
+                        : null
+                    "
+                    :rules="[(val:string) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
diff --git a/src/modules/15_probationReport/components/ResultTemplate.vue b/src/modules/15_probationReport/components/ResultTemplate.vue
deleted file mode 100644
index 7c8cf01..0000000
--- a/src/modules/15_probationReport/components/ResultTemplate.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
-
-const mixin = useCounterMixin();
-const { date2Thai } = mixin;
-
-const formData = defineModel<any>("formData", { required: true });
-const dev_options = defineModel<any>("dev_options", { required: true });
-const result_option = defineModel<any>("result_option", { required: true });
-const status = ref<boolean>(false);
-</script>
-<template>
-  <div class="row col-12 q-ma-xs">
-    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
-      <div>ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ</div>
-    </div>
-    <div class="row col-12 q-pt-lg q-px-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">1</q-avatar>
-          ผลการประเมิน
-        </div>
-      </div>
-      <q-card class="text-top0 col-12">
-        <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. คะแนนผลสัมฤทธิ์การทดลองปฏิบัติหน้าที่ราชการ</q-item-label
-              >
-            </q-item-section>
-            <q-item-section>
-              <q-item-label style="color: gray">
-                <div class="row text-weight-light">
-                  <div class="col">คะแนน</div>
-                  <div class="col">ร้อยละ</div>
-                </div>
-              </q-item-label>
-
-              <q-item-label caption style="color: #464444">
-                <div class="row text-weight-bold">
-                  <div class="col">{{ formData.achievement_score }}</div>
-                  <div class="col">{{ formData.achievement_percent }}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side v-if="formData.achievement_result == 1">
-              ผ่าน (สูงกว่าร้อยละ 60)
-            </q-item-section>
-            <q-item-section side v-else>
-              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-      <q-card class="text-top0 col-12">
-        <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" />
-                2. คะแนนพฤติกรรมการปฏิบัติราชการ</q-item-label
-              >
-            </q-item-section>
-            <q-item-section>
-              <q-item-label style="color: gray">
-                <div class="row text-weight-light">
-                  <div class="col">คะแนน</div>
-                  <div class="col">ร้อยละ</div>
-                </div>
-              </q-item-label>
-              <q-item-label caption style="color: #464444">
-                <div class="row text-weight-bold">
-                  <div class="col">{{ formData.behavior_score }}</div>
-                  <div class="col">{{ formData.behavior_percent }}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side v-if="formData.behavior_result == 1">
-              ผ่าน (สูงกว่าร้อยละ 60)
-            </q-item-section>
-            <q-item-section side v-else>
-              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label class="text-black"
-                >ผลคะแนนรวมการประเมินการทดลอง</q-item-label
-              >
-            </q-item-section>
-            <q-item-section>
-              <q-item-label style="color: gray">
-                <div class="row text-weight-light">
-                  <div class="col">คะแนน</div>
-                  <div class="col">ร้อยละ</div>
-                </div>
-              </q-item-label>
-              <q-item-label caption style="color: #464444">
-                <div class="row text-weight-bold">
-                  <div class="col">{{ formData.sum_score }}</div>
-                  <div class="col">{{ formData.sum_percent }}</div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side v-if="formData.pass_result == 1">
-              ผ่าน (สูงกว่าร้อยละ 60)
-            </q-item-section>
-            <q-item-section side v-else>
-              ไม่ผ่าน (ต่ำกว่าร้อยละ 60)
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-    </div>
-    <div class="row col-12 q-pt-lg q-px-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">2</q-avatar>
-          การพัฒนาผู้ทดลองปฏิบัติหน้าที่ราชการ
-        </div>
-        <q-card
-          flat
-          bordered
-          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
-        >
-          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
-            <div class="row q-gutter-md q-pl-md">
-              <div class="col-8 text-weight-medium">หัวข้อ</div>
-              <div class="col">คะแนน</div>
-              <div class="col">ร้อยละ</div>
-            </div>
-          </div>
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">1. การปฐมนิเทศ</div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_orientation_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_orientation_percent"
-              />
-            </div>
-          </div>
-
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
-            <div class="col">
-              <q-input
-                dense
-                outlined
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_self_learning_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_self_learning_percent"
-              />
-            </div>
-          </div>
-
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_training_seminar_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_training_seminar_percent"
-              />
-            </div>
-          </div>
-          <q-separator class="q-my-xs" />
-          <div class="row q-gutter-md align-center q-pl-md">
-            <div class="col-8">4. การอบรมอื่นๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</div>
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_other_training_score"
-              />
-            </div>
-
-            <div class="col">
-              <q-input
-                outlined
-                dense
-                type="number"
-                :readonly="!status"
-                v-model="formData.develop_other_training_percent"
-              />
-            </div>
-          </div>
-
-          <q-separator class="q-my-xs" />
-          <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
-            <div class="row q-gutter-md q-pl-sm">
-              <div class="col-8 text-weight-medium">
-                <q-item-label
-                  >คะแนนผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ</q-item-label
-                >
-              </div>
-              <div class="col q-pl-md">{{ formData.develop_total_score }}</div>
-              <div class="col q-pl-md">
-                {{ formData.develop_total_percent }}
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
-    </div>
-    <div class="row col-12 q-gutter-lg q-mt-md">
-      <div class="col-xs-12 col-sm-6">
-        <div class="col-12 text-top0 items-center">
-          ผลการพัฒนาข้าราชการที่อยู่ระหว่างการทดลองปฏิบัติหน้าที่ราชการ
-        </div>
-        <div class="col-12">
-          <q-select
-            class="col-12"
-            dense
-            v-model="formData.develop_result"
-            outlined
-            :options="dev_options"
-            option-label="label"
-            option-value="value"
-            map-options
-            emit-value
-            :readonly="!status"
-          />
-        </div>
-      </div>
-
-      <div class="col-xs-12 col-sm-11">
-        <div class="col-12 text-top0 row items-center">
-          เหตุผลอื่นๆ ในการพิจารณา
-        </div>
-        <q-input
-          type="textarea"
-          outlined
-          dense
-          class="col-12"
-          v-model="formData.reason"
-          lazy-rules
-          autogrow
-          hide-bottom-space
-          :row="3"
-          :readonly="!status"
-        />
-      </div>
-
-      <div class="col-xs-12 col-sm-11">
-        <div class="col-12 row q-col-gutter-md">
-          <div class="col-xs-12 col-sm-6">
-            <div class="col-12 text-top0 items-center">
-              ผลการทดลองปฏิบัติหน้าที่ราชการ
-            </div>
-            <div class="col-12">
-              <q-select
-                class="col-12"
-                dense
-                v-model="formData.pass_result"
-                outlined
-                :options="result_option"
-                option-label="name"
-                option-value="value"
-                map-options
-                emit-value
-                :readonly="!status"
-              />
-            </div>
-          </div>
-          <div class="col-xs-12 col-sm-6">
-            <div class="col-12 text-top0 items-center">
-              วัน เดือน ปี ที่ประเมิน
-            </div>
-            <div class="col-12">
-              <datepicker
-                menu-class-name="modalfix"
-                v-model="formData.evaluate_date"
-                :locale="'th'"
-                autoApply
-                :readonly="!status"
-                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
-                    :readonly="!status"
-                    class="full-width datepicker"
-                    :model-value="
-                      formData.evaluate_date != null
-                        ? date2Thai(formData.evaluate_date)
-                        : null
-                    "
-                    :rules="[(val:string) => !!val || `${'วัน เดือน ปี ที่ประเมิน'}`]"
-                  >
-                    <template v-slot:prepend>
-                      <q-icon
-                        name="event"
-                        class="cursor-pointer"
-                        style="color: var(--q-primary)"
-                      >
-                      </q-icon>
-                    </template>
-                  </q-input>
-                </template>
-              </datepicker>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/modules/15_probationReport/views/main.vue b/src/modules/15_probationReport/views/main.vue
index 7d06b53..ba9a0ec 100644
--- a/src/modules/15_probationReport/views/main.vue
+++ b/src/modules/15_probationReport/views/main.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, reactive, type Ref } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -8,7 +8,10 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useProbationReport } from "@/modules/15_probationReport/store";
 
-import type { DataSurvey } from "@/modules/15_probationReport/interface/Main";
+import type {
+  DataSurvey,
+  ProbationReportType,
+} from "@/modules/15_probationReport/interface/Main";
 
 import SurveyPage from "@/modules/15_probationReport/components/01_SurveyPage.vue";
 import ResultPage from "@/modules/15_probationReport/components/02_ResultPage.vue";
@@ -22,7 +25,47 @@ const { showLoader, hideLoader, messageError } = mixin;
 
 const dataSurvey = ref<any>(null);
 const isData = ref<boolean>(true);
-const dataProbation = ref<string>('')
+const dataProbation = ref<string>("");
+const dataResult1 = ref<string>("");
+const dataResult2 = ref<string>("");
+
+const formDataResult = ref<ProbationReportType>({
+  develop_orientation_score: 0,
+  develop_self_learning_score: 0,
+  develop_training_seminar_score: 0,
+  develop_other_training_score: 0,
+  develop_total_score: 0,
+  develop_orientation_percent: 0,
+  develop_self_learning_percent: 0,
+  develop_training_seminar_percent: 0,
+  develop_other_training_percent: 0,
+  develop_total_percent: 0,
+  develop_result: 0,
+  achievement_score: 0,
+  achievement_score_total: 0,
+  achievement_percent: 0,
+  achievement_result: 0,
+  behavior_score: 0,
+  behavior_score_total: 0,
+  behavior_percent: 0,
+  behavior_result: 0,
+  sum_score: 0,
+  sum_percent: 0,
+  reason: "",
+  pass_result: 0,
+  evaluate_date: new Date(),
+});
+
+const dev_options = reactive([
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 2, label: "พัฒนาไม่ครบ 3 ส่วน" },
+]);
+
+const result_option = reactive([
+  { name: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ", value: 1 },
+  { name: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ", value: 2 },
+  { name: "เห็นควรให้ขยายระยะเวลาทดลองปฏิบัติหน้าที่ราชการต่อไปอีก", value: 3 },
+]);
 
 /** ดึง ข้อมูลแบบสำรวจ */
 async function getSurveyData() {
@@ -35,7 +78,26 @@ async function getSurveyData() {
       isData.value = true;
       store.assignId = res.data.result.assignId;
       if (res.data.result.assignId) {
-        await getSalary(res.data.result.assignId);
+        await Promise.all([
+          getSalary(
+            res.data.result.assignId,
+            "ทดลองงาน",
+            "มอบหมายงาน",
+            dataProbation
+          ),
+          getSalary(
+            res.data.result.assignId,
+            "ทดลองงาน",
+            "รายงานผลครั้งที่ 1",
+            dataResult1
+          ),
+          getSalary(
+            res.data.result.assignId,
+            "ทดลองงาน",
+            "รายงานผลครั้งที่ 2",
+            dataResult2
+          ),
+        ]);
       }
       if (data !== null) {
         dataSurvey.value = data;
@@ -49,11 +111,16 @@ async function getSurveyData() {
     });
 }
 
-async function getSalary(id: string) {
+async function getSalary(
+  id: string,
+  name: string,
+  group: string,
+  val: Ref<string>
+) {
   await http
-    .get(config.API.developmentSalaryFile("ทดลองงาน", "มอบหมายงาน", id))
+    .get(config.API.developmentSalaryFile(name, group, id))
     .then((res) => {
-      dataProbation.value = res.data.fileName
+      val.value = res.data.fileName;
     })
     .catch((e) => {
       messageError($q, e);
@@ -102,8 +169,17 @@ onMounted(async () => {
             indicator-color="primary"
           >
             <q-tab name="SURVEY" label="แบบสํารวจความคิดเห็น" />
-            <q-tab name="RESULT" label="ผลการประเมินการฯ" />
-            <q-tab  v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
+            <q-tab
+              v-if="dataResult1"
+              name="RESULT1"
+              label="ผลการประเมินการฯ ครั้งที่ 1"
+            />
+            <q-tab
+              v-if="dataResult2"
+              name="RESULT2"
+              label="ผลการประเมินการฯ ครั้งที่ 2"
+            />
+            <q-tab v-if="dataProbation" name="ASSIGN" label="แบบมอบหมายงานฯ" />
           </q-tabs>
 
           <q-separator />
@@ -116,8 +192,19 @@ onMounted(async () => {
                 :get-survey-data="getSurveyData"
               />
             </q-tab-panel>
-            <q-tab-panel name="RESULT" class="q-pa-none">
-              <ResultPage />
+            <q-tab-panel name="RESULT1" class="q-pa-sm">
+              <ResultPage
+                v-model:form-data="formDataResult"
+                v-model:dev_options="dev_options"
+                v-model:result_option="result_option"
+              />
+            </q-tab-panel>
+            <q-tab-panel name="RESULT2" class="q-pa-sm">
+              <ResultPage
+                v-model:form-data="formDataResult"
+                v-model:dev_options="dev_options"
+                v-model:result_option="result_option"
+              />
             </q-tab-panel>
             <q-tab-panel name="ASSIGN">
               <AssignPage />