Merge branch 'nice_dev' into develop

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,11 +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="ระดับการประเมินพฤติกรรม">
+              <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>
@@ -227,11 +369,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="apply_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -259,11 +408,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="success_level"
+                max="5"
+                size="sm"
+                color="grey"
+                :color-selected="ratingColors"
+                label="ระดับการประเมินพฤติกรรม"
+              >
                 <template v-slot:tip-1>
                   <q-tooltip>ต่ำกว่าความคาดหวังมาก</q-tooltip>
                 </template>
@@ -292,7 +448,8 @@ 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>
@@ -303,15 +460,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>
@@ -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>