From 9a37db52197949f2d3d1b54a3275c6998cdfbec4 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 15 Sep 2023 11:50:43 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=9A=E0=B8=B1=E0=B8=99=E0=B8=97?=
 =?UTF-8?q?=E0=B8=B6=E0=B8=81=E0=B8=9C=E0=B8=A5=E0=B8=9C=E0=B8=B9=E0=B9=89?=
 =?UTF-8?q?=E0=B8=9A=E0=B8=B1=E0=B8=8D=E0=B8=8A=E0=B8=B2=E0=B8=81=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/05_placement/api.probation.ts         |    5 +-
 .../FormEvaluation/FormSaveResult.vue         |    5 +-
 .../FormSaveResultAddCommander.vue            | 1453 +++++++++++++++++
 .../FormEvaluation/FormSaveResultCommader.vue | 1407 ++++++++++++++++
 .../FormEvaluation/Template1Commader.vue      |  175 ++
 .../components/probation/MainDetail.vue       |   35 +-
 src/modules/05_placement/router.ts            |   11 +
 src/modules/05_placement/storeProbation.ts    |    4 +-
 .../components/report/Report_01.vue           |    4 +-
 9 files changed, 3090 insertions(+), 9 deletions(-)
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
 create mode 100644 src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue

diff --git a/src/api/05_placement/api.probation.ts b/src/api/05_placement/api.probation.ts
index 2692651c3..8972bc6f3 100644
--- a/src/api/05_placement/api.probation.ts
+++ b/src/api/05_placement/api.probation.ts
@@ -42,7 +42,10 @@ export default {
   formevaluateRecord: (id: string) => `${evaluate}/evaluate-record/create?assign_id=${id}`,
   createformevaluate: (id: string) => `${evaluate}/evaluate-record?assign_id=${id}`,
   editFormEvaluate: (id: string, evaluate_id: string) => `${evaluate}/evaluate-record?assign_id=${id}&evaluate_id=${evaluate_id}`,
-
+  // บันทึกผล (ผู้บังคับบัญชา)
+  formevaluateCommander: (id: string) => `${evaluate}/evaluate-record/commander?assign_id=${id}`,
+  formevaluateRecordCommander: (id: string) => `${evaluate}/evaluate-record/create/commander?assign_id=${id}`,
+  editEvaluateCommander: (id: string, evaluate_id: string) => `${evaluate}/evaluate-record/commander?assign_id=${id}&evaluate_id=${evaluate_id}`,
   //แบบประเมินผล (ผู้บังคับบัญชา)
   evaluateCreate: (id: string) => `${evaluate}/evaluate/create?assign_id=${id}`,
   evaluatecommader: (id: string, no: string) => `${evaluate}/evaluate?assign_id=${id}&evaluate_no=${no}`,
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index ee88caea5..1d12ce364 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -9,7 +9,7 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import criterion from "@/modules/05_placement/components/Other/Criterion.vue"
+import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 
 const router = useRouter();
 const routeName = router.currentRoute.value.name;
@@ -382,7 +382,7 @@ const editData = async (data: any) => {
 <template>
   <div class="row col-12 no-margin q-pa-sm">
     <div class="toptitle text-dark col-12 row items-center q-gutter-md">
-      <div>แบบบันทึกผล</div>
+      <div>แบบบันทึกผล (ผู้ดูเเล)</div>
       <!-- <q-space /> -->
       <div v-if="status == false">
         <q-btn
@@ -478,7 +478,6 @@ const editData = async (data: any) => {
                   label="ระดับการประเมินพฤติกรรม"
                   :disable="!status"
                 >
-
                   <template v-slot:tip-1>
                     <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                   </template>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
new file mode 100644
index 000000000..958e79484
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
@@ -0,0 +1,1453 @@
+<script setup lang="ts">
+import { ref, onMounted, watch, computed } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+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";
+
+import criterion from "@/modules/05_placement/components/Other/Criterion.vue"
+
+const $q = useQuasar();
+const route = useRoute();
+const router = useRouter();
+const probationStore = useProbationDataStore();
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  dialogConfirm,
+  dialogMessageNotify,
+} = mixin;
+const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.id.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>();
+
+const checkArray = ref<number>(0);
+const alerts = Array(20)
+  .fill(null)
+  .map(() => ref<boolean>(false));
+onMounted(async () => {
+  await fecthFormdata(assignId.value);
+});
+const fecthFormdata = async (id: string) => {
+  await http
+    .get(config.API.formevaluateRecordCommander(id))
+    .then((res: any) => {
+      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;
+
+      list1_1.value = res.data.data.assign_output;
+      res.data.data.assign_output.forEach((e: any) => {
+        list1_2.push({ id: "", label: "" });
+      });
+      evaluate_expenct_level.value = res.data.data.assign_output.map(
+        (e: any) => ({
+          id: e.id,
+          labal: e.output_desc,
+        })
+      );
+      evaluate_ouptut.value = res.data.data.assign_output.map((e: any) => ({
+        id: e.id,
+        text: "",
+      }));
+      checkArray.value = list1_1.value.length;
+    })
+    .catch((e: any) => {});
+};
+
+const list1_1 = ref<any>([
+  // { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
+  // { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
+  // { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
+  // { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
+  // { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+]);
+const list1_2 = [{ id: "", label: "" }];
+
+const list2_1 = probationStore.behavior_no1;
+const list2_2 = probationStore.behavior_no2;
+const list2_3 = probationStore.behavior_no3;
+
+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>([]);
+
+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 lengthconduct = computed(() => {
+  return conduct_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthmoral_level = computed(() => {
+  return moral_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthdiscipline_level = computed(() => {
+  return discipline_level.value.filter((item: number) => item !== 0).length;
+});
+const lengthevaluate_expenct_level = computed(() => {
+  return evaluate_expenct_level.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+const lengthevaluate_ouptut = computed(() => {
+  return evaluate_ouptut.value.filter(
+    (item: any) => item.level !== undefined && item.level !== 0
+  ).length;
+});
+const variablesToWatch = [
+  knowledge_level,
+  skill_level,
+  competency_level,
+  learn_level,
+  apply_level,
+  success_level,
+];
+const ArrayCountbotton = [orientation, self_learning, training_seminar];
+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 ||
+    lengthevaluate_expenct_level.value !==
+      evaluate_expenct_level.value.length ||
+    lengthevaluate_ouptut.value !== evaluate_ouptut.value.length ||
+    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 === "" ||
+    lengthconduct.value !== 4 ||
+    lengthmoral_level.value !== 3 ||
+    lengthdiscipline_level.value !== 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;
+  }
+
+  if (hasError === true) {
+    variablesToWatch.forEach((item, index) => {
+      if (item.value === 0) {
+        alerts[index + 2].value = true;
+      }
+    });
+    if (
+      lengthevaluate_expenct_level.value !== evaluate_expenct_level.value.length
+    ) {
+      alerts[0].value = true;
+    }
+    if (lengthevaluate_ouptut.value !== evaluate_ouptut.value.length) {
+      alerts[1].value = true;
+    }
+    if (lengthconduct.value !== 4) {
+      alerts[8].value = true;
+    }
+    if (lengthmoral_level.value !== 3) {
+      alerts[9].value = true;
+    }
+    if (lengthdiscipline_level.value !== 5) {
+      alerts[10].value = true;
+    }
+    ArrayCountbotton.forEach((item, index) => {
+      if (item.value === null) {
+        alerts[index + 11].value = true;
+      }
+    });
+    console.log(evaluate_expenct_level.value);
+
+    dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
+  } else {
+    putformData();
+  }
+};
+
+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,
+  };
+  dialogConfirm($q, async () => await saveformdata(data));
+};
+
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.formevaluateCommander(assignId.value), data)
+    .then((res: any) => {
+      success($q, "บันทึกสำเร็จ");
+      router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+
+variablesToWatch.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== 0) {
+      alerts[index + 2].value = false;
+    }
+  });
+});
+ArrayCountbotton.forEach((variable, index) => {
+  watch(variable, (item: any) => {
+    if (item !== null) {
+      alerts[index + 11].value = false;
+    }
+  });
+});
+watch(lengthevaluate_expenct_level, (newLength) => {
+  if (newLength === evaluate_expenct_level.value.length) {
+    console.log(true);
+    alerts[0].value = false;
+  }
+});
+watch(lengthevaluate_ouptut, (newLength) => {
+  if (newLength === evaluate_ouptut.value.length) {
+    console.log(true);
+    alerts[1].value = false;
+  }
+});
+watch(lengthconduct, (newLength) => {
+  if (newLength === 4) {
+    alerts[8].value = false;
+  }
+});
+watch(lengthmoral_level, (newLength) => {
+  if (newLength === 3) {
+    alerts[9].value = false;
+  }
+});
+watch(lengthdiscipline_level, (newLength) => {
+  if (newLength === 5) {
+    alerts[10].value = false;
+  }
+});
+const getBordered = (i: boolean) => {
+  return {
+    border_custom: i,
+  };
+};
+</script>
+
+<template>
+  <q-card class="my-card" flat bordered>
+    <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-separator />
+    <q-card-section>
+      <div class="row col-12 no-margin q-px-md q-pt-md">
+        <div class="row col-12 q-gutter-lg">
+          <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-primary q-pr-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>
+            <criterion />
+            <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">
+              ผลผลิตของงานที่คาดหวัง
+            </div>
+            <q-card
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+                getBordered(alerts[0].value),
+              ]"
+            >
+              <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.output_desc }}</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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+              ผลผลิตของงานที่เกิดขึ้นจริง
+            </div>
+            <q-card
+              flat
+              bordered
+              :class="[
+                'col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1',
+                getBordered(alerts[1].value),
+              ]"
+            >
+              <q-list dense v-for="(list, i) in list1_2" :key="i">
+                <q-item dense tag="label" v-ripple v-if="i < checkArray">
+                  <q-item-section>
+                    <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                    <q-input
+                      outlined
+                      dense
+                      v-model="evaluate_ouptut[i].text"
+                      lazy-rules
+                      autogrow
+                      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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[2].value)"
+                >
+                  <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[3].value)"
+                >
+                  <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[4].value)"
+                >
+                  <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[5].value)"
+                >
+                  <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[6].value)"
+                >
+                  <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
+                  :class="getBordered(alerts[7].value)"
+                >
+                  <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                      </template>
+                    </q-rating>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-sm q-pl-sm">
+              <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-xs-12 col-sm-11 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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-2>
+                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-3>
+                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-4>
+                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                      </template>
+                      <template v-slot:tip-5>
+                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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"
+                type="textarea"
+                hide-bottom-space
+                label="กรอกสิ่งที่ควรปรับปรุง"
+                :row="5"
+              />
+            </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',
+                  getBordered(alerts[8].value),
+                ]"
+              >
+                <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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',
+                  getBordered(alerts[9].value),
+                ]"
+              >
+                <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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',
+                  getBordered(alerts[10].value),
+                ]"
+              >
+                <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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-2>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-3>
+                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                        </template>
+                        <template v-slot:tip-4>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
+                        </template>
+                        <template v-slot:tip-5>
+                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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"
+                  type="textarea"
+                  hide-bottom-space
+                  label="กรอกสิ่งที่ควรปรับปรุง"
+                  :row="5"
+                />
+              </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
+                    :class="getBordered(alerts[11].value)"
+                  >
+                    <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
+                    :class="getBordered(alerts[12].value)"
+                  >
+                    <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
+                    :class="getBordered(alerts[13].value)"
+                  >
+                    <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 justify-center">
+            <div class="col-xs-12 col-sm-11">
+              <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>
+          <div class="col-12">
+            <q-separator size="3px" color="grey-2" />
+          </div>
+          <!-- <Footer /> -->
+          <div class="row col-12">
+            <q-space />
+            <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+          </div>
+        </div>
+      </div>
+    </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;
+}
+.border_custom {
+  border: 2px solid #c10015;
+  border-radius: 5px;
+  // color: #c10015;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
new file mode 100644
index 000000000..3d358bc56
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
@@ -0,0 +1,1407 @@
+<script setup lang="ts">
+import { ref, onMounted, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
+
+const router = useRouter();
+const routeName = router.currentRoute.value.name;
+const $q = useQuasar();
+const route = useRoute();
+const probationStore = useProbationDataStore();
+const { fecthAssignoutput, assign } = probationStore;
+
+const mixin = useCounterMixin();
+const {
+  date2Thai,
+  success,
+  notifyError,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  dialogConfirm,
+} = mixin;
+const { ratingColors } = probationStore;
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+
+const start_date = ref<Date>(new Date());
+const date_finish = ref<Date>(new Date());
+const status = ref<boolean>(false);
+const evaluate_id = ref<string>("");
+const evaluate_no = ref<number>(1);
+const dataArr = ref<any>();
+
+const checkArray = ref<number>(0);
+
+const edit = () => {
+  status.value = true;
+};
+
+const cancel = () => {
+  status.value = false;
+};
+const props = defineProps({
+  tab: String,
+  data: Object,
+  action: String,
+});
+
+onMounted(async () => {
+  if (props.tab && props.action == "edit") {
+    evaluate_no.value = Number(props.tab.charAt(4));
+    dataArr.value = await props.data;
+    fecthFormdata();
+  }
+});
+
+watch(props, async () => {
+  if (props.tab && props.action == "edit") {
+    evaluate_no.value = Number(props.tab.charAt(4));
+    dataArr.value = await props.data;
+    fectFormfull();
+  }
+});
+
+const fecthFormdata = async () => {
+  await http
+    .get(config.API.formevaluateRecordCommander(assignId.value))
+    .then(async (res: any) => {
+      await fecthAssignoutput(res.data.data);
+      await fectFormfull();
+      // if (props.action == "add") {
+      //   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;
+      //   option.value.push(res.data.data.director);
+      // }
+      // Autherise.value = res.data.data.director.name;
+      // list1_1.value = res.data.data.assign_output;
+      // evaluate_expenct_level.value = await res.data.data.assign_output.map(
+      //   (e: any) => ({
+      //     id: e.id,
+      //     labal: e.output_desc,
+      //   })
+      // );
+      // evaluate_ouptut.value = await res.data.data.assign_output.map(
+      //   (e: any) => ({
+      //     id: e.id,
+      //   })
+      // );
+
+      // checkArray.value = list1_1.value.length;
+    })
+    .catch((e: any) => {})
+    .finally(() => {
+      if (props.action == "edit") {
+        fecthFormRound();
+      }
+    });
+};
+const fectFormfull = async () => {
+  Autherise.value = probationStore.director.name;
+  list1_1.value = probationStore.assignOutput;
+  evaluate_expenct_level.value = await probationStore.assignOutput.map(
+    (e: any) => ({
+      id: e.id,
+      labal: e.output_desc,
+    })
+  );
+  evaluate_ouptut.value = await probationStore.assignOutput.map((e: any) => ({
+    id: e.id,
+  }));
+  checkArray.value = list1_1.value.length;
+  fecthFormRound();
+};
+const fecthFormRound = async () => {
+  // showLoader();
+  try {
+    let data = await dataArr.value;
+    evaluate_id.value = data.id;
+    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;
+    } else etc.value = false;
+    if (data.behavior_other_desc !== "" && data.behavior_other_level !== null) {
+      etc2.value = true;
+    } else etc2.value = false;
+    if (data.achievements) {
+      await data.achievements.map((e: any, index: number) => {
+        evaluate_expenct_level.value[index].level = e.evaluate_expect_level;
+        evaluate_ouptut.value[index].text = e.evaluate_output_desc;
+        evaluate_ouptut.value[index].level = e.evaluate_output_level;
+      });
+    }
+
+    status.value = false;
+    // setTimeout(() => {
+    //   hideLoader();
+    // }, 1000);
+  } catch (error) {
+    hideLoader();
+  }
+};
+
+const list1_1 = ref<any>([]);
+const list1_2 = [
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+  { id: "", label: "" },
+];
+
+const list2_1 = probationStore.behavior_no1;
+const list2_2 = probationStore.behavior_no2;
+const list2_3 = probationStore.behavior_no3;
+
+const option = ref<any>([]);
+
+// 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 etc = ref<any>(false); // checkBox 1.8
+const achievement_other = ref<any>({ text: "", level: 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 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 behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+
+const savaForm = () => {
+  achievement_strengthRef.value.validate();
+  achievement_inproveRef.value.validate();
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+
+  let hasError = false;
+  if (
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    // success_level.value === 0 ||
+    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,
+  };
+
+  dialogConfirm($q, () =>
+    props.action == "edit" ? editData(data) : saveformdata(data)
+  );
+};
+
+const saveformdata = async (data: any) => {
+  await http
+    .post(config.API.formevaluateCommander(assignId.value), data)
+    .then((res: any) => {
+      success($q, "บันทึกสำเร็จ");
+      router.push(`/probation/detail/${personalId.value}/${assignId.value}`);
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+
+const editData = async (data: any) => {
+  await http
+    .put(
+      config.API.editEvaluateCommander(assignId.value, evaluate_id.value),
+      data
+    )
+    .then((res: any) => {
+      status.value = false;
+      success($q, "บันทึกสำเร็จ");
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    });
+};
+</script>
+
+<template>
+  <div class="row col-12 no-margin q-pa-sm">
+    <div class="toptitle text-dark col-12 row items-center q-gutter-md">
+      <div>แบบบันทึกผล (ผู้ดูเเล)</div>
+      <!-- <q-space /> -->
+      <div v-if="status == false">
+        <q-btn
+          dense
+          flat
+          round
+          color="primary"
+          @click="edit()"
+          icon="mdi-pencil-outline"
+        >
+          <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+      <div v-else>
+        <q-btn dense flat round color="red" @click="cancel()" icon="mdi-undo">
+          <q-tooltip>ยกเลิก</q-tooltip>
+        </q-btn>
+        <q-btn
+          dense
+          flat
+          round
+          class="q-ml-md"
+          color="public"
+          @click="savaForm()"
+          icon="mdi-content-save-outline"
+        >
+          <q-tooltip>บันทึกข้อมูล</q-tooltip>
+        </q-btn>
+      </div>
+    </div>
+    <div class="col-12 row q-gutter-lg">
+      <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-primary q-pr-sm">{{
+            "ครั้งที่ " + evaluate_no
+          }}</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>
+        <criterion />
+        <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">
+          ผลผลิตของงานที่คาดหวัง
+        </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.output_desc }}</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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
+          ผลผลิตของงานที่เกิดขึ้นจริง
+        </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 v-if="i < checkArray">
+              <q-item-section>
+                <!-- <q-item-label>{{ list.label }}</q-item-label> -->
+                <q-input
+                  outlined
+                  dense
+                  v-model="evaluate_ouptut[i].text"
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  :row="1"
+                  :rules="evaluate_ouptutRules"
+                  :disable="!status"
+                />
+              </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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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-xs-12 col-sm-11 q-pa-xs q-pl-sm">
+          <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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-sm">
+          <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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-sm">
+          <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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-sm">
+          <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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-sm">
+          <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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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-xs-12 col-sm-11 q-pa-xs q-pl-sm">
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  1.7 อื่นๆ
+                  <q-checkbox
+                    class="q-ml-sm"
+                    dense
+                    v-model="etc"
+                    @click="
+                      (achievement_other.text = ''),
+                        (achievement_other.level = 0)
+                    "
+                    :disable="!status"
+                /></q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+
+        <q-card
+          v-if="etc"
+          class="text-top0 col-xs-12 col-sm-11 q-pa-xs 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) || 'กรุณากรอกข้อความ',
+                    ]"
+                    :disable="!status"
+                  />
+                </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="ระดับการประเมินพฤติกรรม"
+                  :disable="!status"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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"
+            :disable="!status"
+          />
+        </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"
+            ref="achievement_inproveRef"
+            :disable="!status"
+          />
+        </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="ระดับการประเมินพฤติกรรม"
+                    :disable="!status"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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="ระดับการประเมินพฤติกรรม"
+                    :disable="!status"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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="ระดับการประเมินพฤติกรรม"
+                    :disable="!status"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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)"
+              :disable="!status"
+            />
+          </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) || 'กรุณากรอกข้อความ',
+                      ]"
+                      :disable="!status"
+                    />
+                  </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="ระดับการประเมินพฤติกรรม"
+                    :disable="!status"
+                  >
+                    <template v-slot:tip-1>
+                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-2>
+                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-3>
+                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-4>
+                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                    </template>
+                    <template v-slot:tip-5>
+                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</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"
+              :disable="!status"
+            />
+          </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"
+              ref="behavio_inproveRef"
+              :disable="!status"
+            />
+          </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="ดำเนินการเเล้ว"
+                      :disable="!status"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="orientation"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                      :disable="!status"
+                    />
+                  </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="ดำเนินการเเล้ว"
+                      :disable="!status"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="self_learning"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                      :disable="!status"
+                    />
+                  </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="ดำเนินการเเล้ว"
+                      :disable="!status"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="training_seminar"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                      :disable="!status"
+                    />
+                  </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="ดำเนินการเเล้ว"
+                      :disable="!status"
+                    />
+                    <q-radio
+                      checked-icon="task_alt"
+                      unchecked-icon="panorama_fish_eye"
+                      v-model="other_training"
+                      val="0"
+                      label=" ยังไม่ได้ดำเนินการ"
+                      :disable="!status"
+                    />
+                  </div>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <!-- <Footer /> -->
+      <div class="row col-12 q-gutter-lg no-margin justify-center">
+        <div class="col-xs-12 col-sm-11 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"
+                :readonly="!status"
+              >
+                <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 || `${'กรุณาเลือกลงวันที่'}`]"
+                    :disable="!status"
+                  >
+                    <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"
+        v-if="routeName == 'probationFormAddresult'"
+      >
+        <q-space />
+        <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+      </q-toolbar>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue
new file mode 100644
index 000000000..650ab8a3d
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent, watch, onMounted, onUpdated } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+import { useRoute, useRouter } from "vue-router";
+import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
+const Header = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Header.vue"
+    )
+);
+const FormSaveResultCommader = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue"
+    )
+);
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+const router = useRouter();
+const route = useRoute();
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { fecthdataAssign } = probationStore;
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError } = mixin;
+const assignId = ref<string>(route.params.form.toString());
+const personalId = ref<string>(route.params.personalId.toString());
+const fullname = ref<string>("");
+const tab = ref<string>("save1");
+const dataArrayNumber = ref<number>();
+const dataRole = ref<string>("mentor");
+onMounted(async () => {
+  await fecthAssign(assignId.value);
+});
+const fecthAssign = async (id: string) => {
+  showLoader();
+  await http
+    .get(config.API.formevaluateCommander(id))
+    .then(async (res: any) => {
+      console.log(res);
+      await fecthdataAssign(res.data.data);
+      fullname.value = res.data.data.experimentee
+        ? res.data.data.experimentee.name
+        : "";
+      dataArrayNumber.value = 1;
+    })
+    .catch((e: any) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal;
+  dataArrayNumber.value = Number(tabVal.charAt(4));
+};
+const downloadFile = (response: any, filename: string) => {
+  const link = document.createElement("a");
+  var fileName = filename;
+  link.href = window.URL.createObjectURL(new Blob([response.data]));
+  link.setAttribute("download", fileName);
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+const FileDownload = async (type: string) => {
+  let numTab = probationStore.evaluate.find(
+    (e: any) => e.no === dataArrayNumber.value
+  );
+  //ผู้ดูเเล
+  if (dataRole.value == "mentor") {
+    showLoader();
+    await http
+      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
+        responseType: "blob",
+      })
+      .then(async (res) => {
+        downloadFile(
+          res,
+          `แบบบันทึกผล(ผู้บักคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
+        );
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else {
+    //ผุ้บังคับ
+    showLoader();
+    await http
+      .get(config.API.reportEvaluateRecord1(type, numTab.id), {
+        responseType: "blob",
+      })
+      .then(async (res) => {
+        downloadFile(
+          res,
+          `แบบบันทึกผล(ผู้บังคับบัญชา)_${fullname.value}_ครั้งที่${numTab.no}.${type}`
+        );
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
+};
+const addData = () => {
+  router.push(
+    `/probation/detail/addevaluacommander/${personalId.value}/${assignId.value}`
+  );
+};
+</script>
+
+<template>
+  <Header
+    v-if="probationStore.tabs.length > 0"
+    :change-tab="changeTab"
+    :add-data="addData"
+    :loop="probationStore.tabs.length"
+    :FileDownload="FileDownload"
+  />
+  <q-tab-panels
+    v-model="tab"
+    animated
+    swipeable
+    vertical
+    transition-prev="jump-up"
+    transition-next="jump-up"
+    v-if="probationStore.tabs.length > 0"
+    class="mt"
+  >
+    <q-tab-panel
+      v-for="item in probationStore.evaluate"
+      :name="`save${item.no}`"
+      :key="item.no"
+    >
+      <FormSaveResultCommader
+        :tab="tab"
+        :data="probationStore.evaluate.find((x: any) => x.no === dataArrayNumber)"
+        action="edit"
+      />
+    </q-tab-panel>
+
+    <!-- <q-page-container>
+      <FormSaveResult
+        :tab="tab"
+        :data="probationStore.evaluate.find((x: any) => x.no === dataArrayNumber)"
+        action="edit"
+      />
+    </q-page-container> -->
+  </q-tab-panels>
+
+  <div class="q-gutter-md" v-else-if="probationStore.tabs.length == 0">
+    <div class="flex justify-center items-center q-my-md q-gutter-md">
+      <q-btn
+        outline
+        color="primary"
+        label="สร้างแบบบันทึกผล"
+        @click="addData"
+      />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.mt {
+  margin-top: 25px;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index b4cc4f546..5a90eb554 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -13,6 +13,12 @@ const TabsTemplate1 = defineAsyncComponent(
       "@/modules/05_placement/components/probation/FormEvaluation/Template1.vue"
     )
 );
+const TabsTemplateCommader = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/05_placement/components/probation/FormEvaluation/Template1Commader.vue"
+    )
+);
 const TabsTemplate2 = defineAsyncComponent(
   () =>
     import(
@@ -126,7 +132,30 @@ const clickBack = () => {
                 <q-icon size="18px" name="mdi-file-edit" />
               </q-item-section> -->
 
-              <q-item-section> แบบบันทึกผล </q-item-section>
+              <q-item-section>
+                แบบบันทึกผล
+                <br />
+                <div class="text-caption text-grey-7">(ผู้ดูแล)</div>
+              </q-item-section>
+            </q-item>
+            <q-item
+              dense
+              class="q-py-sm"
+              active-class="text-primary bg-teal-1 text-weight-medium"
+              clickable
+              v-ripple
+              :active="activeTab == 'tab8'"
+              @click="changeTab('tab8')"
+            >
+              <!-- <q-item-section avatar style="min-width: 40px">
+              <q-icon size="18px" name="mdi-file-edit" />
+            </q-item-section> -->
+
+              <q-item-section>
+                แบบบันทึกผล
+                <br />
+                <div class="text-caption text-grey-7">(ผู้บังคับบัญชา)</div>
+              </q-item-section>
             </q-item>
 
             <q-item
@@ -223,6 +252,10 @@ const clickBack = () => {
               <TabsTemplate1 :activeTab="activeTab" />
             </q-tab-panel>
 
+            <q-tab-panel name="tab8">
+              <TabsTemplateCommader />
+            </q-tab-panel>
+
             <q-tab-panel name="tab3">
               <TabsTemplate2 />
             </q-tab-panel>
diff --git a/src/modules/05_placement/router.ts b/src/modules/05_placement/router.ts
index bbabe5770..b37c91c93 100644
--- a/src/modules/05_placement/router.ts
+++ b/src/modules/05_placement/router.ts
@@ -39,6 +39,7 @@ const FormEvaluateScoreAdd = () =>
   import(
     "@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue"
   );
+const FormSaveResultAddCommander = () => import("./components/probation/FormEvaluation/FormSaveResultAddCommander.vue")
 
 // คำสั่งช่วยราชการ/ส่งตัวกลับ
 const RepatriationOrder = () =>
@@ -150,6 +151,16 @@ export default [
       Role: "placement",
     },
   },
+  {
+    path: "/probation/detail/addevaluacommander/:id/:form",
+    name: "probationFormAddevaluaCommander",
+    component: FormSaveResultAddCommander,
+    meta: {
+      Auth: true,
+      Key: [6.3],
+      Role: "placement",
+    },
+  },
   {
     path: "/probation/detail/addevaluascore/:id/:form",
     name: "probationFormAddevaluascore",
diff --git a/src/modules/05_placement/storeProbation.ts b/src/modules/05_placement/storeProbation.ts
index 29bf3a1e4..fe65b6e66 100644
--- a/src/modules/05_placement/storeProbation.ts
+++ b/src/modules/05_placement/storeProbation.ts
@@ -11,6 +11,8 @@ export const useProbationDataStore = defineStore("probationStore", () => {
   const director = ref<any>([])
 
   const fecthdataAssign = async (data: any) => {
+    console.log(data);
+
     assign.value = await data.assign
     evaluate.value = await data.evaluate
     tabs.value = await data.evaluate
@@ -79,7 +81,7 @@ export const useProbationDataStore = defineStore("probationStore", () => {
       label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึดหลักจรรยาบรรณวิชาชีพ",
     },
   ];
-  
+
   return {
     fecthdataAssign,
     fecthAssignoutput,
diff --git a/src/modules/07_insignia/components/report/Report_01.vue b/src/modules/07_insignia/components/report/Report_01.vue
index ecfb4563e..43fd877c4 100644
--- a/src/modules/07_insignia/components/report/Report_01.vue
+++ b/src/modules/07_insignia/components/report/Report_01.vue
@@ -246,9 +246,8 @@ const downloadReport = async (
             </q-btn>
             <q-btn
               unelevated
-              icon="mdi-eye"
+              icon="mdi-refresh"
               color="primary"
-              label="แสดงรายงาน"
               @click="conditionDocument('show')"
             />
             <q-btn
@@ -256,7 +255,6 @@ const downloadReport = async (
               color="blue"
               icon="mdi-fullscreen"
               @click="dialog = true"
-              dense
             />
           </div>
         </q-toolbar>