diff --git a/src/api/06_retirement/api.retirement.ts b/src/api/06_retirement/api.retirement.ts
index bca70474b..7cf8a8057 100644
--- a/src/api/06_retirement/api.retirement.ts
+++ b/src/api/06_retirement/api.retirement.ts
@@ -4,12 +4,9 @@ const retirement = `${env.API_URI}/retirement`
 
 export default {
     profile: (type: string, year: string) => `${retirement}/profile/${type}/${year}`,
-    profileRetire: (retireId: string) => `${retirement}/profile/${retireId}`,
+    profileRetire: (retireProfileId: string) => `${retirement}/profile/${retireProfileId}`,
     listRetire: (retireId: string) => `${retirement}/${retireId}`,
     createnote: () => `${retirement}/reason`,
     reasonId: (retireId:string) => `${retirement}/reason/${retireId}`,
     retirement:(type:string,year:string) => `${retirement}/${type}/${year}`
-    
-
-
 };
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 15c6ee09e..b78d8d0bf 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -4,67 +4,181 @@ import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
 
-const Part2 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
-    )
-);
-const Part3 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
-    )
-);
-const Footer = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
-    )
-);
-
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
 
-const list1_1 = [
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1" },
-  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2" },
-  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3" },
-  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4" },
-  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5" },
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
 ];
-const list1_2 = [
-  { id: "1", label: "ผลผลิตของงานที่เกิดขึ้น 1" },
-  { id: "2", label: "ผลผลิตของงานที่เกิดขึ้น 2" },
-  { id: "3", label: "ผลผลิตของงานที่เกิดขึ้น 3" },
-  { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
-  { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
 ];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const etc = ref<any>(false);
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
+// part 1
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false);
+const achievement_other = ref<any>([{ text: "", level: 0 }]);
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>([{ text: "", level: 0 }]);
+const behavio_strength_desc = ref<string>("");
+const behavio_inprove_desc = ref<string>("");
+// part 3
+const orientation = ref<num>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+//rules
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  let hasError = false;
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+  if (
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavio_strength_desc.value === "" ||
+    behavio_inprove_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === undefined ||
+        behavio_orther.value.text == "" ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavio_orther: behavio_orther.value,
+    behavio_strength_desc: behavio_strength_desc.value,
+    behavio_inprove_desc: behavio_inprove_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
   <div class="row col-12 q-gutter-lg no-margin">
-
     <div class="col-12 row">
       <div class="col-12 text-top0 row items-center">
         <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
@@ -99,11 +213,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.1. ความรู้ความสามารถ</q-item-label>
+                1.1. ความรู้ความสามารถ</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="knowledge_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -131,11 +252,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
+                1.2. ทักษะ</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="skill_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -163,11 +291,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.3. สมมรถนะ</q-item-label>
+                1.3. สมมรถนะ</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="competency_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -195,43 +330,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. ความสามารถในการเรียนรู้งาน</q-item-label>
+                1.4. ความสามารถในการเรียนรู้งาน</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
-                <template v-slot:tip-1>
-                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-2>
-                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-3>
-                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
-                </template>
-                <template v-slot:tip-4>
-                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
-                </template>
-                <template v-slot:tip-5>
-                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
-                </template>
-              </q-rating>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card>
-
-      <q-card class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
-        <q-list dense>
-          <q-item dense tag="label" v-ripple>
-            <q-item-section>
-              <q-item-label>
-                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
-            </q-item-section>
-            <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="learn_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -259,11 +369,57 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+                1.5. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="apply_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</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>
@@ -292,26 +448,42 @@ const period = ref<number>(1);
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.7 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+                <q-checkbox class="q-ml-sm" dense v-model="etc"
+              /></q-item-label>
             </q-item-section>
           </q-item>
         </q-list>
       </q-card>
 
-      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-pl-lg">
         <q-list dense>
           <q-item dense tag="label" v-ripple>
             <q-item-section class="q-ml-md">
               <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
+                <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="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="achievement_other.level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -332,17 +504,382 @@ const period = ref<number>(1);
           </q-item>
         </q-list>
       </q-card>
-
     </div>
 
     <!-- Part 2 -->
-    <Part2 />
+    <!-- <Part2 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.1 ความประพฤติ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_1" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="conduct_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.2 ความมีคุณธรรมจริยธรรม
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_2" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="moral_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.3 การรักษาวินัย
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_3" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="discipline_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.4 อื่นๆ
+          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+        </div>
+        <q-card
+          v-if="etc2"
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>
+                  <q-input
+                    v-model="behavio_orther.text"
+                    label="กรอกอื่นๆ"
+                    dense
+                    lazy-rules
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
+                  />
+                </q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="behavio_orther.level"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+      <!-- <FormComment /> -->
+      <div class="row col-12 q-gutter-lg no-margin">
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            จุดเด่น (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            outlined
+            dense
+            v-model="behavio_strength_desc"
+            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules
+            type="textarea"
+            label="กรอกจุดเด่น"
+            hide-bottom-space
+            :row="5"
+            :rules="behavio_strengthRules"
+            ref="behavio_strengthRef"
+          />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            outlined
+            dense
+            v-model="behavio_inprove_desc"
+            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules
+            type="textarea"
+            hide-bottom-space
+            label="กรอกสิ่งที่ควรปรับปรุง"
+            :row="5"
+            :rules="behavio_inproveRules"
+            ref="behavio_inproveRef"
+          />
+        </div>
+      </div>
+    </div>
 
     <!-- Part 3 -->
-    <Part3 />
+    <!-- <Part3 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>1. การปฐมนิเทศ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label
+                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                >
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </div>
 
     <!-- Footer -->
-    <Footer />
+    <!-- <Footer /> -->
+    <q-toolbar class="text-primary">
+      <q-space />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+    </q-toolbar>
   </div>
 </template>
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
new file mode 100644
index 000000000..43a2e4262
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -0,0 +1,748 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+import { useQuasar } from "quasar";
+import { useProbationDataStore } from "@/modules/05_placement/store";
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const probationStore = useProbationDataStore();
+const { ratingColors } = probationStore;
+
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+
+const mixin = useCounterMixin();
+const { date2Thai, notifyError } = mixin;
+const dateToday = ref<Date>(new Date("10-10-2023"));
+const dateEnd = ref<Date>(new Date("12-10-2023"));
+const period = ref<number>(1);
+// part 1
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false);
+const achievement_other = ref<any>([{ text: "", level: 0 }]);
+// part 2
+const conduct_level = ref<any>([]);
+const moral_level = ref<any>([]);
+const discipline_level = ref<any>([]);
+const etc2 = ref<any>(false); // checkBox 2.4
+const behavio_orther = ref<any>([{ text: "", level: 0 }]);
+const behavio_strength_desc = ref<string>("");
+const behavio_inprove_desc = ref<string>("");
+// part 3
+const orientation = ref<num>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+//rules
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  let hasError = false;
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+  if (
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavio_strength_desc.value === "" ||
+    behavio_inprove_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === undefined ||
+        behavio_orther.value.text == "" ||
+        behavio_orther.value.level === undefined ||
+        behavio_orther.value.level == 0))
+  ) {
+    hasError = true;
+  } else putformData();
+
+  if (hasError === true) {
+    notifyError($q, "กรุณากรอกข้อมูลให้ครบ");
+  }
+};
+const putformData = () => {
+  const data = {
+    knowledge_level: knowledge_level.value,
+    skill_level: skill_level.value,
+    competency_level: competency_level.value,
+    learn_level: learn_level.value,
+    apply_level: apply_level.value,
+    success_level: success_level.value,
+    achievement_other: achievement_other.value,
+    conduct1_level: conduct_level.value[0],
+    conduct2_level: conduct_level.value[1],
+    conduct3_level: conduct_level.value[2],
+    conduct4_level: conduct_level.value[3],
+    moral1_level: moral_level.value[0],
+    moral2_level: moral_level.value[1],
+    moral3_level: moral_level.value[2],
+    discipline1_level: discipline_level.value[0],
+    discipline2_level: discipline_level.value[1],
+    discipline3_level: discipline_level.value[2],
+    discipline4_level: discipline_level.value[3],
+    discipline5_level: discipline_level.value[4],
+    behavio_orther: behavio_orther.value,
+    behavio_strength_desc: behavio_strength_desc.value,
+    behavio_inprove_desc: behavio_inprove_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+</script>
+
+<template>
+  <div class="row col-12 q-gutter-lg no-margin">
+    <div class="col-12 row">
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 text-top0 row items-center">
+        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+        <span class="text-black q-px-sm">{{ "ครั้งที่" + period }}</span>
+        ระหว่างวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateToday) }}</span>
+        ถึงวันที่
+        <span class="text-black q-px-sm">{{ date2Thai(dateEnd) }}</span>
+      </div>
+      <div class="col-12 q-pt-md">
+        <q-separator size="3px" color="grey-2" />
+      </div>
+    </div>
+
+    <div class="col-12 row">
+      <div class="col-12 text-top0 items-center">
+        <q-avatar class="bg-grey-2 q-mr-sm" size="28px">1</q-avatar>
+        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ
+      </div>
+    </div>
+    <div class="col-12 row no-margin">
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.1. ความสามารถในการเรียนรู้งาน</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="learn_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.2. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="apply_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.3. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+              >
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="success_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card class="text-top0 col-12 q-pa-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section>
+              <q-item-label>
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                1.4 อื่นๆ
+                <q-checkbox class="q-ml-sm" dense v-model="etc"
+              /></q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+
+      <q-card v-if="etc" class="text-top0 col-12 q-pa-sm q-mt-sm q-pl-lg">
+        <q-list dense>
+          <q-item dense tag="label" v-ripple>
+            <q-item-section class="q-ml-md">
+              <q-item-label>
+                <q-input
+                  v-model="achievement_other.text"
+                  label="กรอกอื่นๆ"
+                  dense
+                  lazy-rules
+                  autogrow
+                  hide-bottom-space
+                  outlined
+                  class="bg-white"
+                  :rules="[
+                    (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                  ]"
+                />
+              </q-item-label>
+            </q-item-section>
+            <q-item-section side>
+              <q-rating
+                v-model="achievement_other.level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
+                <template v-slot:tip-1>
+                  <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-2>
+                  <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-3>
+                  <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                </template>
+                <template v-slot:tip-4>
+                  <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                </template>
+                <template v-slot:tip-5>
+                  <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                </template>
+              </q-rating>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+
+    <!-- Part 2 -->
+    <!-- <Part2 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.1 ความประพฤติ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_1" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="conduct_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.2 ความมีคุณธรรมจริยธรรม
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_2" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="moral_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.3 การรักษาวินัย
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_3" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="discipline_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.4 อื่นๆ
+          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+        </div>
+        <q-card
+          v-if="etc2"
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>
+                  <q-input
+                    v-model="behavio_orther.text"
+                    label="กรอกอื่นๆ"
+                    dense
+                    lazy-rules
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
+                  />
+                </q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="behavio_orther.level"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- Part 3 -->
+    <!-- <Part3 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>1. การปฐมนิเทศ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label
+                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                >
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <!-- <Footer /> -->
+    <q-toolbar class="text-primary">
+      <q-space />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+    </q-toolbar>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.text-top2 {
+  font-weight: 500;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.text-top0 {
+  font-weight: 600;
+  padding-bottom: 8px;
+  color: rgb(70, 68, 68);
+}
+
+.q-rating__icon {
+  text-shadow: transparent !important;
+}
+
+.q-card {
+  box-shadow: 0px 0px 0px 0px !important;
+}
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index c5aa2bc4f..767b28d88 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -3,27 +3,11 @@ import { ref, defineAsyncComponent } from "vue";
 import { useQuasar } from "quasar";
 import { useProbationDataStore } from "@/modules/05_placement/store";
 import { useCounterMixin } from "@/stores/mixin";
+import { formatDate } from "@fullcalendar/core";
 
-const Part2 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part2.vue"
-    )
-);
-const Part3 = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/SubForm/Part3.vue"
-    )
-);
-const Footer = defineAsyncComponent(
-  () =>
-    import(
-      "@/modules/05_placement/components/probation/FormEvaluation/Footer.vue"
-    )
-);
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
+
 const { ratingColors } = probationStore;
 
 const list1_1 = [
@@ -40,26 +24,234 @@ const list1_2 = [
   { id: "4", label: "ผลผลิตของงานที่เกิดขึ้น 4" },
   { id: "5", label: "ผลผลิตของงานที่เกิดขึ้น 5" },
 ];
-
-const etc_text = ref<any>(null);
-const text2_1 = ref<string>("");
-
-const model = ref<any>(0);
-const model1 = ref<any>(0);
-const model1_2 = ref<any>(0);
-const model1_3 = ref<any>(0);
-const model1_4 = ref<any>(0);
-const model1_5 = ref<any>(0);
-const model1_6 = ref<any>(0);
-const modelEtc = ref<any>(0);
-const text2_2 = ref<string>("");
-const etc = ref<any>(false);
+const list2_1 = [
+  { id: "1", label: "ให้บริการประชาชนหรือผู้รับบริการด้วยอัธยาศัยดี" },
+  { id: "2", label: "มีความรับผิดชอบในการปฏิบัติบัติงาน" },
+  {
+    id: "3",
+    label:
+      "ให้บริการประชาชนหรือผู้รับบริการด้วยความรวดเร็ว เอาใจใส่เป็นมาตรฐานเดียวกัน",
+  },
+  {
+    id: "4",
+    label: "ตั้งใจปฏิบัติบัติหน้าที่ราชการด้วยความอุตสาหะ ขยันหมั่นเพียร",
+  },
+];
+const list2_2 = [
+  {
+    id: "1",
+    label: "อุทิศตนและเสียสละเวลาในการปฏิบัติบัติงานอย่างเต็มกำลังความสามารถ",
+  },
+  { id: "2", label: "มีจิตสำนึกที่ดี ปฏิบัติบัติงานด้วยความซื่อสัตย์ สุจริต" },
+  {
+    id: "3",
+    label:
+      "ยึดมั่นในสถาบันบัพระมหากษัตริย์ และไม่กระทำการใด ๆ อันจะก่อให้เกิดความเสียหายต่อประเทศชาติ",
+  },
+];
+const list2_3 = [
+  { id: "1", label: "มีความรับรัผิดชอบในการรักษาเวลาทำงาน" },
+  {
+    id: "2",
+    label: "แต่งกายในการปฏิบัติบัติงานได้อย่างเหมาะสมกับการเป็นข้าราชการ",
+  },
+  {
+    id: "3",
+    label: "ไม่กระทำการใด ๆ อันอาจก่อให้เกิดความเสียหายแก่ชื่อเสียงของหน่วยงาน",
+  },
+  {
+    id: "4",
+    label:
+      "ไม่กระทำการใด ๆ อันเป็นการเสื่อมเกียรติและศักดิ์ศรีของความเป็นข้าราชการ",
+  },
+  {
+    id: "5",
+    label: "ปฏิบัติบัติหน้าที่อย่างตรงไปตรงมาโดยยึกหลักจรรยาบรรณวิชาชีพ",
+  },
+];
+const option = ref<any>(["นาย ภูริณัฐ บุญขาว", "นาย พงศกร วรารักษ์"]);
 
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, success, notifyError } = mixin;
 const dateToday = ref<Date>(new Date("10-10-2023"));
 const dateEnd = ref<Date>(new Date("12-10-2023"));
 const period = ref<number>(1);
+
+// part 1
+const evaluate_expenct_level = ref<any>([
+  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
+  { id: "2", label: "ผลผลิตของงานที่คาดหวัง 2", level: 0 },
+  { id: "3", label: "ผลผลิตของงานที่คาดหวัง 3", level: 0 },
+  { id: "4", label: "ผลผลิตของงานที่คาดหวัง 4", level: 0 },
+  { id: "5", label: "ผลผลิตของงานที่คาดหวัง 5", level: 0 },
+]);
+const evaluate_ouptut = ref<any>([
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+  { level: 0, text: "" },
+]);
+const knowledge_level = ref<number>(0);
+const skill_level = ref<number>(0);
+const competency_level = ref<number>(0);
+const learn_level = ref<number>(0);
+const apply_level = ref<number>(0);
+const success_level = ref<number>(0);
+const etc = ref<any>(false); // checkBox 1.8
+const achievement_other = ref<any>([{ text: "", level: 0 }]);
+// const etc_text = ref<string>("");
+// const ext_value = ref<number>(0);
+const achievement_strength_desc = ref<string>("");
+const achievement_inprove_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 behavio_strength_desc = ref<string>("");
+const behavio_inprove_desc = ref<string>("");
+// part 3
+const orientation = ref<nu>(null);
+const self_learning = ref<any>(null);
+const training_seminar = ref<any>(null);
+const other_training = ref<any>(null);
+// footer
+const Autherise = ref<any>(null);
+const dateAutherise = ref<any>(new Date());
+
+//rules
+const evaluate_ouptutRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกเหตุผลที่เกิดขึ้น",
+];
+const achievement_strengthRef = ref<any>(null);
+const achievement_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const achievement_inproveRef = ref<any>(null);
+const achievement_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+const behavio_strengthRef = ref<any>(null);
+const behavio_strengthRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลจุดเด่น",
+];
+const behavio_inproveRef = ref<any>(null);
+const behavio_inproveRules = [
+  (val: any) => (val && val.length > 0) || "กรุณากรอกข้อมูลสิ่งที่ควรปรับปรุง",
+];
+
+const savaForm = () => {
+  achievement_strengthRef.value.validate();
+  achievement_inproveRef.value.validate();
+  behavio_strengthRef.value.validate();
+  behavio_inproveRef.value.validate();
+
+  let hasError = false;
+  const filterlevel1_1 = evaluate_expenct_level.value.filter(
+    (e: any) => e.level == 0
+  );
+  const filter_ouptut1_2 = evaluate_ouptut.value.filter(
+    (e: any) => e.level == 0 || e.text == ""
+  );
+
+  if (
+    filterlevel1_1.length != 0 ||
+    filter_ouptut1_2.length != 0 ||
+    knowledge_level.value === 0 ||
+    skill_level.value === 0 ||
+    competency_level.value === 0 ||
+    learn_level.value === 0 ||
+    apply_level.value === 0 ||
+    success_level.value === 0 ||
+    achievement_strength_desc.value === "" ||
+    achievement_inprove_desc.value === "" ||
+    conduct_level.value.length < 4 ||
+    moral_level.value.length < 3 ||
+    discipline_level.value.length < 5 ||
+    behavio_strength_desc.value === "" ||
+    behavio_inprove_desc.value === "" ||
+    orientation.value === null ||
+    self_learning.value === null ||
+    training_seminar.value === null
+  ) {
+    hasError = true;
+  } else if (
+    (etc.value == true &&
+      (achievement_other.value.text === undefined ||
+        achievement_other.value.text == "" ||
+        achievement_other.value.level == undefined ||
+        achievement_other.value.level === 0)) ||
+    (etc2.value == true &&
+      (behavio_orther.value.text === "" ||
+        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_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_inprove_desc: achievement_inprove_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,
+    behavio_strength_desc: behavio_strength_desc.value,
+    behavio_inprove_desc: behavio_inprove_desc.value,
+    orientation: Number(orientation.value),
+    self_learning: Number(self_learning.value),
+    training_seminar: Number(training_seminar.value),
+    other_training: Number(other_training.value),
+
+    // commander_dated: dateAutherise.value,
+  };
+  $q.dialog({
+    title: "ยืนยันการบันทึกข้อมูล",
+    message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่ ?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
+  })
+    .onOk(async () => {
+      console.log("บันทึกข้อมูล", data);
+    })
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
 </script>
 
 <template>
@@ -97,15 +289,26 @@ const period = ref<number>(1);
       <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
         1.ผลผลิตของงานที่คาดหวัง
       </div>
-      <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
         <q-list dense v-for="(list, i) in list1_1" :key="i">
           <q-item dense tag="label" v-ripple>
             <q-item-section>
               <q-item-label>{{ list.label }}</q-item-label>
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model" :val="list.id" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="evaluate_expenct_level[i].level"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -136,17 +339,38 @@ const period = ref<number>(1);
       <div class="col-xs-12 col-sm-11 col-md-10 offset-md-1 text-top2">
         1.ผลผลิตของงานที่เกิดขึ้น
       </div>
-      <q-card flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+      <q-card
+        flat
+        bordered
+        class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+      >
         <q-list dense v-for="(list, i) in list1_2" :key="i">
           <q-item dense tag="label" v-ripple>
             <q-item-section>
               <!-- <q-item-label>{{ list.label }}</q-item-label> -->
-              <q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
-                type="textarea" label="ผลผลิตของงานที่เกิดขึ้นจริง" hide-bottom-space :row="1" />
+              <q-input
+                outlined
+                dense
+                v-model="evaluate_ouptut[i].text"
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                lazy-rules
+                type="textarea"
+                label="ผลผลิตของงานที่เกิดขึ้นจริง"
+                hide-bottom-space
+                :row="1"
+                :rules="evaluate_ouptutRules"
+              />
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1" :val="list.id" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="evaluate_ouptut[i].level"
+                :val="list.id"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -177,11 +401,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ความรู้ความสามารถ</q-item-label>
+                1.2. ความรู้ความสามารถ</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="knowledge_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -209,11 +440,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.2. ทักษะ</q-item-label>
+                1.3. ทักษะ</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="skill_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -241,11 +479,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.4. สมมรถนะ</q-item-label>
+                1.4. สมมรถนะ</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="competency_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -273,11 +518,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.5. ความสามารถในการเรียนรู้งาน</q-item-label>
+                1.5. ความสามารถในการเรียนรู้งาน</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="learn_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -305,11 +557,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.6. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+                1.6. ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="apply_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -337,11 +596,18 @@ const period = ref<number>(1);
             <q-item-section>
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label>
+                1.7. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+              >
             </q-item-section>
             <q-item-section side>
-              <q-rating v-model="model1_2" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <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>
@@ -370,7 +636,8 @@ const period = ref<number>(1);
               <q-item-label>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                 1.8 อื่นๆ
-                <q-checkbox class="q-ml-sm" dense v-model="etc" /></q-item-label>
+                <q-checkbox class="q-ml-sm" dense v-model="etc"
+              /></q-item-label>
             </q-item-section>
           </q-item>
         </q-list>
@@ -381,15 +648,30 @@ const period = ref<number>(1);
           <q-item dense tag="label" v-ripple>
             <q-item-section class="q-ml-md">
               <q-item-label>
-                <q-input v-model="etc_text" label="กรอกอื่นๆ" dense lazy-rules autogrow hide-bottom-space outlined
-                  class="bg-white" :rules="[
+                <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="modelEtc" max="5" size="sm" color="grey" :color-selected="ratingColors"
-                label="ระดับการประเมินพฤติกรรม">
+              <q-rating
+                v-model="achievement_other.level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -410,7 +692,6 @@ const period = ref<number>(1);
           </q-item>
         </q-list>
       </q-card>
-
     </div>
 
     <div class="row col-12 q-gutter-lg no-margin">
@@ -419,30 +700,471 @@ const period = ref<number>(1);
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
           จุดเด่น (ไม่เกิน 5 บรรทัด)
         </div>
-        <q-input outlined dense v-model="text2_1" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
-          type="textarea" label="กรอกจุดเด่น" hide-bottom-space :row="5"
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
+        <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="text2_2" class="col-xs-12 col-sm-11 col-md-10 offset-md-1" lazy-rules
-          type="textarea" hide-bottom-space label="กรอกสิ่งที่ควรปรับปรุง" :row="5"
-          :rules="[(val) => (val && val.length > 0) || 'กรุณากรอกข้อความ']" />
+        <q-input
+          outlined
+          dense
+          v-model="achievement_inprove_desc"
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+          lazy-rules
+          type="textarea"
+          hide-bottom-space
+          label="กรอกสิ่งที่ควรปรับปรุง"
+          :row="5"
+          :rules="achievement_inproveRules"
+          ref="achievement_inproveRef"
+        />
       </div>
     </div>
 
     <!-- Part 2 -->
-    <Part2 />
+    <!-- <Part2 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+          พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.1 ความประพฤติ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_1" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="conduct_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.2 ความมีคุณธรรมจริยธรรม
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_2" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="moral_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.3 การรักษาวินัย
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense v-for="(list, i) in list2_3" :key="i">
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>{{ list.label }}</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="discipline_level[i]"
+                  :val="list.id"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+          </q-list>
+        </q-card>
+      </div>
+      <div class="col-12 row">
+        <div class="col-12 text-top0 row items-center q-pl-lg">
+          <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          2.4 อื่นๆ
+          <q-checkbox class="q-ml-sm" dense v-model="etc2" />
+        </div>
+        <q-card
+          v-if="etc2"
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>
+                  <q-input
+                    v-model="behavio_orther.text"
+                    label="กรอกอื่นๆ"
+                    dense
+                    lazy-rules
+                    autogrow
+                    hide-bottom-space
+                    outlined
+                    class="bg-white"
+                    :rules="[
+                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                    ]"
+                  />
+                </q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <q-rating
+                  v-model="behavio_orther.level"
+                  max="5"
+                  size="sm"
+                  color="grey"
+                  :color-selected="ratingColors"
+                  label="ระดับการประเมินพฤติกรรม"
+                >
+                  <template v-slot:tip-1>
+                    <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-2>
+                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-3>
+                    <q-tooltip>เป็นไปตามความคาดหวัง</q-tooltip>
+                  </template>
+                  <template v-slot:tip-4>
+                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก</q-tooltip>
+                  </template>
+                  <template v-slot:tip-5>
+                    <q-tooltip>สูงกว่าความคาดหวังมาก</q-tooltip>
+                  </template>
+                </q-rating>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+      <!-- <FormComment /> -->
+      <div class="row col-12 q-gutter-lg no-margin">
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            จุดเด่น (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            outlined
+            dense
+            v-model="behavio_strength_desc"
+            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules
+            type="textarea"
+            label="กรอกจุดเด่น"
+            hide-bottom-space
+            :row="5"
+            :rules="behavio_strengthRules"
+            ref="behavio_strengthRef"
+          />
+        </div>
+        <div class="col-12 row">
+          <div class="col-12 text-top0 row items-center q-pl-lg">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+          </div>
+          <q-input
+            outlined
+            dense
+            v-model="behavio_inprove_desc"
+            class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+            lazy-rules
+            type="textarea"
+            hide-bottom-space
+            label="กรอกสิ่งที่ควรปรับปรุง"
+            :row="5"
+            :rules="behavio_inproveRules"
+            ref="behavio_inproveRef"
+          />
+        </div>
+      </div>
+    </div>
 
     <!-- Part 3 -->
-    <Part3 />
+    <!-- <Part3 /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row justify-center">
+        <div class="col-12 text-top0 items-center">
+          <q-avatar class="bg-grey-2 q-mr-sm" size="28px">3</q-avatar>
+          การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+        </div>
+        <q-card
+          flat
+          bordered
+          class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+        >
+          <q-list dense>
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>1. การปฐมนิเทศ</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="orientation"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>2. การเรียนรู้ด้วยตนเอง</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="self_learning"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label>3. การอบรมสัมนาร่วมกัน</q-item-label>
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="training_seminar"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+            <q-separator class="q-my-xs" />
+            <q-item dense tag="label" v-ripple>
+              <q-item-section>
+                <q-item-label
+                  >4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)</q-item-label
+                >
+              </q-item-section>
+              <q-item-section side>
+                <div class="row">
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="1"
+                    label="ดำเนินการเเล้ว"
+                  />
+                  <q-radio
+                    checked-icon="task_alt"
+                    unchecked-icon="panorama_fish_eye"
+                    v-model="other_training"
+                    val="0"
+                    label=" ยังไม่ได้ดำเนินการ"
+                  />
+                </div>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </div>
 
     <!-- Footer -->
-    <Footer />
-
+    <!-- <Footer /> -->
+    <div class="row col-12 q-gutter-lg no-margin">
+      <div class="col-12 row">
+        <div class="col-12 text-top2 row items-center">
+          ผู้บังคับบัญชาผู้มอบหมายงาน
+        </div>
+        <div class="col-12 row q-col-gutter-md">
+          <q-select
+            class="col-xs-12 col-sm-8"
+            dense
+            v-model="Autherise"
+            outlined
+            :options="option"
+            label="ผู้บังคับบัญชา"
+          />
+          <div class="col-xs-12 col-sm-4">
+            <datepicker
+              menu-class-name="modalfix"
+              v-model="dateAutherise"
+              :locale="'th'"
+              autoApply
+              borderless
+              :enableTimePicker="false"
+              week-start="0"
+            >
+              <template #year="{ year }">
+                {{ year + 543 }}
+              </template>
+              <template #year-overlay-value="{ value }">
+                {{ parseInt(value + 543) }}
+              </template>
+              <template #trigger>
+                <q-input
+                  outlined
+                  dense
+                  class="full-width datepicker col-3"
+                  :model-value="
+                    dateAutherise != null ? date2Thai(dateAutherise) : null
+                  "
+                  :label="`${'ลงวันที่'}`"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                >
+                  <template v-slot:prepend>
+                    <q-icon
+                      name="event"
+                      class="cursor-pointer"
+                      style="color: var(--q-primary)"
+                    >
+                    </q-icon>
+                  </template>
+                </q-input>
+              </template>
+            </datepicker>
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-toolbar class="text-primary">
+      <q-space />
+      <q-btn label="บันทึก" color="secondary" @click="savaForm" />
+    </q-toolbar>
   </div>
 </template>
 
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
new file mode 100644
index 000000000..228f8de5a
--- /dev/null
+++ b/src/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ref, defineAsyncComponent } from "vue";
+const tab = ref<string>("save1");
+const changeTab = (tabVal: string) => {
+  tab.value = tabVal
+}
+const Header = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Header.vue")
+);
+const FormEvaluateScore = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue")
+)
+</script>  
+
+<template>
+  <Header :change-tab="changeTab" />
+
+  <q-page-container>
+    <q-tab-panels v-model="tab" animated>
+      <q-tab-panel name="save1">
+        <FormEvaluateScore />
+      </q-tab-panel>
+
+      <q-tab-panel name="save2">
+        <FormEvaluateScore />
+      </q-tab-panel>
+    </q-tab-panels>
+  </q-page-container>
+</template>
\ No newline at end of file
diff --git a/src/modules/05_placement/components/probation/MainDetail.vue b/src/modules/05_placement/components/probation/MainDetail.vue
index 1a58e429e..0eade7fc3 100644
--- a/src/modules/05_placement/components/probation/MainDetail.vue
+++ b/src/modules/05_placement/components/probation/MainDetail.vue
@@ -11,6 +11,9 @@ const TabsTemplate1 = defineAsyncComponent(
 const TabsTemplate2 = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2.vue")
 );
+const TabsTemplate2Format2 = defineAsyncComponent(
+  () => import("@/modules/05_placement/components/probation/FormEvaluation/Template2Format2.vue")
+);
 const TabsTemplate3 = defineAsyncComponent(
   () => import("@/modules/05_placement/components/probation/FormEvaluation/Template3.vue")
 );
@@ -32,109 +35,70 @@ const activeTab = ref<string>("tab1");
 <template>
   <!-- <div class="toptitle text-dark col-12 row items-center">จัดการบัญชี 2</div> -->
   <q-card flat bordered class="col-12">
-    <q-layout
-      view="hHh Lpr lff"
-      container
-      class="shadow-2 rounded-borders page-relative"
-      style="height: 82vh"
-    >
+    <q-layout view="hHh Lpr lff" container class="shadow-2 rounded-borders page-relative" style="height: 82vh">
       <q-header class="bg-grey-1">
         <q-toolbar>
-          <div
-            class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
-          >
-            <q-btn
-              icon="mdi-arrow-left"
-              unelevated
-              round
-              dense
-              flat
-              color="primary"
-              class="q-mr-sm"
-              @click="router.go(-1)"
-            />
+          <div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
+            <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
+              @click="router.go(-1)" />
             การทดลองปฏิบัติหน้าที่ราชการของ นายสมคิด ยอดใจ
           </div>
         </q-toolbar>
         <q-separator />
       </q-header>
-      <q-drawer
-        v-model="drawer"
-        show-if-above
-        :width="150"
-        :breakpoint="500"
-        class="bg-grey-1"
-        bordered
-      >
+      <q-drawer v-model="drawer" show-if-above :width="150" :breakpoint="500" class="bg-grey-1" bordered>
         <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: 0 }">
           <q-list class="text-grey-7">
-            <q-item
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              class="q-py-sm"
-              dense
-              v-ripple
-              :active="activeTab == 'tab1'"
-              @click="activeTab = 'tab1'"
-            >
-              <q-item-section avatar style="min-width: 40px">
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab1'" @click="activeTab = 'tab1'">
+              <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file" />
-              </q-item-section>
+              </q-item-section> -->
 
-              <q-item-section> แบบมอบหมายงาน</q-item-section>
+              <q-item-section> แบบมอบหมายงานฯ</q-item-section>
             </q-item>
 
-            <q-item
-              dense
-              class="q-py-sm"
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              v-ripple
-              :active="activeTab == 'tab2'"
-              @click="activeTab = 'tab2'"
-            >
-              <q-item-section avatar style="min-width: 40px">
+            <q-item dense class="q-py-sm" active-class="text-primary bg-teal-1 text-weight-medium" clickable v-ripple
+              :active="activeTab == 'tab2'" @click="activeTab = 'tab2'">
+              <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-edit" />
-              </q-item-section>
+              </q-item-section> -->
 
               <q-item-section>
-                บันทึกผล
+                แบบบันทึกผล
               </q-item-section>
             </q-item>
 
-            <q-item
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              class="q-py-sm"
-              dense
-              v-ripple
-              :active="activeTab == 'tab3'"
-              @click="activeTab = 'tab3'"
-            >
-              <q-item-section avatar style="min-width: 40px">
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab3'" @click="activeTab = 'tab3'">
+              <!-- <q-item-section avatar style="min-width: 40px">
                 <q-icon size="18px" name="mdi-file-star" />
-              </q-item-section>
+              </q-item-section> -->
 
               <q-item-section>
-                ประเมินผล
+                แบบประเมินผล (ผู้บังคับบัญชา)
               </q-item-section>
             </q-item>
 
-            <q-item
-              active-class="text-primary bg-teal-1 text-weight-medium"
-              clickable
-              class="q-py-sm"
-              dense
-              v-ripple
-              :active="activeTab == 'tab4'"
-              @click="activeTab = 'tab4'"
-            >
-              <q-item-section avatar style="min-width: 40px">
-                <q-icon size="18px" name="mdi-file-chart" />
-              </q-item-section>
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab4'" @click="activeTab = 'tab4'">
+              <!-- <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-star" />
+              </q-item-section> -->
 
               <q-item-section>
-                รายงานการประเมินผล
+                แบบประเมินผล (คณะกรรมการ)
+              </q-item-section>
+            </q-item>
+
+            <q-item active-class="text-primary bg-teal-1 text-weight-medium" clickable class="q-py-sm" dense v-ripple
+              :active="activeTab == 'tab5'" @click="activeTab = 'tab5'">
+              <!-- <q-item-section avatar style="min-width: 40px">
+                <q-icon size="18px" name="mdi-file-chart" />
+              </q-item-section> -->
+
+              <q-item-section>
+                แบบรายงานการประเมินฯ
               </q-item-section>
             </q-item>
           </q-list>
@@ -142,22 +106,24 @@ const activeTab = ref<string>("tab1");
       </q-drawer>
       <q-page-container>
         <q-layout view="hHh Lpr lFf" container style="height: 72vh">
-          <q-tab-panels
-            v-model="activeTab"
-            animated
-            class="shadow-2 rounded-borders"
-            vertical
-          >
+          <q-tab-panels v-model="activeTab" animated class="shadow-2 rounded-borders" vertical>
             <q-tab-panel name="tab1">
               <ProbationFormAssign />
             </q-tab-panel>
 
-            <q-tab-panel name="tab2"> <TabsTemplate1 /></q-tab-panel>
+            <q-tab-panel name="tab2">
+              <TabsTemplate1 />
+            </q-tab-panel>
 
             <q-tab-panel name="tab3">
               <TabsTemplate2 />
             </q-tab-panel>
+
             <q-tab-panel name="tab4">
+              <TabsTemplate2Format2 />
+            </q-tab-panel>
+
+            <q-tab-panel name="tab5">
               <TabsTemplate3 />
             </q-tab-panel>
           </q-tab-panels>
diff --git a/src/modules/06_retirement/components/ListRetirement/AddList.vue b/src/modules/06_retirement/components/ListRetirement/AddList.vue
index 7f72cdc63..98126b058 100644
--- a/src/modules/06_retirement/components/ListRetirement/AddList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/AddList.vue
@@ -12,20 +12,20 @@ const { messageError, success, showLoader, hideLoader } = mixin;
 const route = useRoute();
 
 const type_params = route.params.type;
-const id = route.params.id;
+const retireld_params = route.params.id;
 const props = defineProps({
   retireld: String,
-  listId: String,
+  profileId: String,
   UpdateListId: {
-		type: Function,
-		default: () => console.log("UpdateListId"),
-	},
+    type: Function,
+    default: () => console.log("UpdateListId"),
+  },
 });
 
 const modal = ref<boolean>(false);
 const retireld = ref<any>();
 const type = ref<any>();
-const listId = ref(props.listId);
+const filter = ref<string>("");
 
 const columns = ref<any["columns"]>([
   {
@@ -63,13 +63,6 @@ const columns = ref<any["columns"]>([
     field: "organizationOrganization",
     align: "left",
   },
-  {
-    name: "funtion",
-    required: true,
-    label: "",
-    field: "funtion",
-    align: "left",
-  },
 ]);
 const rows = ref<any>([
   // {
@@ -115,10 +108,8 @@ const rows = ref<any>([
   //   affiliation: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
   // },
 ]);
-const filter = ref<string>("");
-watch(modal, () => {
-  // console.log(props);
 
+watch(modal, () => {
   if (modal.value === true) {
     retireld.value = props.retireld;
     if (type_params === "officer") {
@@ -128,16 +119,15 @@ watch(modal, () => {
     fecthlistRetire();
   }
 });
-const updateListData = (retireld: string, pId: string) => {
-    props.UpdateListId(retireld, pId);
-};
+// fecth profile
 const fecthlistRetire = async () => {
   showLoader();
   await http
     .get(config.API.profileOrganizRoot)
     .then((res) => {
+      // console.log(res);
+
       const id = res.data.result[0].id;
-      // console.log(id);
       if (id !== "") {
         findlist(id);
       }
@@ -146,13 +136,11 @@ const fecthlistRetire = async () => {
       messageError($q, e);
     });
 };
-
 const findlist = async (id: string) => {
   let data = [{}];
   if (type.value === "officer") {
     data = [{ criteriaType: "is_retire", criteriaValue: "false" }];
   } else if (type.value === "all") {
-    // console.log("all");
     data = [
       { criteriaType: "is_retire", criteriaValue: "false" },
       { criteriaType: "employee_class", criteriaValue: "perm" },
@@ -181,15 +169,16 @@ const findlist = async (id: string) => {
       hideLoader();
     });
 };
+
+// putlist
 const clickAdd = (props: any) => {
   // console.log("props===>",props.row.id)
   if (retireld.value == undefined) {
-    retireld.value = id;
+    retireld.value = retireld_params;
   }
 
   let data: any = props.row.id;
-
-  console.log("retireld & profileId",retireld.value, data);
+  // console.log("retireld & profileId", retireld.value, data);
 
   $q.dialog({
     title: "ยืนยันการเพิ่มข้อมูล",
@@ -219,6 +208,11 @@ const clickAdd = (props: any) => {
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+// update retireld
+const updateListData = (retireld: string, pId: string) => {
+  props.UpdateListId(retireld, pId);
+};
+
 const paging = ref<boolean>(true);
 const pagination = ref({
   sortBy: "fullname",
@@ -296,6 +290,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <span class="row text-black">{{ col.label }}</span>
                 </div>
               </q-th>
+              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -314,7 +309,6 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-td key="organizationOrganization" :props="props">
                 {{ props.row.organizationOrganization }}
               </q-td>
-
               <q-td>
                 <q-btn
                   outline
diff --git a/src/modules/06_retirement/components/ListRetirement/TableList.vue b/src/modules/06_retirement/components/ListRetirement/TableList.vue
index 249ff5489..c94de4d27 100644
--- a/src/modules/06_retirement/components/ListRetirement/TableList.vue
+++ b/src/modules/06_retirement/components/ListRetirement/TableList.vue
@@ -8,7 +8,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 const route = useRoute();
-const $q = useQuasar(); //ใช้ noti quasar
+const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, success } = mixin;
 const type_params = route.params.type;
@@ -20,6 +20,142 @@ const note = ref<string>("");
 const retireProfileId = ref<string>("");
 const retireld = ref<string>();
 const profileId = ref<string>("");
+const filter = ref<string>("");
+
+const columns = ref<any["columns"]>([
+  {
+    name: "order",
+    label: "ลำดับ",
+    title: "ลำดับ",
+    field: "order",
+    align: "left",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "fixname",
+    align: "left",
+    label: "คำนำหน้านาม",
+    title: "คำนำหน้านาม",
+    field: "fixname",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ - นามสกุล",
+    title: "ชื่อ - นามสกุล",
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "organizationOrganization",
+    align: "left",
+    label: "สังกัด",
+    title: "สังกัด",
+    field: "organizationOrganization",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionType",
+    align: "left",
+    label: "ตำแหน่ง (ประเภท)",
+    title: "ตำแหน่ง",
+    subtitle: "ประเภท",
+    field: "positionType",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง (ทางการบริหาร)",
+    title: "ตำแหน่ง",
+    subtitle: "ทางการบริหาร",
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionLavel",
+    align: "left",
+    label: "ตำแหน่ง (ในสายงาน/ระดับ)",
+    title: "ตำแหน่ง",
+    subtitle: "ในสายงาน/ระดับ",
+    field: "positionLavel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "positionNumber",
+    align: "left",
+    label: "ตำแหน่ง (เลขที่) ",
+    title: "ตำแหน่ง",
+    subtitle: "เลขที่",
+    field: "positionNumber",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "govGroup",
+    align: "left",
+    label: "ส่วนราชการ (ระดับฝ่าย/กลุ่มงาน/ส่วน)",
+    title: "ส่วนราชการ",
+    subtitle: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
+    field: "govGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "govOffice",
+    align: "left",
+    label: "ส่วนราชการ (ระดับสถาบัน/สำนักงาน/กอง)",
+    title: "ส่วนราชการ",
+    subtitle: "ระดับสถาบัน/สำนักงาน/กอง",
+    field: "govOffice",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "bureau",
+    align: "left",
+    label: "หน่วยงาน",
+    title: "หน่วยงาน",
+    field: "bureau",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>([
+  // {
+  //   fixname: "นางสาว",
+  //   name: "รัชภรณ์ ภัคดี",
+  //   brand: "ฝ่ายบริหารทั่วไป",
+  //   positionType: "บริหาร",
+  //   positionManager: "จัดการทั่วไป",
+  //   positionLavel: "ชำนาญการ",
+  //   positionNumber: "กบห.2",
+  //   govGroup: "ฝ่ายบริหารทั่วไป",
+  //   govOffice: "ฝ่ายบริหารทั่วไป",
+  //   bureau: "บริหาร",
+  // },
+]);
+const visibleColumns = ref<string[]>([
+  "order",
+  "fixname",
+  "name",
+  "organizationOrganization",
+  "positionType",
+  "position",
+  "positionLavel",
+  "positionNumber",
+  "govGroup",
+  "govOffice",
+  "bureau",
+]);
 
 onMounted(() => {
   // console.log(route.params);
@@ -29,7 +165,7 @@ onMounted(() => {
     fecthlist(retireld_params);
   }
 });
-
+// fecthlist
 const fecthlistprofile = async (type: any, year: any) => {
   showLoader();
   await http
@@ -39,6 +175,7 @@ const fecthlistprofile = async (type: any, year: any) => {
       retireld.value = res.data.result.id;
       rows.value = res.data.result.profile.map((e: any) => ({
         id: e.id,
+        profileId: e.profileId,
         order: e.order,
         fixname: e.prefix,
         name: e.fullName,
@@ -57,10 +194,10 @@ const fecthlistprofile = async (type: any, year: any) => {
       hideLoader();
     });
 };
-const fecthlist = async (id: any) => {
+const fecthlist = async (retireld: any) => {
   showLoader();
   await http
-    .get(config.API.listRetire(id))
+    .get(config.API.listRetire(retireld))
     .then((res: any) => {
       // retireld.value = res.data.result.id;
       rows.value = res.data.result.map((e: any) => ({
@@ -85,172 +222,11 @@ const fecthlist = async (id: any) => {
       hideLoader();
     });
 };
-const columns = ref<any["columns"]>([
-  {
-    name: "order",
-    required: true,
-    label: "ลำดับ",
-    field: "order",
-    align: "left",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "fixname",
-    align: "left",
-    label: "คำนำหน้านาม",
-    field: "fixname",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ - นามสกุล",
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "organizationOrganization",
-    align: "left",
-    label: "สังกัด",
-    field: "organizationOrganization",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionType",
-    align: "left",
-    label: "ตำแหน่ง",
-    sublabel: "ประเภท",
-    field: "positionType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง ",
-    sublabel: "ทางการบริหาร",
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionLavel",
-    align: "left",
-    label: "ตำแหน่ง ",
-    sublabel: "ในสายงาน/ระดับ",
-    field: "positionLavel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "positionNumber",
-    align: "left",
-    label: "ตำแหน่ง ",
-    sublabel: "เลขที่",
-    field: "positionNumber",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "govGroup",
-    align: "left",
-    label: "ส่วนราชการ ",
-    sublabel: "ระดับฝ่าย/กลุ่มงาน/ส่วน",
-    field: "govGroup",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "govOffice",
-    align: "left",
-    label: "ส่วนราชการ ",
-    sublabel: "ระดับสถาบัน/สำนักงาน/กอง",
-    field: "govOffice",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "bureau",
-    align: "left",
-    label: "หน่วยงาน",
-    field: "bureau",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "note",
-    align: "left",
-    label: "",
-    field: "",
-  },
-  {
-    name: "button",
-    align: "left",
-    label: "",
-    field: "",
-  },
-]);
-const rows = ref<any>([
-  // {
-  //   fixname: "นางสาว",
-  //   name: "รัชภรณ์ ภัคดี",
-  //   brand: "ฝ่ายบริหารทั่วไป",
-  //   positionType: "บริหาร",
-  //   positionManager: "จัดการทั่วไป",
-  //   positionLavel: "ชำนาญการ",
-  //   positionNumber: "กบห.2",
-  //   govGroup: "ฝ่ายบริหารทั่วไป",
-  //   govOffice: "ฝ่ายบริหารทั่วไป",
-  //   bureau: "บริหาร",
-  // },
-  // {
-  //   fixname: "นางสาว",
-  //   name: "รัชภรณ์ ภัคดี",
-  //   brand: "ฝ่ายบริหารทั่วไป",
-  //   positionType: "บริหาร",
-  //   positionManager: "จัดการทั่วไป",
-  //   positionLavel: "ชำนาญการ",
-  //   positionNumber: "กบห.2",
-  //   govGroup: "ฝ่ายบริหารทั่วไป",
-  //   govOffice: "ฝ่ายบริหารทั่วไป",
-  //   bureau: "บริหาร",
-  // },
-  // {
-  //   fixname: "นางสาว",
-  //   name: "รัชภรณ์ ภัคดี",
-  //   brand: "ฝ่ายบริหารทั่วไป",
-  //   positionType: "บริหาร",
-  //   positionManager: "จัดการทั่วไป",
-  //   positionLavel: "ชำนาญการ",
-  //   positionNumber: "กบห.2",
-  //   govGroup: "ฝ่ายบริหารทั่วไป",
-  //   govOffice: "ฝ่ายบริหารทั่วไป",
-  //   bureau: "บริหาร",
-  // },
-]);
-const visibleColumns = ref<any>([
-  "order",
-  "fixname",
-  "name",
-  "organizationOrganization",
-  "positionType",
-  "position",
-  "positionLavel",
-  "positionNumber",
-  "govGroup",
-  "govOffice",
-  "bureau",
-  "note",
-  "button",
-]);
-const filter = ref<string>("");
-
+// DelProfile
 const clickDelete = (prop: any) => {
-  // console.log(prop.id);
+  console.log(prop);
+
+  let retireProfileId = prop.profileId;
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
     message: "ต้องการลบข้อมูลนี้ใช่หรือไม่?",
@@ -262,31 +238,28 @@ const clickDelete = (prop: any) => {
   })
     .onOk(async () => {
       await http
-        .delete(config.API.profileRetire(prop.id))
+        .delete(config.API.profileRetire(retireProfileId))
         .then(() => {
           success($q, "ลบข้อมูลสำเร็จ");
         })
         .catch((e) => {
           messageError($q, e);
         })
-        .finally(() => {
+        .finally(async () => {
           if (retireld_params === undefined) {
-            fecthlistprofile(type_params, year_params);
-          } else fecthlist(retireld_params);
+            await fecthlistprofile(type_params, year_params);
+          } else await fecthlist(retireld_params);
         });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
-const backHistory = () => {
-  window.history.back();
-};
-const fetchReason = async (val: string) => {
+// note
+const fetchReason = async (prop: string) => {
   await http
-    .get(config.API.reasonId(val))
+    .get(config.API.reasonId(prop))
     .then((res: any) => {
-      // console.log(res.data.result);
-
+      console.log(res.data.result);
       note.value = res.data.result.reason;
       retireProfileId.value = res.data.result.id;
     })
@@ -317,29 +290,31 @@ const saveNote = () => {
         .catch((e) => {
           messageError($q, e);
         })
-        .finally(() => {
-          fecthlist(retireld_params);
+        .finally(async () => {
+          await fecthlist(retireld_params);
           modalNote.value = false;
         });
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
+
+const UpdateListId = (retireld: string, pId: string) => {
+  profileId.value = pId;
+  fecthlist(retireld);
+  console.log("profileId", profileId.value);
+};
+const backHistory = () => {
+  window.history.back();
+};
 const visibleNote = computed(() => {
   if (note.value === "" || note.value === undefined) {
     return true;
   }
 });
-
-const UpdateListId = (retireld: string, pId: string) => {
-  profileId.value = pId
-  fecthlist(retireld)
-  console.log("profileId",profileId.value);
-
-};
 // const saveList = () => {
 //   $q.dialog({
-//     title: "ยืนยันกาบันทึกข้อมูล",
+//     title: "ยืนยันการบันทึกข้อมูล",
 //     message: "ต้องการบันทึกข้อมูลนี้ใช่หรือไม่?",
 //     cancel: {
 //       flat: true,
@@ -404,7 +379,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
           :profile-id="profileId"
           :UpdateListId="UpdateListId"
         />
-        <!-- <q-btn flat round color="blue-12" icon="save" @click="saveList">
+        <!-- <q-btn flat round style="color: #016987;" icon="save" @click="saveList">
           <q-tooltip>บันทึกข้อมูล</q-tooltip>
         </q-btn> -->
         <q-btn color="primary" flat round icon="download">
@@ -460,7 +435,12 @@ const paginationLabel = (start: number, end: number, total: number) => {
             options-cover
             style="min-width: 150px"
             class="gt-xs q-ml-sm"
-          />
+          >
+            <!-- <template v-slot:option="{ opt }">
+              <div>{{ opt.label }}</div>
+              <div class="sublabel">{{ opt.sublabel }}</div>
+            </template> -->
+          </q-select>
         </q-tabs>
       </q-toolbar>
 
@@ -470,7 +450,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
           bordered
           :rows="rows"
           :columns="columns"
-          row-key="name"
+          row-key="order"
           class="custom-header-table"
           :filter="filter"
           :visible-columns="visibleColumns"
@@ -482,12 +462,14 @@ const paginationLabel = (start: number, end: number, total: number) => {
             <q-tr :props="props">
               <q-th v-for="col in props.cols" :key="col.name" :props="props">
                 <div class="text-grey-7 text-weight-medium">
-                  <span class="row">{{ col.label }}</span>
+                  <span class="row">{{ col.title }}</span>
                   <span class="row" style="font-size: 12px">{{
-                    col.sublabel
+                    col.subtitle
                   }}</span>
                 </div>
               </q-th>
+              <q-th auto-width />
+              <q-th auto-width />
             </q-tr>
           </template>
           <template v-slot:body="props">
@@ -521,7 +503,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                 props.row.govOffice
               }}</q-td>
               <q-td key="bureau" :props="props">{{ props.row.bureau }}</q-td>
-              <q-td>
+              <q-td auto-width>
                 <q-btn
                   :props="props"
                   flat
@@ -537,7 +519,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                   <q-tooltip>โน้ต</q-tooltip></q-btn
                 >
               </q-td>
-              <q-td>
+              <q-td auto-width>
                 <q-btn
                   flat
                   round