From 4a5ffab8f1beaa24266d557774a9fdc3f3a596e6 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 26 Sep 2023 16:02:06 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=9A=E0=B8=9A=E0=B8=97=E0=B8=94?=
 =?UTF-8?q?=E0=B8=A5=E0=B8=AD=E0=B8=87=E0=B8=87=E0=B8=B2=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04_registry/components/Profile.vue        |   2 -
 .../probation/FormEvaluation/FormEvaluate.vue |  34 +-
 .../FormEvaluation/FormEvaluateAdd.vue        |  25 +-
 .../FormEvaluation/FormEvaluateScore.vue      |  28 +-
 .../FormEvaluation/FormEvaluateScoreAdd.vue   | 632 ++++++++++++++----
 5 files changed, 573 insertions(+), 148 deletions(-)

diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index e745a6b8e..034d853d8 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -833,8 +833,6 @@ const fetchData = async () => {
       const reason = reasonOptions.value.filter(
         (r: DataOption) => r.id == data.leaveReason
       );
-      console.log(reason);
-
       if (reason.length > 0) {
         leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
       } else if (data.leaveReason !== null && data.leaveReason !== "") {
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 3234ca4e0..471b59e0a 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -76,7 +76,7 @@ const edit = () => {
 
 const cancel = () => {
   status.value = false;
-  fecthAssign()
+  fecthAssign();
 };
 
 const props = defineProps({
@@ -89,8 +89,6 @@ const list2_1 = probationStore.behavior_no1;
 const list2_2 = probationStore.behavior_no2;
 const list2_3 = probationStore.behavior_no3;
 
-
-
 const fecthAssign = async () => {
   showLoader();
   await http
@@ -105,7 +103,9 @@ const fecthAssign = async () => {
         start_date.value = res.data.data.start_date;
         date_finish.value = res.data.data.end_date;
       }
-      Autherise.value = res.data.data.commander.name;
+      Autherise.value =
+        probationStore.director.name +
+        ` (${probationStore.director.PositionLineName}, ${probationStore.director.PositionLevelName}, ${probationStore.director.Oc})`;
     })
     .catch((e) => {
       messageError($q, e);
@@ -269,8 +269,6 @@ onMounted(async () => {
     fetchEvaluate();
   }
 });
-
-
 </script>
 
 <template>
@@ -309,8 +307,28 @@ onMounted(async () => {
     <div class="row col-12 q-gutter-lg">
       <div class="col-12 row">
         <div class="col-12 text-top0 row items-center">
+          <div class="col-12 row text-top0">
+            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ probationStore.person.name }}
+          </div>
+          <div class="col-12 q-pl-md q-pb-md">
+            <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+            <div class="col-12">
+              <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
+              {{ probationStore.person.PositionLineName }}
+            </div>
+            <div class="col-12">
+              <span class="text-top0 q-pl-sm">ระดับ</span>
+              {{ probationStore.person.PositionLevelName }}
+            </div>
+            <div class="col-12">
+              <span class="text-top0 q-pl-sm">สังกัด</span>
+              {{ probationStore.person.Oc }}
+            </div>
+          </div>
+
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-          วันเริ่มทดลองปฏิบัติหน้าที่ราชการ ตั้งแต่วันที่
+          การทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
           <span class="text-black q-px-sm">{{
             date2Thai(assign.date_start)
           }}</span>
@@ -321,6 +339,7 @@ onMounted(async () => {
         </div>
         <div class="col-12 text-top0 row items-center">
           <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+          แบบประเมินผล
           <span class="text-primary q-pr-sm">{{
             "ครั้งที่ " + evaluate_no
           }}</span>
@@ -1109,6 +1128,7 @@ onMounted(async () => {
           </div>
         </div>
       </div>
+
       <!-- <Footer /> -->
       <q-toolbar class="text-primary" v-if="routeName == 'FormEvaluateAdd'">
         <q-space />
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
index 83e72a855..1df082674 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -79,7 +79,9 @@ const fecthAssign = async (id: string) => {
       assign.value = res.data.data.assign;
       commander.value = res.data.data.commander;
       option.value.push(commander.value);
-      Autherise.value = commander.value.name;
+      Autherise.value =
+        res.data.data.commander.name +
+        ` (${res.data.data.commander.PositionLineName}, ${res.data.data.commander.PositionLevelName}, ${res.data.data.commander.Oc})`;
       evaluate_no.value = res.data.data.evaluate_no;
       start_date.value = res.data.data.start_date;
       date_finish.value = res.data.data.end_date;
@@ -303,8 +305,26 @@ onMounted(async () => {
         <div class="row col-12 q-gutter-lg">
           <div class="col-12 row">
             <div class="col-12 text-top0 row items-center">
+              <div class="col-12 row text-top0">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ person.name }}
+              </div>
+              <div class="col-12 q-pl-md q-pb-md">
+                <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+                <div class="col-12">
+                  <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
+                  {{ person.PositionLineName }}
+                </div>
+                <div class="col-12">
+                  <span class="text-top0 q-pl-sm">ระดับ</span>
+                  {{ person.PositionLevelName }}
+                </div>
+                <div class="col-12">
+                  <span class="text-top0 q-pl-sm">สังกัด</span> {{ person.Oc }}
+                </div>
+              </div>
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              วันเริ่มทดลองปฏิบัติหน้าที่ราชการ ตั้งแต่วันที่
+              การทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
               <span class="text-black q-px-sm">{{
                 date2Thai(assign.date_start)
               }}</span>
@@ -315,6 +335,7 @@ onMounted(async () => {
             </div>
             <div class="col-12 text-top0 row items-center">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              แบบประเมินผล
               <span class="text-primary q-pr-sm">{{
                 "ครั้งที่ " + round
               }}</span>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index 38fcb3f63..c7114e3a3 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -36,7 +36,7 @@ const edit = () => {
 };
 const cancel = () => {
   status.value = false;
-  fecthAssign()
+  fecthAssign();
 };
 const evaluate_no = ref<number>();
 const evaluate_id = ref<string>("");
@@ -442,8 +442,27 @@ onMounted(async () => {
       <div class="row col-12 q-gutter-lg">
         <div class="col-12 row">
           <div class="col-12 text-top0 row items-center">
+            <div class="col-12 row text-top0">
+              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+              ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ probationStore.person.name }}
+            </div>
+            <div class="col-12 q-pl-md q-pb-md">
+              <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+              <div class="col-12">
+                <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
+                {{ probationStore.person.PositionLineName }}
+              </div>
+              <div class="col-12">
+                <span class="text-top0 q-pl-sm">ระดับ</span>
+                {{ probationStore.person.PositionLevelName }}
+              </div>
+              <div class="col-12">
+                <span class="text-top0 q-pl-sm">สังกัด</span>
+                {{ probationStore.person.Oc }}
+              </div>
+            </div>
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-            วันเริ่มทดลองปฏิบัติหน้าที่ราชการ ตั้งแต่วันที่
+            การทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
             <span class="text-black q-px-sm">{{
               date2Thai(assign.date_start)
             }}</span>
@@ -454,6 +473,7 @@ onMounted(async () => {
           </div>
           <div class="col-12 text-top0 row items-center">
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+            แบบประเมินผล
             <span class="text-primary q-pr-sm">{{
               "ครั้งที่ " + evaluate_no
             }}</span>
@@ -1147,9 +1167,7 @@ onMounted(async () => {
 
         <div class="row col-12 q-gutter-lg no-margin justify-center">
           <div class="col-xs-12 col-sm-11 row justify-center">
-            <div class="col-12 text-top0 items-center">
-              สรุปผลการพัฒนา
-            </div>
+            <div class="col-12 text-top0 items-center">สรุปผลการพัฒนา</div>
             <div class="col-12">
               <q-select
                 :disable="!status"
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
index 8ff5366bd..4df2413f2 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -6,7 +6,7 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import criterion from "@/modules/05_placement/components/Other/Criterion.vue"
+import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
@@ -113,8 +113,6 @@ const list2_1 = probationStore.behavior_no1;
 const list2_2 = probationStore.behavior_no2;
 const list2_3 = probationStore.behavior_no3;
 
-
-
 // score
 const score1 = computed(() => {
   if (
@@ -202,8 +200,8 @@ const percent_score2: any = computed(() => {
   return percent2.toFixed(2);
 });
 const percent_sum: any = computed(() => {
-  let sum = ((Number(percent_score1.value) + Number(percent_score2.value)) / 2);
-  evaluate_result.value = (sum > 60 ? 1 : 0);
+  let sum = (Number(percent_score1.value) + Number(percent_score2.value)) / 2;
+  evaluate_result.value = sum > 60 ? 1 : 0;
   return sum.toFixed(2);
 });
 const score4 = computed(() => {
@@ -215,12 +213,11 @@ const score4 = computed(() => {
   );
 });
 const score5 = computed(() => {
-  const total = (
+  const total =
     Number(orientation_percent.value) +
     Number(self_learning_percent.value) +
     Number(training_seminar_percent.value) +
-    Number(other_training_percent.value)
-  );
+    Number(other_training_percent.value);
   develop_result.value = total > 60 ? 1 : 0;
 
   return total;
@@ -236,7 +233,6 @@ const lengthdiscipline_level = computed(() => {
 });
 const variablesToWatch = [learn_level, apply_level, success_level];
 const savaForm = async () => {
-
   let hasError = false;
   if (
     learn_level.value === 0 ||
@@ -276,7 +272,6 @@ const savaForm = async () => {
         dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
       }
     });
-
   }
 
   if (hasError === true) {
@@ -297,7 +292,6 @@ const savaForm = async () => {
 
     dialogMessageNotify($q, "กรุณากรอกข้อมูลให้ครบ");
   }
-
 };
 const putformData = () => {
   const data = {
@@ -394,9 +388,19 @@ watch(lengthdiscipline_level, (newLength) => {
   <q-form ref="myForm">
     <q-card class="my-card" flat bordered>
       <q-toolbar>
-        <div class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md">
-          <q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm"
-            @click="router.go(-1)" />
+        <div
+          class="text-h6 text-weight-medium text-dark col-12 row items-center q-py-md"
+        >
+          <q-btn
+            icon="mdi-arrow-left"
+            unelevated
+            round
+            dense
+            flat
+            color="primary"
+            class="q-mr-sm"
+            @click="router.go(-1)"
+          />
           การทดลองปฏิบัติหน้าที่ราชการของ {{ person.name }}
         </div>
       </q-toolbar>
@@ -410,8 +414,27 @@ watch(lengthdiscipline_level, (newLength) => {
           <div class="row col-12 q-gutter-lg">
             <div class="col-12 row">
               <div class="col-12 text-top0 row items-center">
+                <div class="col-12 row text-top0">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  ผู้ทดลองปฏิบัติหน้าที่ราชการ {{ person.name }}
+                </div>
+                <div class="col-12 q-pl-md q-pb-md">
+                  <!-- <div class="col-12"><span class="text-top0 q-pl-sm">ตำแหน่ง</span> {{ person.Position }}</div> -->
+                  <div class="col-12">
+                    <span class="text-top0 q-pl-sm">ตำแหน่งในสายงาน</span>
+                    {{ person.PositionLineName }}
+                  </div>
+                  <div class="col-12">
+                    <span class="text-top0 q-pl-sm">ระดับ</span>
+                    {{ person.PositionLevelName }}
+                  </div>
+                  <div class="col-12">
+                    <span class="text-top0 q-pl-sm">สังกัด</span>
+                    {{ person.Oc }}
+                  </div>
+                </div>
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                วันเริ่มทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
+                การทดลองปฎิบัติหน้าที่ราชการ ตั้งแต่วันที่
                 <span class="text-black q-px-sm">{{
                   date2Thai(assign.date_start)
                 }}</span>
@@ -422,6 +445,7 @@ watch(lengthdiscipline_level, (newLength) => {
               </div>
               <div class="col-12 text-top0 row items-center">
                 <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                แบบประเมินผล
                 <span class="text-primary q-pr-sm">{{
                   `ครั้งที่ ${evaluate_no}`
                 }}</span>
@@ -452,26 +476,46 @@ watch(lengthdiscipline_level, (newLength) => {
             <div class="col-12 row no-margin">
               <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
                 <q-list dense>
-                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[0].value)">
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[0].value)"
+                  >
                     <q-item-section>
                       <q-item-label>
-                        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                        1.1. ความสามารถในการเรียนรู้งาน</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="ระดับการประเมินพฤติกรรม">
+                      <q-rating
+                        v-model="learn_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
                         <template v-slot:tip-1>
                           <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                         </template>
                         <template v-slot:tip-2>
-                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-3>
                           <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                         </template>
                         <template v-slot:tip-4>
-                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-5>
                           <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -484,27 +528,47 @@ watch(lengthdiscipline_level, (newLength) => {
 
               <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
                 <q-list dense>
-                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[1].value)">
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[1].value)"
+                  >
                     <q-item-section>
                       <q-item-label>
-                        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
                         1.2.
-                        ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label>
+                        ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</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="ระดับการประเมินพฤติกรรม">
+                      <q-rating
+                        v-model="apply_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
                         <template v-slot:tip-1>
                           <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                         </template>
                         <template v-slot:tip-2>
-                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-3>
                           <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                         </template>
                         <template v-slot:tip-4>
-                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-5>
                           <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -517,26 +581,46 @@ watch(lengthdiscipline_level, (newLength) => {
 
               <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
                 <q-list dense>
-                  <q-item dense tag="label" v-ripple :class="getBordered(alerts[2].value)">
+                  <q-item
+                    dense
+                    tag="label"
+                    v-ripple
+                    :class="getBordered(alerts[2].value)"
+                  >
                     <q-item-section>
                       <q-item-label>
-                        <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                        1.3. ความสำเร็จของงานที่ได้รับมอบหมาย</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="ระดับการประเมินพฤติกรรม">
+                      <q-rating
+                        v-model="success_level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
                         <template v-slot:tip-1>
                           <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                         </template>
                         <template v-slot:tip-2>
-                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-3>
                           <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                         </template>
                         <template v-slot:tip-4>
-                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-5>
                           <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -552,43 +636,73 @@ watch(lengthdiscipline_level, (newLength) => {
                   <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" />
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm" />
                         1.4 อื่นๆ
-                        <q-checkbox class="q-ml-sm" dense v-model="etc" @click="
-                          (achievement_other.text = ''),
-                          (achievement_other.level = 0)
-                          " /></q-item-label>
+                        <q-checkbox
+                          class="q-ml-sm"
+                          dense
+                          v-model="etc"
+                          @click="
+                            (achievement_other.text = ''),
+                              (achievement_other.level = 0)
+                          "
+                      /></q-item-label>
                     </q-item-section>
                   </q-item>
                 </q-list>
               </q-card>
 
-              <q-card v-if="etc" class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-card
+                v-if="etc"
+                class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg"
+              >
                 <q-list dense>
                   <q-item dense tag="label" v-ripple>
                     <q-item-section class="q-ml-md">
                       <q-item-label>
-                        <q-input v-model="achievement_other.text" label="กรอกอื่นๆ" dense lazy-rules autogrow
-                          hide-bottom-space outlined class="bg-white" :rules="[
+                        <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="ระดับการประเมินพฤติกรรม">
+                      <q-rating
+                        v-model="achievement_other.level"
+                        max="5"
+                        size="sm"
+                        color="grey"
+                        :color-selected="ratingColors"
+                        label="ระดับการประเมินพฤติกรรม"
+                      >
                         <template v-slot:tip-1>
                           <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                         </template>
                         <template v-slot:tip-2>
-                          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                          <q-tooltip
+                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-3>
                           <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                         </template>
                         <template v-slot:tip-4>
-                          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                          <q-tooltip
+                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                          >
                         </template>
                         <template v-slot:tip-5>
                           <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -619,27 +733,42 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   2.1 ความประพฤติ
                 </div>
-                <q-card :class="getBordered(alerts[3].value)" flat bordered
-                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+                <q-card
+                  :class="getBordered(alerts[3].value)"
+                  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="ระดับการประเมินพฤติกรรม">
+                        <q-rating
+                          v-model="conduct_level[i]"
+                          :val="list.id"
+                          max="5"
+                          size="sm"
+                          color="grey"
+                          :color-selected="ratingColors"
+                          label="ระดับการประเมินพฤติกรรม"
+                        >
                           <template v-slot:tip-1>
                             <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                           </template>
                           <template v-slot:tip-2>
-                            <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                            <q-tooltip
+                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-3>
                             <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                           </template>
                           <template v-slot:tip-4>
-                            <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                            <q-tooltip
+                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-5>
                             <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -647,7 +776,10 @@ watch(lengthdiscipline_level, (newLength) => {
                         </q-rating>
                       </q-item-section>
                     </q-item>
-                    <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                    <q-separator
+                      class="q-my-xs"
+                      v-if="i + 1 < list2_1.length"
+                    />
                   </q-list>
                 </q-card>
               </div>
@@ -656,27 +788,42 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   2.2 ความมีคุณธรรมจริยธรรม
                 </div>
-                <q-card :class="getBordered(alerts[4].value)" flat bordered
-                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+                <q-card
+                  :class="getBordered(alerts[4].value)"
+                  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="ระดับการประเมินพฤติกรรม">
+                        <q-rating
+                          v-model="moral_level[i]"
+                          :val="list.id"
+                          max="5"
+                          size="sm"
+                          color="grey"
+                          :color-selected="ratingColors"
+                          label="ระดับการประเมินพฤติกรรม"
+                        >
                           <template v-slot:tip-1>
                             <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                           </template>
                           <template v-slot:tip-2>
-                            <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                            <q-tooltip
+                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-3>
                             <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                           </template>
                           <template v-slot:tip-4>
-                            <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                            <q-tooltip
+                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-5>
                             <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -684,7 +831,10 @@ watch(lengthdiscipline_level, (newLength) => {
                         </q-rating>
                       </q-item-section>
                     </q-item>
-                    <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                    <q-separator
+                      class="q-my-xs"
+                      v-if="i + 1 < list2_2.length"
+                    />
                   </q-list>
                 </q-card>
               </div>
@@ -693,27 +843,42 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   2.3 การรักษาวินัย
                 </div>
-                <q-card flat :class="getBordered(alerts[5].value)" bordered
-                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+                <q-card
+                  flat
+                  :class="getBordered(alerts[5].value)"
+                  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="ระดับการประเมินพฤติกรรม">
+                        <q-rating
+                          v-model="discipline_level[i]"
+                          :val="list.id"
+                          max="5"
+                          size="sm"
+                          color="grey"
+                          :color-selected="ratingColors"
+                          label="ระดับการประเมินพฤติกรรม"
+                        >
                           <template v-slot:tip-1>
                             <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                           </template>
                           <template v-slot:tip-2>
-                            <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                            <q-tooltip
+                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-3>
                             <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                           </template>
                           <template v-slot:tip-4>
-                            <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                            <q-tooltip
+                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-5>
                             <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -721,7 +886,10 @@ watch(lengthdiscipline_level, (newLength) => {
                         </q-rating>
                       </q-item-section>
                     </q-item>
-                    <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                    <q-separator
+                      class="q-my-xs"
+                      v-if="i + 1 < list2_3.length"
+                    />
                   </q-list>
                 </q-card>
               </div>
@@ -729,36 +897,65 @@ watch(lengthdiscipline_level, (newLength) => {
                 <div class="col-12 text-top0 row items-center q-pl-lg">
                   <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
                   2.4 อื่นๆ
-                  <q-checkbox class="q-ml-sm" dense v-model="etc2" @click="
-                    (behavio_orther.text = ''), (behavio_orther.level = 0)
-                    " />
+                  <q-checkbox
+                    class="q-ml-sm"
+                    dense
+                    v-model="etc2"
+                    @click="
+                      (behavio_orther.text = ''), (behavio_orther.level = 0)
+                    "
+                  />
                 </div>
-                <q-card v-if="etc2" flat bordered class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1">
+                <q-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="[
+                          <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="ระดับการประเมินพฤติกรรม">
+                        <q-rating
+                          v-model="behavio_orther.level"
+                          max="5"
+                          size="sm"
+                          color="grey"
+                          :color-selected="ratingColors"
+                          label="ระดับการประเมินพฤติกรรม"
+                        >
                           <template v-slot:tip-1>
                             <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
                           </template>
                           <template v-slot:tip-2>
-                            <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
+                            <q-tooltip
+                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-3>
                             <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
                           </template>
                           <template v-slot:tip-4>
-                            <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
+                            <q-tooltip
+                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
+                            >
                           </template>
                           <template v-slot:tip-5>
                             <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
@@ -769,7 +966,9 @@ watch(lengthdiscipline_level, (newLength) => {
                   </q-list>
                 </q-card>
               </div>
-              <div class="text-top0 col-xs-12 col-sm-11 q-pt-sm q-px-md q-my-none">
+              <div
+                class="text-top0 col-xs-12 col-sm-11 q-pt-sm q-px-md q-my-none"
+              >
                 <div class="row col-12 justify-between q-py-sm">
                   <div class="text-black">คะแนนรวมพฤติกรรมการปฎิบัติราชการ</div>
                   <div class="text-weight-bold text-black">{{ score2 }}</div>
@@ -790,9 +989,14 @@ watch(lengthdiscipline_level, (newLength) => {
                   <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" />
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
                         3.1.
-                        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label>
+                        ผลสัมฤทธิ์ของการทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+                      >
                     </q-item-section>
                     <q-item-section>
                       <q-item-label style="color: gray">
@@ -823,9 +1027,14 @@ watch(lengthdiscipline_level, (newLength) => {
                   <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" />
+                        <q-icon
+                          name="mdi-label"
+                          color="grey-4"
+                          class="q-pr-sm"
+                        />
                         3.2.
-                        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label>
+                        พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ</q-item-label
+                      >
                     </q-item-section>
                     <q-item-section>
                       <q-item-label style="color: gray">
@@ -855,7 +1064,9 @@ watch(lengthdiscipline_level, (newLength) => {
                 <q-list dense>
                   <q-item dense tag="label" v-ripple>
                     <q-item-section>
-                      <q-item-label class="text-black"> ผลคะแนนรวม</q-item-label>
+                      <q-item-label class="text-black">
+                        ผลคะแนนรวม</q-item-label
+                      >
                     </q-item-section>
                     <q-item-section>
                       <q-item-label style="color: gray">
@@ -890,7 +1101,11 @@ watch(lengthdiscipline_level, (newLength) => {
                   <q-avatar class="bg-grey-2 q-mr-sm" size="28px">4</q-avatar>
                   การพัฒนาผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
                 </div>
-                <q-card flat bordered class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1">
+                <q-card
+                  flat
+                  bordered
+                  class="col-xs-12 col-sm-11 col-md-11 q-pa-sm bg-grey-1"
+                >
                   <div class="col-xs-12 col-sm-11 col-md-11 q-my-sm">
                     <div class="row q-gutter-md q-pl-md">
                       <div class="col-8 text-weight-medium">หัวข้อ</div>
@@ -902,30 +1117,60 @@ watch(lengthdiscipline_level, (newLength) => {
                   <div class="row q-gutter-md align-center q-pl-md">
                     <div class="col-8">1. การปฐมนิเทศ</div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="orientation" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="orientation"
+                      />
                     </div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="orientation_percent" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="orientation_percent"
+                      />
                     </div>
                   </div>
                   <q-separator class="q-my-xs" />
                   <div class="row q-gutter-md align-center q-pl-md">
                     <div class="col-8">2. การเรียนรู้ด้วยตนเอง</div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="self_learning" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="self_learning"
+                      />
                     </div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="self_learning_percent" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="self_learning_percent"
+                      />
                     </div>
                   </div>
                   <q-separator class="q-my-xs" />
                   <div class="row q-gutter-md align-center q-pl-md">
                     <div class="col-8">3. การอบรมสัมนาร่วมกัน</div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="training_seminar" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="training_seminar"
+                      />
                     </div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="training_seminar_percent" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="training_seminar_percent"
+                      />
                     </div>
                   </div>
                   <q-separator class="q-my-xs" />
@@ -934,10 +1179,20 @@ watch(lengthdiscipline_level, (newLength) => {
                       4. การอบรมอื่น ๆ ตามที่หน่วยงานกำหนด (ถ้ามี)
                     </div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="other_training" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="other_training"
+                      />
                     </div>
                     <div class="col">
-                      <q-input outlined dense type="number" v-model="other_training_percent" />
+                      <q-input
+                        outlined
+                        dense
+                        type="number"
+                        v-model="other_training_percent"
+                      />
                     </div>
                   </div>
                   <q-separator class="q-my-xs" />
@@ -961,13 +1216,25 @@ watch(lengthdiscipline_level, (newLength) => {
                   สรุปผลการพัฒนา
                 </div>
                 <div class="col-12">
-                  <q-select class="col-xs-12" dense v-model="develop_result" outlined :options="develop_result_option"
-                    option-label="name" option-value="value" label="เลือกสรุปผลการพัฒนา" map-options emit-value
-                    hide-bottom-space :rules="[
+                  <q-select
+                    class="col-xs-12"
+                    dense
+                    v-model="develop_result"
+                    outlined
+                    :options="develop_result_option"
+                    option-label="name"
+                    option-value="value"
+                    label="เลือกสรุปผลการพัฒนา"
+                    map-options
+                    emit-value
+                    hide-bottom-space
+                    :rules="[
                       (val) =>
                         (val !== null && val !== undefined) ||
                         'กรุณาเลือกสรุปผลการพัฒนา',
-                    ]" ref="selectResult1" />
+                    ]"
+                    ref="selectResult1"
+                  />
                 </div>
               </div>
             </div>
@@ -978,13 +1245,25 @@ watch(lengthdiscipline_level, (newLength) => {
                   สรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ
                 </div>
                 <div class="col-12">
-                  <q-select class="col-xs-12" dense v-model="evaluate_result" outlined :options="evaluate_result_option"
-                    option-label="name" option-value="value" label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
-                    map-options emit-value hide-bottom-space :rules="[
+                  <q-select
+                    class="col-xs-12"
+                    dense
+                    v-model="evaluate_result"
+                    outlined
+                    :options="evaluate_result_option"
+                    option-label="name"
+                    option-value="value"
+                    label="เลือกสรุปผล การประเมินผลทดลองปฎิบัติหน้าที่ราชการ"
+                    map-options
+                    emit-value
+                    hide-bottom-space
+                    :rules="[
                       (val) =>
                         (val !== null && val !== undefined) ||
                         'กรุณาเลือกสรุปผลการประเมินผลทดลองปฎิบัติหน้าที่ราชการ',
-                    ]" ref="selectResult2" />
+                    ]"
+                    ref="selectResult2"
+                  />
                 </div>
               </div>
             </div>
@@ -1001,11 +1280,26 @@ watch(lengthdiscipline_level, (newLength) => {
                   ประธานคณะกรรมการประเมินผลการปฏิบัติหน้าที่ราชการ
                 </div>
                 <div class="col-12 row q-col-gutter-md">
-                  <q-select class="col-xs-12 col-sm-8" dense v-model="director_id" outlined label="ชื่อ-นามสกุล"
-                    option-label="name" disable />
+                  <q-select
+                    class="col-xs-12 col-sm-8"
+                    dense
+                    v-model="director_id"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    option-label="name"
+                    disable
+                  />
                   <div class="col-xs-12 col-sm-4">
-                    <datepicker menu-class-name="modalfix" v-model="dateAutherise" :locale="'th'" :readonly="!status"
-                      autoApply borderless :enableTimePicker="false" week-start="0">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="dateAutherise"
+                      :locale="'th'"
+                      :readonly="!status"
+                      autoApply
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -1013,10 +1307,25 @@ watch(lengthdiscipline_level, (newLength) => {
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="dateAutherise != null ? date2Thai(dateAutherise) : null
-                          " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                        <q-input
+                          outlined
+                          dense
+                          :disable="!status"
+                          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
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
                             </q-icon>
                           </template>
                         </q-input>
@@ -1032,11 +1341,26 @@ watch(lengthdiscipline_level, (newLength) => {
                   <!-- ความเห็นของผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
                 </div>
                 <div class="col-12 row q-col-gutter-md">
-                  <q-select class="col-xs-12 col-sm-8" dense v-model="director_id2" outlined label="ชื่อ-นามสกุล" disable
-                    option-label="name" />
+                  <q-select
+                    class="col-xs-12 col-sm-8"
+                    dense
+                    v-model="director_id2"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    disable
+                    option-label="name"
+                  />
                   <div class="col-xs-12 col-sm-4">
-                    <datepicker menu-class-name="modalfix" v-model="director1_dated" :locale="'th'" autoApply borderless
-                      :readonly="!status" :enableTimePicker="false" week-start="0">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="director1_dated"
+                      :locale="'th'"
+                      autoApply
+                      borderless
+                      :readonly="!status"
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -1044,12 +1368,25 @@ watch(lengthdiscipline_level, (newLength) => {
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director1_dated != null
-                          ? date2Thai(director1_dated)
-                          : null
-                          " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                        <q-input
+                          outlined
+                          dense
+                          :disable="!status"
+                          class="full-width datepicker col-3"
+                          :model-value="
+                            director1_dated != null
+                              ? date2Thai(director1_dated)
+                              : null
+                          "
+                          :label="`${'ลงวันที่'}`"
+                          :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                        >
                           <template v-slot:prepend>
-                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
                             </q-icon>
                           </template>
                         </q-input>
@@ -1065,11 +1402,26 @@ watch(lengthdiscipline_level, (newLength) => {
                   <!-- ผู้มีอำนาจสั่งบรรจุตามมาตรา 52 -->
                 </div>
                 <div class="col-12 row q-col-gutter-md">
-                  <q-select class="col-xs-12 col-sm-8" dense v-model="director_id3" outlined label="ชื่อ-นามสกุล" disable
-                    option-label="name" />
+                  <q-select
+                    class="col-xs-12 col-sm-8"
+                    dense
+                    v-model="director_id3"
+                    outlined
+                    label="ชื่อ-นามสกุล"
+                    disable
+                    option-label="name"
+                  />
                   <div class="col-xs-12 col-sm-4">
-                    <datepicker menu-class-name="modalfix" v-model="director2_dated" :locale="'th'" autoApply
-                      :readonly="!status" borderless :enableTimePicker="false" week-start="0">
+                    <datepicker
+                      menu-class-name="modalfix"
+                      v-model="director2_dated"
+                      :locale="'th'"
+                      autoApply
+                      :readonly="!status"
+                      borderless
+                      :enableTimePicker="false"
+                      week-start="0"
+                    >
                       <template #year="{ year }">
                         {{ year + 543 }}
                       </template>
@@ -1077,12 +1429,25 @@ watch(lengthdiscipline_level, (newLength) => {
                         {{ parseInt(value + 543) }}
                       </template>
                       <template #trigger>
-                        <q-input outlined dense :disable="!status" class="full-width datepicker col-3" :model-value="director2_dated != null
-                          ? date2Thai(director2_dated)
-                          : null
-                          " :label="`${'ลงวันที่'}`" :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]">
+                        <q-input
+                          outlined
+                          dense
+                          :disable="!status"
+                          class="full-width datepicker col-3"
+                          :model-value="
+                            director2_dated != null
+                              ? date2Thai(director2_dated)
+                              : null
+                          "
+                          :label="`${'ลงวันที่'}`"
+                          :rules="[(val) => !!val || `${'กรุณาเลือกลงวันที่'}`]"
+                        >
                           <template v-slot:prepend>
-                            <q-icon name="event" class="cursor-pointer" style="color: var(--q-primary)">
+                            <q-icon
+                              name="event"
+                              class="cursor-pointer"
+                              style="color: var(--q-primary)"
+                            >
                             </q-icon>
                           </template>
                         </q-input>
@@ -1091,16 +1456,19 @@ watch(lengthdiscipline_level, (newLength) => {
                   </div>
                 </div>
               </div>
-
             </div>
 
-
             <div class="col-12">
               <q-separator size="3px" color="grey-2" />
             </div>
             <div class="row col-12">
               <q-space />
-              <q-btn label="บันทึก" color="secondary" @click="savaForm" v-if="status" />
+              <q-btn
+                label="บันทึก"
+                color="secondary"
+                @click="savaForm"
+                v-if="status"
+              />
             </div>
           </div>
         </div>