From 97aa9fd3de81dab4d340df972e21444d3d335a1a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 11 Aug 2023 16:54:42 +0700
Subject: [PATCH] =?UTF-8?q?api=20=E0=B8=97=E0=B8=94=E0=B8=A5=E0=B8=AD?=
 =?UTF-8?q?=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

---
 src/api/05_placement/api.probation.ts         |   34 +-
 src/api/index.ts                              |    3 +-
 .../probation/FormEvaluation/FormEvaluate.vue |  173 ++-
 .../FormEvaluation/FormEvaluateScore.vue      |  305 +++-
 .../probation/FormEvaluation/FormReport.vue   |  379 ++++-
 .../FormEvaluation/FormSaveResult.vue         |  181 ++-
 .../FormEvaluation/FormSaveResultAdd.vue      | 1306 +++++++++++++++++
 .../probation/FormEvaluation/Header.vue       |   41 +-
 .../probation/FormEvaluation/Template1.vue    |  143 +-
 .../probation/FormEvaluation/Template2.vue    |    4 +-
 .../FormEvaluation/Template2Format2.vue       |   28 +-
 .../components/probation/MainDetail.vue       |    2 +-
 src/modules/05_placement/router.ts            |   15 +-
 13 files changed, 2422 insertions(+), 192 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 1d3f01bfb..d4460f43d 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -3,6 +3,8 @@ const dataOptions = `${env.API_PROBATION_URI}/data-options`;
 const personal = `${env.API_PROBATION_URI}/personal`;
 const calculate = `${env.API_PROBATION_URI}/calculate`;
 const finish = `${env.API_PROBATION_URI}/assign`;
+const evaluate = `${env.API_PROBATION_URI}`;
+
 
 export default {
   competencyOptions: (personalId: string) =>
@@ -23,7 +25,35 @@ export default {
   saveFinish: (personalId: string) =>
     `${finish}/probation-assign?personal_id=${personalId}`,
   personalAdd: () => `${personal}/add`,
-  probationGetAssignList: (personalId:string) => 
-  `${finish}/probation-assign-list?personal_id=${personalId}`
+  probationGetAssignList: (personalId: string) =>
+    `${finish}/probation-assign-list?personal_id=${personalId}`,
   // clearPosition: (personalId:string) => `${placement}/position/clear/${personalId}`
+
+  // บันทึกผล
+  formevaluate: (id: string) => `${evaluate}/evaluate-record?assign_id=${id}`,
+  formevaluateround: (id: string, no: string) => `${evaluate}/evaluate-record?assign_id=${id}&evaluate_no=${no}`,
+  formevaluateRecord: (id: string) => `${evaluate}/evaluate-record/create?assign_id=${id}`,
+  createformevaluate: (id: string) => `${evaluate}/evaluate-record?id=${id}`,
+
+  //แบบประเมินผล (ผู้บังคับบัญชา)
+  evaluateCreate: (id: string) => `${evaluate}/evaluate/create?assign_id=${id}`,
+  evaluatecommader: (id: string, no: string) => `${evaluate}/evaluate?assign_id=${id}&evaluate_no=${no}`,
+  createformCommader: (id: string) => `${evaluate}/evaluate?id=${id}`,
+
+  //แบบประเมินผล (คณะกรรมการ)
+  evaluateChairman: (id: string) => `${evaluate}/evaluate-chairman/create?assign_id=${id}`,
+  evaluateRoundChairman: (id: string, no: string) => `${evaluate}/evaluate-chairman?assign_id=${id}&evaluate_no=${no}`,
+  createformChairman: (id: string) => `${evaluate}/evaluate-chairman?id=${id}`,
+
+  //แบบรายงาน
+  evaluateReportcreate: (id: string) => `${evaluate}/evaluate-result/create?assign_id=${id}`,
+  evaluateReport: (id: string) => `${evaluate}/evaluate-result?assign_id=${id}`,
+  createformReport: (id: string) => `${evaluate}/evaluate-result?id=${id}`,
+
+
+
+
+
+
+
 };
diff --git a/src/api/index.ts b/src/api/index.ts
index 4b6fabe6d..244b63653 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -26,7 +26,8 @@ const config = ref<any>({
       "https://s3cluster.frappet.com/bma-ehr-fpt/organization/strueture/tree_20230712_172702.json",
     MEET_URI: "meet.frappet.com",
     API_RETIREMENT_URI: "https://bma-ehr.frappet.synology.me/api/v1",
-    API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    // API_PROBATION_URI: "https://ehr.joolsoft.com/v1",
+    API_PROBATION_URI: "http://192.168.1.151:7776/v1",
   },
   test: {
     API_URI: "http://localhost:5010/api/v1",
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 5afcc2e7a..c9e40bc45 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -1,12 +1,40 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  success,
+  dateToISO,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const commander = ref<any>([]);
+const round = ref<any>();
+const status = ref<boolean>(true);
+
+const props = defineProps({
+  tab: String,
+});
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -53,14 +81,104 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
+onMounted(async () => {
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+  // console.log(round.value);
+  // console.log(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateCreate(id))
+    .then((res: any) => {
+      // console.log(res);
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      commander.value = res.data.data.commander;
+      option.value.push(commander.value);
+      Autherise.value = commander.value.name;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  // showLoader();
+  await http
+    .get(config.API.evaluatecommader(id, round))
+    .then((res: any) => {
+      // console.log(res);
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavio_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+      console.log(e);
+    })
+    .finally(() => {
+      // hideLoader();
+    });
+};
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
-const dateToday = ref<Date>(new Date("10-10-2023"));
-const dateEnd = ref<Date>(new Date("12-10-2023"));
-const period = ref<number>(1);
+// const dateToday = ref<Date>(new Date("10-10-2023"));
+// const dateEnd = ref<Date>(new Date("12-10-2023"));
+// const period = ref<number>(1);
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
+const option = ref<any>([]);
 
 // part 1
 const knowledge_level = ref<number>(0);
@@ -80,7 +198,7 @@ const behavio_orther = ref<any>({ text: "", level: 0 });
 const behavio_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<num>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -136,6 +254,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     knowledge_level: knowledge_level.value,
     skill_level: skill_level.value,
     competency_level: competency_level.value,
@@ -155,13 +276,14 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_orther: behavio_orther.value,
+    behavior_strength_desc: behavio_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
+    commander_dated: dateToISO(dateAutherise.value),
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -174,6 +296,15 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformCommader(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          messageError($q, e);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -182,21 +313,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (ผู้บังคับบัญชา)</div>
+    </div>
     <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(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</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">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -891,9 +1029,7 @@ const putformData = () => {
     <!-- Footer -->
     <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 text-top2 row items-center">ผู้บังคับบัญชา</div>
         <div class="col-12 row q-col-gutter-md">
           <q-select
             class="col-xs-12 col-sm-8"
@@ -902,6 +1038,7 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -948,7 +1085,7 @@ const putformData = () => {
     <!-- <Footer /> -->
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 4410a1b04..f3bc20646 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -1,12 +1,133 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent, computed } from "vue";
+import { ref, defineAsyncComponent, computed, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  showLoader,
+  hideLoader,
+  dateToISO,
+  success,
+} = mixin;
+const route = useRoute();
+const assignId = ref<string>(route.params.form.toString());
+
+// const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const chairman = ref<any>([]);
+const commander = ref<any>([]);
+const mentors = ref<any>([{ name: "" }, { name: "" }]);
+
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+onMounted(() => {
+  console.log(props);
+  console.log(assignId.value);
+  fecthAssign(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    fetchEvaluate(assignId.value, round.value);
+  }
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateChairman(id))
+    .then((res: any) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      chairman.value = res.data.data.chairman;
+      commander.value = res.data.data.commander;
+      mentors.value = res.data.data.mentors;
+      console.log(mentors.value[0].name);
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const fetchEvaluate = async (id: string, round: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateRoundChairman(id, round))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      learn_level.value = data.knowledge_level;
+      apply_level.value = data.apply_level;
+      success_level.value = data.success_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      orientation.value = data.develop_orientation_score;
+      self_learning.value = data.develop_self_learning_score;
+      training_seminar.value = data.develop_training_seminar_score;
+      other_training.value = data.develop_other_training_score;
+      orientation_percent.value = data.develop_orientation_percent;
+      self_learning_percent.value = data.develop_self_learning_percent;
+      training_seminar_percent.value = data.develop_training_seminar_percent;
+      other_training_percent.value = data.develop_other_training_percent;
+
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list2_1 = [
   { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
@@ -54,8 +175,6 @@ const list2_3 = [
   },
 ];
 
-const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -73,14 +192,23 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 
 // part 3
-const orientation = ref<number>(null);
-const self_learning = ref<number>(null);
-const training_seminar = ref<number>(null);
-const other_training = ref<number>(null);
+const orientation = ref<number>(0);
+const self_learning = ref<number>(0);
+const training_seminar = ref<number>(0);
+const other_training = ref<number>(0);
+const orientation_percent = ref<number>(0);
+const self_learning_percent = ref<number>(0);
+const training_seminar_percent = ref<number>(0);
+const other_training_percent = ref<number>(0);
+const develop_result = ref<any>();
+const develop_result_option = ref<any>([
+  { name: "ไม่ผ่านการทดลองงาน", value: 0 },
+  { name: "ผ่านการทดลองงาน", value: 1 },
+]);
 // footer
 const Autherise = ref<any>(null);
 const dateAutherise = ref<any>(new Date());
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+// const option = ref<any>([]);
 
 // score
 const score1 = computed(() => {
@@ -98,6 +226,22 @@ const score1 = computed(() => {
   }
   return learn_level.value + apply_level.value + success_level.value;
 });
+const achievement_score_total: any = computed(() => {
+  if (
+    etc.value === true &&
+    achievement_other.value.text !== undefined &&
+    achievement_other.value.level !== undefined
+  ) {
+    return 20;
+  }
+  return 15;
+});
+const achievement_result: any = computed(() => {
+  if (percent_score1.value > 60) {
+    return 1;
+  }
+  return 0;
+});
 const score2 = computed(() => {
   let sum_conduct = conduct_level.value.reduce(
     (sum: number, level: number) => sum + level,
@@ -121,7 +265,22 @@ const score2 = computed(() => {
     );
   } else return sum_conduct + sum_moral + sum_discipline;
 });
-const percent_score1: number = computed(() => {
+const behavior_score_total: any = computed(() => {
+  if (
+    etc2.value === true &&
+    behavio_orther.value.text !== undefined &&
+    behavio_orther.value.level !== undefined
+  ) {
+    return 65;
+  } else return 60;
+});
+const behavior_result: any = computed(() => {
+  if (percent_score2.value > 60) {
+    return 1;
+  }
+  return 0;
+});
+const percent_score1: any = computed(() => {
   let num = 0;
   if (etc.value === true) {
     num = 20;
@@ -129,7 +288,7 @@ const percent_score1: number = computed(() => {
   let percent1 = (score1.value / num) * 100;
   return percent1.toFixed(2);
 });
-const percent_score2: number = computed(() => {
+const percent_score2: any = computed(() => {
   let num = 0;
   if (etc2.value === true) {
     num = 65;
@@ -149,6 +308,14 @@ const score4 = computed(() => {
     Number(other_training.value)
   );
 });
+const score5 = computed(() => {
+  return (
+    Number(orientation_percent.value) +
+    Number(self_learning_percent.value) +
+    Number(training_seminar_percent.value) +
+    Number(other_training_percent.value)
+  );
+});
 
 const savaForm = () => {
   let hasError = false;
@@ -185,7 +352,10 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
-    learn_level: learn_level.value,
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    knowledge_level: learn_level.value,
     apply_level: apply_level.value,
     success_level: success_level.value,
     achievement_other: achievement_other.value,
@@ -201,13 +371,27 @@ const putformData = () => {
     discipline3_level: discipline_level.value[2],
     discipline4_level: discipline_level.value[3],
     discipline5_level: discipline_level.value[4],
-    behavio_orther: behavio_orther.value,
-    orientation: Number(orientation.value),
-    self_learning: Number(self_learning.value),
-    training_seminar: Number(training_seminar.value),
-    other_training: Number(other_training.value),
-    total_experiment: Number(score1.value),
-    total_behavior: Number(score2.value),
+    behavior_orther: behavio_orther.value,
+    develop_orientation_score: Number(orientation.value),
+    develop_self_learning_score: Number(self_learning.value),
+    develop_training_seminar_score: Number(training_seminar.value),
+    develop_other_training_score: Number(other_training.value),
+    develop_orientation_percent: Number(orientation_percent.value),
+    develop_self_learning_percent: Number(self_learning_percent.value),
+    develop_training_seminar_percent: Number(training_seminar_percent.value),
+    develop_other_training_percent: Number(other_training_percent.value),
+    achievement_score: Number(score1.value),
+    achievement_percent: Number(percent_score1.value),
+    achievement_score_total: Number(achievement_score_total.value),
+    achievement_result: Number(achievement_result.value),
+    behavior_score: Number(score2.value),
+    behavior_percent: Number(percent_score2.value),
+    behavior_score_total: Number(behavior_score_total.value),
+    behavior_result: Number(behavior_result.value),
+    sum_score: Number(score1.value) + Number(score2.value),
+    sum_percent: Number(percent_score1.value) + Number(percent_score2.value),
+    chairman_dated: dateToISO(dateAutherise.value),
+    develop_result: develop_result.value,
   };
   $q.dialog({
     title: "ยืนยันการบันทึกข้อมูล",
@@ -220,6 +404,19 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      await http
+        .post(config.API.createformChairman(assignId.value), data)
+        .then((res: any) => {
+          console.log(res);
+          success($q, "บันทึกสำเร็จ");
+        })
+        .catch((e: any) => {
+          console.log(e);
+          messageError($q, e);
+        })
+        .finally(() => {
+          fetchEvaluate(assignId.value, round.value);
+        });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
@@ -228,21 +425,28 @@ const putformData = () => {
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบประเมินผล (คณะกรรมการ)</div>
+    </div>
     <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(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</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">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -829,7 +1033,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="orientation" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="orientation_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -839,7 +1043,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="self_learning" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="self_learning_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -849,7 +1053,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="training_seminar" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="training_seminar_percent" />
             </div>
           </div>
           <q-separator class="q-my-xs" />
@@ -861,7 +1065,7 @@ const putformData = () => {
               <q-input dense type="number" v-model="other_training" />
             </div>
             <div class="col">
-              <q-input dense type="number" v-model="text" />
+              <q-input dense type="number" v-model="other_training_percent" />
             </div>
           </div>
           <!-- <q-list dense>
@@ -969,13 +1173,36 @@ const putformData = () => {
             <div class="row q-gutter-md">
               <div class="col-8"><q-item-label> ผลคะแนนรวม</q-item-label></div>
               <div class="col">{{ score4 }}</div>
-              <div class="col">ร้อยละ</div>
+              <div class="col">{{ score5 }}</div>
             </div>
           </div>
         </q-card>
       </div>
     </div>
 
+    <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">5</q-avatar> -->
+          สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12">
+          <q-select
+            class="col-xs-12"
+            dense
+            v-model="develop_result"
+            outlined
+            :options="develop_result_option"
+            option-label="name"
+            option-value="value"
+            label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
+            map-options
+            emit-value
+          />
+        </div>
+      </div>
+    </div>
+
     <!-- Footer -->
     <!-- <Footer /> -->
     <div class="row col-12 q-gutter-lg no-margin">
@@ -987,10 +1214,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="commander.name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1036,10 +1263,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[0].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1085,10 +1312,10 @@ const putformData = () => {
           <q-select
             class="col-xs-12 col-sm-8"
             dense
-            v-model="Autherise"
+            v-model="mentors[1].name"
             outlined
-            :options="option"
             label="ผู้บังคับบัญชา"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1135,17 +1362,15 @@ const putformData = () => {
 
     <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 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"
+            v-model="chairman.name"
             outlined
-            :options="option"
             label="คณะกรรมการ"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1192,7 +1417,7 @@ const putformData = () => {
 
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
index 88123d2de..7fa0612c2 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormReport.vue
@@ -1,31 +1,104 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { QForm, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
 const myForm = ref<QForm>();
 const edit = ref<boolean>(false);
 const mixin = useCounterMixin();
-const { date2Thai, notifyError } = mixin;
-const develop = ref<number>();
-const result = ref<number>();
+const {
+  date2Thai,
+  notifyError,
+  messageError,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
+const route = useRoute();
+const router = useRouter();
+const assignId = ref<string>(route.params.form.toString());
 
-// part new
+const assign = ref<any>([]);
+const mentors = ref<any>([]);
+const commander = ref<any>([]);
+const evaluate = ref<any>([]);
+
+onMounted(() => {
+  fecthAssign(assignId.value);
+  fecthResult(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.evaluateReportcreate(id))
+    .then((res) => {
+      console.log(res);
+      assign.value = res.data.data.assign;
+      mentors.value = res.data.data.mentors;
+
+      director_id.value = res.data.data.commander.name;
+      director_id2.value = mentors.value[0].name;
+      director_id3.value = mentors.value[1].name;
+
+      commander.value.push(res.data.data.commander);
+      optionDirector.value = mentors.value;
+    })
+    .catch((e) => {
+      console.log(e);
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 const date_start = ref<Date>(new Date("10-10-2023"));
 const date_finish = ref<Date>();
+const develop = ref<number>();
+const result = ref<number>();
 const reson = ref<string>("");
+const chairman_dated = ref<string>("");
+const director1_dated = ref<string>("");
+const director2_dated = ref<string>("");
+const fecthResult = async (id: string) => {
+  await http
+    .get(config.API.evaluateReport(id))
+    .then((res: any) => {
+      let data = res.data.data.evaluate;
+      console.log(data);
+      date_start.value = data.date_start;
+      date_finish.value = data.date_finish;
+      develop.value = Number(data.develop_complete);
+      result.value = Number(data.pass_result);
+      reson.value = data.reson;
+      chairman_dated.value = data.chairman_dated;
+      director1_dated.value = data.director1_dated;
+      director2_dated.value = data.director2_dated;
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+};
 
-const options = [{ value: 1, label: "พัฒนาครบ 3 ส่วน" }, { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" }];
-const optionsResult = [{ value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" }, { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" }];
+// part new
+
+const options = [
+  { value: 1, label: "พัฒนาครบ 3 ส่วน" },
+  { value: 0, label: "พัฒนาไม่ครบ 3 ส่วน" },
+];
+const optionsResult = [
+  { value: 1, label: "ไม่ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้รับราชการต่อ" },
+  { value: 0, label: "ต่ำกว่ามาตรฐานที่กำหนด เห็นควรให้ออกจากราชการ" },
+];
 
 const director_id = ref<any>(null);
-const director_dated = ref<any>();
+
 const director_id2 = ref<any>(null);
-const director_dated2 = ref<any>();
 const director_id3 = ref<any>(null);
-const director_dated3 = ref<any>();
-const optionDirector = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const optionDirector = ref<any>([]);
 
 const savaForm = async () => {
   await myForm.value!.validate().then((result: boolean) => {
@@ -41,40 +114,56 @@ const savaForm = async () => {
       })
         .onOk(async () => {
           postData();
-
         })
-        .onCancel(() => { })
-        .onDismiss(() => { });
+        .onCancel(() => {})
+        .onDismiss(() => {});
     }
   });
-
 };
 
 const postData = async () => {
   const data = await {
-    date_start: date_start.value,
+    start_date: date_start.value,
     date_finish: date_finish.value,
-    director_id: director_id.value,
-    director_dated: director_dated.value,
-    director_id2: director_id2.value,
-    director_dated2: director_dated2.value,
-    director_id3: director_id3.value,
-    director_dated3: director_dated3.value,
-  }
+    develop_complete: develop.value,
+    pass_result: result.value,
+    reson: reson.value,
+    chairman_dated: chairman_dated.value,
+    director1_dated: director1_dated.value,
+    director2_dated: director2_dated.value,
+  };
 
-  console.log("postData===>", data)
+  console.log("postData===>", data);
+  await http
+    .post(config.API.createformReport(assignId.value), data)
+    .then(() => {
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      console.log(e);
+      messageError($q, e);
+    });
 };
 </script>
 
 <template>
   <div class="row col-12 q-mr-md">
     <q-form ref="myForm">
-
+      <div class="toptitle text-dark col-12 row items-center">
+        <div>แบบรายงานการประเมินฯ</div>
+      </div>
       <div class="row col-12">
         <div class="col-12 row q-col-gutter-md">
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_start" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_start"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -82,12 +171,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_start != null ? date2Thai(date_start) : null
-                  " :label="`${'ระหว่างวันที่'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
-  ]">
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    date_start != null ? date2Thai(date_start) : null
+                  "
+                  :label="`${'ระหว่างวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -95,8 +194,15 @@ const postData = async () => {
             </datepicker>
           </div>
           <div class="col-xs-12 col-sm-6">
-            <datepicker menu-class-name="modalfix" v-model="date_finish" :locale="'th'" autoApply borderless
-              :enableTimePicker="false" week-start="0">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="date_finish"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
               <template #year="{ year }">
                 {{ year + 543 }}
               </template>
@@ -104,12 +210,22 @@ const postData = async () => {
                 {{ parseInt(value + 543) }}
               </template>
               <template #trigger>
-                <q-input outlined dense class="full-width datepicker" :model-value="date_finish != null ? date2Thai(date_finish) : null
-                  " :label="`${'ถึงวันที่'}`" :rules="[
-    (val) => !!val || `${'กรุณาเลือกวันที่'}`,
-  ]">
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker"
+                  :model-value="
+                    date_finish != null ? date2Thai(date_finish) : null
+                  "
+                  :label="`${'ถึงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+                >
                   <template v-slot:prepend>
-                    <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
                     </q-icon>
                   </template>
                 </q-input>
@@ -121,24 +237,62 @@ const postData = async () => {
 
       <div class="col-12 row q-mt-xs">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-            :options="options" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined v-model="develop"
-            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ" />
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกการพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="options"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            option-value="value"
+            outlined
+            v-model="develop"
+            label="การพัฒนาในระหว่างทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
       <div class="col-12 row q-mt-lg">
         <div class="col-xs-12 col-sm-6">
-          <q-select :rules="[(val) => !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ']" hide-bottom-space
-            :options="optionsResult" class="col-xs-12 col-sm-6" dense borderless option-label="label" outlined
-            v-model="result" label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ" />
-
+          <q-select
+            :rules="[
+              (val) =>
+                !!val || 'กรุณาเลือกผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ',
+            ]"
+            hide-bottom-space
+            :options="optionsResult"
+            class="col-xs-12 col-sm-6"
+            dense
+            borderless
+            emit-value
+            map-options
+            option-label="label"
+            outlined
+            v-model="result"
+            label="ผลการประเมินการทดลองปฏิบัติหน้าที่ราชการ"
+          />
         </div>
       </div>
 
       <div class="col-12 row q-mt-lg">
         <div class="col-12">
-          <q-input hide-bottom-space :readonly="edit" dense borderless :outlined="!edit" class="bg-white" type="textarea"
-            v-model="reson" label="เหตุผล" :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"/>
+          <q-input
+            hide-bottom-space
+            :readonly="edit"
+            dense
+            borderless
+            :outlined="!edit"
+            class="bg-white"
+            type="textarea"
+            v-model="reson"
+            label="เหตุผล"
+            :rules="[(val) => !!val || 'กรุณาระบุเหตุผล']"
+          />
         </div>
       </div>
 
@@ -152,11 +306,26 @@ const postData = async () => {
             ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id"
+              outlined
+              :options="commander"
+              label=""
+              option-label="name"
+              disable
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="chairman_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -164,10 +333,22 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated != null ? date2Thai(director_dated) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      chairman_dated != null ? date2Thai(chairman_dated) : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -182,11 +363,26 @@ const postData = async () => {
             ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id2"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated2" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director1_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -194,10 +390,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated2 != null ? date2Thai(director_dated2) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director1_dated != null
+                        ? date2Thai(director1_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -212,11 +422,26 @@ const postData = async () => {
             ผู้มีอำนาจสั่งบรรจุตามมาตรา 52
           </div>
           <div class="col-12 row q-col-gutter-md">
-            <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined :options="optionDirector"
-              label="" />
+            <q-select
+              class="col-xs-12 col-sm-8"
+              dense
+              v-model="director_id3"
+              outlined
+              :options="optionDirector"
+              label=""
+              option-label="name"
+             
+            />
             <div class="col-xs-12 col-sm-4">
-              <datepicker menu-class-name="modalfix" v-model="director_dated3" :locale="'th'" autoApply borderless
-                :enableTimePicker="false" week-start="0">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="director2_dated"
+                :locale="'th'"
+                autoApply
+                borderless
+                :enableTimePicker="false"
+                week-start="0"
+              >
                 <template #year="{ year }">
                   {{ year + 543 }}
                 </template>
@@ -224,10 +449,24 @@ const postData = async () => {
                   {{ parseInt(value + 543) }}
                 </template>
                 <template #trigger>
-                  <q-input outlined dense class="full-width datepicker col-3" :model-value="director_dated3 != null ? date2Thai(director_dated3) : null
-                    " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                  <q-input
+                    outlined
+                    dense
+                    class="full-width datepicker col-3"
+                    :model-value="
+                      director2_dated != null
+                        ? date2Thai(director2_dated)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                  >
                     <template v-slot:prepend>
-                      <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
                       </q-icon>
                     </template>
                   </q-input>
@@ -266,4 +505,4 @@ const postData = async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index d390c77db..de36f904d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -1,14 +1,127 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
-import { formatDate } from "@fullcalendar/core";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const $q = useQuasar();
+const route = useRoute();
 const probationStore = useProbationDataStore();
-
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(true);
+const round = ref<any>();
+
+const props = defineProps({
+  tab: String,
+});
+
+onMounted(async () => {
+  console.log(props.tab);
+  await fecthFormdata(assignId.value);
+  if (props.tab !== undefined) {
+    round.value = props.tab.charAt(4);
+    await fecthFormRound(assignId.value, round.value);
+  }
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      // console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+const fecthFormRound = async (id: string, no: string) => {
+  showLoader();
+  await http
+    .get(config.API.formevaluateround(id, no))
+    .then((res: any) => {
+      console.log(res);
+      let data = res.data.data.evaluate;
+      start_date.value = data.date_start;
+      date_finish.value = data.date_finish;
+      knowledge_level.value = data.knowledge_level;
+      skill_level.value = data.skill_level;
+      competency_level.value = data.competency_level;
+      learn_level.value = data.learn_level;
+      apply_level.value = data.apply_level;
+      achievement_other.value.text = data.achievement_other_desc;
+      achievement_other.value.level = data.achievement_other_level;
+      achievement_strength_desc.value = data.achievement_strength_desc;
+      achievement_improve_desc.value = data.achievement_improve_desc;
+      conduct_level.value[0] = data.conduct1_level;
+      conduct_level.value[1] = data.conduct2_level;
+      conduct_level.value[2] = data.conduct3_level;
+      conduct_level.value[3] = data.conduct4_level;
+      moral_level.value[0] = data.moral1_level;
+      moral_level.value[1] = data.moral2_level;
+      moral_level.value[2] = data.moral3_level;
+      discipline_level.value[0] = data.discipline1_level;
+      discipline_level.value[1] = data.discipline2_level;
+      discipline_level.value[2] = data.discipline3_level;
+      discipline_level.value[3] = data.discipline4_level;
+      discipline_level.value[4] = data.discipline5_level;
+      behavio_orther.value.text = data.behavior_other_desc;
+      behavio_orther.value.level = data.behavior_other_level;
+      behavior_strength_desc.value = data.behavior_strength_desc;
+      behavior_improve_desc.value = data.behavior_improve_desc;
+      orientation.value = data.orientation.toString();
+      self_learning.value = data.self_learning.toString();
+      training_seminar.value = data.training_seminar.toString();
+      other_training.value = data.other_training.toString();
+      if (
+        data.achievement_other_desc !== "" &&
+        data.achievement_other_level !== null
+      ) {
+        etc.value = true;
+      }
+      if (
+        data.behavior_other_desc !== "" &&
+        data.behavior_other_level !== null
+      ) {
+        etc2.value = true;
+      }
+      status.value = false;
+    })
+    .catch((e) => {
+      console.log(e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
 
 const list1_1 = [
   { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
@@ -69,10 +182,8 @@ const list2_3 = [
     label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
   },
 ];
-const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
+const option = ref<any>([]);
 
-const mixin = useCounterMixin();
-const { date2Thai, success, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
@@ -112,10 +223,10 @@ const etc2 = ref<any>(false); // checkBox 2.4
 const behavio_orther = ref<any>({ text: "", level: 0 });
 // const etc_text2 = ref<string>("");
 // const ext_value2 = ref<number>(0);
-const behavio_strength_desc = ref<string>("");
+const behavior_strength_desc = ref<string>("");
 const behavior_improve_desc = ref<string>("");
 // part 3
-const orientation = ref<nu>(null);
+const orientation = ref<any>(null);
 const self_learning = ref<any>(null);
 const training_seminar = ref<any>(null);
 const other_training = ref<any>(null);
@@ -166,13 +277,13 @@ const savaForm = () => {
     competency_level.value === 0 ||
     learn_level.value === 0 ||
     apply_level.value === 0 ||
-    success_level.value === 0 ||
+    // success_level.value === 0 ||
     achievement_strength_desc.value === "" ||
     achievement_improve_desc.value === "" ||
     conduct_level.value.length < 4 ||
     moral_level.value.length < 3 ||
     discipline_level.value.length < 5 ||
-    behavio_strength_desc.value === "" ||
+    behavior_strength_desc.value === "" ||
     behavior_improve_desc.value === "" ||
     orientation.value === null ||
     self_learning.value === null ||
@@ -200,6 +311,9 @@ const savaForm = () => {
 };
 const putformData = () => {
   const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
     evaluate_expenct_level: evaluate_expenct_level.value,
     evaluate_ouptut: evaluate_ouptut.value,
     knowledge_level: knowledge_level.value,
@@ -207,7 +321,7 @@ const putformData = () => {
     competency_level: competency_level.value,
     learn_level: learn_level.value,
     apply_level: apply_level.value,
-    success_level: success_level.value,
+    // success_level: success_level.value,
     achievement_other: achievement_other.value,
     // achievement_other_desc: etc_text.value,
     // achievement_other_level: ext_value.value,
@@ -228,13 +342,13 @@ const putformData = () => {
     // behavio_orther_desc: etc_text2.value,
     // behavio_orther_level: ext_value2.value,
     behavio_orther: behavio_orther.value,
-    behavio_strength_desc: behavio_strength_desc.value,
+    behavior_strength_desc: behavior_strength_desc.value,
     behavior_improve_desc: behavior_improve_desc.value,
     orientation: Number(orientation.value),
     self_learning: Number(self_learning.value),
     training_seminar: Number(training_seminar.value),
     other_training: Number(other_training.value),
-
+    assessor_dated: dateToISO(dateAutherise.value),
     // commander_dated: dateAutherise.value,
   };
   $q.dialog({
@@ -248,29 +362,48 @@ const putformData = () => {
   })
     .onOk(async () => {
       console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
 </script>
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
+    <div class="toptitle text-dark col-12 row items-center">
+      <div>แบบบันทึกผล</div>
+    </div>
     <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(assign.date_start)
+        }}</span>
         ถึงวันที
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{
+          date2Thai(assign.date_finish)
+        }}</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">{{ "ครั้งที่" + round }}</span>
         ระหว่างวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(start_date) }}</span>
         ถึงวันที่
-        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+        <span class="text-black q-px-sm">{{ date2Thai(date_finish) }}</span>
       </div>
       <div class="col-12 q-pt-md">
         <q-separator size="3px" color="grey-2" />
@@ -590,7 +723,7 @@ const putformData = () => {
         </q-list>
       </q-card>
 
-      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+      <!-- <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section>
@@ -627,7 +760,7 @@ const putformData = () => {
             </q-item-section>
           </q-item>
         </q-list>
-      </q-card>
+      </q-card> -->
 
       <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
@@ -635,7 +768,7 @@ const putformData = () => {
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.8 อื่นๆ
+                1.7 อื่นๆ
                 <q-checkbox
                   class="q-ml-sm"
                   dense
@@ -965,7 +1098,7 @@ const putformData = () => {
           <q-input
             outlined
             dense
-            v-model="behavio_strength_desc"
+            v-model="behavior_strength_desc"
             class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
             lazy-rules
             type="textarea"
@@ -1129,6 +1262,8 @@ const putformData = () => {
             outlined
             :options="option"
             label="ผู้บังคับบัญชา"
+            option-label="name"
+            disable
           />
           <div class="col-xs-12 col-sm-4">
             <datepicker
@@ -1174,7 +1309,7 @@ const putformData = () => {
     </div>
     <q-toolbar class="text-primary">
       <q-space />
-      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
     </q-toolbar>
   </div>
 </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
new file mode 100644
index 000000000..d665e8273
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -0,0 +1,1306 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+// import { formatDate } from "@fullcalendar/core";
+
+import { useRoute, useRouter } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const probationStore = useProbationDataStore();
+const mixin = useCounterMixin();
+const { date2Thai, success, notifyError, dateToISO, messageError } = mixin;
+const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+
+const person = ref<any>([]);
+const assign = ref<any>([]);
+const evaluate_no = ref<string>("");
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const round = ref<number>();
+
+onMounted(async () => {
+  await fecthFormdata(assignId.value);
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecord(id))
+    .then((res: any) => {
+      console.log(res);
+      evaluate_no.value = res.data.data.evaluate_no;
+      start_date.value = res.data.data.start_date;
+      date_finish.value = res.data.data.end_date;
+      round.value = res.data.data.evaluate_no;
+
+      person.value = res.data.data.person;
+      assign.value = res.data.data.assign;
+      option.value.push(res.data.data.director);
+      Autherise.value = res.data.data.director.name;
+    })
+    .catch((e: any) => {
+      console.log(e);
+    });
+};
+
+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 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 option = ref<any>([]);
+
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+
+// part 1
+const evaluate_expenct_level = ref<any>([
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
+]);
+const evaluate_ouptut = ref<any>([
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+]);
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false); // checkBox 1.8
+const achievement_other = ref<any>({ text: "", level: 0 });
+// const etc_text = ref<string>("");
+// const ext_value = ref<number>(0);
+const achievement_strength_desc = ref<string>("");
+const achievement_improve_desc = ref<string>("");
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>({ text: "", level: 0 });
+// const etc_text2 = ref<string>("");
+// const ext_value2 = ref<number>(0);
+const behavior_strength_desc = ref<string>("");
+const behavior_improve_desc = ref<string>("");
+// part 3
+const orientation = ref<any>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+
+//rules
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+const achievement_strengthRef = ref<any>(null);
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const achievement_inproveRef = ref<any>(null);
+const achievement_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  achievement_strengthRef.value.validate();
+  achievement_inproveRef.value.validate();
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+
+  let hasError = false;
+  const filterlevel1_1 = evaluate_expenct_level.value.filter(
+    (e: any) => e.level == 0
+  );
+  const filter_ouptut1_2 = evaluate_ouptut.value.filter(
+    (e: any) => e.level == 0 || e.text == ""
+  );
+
+  if (
+    filterlevel1_1.length != 0 ||
+    filter_ouptut1_2.length != 0 ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    achievement_improve_desc.value === "" ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavior_strength_desc.value === "" ||
+    behavior_improve_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        behavio_orther.value.text == undefined ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    evaluate_no: evaluate_no.value,
+    start_date: start_date.value,
+    date_finish: date_finish.value,
+    evaluate_expenct_level: evaluate_expenct_level.value,
+    evaluate_ouptut: evaluate_ouptut.value,
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    // achievement_other_desc: etc_text.value,
+    // achievement_other_level: ext_value.value,
+    achievement_strength_desc: achievement_strength_desc.value,
+    achievement_improve_desc: achievement_improve_desc.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    // behavio_orther_desc: etc_text2.value,
+    // behavio_orther_level: ext_value2.value,
+    behavio_orther: behavio_orther.value,
+    behavior_strength_desc: behavior_strength_desc.value,
+    behavior_improve_desc: behavior_improve_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+    assessor_dated: dateToISO(dateAutherise.value),
+    // commander_dated: dateAutherise.value,
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+      saveformdata(data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.createformevaluate(assignId.value), data)
+    .then((res: any) => {
+      console.log(res);
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+</script>
+
+<template>
+  <q-card class="my-card" flat bordered>
+    <q-item>
+      <q-item-section>
+        <q-toolbar>
+          <div
+            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+          >
+            <q-btn
+              icon="mdi-arrow-left"
+              unelevated
+              round
+              dense
+              flat
+              color="primary"
+              class="q-mr-sm"
+              @click="router.go(-1)"
+            />
+            การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
+          </div>
+        </q-toolbar>
+      </q-item-section>
+    </q-item>
+
+    <q-separator />
+
+    <q-card-section>
+      <q-separator vertical />
+
+      <q-card-section class="col-4">
+        <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(assign.date_start)
+              }}</span>
+              ถึงวันที
+              <span class="text-black q-px-sm">{{
+                date2Thai(assign.date_finish)
+              }}</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">{{
+                "ครั้งที่" + round
+              }}</span>
+              ระหว่างวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(start_date)
+              }}</span>
+              ถึงวันที่
+              <span class="text-black q-px-sm">{{
+                date2Thai(date_finish)
+              }}</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="evaluate_expenct_level[i].level"
+                      :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="evaluate_ouptut[i].text"
+                      class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                      lazy-rules
+                      type="textarea"
+                      label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                      hide-bottom-space
+                      :row="1"
+                      :rules="evaluate_ouptutRules"
+                    />
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="evaluate_ouptut[i].level"
+                      :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="knowledge_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="skill_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="competency_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="learn_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="apply_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="success_level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.8 อื่นๆ
+                      <q-checkbox
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-rating
+                      v-model="achievement_other.level"
+                      max="5"
+                      size="sm"
+                      color="grey"
+                      :color-selected="ratingColors"
+                      label="ระดับการประเมินพฤติกรรม"
+                    >
+                      <template v-slot:tip-1>
+                        <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+
+          <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="achievement_strength_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="กรอกจุดเด่น"
+                hide-bottom-space
+                :row="5"
+                :rules="achievement_strengthRules"
+                ref="achievement_strengthRef"
+              />
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+              </div>
+              <q-input
+                outlined
+                dense
+                v-model="achievement_improve_desc"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                hide-bottom-space
+                label="กรอกสิ่งที่ควรปรับปรุง"
+                :row="5"
+                :rules="achievement_inproveRules"
+                ref="achievement_inproveRef"
+              />
+            </div>
+          </div>
+
+          <!-- Part 2 -->
+          <!-- <Part2 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.1 ความประพฤติ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="conduct_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.2 ความมีคุณธรรมจริยธรรม
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_2" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="moral_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.3 การรักษาวินัย
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_3" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="discipline_level[i]"
+                        :val="list.id"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.4 อื่นๆ
+                <q-checkbox
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc2"
+                  @click="
+                    (behavio_orther.text = ''), (behavio_orther.level = 0)
+                  "
+                />
+              </div>
+              <q-card
+                v-if="etc2"
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-input
+                          v-model="behavio_orther.text"
+                          label="กรอกอื่นๆ"
+                          dense
+                          lazy-rules
+                          autogrow
+                          hide-bottom-space
+                          outlined
+                          class="bg-white"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                          ]"
+                        />
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-rating
+                        v-model="behavio_orther.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
+                        <template v-slot:tip-1>
+                          <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                        </template>
+                      </q-rating>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <!-- <FormComment /> -->
+            <div class="row col-12 q-gutter-lg no-margin">
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  จุดเด่น (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_strength_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  label="กรอกจุดเด่น"
+                  hide-bottom-space
+                  :row="5"
+                  :rules="behavio_strengthRules"
+                  ref="behavio_strengthRef"
+                />
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  outlined
+                  dense
+                  v-model="behavior_improve_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  hide-bottom-space
+                  label="กรอกสิ่งที่ควรปรับปรุง"
+                  :row="5"
+                  :rules="behavio_inproveRules"
+                  ref="behavio_inproveRef"
+                />
+              </div>
+            </div>
+          </div>
+
+          <!-- Part 3 -->
+          <!-- <Part3 /> -->
+          <div class="row col-12 q-gutter-lg no-margin">
+            <div class="col-12 row justify-center">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+                การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>1. การปฐมนิเทศ</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="orientation"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="self_learning"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="training_seminar"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" />
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label
+                        >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด
+                        (ถ้ามี)</q-item-label
+                      >
+                    </q-item-section>
+                    <q-item-section side>
+                      <div class="row">
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="1"
+                          label="ดำเนินการเเล้ว"
+                        />
+                        <q-radio
+                          checked-icon="task_alt"
+                          unchecked-icon="panorama_fish_eye"
+                          v-model="other_training"
+                          val="0"
+                          label=" ยังไม่ได้ดำเนินการ"
+                        />
+                      </div>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+          </div>
+
+          <!-- Footer -->
+          <!-- <Footer /> -->
+          <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="ผู้บังคับบัญชา"
+                  option-label="name"
+                  disable
+                />
+                <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>
+          <q-toolbar class="text-primary">
+            <q-space />
+            <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+          </q-toolbar>
+        </div>
+      </q-card-section>
+    </q-card-section>
+  </q-card>
+</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
index 5e87f4d44..05c1dcc30 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Header.vue
@@ -1,23 +1,43 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
-const tabHead = ref<string>("save1");
+import { ref, watch, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
 
+const router = useRouter();
+
+const tabHead = ref<string>("save1");
 const props = defineProps({
   changeTab: {
     type: Function,
     default() {
-      return 'Default function'
-    }
-  }
-})
+      return "Default function";
+    },
+  },
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props);
+});
 
 watch(tabHead, () => {
-  props.changeTab(tabHead.value)
+  console.log(props);
+
+  props.changeTab(tabHead.value);
 });
+const nextPage = () => {
+  if (props.activeTab) {
+    router.push(
+      "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885"
+    );
+  }
+
+  // const url =
+  //   "/probation/detail/add/08db721d-ade4-480e-8d84-0853946a0ea5/f4ce5428-98b6-4425-88fe-24c29db9f885";
+  // window.open(url, "_blank");
+};
 </script>
 
 <template>
-      <q-header class="bg-grey-1">
+  <q-header class="bg-grey-1">
     <div class="bg-grey-1">
       <div class="col-12 row q-gutter-x-md items-center">
         <q-tabs
@@ -103,7 +123,7 @@ watch(tabHead, () => {
             </q-btn> -->
         </q-tabs>
         <div>
-          <q-btn color="blue" flat dense icon="mdi-plus">
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
             <q-tooltip> เพิ่ม </q-tooltip>
           </q-btn>
         </div>
@@ -111,5 +131,4 @@ watch(tabHead, () => {
       <q-separator />
     </div>
   </q-header>
-
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
index 251df64ee..d930a13b9 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1.vue
@@ -1,31 +1,152 @@
 <script setup lang="ts">
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, watch, onMounted } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, success } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+
+const evaluate = ref<any>([]);
+const tabHead = ref<string>("save1");
+const tabs = ref<any>([]);
 const tab = ref<string>("save1");
+const activeTab = ref<string>("tab2");
+
+const props = defineProps({
+  activeTab: String,
+});
+onMounted(() => {
+  console.log(props.activeTab);
+  // fecthAssign(assignId.value);
+});
+watch(props, () => {
+  console.log(props);
+});
+// const fecthAssign = async (id: string) => {
+//   showLoader();
+//   await http
+//     .get(config.API.formevaluate(id))
+//     .then((res: any) => {
+//       evaluate.value = res.data.data.evaluate;
+//       tabs.value = evaluate.value;
+
+//       console.log(tabs.value);
+//     })
+//     .catch((e: any) => {
+//       console.log(e);
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// };
+
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+  console.log(tabVal);
+  tab.value = tabVal;
+};
+const nextPage = () => {
+  const newTabLabel = tabs.value.length + 1;
+  tabs.value.push({ no: newTabLabel });
+};
 
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormSaveResult = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue"
+    )
+);
+</script>
 
 <template>
-  <Header :change-tab="changeTab" />
+  <Header :change-tab="changeTab" :activeTab="activeTab" />
+  <!-- <q-header class="bg-grey-1">
+    <div class="bg-grey-1">
+      <div class="col-12 row q-gutter-xs-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
+            v-for="tabData in tabs"
+            :key="tabData.no"
+            :name="tabData.no"
+            :label="'ครั้งที่' + tabData.no"
+            @click="changeTab('save' + tabData.no)"
+          >
+            <q-btn
+              size="12px"
+              flat
+              dense
+              icon="mdi-download"
+              :disable="tabHead !== tabData.no"
+              :color="tabHead !== tabData.no ? '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>
+        </q-tabs>
+        <div>
+          <q-btn color="blue" flat dense icon="mdi-plus" @click="nextPage">
+            <q-tooltip> เพิ่ม </q-tooltip>
+          </q-btn>
+        </div>
+      </div>
+      <q-separator />
+    </div>
+  </q-header> -->
+  <!-- <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel
+        v-for="tabName in tabs"
+        :key="tabName"
+        :name="'save' + tabName.no"
+      >
+        <FormSaveResult :tab="tab" />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container> -->
 
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormSaveResult />
+        <FormSaveResult :tab="tab" />
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
index 72f5cc6db..8c7ac36af 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2.vue
@@ -18,11 +18,11 @@ const FormEvaluate = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab" />
       </q-tab-panel>
 
       <q-tab-panel name="save2">
-        <FormEvaluate />
+        <FormEvaluate :tab="tab"/>
       </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
index 3e5e91bdf..85be758b1 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -2,15 +2,21 @@
 import { ref, defineAsyncComponent } from "vue";
 const tab = ref<string>("save1");
 const changeTab = (tabVal: string) => {
-  tab.value = tabVal
-}
+  tab.value = tabVal;
+};
 const Header = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
 );
 const FormEvaluateScore = defineAsyncComponent(
-  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
-)
-</script>  
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue"
+    )
+);
+</script>
 
 <template>
   <Header :change-tab="changeTab" />
@@ -18,12 +24,12 @@ const FormEvaluateScore = defineAsyncComponent(
   <q-page-container>
     <q-tab-panels v-model="tab" animated>
       <q-tab-panel name="save1">
-        <FormEvaluateScore />
+        <FormEvaluateScore :tab="tab" />
       </q-tab-panel>
 
-      <!-- <q-tab-panel name="save2">
-        <FormEvaluateScore />
-      </q-tab-panel> -->
+      <q-tab-panel name="save2">
+        <FormEvaluateScore :tab="tab" />
+      </q-tab-panel>
     </q-tab-panels>
   </q-page-container>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 0eade7fc3..8ad5c3a0f 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -112,7 +112,7 @@ const activeTab = ref<string>("tab1");
             </q-tab-panel>
 
             <q-tab-panel name="tab2">
-              <TabsTemplate1 />
+              <TabsTemplate1 :activeTab="activeTab"/>
             </q-tab-panel>
 
             <q-tab-panel name="tab3">
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index 614adfb7c..81d7b1e73 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -50,10 +50,11 @@ const RepatriationOrderAdd = () =>
 const receiveMain = () =>
   import("@/modules/05_placement/components/Receive/receiveMain.vue");
 
-  const receiveDetail = () =>
+const receiveDetail = () =>
   import("@/modules/05_placement/components/Receive/receiveDetail.vue");
-  const ReceiveAdd = () =>
+const ReceiveAdd = () =>
   import("@/modules/05_placement/components/Receive/FormAdd.vue");
+const FormSaveResultAdd = () => import("/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue")
 
 export default [
   {
@@ -156,6 +157,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/detail/add/:id/:form",
+    name: "probationFormAdd",
+    component: FormSaveResultAdd,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
   {
     path: "/probation/work/add",
     name: "probationWorkAdd",